feat: Add custom data views with aggregation query

src/dashboard/Dashboard.js

@@ -44,6 +44,7 @@ import SlowQueries from './Analytics/SlowQueries/SlowQueries.react';
 import styles from 'dashboard/Apps/AppsIndex.scss';
 import UsersSettings from './Settings/UsersSettings.react';
 import Webhooks from './Data/Webhooks/Webhooks.react';
+import Views from './Data/Views/Views.react';
 import { AsyncStatus } from 'lib/Constants';
 import baseStyles from 'stylesheets/base.scss';
 import { get } from 'lib/AJAX';
@@ -270,6 +271,8 @@ export default class Dashboard extends React.Component {
 
         <Route path="cloud_code" element={<CloudCode />} />
         <Route path="cloud_code/*" element={<CloudCode />} />
+        <Route path="views/:name" element={<Views />} />
+        <Route path="views" element={<Views />} />
         <Route path="webhooks" element={<Webhooks />} />
 
         <Route path="jobs">{JobsRoute}</Route>

src/dashboard/DashboardView.react.js

@@ -76,6 +76,11 @@ export default class DashboardView extends React.Component {
       });
     }
 
+    coreSubsections.push({
+      name: 'Views',
+      link: '/views',
+    });
+
     //webhooks requires removal of heroku link code, then it should work.
     if (
       features.hooks &&

src/dashboard/Data/Views/CreateViewDialog.react.js

@@ -0,0 +1,111 @@
+import Dropdown from 'components/Dropdown/Dropdown.react';
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import Modal from 'components/Modal/Modal.react';
+import Option from 'components/Dropdown/Option.react';
+import React from 'react';
+import TextInput from 'components/TextInput/TextInput.react';
+import Checkbox from 'components/Checkbox/Checkbox.react';
+
+function isValidJSON(value) {
+  try {
+    JSON.parse(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export default class CreateViewDialog extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      name: '',
+      className: '',
+      query: '[]',
+      showCounter: false,
+    };
+  }
+
+  valid() {
+    return (
+      this.state.name.length > 0 &&
+      this.state.className.length > 0 &&
+      isValidJSON(this.state.query)
+    );
+  }
+
+  render() {
+    const { classes, onConfirm, onCancel } = this.props;
+    return (
+      <Modal
+        type={Modal.Types.INFO}
+        icon="plus"
+        iconSize={40}
+        title="Create a new view?"
+        subtitle="Define a custom query to display data."
+        confirmText="Create"
+        cancelText="Cancel"
+        disabled={!this.valid()}
+        onCancel={onCancel}
+        onConfirm={() =>
+          onConfirm({
+            name: this.state.name,
+            className: this.state.className,
+            query: JSON.parse(this.state.query),
+            showCounter: this.state.showCounter,
+          })
+        }
+      >
+        <Field
+          label={<Label text="Name" />}
+          input={
+            <TextInput
+              value={this.state.name}
+              onChange={name => this.setState({ name })}
+            />
+          }
+        />
+        <Field
+          label={<Label text="Class" />}
+          input={
+            <Dropdown
+              value={this.state.className}
+              onChange={className => this.setState({ className })}
+            >
+              {classes.map(c => (
+                <Option key={c} value={c}>
+                  {c}
+                </Option>
+              ))}
+            </Dropdown>
+          }
+        />
+        <Field
+          label={
+            <Label
+              text="Query"
+              description="An aggregation pipeline that returns an array of items."
+            />
+          }
+          input={
+            <TextInput
+              multiline={true}
+              value={this.state.query}
+              onChange={query => this.setState({ query })}
+            />
+          }
+        />
+        <Field
+          label={<Label text="Show object counter" />}
+          input={
+            <Checkbox
+              checked={this.state.showCounter}
+              onChange={showCounter => this.setState({ showCounter })}
+            />
+          }
+        />
+      </Modal>
+    );
+  }
+}

src/dashboard/Data/Views/DeleteViewDialog.react.js

@@ -0,0 +1,45 @@
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import Modal from 'components/Modal/Modal.react';
+import React from 'react';
+import TextInput from 'components/TextInput/TextInput.react';
+
+export default class DeleteViewDialog extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      confirmation: '',
+    };
+  }
+
+  valid() {
+    return this.state.confirmation === this.props.name;
+  }
+
+  render() {
+    return (
+      <Modal
+        type={Modal.Types.DANGER}
+        icon="warn-outline"
+        title="Delete view?"
+        subtitle="This action cannot be undone!"
+        disabled={!this.valid()}
+        confirmText="Delete"
+        cancelText="Cancel"
+        onCancel={this.props.onCancel}
+        onConfirm={this.props.onConfirm}
+      >
+        <Field
+          label={<Label text="Confirm this action" description="Enter the view name to continue." />}
+          input={
+            <TextInput
+              placeholder="View name"
+              value={this.state.confirmation}
+              onChange={confirmation => this.setState({ confirmation })}
+            />
+          }
+        />
+      </Modal>
+    );
+  }
+}

src/dashboard/Data/Views/EditViewDialog.react.js

@@ -0,0 +1,112 @@
+import Dropdown from 'components/Dropdown/Dropdown.react';
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import Modal from 'components/Modal/Modal.react';
+import Option from 'components/Dropdown/Option.react';
+import React from 'react';
+import TextInput from 'components/TextInput/TextInput.react';
+import Checkbox from 'components/Checkbox/Checkbox.react';
+
+function isValidJSON(value) {
+  try {
+    JSON.parse(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export default class EditViewDialog extends React.Component {
+  constructor(props) {
+    super();
+    const view = props.view || {};
+    this.state = {
+      name: view.name || '',
+      className: view.className || '',
+      query: JSON.stringify(view.query || [], null, 2),
+      showCounter: !!view.showCounter,
+    };
+  }
+
+  valid() {
+    return (
+      this.state.name.length > 0 &&
+      this.state.className.length > 0 &&
+      isValidJSON(this.state.query)
+    );
+  }
+
+  render() {
+    const { classes, onConfirm, onCancel } = this.props;
+    return (
+      <Modal
+        type={Modal.Types.INFO}
+        icon="edit-solid"
+        iconSize={40}
+        title="Edit view?"
+        subtitle="Update the custom query."
+        confirmText="Save"
+        cancelText="Cancel"
+        disabled={!this.valid()}
+        onCancel={onCancel}
+        onConfirm={() =>
+          onConfirm({
+            name: this.state.name,
+            className: this.state.className,
+            query: JSON.parse(this.state.query),
+            showCounter: this.state.showCounter,
+          })
+        }
+      >
+        <Field
+          label={<Label text="Name" />}
+          input={
+            <TextInput
+              value={this.state.name}
+              onChange={name => this.setState({ name })}
+            />
+          }
+        />
+        <Field
+          label={<Label text="Class" />}
+          input={
+            <Dropdown
+              value={this.state.className}
+              onChange={className => this.setState({ className })}
+            >
+              {classes.map(c => (
+                <Option key={c} value={c}>
+                  {c}
+                </Option>
+              ))}
+            </Dropdown>
+          }
+        />
+        <Field
+          label={
+            <Label
+              text="Query"
+              description="An aggregation pipeline that returns an array of items."
+            />
+          }
+          input={
+            <TextInput
+              multiline={true}
+              value={this.state.query}
+              onChange={query => this.setState({ query })}
+            />
+          }
+        />
+        <Field
+          label={<Label text="Show object counter" />}
+          input={
+            <Checkbox
+              checked={this.state.showCounter}
+              onChange={showCounter => this.setState({ showCounter })}
+            />
+          }
+        />
+      </Modal>
+    );
+  }
+}