Dashboard refactory (#3581)

Create Chart component for all chart fetching and rendering, and apply redux architecture in dashboard view.
2026-04-19 16:14:52 +00:00 · 2017-11-08 10:46:21 -08:00
parent 39e502faae
commit 4fa1f0ab17
47 changed files with 2048 additions and 876 deletions
--- a/superset/assets/javascripts/explore/components/ExploreChartHeader.jsx
+++ b/superset/assets/javascripts/explore/components/ExploreChartHeader.jsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { chartPropType } from '../../chart/chartReducer';
+import ExploreActionButtons from './ExploreActionButtons';
+import EditableTitle from '../../components/EditableTitle';
+import FaveStar from '../../components/FaveStar';
+import TooltipWrapper from '../../components/TooltipWrapper';
+import Timer from '../../components/Timer';
+import { getExploreUrl } from '../exploreUtils';
+import CachedLabel from '../../components/CachedLabel';
+import { t } from '../../locales';
+
+const CHART_STATUS_MAP = {
+  failed: 'danger',
+  loading: 'warning',
+  success: 'success',
+};
+
+const propTypes = {
+  actions: PropTypes.object.isRequired,
+  can_overwrite: PropTypes.bool.isRequired,
+  can_download: PropTypes.bool.isRequired,
+  isStarred: PropTypes.bool.isRequired,
+  slice: PropTypes.object,
+  table_name: PropTypes.string,
+  form_data: PropTypes.object,
+  timeout: PropTypes.number,
+  chart: PropTypes.shape(chartPropType),
+};
+
+class ExploreChartHeader extends React.PureComponent {
+  runQuery() {
+    this.props.actions.runQuery(this.props.form_data, true,
+      this.props.timeout, this.props.chart.chartKey);
+  }
+
+  updateChartTitleOrSaveSlice(newTitle) {
+    const isNewSlice = !this.props.slice;
+    const params = {
+      slice_name: newTitle,
+      action: isNewSlice ? 'saveas' : 'overwrite',
+    };
+    const saveUrl = getExploreUrl(this.props.form_data, 'base', false, null, params);
+    this.props.actions.saveSlice(saveUrl)
+      .then((data) => {
+        if (isNewSlice) {
+          this.props.actions.createNewSlice(
+            data.can_add, data.can_download, data.can_overwrite,
+            data.slice, data.form_data);
+        } else {
+          this.props.actions.updateChartTitle(newTitle);
+        }
+      });
+  }
+
+  renderChartTitle() {
+    let title;
+    if (this.props.slice) {
+      title = this.props.slice.slice_name;
+    } else {
+      title = t('%s - untitled', this.props.table_name);
+    }
+    return title;
+  }
+
+  render() {
+    const queryResponse = this.props.chart.queryResponse;
+    const data = {
+      csv_endpoint: getExploreUrl(this.props.form_data, 'csv'),
+      json_endpoint: getExploreUrl(this.props.form_data, 'json'),
+      standalone_endpoint: getExploreUrl(this.props.form_data, 'standalone'),
+    };
+
+    return (
+      <div
+        id="slice-header"
+        className="clearfix panel-title-large"
+      >
+        <EditableTitle
+          title={this.renderChartTitle()}
+          canEdit={!this.props.slice || this.props.can_overwrite}
+          onSaveTitle={this.updateChartTitleOrSaveSlice.bind(this)}
+        />
+
+        {this.props.slice &&
+        <span>
+          <FaveStar
+            itemId={this.props.slice.slice_id}
+            fetchFaveStar={this.props.actions.fetchFaveStar}
+            saveFaveStar={this.props.actions.saveFaveStar}
+            isStarred={this.props.isStarred}
+          />
+
+          <TooltipWrapper
+            label="edit-desc"
+            tooltip={t('Edit slice properties')}
+          >
+            <a
+              className="edit-desc-icon"
+              href={`/slicemodelview/edit/${this.props.slice.slice_id}`}
+            >
+              <i className="fa fa-edit" />
+            </a>
+          </TooltipWrapper>
+        </span>
+        }
+
+        <div className="pull-right">
+          {this.props.chart.chartStatus === 'success' &&
+          queryResponse &&
+          queryResponse.is_cached &&
+          <CachedLabel
+            onClick={this.runQuery.bind(this)}
+            cachedTimestamp={queryResponse.cached_dttm}
+          />
+          }
+          <Timer
+            startTime={this.props.chart.chartUpdateStartTime}
+            endTime={this.props.chart.chartUpdateEndTime}
+            isRunning={this.props.chart.chartStatus === 'loading'}
+            status={CHART_STATUS_MAP[this.props.chart.chartStatus]}
+            style={{ fontSize: '10px', marginRight: '5px' }}
+          />
+          <ExploreActionButtons
+            slice={Object.assign({}, this.props.slice, { data })}
+            canDownload={this.props.can_download}
+            chartStatus={this.props.chart.chartStatus}
+            queryResponse={queryResponse}
+            queryEndpoint={getExploreUrl(this.props.form_data, 'query')}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+ExploreChartHeader.propTypes = propTypes;
+
+export default ExploreChartHeader;