IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-16 02:23:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

CloudMonitoring: Warn users that query will be lost on switch (#76836)

Browse Source
This commit is contained in:
Alyssa Bull 2023-11-03 10:06:18 -06:00 committed by GitHub
parent 0f4bb73fbc
commit 036ec72206
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 48 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
View File

@ -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<CloudMonitoringDatasource, CloudMonitoringQ
export const QueryEditor = (props: Props) => {
const { datasource, query: oldQ, onRunQuery, onChange } = props;
const [modalIsOpen, setModalIsOpen] = useState<boolean>(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<CloudMonitoringQuery>(query);
const [queryHasBeenEdited, setQueryHasBeenEdited] = useState<boolean>(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 (
<EditorRows>
<QueryHeader query={query} onChange={onChange} onRunQuery={onRunQuery} />
<ConfirmModal
data-testid="switch-query-type-modal"
title="Warning"
body="By switching your query type, your current query will be lost."
isOpen={modalIsOpen}
onConfirm={() => {
setModalIsOpen(false);
onChange(currentQuery);
setQueryHasBeenEdited(false);
}}
confirmText="Confirm"
onDismiss={() => {
setModalIsOpen(false);
setCurrentQuery(query);
}}
/>
<QueryHeader query={query} onChange={checkForModalDisplay} onRunQuery={onRunQuery} />
{queryType === QueryType.PROMQL && (
<PromQLQueryEditor
@ -80,7 +126,7 @@ export const QueryEditor = (props: Props) => {
refId={query.refId}
variableOptionGroup={variableOptionGroup}
customMetaData={customMetaData}
onChange={onChange}
onChange={onMetricQueryChange}
onRunQuery={onRunQuery}
datasource={datasource}
query={query}