refactor

src/client/js/components/Admin/ElasticsearchManagement/ElasticsearchManagement.jsx

@@ -6,6 +6,7 @@ import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
+import IndicesStatusTable from './IndicesStatusTable';
 import RebuildIndexControls from './RebuildIndexControls';
 
 class ElasticsearchManagement extends React.Component {
@@ -73,93 +74,6 @@ class ElasticsearchManagement extends React.Component {
     await this.retrieveIndicesStatus();
   }
 
-  renderIndexInfoPanel(indexName, body = {}, aliases = []) {
-    const collapseId = `collapse-${indexName}`;
-
-    const aliasLabels = aliases.map((aliasName) => {
-      return (
-        <span key={`label-${indexName}-${aliasName}`} className="label label-primary mr-2">
-          <i className="icon-tag"></i> {aliasName}
-        </span>
-      );
-    });
-
-    return (
-      <div className="panel panel-default">
-        <div className="panel-heading" role="tab">
-          <h4 className="panel-title">
-            <a role="button" data-toggle="collapse" data-parent="#accordion" href={`#${collapseId}`} aria-expanded="true" aria-controls={collapseId}>
-              <i className="fa fa-fw fa-database"></i> {indexName}
-            </a>
-            <span className="ml-3">{aliasLabels}</span>
-          </h4>
-        </div>
-        <div id={collapseId} className="panel-collapse collapse" role="tabpanel">
-          <div className="panel-body">
-            <pre>
-              {JSON.stringify(body, null, 2)}
-            </pre>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  renderIndexInfoPanels() {
-    const {
-      indicesData,
-      aliasesData,
-    } = this.state;
-
-    // data is null
-    if (indicesData == null) {
-      return null;
-    }
-
-    /*
-      "indices": {
-        "growi": {
-          ...
-        }
-      },
-    */
-    const indexNameToDataMap = {};
-    for (const [indexName, indexData] of Object.entries(indicesData)) {
-      indexNameToDataMap[indexName] = indexData;
-    }
-
-    // no indices
-    if (indexNameToDataMap.length === 0) {
-      return null;
-    }
-
-    /*
-      "aliases": {
-        "growi": {
-          "aliases": {
-            "growi-alias": {}
-          }
-        }
-      },
-    */
-    const indexNameToAliasMap = {};
-    for (const [indexName, aliasData] of Object.entries(aliasesData)) {
-      indexNameToAliasMap[indexName] = Object.keys(aliasData.aliases);
-    }
-
-    return (
-      <div className="row">
-        { Object.keys(indexNameToDataMap).map((indexName) => {
-          return (
-            <div key={`col-${indexName}`} className="col-xs-6">
-              { this.renderIndexInfoPanel(indexName, indexNameToDataMap[indexName], indexNameToAliasMap[indexName]) }
-            </div>
-          );
-        }) }
-      </div>
-    );
-  }
-
   renderNormalizeControls() {
     const { t } = this.props;
 
@@ -185,33 +99,17 @@ class ElasticsearchManagement extends React.Component {
 
   render() {
     const { t } = this.props;
-    const { isNormalized } = this.state;
-
-    let statusLabel = <span className="label label-default">――</span>;
-    if (isNormalized != null) {
-      statusLabel = isNormalized
-        ? <span className="label label-info">{ t('full_text_search_management.indices_status_label_normalized') }</span>
-        : <span className="label label-warning">{ t('full_text_search_management.indices_status_label_unnormalized') }</span>;
-    }
+    const { isNormalized, indicesData, aliasesData } = this.state;
 
     return (
       <>
         <div className="row">
           <div className="col-xs-12">
-            <table className="table table-bordered">
-              <tbody>
-                <tr>
-                  <th>{ t('full_text_search_management.indices_status') }</th>
-                  <td>{statusLabel}</td>
-                </tr>
-                <tr>
-                  <th className="col-sm-4">{ t('full_text_search_management.indices_summary') }</th>
-                  <td className="p-4">
-                    { this.renderIndexInfoPanels() }
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+            <IndicesStatusTable
+              isNormalized={isNormalized}
+              indicesData={indicesData}
+              aliasesData={aliasesData}
+            />
           </div>
         </div>
 

src/client/js/components/Admin/ElasticsearchManagement/IndicesStatusTable.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+
+class IndicesStatusTable extends React.PureComponent {
+
+  renderIndexInfoPanel(indexName, body = {}, aliases = []) {
+    const collapseId = `collapse-${indexName}`;
+
+    const aliasLabels = aliases.map((aliasName) => {
+      return (
+        <span key={`label-${indexName}-${aliasName}`} className="label label-primary mr-2">
+          <i className="icon-tag"></i> {aliasName}
+        </span>
+      );
+    });
+
+    return (
+      <div className="panel panel-default">
+        <div className="panel-heading" role="tab">
+          <h4 className="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#accordion" href={`#${collapseId}`} aria-expanded="true" aria-controls={collapseId}>
+              <i className="fa fa-fw fa-database"></i> {indexName}
+            </a>
+            <span className="ml-3">{aliasLabels}</span>
+          </h4>
+        </div>
+        <div id={collapseId} className="panel-collapse collapse" role="tabpanel">
+          <div className="panel-body">
+            <pre>
+              {JSON.stringify(body, null, 2)}
+            </pre>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderIndexInfoPanels() {
+    const {
+      indicesData,
+      aliasesData,
+    } = this.props;
+
+    // data is null
+    if (indicesData == null) {
+      return null;
+    }
+
+    /*
+      "indices": {
+        "growi": {
+          ...
+        }
+      },
+    */
+    const indexNameToDataMap = {};
+    for (const [indexName, indexData] of Object.entries(indicesData)) {
+      indexNameToDataMap[indexName] = indexData;
+    }
+
+    // no indices
+    if (indexNameToDataMap.length === 0) {
+      return null;
+    }
+
+    /*
+      "aliases": {
+        "growi": {
+          "aliases": {
+            "growi-alias": {}
+          }
+        }
+      },
+    */
+    const indexNameToAliasMap = {};
+    for (const [indexName, aliasData] of Object.entries(aliasesData)) {
+      indexNameToAliasMap[indexName] = Object.keys(aliasData.aliases);
+    }
+
+    return (
+      <div className="row">
+        { Object.keys(indexNameToDataMap).map((indexName) => {
+          return (
+            <div key={`col-${indexName}`} className="col-xs-6">
+              { this.renderIndexInfoPanel(indexName, indexNameToDataMap[indexName], indexNameToAliasMap[indexName]) }
+            </div>
+          );
+        }) }
+      </div>
+    );
+  }
+
+  render() {
+    const { t } = this.props;
+    const { isNormalized } = this.props;
+
+    let statusLabel = <span className="label label-default">――</span>;
+    if (isNormalized != null) {
+      statusLabel = isNormalized
+        ? <span className="label label-info">{ t('full_text_search_management.indices_status_label_normalized') }</span>
+        : <span className="label label-warning">{ t('full_text_search_management.indices_status_label_unnormalized') }</span>;
+    }
+
+    return (
+      <table className="table table-bordered">
+        <tbody>
+          <tr>
+            <th>{ t('full_text_search_management.indices_status') }</th>
+            <td>{statusLabel}</td>
+          </tr>
+          <tr>
+            <th className="col-sm-4">{ t('full_text_search_management.indices_summary') }</th>
+            <td className="p-4">
+              { this.renderIndexInfoPanels() }
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const IndicesStatusTableWrapper = (props) => {
+  return createSubscribedElement(IndicesStatusTable, props, []);
+};
+
+IndicesStatusTable.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
+  isNormalized: PropTypes.bool,
+  indicesData: PropTypes.object,
+  aliasesData: PropTypes.object,
+};
+
+export default withTranslation()(IndicesStatusTableWrapper);