Dashboard refactory (#3581)

Create Chart component for all chart fetching and rendering, and apply redux architecture in dashboard view.
2026-04-22 01:24:43 +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/dashboard/components/SliceHeader.jsx
+++ b/superset/assets/javascripts/dashboard/components/SliceHeader.jsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+
+import { t } from '../../locales';
+import EditableTitle from '../../components/EditableTitle';
+import TooltipWrapper from '../../components/TooltipWrapper';
+
+const propTypes = {
+  slice: PropTypes.object.isRequired,
+  exploreChartUrl: PropTypes.string,
+  exportCSVUrl: PropTypes.string,
+  isExpanded: PropTypes.bool,
+  formDataExtra: PropTypes.object,
+  removeSlice: PropTypes.func,
+  updateSliceName: PropTypes.func,
+  toggleExpandSlice: PropTypes.func,
+  forceRefresh: PropTypes.func,
+};
+
+const defaultProps = {
+  forceRefresh: () => ({}),
+  removeSlice: () => ({}),
+  updateSliceName: () => ({}),
+  toggleExpandSlice: () => ({}),
+};
+
+class SliceHeader extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.onSaveTitle = this.onSaveTitle.bind(this);
+  }
+
+  onSaveTitle(newTitle) {
+    if (this.props.updateSliceName) {
+      this.props.updateSliceName(this.props.slice.slice_id, newTitle);
+    }
+  }
+
+  render() {
+    const slice = this.props.slice;
+    const isCached = slice.is_cached;
+    const isExpanded = !!this.props.isExpanded;
+    const cachedWhen = moment.utc(slice.cached_dttm).fromNow();
+    const refreshTooltip = isCached ?
+      t('Served from data cached %s . Click to force refresh.', cachedWhen) :
+      t('Force refresh data');
+
+    return (
+      <div className="row chart-header">
+        <div className="col-md-12">
+          <div className="header">
+            <EditableTitle
+              title={slice.slice_name}
+              canEdit={!!this.props.updateSliceName}
+              onSaveTitle={this.onSaveTitle}
+              noPermitTooltip={'You don\'t have the rights to alter this dashboard.'}
+            />
+          </div>
+          <div className="chart-controls">
+            <div id={'controls_' + slice.slice_id} className="pull-right">
+              <a>
+                <TooltipWrapper
+                  placement="top"
+                  label="move"
+                  tooltip={t('Move chart')}
+                >
+                  <i className="fa fa-arrows drag" />
+                </TooltipWrapper>
+              </a>
+              <a
+                className={`refresh ${isCached ? 'danger' : ''}`}
+                onClick={() => (this.props.forceRefresh(slice.slice_id))}
+              >
+                <TooltipWrapper
+                  placement="top"
+                  label="refresh"
+                  tooltip={refreshTooltip}
+                >
+                  <i className="fa fa-repeat" />
+                </TooltipWrapper>
+              </a>
+              {slice.description &&
+              <a onClick={() => this.props.toggleExpandSlice(slice, !isExpanded)}>
+                <TooltipWrapper
+                  placement="top"
+                  label="description"
+                  tooltip={t('Toggle chart description')}
+                >
+                  <i className="fa fa-info-circle slice_info" />
+                </TooltipWrapper>
+              </a>
+              }
+              <a href={slice.edit_url} target="_blank">
+                <TooltipWrapper
+                  placement="top"
+                  label="edit"
+                  tooltip={t('Edit chart')}
+                >
+                  <i className="fa fa-pencil" />
+                </TooltipWrapper>
+              </a>
+              <a className="exportCSV" href={this.props.exportCSVUrl}>
+                <TooltipWrapper
+                  placement="top"
+                  label="exportCSV"
+                  tooltip={t('Export CSV')}
+                >
+                  <i className="fa fa-table" />
+                </TooltipWrapper>
+              </a>
+              <a className="exploreChart" href={this.props.exploreChartUrl} target="_blank">
+                <TooltipWrapper
+                  placement="top"
+                  label="exploreChart"
+                  tooltip={t('Explore chart')}
+                >
+                  <i className="fa fa-share" />
+                </TooltipWrapper>
+              </a>
+              <a className="remove-chart" onClick={() => (this.props.removeSlice(slice))}>
+                <TooltipWrapper
+                  placement="top"
+                  label="close"
+                  tooltip={t('Remove chart from dashboard')}
+                >
+                  <i className="fa fa-close" />
+                </TooltipWrapper>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+SliceHeader.propTypes = propTypes;
+SliceHeader.defaultProps = defaultProps;
+
+export default SliceHeader;