[GitHub] [incubator-druid] vogievetsky commented on a change in pull request #8484: Web console: Druid status displayed in a table

[GitBox <gi...@apache.org>]

vogievetsky commented on a change in pull request #8484: Web console: Druid status displayed in a table
URL: https://github.com/apache/incubator-druid/pull/8484#discussion_r322359910
 
 

 ##########
 File path: web-console/src/dialogs/status-dialog/status-dialog.tsx
 ##########
 @@ -16,29 +16,97 @@
  * limitations under the License.
  */
 
-import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { Button, Classes, Dialog, InputGroup, Intent } from '@blueprintjs/core';
+import axios from 'axios';
 import React from 'react';
+import ReactTable from 'react-table';
 
-import { ShowJson } from '../../components';
 import { UrlBaser } from '../../singletons/url-baser';
+import { QueryManager } from '../../utils';
 
 import './status-dialog.scss';
 
 interface StatusDialogProps {
   onClose: () => void;
 }
 
-export class StatusDialog extends React.PureComponent<StatusDialogProps> {
+interface StatusDialogState {
+  response: any;
+  loading: boolean;
+  version: string;
+}
+
+export class StatusDialog extends React.PureComponent<StatusDialogProps, StatusDialogState> {
+  private showStatusQueryManager: QueryManager<null, string>;
+  constructor(props: StatusDialogProps, context: any) {
+    super(props, context);
+    this.state = {
+      response: [],
+      loading: false,
+      version: '',
+    };
+    this.showStatusQueryManager = new QueryManager({
+      processQuery: async () => {
+        const endpoint = UrlBaser.base(`/status`);
+        const resp = await axios.get(endpoint);
+        this.setState({ version: 'Version ' + resp.data.version });
+        return resp.data.modules;
+      },
+      onStateChange: ({ result, loading }) => {
+        this.setState({
+          loading,
+          response: result,
+        });
+      },
+    });
+  }
+
+  componentDidMount(): void {
+    this.showStatusQueryManager.runQuery(null);
+  }
+
   render(): JSX.Element {
     const { onClose } = this.props;
-
+    const { response, loading, version } = this.state;
     return (
       <Dialog className={'status-dialog'} onClose={onClose} isOpen title="Status">
         <div className={'status-dialog-main-area'}>
-          <ShowJson endpoint={UrlBaser.base(`/status`)} downloadFilename={'status'} />
+          <InputGroup defaultValue={version} readOnly />
+          <ReactTable
+            data={response}
+            columns={[
+              {
+                Header: 'Extensions',
+                columns: [
+                  {
+                    Header: 'Extension Name',
 
 Review comment:
   Please use "Sentence casing"

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org