add help component

2018-12-21 21:38:46 +01:00
parent e2ed163779
commit 0515605b9a
4 changed files with 125 additions and 55 deletions
@@ -6,6 +6,7 @@ export function registerAngularDirectives() {
    'target',
    'onQueryChange',
    'onExecuteQuery',
+    ['events', { watchDepth: 'reference' }],
    ['uiSegmentSrv', { watchDepth: 'reference' }],
    ['datasource', { watchDepth: 'reference' }],
    ['templateSrv', { watchDepth: 'reference' }],
@@ -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>
    );
  }
 }
@@ -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>
    );
  }
@@ -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>