style: update css

frontend/src/components/EnvIndicator/EnvIndicator.vue

@@ -62,7 +62,7 @@ watch(node_id, () => {
 }
 
 .indicator {
-    padding: 20px;
+    padding: 20px 20px 16px 20px;
 
     .container {
         border-radius: 16px;

frontend/src/layouts/BaseLayout.vue

@@ -105,7 +105,7 @@ const lang = computed(() => {
 <style lang="less">
 .layout-sider .sidebar {
     ul.ant-menu-inline.ant-menu-root {
-        height: calc(100vh - 120px);
+        height: calc(100vh - 160px);
         overflow-y: auto;
         overflow-x: hidden;
 

frontend/src/layouts/SideBar.vue

@@ -74,14 +74,14 @@ const visible: ComputedRef<sidebar[]> = computed(() => {
     <div class="sidebar">
         <logo/>
 
-        <env-indicator/>
-
         <a-menu
             :openKeys="openKeys"
             mode="inline"
             v-model:openKeys="openKeys"
             v-model:selectedKeys="selectedKey"
         >
+            <env-indicator/>
+            
             <template v-for="sidebar in visible">
                 <a-menu-item v-if="sidebar.children.length===0 || sidebar.meta.hideChildren"
                              :key="sidebar.name"

frontend/src/views/dashboard/ServerAnalytic.vue

@@ -13,7 +13,14 @@ const {$gettext} = useGettext()
 
 let websocket: ReconnectingWebSocket | WebSocket
 
-const host = reactive({})
+const host: any = reactive({
+    platform: '',
+    platformVersion: '',
+    os: '',
+    kernelVersion: '',
+    kernelArch: ''
+})
+
 const cpu = ref('0.0')
 const cpu_info = reactive([])
 const cpu_analytic_series = reactive([{name: 'User', data: <any>[]}, {name: 'Total', data: <any>[]}])
@@ -21,11 +28,11 @@ const net_analytic = reactive([{name: $gettext('Receive'), data: <any>[]},
     {name: $gettext('Send'), data: <any>[]}])
 const disk_io_analytic = reactive([{name: $gettext('Writes'), data: <any>[]},
     {name: $gettext('Reads'), data: <any>[]}])
-const memory = reactive({})
-const disk = reactive({})
+const memory: any = reactive({swap_used: '', swap_percent: '', swap_total: ''})
+const disk: any = reactive({percentage: '', used: ''})
 const disk_io = reactive({writes: 0, reads: 0})
 const uptime = ref('')
-const loadavg = reactive({})
+const loadavg = reactive({load1: 0, load5: 0, load15: 0})
 const net = reactive({recv: 0, sent: 0, last_recv: 0, last_sent: 0})
 
 const net_formatter = (bytes: number) => {
@@ -164,8 +171,10 @@ function wsOnMessage(m: { data: any }) {
                     </p>
                     <p v-if="cpu_info">
                         {{ $gettext('CPU:') + ' ' }}
-                        <span class="cpu-model">{{ cpu_info[0]?.modelName || 'core' }}</span>
-                        <span class="cpu-mhz">{{ (cpu_info[0]?.mhz / 1000).toFixed(2) + 'GHz' }}</span>
+                        <span class="cpu-model">{{ cpu_info[0]?.modelName || 'Core' }}</span>
+                        <span class="cpu-mhz">{{
+                                cpu_info[0]?.mhz > 0.01 ? (cpu_info[0]?.mhz / 1000).toFixed(2) + 'GHz' : 'Core'
+                            }}</span>
                         * {{ cpu_info.length }}
                     </p>
                 </a-card>

frontend/src/views/pty/Terminal.vue

@@ -10,7 +10,7 @@ import {useGettext} from 'vue3-gettext'
 const {$gettext} = useGettext()
 
 let term: Terminal | null
-let ping: null | NodeJS.Timer
+let ping: NodeJS.Timer
 
 
 const websocket = ws('/api/pty')
@@ -83,7 +83,7 @@ function wsOnOpen() {
 
 onUnmounted(() => {
     window.removeEventListener('resize', fit)
-    clearInterval(ping!)
+    clearInterval(ping)
     term?.dispose()
     ping = null
     websocket.close()

server/api/analytic.go

@@ -183,6 +183,13 @@ func GetAnalyticInit(c *gin.Context) {
 	}
 	hostInfo, _ := host.Info()
 
+	switch hostInfo.Platform {
+	case "ubuntu":
+		hostInfo.Platform = "Ubuntu"
+	case "centos":
+		hostInfo.Platform = "CentOS"
+	}
+
 	loadAvg, _ := load.Avg()
 
 	c.JSON(http.StatusOK, gin.H{