From 35a8dc99d1483522eaffc6284d490cb3f1ded01f Mon Sep 17 00:00:00 2001
From: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
Date: Mon, 2 Dec 2024 14:18:36 +0800
Subject: [PATCH] feat: host label map & log style

---
 .../connections/ConnectionTable.vue           |  4 +-
 src/components/settings/SourceIPLabels.vue    | 68 +++++++++++++++++++
 src/components/sidebar/ConnectionCtrl.vue     | 28 +++++---
 src/i18n/en.ts                                |  1 +
 src/i18n/zh.ts                                |  1 +
 src/store/settings.ts                         |  2 +-
 src/views/LogsPage.vue                        |  2 +-
 src/views/SettingsPage.vue                    |  2 +
 8 files changed, 95 insertions(+), 13 deletions(-)
 create mode 100644 src/components/settings/SourceIPLabels.vue

diff --git a/src/components/connections/ConnectionTable.vue b/src/components/connections/ConnectionTable.vue
index fd4d5a9d..ea5db224 100644
--- a/src/components/connections/ConnectionTable.vue
+++ b/src/components/connections/ConnectionTable.vue
@@ -114,7 +114,7 @@ import { disconnectByIdAPI } from '@/api'
 import { CONNECTIONS_TABLE_ACCESSOR_KEY } from '@/config'
 import { fromNow, prettyBytesHelper } from '@/helper'
 import { renderConnections } from '@/store/connections'
-import { connectionTableColumns } from '@/store/settings'
+import { connectionTableColumns, sourceIPLabelMap } from '@/store/settings'
 import type { Connection } from '@/types'
 import {
   ArrowDownCircleIcon,
@@ -262,7 +262,7 @@ const columns: ColumnDef<Connection>[] = [
     header: () => t('sourceIP'),
     id: CONNECTIONS_TABLE_ACCESSOR_KEY.SourceIP,
     accessorFn: (original) => {
-      return original.metadata.sourceIP
+      return sourceIPLabelMap.value[original.metadata.sourceIP] || original.metadata.sourceIP
     },
   },
   {
diff --git a/src/components/settings/SourceIPLabels.vue b/src/components/settings/SourceIPLabels.vue
new file mode 100644
index 00000000..d0763db8
--- /dev/null
+++ b/src/components/settings/SourceIPLabels.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>{{ $t('sourceIPLabels') }}:</div>
+  <div class="flex flex-col gap-2 bg-base-200 p-2">
+    <div
+      v-for="ip in sourceIPs"
+      :key="ip"
+      class="flex items-center gap-2"
+    >
+      {{ ip }}:
+      <input
+        type="text"
+        class="input input-xs input-bordered w-24"
+        v-model="sourceIPLabelMap[ip]"
+      />
+      <button
+        class="btn btn-circle btn-xs bg-base-300"
+        @click="() => handlerLabelRemove(ip)"
+      >
+        <MinusCircleIcon class="h-4 w-4" />
+      </button>
+    </div>
+    <div class="flex w-full items-center gap-2">
+      IP:
+      <input
+        type="text"
+        class="input input-xs input-bordered"
+        v-model="newLabelForIP.ip"
+      />
+      <input
+        type="text"
+        class="input input-xs input-bordered w-20"
+        v-model="newLabelForIP.label"
+      />
+      <button
+        class="btn btn-circle btn-xs bg-base-300"
+        @click="handlerLabelAdd"
+      >
+        <PlusIcon class="h-4 w-4" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sourceIPLabelMap } from '@/store/settings'
+import { MinusCircleIcon, PlusIcon } from '@heroicons/vue/24/outline'
+import { computed, reactive } from 'vue'
+
+const sourceIPs = computed(() => {
+  return Object.keys(sourceIPLabelMap.value)
+})
+
+const newLabelForIP = reactive({
+  ip: '',
+  label: '',
+})
+
+const handlerLabelAdd = () => {
+  sourceIPLabelMap.value[newLabelForIP.ip] = newLabelForIP.label
+  newLabelForIP.ip = ''
+  newLabelForIP.label = ''
+}
+
+const handlerLabelRemove = (ip: string) => {
+  Reflect.deleteProperty(sourceIPLabelMap.value, ip)
+  sourceIPLabelMap.value = { ...sourceIPLabelMap.value }
+}
+</script>
diff --git a/src/components/sidebar/ConnectionCtrl.vue b/src/components/sidebar/ConnectionCtrl.vue
index a6d76951..b88c682a 100644
--- a/src/components/sidebar/ConnectionCtrl.vue
+++ b/src/components/sidebar/ConnectionCtrl.vue
@@ -55,10 +55,10 @@
         label="all"
       ></option>
       <option
-        v-for="opt in sourceIPs"
-        :key="opt"
-        :value="opt"
-        :label="opt"
+        v-for="opt in sourceIPOpts"
+        :key="opt.value"
+        :value="opt.value"
+        :label="opt.label"
       />
     </select>
     <div class="join flex-1">
@@ -72,10 +72,10 @@
           label="all"
         ></option>
         <option
-          v-for="opt in sourceIPs"
-          :key="opt"
-          :value="opt"
-          :label="opt"
+          v-for="opt in sourceIPOpts"
+          :key="opt.value"
+          :value="opt.value"
+          :label="opt.label"
         />
       </select>
       <input
@@ -116,9 +116,10 @@ import {
   sourceIPFilter,
   sourceIPs,
 } from '@/store/connections'
-import { useConnectionCard } from '@/store/settings'
+import { sourceIPLabelMap, useConnectionCard } from '@/store/settings'
 import { PauseIcon, PlayIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 import { twMerge } from 'tailwind-merge'
+import { computed } from 'vue'
 defineProps<{
   horizontal?: boolean
 }>()
@@ -127,4 +128,13 @@ const handlerClickCloseAll = () => {
     disconnectByIdAPI(conn.id)
   })
 }
+
+const sourceIPOpts = computed(() => {
+  return sourceIPs.value.map((ip) => {
+    return {
+      label: sourceIPLabelMap.value[ip] || ip,
+      value: ip,
+    }
+  })
+})
 </script>
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index fe694582..fbf64e36 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -76,6 +76,7 @@ export default {
   tunMode: 'Tun Mode',
   upgradeCore: 'Upgrade Core',
   truncateProxyName: 'Truncate Proxy Name',
+  sourceIPLabels: 'Source IP Labels',
   [LANG.EN_US]: 'English',
   [LANG.ZH_CN]: '中文',
 }
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
index 34a34aaa..21a655ba 100644
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@@ -76,6 +76,7 @@ export default {
   upgradeCore: '更新核心',
   tunMode: 'Tun 模式',
   truncateProxyName: '截断代理名称',
+  sourceIPLabels: '源IP标签',
   [LANG.EN_US]: 'English',
   [LANG.ZH_CN]: '中文',
 }
diff --git a/src/store/settings.ts b/src/store/settings.ts
index 8819149f..fe967a3a 100644
--- a/src/store/settings.ts
+++ b/src/store/settings.ts
@@ -55,7 +55,7 @@ export const connectionTableColumns = useStorage<CONNECTIONS_TABLE_ACCESSOR_KEY[
   ],
 )
 export const compactConnectionCard = useStorage<boolean>('config/compact-connection-card', true)
-export const hostLabelMap = useStorage<Record<string, string>>('config/host-label-map', {})
+export const sourceIPLabelMap = useStorage<Record<string, string>>('config/source-ip-label-map', {})
 
 // rules
 export const rulesTabShow = ref(RULE_TAB_TYPE.RULES)
diff --git a/src/views/LogsPage.vue b/src/views/LogsPage.vue
index 9a1a2572..972710bf 100644
--- a/src/views/LogsPage.vue
+++ b/src/views/LogsPage.vue
@@ -8,7 +8,7 @@
     <div
       v-for="log in renderLogs"
       :key="log.seq"
-      class="card w-full flex-row gap-1 gap-2 rounded-xl bg-base-100 p-2 text-sm shadow-lg"
+      class="card w-full flex-row flex-wrap gap-2 break-all rounded-xl bg-base-100 p-2 text-sm shadow-lg"
     >
       <span>{{ log.seq }}</span>
       <span class="text-primary">{{ dayjs(log.time).locale(language).format('HH:mm:ss') }}</span>
diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
index 824ac7e1..6167a6d3 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/SettingsPage.vue
@@ -158,6 +158,7 @@
         {{ $t('connections') }}
       </div>
       <div class="card-body">
+        <SourceIPLabels />
         <div class="flex items-center gap-2">
           {{ $t('connectionStyle') }}:
           {{ $t('table') }}
@@ -202,6 +203,7 @@ import {
 } from '@/api'
 import TableSettings from '@/components/connections/TableSettings.vue'
 import BackendSwitch from '@/components/settings/BackendSwitch.vue'
+import SourceIPLabels from '@/components/settings/SourceIPLabels.vue'
 import { LANG } from '@/config'
 import { i18n } from '@/i18n'
 import { configs, updateConfigs } from '@/store/config'