Web: Display the icon of the currently used storage. (#2504)

https://github.com/infiniflow/ragflow/issues/2503


### What problem does this PR solve?

_Briefly describe what this PR aims to solve. Include background context
that will help reviewers understand the purpose of the PR._

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

Before:

<img width="611" alt="image"
src="https://github.com/user-attachments/assets/02a3a1ee-7bfb-4fe0-9b15-11ced69cc8a3">

After:

<img width="796" alt="image"
src="https://github.com/user-attachments/assets/371136af-8d16-47aa-909b-26609d3ad60e">

<img width="557" alt="image"
src="https://github.com/user-attachments/assets/9268362f-2b6a-4ea1-9fe7-659f7292e5e1">

api/apps/system_app.py

@@ -18,11 +18,12 @@ import json
 from flask_login import login_required
 
 from api.db.services.knowledgebase_service import KnowledgebaseService
+from api.settings import DATABASE_TYPE
 from api.utils.api_utils import get_json_result
 from api.versions import get_rag_version
 from rag.settings import SVR_QUEUE_NAME
 from rag.utils.es_conn import ELASTICSEARCH
-from rag.utils.storage_factory import STORAGE_IMPL
+from rag.utils.storage_factory import STORAGE_IMPL, STORAGE_IMPL_TYPE
 from timeit import default_timer as timer
 
 from rag.utils.redis_conn import REDIS_CONN
@@ -48,16 +49,16 @@ def status():
     st = timer()
     try:
         STORAGE_IMPL.health()
-        res["minio"] = {"status": "green", "elapsed": "{:.1f}".format((timer() - st)*1000.)}
+        res["storage"] = {"storage": STORAGE_IMPL_TYPE.lower(), "status": "green", "elapsed": "{:.1f}".format((timer() - st)*1000.)}
     except Exception as e:
-        res["minio"] = {"status": "red", "elapsed": "{:.1f}".format((timer() - st)*1000.), "error": str(e)}
+        res["storage"] = {"storage": STORAGE_IMPL_TYPE.lower(), "status": "red", "elapsed": "{:.1f}".format((timer() - st)*1000.), "error": str(e)}
 
     st = timer()
     try:
         KnowledgebaseService.get_by_id("x")
-        res["mysql"] = {"status": "green", "elapsed": "{:.1f}".format((timer() - st)*1000.)}
+        res["database"] = {"database": DATABASE_TYPE.lower(), "status": "green", "elapsed": "{:.1f}".format((timer() - st)*1000.)}
     except Exception as e:
-        res["mysql"] = {"status": "red", "elapsed": "{:.1f}".format((timer() - st)*1000.), "error": str(e)}
+        res["database"] = {"database": DATABASE_TYPE.lower(), "status": "red", "elapsed": "{:.1f}".format((timer() - st)*1000.), "error": str(e)}
 
     st = timer()
     try:

rag/utils/storage_factory.py

@@ -27,4 +27,5 @@ class StorageFactory:
         return cls.storage_mapping[storage]()
 
 
-STORAGE_IMPL = StorageFactory.create(Storage[os.getenv('STORAGE_IMPL', 'MINIO')])
+STORAGE_IMPL_TYPE = os.getenv('STORAGE_IMPL', 'MINIO')
+STORAGE_IMPL = StorageFactory.create(Storage[STORAGE_IMPL_TYPE])

web/src/interfaces/database/user-setting.ts

@@ -24,8 +24,8 @@ export type TaskExecutorElapsed = Record<string, number[]>;
 
 export interface ISystemStatus {
   es: Es;
-  minio: Minio;
-  mysql: Minio;
+  storage: Storage;
+  database: Database;
   redis: Redis;
   task_executor: {
     error?: string;
@@ -41,7 +41,13 @@ interface Redis {
   pending: number;
 }
 
-export interface Minio {
+export interface Storage {
+  status: string;
+  elapsed: number;
+  error: string;
+}
+
+export interface Database {
   status: string;
   elapsed: number;
   error: string;

web/src/pages/user-setting/setting-system/index.tsx

@@ -1,5 +1,6 @@
 import SvgIcon from '@/components/svg-icon';
 import { useFetchSystemStatus } from '@/hooks/user-setting-hooks';
+import { ISystemStatus, Storage } from '@/interfaces/database/userSetting';
 import {
   ISystemStatus,
   TaskExecutorElapsed,
@@ -24,12 +25,19 @@ enum Status {
 
 const TitleMap = {
   es: 'Elasticsearch',
-  minio: 'MinIO Object Storage',
+  storage: 'Object Storage',
   redis: 'Redis',
-  mysql: 'Mysql',
+  database: 'Database',
   task_executor: 'Task Executor',
 };
 
+const IconMap = {
+  es: 'es',
+  storage: 'storage',
+  redis: 'redis',
+  database: 'database',
+};
+
 const SystemInfo = () => {
   const {
     systemStatus,
@@ -56,7 +64,7 @@ const SystemInfo = () => {
                     {key === 'task_executor' ? (
                       <img src="/logo.svg" alt="" width={26} />
                     ) : (
-                      <SvgIcon name={key} width={26}></SvgIcon>
+                      <SvgIcon name={IconMap[key as keyof typeof IconMap]} width={26}></SvgIcon>
                     )}
                     <span className={styles.title}>
                       {TitleMap[key as keyof typeof TitleMap]}