react-panel: Create component for JSON formatting and use it on query inspector

package.json

@@ -145,6 +145,7 @@
     "file-saver": "^1.3.3",
     "immutable": "^3.8.2",
     "jquery": "^3.2.1",
+    "json-formatter-js": "^2.2.1",
     "lodash": "^4.17.10",
     "moment": "^2.22.2",
     "mousetrap": "^1.6.0",

public/app/core/components/JSONFormatter/JSONFormatter.tsx

@@ -0,0 +1,30 @@
+import React, { PureComponent } from 'react';
+import JSONFormatterJS from 'json-formatter-js';
+
+interface Props {
+  className?: string;
+  json: any;
+  options?: any;
+}
+
+export class JSONFormatter extends PureComponent<Props> {
+  wrapperEl: any = React.createRef();
+  jsonEl: HTMLElement;
+  formatter: any;
+
+  componentDidMount() {
+    const { json, options } = this.props;
+    this.formatter = new JSONFormatterJS(json, options);
+    this.jsonEl = this.wrapperEl.current.appendChild(this.formatter.render());
+  }
+
+  componentWillUnmount() {
+    this.formatter = null;
+    this.jsonEl = null;
+  }
+
+  render() {
+    const { className } = this.props;
+    return <div className={className} ref={this.wrapperEl} />;
+  }
+}

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

@@ -3,7 +3,7 @@ import DataSourceOption from './DataSourceOption';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 import { EditorTabBody } from './EditorTabBody';
 import { DataSourcePicker } from './DataSourcePicker';
-
+import { JSONFormatter } from 'app/core/components/JSONFormatter/JSONFormatter';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import './../../panel/metrics_tab';
@@ -199,6 +199,11 @@ export class QueriesTab extends PureComponent<Props, State> {
     });
   };
 
+  renderQueryInspector = () => {
+    const queryInspectorJson = { hello: 'world' }; // TODO
+    return <JSONFormatter json={queryInspectorJson} />;
+  };
+
   render() {
     const { currentDatasource } = this.state;
     const { helpHtml } = this.state.help;
@@ -220,7 +225,7 @@ export class QueriesTab extends PureComponent<Props, State> {
 
     const queryInspector = {
       title: 'Query Inspector',
-      render: () => <h2>hello</h2>,
+      render: this.renderQueryInspector,
     };
 
     const dsHelp = {
@@ -232,7 +237,8 @@ export class QueriesTab extends PureComponent<Props, State> {
     };
 
     const options = {
-      title: 'Options',
+      title: '',
+      icon: 'fa fa-cog',
       disabled: !hasQueryOptions,
       render: this.renderOptions,
     };

yarn.lock

@@ -6811,6 +6811,11 @@ json-buffer@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898"
 
+json-formatter-js@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/json-formatter-js/-/json-formatter-js-2.2.1.tgz#b101d628e86f028dc9cf9a7e1c83c65e536c9f87"
+  integrity sha1-sQHWKOhvAo3Jz5p+HIPGXlNsn4c=
+
 json-parse-better-errors@^1.0.0, json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"