mirror of
https://github.com/apache/superset.git
synced 2026-05-12 19:35:17 +00:00
SIP-32: Moving frontend code to the base of the repo (#9098)
* move assets out, get webpack dev working * update docs to reference superset-frontend * draw the rest of the owl * fix docs * fix webpack script * rats * correct docs * fix tox dox
This commit is contained in:
David Aaron Suddjian
committed by
GitHub
GitHub
parent
0cf354cc88
commit
2913063924
190
superset-frontend/src/explore/components/ExploreChartHeader.jsx
Normal file
190
superset-frontend/src/explore/components/ExploreChartHeader.jsx
Normal file
@@ -0,0 +1,190 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { t } from '@superset-ui/translation';
|
||||
|
||||
import { chartPropShape } from '../../dashboard/util/propShapes';
|
||||
import ExploreActionButtons from './ExploreActionButtons';
|
||||
import RowCountLabel from './RowCountLabel';
|
||||
import EditableTitle from '../../components/EditableTitle';
|
||||
import AlteredSliceTag from '../../components/AlteredSliceTag';
|
||||
import FaveStar from '../../components/FaveStar';
|
||||
import TooltipWrapper from '../../components/TooltipWrapper';
|
||||
import Timer from '../../components/Timer';
|
||||
import CachedLabel from '../../components/CachedLabel';
|
||||
|
||||
const CHART_STATUS_MAP = {
|
||||
failed: 'danger',
|
||||
loading: 'warning',
|
||||
success: 'success',
|
||||
};
|
||||
|
||||
const propTypes = {
|
||||
actions: PropTypes.object.isRequired,
|
||||
addHistory: PropTypes.func,
|
||||
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: chartPropShape,
|
||||
};
|
||||
|
||||
class ExploreChartHeader extends React.PureComponent {
|
||||
postChartFormData() {
|
||||
this.props.actions.postChartFormData(
|
||||
this.props.form_data,
|
||||
true,
|
||||
this.props.timeout,
|
||||
this.props.chart.id,
|
||||
);
|
||||
}
|
||||
|
||||
updateChartTitleOrSaveSlice(newTitle) {
|
||||
const isNewSlice = !this.props.slice;
|
||||
const currentFormData = isNewSlice
|
||||
? this.props.form_data
|
||||
: this.props.slice.form_data;
|
||||
|
||||
const params = {
|
||||
slice_name: newTitle,
|
||||
action: isNewSlice ? 'saveas' : 'overwrite',
|
||||
};
|
||||
// this.props.slice hold the original slice params stored in slices table
|
||||
// when chart is saved or overwritten, the explore view will reload page
|
||||
// to make sure sync with updated query params
|
||||
this.props.actions.saveSlice(currentFormData, params).then(json => {
|
||||
const { data } = json;
|
||||
if (isNewSlice) {
|
||||
this.props.actions.updateChartId(data.slice.slice_id, 0);
|
||||
this.props.actions.createNewSlice(
|
||||
data.can_add,
|
||||
data.can_download,
|
||||
data.can_overwrite,
|
||||
data.slice,
|
||||
data.form_data,
|
||||
);
|
||||
this.props.addHistory({
|
||||
isReplace: true,
|
||||
title: `[chart] ${data.slice.slice_name}`,
|
||||
});
|
||||
} 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 formData = this.props.form_data;
|
||||
const {
|
||||
chartStatus,
|
||||
chartUpdateEndTime,
|
||||
chartUpdateStartTime,
|
||||
latestQueryFormData,
|
||||
queryResponse,
|
||||
} = this.props.chart;
|
||||
const chartFinished = ['failed', 'rendered', 'success'].includes(
|
||||
this.props.chart.chartStatus,
|
||||
);
|
||||
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 chart properties')}
|
||||
>
|
||||
<a
|
||||
className="edit-desc-icon"
|
||||
href={`/chart/edit/${this.props.slice.slice_id}`}
|
||||
>
|
||||
<i className="fa fa-edit" />
|
||||
</a>
|
||||
</TooltipWrapper>
|
||||
</span>
|
||||
)}
|
||||
{this.props.chart.sliceFormData && (
|
||||
<AlteredSliceTag
|
||||
origFormData={this.props.chart.sliceFormData}
|
||||
currentFormData={formData}
|
||||
/>
|
||||
)}
|
||||
<div className="pull-right">
|
||||
{chartFinished && queryResponse && (
|
||||
<RowCountLabel
|
||||
rowcount={queryResponse.rowcount}
|
||||
limit={formData.row_limit}
|
||||
/>
|
||||
)}
|
||||
{chartFinished && queryResponse && queryResponse.is_cached && (
|
||||
<CachedLabel
|
||||
onClick={this.postChartFormData.bind(this)}
|
||||
cachedTimestamp={queryResponse.cached_dttm}
|
||||
/>
|
||||
)}
|
||||
<Timer
|
||||
startTime={chartUpdateStartTime}
|
||||
endTime={chartUpdateEndTime}
|
||||
isRunning={chartStatus === 'loading'}
|
||||
status={CHART_STATUS_MAP[chartStatus]}
|
||||
style={{ fontSize: '10px', marginRight: '5px' }}
|
||||
/>
|
||||
<ExploreActionButtons
|
||||
actions={this.props.actions}
|
||||
slice={this.props.slice}
|
||||
canDownload={this.props.can_download}
|
||||
chartStatus={chartStatus}
|
||||
latestQueryFormData={latestQueryFormData}
|
||||
queryResponse={queryResponse}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ExploreChartHeader.propTypes = propTypes;
|
||||
|
||||
export default ExploreChartHeader;
|
||||
Reference in New Issue
Block a user