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: Unify look of query mode select between dashboard and explore (#24648)

Browse Source
This commit is contained in:
Andrej Ocenas 2020-05-14 14:12:11 +02:00 committed by GitHub
parent abfa1b5d74
commit e754bcdcf9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
public/app/plugins/datasource/cloudwatch/components/CombinedMetricsEditor.tsx
View File

@ -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()}
</>
);
}
}

33
public/app/plugins/datasource/cloudwatch/components/PanelQueryEditor.tsx
View File

@ -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} />}
</>
);
}

3
public/app/plugins/datasource/cloudwatch/module.tsx
View File

@ -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);