refactor: 机器操作界面调整

mayfly_go_web/package.json

@@ -17,7 +17,7 @@
     "countup.js": "^2.7.0",
     "cropperjs": "^1.5.11",
     "echarts": "^5.4.3",
-    "element-plus": "^2.5.3",
+    "element-plus": "^2.5.5",
     "js-base64": "^3.7.5",
     "jsencrypt": "^3.3.2",
     "lodash": "^4.17.21",

mayfly_go_web/src/components/monaco/MonacoEditorDialogComp.vue

@@ -119,8 +119,8 @@ const open = (optionProps: MonacoEditorDialogProps) => {
     }
 
     setTimeout(() => {
-        editorRef.value?.format();
         editorRef.value?.focus();
+        editorRef.value?.format();
     }, 300);
 
     state.dialogVisible = true;

mayfly_go_web/src/components/terminal/TerminalBody.vue

@@ -163,7 +163,7 @@ const fitTerminal = () => {
 };
 
 const focus = () => {
-    setTimeout(() => term.focus(), 400);
+    setTimeout(() => term.focus(), 100);
 };
 
 const clear = () => {

mayfly_go_web/src/views/ops/component/TagTree.vue

@@ -17,7 +17,7 @@
                 @node-contextmenu="nodeContextmenu"
             >
                 <template #default="{ node, data }">
-                    <span>
+                    <span @dblclick="treeNodeDblclick(data)">
                         <span v-if="data.type.value == TagTreeNode.TagPath">
                             <tag-info :tag-path="data.label" />
                         </span>
@@ -25,7 +25,13 @@
                         <slot v-else :node="node" :data="data" name="prefix"></slot>
 
                         <span class="ml3" :title="data.labelRemark">
-                            <slot name="label" :data="data"> {{ data.label }}</slot>
+                            <slot name="label" :data="data" v-if="!data.disabled"> {{ data.label }}</slot>
+                            <!-- 禁用状态 -->
+                            <slot name="disabledLabel" :data="data" v-else>
+                                <el-link type="danger" disabled :underline="false">
+                                    {{ `${data.label}` }}
+                                </el-link>
+                            </slot>
                         </span>
 
                         <slot :node="node" :data="data" name="suffix"></slot>
@@ -135,15 +141,29 @@ const loadNode = async (node: any, resolve: any) => {
 
 const treeNodeClick = (data: any) => {
     emit('nodeClick', data);
-    if (data.type.nodeClickFunc) {
+    if (!data.disabled && !data.type.nodeDblclickFunc && data.type.nodeClickFunc) {
         data.type.nodeClickFunc(data);
     }
     // 关闭可能存在的右击菜单
     contextmenuRef.value.closeContextmenu();
 };
 
+// 树节点双击事件
+const treeNodeDblclick = (data: any) => {
+    // emit('nodeDblick', data);
+    if (!data.disabled && data.type.nodeDblclickFunc) {
+        data.type.nodeDblclickFunc(data);
+    }
+    // 关闭可能存在的右击菜单
+    contextmenuRef.value.closeContextmenu();
+};
+
 // 树节点右击事件
 const nodeContextmenu = (event: any, data: any) => {
+    if (data.disabled) {
+        return;
+    }
+
     // 加载当前节点是否需要显示右击菜单
     let items = data.type.contextMenuItems;
     if (!items || items.length == 0) {

mayfly_go_web/src/views/ops/component/tag.ts

@@ -28,6 +28,11 @@ export class TagTreeNode {
      */
     isLeaf: boolean = false;
 
+    /**
+     * 是否禁用状态
+     */
+    disabled: boolean = false;
+
     /**
      * 额外需要传递的参数
      */
@@ -53,6 +58,11 @@ export class TagTreeNode {
         return this;
     }
 
+    withDisabled(disabled: boolean) {
+        this.disabled = disabled;
+        return this;
+    }
+
     withParams(params: any) {
         this.params = params;
         return this;
@@ -91,8 +101,14 @@ export class NodeType {
 
     loadNodesFunc: (parentNode: TagTreeNode) => Promise<TagTreeNode[]>;
 
+    /**
+     * 节点点击事件
+     */
     nodeClickFunc: (node: TagTreeNode) => void;
 
+    // 节点双击事件
+    nodeDblclickFunc: (node: TagTreeNode) => void;
+
     constructor(value: number) {
         this.value = value;
     }
@@ -117,6 +133,16 @@ export class NodeType {
         return this;
     }
 
+    /**
+     * 赋值节点双击事件回调函数
+     * @param func 节点双击事件回调函数
+     * @returns this
+     */
+    withNodeDblclickFunc(func: (node: TagTreeNode) => void) {
+        this.nodeDblclickFunc = func;
+        return this;
+    }
+
     /**
      * 赋值右击菜单按钮选项
      * @param contextMenuItems 右击菜单按钮选项

mayfly_go_web/src/views/ops/machine/MachineList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="machine-list">
         <page-table
             ref="pageTableRef"
             :page-api="machineApi.list"
@@ -25,7 +25,7 @@
                 <span v-if="!data.stat">-</span>
                 <div v-else>
                     <el-row>
-                        <el-text size="small" style="font-size: 10px">
+                        <el-text size="small" class="font11">
                             内存(可用/总):
                             <span :class="getStatsFontClass(data.stat.memAvailable, data.stat.memTotal)"
                                 >{{ formatByteSize(data.stat.memAvailable, 1) }}/{{ formatByteSize(data.stat.memTotal, 1) }}
@@ -33,7 +33,7 @@
                         </el-text>
                     </el-row>
                     <el-row>
-                        <el-text style="font-size: 10px" size="small">
+                        <el-text class="font11" size="small">
                             CPU(空闲): <span :class="getStatsFontClass(data.stat.cpuIdle, 100)">{{ data.stat.cpuIdle.toFixed(0) }}%</span>
                         </el-text>
                     </el-row>
@@ -44,7 +44,7 @@
                 <span v-if="!data.stat?.fsInfos">-</span>
                 <div v-else>
                     <el-row v-for="(i, idx) in data.stat.fsInfos.slice(0, 2)" :key="i.mountPoint">
-                        <el-text style="font-size: 10px" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
+                        <el-text class="font11" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
                             {{ i.mountPoint }} => {{ formatByteSize(i.free, 0) }}/{{ formatByteSize(i.used + i.free, 0) }}
                         </el-text>
 
@@ -55,7 +55,7 @@
                             </template>
 
                             <el-row v-for="i in data.stat.fsInfos.slice(2)" :key="i.mountPoint">
-                                <el-text style="font-size: 10px" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
+                                <el-text class="font11" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
                                     {{ i.mountPoint }} => {{ formatByteSize(i.free, 0) }}/{{ formatByteSize(i.used + i.free, 0) }}
                                 </el-text>
                             </el-row>
@@ -464,7 +464,7 @@ const showRec = (row: any) => {
 </script>
 
 <style>
-.el-dialog__body {
+.machine-list .el-dialog {
     padding: 2px 2px;
 }
 

mayfly_go_web/src/views/ops/machine/MachineOp.vue

@@ -8,11 +8,22 @@
                     ref="tagTreeRef"
                     :resource-type="TagResourceTypeEnum.Machine.value"
                     :tag-path-node-type="NodeTypeTagPath"
-                />
+                >
+                    <template #prefix="{ data }">
+                        <SvgIcon v-if="data.icon && data.params.status == 1" :name="data.icon.name" :color="data.icon.color" />
+                        <SvgIcon v-if="data.icon && data.params.status == -1" :name="data.icon.name" color="var(--el-color-danger)" />
+                    </template>
+
+                    <template #suffix="{ data }">
+                        <span style="color: #c4c9c4; font-size: 9px" v-if="data.type.value == MachineNodeType.Machine">{{
+                            ` ${data.params.username}@${data.params.ip}:${data.params.port}`
+                        }}</span>
+                    </template>
+                </tag-tree>
             </Pane>
 
             <Pane>
-                <div class="card pd5">
+                <div class="machine-terminal-tabs card pd5">
                     <el-tabs
                         v-if="state.tabs.size > 0"
                         type="card"
@@ -20,18 +31,18 @@
                         @tab-change="onTabChange"
                         style="width: 100%"
                         v-model="state.activeTermName"
-                        class="h100 machine-terminal-tabs"
+                        class="h100"
                     >
                         <el-tab-pane class="h100" closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key">
                             <template #label>
                                 <el-popconfirm @confirm="handleReconnect(dt.key)" title="确认重新连接?">
                                     <template #reference>
-                                        <el-icon class="mr2" :color="dt.status == 1 ? '#67c23a' : '#f56c6c'" :title="dt.status == 1 ? '' : '点击重连'"
+                                        <el-icon class="mr5" :color="dt.status == 1 ? '#67c23a' : '#f56c6c'" :title="dt.status == 1 ? '' : '点击重连'"
                                             ><Connection />
                                         </el-icon>
                                     </template>
                                 </el-popconfirm>
-                                <el-popover placement="bottom-start" trigger="hover" :width="250">
+                                <el-popover :show-after="1000" placement="bottom-start" trigger="hover" :width="250">
                                     <template #reference>
                                         <div>
                                             <span class="machine-terminal-tab-label">{{ dt.label }}</span>
@@ -41,6 +52,8 @@
                                         <el-descriptions :column="1" size="small">
                                             <el-descriptions-item label="机器名"> {{ dt.params?.name }} </el-descriptions-item>
                                             <el-descriptions-item label="host"> {{ dt.params?.ip }} : {{ dt.params?.port }} </el-descriptions-item>
+                                            <el-descriptions-item label="username"> {{ dt.params?.username }} </el-descriptions-item>
+                                            <el-descriptions-item label="remark"> {{ dt.params?.remark }} </el-descriptions-item>
                                         </el-descriptions>
                                     </template>
                                 </el-popover>
@@ -50,7 +63,7 @@
                                 <TerminalBody
                                     @status-change="terminalStatusChange(dt.key, $event)"
                                     :ref="(el) => setTerminalRef(el, dt.key)"
-                                    :socket-url="dt.terminalInfo.socketUrl"
+                                    :socket-url="dt.socketUrl"
                                 />
                             </div>
                         </el-tab-pane>
@@ -84,16 +97,6 @@
                         </el-descriptions>
                     </el-dialog>
 
-                    <terminal-dialog ref="terminalDialogRef" :visibleMinimize="true">
-                        <template #headerTitle="{ terminalInfo }">
-                            {{ `${(terminalInfo.terminalId + '').slice(-2)}` }}
-                            <el-divider direction="vertical" />
-                            {{ `${terminalInfo.meta.username}@${terminalInfo.meta.ip}:${terminalInfo.meta.port}` }}
-                            <el-divider direction="vertical" />
-                            {{ terminalInfo.meta.name }}
-                        </template>
-                    </terminal-dialog>
-
                     <process-list v-model:visible="processDialog.visible" v-model:machineId="processDialog.machineId" />
 
                     <script-manage :title="serviceDialog.title" v-model:visible="serviceDialog.visible" v-model:machineId="serviceDialog.machineId" />
@@ -121,7 +124,6 @@ import TagTree from '../component/TagTree.vue';
 import { Splitpanes, Pane } from 'splitpanes';
 import { ContextmenuItem } from '@/components/contextmenu/index';
 // 组件
-const TerminalDialog = defineAsyncComponent(() => import('@/components/terminal/TerminalDialog.vue'));
 const ScriptManage = defineAsyncComponent(() => import('./ScriptManage.vue'));
 const FileConfList = defineAsyncComponent(() => import('./file/FileConfList.vue'));
 const MachineStats = defineAsyncComponent(() => import('./MachineStats.vue'));
@@ -131,7 +133,6 @@ import TerminalBody from '@/components/terminal/TerminalBody.vue';
 import { TerminalStatus } from '@/components/terminal/common';
 
 const router = useRouter();
-const terminalDialogRef: any = ref(null);
 
 const perms = {
     addMachine: 'machine:add',
@@ -156,13 +157,10 @@ const state = reactive({
         name: null,
         tagPath: '',
     },
-    pageData: [] as any[],
     infoDialog: {
         visible: false,
         data: null as any,
     },
-    // 当前选中数据
-    selectionData: [],
     serviceDialog: {
         visible: false,
         machineId: 0,
@@ -189,7 +187,7 @@ const state = reactive({
         title: '',
     },
     activeTermName: '',
-    tabs: new Map(),
+    tabs: new Map<string, any>(),
 });
 
 const { infoDialog, serviceDialog, processDialog, fileDialog, machineStatsDialog, machineRecDialog } = toRefs(state);
@@ -204,17 +202,24 @@ const NodeTypeTagPath = new NodeType(TagTreeNode.TagPath).withLoadNodesFunc(asyn
     const res = await search();
     // 把list 根据name字段排序
     res.list = res.list.sort((a: any, b: any) => a.name.localeCompare(b.name));
-    state.pageData = res.list;
+    return res.list.map((x: any) =>
-    return res.list.map((x: any) => new TagTreeNode(x.id, x.name, NodeTypeMachine(x)).withParams(x).withIsLeaf(true));
+        new TagTreeNode(x.id, x.name, NodeTypeMachine(x))
+            .withParams(x)
+            .withDisabled(x.status == -1)
+            .withIcon({
+                name: 'Monitor',
+                color: '#409eff',
+            })
+            .withIsLeaf(true)
+    );
 });
 
-let termIndex = 0;
 let openIds = {};
 
 const NodeTypeMachine = (machine: any) => {
     let contextMenuItems = [];
-    contextMenuItems.push(new ContextmenuItem('term', '打开终端').withIcon('Monitor').withOnClick(() => showTerminal(machine)));
+    contextMenuItems.push(new ContextmenuItem('term', '打开终端').withIcon('Monitor').withOnClick(() => openTerminal(machine)));
-    contextMenuItems.push(new ContextmenuItem('term-ex', '打开终端(新窗口)').withIcon('Monitor').withOnClick(() => showTerminal(machine, true)));
+    contextMenuItems.push(new ContextmenuItem('term-ex', '打开终端(新窗口)').withIcon('Monitor').withOnClick(() => openTerminal(machine, true)));
     contextMenuItems.push(new ContextmenuItem('detail', '详情').withIcon('More').withOnClick(() => showInfo(machine)));
     contextMenuItems.push(new ContextmenuItem('status', '状态').withIcon('Compass').withOnClick(() => showMachineStats(machine)));
     contextMenuItems.push(new ContextmenuItem('process', '进程').withIcon('DataLine').withOnClick(() => showProcess(machine)));
@@ -225,15 +230,22 @@ const NodeTypeMachine = (machine: any) => {
 
     contextMenuItems.push(new ContextmenuItem('files', '文件管理').withIcon('FolderOpened').withOnClick(() => showFileManage(machine)));
     contextMenuItems.push(new ContextmenuItem('scripts', '脚本管理').withIcon('Files').withOnClick(() => serviceManager(machine)));
-    return new NodeType(MachineNodeType.Machine).withContextMenuItems(contextMenuItems).withNodeClickFunc(() => {
+    return new NodeType(MachineNodeType.Machine).withContextMenuItems(contextMenuItems).withNodeDblclickFunc(() => {
-        state.pageData = [machine];
+        // for (let k of state.tabs.keys()) {
+        //     // 存在该机器相关的终端tab，则直接激活该tab
+        //     if (k.startsWith(`${machine.id}_${machine.username}_`)) {
+        //         state.activeTermName = k;
+        //         onTabChange();
+        //         return;
+        //     }
+        // }
 
-        showTerminal(machine);
+        openTerminal(machine);
     });
 };
 
-const showTerminal = (machine: any, ex?: boolean) => {
+const openTerminal = (machine: any, ex?: boolean) => {
-    // 按住ctrl点击，则新建标签页打开, metaKey对应mac command键
+    // 新窗口打开
     if (ex) {
         const { href } = router.resolve({
             path: `/machine/terminal`,
@@ -246,29 +258,21 @@ const showTerminal = (machine: any, ex?: boolean) => {
         return;
     }
 
-    let { name, id, username, ip, port } = machine;
+    let { name, id, username } = machine;
 
     // 同一个机器的终端打开多次，key后添加下划线和数字区分
     openIds[id] = openIds[id] ? ++openIds[id] : 1;
     let sameIndex = openIds[id];
 
-    const terminalId = Date.now();
+    let key = `${id}_${username}_${sameIndex}`;
-    let key = name + '_' + id + '_' + sameIndex + '_' + terminalId;
     // 只保留name的10个字，超出部分只保留前后4个字符，中间用省略号代替
     let label = name.length > 10 ? name.slice(0, 4) + '...' + name.slice(-4) : name;
 
     state.tabs.set(key, {
         key,
-        label: `${++termIndex}.${label}${sameIndex === 1 ? '' : ':' + sameIndex}`, // label组成为:总打开term次数+name+同一个机器打开的次数
+        label: `${label}${sameIndex === 1 ? '' : ':' + sameIndex}`, // label组成为:总打开term次数+name+同一个机器打开的次数
         params: machine,
-        terminalInfo: {
+        socketUrl: getMachineTerminalSocketUrl(id),
-            terminalId: terminalId,
-            status: TerminalStatus.NoConnected,
-            socketUrl: getMachineTerminalSocketUrl(id),
-            minTitle: `${name} [${(terminalId + '').slice(-2)}]`, // 截取terminalId最后两位区分多个terminal
-            minDesc: `${username}@${ip}:${port} (${name})`,
-            meta: machine,
-        },
     });
     state.activeTermName = key;
     fitTerminal();
@@ -291,7 +295,6 @@ const showMachineStats = async (machine: any) => {
 
 const search = async () => {
     const res = await machineApi.list.request(state.params);
-    state.pageData = res.list;
     return res;
 };
 
@@ -301,18 +304,6 @@ const showFileManage = (selectionData: any) => {
     state.fileDialog.title = `${selectionData.name} => ${selectionData.ip}`;
 };
 
-const getStatsFontClass = (available: number, total: number) => {
-    const p = available / total;
-    if (p < 0.1) {
-        return 'color-danger';
-    }
-    if (p < 0.2) {
-        return 'color-warning';
-    }
-
-    return 'color-success';
-};
-
 const showInfo = (info: any) => {
     state.infoDialog.data = info;
     state.infoDialog.visible = true;
@@ -343,8 +334,11 @@ const onRemoveTab = (targetName: string) => {
         } else {
             activeTermName = '';
         }
-        // 关闭连接
+
-        machineApi.closeCli.request({ id: state.tabs.get(targetName).params.id });
+        let info = state.tabs.get(targetName);
+        if (info) {
+            terminalRefs[info.key]?.close();
+        }
 
         state.tabs.delete(targetName);
         state.activeTermName = activeTermName;
@@ -355,6 +349,7 @@ const onRemoveTab = (targetName: string) => {
 const terminalStatusChange = (key: string, status: TerminalStatus) => {
     state.tabs.get(key).status = status;
 };
+
 const terminalRefs: any = {};
 const setTerminalRef = (el: any, key: any) => {
     if (key) {
@@ -362,7 +357,7 @@ const setTerminalRef = (el: any, key: any) => {
     }
 };
 
-const onResizeTagTree = (a) => {
+const onResizeTagTree = () => {
     fitTerminal();
 };
 
@@ -375,8 +370,9 @@ const fitTerminal = () => {
         let info = state.tabs.get(state.activeTermName);
         if (info) {
             terminalRefs[info.key]?.resize();
+            terminalRefs[info.key]?.focus();
         }
-    }, 500);
+    }, 100);
 };
 
 const handleReconnect = (key: string) => {
@@ -386,7 +382,13 @@ const handleReconnect = (key: string) => {
 
 <style lang="scss">
 .machine-terminal-tabs {
+    height: calc(100vh - 108px);
     --el-tabs-header-height: 30px;
+
+    .el-tabs {
+        --el-tabs-header-height: 30px;
+    }
+
     .machine-terminal-tab-label {
         font-size: 12px;
     }
@@ -394,13 +396,7 @@ const handleReconnect = (key: string) => {
         margin-bottom: 5px;
     }
     .el-tabs__item {
-        padding: 0 5px !important;
+        padding: 0 8px !important;
-    }
-}
-
-.machine-terminal-tree {
-    .el-tree-node__content {
-        font-size: 12px;
     }
 }
 </style>

server/internal/machine/mcm/client.go

@@ -104,8 +104,16 @@ func (c *Cli) Close() {
 		c.sftpClient.Close()
 		c.sftpClient = nil
 	}
+
+	var sshTunnelMachineId uint64
 	if c.Info.SshTunnelMachine != nil {
-		logx.Infof("关闭机器的隧道信息: machineId=%d, sshTunnelMachineId=%d", c.Info.Id, c.Info.SshTunnelMachine.Id)
+		sshTunnelMachineId = c.Info.SshTunnelMachine.Id
+	}
+	if c.Info.TempSshMachineId != 0 {
+		sshTunnelMachineId = c.Info.TempSshMachineId
+	}
+	if sshTunnelMachineId != 0 {
+		logx.Infof("关闭机器的隧道信息: machineId=%d, sshTunnelMachineId=%d", c.Info.Id, sshTunnelMachineId)
 		CloseSshTunnelMachine(int(c.Info.SshTunnelMachine.Id), c.Info.GetTunnelId())
 	}
 }