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

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; datasource?: DataSourceApi;
exploreMode: ExploreMode; exploreMode: ExploreMode;
onClickExample: (query: DataQuery) => void; 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} onClickExample={this.onClickExample}
datasource={datasourceInstance} datasource={datasourceInstance}
exploreMode={mode} exploreMode={mode}
exploreId={exploreId}
/> />
</div> </div>
)} )}

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

@ -1,10 +1,13 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { stripIndent, stripIndents } from 'common-tags'; import { stripIndent, stripIndents } from 'common-tags';
import { ExploreStartPageProps, DataQuery, ExploreMode } from '@grafana/data'; import { ExploreStartPageProps, ExploreMode } from '@grafana/data';
import Prism from 'prismjs'; import Prism from 'prismjs';
import tokenizer from '../syntax'; import tokenizer from '../syntax';
import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism'; import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism';
import { css, cx } from 'emotion'; 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 { interface QueryExample {
category: string; category: string;
@ -214,14 +217,33 @@ const exampleCategory = css`
`; `;
export default class LogsCheatSheet extends PureComponent<ExploreStartPageProps, { userExamples: string[] }> { export default class LogsCheatSheet extends PureComponent<ExploreStartPageProps, { userExamples: string[] }> {
renderExpression(expr: string, keyPrefix: string) { switchToMetrics = (query: CloudWatchLogsQuery) => {
const { onClickExample } = this.props; 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 ( return (
<div <div
className="cheat-sheet-item__example" className="cheat-sheet-item__example"
key={expr} 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> <pre>{renderHighlightedMarkup(expr, keyPrefix)}</pre>
</div> </div>
@ -248,8 +270,21 @@ export default class LogsCheatSheet extends PureComponent<ExploreStartPageProps,
} }
render() { render() {
const { exploreMode } = this.props; return (
<div>
return exploreMode === ExploreMode.Logs && this.renderLogsCheatSheet(); <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>
);
} }
} }