react-panel: Move time range options to its own component and render it under the options button instead

public/app/features/dashboard/dashgrid/QueriesTab.tsx

@@ -8,11 +8,7 @@ import { DashboardModel } from '../dashboard_model';
 import './../../panel/metrics_tab';
 import config from 'app/core/config';
 import { QueryInspector } from './QueryInspector';
-import { Switch } from 'app/core/components/Switch/Switch';
+import { TimeRangeOptions } from './TimeRangeOptions';
-import { Input } from 'app/core/components/Form';
-import { InputStatus, EventsWithValidation } from 'app/core/components/Form/Input';
-import { isValidTimeSpan } from 'app/core/utils/rangeutil';
-import { ValidationEvents } from 'app/types';
 
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -43,20 +39,6 @@ interface LoadingPlaceholderProps {
 
 const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => <h2>{text}</h2>;
 
-const timeRangeValidationEvents: ValidationEvents = {
-  [EventsWithValidation.onBlur]: [
-    {
-      rule: value => {
-        if (!value) {
-          return true;
-        }
-        return isValidTimeSpan(value);
-      },
-      errorMessage: 'Not a valid timespan',
-    },
-  ],
-};
-
 export class QueriesTab extends PureComponent<Props, State> {
   element: any;
   component: AngularComponent;
@@ -220,10 +202,17 @@ export class QueriesTab extends PureComponent<Props, State> {
       },
     };
 
-    return Object.keys(queryOptions).map(key => {
+    const dsOptions = Object.keys(queryOptions).map(key => {
       const options = allOptions[key];
       return <DataSourceOption key={key} {...options} onChange={onChangeFn(allOptions[key].panelKey || key)} />;
     });
+
+    return (
+      <>
+        <TimeRangeOptions panel={this.props.panel} />
+        {dsOptions}
+      </>
+    );
   };
 
   renderQueryInspector = () => {
@@ -236,40 +225,8 @@ export class QueriesTab extends PureComponent<Props, State> {
     return isLoading ? <LoadingPlaceholder text="Loading help..." /> : helpHtml;
   };
 
-  emptyToNull = (value: string) => {
-    return value === '' ? null : value;
-  };
-
-  onOverrideTime = (evt, status: InputStatus) => {
-    const { value } = evt.target;
-    const { panel } = this.props;
-    const emptyToNullValue = this.emptyToNull(value);
-    if (status === InputStatus.Valid && panel.timeFrom !== emptyToNullValue) {
-      panel.timeFrom = emptyToNullValue;
-      panel.refresh();
-    }
-  };
-
-  onTimeShift = (evt, status: InputStatus) => {
-    const { value } = evt.target;
-    const { panel } = this.props;
-    const emptyToNullValue = this.emptyToNull(value);
-    if (status === InputStatus.Valid && panel.timeShift !== emptyToNullValue) {
-      panel.timeShift = emptyToNullValue;
-      panel.refresh();
-    }
-  };
-
-  onToggleTimeOverride = () => {
-    const { panel } = this.props;
-    panel.hideTimeOverride = !panel.hideTimeOverride;
-    panel.refresh();
-  };
-
   render() {
     const { currentDatasource } = this.state;
-    const hideTimeOverride = this.props.panel.hideTimeOverride;
-    console.log('hideTimeOverride', hideTimeOverride);
     const { hasQueryHelp, queryOptions } = currentDatasource.meta;
     const hasQueryOptions = !!queryOptions;
     const dsInformation = {
@@ -310,52 +267,6 @@ export class QueriesTab extends PureComponent<Props, State> {
       <EditorTabBody heading="Queries" main={dsInformation} toolbarItems={[options, queryInspector, dsHelp]}>
         <>
           <div ref={element => (this.element = element)} style={{ width: '100%' }} />
-
-          <h5 className="section-heading">Time Range</h5>
-
-          <div className="gf-form-group">
-            <div className="gf-form">
-              <span className="gf-form-label">
-                <i className="fa fa-clock-o" />
-              </span>
-
-              <span className="gf-form-label width-12">Override relative time</span>
-              <span className="gf-form-label width-6">Last</span>
-              <Input
-                type="text"
-                className="gf-form-input max-width-8"
-                placeholder="1h"
-                onBlur={this.onOverrideTime}
-                validationEvents={timeRangeValidationEvents}
-                hideErrorMessage={true}
-              />
-            </div>
-
-            <div className="gf-form">
-              <span className="gf-form-label">
-                <i className="fa fa-clock-o" />
-              </span>
-              <span className="gf-form-label width-12">Add time shift</span>
-              <span className="gf-form-label width-6">Amount</span>
-              <Input
-                type="text"
-                className="gf-form-input max-width-8"
-                placeholder="1h"
-                onBlur={this.onTimeShift}
-                validationEvents={timeRangeValidationEvents}
-                hideErrorMessage={true}
-              />
-            </div>
-
-            <div className="gf-form-inline">
-              <div className="gf-form">
-                <span className="gf-form-label">
-                  <i className="fa fa-clock-o" />
-                </span>
-              </div>
-              <Switch label="Hide time override info" checked={hideTimeOverride} onChange={this.onToggleTimeOverride} />
-            </div>
-          </div>
         </>
       </EditorTabBody>
     );

public/app/features/dashboard/dashgrid/TimeRangeOptions.tsx

@@ -0,0 +1,111 @@
+import React, { PureComponent } from 'react';
+import { Switch } from 'app/core/components/Switch/Switch';
+import { Input } from 'app/core/components/Form';
+import { isValidTimeSpan } from 'app/core/utils/rangeutil';
+import { ValidationEvents } from 'app/types';
+import { EventsWithValidation } from 'app/core/components/Form/Input';
+import { PanelModel } from '../panel_model';
+import { InputStatus } from 'app/core/components/Form/Input';
+
+const timeRangeValidationEvents: ValidationEvents = {
+  [EventsWithValidation.onBlur]: [
+    {
+      rule: value => {
+        if (!value) {
+          return true;
+        }
+        return isValidTimeSpan(value);
+      },
+      errorMessage: 'Not a valid timespan',
+    },
+  ],
+};
+
+const emptyToNull = (value: string) => {
+  return value === '' ? null : value;
+};
+
+interface Props {
+  panel: PanelModel;
+}
+
+export class TimeRangeOptions extends PureComponent<Props> {
+  onOverrideTime = (evt, status: InputStatus) => {
+    const { value } = evt.target;
+    const { panel } = this.props;
+    const emptyToNullValue = emptyToNull(value);
+    if (status === InputStatus.Valid && panel.timeFrom !== emptyToNullValue) {
+      panel.timeFrom = emptyToNullValue;
+      panel.refresh();
+    }
+  };
+
+  onTimeShift = (evt, status: InputStatus) => {
+    const { value } = evt.target;
+    const { panel } = this.props;
+    const emptyToNullValue = emptyToNull(value);
+    if (status === InputStatus.Valid && panel.timeShift !== emptyToNullValue) {
+      panel.timeShift = emptyToNullValue;
+      panel.refresh();
+    }
+  };
+
+  onToggleTimeOverride = () => {
+    const { panel } = this.props;
+    panel.hideTimeOverride = !panel.hideTimeOverride;
+    panel.refresh();
+  };
+
+  render = () => {
+    const hideTimeOverride = this.props.panel.hideTimeOverride;
+    return (
+      <>
+        <h5 className="section-heading">Time Range</h5>
+
+        <div className="gf-form-group">
+          <div className="gf-form">
+            <span className="gf-form-label">
+              <i className="fa fa-clock-o" />
+            </span>
+
+            <span className="gf-form-label width-12">Override relative time</span>
+            <span className="gf-form-label width-6">Last</span>
+            <Input
+              type="text"
+              className="gf-form-input max-width-8"
+              placeholder="1h"
+              onBlur={this.onOverrideTime}
+              validationEvents={timeRangeValidationEvents}
+              hideErrorMessage={true}
+            />
+          </div>
+
+          <div className="gf-form">
+            <span className="gf-form-label">
+              <i className="fa fa-clock-o" />
+            </span>
+            <span className="gf-form-label width-12">Add time shift</span>
+            <span className="gf-form-label width-6">Amount</span>
+            <Input
+              type="text"
+              className="gf-form-input max-width-8"
+              placeholder="1h"
+              onBlur={this.onTimeShift}
+              validationEvents={timeRangeValidationEvents}
+              hideErrorMessage={true}
+            />
+          </div>
+
+          <div className="gf-form-inline">
+            <div className="gf-form">
+              <span className="gf-form-label">
+                <i className="fa fa-clock-o" />
+              </span>
+            </div>
+            <Switch label="Hide time override info" checked={hideTimeOverride} onChange={this.onToggleTimeOverride} />
+          </div>
+        </div>
+      </>
+    );
+  };
+}