feat: reload cluster node settings from settings file #169

Author: 0xJacky

api/cluster/environment.go

@@ -3,9 +3,11 @@ package cluster
 import (
 	"github.com/0xJacky/Nginx-UI/api"
 	"github.com/0xJacky/Nginx-UI/internal/analytic"
+	"github.com/0xJacky/Nginx-UI/internal/cluster"
 	"github.com/0xJacky/Nginx-UI/internal/cosy"
 	"github.com/0xJacky/Nginx-UI/model"
 	"github.com/0xJacky/Nginx-UI/query"
+	"github.com/0xJacky/Nginx-UI/settings"
 	"github.com/gin-gonic/gin"
 	"github.com/spf13/cast"
 	"net/http"
@@ -75,3 +77,19 @@ func DeleteEnvironment(c *gin.Context) {
 
 	c.JSON(http.StatusNoContent, nil)
 }
+
+func LoadEnvironmentFromSettings(c *gin.Context) {
+	err := settings.ReloadCluster()
+	if err != nil {
+		api.ErrHandler(c, err)
+		return
+	}
+
+	cluster.RegisterPredefinedNodes()
+
+	go analytic.RestartRetrieveNodesStatus()
+
+	c.JSON(http.StatusOK, gin.H{
+		"message": "ok",
+	})
+}

api/cluster/router.go

@@ -5,6 +5,7 @@ import "github.com/gin-gonic/gin"
 func InitRouter(r *gin.RouterGroup) {
 	// Environment
 	r.GET("environments", GetEnvironmentList)
+	r.POST("environments/load_from_settings", LoadEnvironmentFromSettings)
 	envGroup := r.Group("environment")
 	{
 		envGroup.GET("/:id", GetEnvironment)

app/src/App.vue

@@ -10,6 +10,7 @@ import en_US from 'ant-design-vue/es/locale/en_US'
 
 import { useSettingsStore } from '@/pinia'
 import gettext from '@/gettext'
+import loadTranslations from '@/api/translations'
 
 const media = window.matchMedia('(prefers-color-scheme: dark)')
 
@@ -49,6 +50,8 @@ const lang = computed(() => {
 
 const settings = useSettingsStore()
 const is_theme_dark = computed(() => settings.theme === 'dark')
+
+loadTranslations()
 </script>
 
 <template>

app/src/api/environment.ts

@@ -1,3 +1,4 @@
+import http from '@/lib/http'
 import type { ModelBase } from '@/api/curd'
 import Curd from '@/api/curd'
 
@@ -14,6 +15,17 @@ export interface Node {
   token: string
   response_at?: Date
 }
-const environment: Curd<Environment> = new Curd('/environment')
+
+class EnvironmentCurd extends Curd<Environment> {
+  constructor() {
+    super('/environment')
+  }
+
+  load_from_settings() {
+    return http.post(`${this.plural}/load_from_settings`)
+  }
+}
+
+const environment: EnvironmentCurd = new EnvironmentCurd()
 
 export default environment

app/src/api/translations.ts

@@ -0,0 +1,19 @@
+import gettext from '@/gettext'
+
+export default async function loadTranslations() {
+  const route = useRoute()
+
+  if (gettext.current !== 'en') {
+    await fetch(`${import.meta.env.VITE_API_ROOT}/translation/${gettext.current}`).then(async r => {
+      gettext.translations[gettext.current] = await r.json()
+    })
+
+    if (route?.meta?.name)
+      document.title = `${route.meta.name?.()} | Nginx UI`
+  }
+
+  watch(route, () => {
+    if (route?.meta?.name)
+      document.title = `${route.meta.name?.()} | Nginx UI`
+  })
+}

app/src/components/SetLanguage/SetLanguage.vue

@@ -1,40 +1,34 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { watch } from 'vue'
 
 import { useSettingsStore } from '@/pinia'
-import http from '@/lib/http'
 import gettext from '@/gettext'
+import loadTranslations from '@/api/translations'
 
 const settings = useSettingsStore()
 
 const route = useRoute()
 
-const current = ref(gettext.current)
+const current = computed({
+  get() {
+    return gettext.current
+  },
+  set(v) {
+    gettext.current = v
+  },
+})
 
 const languageAvailable = gettext.available
 
-async function init() {
-  if (current.value !== 'en') {
-    await http.get(`/translation/${current.value}`).then(r => {
-      gettext.translations[current.value] = r
-    })
-
-    document.title = `${route.meta.name?.()} | Nginx UI`
-  }
-}
-
-init()
-
 watch(current, v => {
-  init()
+  loadTranslations()
   settings.set_language(v)
   gettext.current = v
 
   const name = route.meta.name as never as () => string
 
   document.title = `${name()} | Nginx UI`
 })
-
 </script>
 
 <template>

app/src/views/environment/Environment.vue

@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { h } from 'vue'
-import { Badge, Tag } from 'ant-design-vue'
+import { Badge, Tag, message } from 'ant-design-vue'
 import type { customRender } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
 import { datetime } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
 import environment from '@/api/environment'
@@ -130,14 +130,28 @@ const columns: Column[] = [{
   dataIndex: 'action',
 }]
 
+const curd = ref()
+function load_from_settings() {
+  environment.load_from_settings().then(() => {
+    curd.value.get_list()
+    message.success($gettext('Load successfully'))
+  }).catch(e => {
+    message.error(`${$gettext('Server error')} ${e?.message}`)
+  })
+}
 </script>
 
 <template>
   <StdCurd
+    ref="curd"
     :title="$gettext('Environment')"
     :api="environment"
     :columns="columns"
-  />
+  >
+    <template #extra>
+      <a @click="load_from_settings">{{ $gettext('Load from settings') }}</a>
+    </template>
+  </StdCurd>
 </template>
 
 <style lang="less" scoped>

app/src/views/other/Error.vue

@@ -5,8 +5,6 @@ const route = useRoute()
 const info = computed(() => {
   if (typeof route.meta.error === 'function')
     return route.meta.error()
-  else if (typeof route.meta.error === 'string')
-    return route.meta.error
   else
     return $gettext('File Not Found')
 })

internal/kernal/cluster.go renamed to internal/cluster/cluster.go

@@ -1,4 +1,4 @@
-package kernal
+package cluster
 
 import (
 	"github.com/0xJacky/Nginx-UI/internal/logger"
@@ -10,7 +10,7 @@ import (
 	"strings"
 )
 
-func registerPredefinedClusterNodes() {
+func RegisterPredefinedNodes() {
 	if len(settings.ClusterSettings.Node) == 0 {
 		return
 	}

internal/kernal/cluster_test.go renamed to internal/cluster/cluster_test.go

@@ -1,4 +1,4 @@
-package kernal
+package cluster
 
 import (
 	"github.com/0xJacky/Nginx-UI/settings"