show connection status to IndicesStatusTable

resource/locales/en-US/translation.json

@@ -806,6 +806,9 @@
   },
   "full_text_search_management": {
     "elasticsearch_management": "Elasticsearch Management",
+    "connection_status": "Connection Status",
+    "connection_status_label_connected": "CONNECTED",
+    "connection_status_label_disconnected": "DISCONNECTED",
     "indices_status": "Indices Status",
     "indices_status_label_normalized": "NORMALIZED",
     "indices_status_label_unnormalized": "REBUILDING or BROKEN",

resource/locales/ja/translation.json

@@ -790,6 +790,9 @@
   },
   "full_text_search_management": {
     "elasticsearch_management": "Elasticsearch 管理",
+    "connection_status": "接続の状態",
+    "connection_status_label_connected": "接続されています",
+    "connection_status_label_disconnected": "切断されています",
     "indices_status": "インデックスの状態",
     "indices_status_label_normalized": "正規化されています",
     "indices_status_label_unnormalized": "リビルド中 または 破損しています",

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

@@ -139,6 +139,7 @@ class ElasticsearchManagement extends React.Component {
         <div className="row">
           <div className="col-xs-12">
             <IndicesStatusTable
+              isConnected={isConnected}
               isNormalized={isNormalized}
               indicesData={indicesData}
               aliasesData={aliasesData}

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

@@ -95,11 +95,19 @@ class IndicesStatusTable extends React.PureComponent {
 
   render() {
     const { t } = this.props;
-    const { isNormalized } = this.props;
+    const { isConnected, isNormalized } = this.props;
 
-    let statusLabel = <span className="label label-default">――</span>;
+
+    let connectionStatusLabel = <span className="label label-default">――</span>;
+    if (isConnected != null) {
+      connectionStatusLabel = isConnected
+        ? <span className="label label-success">{ t('full_text_search_management.connection_status_label_connected') }</span>
+        : <span className="label label-danger">{ t('full_text_search_management.connection_status_label_disconnected') }</span>;
+    }
+
+    let indicesStatusLabel = <span className="label label-default">――</span>;
     if (isNormalized != null) {
-      statusLabel = isNormalized
+      indicesStatusLabel = 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>;
     }
@@ -107,9 +115,13 @@ class IndicesStatusTable extends React.PureComponent {
     return (
       <table className="table table-bordered">
         <tbody>
+          <tr>
+            <th>{ t('full_text_search_management.connection_status') }</th>
+            <td>{connectionStatusLabel}</td>
+          </tr>
           <tr>
             <th>{ t('full_text_search_management.indices_status') }</th>
-            <td>{statusLabel}</td>
+            <td>{indicesStatusLabel}</td>
           </tr>
           <tr>
             <th className="col-sm-4">{ t('full_text_search_management.indices_summary') }</th>
@@ -134,6 +146,7 @@ const IndicesStatusTableWrapper = (props) => {
 IndicesStatusTable.propTypes = {
   t: PropTypes.func.isRequired, // i18next
 
+  isConnected: PropTypes.bool,
   isNormalized: PropTypes.bool,
   indicesData: PropTypes.object,
   aliasesData: PropTypes.object,