react-panel: Toggle Expand/Collapse json nodes in Query Inspector

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

@@ -7,12 +7,20 @@ interface Props {
   response: any;
   response: any;
 }
 }
 
 
-export class QueryInspector extends PureComponent<Props> {
+interface State {
+  allNodesExpanded: boolean;
+}
+
+export class QueryInspector extends PureComponent<Props, State> {
   formattedJson: any;
   formattedJson: any;
   clipboard: any;
   clipboard: any;
 
 
   constructor(props) {
   constructor(props) {
     super(props);
     super(props);
+
+    this.state = {
+      allNodesExpanded: null,
+    };
   }
   }
 
 
   setFormattedJson = formattedJson => {
   setFormattedJson = formattedJson => {
@@ -27,8 +35,26 @@ export class QueryInspector extends PureComponent<Props> {
     appEvents.emit('alert-success', ['Content copied to clipboard']);
     appEvents.emit('alert-success', ['Content copied to clipboard']);
   };
   };
 
 
+  onToggleExpand = () => {
+    this.setState(prevState => ({
+      ...prevState,
+      allNodesExpanded: !this.state.allNodesExpanded,
+    }));
+  };
+
+  getNrOfOpenNodes = () => {
+    if (this.state.allNodesExpanded === null) {
+      return 3;
+    } else if (this.state.allNodesExpanded) {
+      return 20;
+    }
+    return 1;
+  };
+
   render() {
   render() {
     const { response } = this.props;
     const { response } = this.props;
+    const { allNodesExpanded } = this.state;
+    const openNodes = this.getNrOfOpenNodes();
     return (
     return (
       <>
       <>
         {/* <div className="query-troubleshooter__header">
         {/* <div className="query-troubleshooter__header">
@@ -44,6 +70,17 @@ export class QueryInspector extends PureComponent<Props> {
         </div> */}
         </div> */}
         {/* <button onClick={this.copyToClipboard}>Copy</button>
         {/* <button onClick={this.copyToClipboard}>Copy</button>
         <button ref={this.copyButtonRef}>Copy2</button> */}
         <button ref={this.copyButtonRef}>Copy2</button> */}
+        <button className="btn btn-transparent" onClick={this.onToggleExpand}>
+          {allNodesExpanded ? (
+            <>
+              <i className="fa fa-minus-square-o" /> Collapse All
+            </>
+          ) : (
+            <>
+              <i className="fa fa-plus-square-o" /> Expand All
+            </>
+          )}
+        </button>
 
 
         <CopyToClipboard
         <CopyToClipboard
           className="btn btn-transparent"
           className="btn btn-transparent"
@@ -54,7 +91,7 @@ export class QueryInspector extends PureComponent<Props> {
             <i className="fa fa-clipboard" /> Copy to Clipboard
             <i className="fa fa-clipboard" /> Copy to Clipboard
           </>
           </>
         </CopyToClipboard>
         </CopyToClipboard>
-        <JSONFormatter json={response} onDidRender={this.setFormattedJson} />
+        <JSONFormatter json={response} open={openNodes} onDidRender={this.setFormattedJson} />
       </>
       </>
     );
     );
   }
   }