add feedback to what interval is being used (calculated in the backend)

public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx

@@ -1,16 +1,28 @@
 import React, { SFC } from 'react';
 import _ from 'lodash';
 
+import kbn from 'app/core/utils/kbn';
 import { MetricSelect } from 'app/core/components/Select/MetricSelect';
-import { alignmentPeriods } from '../constants';
+import { alignmentPeriods, alignOptions } from '../constants';
 
 export interface Props {
   onChange: (alignmentPeriod) => void;
   templateSrv: any;
   alignmentPeriod: string;
+  perSeriesAligner: string;
+  usedAlignmentPeriod: string;
 }
 
-export const AlignmentPeriods: SFC<Props> = ({ alignmentPeriod, templateSrv, onChange }) => {
+export const AlignmentPeriods: SFC<Props> = ({
+  alignmentPeriod,
+  templateSrv,
+  onChange,
+  perSeriesAligner,
+  usedAlignmentPeriod,
+}) => {
+  const alignment = alignOptions.find(ap => ap.value === templateSrv.replace(perSeriesAligner));
+  const formatAlignmentText = `${kbn.secondsToHms(usedAlignmentPeriod)} interval (${alignment ? alignment.text : ''})`;
+
   return (
     <>
       <div className="gf-form-inline">
@@ -35,7 +47,7 @@ export const AlignmentPeriods: SFC<Props> = ({ alignmentPeriod, templateSrv, onC
           />
         </div>
         <div className="gf-form gf-form--grow">
-          <div className="gf-form-label gf-form-label--grow" />
+          {usedAlignmentPeriod && <label className="gf-form-label gf-form-label--grow">{formatAlignmentText}</label>}
         </div>
       </div>
     </>

public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx

@@ -46,6 +46,7 @@ export const DefaultTarget: State = {
   alignOptions: [],
   lastQuery: '',
   lastQueryError: '',
+  usedAlignmentPeriod: '',
 };
 
 export class QueryEditor extends React.Component<Props, State> {
@@ -71,7 +72,11 @@ export class QueryEditor extends React.Component<Props, State> {
   onDataReceived(dataList) {
     const series = dataList.find(item => item.refId === this.props.target.refId);
     if (series) {
-      this.setState({ lastQuery: decodeURIComponent(series.meta.rawQuery), lastQueryError: '' });
+      this.setState({
+        lastQuery: decodeURIComponent(series.meta.rawQuery),
+        lastQueryError: '',
+        usedAlignmentPeriod: series.meta.alignmentPeriod,
+      });
     }
   }
 
@@ -125,6 +130,7 @@ export class QueryEditor extends React.Component<Props, State> {
 
   render() {
     const {
+      usedAlignmentPeriod,
       defaultProject,
       metricType,
       crossSeriesReducer,
@@ -180,12 +186,14 @@ export class QueryEditor extends React.Component<Props, State> {
                   )
                 }
               </Aggregations>
-              <AliasBy value={aliasBy} onChange={value => this.onPropertyChange('aliasBy', value)} />
               <AlignmentPeriods
                 templateSrv={templateSrv}
                 alignmentPeriod={alignmentPeriod}
+                perSeriesAligner={perSeriesAligner}
+                usedAlignmentPeriod={usedAlignmentPeriod}
                 onChange={value => this.onPropertyChange('alignmentPeriod', value)}
               />
+              <AliasBy value={aliasBy} onChange={value => this.onPropertyChange('aliasBy', value)} />
               <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} />
             </>
           )}

public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap

@@ -282,32 +282,6 @@ Array [
       </label>
     </div>
   </div>,
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <label
-        className="gf-form-label query-keyword width-9"
-      >
-        Alias By
-      </label>
-      <input
-        className="gf-form-input width-24"
-        onChange={[Function]}
-        type="text"
-        value=""
-      />
-    </div>
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <div
-        className="gf-form-label gf-form-label--grow"
-      />
-    </div>
-  </div>,
   <div
     className="gf-form-inline"
   >
@@ -407,6 +381,30 @@ Array [
         </div>
       </div>
     </div>
+    <div
+      className="gf-form gf-form--grow"
+    >
+      
+    </div>
+  </div>,
+  <div
+    className="gf-form-inline"
+  >
+    <div
+      className="gf-form"
+    >
+      <label
+        className="gf-form-label query-keyword width-9"
+      >
+        Alias By
+      </label>
+      <input
+        className="gf-form-input width-24"
+        onChange={[Function]}
+        type="text"
+        value=""
+      />
+    </div>
     <div
       className="gf-form gf-form--grow"
     >