feat: add user statistics table to admin home

apps/app/public/static/locales/ja_JP/admin.json

@@ -321,6 +321,7 @@
       "default": "上記のホスト情報をコピー",
       "done": "クリップボードにコピーしました！"
     },
+    "user_statistics": "ユーザーデータ",
     "bug_report": "バグを報告する",
     "submit_bug_report": "<a href='https://github.com/growilabs/growi/issues/new?assignees=&labels=bug&template=bug-report.md&title=Bug%3A' target='_blank' rel='noreferrer'>次に GitHub で Issue を投稿してください。</a>"
   },

apps/app/src/client/components/Admin/AdminHome/AdminHome.jsx

@@ -16,6 +16,7 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import { EnvVarsTable } from './EnvVarsTable';
 import SystemInfomationTable from './SystemInfomationTable';
+import UserStatisticsTable from './UserStatisticsTable';
 
 const logger = loggerFactory('growi:admin');
 
@@ -94,6 +95,13 @@ const AdminHome = (props) => {
         </div>
       </div>
 
+      <div className="row mb-5">
+        <div className="col-lg-12">
+          <h2 className="admin-setting-header">{t('admin:admin_top.user_statistics')}</h2>
+          <UserStatisticsTable />
+        </div>
+      </div>
+
       <div className="row mb-5">
         <div className="col-md-12">
           <h2 className="admin-setting-header">{t('admin:admin_top.bug_report')}</h2>

apps/app/src/client/components/Admin/AdminHome/UserStatisticsTable.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import AdminHomeContainer from '~/client/services/AdminHomeContainer';
+
+import { withUnstatedContainers } from '../../UnstatedUtils';
+
+type Props = {
+  adminHomeContainer: AdminHomeContainer,
+}
+
+const UserStatisticsTable: React.FC<Props> = (props: Props) => {
+  const { adminHomeContainer } = props;
+  const userStatistics = adminHomeContainer.state.userStatistics;
+
+  if (userStatistics == null) return null;
+
+  return (
+    <table className="table table-bordered user-stats-table">
+      <tbody>
+        <tr>
+          <th className="col-sm-4">Total Users</th>
+          <td>{ userStatistics.total }</td>
+        </tr>
+        <tr>
+          <th className="col-sm-4">Active Users</th>
+          <td>{ userStatistics.active.total }</td>
+        </tr>
+        <tr>
+          <th className="col-sm-4">Inactive Users</th>
+          <td>{ userStatistics.inactive.total }</td>
+        </tr>
+      </tbody>
+      <style jsx>{`
+    .user-stats-table {
+      table-layout: fixed;
+      width: 100%;
+    }
+    .user-stats-table th,
+    .user-stats-table td {
+      width: 50%;
+      vertical-align: top;
+    }
+  `}
+      </style>
+    </table>
+  );
+};
+
+const UserStatisticsTableWrapper = withUnstatedContainers(UserStatisticsTable, [AdminHomeContainer]);
+export default UserStatisticsTableWrapper;

apps/app/src/client/services/AdminHomeContainer.js

@@ -36,6 +36,7 @@ export default class AdminHomeContainer extends Container {
       installedPlugins: null,
       isV5Compatible: null,
       isMaintenanceMode: null,
+      userStatistics: null,
     };
 
   }
@@ -59,6 +60,9 @@ export default class AdminHomeContainer extends Container {
       const response = await apiv3Get('/admin-home/');
       const { adminHomeParams } = response.data;
 
+      const statsRes = await apiv3Get('/statistics/user');
+      const userStatistics = statsRes.data.data;
+
       this.setState(prevState => ({
         ...prevState,
         growiVersion: adminHomeParams.growiVersion,
@@ -68,6 +72,7 @@ export default class AdminHomeContainer extends Container {
         envVars: adminHomeParams.envVars,
         isV5Compatible: adminHomeParams.isV5Compatible,
         isMaintenanceMode: adminHomeParams.isMaintenanceMode,
+        userStatistics,
       }));
     }
     catch (err) {