IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Cloudwatch: Metrics Query Builder should clear old query (#88950)

Browse Source
This commit is contained in:
Isabella Siu 2024-06-12 09:31:05 -04:00 committed by GitHub
parent 423c03912b
commit 9877aa7039
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.tsx
View File

@ -5,6 +5,7 @@ import { EditorField, EditorRow, InlineSelect } from '@grafana/experimental';
import { ConfirmModal, Input, RadioButtonGroup, Space } from '@grafana/ui'; import { ConfirmModal, Input, RadioButtonGroup, Space } from '@grafana/ui';
import { CloudWatchDatasource } from '../../../datasource'; import { CloudWatchDatasource } from '../../../datasource';
import { DEFAULT_METRICS_QUERY } from '../../../defaultQueries';
import useMigratedMetricsQuery from '../../../migrations/useMigratedMetricsQuery'; import useMigratedMetricsQuery from '../../../migrations/useMigratedMetricsQuery';
import { import {
CloudWatchJsonData, CloudWatchJsonData,
@ -39,13 +40,13 @@ const editorModes = [
export const MetricsQueryEditor = (props: Props) => { export const MetricsQueryEditor = (props: Props) => {
const { query, datasource, extraHeaderElementLeft, extraHeaderElementRight, onChange } = props; const { query, datasource, extraHeaderElementLeft, extraHeaderElementRight, onChange } = props;
const [showConfirm, setShowConfirm] = useState(false); const [showConfirm, setShowConfirm] = useState(false);
const [sqlCodeEditorIsDirty, setSQLCodeEditorIsDirty] = useState(false); const [codeEditorIsDirty, setCodeEditorIsDirty] = useState(false);
const migratedQuery = useMigratedMetricsQuery(query, props.onChange); const migratedQuery = useMigratedMetricsQuery(query, props.onChange);
const onEditorModeChange = useCallback( const onEditorModeChange = useCallback(
(newMetricEditorMode: MetricEditorMode) => { (newMetricEditorMode: MetricEditorMode) => {
if ( if (
sqlCodeEditorIsDirty && codeEditorIsDirty &&
query.metricQueryType === MetricQueryType.Query && query.metricQueryType === MetricQueryType.Query &&
query.metricEditorMode === MetricEditorMode.Code query.metricEditorMode === MetricEditorMode.Code
) { ) {
@ -54,7 +55,7 @@ export const MetricsQueryEditor = (props: Props) => {
} }
onChange({ ...query, metricEditorMode: newMetricEditorMode }); onChange({ ...query, metricEditorMode: newMetricEditorMode });
}, },
[setShowConfirm, onChange, sqlCodeEditorIsDirty, query] [setShowConfirm, onChange, codeEditorIsDirty, query]
); );
useEffect(() => { useEffect(() => {
@ -64,6 +65,14 @@ export const MetricsQueryEditor = (props: Props) => {
value={metricEditorModes.find((m) => m.value === query.metricQueryType)} value={metricEditorModes.find((m) => m.value === query.metricQueryType)}
options={metricEditorModes} options={metricEditorModes}
onChange={({ value }) => { onChange={({ value }) => {
if (
codeEditorIsDirty &&
query.metricQueryType === MetricQueryType.Search &&
query.metricEditorMode === MetricEditorMode.Builder
) {
setShowConfirm(true);
return;
}
onChange({ ...query, metricQueryType: value }); onChange({ ...query, metricQueryType: value });
}} }}
/> />
@ -80,13 +89,19 @@ export const MetricsQueryEditor = (props: Props) => {
<ConfirmModal <ConfirmModal
isOpen={showConfirm} isOpen={showConfirm}
title="Are you sure?" title="Are you sure?"
body="You will lose manual changes done to the query if you go back to the visual builder." body="You will lose changes made to the query if you change to Metric Query Builder mode."
confirmText="Yes, I am sure." confirmText="Yes, I am sure."
dismissText="No, continue editing the query manually." dismissText="No, continue editing the query."
icon="exclamation-triangle" icon="exclamation-triangle"
onConfirm={() => { onConfirm={() => {
setShowConfirm(false); setShowConfirm(false);
onChange({ ...query, metricEditorMode: MetricEditorMode.Builder }); setCodeEditorIsDirty(false);
onChange({
...query,
...DEFAULT_METRICS_QUERY,
metricQueryType: MetricQueryType.Query,
metricEditorMode: MetricEditorMode.Builder,
});
}} }}
onDismiss={() => setShowConfirm(false)} onDismiss={() => setShowConfirm(false)}
/> />
@ -99,7 +114,7 @@ export const MetricsQueryEditor = (props: Props) => {
}; };
}, [ }, [
query, query,
sqlCodeEditorIsDirty, codeEditorIsDirty,
datasource, datasource,
onChange, onChange,
extraHeaderElementLeft, extraHeaderElementLeft,
@ -119,7 +134,12 @@ export const MetricsQueryEditor = (props: Props) => {
{...props} {...props}
refId={query.refId} refId={query.refId}
metricStat={query} metricStat={query}
onChange={(metricStat: MetricStat) => props.onChange({ ...query, ...metricStat })} onChange={(metricStat: MetricStat) => {
if (!codeEditorIsDirty) {
setCodeEditorIsDirty(true);
}
props.onChange({ ...query, ...metricStat });
}}
></MetricStatEditor> ></MetricStatEditor>
)} )}
{query.metricEditorMode === MetricEditorMode.Code && ( {query.metricEditorMode === MetricEditorMode.Code && (
@ -138,8 +158,8 @@ export const MetricsQueryEditor = (props: Props) => {
region={query.region} region={query.region}
sql={query.sqlExpression ?? ''} sql={query.sqlExpression ?? ''}
onChange={(sqlExpression) => { onChange={(sqlExpression) => {
if (!sqlCodeEditorIsDirty) { if (!codeEditorIsDirty) {
setSQLCodeEditorIsDirty(true); setCodeEditorIsDirty(true);
} }
props.onChange({ ...migratedQuery, sqlExpression }); props.onChange({ ...migratedQuery, sqlExpression });
}} }}

1
public/app/plugins/datasource/cloudwatch/defaultQueries.ts
View File

@ -21,6 +21,7 @@ export const DEFAULT_METRICS_QUERY: Omit<CloudWatchMetricsQuery, 'refId'> = {
period: '', period: '',
metricQueryType: MetricQueryType.Search, metricQueryType: MetricQueryType.Search,
metricEditorMode: MetricEditorMode.Builder, metricEditorMode: MetricEditorMode.Builder,
sql: undefined,
sqlExpression: '', sqlExpression: '',
matchExact: true, matchExact: true,
}; };