From c4af69c17a20b9521cdb0c566e28b65f3bb7fd51 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Wed, 12 Sep 2018 00:35:16 -0700 Subject: [PATCH] Make submit button for dashboard sending disabled if no flux query --- .../components/SendToDashboardOverlay.tsx | 69 +++++++++++++------ .../data_explorer/containers/DataExplorer.tsx | 37 +++++----- 2 files changed, 68 insertions(+), 38 deletions(-) diff --git a/ui/src/data_explorer/components/SendToDashboardOverlay.tsx b/ui/src/data_explorer/components/SendToDashboardOverlay.tsx index 159242e49..92ef361b1 100644 --- a/ui/src/data_explorer/components/SendToDashboardOverlay.tsx +++ b/ui/src/data_explorer/components/SendToDashboardOverlay.tsx @@ -21,31 +21,31 @@ import { import {addDashboardCellAsync} from 'src/dashboards/actions' // Types -import {QueryConfig, Dashboard, Source} from 'src/types' +import {QueryConfig, Dashboard, Source, Service} from 'src/types' +import {getDeep} from 'src/utils/wrappers' interface Props { queryConfig: QueryConfig + script: string dashboards: Dashboard[] source: Source rawText: string + service: Service onCancel: () => void addDashboardCell: typeof addDashboardCellAsync } interface State { selectedIDs: string[] - hasQuery: boolean name: string } class SendToDashboardOverlay extends PureComponent { constructor(props) { super(props) - const {queryConfig} = this.props this.state = { selectedIDs: [], - hasQuery: queryConfig.fields.length !== 0, name: '', } } @@ -119,6 +119,19 @@ class SendToDashboardOverlay extends PureComponent { }) } + private get hasQuery(): boolean { + const {queryConfig, script} = this.props + if (this.isFlux) { + return !!script.length + } + return getDeep(queryConfig, 'fields.length', 0) !== 0 + } + + private get isFlux(): boolean { + const {service} = this.props + return !!service + } + private get selectedDashboards(): Dashboard[] { const {dashboards} = this.props const {selectedIDs} = this.state @@ -129,9 +142,13 @@ class SendToDashboardOverlay extends PureComponent { } private get submitButtonStatus(): ComponentStatus { - const {hasQuery, name, selectedIDs} = this.state + const {name, selectedIDs} = this.state - if (!hasQuery || selectedIDs.length === 0 || name.trim().length === 0) { + if ( + !this.hasQuery || + selectedIDs.length === 0 || + name.trim().length === 0 + ) { return ComponentStatus.Disabled } @@ -145,27 +162,37 @@ class SendToDashboardOverlay extends PureComponent { private sendToDashboard = async () => { const { queryConfig, + script, addDashboardCell, rawText, source, onCancel, + service, } = this.props - const {hasQuery, name} = this.state + const {name} = this.state - if (hasQuery) { - await Promise.all( - this.selectedDashboards.map(dashboard => { - const emptyCell = getNewDashboardCell(dashboard) - const newCell = { - ...emptyCell, - name, - queries: [{queryConfig, query: rawText, source: source.links.self}], - } - return addDashboardCell(dashboard, newCell) - }) - ) - onCancel() - } + const newCellQueries = this.isFlux + ? [ + { + queryConfig: null, + query: script, + source: service.links.self, + }, + ] + : [{queryConfig, query: rawText, source: source.links.self}] + + await Promise.all( + this.selectedDashboards.map(dashboard => { + const emptyCell = getNewDashboardCell(dashboard) + const newCell = { + ...emptyCell, + name, + queries: newCellQueries, + } + return addDashboardCell(dashboard, newCell) + }) + ) + onCancel() } } diff --git a/ui/src/data_explorer/containers/DataExplorer.tsx b/ui/src/data_explorer/containers/DataExplorer.tsx index 54eeee51e..1cb4f680f 100644 --- a/ui/src/data_explorer/containers/DataExplorer.tsx +++ b/ui/src/data_explorer/containers/DataExplorer.tsx @@ -12,6 +12,7 @@ import _ from 'lodash' import {stripPrefix} from 'src/utils/basepath' import {GlobalAutoRefresher} from 'src/utils/AutoRefresher' import {getConfig} from 'src/dashboards/utils/cellGetters' +import {buildRawText} from 'src/utils/influxql' // Constants import {timeRanges} from 'src/shared/data/timeRanges' @@ -54,7 +55,6 @@ import { TEMP_VAR_DASHBOARD_TIME, TEMP_VAR_UPPER_DASHBOARD_TIME, } from 'src/shared/constants' -import {buildRawText} from 'src/utils/influxql' // Types import { @@ -244,25 +244,16 @@ export class DataExplorer extends PureComponent { fluxLinks, notify, updateSourceLink, - sourceLink, } = this.props const {isStaticLegend} = this.state - let service: Service = null - - if (sourceLink.indexOf('services') !== -1) { - service = services.find(s => { - return s.links.self === sourceLink - }) - } - return ( <> {this.writeDataForm} {this.sendToDashboardOverlay}
{ } private get sendToDashboardOverlay(): JSX.Element { - const {source, dashboards, addDashboardCell} = this.props + const {source, dashboards, addDashboardCell, script} = this.props const {isSendToDashboardVisible} = this.state return ( @@ -331,7 +322,9 @@ export class DataExplorer extends PureComponent { { return '' } + private get service(): Service { + const {sourceLink, services} = this.props + let service: Service = null + + if (sourceLink.indexOf('services') !== -1) { + service = services.find(s => { + return s.links.self === sourceLink + }) + } + return service + } + private get visualizationOptions(): VisualizationOptions { const { visType, @@ -479,7 +484,7 @@ export class DataExplorer extends PureComponent { } } -const mapStateToProps = state => { +const mstp = state => { const { app: { persisted: {autoRefresh}, @@ -535,7 +540,7 @@ const mapStateToProps = state => { } } -const mapDispatchToProps = dispatch => { +const mdtp = dispatch => { return { handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch), errorThrownAction: bindActionCreators(errorThrown, dispatch), @@ -556,6 +561,4 @@ const mapDispatchToProps = dispatch => { } } -export default connect(mapStateToProps, mapDispatchToProps)( - withRouter(ManualRefresh(DataExplorer)) -) +export default connect(mstp, mdtp)(withRouter(ManualRefresh(DataExplorer)))