You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2018/06/27 18:20:12 UTC
[GitHub] graceguo-supercat closed pull request #5296: [dashboard v2] add
`` component
graceguo-supercat closed pull request #5296: [dashboard v2] add `<MissingChart />` component
URL: https://github.com/apache/incubator-superset/pull/5296
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/superset/assets/spec/javascripts/dashboard/components/MissingChart_spec.jsx b/superset/assets/spec/javascripts/dashboard/components/MissingChart_spec.jsx
new file mode 100644
index 0000000000..92a18c10c9
--- /dev/null
+++ b/superset/assets/spec/javascripts/dashboard/components/MissingChart_spec.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { describe, it } from 'mocha';
+import { expect } from 'chai';
+
+import Loading from '../../../../src/components/Loading';
+import MissingChart from '../../../../src/dashboard/components/MissingChart';
+
+describe('MissingChart', () => {
+ function setup(overrideProps) {
+ const wrapper = shallow(<MissingChart height={100} {...overrideProps} />);
+ return wrapper;
+ }
+
+ it('renders a .missing-chart-container', () => {
+ const wrapper = setup();
+ expect(wrapper.find('.missing-chart-container')).to.have.length(1);
+ });
+
+ it('renders a .missing-chart-body', () => {
+ const wrapper = setup();
+ expect(wrapper.find('.missing-chart-body')).to.have.length(1);
+ });
+
+ it('renders a Loading', () => {
+ const wrapper = setup();
+ expect(wrapper.find(Loading)).to.have.length(1);
+ });
+});
diff --git a/superset/assets/src/SqlLab/components/QuerySearch.jsx b/superset/assets/src/SqlLab/components/QuerySearch.jsx
index 45924e3141..e6a19d911f 100644
--- a/superset/assets/src/SqlLab/components/QuerySearch.jsx
+++ b/superset/assets/src/SqlLab/components/QuerySearch.jsx
@@ -217,10 +217,10 @@ class QuerySearch extends React.PureComponent {
</Button>
</div>
</div>
- {this.state.queriesLoading ? (
- <Loading />
- ) : (
- <div className="scrollbar-container">
+ <div className="scrollbar-container">
+ {this.state.queriesLoading ? (
+ <Loading />
+ ) : (
<div className="scrollbar-content" style={{ height: this.props.height }}>
<QueryTable
columns={['state', 'db', 'user', 'time', 'progress', 'rows', 'sql', 'querylink']}
@@ -230,8 +230,8 @@ class QuerySearch extends React.PureComponent {
actions={this.props.actions}
/>
</div>
- </div>
- )}
+ )}
+ </div>
</div>
);
}
diff --git a/superset/assets/src/dashboard/actions/dashboardState.js b/superset/assets/src/dashboard/actions/dashboardState.js
index 688f5b02fa..5c92ff26f0 100644
--- a/superset/assets/src/dashboard/actions/dashboardState.js
+++ b/superset/assets/src/dashboard/actions/dashboardState.js
@@ -209,6 +209,13 @@ export function addSliceToDashboard(id) {
return (dispatch, getState) => {
const { sliceEntities } = getState();
const selectedSlice = sliceEntities.slices[id];
+ if (!selectedSlice) {
+ return dispatch(
+ addWarningToast(
+ 'Sorry, there is no chart definition associated with the chart trying to be added.',
+ ),
+ );
+ }
const form_data = selectedSlice.form_data;
const newChart = {
...initChart,
diff --git a/superset/assets/src/dashboard/components/MissingChart.jsx b/superset/assets/src/dashboard/components/MissingChart.jsx
new file mode 100644
index 0000000000..c45c445167
--- /dev/null
+++ b/superset/assets/src/dashboard/components/MissingChart.jsx
@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Loading from '../../components/Loading';
+import { t } from '../../locales';
+
+const propTypes = {
+ height: PropTypes.number.isRequired,
+};
+
+export default function MissingChart({ height }) {
+ return (
+ <div className="missing-chart-container" style={{ height: height + 20 }}>
+ <div className="loading-container">
+ <Loading />
+ </div>
+ <div className="missing-chart-body">
+ {t(
+ 'There is no chart definition associated with this component, could it have been deleted?',
+ )}
+ <br />
+ <br />
+ {t('Delete this container and save to remove this message.')}
+ </div>
+ </div>
+ );
+}
+
+MissingChart.propTypes = propTypes;
diff --git a/superset/assets/src/dashboard/components/gridComponents/Chart.jsx b/superset/assets/src/dashboard/components/gridComponents/Chart.jsx
index 4713c4361a..7e2e6a65d5 100644
--- a/superset/assets/src/dashboard/components/gridComponents/Chart.jsx
+++ b/superset/assets/src/dashboard/components/gridComponents/Chart.jsx
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
import { exportChart } from '../../../explore/exploreUtils';
import SliceHeader from '../SliceHeader';
import ChartContainer from '../../../chart/ChartContainer';
+import MissingChart from '../MissingChart';
import { chartPropType } from '../../../chart/chartReducer';
import { slicePropShape } from '../../util/propShapes';
import { VIZ_TYPES } from '../../../visualizations';
@@ -155,11 +156,14 @@ class Chart extends React.Component {
sliceCanEdit,
} = this.props;
- // this should never happen but prevents throwing in the case that a gridComponent
+ const { width } = this.state;
+
+ // this prevents throwing in the case that a gridComponent
// references a chart that is not associated with the dashboard
- if (!chart || !slice) return null;
+ if (!chart || !slice) {
+ return <MissingChart height={this.getChartHeight()} />;
+ }
- const { width } = this.state;
const { queryResponse, chartUpdateEndTime } = chart;
const isCached = queryResponse && queryResponse.is_cached;
const cachedDttm = queryResponse && queryResponse.cached_dttm;
diff --git a/superset/assets/src/dashboard/stylesheets/components/chart.less b/superset/assets/src/dashboard/stylesheets/components/chart.less
index b4e0f776d9..a9bff4a0da 100644
--- a/superset/assets/src/dashboard/stylesheets/components/chart.less
+++ b/superset/assets/src/dashboard/stylesheets/components/chart.less
@@ -5,6 +5,22 @@
background-color: white;
position: relative;
padding: 16px;
+
+ .missing-chart-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ overflow-y: auto;
+
+ .missing-chart-body {
+ font-size: 12px;
+ }
+
+ .loading-container {
+ position: relative;
+ height: 40%;
+ }
+ }
}
.dashboard-chart {
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org