From f6115d05b2df98c93bff4bc99c48de32fc14538a Mon Sep 17 00:00:00 2001
From: 4t145 <u4t145@163.com>
Date: Thu, 25 Apr 2024 18:18:53 +0800
Subject: [PATCH] add more localization; update dependency

---
 components/config    |  2 +-
 package.json         |  2 +-
 pnpm-lock.yaml       | 10 +++++-----
 src/App.vue          | 47 ++++++++++++++++++++++++++++++++++++++++----
 src/icons/Puzzle.vue |  6 ++++++
 src/icons/index.ts   |  4 +++-
 src/locales/en.ts    |  5 ++++-
 src/locales/zh-CN.ts |  5 ++++-
 8 files changed, 67 insertions(+), 14 deletions(-)
 create mode 100644 src/icons/Puzzle.vue

diff --git a/components/config b/components/config
index 419baae..3be342e 160000
--- a/components/config
+++ b/components/config
@@ -1 +1 @@
-Subproject commit 419baae32aff2c23d1006df00f586b22657f8f3a
+Subproject commit 3be342ebd520ddad7c3b9096fafffcba27aa6554
diff --git a/package.json b/package.json
index 28f7942..2ea77b8 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "lodash": "^4.17.21",
     "monaco-editor": "^0.46.0",
     "postcss": "^8.4.38",
-    "spacegate-admin-client": "0.2.0-alpha.16",
+    "spacegate-admin-client": "0.2.0-alpha.18",
     "tailwindcss": "^3.4.3",
     "vue": "^3.4.21",
     "vue-i18n": "^9.11.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b3f4de..4a0d0ef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,8 +27,8 @@ dependencies:
     specifier: ^8.4.38
     version: 8.4.38
   spacegate-admin-client:
-    specifier: 0.2.0-alpha.16
-    version: 0.2.0-alpha.16
+    specifier: 0.2.0-alpha.17
+    version: 0.2.0-alpha.17
   tailwindcss:
     specifier: ^3.4.3
     version: 3.4.3
@@ -1644,8 +1644,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /spacegate-admin-client@0.2.0-alpha.16:
-    resolution: {integrity: sha512-QsDYweIuWEDGplgUMyULQNS8ov+MTxqqpnvTGTp6ai6kS9Y5WpfD2pAqUzmKKOWWhNrzQ5xfn1rLy7J7DnYKvQ==}
+  /spacegate-admin-client@0.2.0-alpha.17:
+    resolution: {integrity: sha512-ptpn7iebA7aaoO4FOl77tfkFRHMc2+Bp5O1AaBdnLhH7CKtrBtFqtRdY4WBSwf9RkQBwrM5Kh2UrJSsMKPUS7Q==}
     dependencies:
       axios: 1.6.8
     transitivePeerDependencies:
@@ -1962,7 +1962,7 @@ packages:
       monaco-editor: 0.45.0
       nanoid: 5.0.7
       qs: 6.12.0
-      spacegate-admin-client: 0.2.0-alpha.16
+      spacegate-admin-client: 0.2.0-alpha.17
       vue: 3.4.21(typescript@5.4.5)
       vue-i18n: 9.2.2(vue@3.4.21)
       vuedraggable: 4.1.0(vue@3.4.21)
diff --git a/src/App.vue b/src/App.vue
index 6074b1a..e3c2135 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, provide } from 'vue';
+import { ref, provide, onMounted, onUnmounted, computed } from 'vue';
 import Menu from './components/Menu.vue'
 import Header from './components/Header.vue'
 import { useRouter } from 'vue-router'
@@ -10,10 +10,12 @@ import {
   RouterIcon,
   GatewayIcon,
   Github,
+  Puzzle
 } from './icons'
 import { useI18n } from 'vue-i18n'
 import { GATEWAY_NAME_SYMBOL } from './consts';
-const { locale } = useI18n()
+import { Api } from 'spacegate-admin-client';
+const { locale, t } = useI18n()
 const router = useRouter()
 const langs = [
   {
@@ -29,7 +31,7 @@ const isMenuCollapse = ref(false)
 const pages = [
   { name: 'menu.gateway', path: '/gateway', icon: GatewayIcon },
   { name: 'menu.router', path: '/route', icon: RouterIcon },
-  { name: 'menu.plugin', path: '/plugins', icon: RouterIcon },
+  { name: 'menu.plugin', path: '/plugins', icon: Puzzle },
 ]
 const currentPage = ref(pages.find(p => p.path === router.currentRoute.value.path)?.name ?? '')
 const gatewayName = ref<string>()
@@ -42,7 +44,42 @@ function toPage(pageName: string) {
     router.push(page.path)
   }
 }
+const instanceOnline = ref<null | boolean>(null);
+const healthCheckIntervalHandle = ref<number>(undefined);
+const instanceStatus = computed(() => {
+  if (instanceOnline.value === null) {
+    return 'info'
+  } else if (instanceOnline.value) {
+    return 'success'
+  } else {
+    return 'danger'
+  }
+});
+const instanceStatusText = computed(() => {
+  if (instanceOnline.value === null) {
+    return t('hint.unreachable')
+  } else if (instanceOnline.value) {
+    return t('hint.online')
+  } else {
+    return t('hint.offline')
+  }
+});
+onMounted(
+  () => {
+    healthCheckIntervalHandle.value = setInterval(async () => {
+      try {
+        let health = await Api.instanceHealth();
+        instanceOnline.value = health.data;
+      } catch (e) {
+        instanceOnline.value = null;
+      }
+    }, 5000);
 
+  }
+)
+onUnmounted(() => {
+  if (healthCheckIntervalHandle.value) clearInterval(healthCheckIntervalHandle.value);
+})
 
 </script>
 
@@ -56,7 +93,9 @@ function toPage(pageName: string) {
         <Header>
           <template #left>
             <el-button circle text size="large" :icon="isMenuCollapse ? Expand : Fold"
-            @click="isMenuCollapse = !isMenuCollapse"></el-button>
+              @click="isMenuCollapse = !isMenuCollapse"></el-button>
+            <el-button class="mx-1" text disabled :type="instanceStatus
+              ">●{{ instanceStatusText }}</el-button>
             <SelectGateway v-model="gatewayName" />
           </template>
           <template #right>
diff --git a/src/icons/Puzzle.vue b/src/icons/Puzzle.vue
new file mode 100644
index 0000000..4d9628e
--- /dev/null
+++ b/src/icons/Puzzle.vue
@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
+            d="M413.66 246.1H386a2 2 0 01-2-2v-77.24A38.86 38.86 0 00345.14 128H267.9a2 2 0 01-2-2V98.34c0-27.14-21.5-49.86-48.64-50.33a49.53 49.53 0 00-50.4 49.51V126a2 2 0 01-2 2H87.62A39.74 39.74 0 0048 167.62V238a2 2 0 002 2h26.91c29.37 0 53.68 25.48 54.09 54.85.42 29.87-23.51 57.15-53.29 57.15H50a2 2 0 00-2 2v70.38A39.74 39.74 0 0087.62 464H158a2 2 0 002-2v-20.93c0-30.28 24.75-56.35 55-57.06 30.1-.7 57 20.31 57 50.28V462a2 2 0 002 2h71.14A38.86 38.86 0 00384 425.14v-78a2 2 0 012-2h28.48c27.63 0 49.52-22.67 49.52-50.4s-23.2-48.64-50.34-48.64z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/icons/index.ts b/src/icons/index.ts
index 94dfebe..0a3a59d 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -5,6 +5,7 @@ import RouterIcon from './Router.vue'
 import CertIcon from './Certificate.vue'
 import GatewayIcon from './Gateway.vue'
 import Github from './Github.vue'
+import Puzzle from './Puzzle.vue'
 export {
     Lang,
     PluginIcon,
@@ -12,5 +13,6 @@ export {
     RouterIcon,
     CertIcon,
     GatewayIcon,
-    Github
+    Github,
+    Puzzle
 }
\ No newline at end of file
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 55dba19..551c8fc 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -85,6 +85,9 @@ export default {
     "duplicatedGatewayName": "Duplicated gateway name.",
     "selectAnInstance": "Select an instance",
     "createAnInstance": "Create an instance",
-    "rewriteTo": "Rewrite to"
+    "rewriteTo": "Rewrite to",
+    "unreachable": "unreachable",
+    "online": "online",
+    "offline": "offline",
   }
 }
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index e3ff3cf..97bdeaf 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -85,6 +85,9 @@ export default {
     "duplicatedGatewayName": "重复的网关名称。",
     "selectAnInstance": "选择一个实例",
     "createAnInstance": "创建一个实例",
-    "rewriteTo": "重写为"
+    "rewriteTo": "重写为",
+    "unreachable": "不可达",
+    "online": "在线",
+    "offline": "离线",
   }
 }