feat: show VersionNumber in dashboard (#531)

.licenserc.yaml

@@ -71,5 +71,6 @@ header:
     - '.all-contributorsrc'
     - 'config/**'
     - 'charts/**'
+    - 'pkg/version/VERSION'
   comment: never
   license-location-threshold: 80

cmd/app/server.go

@@ -29,6 +29,7 @@ import (
 	"github.com/KusionStack/karpor/pkg/kubernetes/registry"
 	"github.com/KusionStack/karpor/pkg/kubernetes/scheme"
 	"github.com/KusionStack/karpor/pkg/server"
+	"github.com/KusionStack/karpor/pkg/version"
 	proxyutil "github.com/KusionStack/karpor/pkg/util/proxy"
 	"github.com/spf13/cobra"
 	"github.com/spf13/pflag"
@@ -96,6 +97,9 @@ func NewServerCommand(ctx context.Context) *cobra.Command {
 	expvar.Publish("StorageOptions", expvar.Func(func() interface{} {
 		return o.SearchStorageOptions
 	}))
+	expvar.Publish("Version", expvar.Func(func() interface{} {
+		return version.GetVersion()
+	}))
 
 	cmd := &cobra.Command{
 		Use:   "karpor",

pkg/version/VERSION

@@ -0,0 +1 @@
+v0.4.1

pkg/version/embed.go

@@ -0,0 +1,27 @@
+// Copyright The Karpor Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package version
+
+import (
+	_ "embed"
+	"strings"
+)
+
+//go:embed VERSION
+var version string
+
+func GetVersion() string {
+	return strings.TrimSpace(version)
+}

ui/src/components/layout/index.tsx

@@ -10,7 +10,10 @@ import {
 import type { MenuProps } from 'antd'
 import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
-import { setServerConfigMode } from '@/store/modules/globalSlice'
+import {
+  setServerConfigMode,
+  setVersionNumber,
+} from '@/store/modules/globalSlice'
 import axios from 'axios'
 import { useTranslation } from 'react-i18next'
 import showPng from '@/assets/show.png'
@@ -46,13 +49,16 @@ const LayoutPage = () => {
   const navigate = useNavigate()
   const { pathname } = useLocation()
   const dispatch = useDispatch()
-  const { isReadOnlyMode } = useSelector((state: any) => state.globalSlice)
+  const { isReadOnlyMode, versionNumber } = useSelector(
+    (state: any) => state.globalSlice,
+  )
   const { i18n, t } = useTranslation()
 
   async function getServerConfigs() {
     const response: any = await axios.get(`/server-configs`)
     if (response) {
       dispatch(setServerConfigMode(response?.CoreOptions?.ReadOnlyMode))
+      dispatch(setVersionNumber(response?.Version))
     }
   }
 
@@ -202,6 +208,9 @@ const LayoutPage = () => {
           />
         </div>
         <div className={styles.right} style={{ marginRight: 80 }}>
+          <div className={styles.version_number}>
+            <span>{versionNumber}</span>
+          </div>
           {isReadOnlyMode && (
             <div className={styles.read_only_mode}>
               <img className={styles.read_only_mode_img} src={showPng} />

ui/src/components/layout/style.module.less

@@ -58,6 +58,10 @@
       display: flex;
       align-items: center;
 
+      .version_number {
+        margin-right: 10px;
+      }
+
       .read_only_mode {
         display: flex;
         padding: 2px 10px;

ui/src/store/modules/globalSlice.ts

@@ -2,10 +2,12 @@ import { createSlice } from '@reduxjs/toolkit'
 
 type InitialState = {
   isReadOnlyMode: any
+  versionNumber: string
 }
 
 const initialState: InitialState = {
   isReadOnlyMode: undefined,
+  versionNumber: '',
 }
 
 export const globalSlice = createSlice({
@@ -15,9 +17,12 @@ export const globalSlice = createSlice({
     setServerConfigMode: (state, action) => {
       state.isReadOnlyMode = action.payload
     },
+    setVersionNumber: (state, action) => {
+      state.versionNumber = action.payload
+    },
   },
 })
 
-export const { setServerConfigMode } = globalSlice.actions
+export const { setServerConfigMode, setVersionNumber } = globalSlice.actions
 
 export default globalSlice.reducer