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

CloudMonitoring: Update AnnotationQueryEditor to use experimental UI components (#51841)

Browse Source
This commit is contained in:
Kevin Yu 2022-07-07 01:29:32 -07:00 committed by GitHub
parent 401ce2b2f9
commit 689639cdb0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
View File

@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { useDebounce } from 'react-use'; import { useDebounce } from 'react-use';
import { QueryEditorProps, toOption } from '@grafana/data'; import { QueryEditorProps, toOption } from '@grafana/data';
import { EditorField, EditorRows, EditorRow } from '@grafana/experimental';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { Input } from '@grafana/ui'; import { Input } from '@grafana/ui';
@ -79,38 +80,52 @@ export const AnnotationQueryEditor = (props: Props) => {
); );
return ( return (
<> <EditorRows>
{config.featureToggles.cloudMonitoringExperimentalUI ? ( {config.featureToggles.cloudMonitoringExperimentalUI ? (
<ExperimentalMetricQueryEditor <>
refId={query.refId} <ExperimentalMetricQueryEditor
variableOptionGroup={variableOptionGroup} refId={query.refId}
customMetaData={customMetaData} variableOptionGroup={variableOptionGroup}
onChange={handleQueryChange} customMetaData={customMetaData}
onRunQuery={onRunQuery} onChange={handleQueryChange}
datasource={datasource} onRunQuery={onRunQuery}
query={metricQuery} datasource={datasource}
/> query={metricQuery}
/>
<EditorRow>
<EditorField label="Title" htmlFor="annotation-query-title">
<Input id="annotation-query-title" value={title} onChange={handleTitleChange} />
</EditorField>
</EditorRow>
<EditorRow>
<EditorField label="Text" htmlFor="annotation-query-text">
<Input id="annotation-query-text" value={text} onChange={handleTextChange} />
</EditorField>
</EditorRow>
</>
) : ( ) : (
<MetricQueryEditor <>
refId={query.refId} <MetricQueryEditor
variableOptionGroup={variableOptionGroup} refId={query.refId}
customMetaData={customMetaData} variableOptionGroup={variableOptionGroup}
onChange={handleQueryChange} customMetaData={customMetaData}
onRunQuery={onRunQuery} onChange={handleQueryChange}
datasource={datasource} onRunQuery={onRunQuery}
query={metricQuery} datasource={datasource}
/> query={metricQuery}
/>
<QueryEditorRow label="Title" htmlFor="annotation-query-title">
<Input id="annotation-query-title" value={title} width={INPUT_WIDTH} onChange={handleTitleChange} />
</QueryEditorRow>
<QueryEditorRow label="Text" htmlFor="annotation-query-text">
<Input id="annotation-query-text" value={text} width={INPUT_WIDTH} onChange={handleTextChange} />
</QueryEditorRow>
</>
)} )}
<QueryEditorRow label="Title" htmlFor="annotation-query-title">
<Input id="annotation-query-title" value={title} width={INPUT_WIDTH} onChange={handleTitleChange} />
</QueryEditorRow>
<QueryEditorRow label="Text" htmlFor="annotation-query-text">
<Input id="annotation-query-text" value={text} width={INPUT_WIDTH} onChange={handleTextChange} />
</QueryEditorRow>
<AnnotationsHelp /> <AnnotationsHelp />
</> </EditorRows>
); );
}; };