react-panel: Trigger panel refresh when opening inspector. Add loading-message

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

-import React, { PureComponent } from 'react';
+import React, { SFC, PureComponent } from 'react';
 import DataSourceOption from './DataSourceOption';
 import DataSourceOption from './DataSourceOption';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 import { EditorTabBody } from './EditorTabBody';
 import { EditorTabBody } from './EditorTabBody';
@@ -27,12 +27,23 @@ interface Help {
   helpHtml: any;
   helpHtml: any;
 }
 }
 
 
+interface DsQuery {
+  isLoading: boolean;
+  response: {};
+}
+
 interface State {
 interface State {
   currentDatasource: DataSourceSelectItem;
   currentDatasource: DataSourceSelectItem;
   help: Help;
   help: Help;
-  dsQuery: {};
+  dsQuery: DsQuery;
 }
 }
 
 
+interface LoadingPlaceholderProps {
+  text: string;
+}
+
+const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => <h2>{text}</h2>;
+
 export class QueriesTab extends PureComponent<Props, State> {
 export class QueriesTab extends PureComponent<Props, State> {
   element: any;
   element: any;
   component: AngularComponent;
   component: AngularComponent;
@@ -44,14 +55,18 @@ export class QueriesTab extends PureComponent<Props, State> {
     const { panel } = props;
     const { panel } = props;
 
 
     this.state = {
     this.state = {
-      dsQuery: {},
       currentDatasource: this.datasources.find(datasource => datasource.value === panel.datasource),
       currentDatasource: this.datasources.find(datasource => datasource.value === panel.datasource),
       help: {
       help: {
         isLoading: false,
         isLoading: false,
         helpHtml: null,
         helpHtml: null,
       },
       },
+      dsQuery: {
+        isLoading: false,
+        response: {},
+      },
     };
     };
     appEvents.on('ds-request-response', this.onDataSourceResponse);
     appEvents.on('ds-request-response', this.onDataSourceResponse);
+    panel.events.on('refresh', this.onPanelRefresh);
   }
   }
 
 
   componentDidMount() {
   componentDidMount() {
@@ -74,13 +89,25 @@ export class QueriesTab extends PureComponent<Props, State> {
   }
   }
 
 
   componentWillUnmount() {
   componentWillUnmount() {
+    const { panel } = this.props;
     appEvents.off('ds-request-response', this.onDataSourceResponse);
     appEvents.off('ds-request-response', this.onDataSourceResponse);
+    panel.events.off('refresh', this.onPanelRefresh);
 
 
     if (this.component) {
     if (this.component) {
       this.component.destroy();
       this.component.destroy();
     }
     }
   }
   }
 
 
+  onPanelRefresh = () => {
+    this.setState(prevState => ({
+      ...prevState,
+      dsQuery: {
+        isLoading: true,
+        response: {},
+      },
+    }));
+  };
+
   onDataSourceResponse = (response: any = {}) => {
   onDataSourceResponse = (response: any = {}) => {
     // ignore if closed
     // ignore if closed
     // if (!this.isOpen) {
     // if (!this.isOpen) {
@@ -94,6 +121,7 @@ export class QueriesTab extends PureComponent<Props, State> {
 
 
     // this.isLoading = false;
     // this.isLoading = false;
     // data = _.cloneDeep(data);
     // data = _.cloneDeep(data);
+    response = { ...response }; // clone
 
 
     if (response.headers) {
     if (response.headers) {
       delete response.headers;
       delete response.headers;
@@ -132,7 +160,10 @@ export class QueriesTab extends PureComponent<Props, State> {
     }
     }
     this.setState(prevState => ({
     this.setState(prevState => ({
       ...prevState,
       ...prevState,
-      dsQuery: response,
+      dsQuery: {
+        isLoading: false,
+        response: response,
+      },
     }));
     }));
   };
   };
 
 
@@ -260,14 +291,24 @@ export class QueriesTab extends PureComponent<Props, State> {
     });
     });
   };
   };
 
 
+  loadQueryInspector = () => {
+    const { panel } = this.props;
+    panel.refresh();
+  };
+
   renderQueryInspector = () => {
   renderQueryInspector = () => {
-    const { dsQuery } = this.state;
-    return <JSONFormatter json={dsQuery} />;
+    const { response, isLoading } = this.state.dsQuery;
+    return isLoading ? <LoadingPlaceholder text="Loading query inspector..." /> : <JSONFormatter json={response} />;
+  };
+
+  renderHelp = () => {
+    const { helpHtml, isLoading } = this.state.help;
+    return isLoading ? <LoadingPlaceholder text="Loading help..." /> : helpHtml;
   };
   };
 
 
   render() {
   render() {
     const { currentDatasource } = this.state;
     const { currentDatasource } = this.state;
-    const { helpHtml } = this.state.help;
+
     const { hasQueryHelp, queryOptions } = currentDatasource.meta;
     const { hasQueryHelp, queryOptions } = currentDatasource.meta;
     const hasQueryOptions = !!queryOptions;
     const hasQueryOptions = !!queryOptions;
     const dsInformation = {
     const dsInformation = {
@@ -286,6 +327,7 @@ export class QueriesTab extends PureComponent<Props, State> {
 
 
     const queryInspector = {
     const queryInspector = {
       title: 'Query Inspector',
       title: 'Query Inspector',
+      onClick: this.loadQueryInspector,
       render: this.renderQueryInspector,
       render: this.renderQueryInspector,
     };
     };
 
 
@@ -294,7 +336,7 @@ export class QueriesTab extends PureComponent<Props, State> {
       icon: 'fa fa-question',
       icon: 'fa fa-question',
       disabled: !hasQueryHelp,
       disabled: !hasQueryHelp,
       onClick: this.loadHelp,
       onClick: this.loadHelp,
-      render: () => helpHtml,
+      render: this.renderHelp,
     };
     };
 
 
     const options = {
     const options = {