update QueryAnalyzer to support subscriptions

- this commit should address #2451
hasura · Jun 2, 2020 · 0976ac4 · 0976ac4
1 parent 3727184
commit 0976ac4
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -57,6 +57,7 @@ Read more about the session argument for computed fields in the [docs](https://h
 - server: fix importing of allow list query from metadata (fix #4687)
 - server: flush log buffer during shutdown (#4800)
 - server: fix edge case with printing logs on startup failure (fix #4772)
+- console: add support for subscriptions on QueryAnalyzer (#2541)
 - console: avoid count queries for large tables (#4692)
 - console: add read replica support section to pro popup (#4118)
 - console: allow modifying default value for PK (fix #4075) (#4679)

diff --git a/console/src/components/Services/ApiExplorer/Analyzer/QueryAnalyzer.js b/console/src/components/Services/ApiExplorer/Analyzer/QueryAnalyzer.js
@@ -11,6 +11,14 @@ export default class QueryAnalyser extends React.Component {
       activeNode: 0,
     };
   }
+  modifyResponse = data => {
+    // analyze on subscriptions returns an object
+    if (!Array.isArray(data)) {
+      return [data];
+    }
+
+    return data;
+  };
   componentDidMount() {
     this.props
       .analyzeFetcher(this.props.analyseQuery.query)
@@ -22,7 +30,7 @@ export default class QueryAnalyser extends React.Component {
       })
       .then(data => {
         this.setState({
-          analyseData: data,
+          analyseData: this.modifyResponse(data),
           activeNode: 0,
         });
       })
@@ -31,21 +39,26 @@ export default class QueryAnalyser extends React.Component {
         this.props.clearAnalyse();
       });
   }
+  renderAnalysisList() {
+    return this.state.analyseData.map((analysis, i) => {
+      if (analysis.hasOwnProperty('field')) {
+        return (
+          <li
+            className={i === this.state.activeNode ? 'active' : ''}
+            key={i}
+            data-key={i}
+            onClick={this.handleAnalyseNodeChange.bind(this)}
+          >
+            {console.log(analysis)}
+            <i className="fa fa-table" aria-hidden="true" />
+            {analysis.field}
+          </li>
+        );
+      }
+    });
+  }
   render() {
     const { show, clearAnalyse } = this.props;
-    const analysisList = this.state.analyseData.map((analysis, i) => {
-      return (
-        <li
-          className={i === this.state.activeNode ? 'active' : ''}
-          key={i}
-          data-key={i}
-          onClick={this.handleAnalyseNodeChange.bind(this)}
-        >
-          <i className="fa fa-table" aria-hidden="true" />
-          {analysis.field}
-        </li>
-      );
-    });
     return (
       <Modal
         className="modalWrapper"
@@ -64,7 +77,7 @@ export default class QueryAnalyser extends React.Component {
           <div className="wd25">
             <div className="topLevelNodesWrapper">
               <div className="title">Top level nodes</div>
-              <ul>{analysisList}</ul>
+              <ul>{this.renderAnalysisList()}</ul>
             </div>
           </div>
           <div className="wd75">