add more localization; update dependency

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",

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>

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>

src/icons/index.ts

@@ -5,12 +5,14 @@ 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,
     ServiceIcon,
     RouterIcon,
     CertIcon,
     GatewayIcon,
-    Github
+    Github,
+    Puzzle
 }

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",
   }
 }

src/locales/zh-CN.ts

@@ -85,6 +85,9 @@ export default {
     "duplicatedGatewayName": "重复的网关名称。",
     "selectAnInstance": "选择一个实例",
     "createAnInstance": "创建一个实例",
-    "rewriteTo": "重写为"
+    "rewriteTo": "重写为",
+    "unreachable": "不可达",
+    "online": "在线",
+    "offline": "离线",
   }
 }