Migrate Public Dashboard Page to React

client/app/components/dashboards/DashboardGrid.jsx

@@ -34,7 +34,7 @@ const WidgetType = PropTypes.shape({
 const SINGLE = 'single-column';
 const MULTI = 'multi-column';
 
-class DashboardGrid extends React.Component {
+export class DashboardGrid extends React.Component {
   static propTypes = {
     isEditing: PropTypes.bool.isRequired,
     isPublic: PropTypes.bool,

client/app/pages/dashboards/PublicDashboardPage.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { isEmpty } from 'lodash';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import { BigMessage } from '@/components/BigMessage';
+import { PageHeader } from '@/components/PageHeader';
+import { Parameters } from '@/components/Parameters';
+import { DashboardGrid } from '@/components/dashboards/DashboardGrid';
+import { Filters } from '@/components/Filters';
+import { Dashboard } from '@/services/dashboard';
+import { $route as ngRoute } from '@/services/ng';
+import PromiseRejectionError from '@/lib/promise-rejection-error';
+import logoUrl from '@/assets/images/redash_icon_small.png';
+import useDashboard from './useDashboard';
+
+import './PublicDashboardPage.less';
+
+
+function PublicDashboard({ dashboard }) {
+  const { globalParameters, filters, setFilters, refreshDashboard,
+    widgets, loadWidget, refreshWidget } = useDashboard(dashboard);
+
+  return (
+    <div className="container p-t-10 p-b-20">
+      <PageHeader title={dashboard.name} />
+      {!isEmpty(globalParameters) && (
+        <div className="m-b-10 p-15 bg-white tiled">
+          <Parameters parameters={globalParameters} onValuesChange={refreshDashboard} />
+        </div>
+      )}
+      {!isEmpty(filters) && (
+        <div className="m-b-10 p-15 bg-white tiled">
+          <Filters filters={filters} onChange={setFilters} />
+        </div>
+      )}
+      <div id="dashboard-container">
+        <DashboardGrid
+          dashboard={dashboard}
+          widgets={widgets}
+          filters={filters}
+          isEditing={false}
+          isPublic
+          onLoadWidget={loadWidget}
+          onRefreshWidget={refreshWidget}
+        />
+      </div>
+    </div>
+  );
+}
+
+PublicDashboard.propTypes = {
+  dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+class PublicDashboardPage extends React.Component {
+  state = {
+    loading: true,
+    dashboard: null,
+  };
+
+  componentDidMount() {
+    Dashboard.getByToken({ token: ngRoute.current.params.token }).$promise
+      .then(dashboard => this.setState({ dashboard, loading: false }))
+      .catch((error) => { throw new PromiseRejectionError(error); });
+  }
+
+  render() {
+    const { loading, dashboard } = this.state;
+    return (
+      <div className="public-dashboard-page">
+        {loading ? (
+          <div className="container loading-message">
+            <BigMessage
+              className=""
+              icon="fa-spinner fa-2x fa-pulse"
+              message="Loading..."
+            />
+          </div>
+        ) : (
+          <PublicDashboard dashboard={dashboard} />
+        )}
+        <div id="footer">
+          <div className="text-center">
+            <a href="https://redash.io"><img alt="Redash Logo" src={logoUrl} width="38" /></a>
+          </div>
+          Powered by <a href="https://redash.io/?ref=public-dashboard">Redash</a>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default function init(ngModule) {
+  ngModule.component('publicDashboardPage', react2angular(PublicDashboardPage));
+
+  function session($route, Auth) {
+    const token = $route.current.params.token;
+    Auth.setApiKey(token);
+    return Auth.loadConfig();
+  }
+
+  ngModule.config(($routeProvider) => {
+    $routeProvider.when('/public/dashboards/:token', {
+      template: '<public-dashboard-page></public-dashboard-page>',
+      reloadOnSearch: false,
+      resolve: {
+        session,
+      },
+    });
+  });
+
+  return [];
+}
+
+init.init = true;

client/app/pages/dashboards/PublicDashboardPage.less

@@ -0,0 +1,16 @@
+.public-dashboard-page {
+  > .container {
+    min-height: calc(100vh - 95px);
+  }
+
+  .loading-message {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #footer {
+    height: 95px;
+    text-align: center;
+  }
+}

client/app/pages/dashboards/public-dashboard-page.js

@@ -95,4 +95,4 @@ export default function init(ngModule) {
   return [];
 }
 
-init.init = true;
+// init.init = true;

client/app/pages/dashboards/useDashboard.js

@@ -0,0 +1,70 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { isEmpty, isNaN, includes, compact, map } from 'lodash';
+import { $location } from '@/services/ng';
+import { collectDashboardFilters } from '@/services/dashboard';
+
+function getAffectedWidgets(widgets, updatedParameters = []) {
+  return !isEmpty(updatedParameters) ? widgets.filter(
+    widget => Object.values(widget.getParameterMappings()).filter(
+      ({ type }) => type === 'dashboard-level',
+    ).some(
+      ({ mapTo }) => includes(updatedParameters.map(p => p.name), mapTo),
+    ),
+  ) : widgets;
+}
+
+function getRefreshRateFromUrl() {
+  const refreshRate = parseFloat($location.search().refresh);
+  return isNaN(refreshRate) ? null : Math.max(30, refreshRate);
+}
+
+function useDashboard(dashboard) {
+  const [filters, setFilters] = useState([]);
+  const [widgets, setWidgets] = useState(dashboard.widgets);
+  const globalParameters = useMemo(() => dashboard.getParametersDefs(), [dashboard]);
+  const refreshRate = useMemo(getRefreshRateFromUrl, []);
+
+  const loadWidget = useCallback((widget, forceRefresh = false) => {
+    widget.getParametersDefs(); // Force widget to read parameters values from URL
+    setWidgets([...dashboard.widgets]);
+    return widget.load(forceRefresh).finally(() => setWidgets([...dashboard.widgets]));
+  }, [dashboard]);
+
+  const refreshWidget = useCallback(widget => loadWidget(widget, true), [loadWidget]);
+
+  const loadDashboard = useCallback((forceRefresh = false, updatedParameters = []) => {
+    const affectedWidgets = getAffectedWidgets(widgets, updatedParameters);
+    const loadWidgetPromises = compact(affectedWidgets.map(widget => loadWidget(widget, forceRefresh)));
+
+    return Promise.all(loadWidgetPromises).finally(() => {
+      const queryResults = compact(map(widgets, widget => widget.getQueryResult()));
+      const updatedFilters = collectDashboardFilters(dashboard, queryResults, $location.search());
+      setFilters(updatedFilters);
+    });
+  }, [dashboard, widgets, loadWidget]);
+
+  const refreshDashboard = updatedParameters => loadDashboard(true, updatedParameters);
+
+  useEffect(() => {
+    loadDashboard();
+  }, [dashboard]);
+
+  useEffect(() => {
+    if (refreshRate) {
+      const refreshTimer = setInterval(refreshDashboard, refreshRate * 1000);
+      return () => clearInterval(refreshTimer);
+    }
+  }, [refreshRate]);
+
+  return {
+    widgets,
+    globalParameters,
+    filters,
+    setFilters,
+    refreshDashboard,
+    loadWidget,
+    refreshWidget,
+  };
+}
+
+export default useDashboard;

client/app/services/dashboard.js

@@ -7,7 +7,7 @@ export let Dashboard = null; // eslint-disable-line import/no-mutable-exports
 export function collectDashboardFilters(dashboard, queryResults, urlParams) {
   const filters = {};
   _.each(queryResults, (queryResult) => {
-    const queryFilters = queryResult ? queryResult.getFilters() : [];
+    const queryFilters = queryResult && queryResult.getFilters ? queryResult.getFilters() : [];
     _.each(queryFilters, (queryFilter) => {
       const hasQueryStringValue = _.has(urlParams, queryFilter.name);
 
@@ -149,6 +149,11 @@ function DashboardService($resource, $http, $location, currentUser) {
     { slug: '@slug' },
     {
       get: { method: 'GET', transformResponse: transform },
+      getByToken: {
+        method: 'GET',
+        url: 'api/dashboards/public/:token',
+        transformResponse: transform,
+      },
       save: { method: 'POST', transformResponse: transform },
       query: { method: 'GET', isArray: false, transformResponse: transform },
       recent: {

client/app/services/widget.js

@@ -146,14 +146,16 @@ function WidgetFactory($http, $location, Query) {
         }
         this.queryResult = this.getQuery().getQueryResult(maxAge);
 
-        this.queryResult.toPromise()
+        return this.queryResult.toPromise()
           .then((result) => {
             this.loading = false;
             this.data = result;
+            return result;
           })
           .catch((error) => {
             this.loading = false;
             this.data = error;
+            return error;
           });
       }