optimize (#234)

* optimize log * fix: the permission of resource remove * feat: remove the disabled features of mpc component
primihub · Dec 25, 2023 · c013b5f · c013b5f
1 parent b65be13
commit c013b5f
Show file tree

Hide file tree

Showing 6 changed files with 154 additions and 54 deletions.
diff --git a/primihub-webconsole/src/components/FeatureMultiSelectDialog/index.vue b/primihub-webconsole/src/components/FeatureMultiSelectDialog/index.vue
@@ -7,7 +7,7 @@
   >
     <el-tabs v-model="activeName">
       <el-tab-pane v-for="(item,index) in selectedData" :key="index" :label="item.organName" :name="item.organId">
-        <checkbox :select-data="selectedFeatures" :organ-id="item.organId" :options="filterData(item.resourceField)" :checked="item.checked" @change="handleChange" />
+        <checkbox :organ-id="item.organId" :options="filterData(item.resourceField)" :checked="item.checked" @change="handleChange" />
       </el-tab-pane>
     </el-tabs>
     <span slot="footer" class="dialog-footer">
@@ -31,10 +31,6 @@ export default {
     data: {
       type: Array,
       default: () => []
-    },
-    selectedFeatures: {
-      type: Array,
-      default: () => []
     }
   },
   data() {

diff --git a/primihub-webconsole/src/components/Log/index.vue b/primihub-webconsole/src/components/Log/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="log">
-    <el-button size="small" type="danger" plain style="margin-bottom: 10px" @click="showErrorLog">ERROR ({{ errorLog.length }})</el-button>
+    <el-button :disabled="errorLog.length === 0" size="small" type="danger" plain style="margin-bottom: 10px" @click="showErrorLog">ERROR ({{ errorLog.length }})</el-button>
     <div class="log-container">
       <template v-if="logData.length>0">
         <p v-for="(item,index) in logData" :id="(logData.length === index+1)?'scrollLog':''" :key="index" class="item">
@@ -13,7 +13,10 @@
         </p>
       </template>
       <template v-else>
-        <p>暂无日志数据</p>
+        <p>
+          {{ text }}
+          <i v-if="logData.length === 0 && text === '日志加载中'" class="el-icon-loading" />
+        </p>
       </template>
     </div>
   </div>
@@ -37,24 +40,50 @@ export default {
   },
   data() {
     return {
+      text: '日志加载中', // 暂无日志数据
       ws: null,
       logData: [],
       query: '',
       start: '',
       errorLog: [],
       logType: '',
-      logValueType: 'string'
+      logValueType: 'string',
+      lockReconnect: false,
+      connectTimer: null,
+      serverTimeout: null,
+      heartbeatTimer: null,
+      timeout: 5 * 1000, // 5秒一次心跳
+      destroyed: false,
+      connectCount: 0
     }
   },
-  async mounted() {
+  async created() {
+    console.log('显示')
     await this.getTaskLogInfo()
     this.socketInit()
   },
-  destroyed() {
+  beforeDestroy() {
     this.ws && this.ws.close()
+    this.destroyed = true
+    // 清除时间
+    clearInterval(this.heartbeatTimer)
+    clearInterval(this.connectTimer)
+    clearTimeout(this.serverTimeout)
   },
   methods: {
     socketInit() {
+      console.log('init connectCount', this.connectCount)
+      if (!this.address) {
+        this.text = '暂无数据'
+        return
+      }
+      if (this.connectCount === 10) {
+        this.text = '暂无数据'
+        this.reset()
+        return
+      }
+      this.connectCount += 1
+      this.text = '日志加载中'
       const protocol = document.location.protocol === 'https:' ? 'wss' : 'ws'
       const url = `${protocol}://${this.address}/loki/api/v1/tail?start=${this.start}&query=${this.query}&limit=1000`
       this.ws = new WebSocket(url)
@@ -65,17 +94,72 @@ export default {
       this.ws.onclose = this.close
     },
     open: function() {
-      console.log('socket连接成功')
+      console.log('socket连接成功', this.connectCount)
+      this.heartbeatStart()
+      setTimeout(() => {
+        if (this.ws.readyState === 1 && this.logData.length === 0) {
+          this.reconnect()
+        }
+      }, 2000)
     },
     error: function() {
       console.log('连接错误')
+      // 关闭心跳定时器
+      clearInterval(this.heartbeatTimer)
+      // 关闭重连定时器
+      clearInterval(this.connectTimer)
+      clearTimeout(this.serverTimeout)
+      this.text = '暂无数据'
     },
     close: function(e) {
       this.ws.close()
       console.log('socket已经关闭', e)
+      if (!this.destroyed) {
+        this.reconnect()
+      }
+    },
+    reconnect() {
+      if (this.lockReconnect) {
+        return
+      }
+      this.lockReconnect = true
+      // 没连接上会一直重连，设置延迟避免请求过多
+      this.connectTimer && clearInterval(this.connectTimer)
+      this.connectTimer = setInterval(() => {
+        this.socketInit()// 新连接
+        this.lockReconnect = false
+      }, 5000)
+    },
+    reset() {
+      // 关闭心跳定时器
+      clearInterval(this.heartbeatTimer)
+      // 关闭重连定时器
+      clearInterval(this.connectTimer)
+      clearTimeout(this.serverTimeout)
+    },
+    heartbeatStart() { // 开启心跳
+      this.heartbeatTimer && clearInterval(this.heartbeatTimer)
+      this.serverTimeout && clearTimeout(this.serverTimeout)
+      this.heartbeatTimer = setInterval(() => {
+        if (this.ws.readyState === 1) {
+          this.ws.send(JSON.stringify({
+            data: {
+              messageType: 'heartCheck'
+            }
+          }))
+        } else {
+          this.reconnect()
+        }
+        this.serverTimeout = setTimeout(() => {
+          // 超时关闭
+          this.ws.close()
+          this.destroyed = true
+        }, 3000)
+      }, this.timeout)
     },
     getMessage: function(msg) {
       if (msg.data.length > 0) {
+        this.reset()// 收到服务器信息，心跳重置
         const data = JSON.parse(msg.data).streams
         const formatData = data.map(item => {
           this.logValueType = typeof item.values[0][1]
@@ -87,7 +171,10 @@ export default {
             }
             return item.values
           } else {
-            return item.values
+            let log = JSON.parse(item.values[0][1]).log
+            log = log.replace(/\[\d+m/ig, '')
+            log = log.replace(/\\+/ig, '')
+            return log
           }
         })
         this.logData = this.logData.concat(formatData)
@@ -99,14 +186,13 @@ export default {
     },
     filterErrorLog() {
       if (this.logValueType === 'string') {
-        this.errorLog = this.logData.filter(item => item[0][1].indexOf('ERROR') !== -1)
+        this.errorLog = this.logData.filter(item => item.indexOf('ERROR') !== -1)
       } else {
         this.errorLog = this.logData.filter(item => item.log.indexOf('ERROR') !== -1)
       }
       this.$emit('error', this.errorLog)
     },
     send: function(order) {
-      console.log(order)
       this.ws.send(order)
     },
     async getTaskLogInfo() {
@@ -123,15 +209,15 @@ export default {
         }
       }
     },
-    scrollToTarget(target, block = 'end') {
+    scrollToTarget(target, block = 'start') {
       const element = document.getElementById(target)
-      element.scrollIntoView({ behavior: 'smooth', block })
+      element && element.scrollIntoView({ behavior: 'smooth', block })
     },
     showErrorLog() {
       this.logType = 'ERROR'
       this.query += `|="ERROR"`
       this.logData = []
-
+      this.reset()
       this.socketInit()
     }
   }
@@ -163,7 +249,7 @@ export default {
   height: 500px;
   .item{
     display: inline-block;
-    margin-bottom: 10px;
+    margin: 10px 0;
     line-height: 1.5;
     word-break:break-all;
     .state-error{

diff --git a/primihub-webconsole/src/components/TaskCanvas/RightDrawer/index.vue b/primihub-webconsole/src/components/TaskCanvas/RightDrawer/index.vue
@@ -215,7 +215,7 @@
     <FeatureSelectDialog v-if="featuresDialogVisible" :visible.sync="featuresDialogVisible" :data="featuresOptions" :selected-data="selectedDataAlignFeatures" @submit="handleFeatureDialogSubmit" @close="handleFeatureDialogClose" />
 
     <!-- MPC_MPC_STATISTICS component dialog -->
-    <FeatureMultiSelectDialog v-if="multiFeaturesVisible" :visible.sync="multiFeaturesVisible" :selected-features="selectFeatures" :data="featureItems[featureIndex].features" @submit="handleMultiFeatureDialogSubmit" @close="handleMultiFeatureDialogClose" />
+    <FeatureMultiSelectDialog v-if="multiFeaturesVisible" :visible.sync="multiFeaturesVisible" :data="featureItems[featureIndex].features" @submit="handleMultiFeatureDialogSubmit" @close="handleMultiFeatureDialogClose" />
   </div>
 </template>
 
@@ -294,7 +294,6 @@ export default {
       dataAlignParam: {},
       modelParams: [],
       defaultComponentConfig: [],
-      selectFeatures: [],
       selectType: 'radio',
       emptyMissingData: {
         selectedExceptionFeatures: [],
@@ -622,13 +621,6 @@ export default {
     },
     removeFilling(index) {
       this.featureItems.splice(index, 1)
-      this.featureItems.forEach(item => {
-        if (item.features[0].checked.length > 0) {
-          this.selectFeatures = [...item.features[0].checked]
-        } else {
-          this.selectFeatures = []
-        }
-      })
       this.setFeaturesValue()
       this.handleChange()
     },
@@ -815,9 +807,6 @@ export default {
         this.dialogVisible = false
         return
       }
-      if (data.fileHandleField.includes('id')) {
-        data.fileHandleField = data.fileHandleField.filter(v => v !== 'id')
-      }
       if (this.participationIdentity === 1) {
         // is not first select
         if (this.initiateOrgan.resourceId !== data.resourceId) {
@@ -901,27 +890,12 @@ export default {
     save() {
       this.$emit('save')
     },
-    setSelectFeaturesStatus() {
-      const selected = []
-      // set checkbox disabled element
-      const featureItems = this.featureItems.filter(feature => feature.type !== this.featureItems[this.featureIndex].type)
-      featureItems.forEach(item => {
-        const checked = item.features[0].checked
-        if (checked.length > 0) {
-          for (let i = 0; i < checked.length; i++) {
-            selected.push(checked[i])
-          }
-        }
-      })
-      this.selectFeatures = selected
-    },
     openMultiFeaturesDialog(index) {
       if (this.inputValue === '') {
         this.$message.error('请先添加选择数据集组件')
         return
       }
       this.featureIndex = index
-      this.setSelectFeaturesStatus()
       this.multiFeaturesVisible = true
     },
     openFeaturesDialog(code, index) {

diff --git a/primihub-webconsole/src/components/TaskCanvas/index.vue b/primihub-webconsole/src/components/TaskCanvas/index.vue
@@ -8,6 +8,18 @@
     </div>
     <!--右侧工具栏-->
     <right-drawer v-if="showDataConfig" ref="drawerRef" class="right-drawer" :default-config="defaultComponentsConfig" :graph-data="graphData" :node-data="nodeData" :options="drawerOptions" @change="handleChange" @save="saveFn" />
+    <el-dialog
+      title="错误提示"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :close-on-click-modal="false"
+    >
+      <h3><i class="el-icon-error error-icon" />数据资源不可用</h3>
+      <p>{{ runTaskErrorMessage }}</p>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -129,6 +141,8 @@ export default {
   },
   data() {
     return {
+      dialogVisible: false,
+      runTaskErrorMessage: '',
       defaultComponentsConfig: [],
       defaultConfig: [],
       showDataConfig: false,
@@ -807,10 +821,15 @@ export default {
       }
       runTaskModel({ modelId: this.currentModelId }).then(res => {
         if (res.code !== 0) {
-          this.$message({
-            message: res.msg,
-            type: 'error'
-          })
+          if (res.code === 1007) {
+            this.dialogVisible = true
+            this.runTaskErrorMessage = res.msg
+          } else {
+            this.$message({
+              message: res.msg,
+              type: 'error'
+            })
+          }
           return
         } else {
           this.currentTaskId = res.result.taskId
@@ -835,7 +854,16 @@ export default {
         this.taskTimer = window.setInterval(() => {
           setTimeout(this.getTaskModelComponent(), 0)
         }, 1500)
+      } else if (res.code === 1007) {
+        this.dialogVisible = true
+        this.runTaskErrorMessage = res.msg
+      } else {
+        this.$message({
+          message: res.msg,
+          type: 'error'
+        })
       }
+      this.$emit('complete')
     },
     getTaskModelComponent() {
       getTaskModelComponent({ taskId: this.taskId }).then(res => {
@@ -1289,9 +1317,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-dialog__body{
+  padding: 10px 20px;
+  p{
+    line-height: 1.5;
+  }
+}
 ::v-deep .x6-graph-scroller{
   overflow-x: hidden;
 }
+.error-icon{
+  color: #F56C6C;
+  margin-right: 5px;
+}
 .canvas{
   display: flex;
   overflow: hidden;