diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx index 5005b98d03c..2c41fa66d10 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx +++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx @@ -1,12 +1,15 @@ +import { isEqual } from 'lodash'; import React, { useEffect, useMemo, useState } from 'react'; import { QueryEditorProps, toOption } from '@grafana/data'; import { EditorRows } from '@grafana/experimental'; +import { ConfirmModal } from '@grafana/ui'; import CloudMonitoringDatasource from '../datasource'; import { CloudMonitoringQuery, PromQLQuery, QueryType, SLOQuery } from '../types/query'; import { CloudMonitoringOptions } from '../types/types'; +import { defaultTimeSeriesList, defaultTimeSeriesQuery } from './MetricQueryEditor'; import { PromQLQueryEditor } from './PromQLEditor'; import { QueryHeader } from './QueryHeader'; import { defaultQuery as defaultSLOQuery } from './SLOQueryEditor'; @@ -17,6 +20,7 @@ export type Props = QueryEditorProps { const { datasource, query: oldQ, onRunQuery, onChange } = props; + const [modalIsOpen, setModalIsOpen] = useState(false); // Migrate query if needed const [migrated, setMigrated] = useState(false); const query = useMemo(() => { @@ -29,6 +33,8 @@ export const QueryEditor = (props: Props) => { } return oldQ; }, [oldQ, datasource, onChange, migrated]); + const [currentQuery, setCurrentQuery] = useState(query); + const [queryHasBeenEdited, setQueryHasBeenEdited] = useState(false); const sloQuery = { ...defaultSLOQuery(datasource), ...query.sloQuery }; const onSLOQueryChange = (q: SLOQuery) => { @@ -44,6 +50,16 @@ export const QueryEditor = (props: Props) => { onChange({ ...query, promQLQuery: q }); }; + const onMetricQueryChange = (q: CloudMonitoringQuery) => { + if ( + (q.queryType === QueryType.TIME_SERIES_LIST && !isEqual(q.timeSeriesList, defaultTimeSeriesList(datasource))) || + (q.queryType === QueryType.TIME_SERIES_QUERY && !isEqual(q.timeSeriesQuery, defaultTimeSeriesQuery(datasource))) + ) { + setQueryHasBeenEdited(true); + } + onChange(q); + }; + const meta = props.data?.series.length ? props.data?.series[0].meta : {}; const customMetaData = meta?.custom ?? {}; const variableOptionGroup = { @@ -60,9 +76,39 @@ export const QueryEditor = (props: Props) => { }); const queryType = query.queryType; + const checkForModalDisplay = (q: CloudMonitoringQuery) => { + if ( + queryHasBeenEdited && + (currentQuery.queryType === QueryType.TIME_SERIES_LIST || currentQuery.queryType === QueryType.TIME_SERIES_QUERY) + ) { + if (currentQuery.queryType !== q.queryType) { + setModalIsOpen(true); + } + } else { + onChange(q); + } + setCurrentQuery(q); + }; + return ( - + { + setModalIsOpen(false); + onChange(currentQuery); + setQueryHasBeenEdited(false); + }} + confirmText="Confirm" + onDismiss={() => { + setModalIsOpen(false); + setCurrentQuery(query); + }} + /> + {queryType === QueryType.PROMQL && ( { refId={query.refId} variableOptionGroup={variableOptionGroup} customMetaData={customMetaData} - onChange={onChange} + onChange={onMetricQueryChange} onRunQuery={onRunQuery} datasource={datasource} query={query}