perf: add instance DB size to index sidebar. gh-180

Author: riccox

package.json

@@ -37,6 +37,7 @@
     "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
     "echarts-for-react": "^3.0.2",
+    "filesize": "^10.1.6",
     "framer-motion": "^11.11.7",
     "fuse.js": "^7.0.0",
     "i18next": "^23.15.2",

pnpm-lock.yaml

@@ -7,7 +7,7 @@
   "version": {
     "label": "Meilisearch Version"
   },
-  "db_size": "DB Size",
+  "db_size": "Instance DB Size",
   "meili_version": "Meili Version",
   "connection_failed": "Connection fail, go check your config! 🤥",
   "create_index": {

src/locales/en/instance.json

@@ -7,7 +7,7 @@
   "version": {
     "label": "Meilisearch 版本"
   },
-  "db_size": "数据库大小",
+  "db_size": "实例数据库大小",
   "meili_version": "Meili 版本",
   "connection_failed": "连接失败, 去检查你的配置! 🤥",
   "create_index": {

src/locales/zh/instance.json

@@ -6,7 +6,6 @@ import { useMeiliClient } from '@/hooks/useMeiliClient';
 import { useInstanceStats } from '@/hooks/useInstanceStats';
 import { useMemo } from 'react';
 import { Copyable } from '@/components/Copyable';
-import _ from 'lodash';
 import { useInstanceHealth } from '@/hooks/useInstanceHealth';
 import { IndexList } from '@/components/IndexList';
 import { TitleWithUnderline } from '@/components/title';
@@ -18,6 +17,7 @@ import { LoaderPage } from '@/components/loader';
 import { isSingletonMode } from '@/utils/conn';
 import { Footer } from '@/components/Footer';
 import { TimeAgo } from '@/components/timeago';
+import { filesize } from 'filesize';
 
 function InsDash() {
   const { t } = useTranslation('instance');
@@ -40,7 +40,7 @@ function InsDash() {
         key: t('db_size'),
         value: (
           <Skeleton placeholder={<Skeleton.Title />} active loading={!stats?.databaseSize}>
-            {`${_.ceil((stats?.databaseSize ?? 0) / 1048576, 2)} MB`}
+            {filesize(stats?.databaseSize ?? 0)}
           </Skeleton>
         ),
       },

src/routes/ins/$insID/_layout/index.tsx

@@ -9,6 +9,9 @@ import { TitleWithUnderline } from '@/components/title';
 import { Button } from '@nextui-org/react';
 import { IndexPrimaryKey } from '@/components/indexPrimaryKey';
 import { TimeAgo } from '@/components/timeago';
+import { useInstanceStats } from '@/hooks/useInstanceStats';
+import { Skeleton } from '@douyinfe/semi-ui';
+import { filesize } from 'filesize';
 
 const InfoRow = ({ value, label }: { label: string; value: ReactNode }) => {
   return (
@@ -23,6 +26,7 @@ function IndexDash() {
   const { t } = useTranslation('index');
   const client = useMeiliClient();
   const currentIndex = useCurrentIndex(client);
+  const stats = useInstanceStats(client);
 
   console.debug('index dash page building', currentIndex);
 
@@ -45,6 +49,14 @@ function IndexDash() {
               }
             />
           )}
+          <InfoRow
+            label={t('instance:db_size')}
+            value={
+              <Skeleton placeholder={<Skeleton.Title />} active loading={!stats?.databaseSize}>
+                {filesize(stats?.databaseSize ?? 0)}
+              </Skeleton>
+            }
+          />
           <div className="flex flex-col gap-3 items-stretch">
             <Link to="" from="/ins/$insID/index/$indexUID">
               <Button fullWidth variant="light" size="sm">
@@ -93,7 +105,7 @@ function IndexDash() {
         </div>
       </div>
     );
-  }, [currentIndex.index, t]);
+  }, [currentIndex.index, stats?.databaseSize, t]);
 }
 
 export const Route = createFileRoute('/ins/$insID/_layout/index/$indexUID/_layout')({

src/routes/ins/$insID/_layout/index/$indexUID/_layout.tsx

@@ -16,13 +16,15 @@ import { useTranslation } from 'react-i18next';
 import ReactJson from 'react-json-view';
 import { z } from 'zod';
 
-const searchSchema = z.object({
-  indexUids: z.string().array().optional(),
-  limit: z.number().positive().optional(),
-  from: z.number().nonnegative().optional(),
-  statuses: z.string().array().optional(),
-  types: z.string().array().optional(),
-});
+const searchSchema = z
+  .object({
+    indexUids: z.string().array().optional(),
+    limit: z.number().positive().optional(),
+    from: z.number().nonnegative().optional(),
+    statuses: z.string().array().optional(),
+    types: z.string().array().optional(),
+  })
+  .optional();
 
 type State = Pick<TasksQuery, 'indexUids' | 'statuses' | 'types'> & Required<Pick<TasksQuery, 'limit' | 'from'>>;