feat: add version in global settings (#558)

Author: Fine0830

src/assets/lang/zh.ts

@@ -250,7 +250,7 @@ const m = {
   addTraceID: '请输入一个Trace ID',
   addKeywordsOfContent: '请输入一个内容关键词',
   addExcludingKeywordsOfContent: '请输入一个内容不包含的关键词',
-  NoticeTag: '请输入一个标签之后回车',
+  noticeTag: '请输入一个标签之后回车',
   conditionNotice: '请输入一个标签、内容关键词或者内容不包含的关键词之后回车',
   cacheModalTitle: '清除缓存提醒',
   yes: '是的',

src/graph/fragments/option.ts

@@ -79,3 +79,7 @@ export const OAPTimeInfo = {
     }
   `,
 };
+
+export const OAPVersion = {
+  query: `version { version }`,
+};

src/graph/query/option.ts

@@ -15,7 +15,15 @@
  * limitations under the License.
  */
 
-import { Services, BrowserServices, Endpoints, Instances, Database, OAPTimeInfo } from '../fragments/option';
+import {
+  Services,
+  BrowserServices,
+  Endpoints,
+  Instances,
+  Database,
+  OAPTimeInfo,
+  OAPVersion,
+} from '../fragments/option';
 
 export const queryServices = `query queryServices(${Services.variable}) {${Services.query}}`;
 
@@ -29,3 +37,5 @@ export const queryEndpoints = `query queryEndpoints(${Endpoints.variable}) {${En
 export const queryInstances = `query queryInstances(${Instances.variable}) {${Instances.query}}`;
 
 export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`;
+
+export const queryOAPVersion = `query ${OAPVersion.query}`;

src/store/modules/global/index.ts

@@ -21,6 +21,8 @@ import getDurationRow from '@/utils/datetime';
 import getLocalTime from '@/utils/localtime';
 import dateFormatStep, { dateFormatTime } from '@/utils/dateFormat';
 import { ActionTree, Commit, MutationTree } from 'vuex';
+import graph from '@/graph';
+import { AxiosResponse } from 'axios';
 
 let timer: any = null;
 export interface State {
@@ -30,6 +32,7 @@ export interface State {
   edit: boolean;
   lock: boolean;
   utc: string;
+  version: string;
 }
 const initState: State = {
   durationRow: getDurationRow(),
@@ -38,6 +41,7 @@ const initState: State = {
   edit: false,
   lock: true,
   utc: '',
+  version: '',
 };
 
 // getters
@@ -124,6 +128,9 @@ const mutations: MutationTree<State> = {
   [types.SET_EDIT](state: State, status: boolean): void {
     state.edit = status;
   },
+  [types.SET_VERSION](state: State, version: string): void {
+    state.version = version;
+  },
 };
 
 // actions
@@ -167,6 +174,13 @@ const actions: ActionTree<State, any> = {
   SET_LOCK(context: { commit: Commit }, status: boolean): void {
     context.commit(types.SET_LOCK, status);
   },
+  async FETCH_VERSION(context: { commit: Commit }): Promise<void> {
+    const res: AxiosResponse = await graph.query('queryOAPVersion').params({});
+    if (!res.data.data) {
+      return;
+    }
+    context.commit(types.SET_VERSION, res.data.data.version);
+  },
 };
 
 export default {

src/store/mutation-types.ts

@@ -39,6 +39,7 @@ export const CLEAR_CHARTS = 'CLEAR_CHARTS';
 export const SET_LOCK = 'SET_LOCK';
 export const SET_EDIT = 'SET_EDIT';
 export const SET_UTC = 'SET_UTC';
+export const SET_VERSION = 'SET_VERSION';
 
 // dashboard
 export const SET_GLOBAL = 'SET_GLOBAL';

src/views/components/common/page-tool-bar.vue

@@ -23,6 +23,10 @@ limitations under the License. -->
       <rk-icon icon="keyboard_arrow_down" class="xll" id="settings" />
     </span>
     <div class="tool-bar-setting " v-show="showSetting" @click="markSettings">
+      <div class="flex-h item">
+        <span class="label">{{ $t('version') }}</span>
+        <span>{{ rocketbotGlobal.version }}</span>
+      </div>
       <div class="flex-h item">
         <span class="label">{{ $t('language') }}</span>
         <span>Zh</span>
@@ -65,6 +69,7 @@ limitations under the License. -->
     @State('rocketbot') private rocketbotGlobal: any;
     @Action('SET_DURATION') private SET_DURATION: any;
     @Action('SET_UTC') private SET_UTC: any;
+    @Action('FETCH_VERSION') private FETCH_VERSION: any;
     private lang: string | null = '';
     private utcHour: number = 0;
     private utcMin: number = 0;
@@ -84,6 +89,7 @@ limitations under the License. -->
       this.utcMin = isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]);
       this.SET_UTC(`${this.utcHour}:${this.utcMin}`);
       this.lang = window.localStorage.getItem('lang');
+      this.FETCH_VERSION();
     }
 
     private mounted() {

src/views/components/common/rk-header.vue

@@ -84,7 +84,7 @@ limitations under the License. -->
       margin-right: 50px;
     }
     .nav-link {
-      padding: 4px 10px;
+      padding: 5px;
       border-radius: 4px;
       opacity: 0.8;
       color: #efeff1;