console: update QueryAnalyzer to support subscriptions

CHANGELOG.md

@@ -70,6 +70,7 @@ Read more about the session argument for computed fields in the [docs](https://h
 - server: flush log buffer during shutdown (#4800)
 - server: fix edge case with printing logs on startup failure (fix #4772)
 - console: allow entering big int values in the console (close #3667) (#4775)
+- console: add support for subscriptions analyze in API explorer (close #2541) (#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)

console/src/components/Services/ApiExplorer/Analyzer/QueryAnalyzer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Modal from 'react-modal';
+import RootFields from './RootFields';
 
 export default class QueryAnalyser extends React.Component {
   constructor() {
@@ -11,6 +12,7 @@ export default class QueryAnalyser extends React.Component {
       activeNode: 0,
     };
   }
+
   componentDidMount() {
     this.props
       .analyzeFetcher(this.props.analyseQuery.query)
@@ -22,7 +24,7 @@ export default class QueryAnalyser extends React.Component {
       })
       .then(data => {
         this.setState({
-          analyseData: data,
+          analyseData: Array.isArray(data) ? data : [data],
           activeNode: 0,
         });
       })
@@ -33,19 +35,6 @@ export default class QueryAnalyser extends React.Component {
   }
   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 +53,11 @@ export default class QueryAnalyser extends React.Component {
           <div className="wd25">
             <div className="topLevelNodesWrapper">
               <div className="title">Top level nodes</div>
-              <ul>{analysisList}</ul>
+              <RootFields
+                data={this.state.analyseData}
+                activeNode={this.state.activeNode}
+                onClick={this.handleAnalyseNodeChange}
+              />
             </div>
           </div>
           <div className="wd75">
@@ -171,12 +164,12 @@ export default class QueryAnalyser extends React.Component {
   }
   */
 
-  handleAnalyseNodeChange(e) {
+  handleAnalyseNodeChange = e => {
     const nodeKey = e.target.getAttribute('data-key');
     if (nodeKey) {
       this.setState({ activeNode: parseInt(nodeKey, 10) });
     }
-  }
+  };
   copyToClip(type, id) {
     let text = '';
     if (this.state.analyseData.length > 0) {

console/src/components/Services/ApiExplorer/Analyzer/RootFields.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+type ExplainPayload = {
+  field: string;
+  sql: string;
+  plan: string[];
+};
+
+type RootFieldsProps = {
+  data: ExplainPayload[];
+  activeNode: number;
+  onClick: (e: React.MouseEvent<HTMLLIElement>) => void;
+};
+
+const RootFields: React.FC<RootFieldsProps> = ({
+  data,
+  activeNode,
+  onClick,
+}) => (
+  <ul>
+    {data.map((analysis, i) => {
+      return (
+        analysis.field && (
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+          <li
+            className={i === activeNode ? 'active' : ''}
+            key={i}
+            data-key={i}
+            onClick={onClick}
+          >
+            <i className="fa fa-table" aria-hidden="true" />
+            {analysis.field}
+          </li>
+        )
+      );
+    })}
+  </ul>
+);
+
+export default RootFields;