apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add help component

Browse Source
pull/14751/head
Erik Sundell 7 years ago
parent e2ed163779
commit 0515605b9a
4 changed files with 125 additions and 55 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      public/app/plugins/datasource/stackdriver/angular_wrappers.ts
  2. 97
      public/app/plugins/datasource/stackdriver/components/Help.tsx
  3. 66
      public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
  4. 16
      public/app/plugins/datasource/stackdriver/partials/query.editor.html

1
public/app/plugins/datasource/stackdriver/angular_wrappers.ts
Unescape View File

@ -6,6 +6,7 @@ export function registerAngularDirectives() {
'target',
'onQueryChange',
'onExecuteQuery',
['events', { watchDepth: 'reference' }],
['uiSegmentSrv', { watchDepth: 'reference' }],
['datasource', { watchDepth: 'reference' }],
['templateSrv', { watchDepth: 'reference' }],

97
public/app/plugins/datasource/stackdriver/components/Help.tsx
Unescape View File

@ -3,6 +3,7 @@ import { Project } from './Project';
export interface Props {
datasource: any;
rawQuery: string;
}
interface State {
@ -21,39 +22,87 @@ export class Help extends React.Component<Props, State> {
}
handleRawQueryClicked() {
this.setState({ displayHelp: !this.state.displayHelp });
this.setState({ displaRawQuery: !this.state.displaRawQuery });
}
shouldComponentUpdate(nextProps) {
return nextProps.metricDescriptor !== null;
}
render() {
const { displayHelp, displaRawQuery } = this.state;
const { datasource } = this.props;
const { datasource, rawQuery } = this.props;
return (
<div className="gf-form-inline">
<Project datasource={datasource} />
{/* {displayHelp && ( */}
<div className="gf-form" ng-show="ctrl.lastQueryMeta">
<label className="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
</label>
</div>
{/* )} */}
{displaRawQuery && (
<div className="gf-form">
<label className="gf-form-label query-keyword" ng-click="ctrl.showLastQuery = !ctrl.showLastQuery">
Raw Query
<i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
{/* <i className="fa fa-caret-down" ng-show="ctrl.showLastQuery" />
<i className="fa fa-caret-right" ng-hide="ctrl.showLastQuery" /> */}
<React.Fragment>
<div className="gf-form-inline">
<Project datasource={datasource} />
<div className="gf-form" onClick={() => this.handleHelpClicked()}>
<label className="gf-form-label query-keyword">
Show Help
<i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
</label>
</div>
)}
<div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--grow" />
{rawQuery && (
<div className="gf-form" onClick={() => this.handleRawQueryClicked()}>
<label className="gf-form-label query-keyword">
Raw Query
<i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
</label>
</div>
)}
<div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--grow" />
</div>
</div>
</div>
{rawQuery &&
displaRawQuery && (
<div className="gf-form">
<pre className="gf-form-pre">{rawQuery}</pre>
</div>
)}
{displayHelp && (
<div className="gf-form grafana-info-box" style={{ padding: 0 }}>
<pre className="gf-form-pre alert alert-info" style={{ marginRight: 0 }}>
<h5>Alias Patterns</h5>Format the legend keys any way you want by using alias patterns. Format the legend
keys any way you want by using alias patterns.<br /> <br />
Example:
<code>{`${'{{metricDescriptor.name}} - {{metricDescriptor.label.instance_name}}'}`}</code>
<br />
Result: &nbsp;&nbsp;<code>cpu/usage_time - server1-europe-west-1</code>
<br />
<br />
<strong>Patterns</strong>
<br />
<ul>
<li>
<code>{`${'{{metricDescriptor.type}}'}`}</code> = metric type e.g.
compute.googleapis.com/instance/cpu/usage_time
</li>
<li>
<code>{`${'{{metricDescriptor.name}}'}`}</code> = name part of metric e.g. instance/cpu/usage_time
</li>
<li>
<code>{`${'{{metricDescriptor.service}}'}`}</code> = service part of metric e.g. compute
</li>
<li>
<code>{`${'{{metricDescriptor.label.label_name}}'}`}</code> = Metric label metadata e.g.
metricDescriptor.label.instance_name
</li>
<li>
<code>{`${'{{resource.label.label_name}}'}`}</code> = Resource label metadata e.g. resource.label.zone
</li>
</ul>
<div className="gf-form" ng-show="ctrl.lastQueryError">
<pre className="gf-form-pre alert alert-error">{'ctrl.lastQueryError'}</pre>
</div>
</pre>
</div>
)}
</React.Fragment>
);
}
}

66
public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
Unescape View File

@ -15,6 +15,7 @@ export interface Props {
onQueryChange: (target: Target) => void;
onExecuteQuery?: () => void;
target: Target;
events: any;
datasource: any;
templateSrv: any;
uiSegmentSrv: any;
@ -22,6 +23,7 @@ export interface Props {
interface State extends Target {
alignOptions: any[];
lastQuery: string;
}
const DefaultTarget: State = {
@ -39,12 +41,16 @@ const DefaultTarget: State = {
filters: [],
aliasBy: '',
alignOptions: [],
lastQuery: '',
};
export class QueryEditor extends React.Component<Props, State> {
state: State = DefaultTarget;
componentDidMount() {
const { events } = this.props;
events.on('data-received', this.onDataReceived.bind(this));
events.on('data-error', this.onDataError.bind(this));
const { perSeriesAligner, alignOptions } = getAlignmentPickerData(this.props.target, this.props.templateSrv);
this.setState({
...this.props.target,
@ -53,6 +59,30 @@ export class QueryEditor extends React.Component<Props, State> {
});
}
onDataReceived(dataList) {
const anySeriesFromQuery = dataList.find(item => item.refId === this.props.target.refId);
if (anySeriesFromQuery) {
this.setState({ lastQuery: decodeURIComponent(anySeriesFromQuery.meta.rawQuery) });
}
}
onDataError(err) {
// if (err.data && err.data.results) {
// const queryRes = err.data.results[this.target.refId];
// if (queryRes && queryRes.error) {
// this.lastQueryMeta = queryRes.meta;
// this.lastQueryMeta.rawQueryString = decodeURIComponent(this.lastQueryMeta.rawQuery);
// let jsonBody;
// try {
// jsonBody = JSON.parse(queryRes.error);
// } catch {
// this.lastQueryError = queryRes.error;
// }
// this.lastQueryError = jsonBody.error.message;
// }
// }
}
handleMetricTypeChange({ valueType, metricKind, type, unit }) {
const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
{ valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
@ -126,6 +156,7 @@ export class QueryEditor extends React.Component<Props, State> {
alignOptions,
alignmentPeriod,
aliasBy,
lastQuery,
} = this.state;
const { templateSrv, datasource, uiSegmentSrv } = this.props;
@ -169,36 +200,17 @@ export class QueryEditor extends React.Component<Props, State> {
}
</Aggregations>
<AliasBy value={aliasBy} onChange={value => this.handleAliasByChange(value)} />
<AlignmentPeriods
templateSrv={templateSrv}
alignmentPeriod={alignmentPeriod}
onChange={value => this.handleAlignmentPeriodChange(value)}
/>
<Help datasource={datasource} rawQuery={lastQuery} />
</React.Fragment>
)}
</Metrics>
<AlignmentPeriods
templateSrv={templateSrv}
alignmentPeriod={alignmentPeriod}
onChange={value => this.handleAlignmentPeriodChange(value)}
/>
<Help datasource={datasource} />
{/* <div className="gf-form-inline">
<Help datasource={datasource} />
<div className="gf-form" ng-show="ctrl.lastQueryMeta">
<label className="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<i className="fa fa-caret-down" ng-show="ctrl.showHelp" />
<i className="fa fa-caret-right" ng-hide="ctrl.showHelp" />
</label>
</div>
<div className="gf-form" ng-show="ctrl.lastQueryMeta">
<label className="gf-form-label query-keyword" ng-click="ctrl.showLastQuery = !ctrl.showLastQuery">
Raw Query
<i className="fa fa-caret-down" ng-show="ctrl.showLastQuery" />
<i className="fa fa-caret-right" ng-hide="ctrl.showLastQuery" />
</label>
</div>
<div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--grow" />
</div>
</div> */}
</React.Fragment>
);
}

16
public/app/plugins/datasource/stackdriver/partials/query.editor.html
Unescape View File

@ -1,5 +1,13 @@
<query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
<query-editor target="ctrl.target" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-query-change="ctrl.handleQueryChange" on-execute-query="ctrl.handleExecuteQuery" ui-segment-srv=ctrl.uiSegmentSrv></query-editor>
<query-editor
target="ctrl.target"
events="ctrl.panelCtrl.events"
template-srv="ctrl.templateSrv"
datasource="ctrl.datasource"
on-query-change="(ctrl.handleQueryChange)"
on-execute-query="(ctrl.handleExecuteQuery)"
ui-segment-srv="ctrl.uiSegmentSrv"
></query-editor>
<!-- <metric-picker target="ctrl.target" default-project="ctrl.target.defaultProject" metric-type="ctrl.target.metricType" template-srv="ctrl.templateSrv" datasource="ctrl.datasource" on-change="ctrl.handleMetricTypeChange"></metric-picker>
<stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" loading="ctrl.loadLabelsPromise" label-data="ctrl.labelData"
></stackdriver-filter>
@ -43,7 +51,7 @@
</div>
</div> -->
<div class="gf-form" ng-show="ctrl.showLastQuery">
<!-- <div class="gf-form" ng-show="ctrl.showLastQuery">
<pre class="gf-form-pre">{{ctrl.lastQueryMeta.rawQueryString}}</pre>
</div>
<div class="gf-form grafana-info-box" style="padding: 0" ng-show="ctrl.showHelp">
@ -76,5 +84,5 @@
</div>
<div class="gf-form" ng-show="ctrl.lastQueryError">
<pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
</div>
</query-editor-row>
</div> -->
</query-editor-row>

Write Preview
Loading…
Cancel
Save