feat: 守护进程增加操作列 (#1919)

frontend/src/lang/modules/en.ts

@@ -1684,6 +1684,14 @@ const message = {
             restartHelper:
                 'Initialization will restart the service, causing all the original daemon processes to close',
             msg: 'Message',
+            RUNNING: 'Running',
+            STOPPED: 'Stopped',
+            STOPPING: 'Stopping',
+            STARTING: 'Starting',
+            FATAL: 'Failed to start',
+            BACKOFF: 'Start exception',
+            statusCode: 'Status code',
+            manage: 'Management',
         },
     },
 };

frontend/src/lang/modules/tw.ts

@@ -1596,6 +1596,14 @@ const message = {
             serviceNameHelper: 'systemctl 管理的 Supervisor 服務名稱，一般為 supervisor 或 supervisord',
             restartHelper: '初始化會重啟服務，導致原有的守護進程全部關閉',
             msg: '信息',
+            RUNNING: '運行中',
+            STOPPED: '已停止',
+            STOPPING: '停止中',
+            STARTING: '啟動中',
+            FATAL: '啟動失敗',
+            BACKOFF: '啟動異常',
+            statusCode: '狀態碼',
+            manage: '管理',
         },
     },
 };

frontend/src/lang/modules/zh.ts

@@ -1598,6 +1598,14 @@ const message = {
             serviceNameHelper: 'systemctl 管理的 Supervisor 服务名称，一般为 supervisor、supervisord',
             restartHelper: '初始化会重启服务，导致原有的守护进程全部关闭',
             msg: '信息',
+            RUNNING: '运行中',
+            STOPPED: '已停止',
+            STOPPING: '停止中',
+            STARTING: '启动中',
+            FATAL: '启动失败',
+            BACKOFF: '启动异常',
+            statusCode: '状态码',
+            manage: '管理',
         },
     },
 };

frontend/src/views/host/tool/supervisor/index.vue

@@ -39,6 +39,39 @@
                         prop="numprocs"
                         width="100px"
                     ></el-table-column>
+                    <el-table-column :label="$t('tool.supervisor.manage')" width="100px">
+                        <template #default="{ row }">
+                            <div v-if="row.status && row.status.length > 0">
+                                <el-button
+                                    v-if="checkStatus(row.status) === 'RUNNING'"
+                                    link
+                                    type="success"
+                                    :icon="VideoPlay"
+                                    @click="operate('stop', row.name)"
+                                >
+                                    {{ $t('commons.status.running') }}
+                                </el-button>
+                                <el-button
+                                    v-else-if="checkStatus(row.status) === 'WARNING'"
+                                    link
+                                    type="warning"
+                                    :icon="RefreshRight"
+                                    @click="operate('restart', row.name)"
+                                >
+                                    {{ $t('commons.status.unhealthy') }}
+                                </el-button>
+                                <el-button
+                                    v-else
+                                    link
+                                    type="danger"
+                                    :icon="VideoPause"
+                                    @click="operate('start', row.name)"
+                                >
+                                    {{ $t('commons.status.stopped') }}
+                                </el-button>
+                            </div>
+                        </template>
+                    </el-table-column>
                     <el-table-column :label="$t('commons.table.status')" width="100px">
                         <template #default="{ row }">
                             <div v-if="row.status">
@@ -48,7 +81,7 @@
                                             {{ $t('website.check') }}
                                         </el-button>
                                         <el-button type="primary" link v-else>
-                                            <span>{{ row.status[0].status }}</span>
+                                            <span>{{ $t('tool.supervisor.' + row.status[0].status) }}</span>
                                         </el-button>
                                     </template>
                                     <el-table :data="row.status">
@@ -60,7 +93,7 @@
                                         />
                                         <el-table-column
                                             property="status"
-                                            :label="$t('commons.table.status')"
+                                            :label="$t('tool.supervisor.statusCode')"
                                             width="100px"
                                         />
                                         <el-table-column property="PID" label="PID" width="100px" />
@@ -85,7 +118,7 @@
                         :buttons="buttons"
                         :label="$t('commons.table.operate')"
                         :fixed="mobile ? false : 'right'"
-                        width="350px"
+                        width="250px"
                         fix
                     />
                 </ComplexTable>
@@ -110,6 +143,7 @@ import { GlobalStore } from '@/store';
 import i18n from '@/lang';
 import { HostTool } from '@/api/interface/host-tool';
 import { MsgSuccess } from '@/utils/message';
+import { VideoPlay, VideoPause, RefreshRight } from '@element-plus/icons-vue';
 const globalStore = GlobalStore();
 
 const loading = ref(false);
@@ -170,6 +204,20 @@ const mobile = computed(() => {
     return globalStore.isMobile();
 });
 
+const checkStatus = (status: HostTool.ProcessStatus[]): string => {
+    if (!status || status.length === 0) return 'STOPPED';
+
+    const statusCounts = status.reduce((acc, curr) => {
+        acc[curr.status] = (acc[curr.status] || 0) + 1;
+        return acc;
+    }, {} as Record<string, number>);
+
+    if (statusCounts['STARTING']) return 'STARTING';
+    if (statusCounts['RUNNING'] === status.length) return 'RUNNING';
+    if (statusCounts['RUNNING'] > 0) return 'WARNING';
+    return 'STOPPED';
+};
+
 const operate = async (operation: string, name: string) => {
     try {
         ElMessageBox.confirm(
@@ -224,42 +272,11 @@ const buttons = [
             getFile(row.name, 'out.log');
         },
     },
-    {
-        label: i18n.global.t('app.start'),
-        click: function (row: HostTool.SupersivorProcess) {
-            operate('start', row.name);
-        },
-        disabled: (row: any) => {
-            if (row.status == undefined) {
-                return true;
-            } else {
-                return row.status && row.status[0].status == 'RUNNING';
-            }
-        },
-    },
-    {
-        label: i18n.global.t('app.stop'),
-        click: function (row: HostTool.SupersivorProcess) {
-            operate('stop', row.name);
-        },
-        disabled: (row: any) => {
-            if (row.status == undefined) {
-                return true;
-            }
-            return row.status && row.status[0].status != 'RUNNING';
-        },
-    },
     {
         label: i18n.global.t('commons.button.restart'),
         click: function (row: HostTool.SupersivorProcess) {
             operate('restart', row.name);
         },
-        disabled: (row: any): boolean => {
-            if (row.status == undefined) {
-                return true;
-            }
-            return row.status && row.status[0].status != 'RUNNING';
-        },
     },
     {
         label: i18n.global.t('commons.button.delete'),