mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
CloudWatch: Unify look of query mode select between dashboard and explore (#24648)
This commit is contained in:
parent
abfa1b5d74
commit
e754bcdcf9
@ -1,48 +0,0 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { ExploreQueryFieldProps } from '@grafana/data';
|
||||
import { RadioButtonGroup } from '@grafana/ui';
|
||||
import { CloudWatchQuery } from '../types';
|
||||
import { CloudWatchDatasource } from '../datasource';
|
||||
import LogsQueryEditor from './LogsQueryEditor';
|
||||
import { MetricsQueryEditor } from './MetricsQueryEditor';
|
||||
import { cx, css } from 'emotion';
|
||||
|
||||
export type Props = ExploreQueryFieldProps<CloudWatchDatasource, CloudWatchQuery>;
|
||||
|
||||
export class CombinedMetricsEditor extends PureComponent<Props> {
|
||||
renderMetricsEditor() {
|
||||
return <MetricsQueryEditor {...this.props} />;
|
||||
}
|
||||
|
||||
renderLogsEditor() {
|
||||
return <LogsQueryEditor {...this.props} />;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { query } = this.props;
|
||||
|
||||
const apiMode = query.apiMode ?? query.queryMode ?? 'Metrics';
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cx(
|
||||
css`
|
||||
margin-bottom: 4px;
|
||||
`
|
||||
)}
|
||||
>
|
||||
<RadioButtonGroup
|
||||
options={[
|
||||
{ label: 'Metrics API', value: 'Metrics' },
|
||||
{ label: 'Logs API', value: 'Logs' },
|
||||
]}
|
||||
value={apiMode}
|
||||
onChange={(v: 'Metrics' | 'Logs') => this.props.onChange({ ...query, apiMode: v })}
|
||||
/>
|
||||
</div>
|
||||
{apiMode === 'Metrics' ? this.renderMetricsEditor() : this.renderLogsEditor()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
@ -9,35 +9,28 @@ import LogsQueryEditor from './LogsQueryEditor';
|
||||
|
||||
export type Props = ExploreQueryFieldProps<CloudWatchDatasource, CloudWatchQuery>;
|
||||
|
||||
interface State {
|
||||
queryMode: ExploreMode;
|
||||
}
|
||||
|
||||
export class PanelQueryEditor extends PureComponent<Props, State> {
|
||||
state: State = { queryMode: (this.props.query.queryMode as ExploreMode) ?? ExploreMode.Metrics };
|
||||
|
||||
onQueryModeChange(mode: ExploreMode) {
|
||||
this.setState({
|
||||
queryMode: mode,
|
||||
});
|
||||
}
|
||||
const apiModes = {
|
||||
Metrics: { label: 'CloudWatch Metrics', value: 'Metrics' },
|
||||
Logs: { label: 'CloudWatch Logs', value: 'Logs' },
|
||||
};
|
||||
|
||||
export class PanelQueryEditor extends PureComponent<Props> {
|
||||
render() {
|
||||
const { queryMode } = this.state;
|
||||
const { query } = this.props;
|
||||
const apiMode = query.apiMode ?? query.queryMode ?? 'Metrics';
|
||||
|
||||
return (
|
||||
<>
|
||||
<QueryInlineField label="Query Mode">
|
||||
<Segment
|
||||
value={queryMode}
|
||||
options={[
|
||||
{ label: 'Metrics', value: ExploreMode.Metrics },
|
||||
{ label: 'Logs', value: ExploreMode.Logs },
|
||||
]}
|
||||
onChange={({ value }) => this.onQueryModeChange(value ?? ExploreMode.Metrics)}
|
||||
value={apiModes[apiMode]}
|
||||
options={Object.values(apiModes)}
|
||||
onChange={({ value }) =>
|
||||
this.props.onChange({ ...query, apiMode: (value as 'Metrics' | 'Logs') ?? 'Metrics' })
|
||||
}
|
||||
/>
|
||||
</QueryInlineField>
|
||||
{queryMode === ExploreMode.Logs ? <LogsQueryEditor {...this.props} /> : <MetricsQueryEditor {...this.props} />}
|
||||
{apiMode === ExploreMode.Logs ? <LogsQueryEditor {...this.props} /> : <MetricsQueryEditor {...this.props} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -7,7 +7,6 @@ import { CloudWatchJsonData, CloudWatchQuery } from './types';
|
||||
import { CloudWatchLogsQueryEditor } from './components/LogsQueryEditor';
|
||||
import { PanelQueryEditor } from './components/PanelQueryEditor';
|
||||
import LogsCheatSheet from './components/LogsCheatSheet';
|
||||
import { CombinedMetricsEditor } from './components/CombinedMetricsEditor';
|
||||
|
||||
export const plugin = new DataSourcePlugin<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>(
|
||||
CloudWatchDatasource
|
||||
@ -15,6 +14,6 @@ export const plugin = new DataSourcePlugin<CloudWatchDatasource, CloudWatchQuery
|
||||
.setExploreStartPage(LogsCheatSheet)
|
||||
.setConfigEditor(ConfigEditor)
|
||||
.setQueryEditor(PanelQueryEditor)
|
||||
.setExploreMetricsQueryField(CombinedMetricsEditor)
|
||||
.setExploreMetricsQueryField(PanelQueryEditor)
|
||||
.setExploreLogsQueryField(CloudWatchLogsQueryEditor)
|
||||
.setAnnotationQueryCtrl(CloudWatchAnnotationsQueryCtrl);
|
||||
|
Loading…
Reference in New Issue
Block a user