From 750a2a445e4fe72afb7e29c9551039e330aeafd4 Mon Sep 17 00:00:00 2001
From: Wankko Ree <wkr@wkr.moe>
Date: Thu, 6 Apr 2023 14:14:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=BB=88=E7=AB=AF?=
 =?UTF-8?q?=E7=9A=84=E7=BD=91=E7=BB=9C=E5=BB=B6=E8=BF=9F=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/host/terminal/terminal/index.vue   | 16 +++++++++++++---
 .../views/host/terminal/terminal/terminal.vue    |  4 +++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/host/terminal/terminal/index.vue b/frontend/src/views/host/terminal/terminal/index.vue
index ffa94f731..f115b87f1 100644
--- a/frontend/src/views/host/terminal/terminal/index.vue
+++ b/frontend/src/views/host/terminal/terminal/index.vue
@@ -18,9 +18,17 @@
             >
                 <template #label>
                     <span class="custom-tabs-label">
-                        <el-icon style="margin-top: 1px" color="#67C23A" v-if="item.status === 'online'">
-                            <circleCheck />
-                        </el-icon>
+                        <span
+                            v-if="item.status === 'online'"
+                            :style="`color: ${
+                                item.latency < 100 ? '#69db7c' : item.latency < 300 ? '#f59f00' : '#d9480f'
+                            }; display: inline-flex; align-items: center`"
+                        >
+                            <span>&nbsp;{{ item.latency }}&nbsp;ms&nbsp;</span>
+                            <el-icon>
+                                <circleCheck />
+                            </el-icon>
+                        </span>
                         <el-button
                             v-if="item.status === 'closed'"
                             icon="Refresh"
@@ -328,6 +336,7 @@ const onConnTerminal = async (title: string, wsID: number, isLocal?: boolean) =>
         title: title,
         wsID: wsID,
         status: res.data ? 'online' : 'closed',
+        latency: 0,
     });
     terminalValue.value = tabIndex;
     if (!res.data && isLocal) {
@@ -348,6 +357,7 @@ function syncTerminal() {
     for (const terminal of terminalTabs.value) {
         if (ctx && ctx.refs[`t-${terminal.index}`][0]) {
             terminal.status = ctx.refs[`t-${terminal.index}`][0].isWsOpen() ? 'online' : 'closed';
+            terminal.latency = ctx.refs[`t-${terminal.index}`][0].getLatency();
         }
     }
 }
diff --git a/frontend/src/views/host/terminal/terminal/terminal.vue b/frontend/src/views/host/terminal/terminal/terminal.vue
index bc9784fce..bdd1aa8e5 100644
--- a/frontend/src/views/host/terminal/terminal/terminal.vue
+++ b/frontend/src/views/host/terminal/terminal/terminal.vue
@@ -35,6 +35,7 @@ const termReady = ref(false);
 const terminalSocket = ref<WebSocket>();
 const term = ref<Terminal>();
 const heartbeatTimer = ref<number>();
+const latency = ref(0);
 
 const readyWatcher = watch(
     () => webSocketReady.value && termReady.value,
@@ -61,7 +62,7 @@ const onWSReceive = (message: MessageEvent) => {
             break;
         }
         case 'heartbeat': {
-            console.debug('latency', new Date().getTime() - wsMsg.timestamp, 'ms');
+            latency.value = new Date().getTime() - wsMsg.timestamp;
             break;
         }
     }
@@ -225,6 +226,7 @@ defineExpose({
     onClose,
     isWsOpen,
     onSendMsg,
+    getLatency: () => latency.value,
 });
 
 onBeforeUnmount(() => {