Fix Query Tester in AI Connection Settings

package.json

@@ -50,6 +50,7 @@
     "ms-rest-azure": "^2.1.2",
     "passport": "^0.3.2",
     "passport-azure-ad": "^3.0.5",
+    "react-json-tree": "^0.10.9",
     "xhr-request": "^1.0.1"
   },
   "scripts": {

src/data-sources/connections/application-insights/QueryTester.tsx

@@ -7,13 +7,14 @@ import Toolbar from 'react-md/lib/Toolbars';
 import Divider from 'react-md/lib/Dividers';
 import CircularProgress from 'react-md/lib/Progress/CircularProgress';
 import ApplicationInsightsApi from '../../plugins/ApplicationInsights/ApplicationInsightsApi';
+import JSONTree from 'react-json-tree';
 
 interface IQueryTesterState {
   showDialog: boolean;
   query: string;
-  response: string;
+  response: object;
   loadingData: boolean;
-  responseHeight: number;
+  expandResponse: boolean;
 }
 
 interface IQueryTesterProps {
@@ -27,9 +28,9 @@ export default class QueryTester extends React.Component<IQueryTesterProps, IQue
   state: IQueryTesterState = {
     showDialog: false,
     query: '',
-    response: '',
+    response: {},
     loadingData: false,
-    responseHeight: 100
+    expandResponse: true
   };
   
   constructor(props: any) {
@@ -39,6 +40,8 @@ export default class QueryTester extends React.Component<IQueryTesterProps, IQue
     this.openDialog = this.openDialog.bind(this);
     this.submitQuery = this.submitQuery.bind(this);
     this.onQueryChange = this.onQueryChange.bind(this);
+    this.collapseResponse = this.collapseResponse.bind(this);
+    this.expandResponse = this.expandResponse.bind(this);
   }
 
   closeDialog() {
@@ -49,15 +52,20 @@ export default class QueryTester extends React.Component<IQueryTesterProps, IQue
     this.setState({ showDialog: true });
   }
 
+  collapseResponse() {
+    this.setState({ expandResponse: false });
+  }
+
+  expandResponse() {
+    this.setState({ expandResponse: true });
+  }
+
   submitQuery() {
-    this.setState({ loadingData: true, response: '' });
+    this.setState({ loadingData: true, response: {} });
 
     let appInsightsApi = new ApplicationInsightsApi(this.props.applicationID, this.props.apiKey);
-    appInsightsApi.callQuery(this.state.query, json => {
+    appInsightsApi.callQuery(this.state.query, (err, json) => {
-      // and later turn off indicator
+      this.setState({ loadingData: false, response: json });
-      var response = JSON.stringify(json);
-      var h = document.getElementById('testerForm').clientHeight - 185;
-      this.setState({ loadingData: false, response: response, responseHeight: h });
     });
   }
 
@@ -65,11 +73,21 @@ export default class QueryTester extends React.Component<IQueryTesterProps, IQue
     this.setState({ query: value });
   }
 
-  render() {
+  onResponseChange(value: object, event: any) {
-    let { showDialog, query, response, loadingData, responseHeight } = this.state;
+    this.setState({ response: value });
+  }
 
-    const nav = <Button icon onClick={this.closeDialog}>close</Button>;
+  render() {
-    const action = <Button flat label="Send" onClick={this.submitQuery} />;
+    let { showDialog, query, response, loadingData, expandResponse } = this.state;
+
+    const dialogActions = [
+            { onClick: this.submitQuery, primary: true, label: 'Run query' },
+            { onClick: this.collapseResponse, primary: false, label: 'Collapse', 
+            disabled: _.isEmpty(response) || !expandResponse ? true : false}, 
+            { onClick: this.expandResponse, primary: false, label: 'Expand',
+           disabled: _.isEmpty(response) || expandResponse ? true : false}, 
+            { onClick: this.closeDialog, primary: false, label: 'Close'}
+          ];
     
     return (
       <div>
@@ -78,20 +96,11 @@ export default class QueryTester extends React.Component<IQueryTesterProps, IQue
           id="testerForm" 
           visible={showDialog} 
           onHide={this.closeDialog} 
-          dialogStyle={{ width: '50%', height: '50%' }}
+          dialogStyle={{ width: '60%', height: '90%' }}
+          disableScrollLocking={true}
+          renderNode={document.getElementById('settingsForm')}   
           title="Query tester"
-          actions={[
+          actions= {dialogActions}
-            {
-              onClick: this.submitQuery,
-              primary: true,
-              label: 'Run query',
-            }, 
-            {
-              onClick: this.closeDialog,
-              primary: false,
-              label: 'Close',
-            }
-          ]}
         >
           <TextField
             id="query"
@@ -102,15 +111,9 @@ export default class QueryTester extends React.Component<IQueryTesterProps, IQue
             onChange={this.onQueryChange}
           />
           <Divider />
-          <TextField
+          <div style={{overflowY: 'scroll', height: '75%', width: '100%', position: 'absolute'}}>
-            id="responseView"
+            <JSONTree data={response} theme="default" shouldExpandNode={() => expandResponse}/>
-            block
+          </div>
-            paddedBlock
-            rows={4}
-            defaultValue={response}
-            disabled
-            inputStyle={{ 'max-height': responseHeight }}
-          />
           <div 
             style={
               {