From 1124fe9fa3e9f764bdb725d436b786ab4194900c Mon Sep 17 00:00:00 2001
From: wangcheng15 <66863386+wangcheng15@users.noreply.github.com>
Date: Fri, 22 Apr 2022 15:42:01 +0800
Subject: [PATCH] #188 Enhancement about engine status (#189)

---
 src/assets/css/variable.scss              |   1 +
 src/components/CreateConnection/Form.vue  |   7 +-
 src/components/CreateConnection/index.vue |   5 +-
 src/components/Header/EngineInfo.vue      | 176 ++++++++++++++++++++++
 src/components/Header/index.vue           |   8 +-
 src/config/index.js                       |   5 +
 src/locale/en.json                        |  16 +-
 src/locale/zh.json                        |  16 +-
 src/page/Settings/index.vue               | 113 ++++++++++++--
 src/service/module/settings.js            |   5 +-
 src/store/module/settings.js              |  23 ++-
 src/store/type.js                         |   2 +
 12 files changed, 355 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Header/EngineInfo.vue

diff --git a/src/assets/css/variable.scss b/src/assets/css/variable.scss
index b12e8a3..7ed8c39 100644
--- a/src/assets/css/variable.scss
+++ b/src/assets/css/variable.scss
@@ -10,6 +10,7 @@ $cellTextColor: #39414D;
 $cellCommentColor: #66A0A4;
 $cellStringColor: #1021D5;
 $cellKeywordColor: #CF2F72;
+$pattern-grey-100: #A5B2C5;
 $pattern-blue-100: #CEE6FD;
 $pattern-blue-200: #e6f1fb;
 $pattern-blue-300: #3991e1;
diff --git a/src/components/CreateConnection/Form.vue b/src/components/CreateConnection/Form.vue
index 7df311d..10a1898 100644
--- a/src/components/CreateConnection/Form.vue
+++ b/src/components/CreateConnection/Form.vue
@@ -2,7 +2,9 @@
   <div class="connect-form">
     <el-form size="small" ref="form" :model="form" :rules="rules">
       <el-form-item :label="$t('settings.connectionName')" prop="name">
-        <el-input v-model.trim="form.name" :placeholder="$t('pleaseInput')" />
+        <el-input v-model.trim="form.name" :placeholder="$t('pleaseInput')">
+          <template slot="prepend">{{ userInfo.username + '_' }}</template>
+        </el-input>
       </el-form-item>
       <el-form-item :label="$t('settings.dataSource')" prop="datasource">
         <el-select v-model="form.datasource" style="width: 100%;" @change="value => handleInput('datasource', value)"  :placeholder="$t('pleaseSelect')">
@@ -70,6 +72,9 @@ import { encryptData } from '@/util'
 
 @Component({
   computed: {
+    ...mapState({
+      userInfo: state => state.user.userInfo
+    }),
     ...mapState('CreateConnectionModal', {
       form: state => state.form,
       type: state => state.type,
diff --git a/src/components/CreateConnection/index.vue b/src/components/CreateConnection/index.vue
index 2d9986d..c99434c 100644
--- a/src/components/CreateConnection/index.vue
+++ b/src/components/CreateConnection/index.vue
@@ -31,6 +31,9 @@ import Form from './Form.vue'
 
 @Component({
   computed: {
+    ...mapState({
+      userInfo: state => state.user.userInfo
+    }),
     ...mapState('CreateConnectionModal', {
       isShow: state => state.isShow,
       form: state => state.form,
@@ -83,7 +86,7 @@ export default class CreateConnectionModal extends Vue {
       await this.$refs.ruleForm.checkForm()
       this.isSubmiting = true
       const params = {
-        name: this.form.name,
+        name: this.userInfo.username + '_' + this.form.name,
         content: { ...this.form }
       }
       if (params.content.password) {
diff --git a/src/components/Header/EngineInfo.vue b/src/components/Header/EngineInfo.vue
new file mode 100644
index 0000000..ab45927
--- /dev/null
+++ b/src/components/Header/EngineInfo.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="pop-wrap">
+    <el-popover v-if="userInfo" :trigger="'hover'" :placement="'bottom'">
+      <div class="engine-detail">
+        <div class="detail-item">
+          <div class="item-label">{{ $t('menu.engine_status') }}</div>
+          <div class="item-value">{{ $t('menu.state.' + getEngineStatus()) }}</div>
+        </div>
+        <div class="detail-item">
+          <div class="item-label">{{ $t('menu.heart_beat') }}</div>
+          <div class="item-value">
+            <span>{{ $t('menu.step') }}</span>
+            <i class="el-ksd-icon-refresh_22" @click="refreshEngineInfo"></i>
+          </div>
+        </div>
+        <div class="detail-item">
+          <div class="item-label">{{ $t('menu.usage') }}</div>
+          <div class="item-value">
+            <el-progress :percentage="engineUsage" :format="format" :color="customColor"></el-progress>
+          </div>
+        </div>
+      </div>
+      <section slot="reference" v-if="userInfo" class="engine-info-wrap">
+        <span class="engine-status" :class="getEngineStatus()"></span>
+        <span class="engine-label">{{ engineName || '' }}</span>
+      </section>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { Watch } from 'vue-property-decorator';
+import { mapActions, mapState } from 'vuex';
+import { ENGINE_STATUS } from '../../config';
+import { actionsTypes } from '../../store';
+@Component({
+  computed: {
+    ...mapState({
+      userInfo: state => state.user.userInfo,
+      engineInfo: state => state.settings.engineInfo
+    })
+  },
+  methods: {
+    ...mapActions({
+      getEngineInfo: actionsTypes.GET_ENGINE_INFO
+    })
+  }
+})
+export default class EngineInfo extends Vue {
+  timer = null
+  customColor = '#0875DA'
+  get engineStatus () {
+    return this.engineInfo?.status
+  }
+  get engineName () {
+    return this.engineInfo?.name
+  }
+  get engineUsage () {
+    if (this.engineInfo && this.engineInfo.usage) {
+      return Math.round(this.engineInfo.usage * 100)
+    } else {
+      return 0
+    }
+  }
+  @Watch('userInfo', { immediate: true })
+  handlerUserInfoChanged (newVal) {
+    if (newVal) {
+      this.getEngineInfo()
+      this.initInterval()
+    } else {
+      this.clear()
+    }
+  }
+  format (percentage) {
+    let label = ''
+    if (this.engineStatus === 0) {
+      label = this.$t('menu.percentage.unavailable')
+      this.customColor = '#E03B3B'
+    }
+    if (percentage > 80) {
+      label = this.$t('menu.percentage.crowded')
+      this.customColor = '#E03B3B'
+    } else {
+      label = this.$t('menu.percentage.available')
+      this.customColor = '#0875DA'
+    }
+    return label
+  }
+  async refreshEngineInfo () {
+    this.clear()
+    try {
+      const res = await this.getEngineInfo('?refresh=true')
+      if (res && res.code === '') {
+        this.$message.success(this.$t('menu.refresh_success'))
+      }
+    } catch (err) {
+      console.log(err)
+    } finally {
+      this.initInterval()
+    }
+  }
+  getEngineStatus () {
+    return ENGINE_STATUS[this.engineStatus]
+  }
+  initInterval () {
+    this.timer = setInterval(() => {
+      this.getEngineInfo()
+    }, 10000)
+  }
+  clear () {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
+  }
+  beforeDestroy () {
+    this.clear()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pop-wrap {
+  display: flex;
+  align-items: center;
+  .engine-info-wrap {
+    margin-right: 10px;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    .engine-status {
+      margin-right: 10px;
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+      &.available {
+        background: $pattern-green-500;
+      }
+      &.unavailable {
+        background: $pattern-grey-100;
+      }
+    }
+    .engine-label {
+      color: $--color-white;
+    }
+  }
+}
+.engine-detail {
+  display: flex;
+  flex-direction: column;
+  .detail-item {
+    display: flex;
+    align-items: center;
+    margin: 8px;
+    .item-label {
+      color: $findAndReplaceTitleColor;
+      font-weight: bold;
+      white-space: pre;
+    }
+    .item-value {
+      display: inline-flex;
+      align-items: center;
+      width: 100%;
+      min-width: 280px;
+      white-space: nowrap;
+      .el-progress {
+        width: 100%;
+      }
+      i {
+        margin-left: 6px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
index 470e273..5317011 100644
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -6,6 +6,7 @@
       <header-menu v-if="!isLoginPage"></header-menu>
     </div>
     <div class="page-header-right">
+      <EngineInfo />
       <GlobalHelp />
       <ChangeLang />
       <UserInfo class="page-header-right-item" v-if="!isLoginPage" />
@@ -18,17 +19,20 @@ import { Component } from 'vue-property-decorator'
 import HeaderMenu from './HeaderMenu'
 import UserInfo from './UserInfo'
 import GlobalHelp from './GlobalHelp'
-import ChangeLang from './ChangeLang.vue'
+import ChangeLang from './ChangeLang'
+import EngineInfo from './EngineInfo'
 import { mapState } from 'vuex'
 @Component({
   components: {
     HeaderMenu,
     UserInfo,
     GlobalHelp,
-    ChangeLang
+    ChangeLang,
+    EngineInfo
   },
   computed: {
     ...mapState({
+      userInfo: state => state.user.userInfo,
       isTrial: state => state.global.is_trial
     }),
     isLoginPage () {
diff --git a/src/config/index.js b/src/config/index.js
index d6cfeeb..7b7b4bb 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -110,3 +110,8 @@ export const ACTION_OF_STATE = {
   [INSTANCE_STATE['9']]: [0, 0, 5, 0],
   [INSTANCE_STATE['10']]: [0, 0, 5, 0]
 }
+
+export const ENGINE_STATUS = {
+  0: 'unavailable',
+  2: 'available'
+}
\ No newline at end of file
diff --git a/src/locale/en.json b/src/locale/en.json
index 44fe850..f084788 100644
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -48,7 +48,21 @@
     "schedules": "Schedules",
     "settings": "Settings",
     "give_feedback": "Give Feedback",
-    "Byzer_docs": "Byzer Notebook Docs"
+    "Byzer_docs": "Byzer Notebook Docs",
+    "engine_status": "Engine State: ",
+    "heart_beat": "Heartbeat Detection: ",
+    "usage": "Resource Rate: ",
+    "state": {
+      "available": "Running",
+      "unavailable": "Disabled"
+    },
+    "percentage": {
+      "available": "Normal",
+      "unavailable": "Disabled",
+      "crowded": "Crowded"
+    },
+    "step": "Auto-refresh engine state every 10 seconds",
+    "refresh_success": "Engine state refreshed successfully"
   },
   "home": {
     "quick_start": "Quick Start",
diff --git a/src/locale/zh.json b/src/locale/zh.json
index 9882c7f..a9bb626 100644
--- a/src/locale/zh.json
+++ b/src/locale/zh.json
@@ -47,7 +47,21 @@
     "schedules": "调度",
     "settings": "设置",
     "give_feedback": "反馈",
-    "Byzer_docs": "Byzer Notebook 手册"
+    "Byzer_docs": "Byzer Notebook 手册",
+    "engine_status": "引擎状态：",
+    "heart_beat": "心跳检测：",
+    "usage": "资源占比：",
+    "state": {
+      "available": "运行中",
+      "unavailable": "不可用"
+    },
+    "percentage": {
+      "available": "正常",
+      "unavailable": "不可用",
+      "crowded": "拥挤"
+    },
+    "step": "每 10 秒自动刷新引擎状态",
+    "refresh_success": "引擎状态刷新成功"
   },
   "home": {
     "quick_start": "快速开始",
diff --git a/src/page/Settings/index.vue b/src/page/Settings/index.vue
index 71657d3..95d66ff 100644
--- a/src/page/Settings/index.vue
+++ b/src/page/Settings/index.vue
@@ -15,12 +15,28 @@
           </div>
         </el-form>
       </div>
-      <div class="setting-item">
+      <div class="setting-item engine-selector">
         <el-form ref="engineForm" label-position="top" :model="engineRuleForm" :rules="engineRules">
           <el-form-item :label="$t('settings.defaultEngine')" prop="name">
             <p class="tip">{{$t('settings.defaultEngineDesc')}}</p>
-            <el-select style="width: 240px;" v-model="engineRuleForm.name" :placeholder="$t('settings.engineSelectTip')">
-              <el-option :label="engine" :value="engine" v-for="engine in engineList" :key="engine"></el-option>
+            <el-select
+              style="width: 240px;"
+              v-model="engineRuleForm.name"
+              :placeholder="$t('settings.engineSelectTip')"
+              @change="handleEngineChanged"
+              @visible-change="handleVisibleChange"
+            >
+              <span
+                slot="prefix"
+                class="engine-item-circle selected"
+                :class="getEngineStatus(selectedEngine)"
+              ></span>
+              <el-option :label="engine.name" :value="engine.name" v-for="engine in engineList" :key="engine.name">
+                <div class="engine-list">
+                  <span class="engine-item-circle" :class="getEngineStatus(engine)"></span>
+                  <span class="engine-item-name">{{ engine.name }}</span>
+                </div>
+              </el-option>
             </el-select>
           </el-form-item>
           <div class="btns">
@@ -31,7 +47,13 @@
       <div class="setting-item">
         <div class="setting-item-title">{{$t('settings.externalDatasource')}}</div>
         <div class="setting-item-btn">
-          <el-button size="medium" @click="handleCreateConnection()">{{$t('add')}}</el-button>
+          <el-button type="primary" size="small" @click="handleCreateConnection()">{{$t('add')}}</el-button>
+          <el-button
+            size="small"
+            :icon="'el-ksd-icon-refresh_22'"
+            :loading="isRefreshing"
+            @click="getConnections('?refresh=true')"
+          >{{$t('refresh')}}</el-button>
         </div>
         <el-table
           :data="connectionList"
@@ -68,12 +90,17 @@
   </div>
 </template>
 <script>
+import { cloneDeep } from '@antv/x6/lib/util/object/object'
 import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
-import { mapActions } from 'vuex'
+import { mapActions, mapState } from 'vuex'
+import { ENGINE_STATUS } from '../../config'
 
 @Component({
   computed: {
+    ...mapState({
+      userInfo: state => state.user.userInfo
+    }),
     timeoutRules () {
       return {
         time: [{required: false, validator: this.validateTime, trigger: 'blur'}]
@@ -108,6 +135,8 @@ export default class SettingsPage extends Vue {
   showReset = true
   engineList = []
   connectionList = []
+  selectedEngine = {}
+  isRefreshing = false
 
   created () {
     this.getConfig()
@@ -123,6 +152,7 @@ export default class SettingsPage extends Vue {
     if (engine) {
       this.defaultEngine = engine
       this.engineRuleForm.name = engine
+      this.handleEngineChanged(engine)
     }
   }
 
@@ -141,11 +171,17 @@ export default class SettingsPage extends Vue {
     }
   }
 
-  async getEngineList () {
+  async getEngineList (isRefresh) {
     try {
       const res = await this.getEngins()
       this.engineList = res.data?.list || []
-      this.engineRuleForm.name = this.engineList.length ? this.engineList[0] : ''
+      if (!isRefresh) {
+        this.engineRuleForm.name = this.engineList.length ? this.engineList[0] : ''
+      } else {
+        if (this.engineList.length && !this.engineList.some(i => i.name === this.selectedEngine.name)) {
+          this.initData({ engine: this.engineList[0].name })
+        }
+      }
     } catch (e) {
       console.log(e)
     }
@@ -189,6 +225,7 @@ export default class SettingsPage extends Vue {
         console.log(e)
       }
     }
+    this.getConnections()
   }
   async resetForm (type) {
     try {
@@ -201,26 +238,51 @@ export default class SettingsPage extends Vue {
       console.log(e)
     }
   }
-  async getConnections () {
+  async getConnections (params = '') {
+    if (params) {
+      this.isRefreshing = true
+    }
     try {
-      const res = await this.getConnectionList()
+      const res = await this.getConnectionList(params)
       this.connectionList = res.data?.connection_list ?? []
     } catch (e) {
       console.log(e)
+    } finally {
+      if (params) {
+        this.isRefreshing = false
+      }
     }
   }
 
   async handleCreateConnection (item) {
     const type = item ? 'edit' : 'add'
-    const payload = item || {}
     if (item && (item.parameter.length === 0)) {
       item.parameter = [{name: '', value: '', key: String(Date.now())}]
     }
+    const payload = cloneDeep(item || {})
+    if (payload?.name?.startsWith(this.userInfo.username + '_')) {
+      payload.name = payload.name.replace(this.userInfo.username + '_', '')
+    }
     const { isSubmit } = await this.callCreateConnectionModal({ payload, type })
     if (isSubmit) {
       this.getConnections()
     }
   }
+
+  handleVisibleChange (visible) {
+    if (visible) {
+      this.getEngineList(true)
+    }
+  }
+
+  getEngineStatus ({ status }) {
+    return ENGINE_STATUS[status]
+  }
+
+  handleEngineChanged (e) {
+    this.selectedEngine = this.engineList.find(i => i.name === e) || {}
+  }
+
   deleteConnectionConfirm () {
     return this.$confirm(this.$t('settings.deleteText'), this.$t('settings.deleteTitle'), {
       confirmButtonText: this.$t('ok'),
@@ -263,5 +325,36 @@ export default class SettingsPage extends Vue {
       margin-bottom: 10px;
     }
   }
+}.engine-selector {
+  .el-select {
+    .el-input {
+      input {
+        padding-left: 35px;
+      }
+      .el-input__prefix {
+        width: 35px;
+      }
+    }
+  }
+}
+.engine-list {
+  display: flex;
+  align-items: center;
+}
+.engine-item-circle {
+  margin-right: 10px;
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  &.selected {
+    margin-right: 0;
+  }
+  &.available {
+    background: $pattern-green-500;
+  }
+  &.unavailable {
+    background: $--color-danger;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/service/module/settings.js b/src/service/module/settings.js
index cc92aa1..c57af2d 100644
--- a/src/service/module/settings.js
+++ b/src/service/module/settings.js
@@ -10,10 +10,11 @@ export default {
   resetTimout: () => axios.post('/api/settings/configuration/reset'),
   checkConnection: payload => axios.post('/api/settings/connection/test', payload),
   createConnect: payload => axios.post('/api/settings/connection', payload),
-  getConnectionList: () => axios.get('/api/settings/connection'),
+  getConnectionList: payload => axios.get(`/api/settings/connection${payload}`),
   getExistingTableList: connectionId => axios.get(`/api/settings/connection/${connectionId}/table`),
   updateConnection: (connectionId, data) => axios.put(`/api/settings/connection/${connectionId}`, data),
   deleteConnection: connectionId => axios.delete(`/api/settings/connection/${connectionId}`),
   getAlgorithmList: () => axios.get('/api/settings/node/def?node_type=train'),
-  getParamsByAlgorithmId: id => axios.get(`/api/settings/node/def/${id}`)
+  getParamsByAlgorithmId: id => axios.get(`/api/settings/node/def/${id}`),
+  getEngineInfo: payload => axios.get(`/api/engine/status${payload}`)
 }
\ No newline at end of file
diff --git a/src/store/module/settings.js b/src/store/module/settings.js
index b9a290c..96651ba 100644
--- a/src/store/module/settings.js
+++ b/src/store/module/settings.js
@@ -2,9 +2,14 @@ import * as types from '../type'
 import { settings } from '../../service'
 export default {
   state: {
-    isRunningAll: false
+    isRunningAll: false,
+    engineInfo: {}
+  },
+  mutations: {
+    [types.SET_ENGINE_INFO]: (state, payload) => {
+      state.engineInfo = payload
+    }
   },
-  mutations: {},
   actions: {
     [types.GET_CONFIGS]: () => {
       return settings.getDefaultConfig()
@@ -24,8 +29,8 @@ export default {
     [types.CREATE_CONNECTION]: (_, payload) => {
       return settings.createConnect(payload)
     },
-    [types.GET_CONNECTION_LIST]: () => {
-      return settings.getConnectionList()
+    [types.GET_CONNECTION_LIST]: (_, payload = '') => {
+      return settings.getConnectionList(payload)
     },
     [types.GET_CONNECTION_TABLE]: (_, connectionId) => {
       return settings.getExistingTableList(connectionId)
@@ -41,6 +46,16 @@ export default {
     },
     [types.GET_PARAM_BY_ID]: (_, id) => {
       return settings.getParamsByAlgorithmId(id)
+    },
+    [types.GET_ENGINE_INFO]: async ({ commit }, payload = '') => {
+      let res = {}
+      try {
+        res = await settings.getEngineInfo(payload)
+        commit(types.SET_ENGINE_INFO, res.data)
+      } catch (err) {
+        console.log(err)
+      }
+      return res
     }
   }
 }
\ No newline at end of file
diff --git a/src/store/type.js b/src/store/type.js
index 59ec055..89fb2c3 100644
--- a/src/store/type.js
+++ b/src/store/type.js
@@ -139,3 +139,5 @@ export const DELETE_CONNECTION = 'DELETE_CONNECTION'
 
 export const GET_ALGORITHM_LIST = 'GET_ALGORITHM_LIST'
 export const GET_PARAM_BY_ID = 'GET_PARAM_BY_ID'
+export const SET_ENGINE_INFO = 'SET_ENGINE_INFO'
+export const GET_ENGINE_INFO = 'GET_ENGINE_INFO'
\ No newline at end of file