show Full Text Search Management

packages/app/src/components/Admin/ElasticsearchManagement/ElasticsearchManagement.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
+
 
-import AdminSocketIoContainer from '~/client/services/AdminSocketIoContainer';
-import AppContainer from '~/client/services/AppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import { apiv3Get, apiv3Post, apiv3Put } from '~/client/util/apiv3-client';
-
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import { useIsSearchServiceReachable } from '~/stores/context';
+import { useAdminSocket } from '~/stores/socket-io';
 
 import NormalizeIndicesControls from './NormalizeIndicesControls';
 import RebuildIndexControls from './RebuildIndexControls';
@@ -48,30 +47,31 @@ class ElasticsearchManagement extends React.Component {
   }
 
   initWebSockets() {
-    const socket = this.props.adminSocketIoContainer.getSocket();
+    const { socket } = this.props;
 
-    socket.on('addPageProgress', (data) => {
-      this.setState({
-        isRebuildingProcessing: true,
+    if (socket != null) {
+      socket.on('addPageProgress', (data) => {
+        this.setState({
+          isRebuildingProcessing: true,
+        });
       });
-    });
 
-    socket.on('finishAddPage', async(data) => {
-      await this.retrieveIndicesStatus();
-      this.setState({
-        isRebuildingProcessing: false,
-        isRebuildingCompleted: true,
+      socket.on('finishAddPage', async(data) => {
+        await this.retrieveIndicesStatus();
+        this.setState({
+          isRebuildingProcessing: false,
+          isRebuildingCompleted: true,
+        });
+      });
+
+      socket.on('rebuildingFailed', (data) => {
+        toastError(new Error(data.error), 'Rebuilding Index has failed.');
       });
-    });
+    }
 
-    socket.on('rebuildingFailed', (data) => {
-      toastError(new Error(data.error), 'Rebuilding Index has failed.');
-    });
   }
 
   async retrieveIndicesStatus() {
-    const { appContainer } = this.props;
-
     try {
       const { data } = await apiv3Get('/search/indices');
       const { info } = data;
@@ -103,8 +103,6 @@ class ElasticsearchManagement extends React.Component {
   }
 
   async reconnect() {
-    const { appContainer } = this.props;
-
     this.setState({ isReconnectingProcessing: true });
 
     try {
@@ -120,7 +118,6 @@ class ElasticsearchManagement extends React.Component {
   }
 
   async normalizeIndices() {
-    const { appContainer } = this.props;
 
     try {
       await apiv3Put('/search/indices', { operation: 'normalize' });
@@ -135,8 +132,6 @@ class ElasticsearchManagement extends React.Component {
   }
 
   async rebuildIndices() {
-    const { appContainer } = this.props;
-
     this.setState({ isRebuildingProcessing: true });
 
     try {
@@ -151,14 +146,14 @@ class ElasticsearchManagement extends React.Component {
   }
 
   render() {
-    const { t, appContainer } = this.props;
+    const { t, isSearchServiceReachable } = this.props;
     const {
       isInitialized,
       isConnected, isConfigured, isReconnectingProcessing, isRebuildingProcessing, isRebuildingCompleted,
       isNormalized, indicesData, aliasesData,
     } = this.state;
 
-    const isErrorOccuredOnSearchService = !appContainer.config.isSearchServiceReachable;
+    const isErrorOccuredOnSearchService = !isSearchServiceReachable;
 
     const isReconnectBtnEnabled = !isReconnectingProcessing && (!isInitialized || !isConnected || isErrorOccuredOnSearchService);
 
@@ -228,18 +223,21 @@ class ElasticsearchManagement extends React.Component {
 
 const ElasticsearchManagementWrapperFC = (props) => {
   const { t } = useTranslation();
-  return <ElasticsearchManagement t={t} {...props} />;
+  const { data: isSearchServiceReachable } = useIsSearchServiceReachable();
+  const { data: socket } = useAdminSocket();
+
+  // if (isSearchServiceReachable == null) {
+  //   return <></>;
+  // }
+
+  return <ElasticsearchManagement t={t} isSearchServiceReachable={isSearchServiceReachable} socket={socket} {...props} />;
 };
 
-/**
- * Wrapper component for using unstated
- */
-const ElasticsearchManagementWrapper = withUnstatedContainers(ElasticsearchManagementWrapperFC, [AppContainer, AdminSocketIoContainer]);
 
 ElasticsearchManagement.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminSocketIoContainer: PropTypes.instanceOf(AdminSocketIoContainer).isRequired,
+  isSearchServiceReachable: PropTypes.bool,
+  socket: PropTypes.object,
 };
 
-export default ElasticsearchManagementWrapper;
+export default ElasticsearchManagementWrapperFC;

packages/app/src/components/Admin/ElasticsearchManagement/RebuildIndexControls.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 
-import AdminSocketIoContainer from '~/client/services/AdminSocketIoContainer';
+import { useAdminSocket } from '~/stores/socket-io';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
 import LabeledProgressBar from '../Common/LabeledProgressBar';
 
 class RebuildIndexControls extends React.Component {
@@ -25,24 +24,25 @@ class RebuildIndexControls extends React.Component {
   }
 
   initWebSockets() {
-    const socket = this.props.adminSocketIoContainer.getSocket();
-
-    socket.on('addPageProgress', (data) => {
-      this.setState({
-        total: data.totalCount,
-        current: data.count,
-        skip: data.skipped,
+    const { socket } = this.props;
+
+    if (socket != null) {
+      socket.on('addPageProgress', (data) => {
+        this.setState({
+          total: data.totalCount,
+          current: data.count,
+          skip: data.skipped,
+        });
       });
-    });
 
-    socket.on('finishAddPage', (data) => {
-      this.setState({
-        total: data.totalCount,
-        current: data.count,
-        skip: data.skipped,
+      socket.on('finishAddPage', (data) => {
+        this.setState({
+          total: data.totalCount,
+          current: data.count,
+          skip: data.skipped,
+        });
       });
-    });
-
+    }
   }
 
   renderProgressBar() {
@@ -109,24 +109,20 @@ class RebuildIndexControls extends React.Component {
 
 const RebuildIndexControlsFC = (props) => {
   const { t } = useTranslation();
-  return <RebuildIndexControls t={t} {...props} />;
+  const { data: socket } = useAdminSocket();
+  return <RebuildIndexControls t={t} socket={socket} {...props} />;
 };
 
 
-/**
- * Wrapper component for using unstated
- */
-const RebuildIndexControlsWrapper = withUnstatedContainers(RebuildIndexControlsFC, [AdminSocketIoContainer]);
-
 RebuildIndexControls.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  adminSocketIoContainer: PropTypes.instanceOf(AdminSocketIoContainer).isRequired,
 
   isRebuildingProcessing: PropTypes.bool.isRequired,
   isRebuildingCompleted: PropTypes.bool.isRequired,
 
   isNormalized: PropTypes.bool,
   onRebuildingRequested: PropTypes.func.isRequired,
+  socket: PropTypes.object,
 };
 
-export default RebuildIndexControlsWrapper;
+export default RebuildIndexControlsFC;

packages/app/src/pages/admin/[[...path]].page.tsx

@@ -7,6 +7,7 @@ import { useRouter } from 'next/router';
 
 import AdminHome from '~/components/Admin/AdminHome/AdminHome';
 import AppSettingsPageContents from '~/components/Admin/App/AppSettingsPageContents';
+import ElasticsearchManagement from '~/components/Admin/ElasticsearchManagement/ElasticsearchManagement';
 import ExportArchiveDataPage from '~/components/Admin/ExportArchiveDataPage';
 import DataImportPageContents from '~/components/Admin/ImportData/ImportDataPageContents';
 import MarkDownSettingContents from '~/components/Admin/MarkdownSetting/MarkDownSettingContents';
@@ -19,8 +20,6 @@ import { CrowiRequest } from '~/interfaces/crowi-request';
 import { CommonProps, getServerSideCommonProps, useCustomTitle } from '~/pages/commons';
 import PluginUtils from '~/server/plugins/plugin-utils';
 import ConfigLoader from '~/server/service/config-loader';
-
-// import ElasticsearchManagement from '~/components/Admin/ElasticsearchManagement/ElasticsearchManagement';
 import {
   useCurrentUser,
   /* useSearchServiceConfigured, useSearchServiceReachable, */ useSiteUrl,
@@ -108,8 +107,7 @@ const AdminMarkdownSettingsPage: NextPage<Props> = (props: Props) => {
     },
     search: {
       title: useCustomTitle(props, t('Full Text Search Management')),
-      // component: <ElasticsearchManagement />,
-      component: <>ElasticsearchManagement</>,
+      component: <ElasticsearchManagement />,
     },
   };