From e2ed1637791e63b280c0312f02d359f46a3174df Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Thu, 20 Dec 2018 16:55:02 +0100
Subject: [PATCH] add project and help component

---
 .../stackdriver/components/Help.tsx           | 59 +++++++++++++++++
 .../stackdriver/components/Project.tsx        | 30 +++++++++
 .../stackdriver/components/QueryEditor.tsx    | 63 +++++++++++--------
 .../stackdriver/partials/query.editor.html    |  4 +-
 4 files changed, 129 insertions(+), 27 deletions(-)
 create mode 100644 public/app/plugins/datasource/stackdriver/components/Help.tsx
 create mode 100644 public/app/plugins/datasource/stackdriver/components/Project.tsx

diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx
new file mode 100644
index 00000000000..9cc02acffa0
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Project } from './Project';
+
+export interface Props {
+  datasource: any;
+}
+
+interface State {
+  displayHelp: boolean;
+  displaRawQuery: boolean;
+}
+
+export class Help extends React.Component<Props, State> {
+  state: State = {
+    displayHelp: false,
+    displaRawQuery: false,
+  };
+
+  handleHelpClicked() {
+    this.setState({ displayHelp: !this.state.displayHelp });
+  }
+
+  handleRawQueryClicked() {
+    this.setState({ displayHelp: !this.state.displayHelp });
+  }
+
+  render() {
+    const { displayHelp, displaRawQuery } = this.state;
+    const { datasource } = 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" /> */}
+            </label>
+          </div>
+        )}
+        <div className="gf-form gf-form--grow">
+          <div className="gf-form-label gf-form-label--grow" />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/Project.tsx b/public/app/plugins/datasource/stackdriver/components/Project.tsx
new file mode 100644
index 00000000000..65fd76884dc
--- /dev/null
+++ b/public/app/plugins/datasource/stackdriver/components/Project.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+export interface Props {
+  datasource: any;
+}
+
+interface State {
+  projectName: string;
+}
+
+export class Project extends React.Component<Props, State> {
+  state: State = {
+    projectName: 'Loading project...',
+  };
+
+  async componentDidMount() {
+    const projectName = await this.props.datasource.getDefaultProject();
+    this.setState({ projectName });
+  }
+
+  render() {
+    const { projectName } = this.state;
+    return (
+      <div className="gf-form">
+        <span className="gf-form-label width-9 query-keyword">Project</span>
+        <input className="gf-form-input width-15" disabled type="text" value={projectName} />
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
index a5a85760054..373e2ccddb0 100644
--- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
@@ -7,6 +7,7 @@ import { Aggregations } from './Aggregations';
 import { Alignments } from './Alignments';
 import { AlignmentPeriods } from './AlignmentPeriods';
 import { AliasBy } from './AliasBy';
+import { Help } from './Help';
 import { Target } from '../types';
 import { getAlignmentPickerData } from '../functions';
 
@@ -73,28 +74,18 @@ export class QueryEditor extends React.Component<Props, State> {
     );
   }
 
-  handleFilterChange(value) {
-    this.setState(
-      {
-        filters: value,
-      },
-      () => {
-        this.props.onQueryChange(this.state);
-        this.props.onExecuteQuery();
-      }
-    );
+  handleFilterChange(filters) {
+    this.setState({ filters }, () => {
+      this.props.onQueryChange(this.state);
+      this.props.onExecuteQuery();
+    });
   }
 
-  handleGroupBysChange(value) {
-    this.setState(
-      {
-        groupBys: value,
-      },
-      () => {
-        this.props.onQueryChange(this.state);
-        this.props.onExecuteQuery();
-      }
-    );
+  handleGroupBysChange(groupBys) {
+    this.setState({ groupBys }, () => {
+      this.props.onQueryChange(this.state);
+      this.props.onExecuteQuery();
+    });
   }
 
   handleAggregationChange(value) {
@@ -177,15 +168,37 @@ export class QueryEditor extends React.Component<Props, State> {
                   )
                 }
               </Aggregations>
-              <AlignmentPeriods
-                templateSrv={templateSrv}
-                alignmentPeriod={alignmentPeriod}
-                onChange={value => this.handleAlignmentPeriodChange(value)}
-              />
               <AliasBy value={aliasBy} onChange={value => this.handleAliasByChange(value)} />
             </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>
     );
   }
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 20b3a6634a5..0e531694eff 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -19,7 +19,7 @@
       <div class="gf-form-label gf-form-label--grow"></div>
     </div>
   </div> -->
-  <div class="gf-form-inline">
+  <!-- <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9 query-keyword">Project</span>
       <input class="gf-form-input width-15" disabled type="text" ng-model='ctrl.target.defaultProject' />
@@ -41,7 +41,7 @@
     <div class="gf-form gf-form--grow">
       <div class="gf-form-label gf-form-label--grow"></div>
     </div>
-  </div>
+  </div> -->
 
   <div class="gf-form" ng-show="ctrl.showLastQuery">
     <pre class="gf-form-pre">{{ctrl.lastQueryMeta.rawQueryString}}</pre>