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/Views.react.js

@@ -0,0 +1,239 @@
+import CategoryList from 'components/CategoryList/CategoryList.react';
+import SidebarAction from 'components/Sidebar/SidebarAction';
+import TableHeader from 'components/Table/TableHeader.react';
+import TableView from 'dashboard/TableView.react';
+import Toolbar from 'components/Toolbar/Toolbar.react';
+import Parse from 'parse';
+import React from 'react';
+import Notification from 'dashboard/Data/Browser/Notification.react';
+import CreateViewDialog from './CreateViewDialog.react';
+import * as ViewPreferences from 'lib/ViewPreferences';
+import { withRouter } from 'lib/withRouter';
+import subscribeTo from 'lib/subscribeTo';
+import { ActionTypes as SchemaActionTypes } from 'lib/stores/SchemaStore';
+
+export default
+@subscribeTo('Schema', 'schema')
+@withRouter
+class Views extends TableView {
+  constructor() {
+    super();
+    this.section = 'Core';
+    this.subsection = 'Views';
+    this.state = {
+      views: [],
+      counts: {},
+      data: [],
+      order: [],
+      columns: {},
+      showCreate: false,
+      lastError: null,
+      lastNote: null,
+    };
+    this.noteTimeout = null;
+    this.action = new SidebarAction('Create a view', () =>
+      this.setState({ showCreate: true })
+    );
+  }
+
+  componentWillMount() {
+    this.props.schema
+      .dispatch(SchemaActionTypes.FETCH)
+      .then(() => this.loadViews(this.context));
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (this.context !== nextContext) {
+      this.props.schema
+        .dispatch(SchemaActionTypes.FETCH)
+        .then(() => this.loadViews(nextContext));
+    }
+    if (this.props.params.name !== nextProps.params.name || this.context !== nextContext) {
+      this.loadData(nextProps.params.name);
+    }
+  }
+
+  loadViews(app) {
+    const views = ViewPreferences.getViews(app.applicationId);
+    this.setState({ views, counts: {} }, () => {
+      views.forEach(view => {
+        if (view.showCounter) {
+          new Parse.Query(view.className)
+            .aggregate(view.query, { useMasterKey: true })
+            .then(res => {
+              this.setState(({ counts }) => ({
+                counts: { ...counts, [view.name]: res.length },
+              }));
+            })
+            .catch(error => {
+              this.showNote(
+                `Request failed: ${error.message || 'Unknown error occurred'}`,
+                true
+              );
+            });
+        }
+      });
+      this.loadData(this.props.params.name);
+    });
+  }
+
+  loadData(name) {
+    if (!name) {
+      this.setState({ data: [], order: [], columns: {} });
+      return;
+    }
+    const view = (this.state.views || []).find(v => v.name === name);
+    if (!view) {
+      this.setState({ data: [], order: [], columns: {} });
+      return;
+    }
+    new Parse.Query(view.className)
+      .aggregate(view.query, { useMasterKey: true })
+      .then(results => {
+        const columns = {};
+        results.forEach(item => {
+          Object.keys(item).forEach(key => {
+            if (columns[key]) {
+              return;
+            }
+            const val = item[key];
+            let type = 'String';
+            if (typeof val === 'number') {
+              type = 'Number';
+            } else if (typeof val === 'boolean') {
+              type = 'Boolean';
+            } else if (val && typeof val === 'object') {
+              if (val.__type === 'Date') {
+                type = 'Date';
+              } else if (val.__type === 'Pointer') {
+                type = 'Pointer';
+              } else if (val.__type === 'File') {
+                type = 'File';
+              } else if (val.__type === 'GeoPoint') {
+                type = 'GeoPoint';
+              } else {
+                type = 'Object';
+              }
+            }
+          columns[key] = { type };
+        });
+      });
+      const colNames = Object.keys(columns);
+      const width = colNames.length > 0 ? 100 / colNames.length : 0;
+      const order = colNames.map(name => ({ name, width }));
+      this.setState({ data: results, order, columns });
+      })
+      .catch(error => {
+        this.showNote(
+          `Request failed: ${error.message || 'Unknown error occurred'}`,
+          true
+        );
+        this.setState({ data: [], order: [], columns: {} });
+      });
+  }
+
+  tableData() {
+    return this.state.data;
+  }
+
+  renderRow(row) {
+    return (
+      <tr key={JSON.stringify(row)}>
+        {this.state.order.map(({ name, width }) => (
+          <td key={name} style={{ width: width + '%' }}>{String(row[name])}</td>
+        ))}
+      </tr>
+    );
+  }
+
+  renderHeaders() {
+    return this.state.order.map(({ name, width }) => (
+      <TableHeader key={name} width={width}>
+        {name}
+      </TableHeader>
+    ));
+  }
+
+  renderEmpty() {
+    return <div>No data available</div>;
+  }
+
+  renderSidebar() {
+    const categories = this.state.views.map(view => ({
+      name: view.name,
+      id: view.name,
+      count: this.state.counts[view.name],
+    }));
+    const current = this.props.params.name || '';
+    return (
+      <CategoryList
+        current={current}
+        linkPrefix={'views/'}
+        categories={categories}
+      />
+    );
+  }
+
+  renderToolbar() {
+    const subsection = this.props.params.name || '';
+    return <Toolbar section="Views" subsection={subsection} />;
+  }
+
+  renderExtras() {
+    let extras = null;
+    if (this.state.showCreate) {
+      let classNames = [];
+      if (this.props.schema?.data) {
+        const classes = this.props.schema.data.get('classes');
+        if (classes) {
+          classNames = Object.keys(classes.toObject());
+        }
+      }
+      extras = (
+        <CreateViewDialog
+          classes={classNames}
+          onCancel={() => this.setState({ showCreate: false })}
+          onConfirm={view => {
+            this.setState(
+              state => ({ showCreate: false, views: [...state.views, view] }),
+              () => {
+                ViewPreferences.saveViews(
+                  this.context.applicationId,
+                  this.state.views
+                );
+                this.loadViews(this.context);
+              }
+            );
+          }}
+        />
+      );
+    }
+    let notification = null;
+    if (this.state.lastError) {
+      notification = <Notification note={this.state.lastError} isErrorNote={true} />;
+    } else if (this.state.lastNote) {
+      notification = <Notification note={this.state.lastNote} isErrorNote={false} />;
+    }
+    return (
+      <>
+        {extras}
+        {notification}
+      </>
+    );
+  }
+
+  showNote(message, isError) {
+    if (!message) {
+      return;
+    }
+    clearTimeout(this.noteTimeout);
+    if (isError) {
+      this.setState({ lastError: message, lastNote: null });
+    } else {
+      this.setState({ lastNote: message, lastError: null });
+    }
+    this.noteTimeout = setTimeout(() => {
+      this.setState({ lastError: null, lastNote: null });
+    }, 3500);
+  }
+}