IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-29 20:24:18 -06:00
Code Issues Packages Projects Releases Wiki Activity

Datasource/CloudWatch: Switch to metrics mode, logs API, when choosing stats query from cheatsheet (#24398)

Browse Source 
* Datasource/CloudWatch: Switch to metrics mode, logs API, when choosing stats query from cheatsheet
This commit is contained in:
kay delaney 2020-05-11 17:43:53 +01:00 committed by GitHub
parent 55533d12fd
commit ae7f0aeb7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-data/src/types/datasource.ts
View File

@ -340,6 +340,7 @@ export interface ExploreStartPageProps {
datasource?: DataSourceApi;
exploreMode: ExploreMode;
onClickExample: (query: DataQuery) => void;
exploreId?: any;
}
/**

1
public/app/features/explore/Explore.tsx
View File

@ -342,6 +342,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
onClickExample={this.onClickExample}
datasource={datasourceInstance}
exploreMode={mode}
exploreId={exploreId}
/>
</div>
)}

49
public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx
View File

@ -1,10 +1,13 @@
import React, { PureComponent } from 'react';
import { stripIndent, stripIndents } from 'common-tags';
import { ExploreStartPageProps, DataQuery, ExploreMode } from '@grafana/data';
import { ExploreStartPageProps, ExploreMode } from '@grafana/data';
import Prism from 'prismjs';
import tokenizer from '../syntax';
import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism';
import { css, cx } from 'emotion';
import { CloudWatchLogsQuery } from '../types';
import { changeModeAction } from 'app/features/explore/state/actionTypes';
import { dispatch } from 'app/store/store';
interface QueryExample {
category: string;
@ -214,14 +217,33 @@ const exampleCategory = css`
`;
export default class LogsCheatSheet extends PureComponent<ExploreStartPageProps, { userExamples: string[] }> {
renderExpression(expr: string, keyPrefix: string) {
const { onClickExample } = this.props;
switchToMetrics = (query: CloudWatchLogsQuery) => {
const { onClickExample, exploreId } = this.props;
const nextQuery: CloudWatchLogsQuery = {
...(query as CloudWatchLogsQuery),
apiMode: 'Logs',
queryMode: 'Logs',
};
dispatch(changeModeAction({ exploreId, mode: ExploreMode.Metrics }));
onClickExample(nextQuery);
};
onClickExample(query: CloudWatchLogsQuery) {
if (query.expression.includes('stats')) {
this.switchToMetrics(query);
} else {
this.props.onClickExample(query);
}
}
renderExpression(expr: string, keyPrefix: string) {
return (
<div
className="cheat-sheet-item__example"
key={expr}
onClick={e => onClickExample({ refId: 'A', expression: expr } as DataQuery)}
onClick={e => this.onClickExample({ refId: 'A', expression: expr } as CloudWatchLogsQuery)}
>
<pre>{renderHighlightedMarkup(expr, keyPrefix)}</pre>
</div>
@ -248,8 +270,21 @@ export default class LogsCheatSheet extends PureComponent<ExploreStartPageProps,
}
render() {
const { exploreMode } = this.props;
return exploreMode === ExploreMode.Logs && this.renderLogsCheatSheet();
return (
<div>
<h2>CloudWatch Logs Cheat Sheet</h2>
{CLIQ_EXAMPLES.map(cat => (
<div>
<div className={`cheat-sheet-item__title ${cx(exampleCategory)}`}>{cat.category}</div>
{cat.examples.map((item, i) => (
<div className="cheat-sheet-item" key={`item-${i}`}>
<h4>{item.title}</h4>
{this.renderExpression(item.expr, `item-${i}`)}
</div>
))}
</div>
))}
</div>
);
}
}