transplant AdminRebuildSearch component from crowi

src/client/js/app.js

@@ -3,8 +3,6 @@ import ReactDOM from 'react-dom';
 import { I18nextProvider } from 'react-i18next';
 import * as toastr from 'toastr';
 
-import io from 'socket.io-client';
-
 import i18nFactory from './i18n';
 
 import loggerFactory from '@alias/logger';
@@ -38,6 +36,7 @@ import RecentCreated from './components/RecentCreated/RecentCreated';
 import CustomCssEditor  from './components/Admin/CustomCssEditor';
 import CustomScriptEditor from './components/Admin/CustomScriptEditor';
 import CustomHeaderEditor from './components/Admin/CustomHeaderEditor';
+import AdminRebuildSearch from './components/Admin/AdminRebuildSearch';
 
 import * as entities from 'entities';
 
@@ -50,8 +49,6 @@ if (!window) {
 const userlang = $('body').data('userlang');
 const i18n = i18nFactory(userlang);
 
-const socket = io();
-
 // setup xss library
 const xss = new Xss();
 window.xss = xss;
@@ -95,6 +92,7 @@ crowi.setConfig(JSON.parse(document.getElementById('crowi-context-hydrate').text
 if (isLoggedin) {
   crowi.fetchUsers();
 }
+const socket = crowi.getWebSocket();
 const socketClientId = crowi.getSocketClientId();
 
 const crowiRenderer = new GrowiRenderer(crowi, null, {
@@ -475,6 +473,13 @@ if (customHeaderEditorElem != null) {
     customHeaderEditorElem
   );
 }
+const adminRebuildSearchElem = document.getElementById('admin-rebuild-search');
+if (adminRebuildSearchElem != null) {
+  ReactDOM.render(
+    <AdminRebuildSearch crowi={crowi} />,
+    adminRebuildSearchElem
+  );
+}
 
 // notification from websocket
 function updatePageStatusAlert(page, user) {

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class AdminRebuildSearch extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isCompleted: false,
+      total: 0,
+      current: 0,
+      skip: 0,
+    };
+  }
+
+  componentDidMount() {
+    const socket = this.props.crowi.getWebSocket();
+
+    socket.on('admin:addPageProgress', data => {
+      const newStates = Object.assign(data, { isCompleted: false });
+      this.setState(newStates);
+    });
+
+    socket.on('admin:finishAddPage', data => {
+      const newStates = Object.assign(data, { isCompleted: true });
+      this.setState(newStates);
+    });
+  }
+
+  render() {
+    const { total, current, skip, isCompleted } = this.state;
+    if (total === 0) {
+      return null;
+    }
+
+    if (isCompleted) {
+      return (
+        <div className="progress">
+          <div className="progress-bar progress-bar-striped" style={{ width: '100%' }} />
+        </div>
+      );
+    }
+
+    return (
+      <div className="progress">
+        <div
+          className="progress-bar progress-bar-striped progress-bar-animated active"
+          role="progressbar"
+          aria-valuemin="0"
+          aria-valuenow={current}
+          aria-valuemax={total}
+          style={{ width: `${(current / total) * 100}%` }}
+        >
+          {current}/{total} ({skip} skips)
+        </div>
+      </div>
+    );
+  }
+}
+
+AdminRebuildSearch.propTypes = {
+  crowi: PropTypes.object.isRequired,
+};

src/client/js/util/Crowi.js

@@ -3,6 +3,7 @@
  */
 
 import axios from 'axios';
+import io from 'socket.io-client';
 
 import InterceptorManager from '@commons/service/interceptor-manager';
 
@@ -50,6 +51,8 @@ export default class Crowi {
     this.editorOptions = {};
 
     this.recoverData();
+
+    this.socket = io();
   }
 
   /**
@@ -75,6 +78,10 @@ export default class Crowi {
     this.pageEditor = pageEditor;
   }
 
+  getWebSocket() {
+    return this.socket;
+  }
+
   getSocketClientId() {
     return this.socketClientId;
   }

src/server/views/admin/search.html

@@ -51,6 +51,10 @@
             <div class="form-group">
               <label for="" class="col-xs-3 control-label">Index Build</label>
               <div class="col-xs-6">
+
+                <div id="admin-rebuild-search">
+                </div>
+
                 <button type="submit" class="btn btn-inverse">Build Now</button>
                 <p class="help-block">
                   Force rebuild index.<br>