From 7349bd5ae733899898d5c79f76a233910ff07823 Mon Sep 17 00:00:00 2001
From: chengwang15 <w4xfz8@163.com>
Date: Thu, 24 Mar 2022 10:19:25 +0800
Subject: [PATCH] #153 Incremental log message echo

---
 .../Workspace/Notebook/ExcuteDetail/index.vue | 111 ++++++++----------
 .../Workspace/Notebook/LogMessage/index.vue   |  30 +++--
 src/service/module/jobs.js                    |   2 +-
 3 files changed, 72 insertions(+), 71 deletions(-)

diff --git a/src/page/Workspace/Notebook/ExcuteDetail/index.vue b/src/page/Workspace/Notebook/ExcuteDetail/index.vue
index 50e8f4d..fefd72e 100644
--- a/src/page/Workspace/Notebook/ExcuteDetail/index.vue
+++ b/src/page/Workspace/Notebook/ExcuteDetail/index.vue
@@ -7,43 +7,23 @@
       </el-tooltip>
     </div>
     <div class="duration">{{$t('notebook.totalDuration')}}: {{formatTime(totalDuration)}}</div>
-    <ul class="progress-jobs" v-show="inprogressJobs.length || failedJobs.length">
-      <li v-for="item in inprogressJobs" :key="item.spark_job_id">
-        <div class="job-row">
-          <i class="loading el-ksd-icon-loading_22 font-16 mr-5"></i>
-          <span class="label">{{$t('notebook.sparkJobId')}}: {{item.spark_job_id}} ({{item.completed_task_count}}/{{item.total_task_count}})</span>
-          <el-tooltip trigger="hover" placement="top" :value="showCode">
-            <div slot="content">
-              <div>Running {{currentScriptCount}}/{{totalScriptCount}}</div>
-              <div>
-                {{currentScript}}
-              </div>
-            </div>
-            <i class="view hasEvent el-ksd-icon-view_22 font-22" @mouseenter="showCurrentScript"></i>
-          </el-tooltip>
-        </div>
-        <el-progress :stroke-width="4" :percentage="getPercentage(item.completed_task_count,item.total_task_count)"></el-progress>
-      </li>
-      <li v-for="item in failedJobs" :key="item.spark_job_id">
-        <div class="job-row">
-          <i class="el-icon-error txt-danger"></i>
-          <span class="label">{{$t('notebook.sparkJobId')}}: {{item.spark_job_id}} ({{item.completed_task_count}}/{{item.total_task_count}})</span>
+    <ul v-if="result && result.status === '0'" class="progress-jobs">
+      <li>
+        <i v-if="result && result.failed_jobs" class="el-icon-error txt-danger failed-icon"></i>
+        <div class="progress-wrap">
+          <el-progress :stroke-width="4" :percentage="percentage"></el-progress>
         </div>
-        <el-progress :stroke-width="4" :percentage="getPercentage(item.completed_task_count,item.total_task_count)"></el-progress>
-      </li>
-    </ul>
-    <div class="view-complete-btn">
-      <el-button type="text" size="mini" @click="showDetails = !showDetails">
-        {{$t('notebook.viewCompleted')}}({{completeJobs.length}})
-        <i :class="showDetails ? 'el-ksd-icon-arrow_up_22' : 'el-ksd-icon-arrow_down_22'"></i>
-      </el-button>
-    </div>
-    <ul class="complete-jobs" v-show="showDetails && completeJobs.length">
-      <li v-for="item in completeJobs" :key="item.spark_job_id">
-        <div class="job-row">
-          <span class="label">{{$t('notebook.sparkJobId')}}: {{item.spark_job_id}} ({{item.completed_task_count}}/{{item.total_task_count}})</span>
-        </div>
-        <div class="value">{{formatTime(item.duration)}}</div>
+        <span class="label">{{ percentage + '%' }}</span>
+        <span class="label">{{ progresFormat }}</span>
+        <el-tooltip ref="codeRef" trigger="hover" placement="top" :value="showCode">
+          <div slot="content">
+            <div>Running {{ currentScriptCount }}/{{ totalScriptCount }}</div>
+            <div>
+              {{ currentScript }}
+            </div>
+          </div>
+          <i class="view hasEvent el-ksd-icon-view_22 font-22" @mouseenter="showCurrentScript"></i>
+        </el-tooltip>
       </li>
     </ul>
   </div>
@@ -73,10 +53,18 @@ export default class ExcuteDetail extends Vue {
   totalScriptCount = 0
   currentScriptCount = 0
 
-  completeJobs = []
-  inprogressJobs = []
   totalDuration = '0'
-  failedJobs = []
+
+  get progresFormat () {
+    const { completed_jobs = 0, failed_jobs = 0, in_progress_jobs = 0 } = this.result
+    return `${ completed_jobs }/${ completed_jobs + failed_jobs + in_progress_jobs }`
+  }
+
+  get percentage () {
+    const { completed_jobs = 0, failed_jobs = 0, in_progress_jobs = 0 } = this.result
+    const result = completed_jobs / (completed_jobs + failed_jobs + in_progress_jobs)
+    return result || result === 0 ? Number((result * 100).toFixed(0)) : 0
+  }
 
   @Watch('result')
   onResultChange (newVal) {
@@ -88,10 +76,7 @@ export default class ExcuteDetail extends Vue {
   }
 
   getExcuteDetails (data) {
-    this.completeJobs = data?.completed_jobs ?? []
-    this.inprogressJobs = data?.in_progress_jobs ?? []
     this.totalDuration = data?.duration ?? '0'
-    this.failedJobs = data?.failed_jobs ?? []
   }
 
   formatTime (time) {
@@ -102,9 +87,6 @@ export default class ExcuteDetail extends Vue {
   getUnit (count, unit) {
     return count > 0 ? count + unit : ''
   }
-  getPercentage (completeCount, total) {
-    return Number((completeCount / total * 100).toFixed(0))
-  }
 
   showCurrentScript () {
     this.showCode = true
@@ -114,10 +96,14 @@ export default class ExcuteDetail extends Vue {
   async getScript () {
     try {
       const res = await this.getCurrentScript(this.jobId)
-      const { content, current_job_index, total_job_count } = res.data
+      const { content = '', current_job_index, total_job_count } = res.data || {}
       this.currentScript = content
       this.currentScriptCount = current_job_index
       this.totalScriptCount = total_job_count
+      this.$nextTick(() => {
+        // 修正 tooltip 偏移
+        this.$refs['codeRef'].updatePopper()
+      });
     } catch (e) {
       console.log(e)
     }
@@ -139,26 +125,31 @@ export default class ExcuteDetail extends Vue {
     margin-bottom: 15px;
   }
   .progress-jobs {
-    width: 240px;
     padding-left: 8px;
     > li {
       margin-top: 4px;
-      .job-row {
-        line-height: 22px;
-        margin-bottom: 7px;
-        display: flex;
-        align-items: center;
-        .label {
-          font-weight: 500;
-        }
-        .loading {
-          color: $--color-primary;
-          margin-right: 7px;
+      display: inline-flex;
+      align-items: center;
+      .failed-icon {
+        margin-right: 10px;
+      }
+      .progress-wrap {
+        width: 240px;
+        .el-progress-bar {
+          padding-right: 15px;
         }
-        .view {
-          margin-left: 15px;
+        .el-progress__text {
+          display: none;
         }
       }
+      .label {
+        margin-right: 10px;
+        font-weight: 500;
+      }
+      .loading {
+        color: $--color-primary;
+        margin-right: 7px;
+      }
     }
   }
   .view-complete-btn {
diff --git a/src/page/Workspace/Notebook/LogMessage/index.vue b/src/page/Workspace/Notebook/LogMessage/index.vue
index bd93d92..9cf9402 100644
--- a/src/page/Workspace/Notebook/LogMessage/index.vue
+++ b/src/page/Workspace/Notebook/LogMessage/index.vue
@@ -34,24 +34,31 @@ import { mapState, mapMutations, mapActions } from 'vuex'
 export default class LogMessage extends Vue {
   logList = []
   timer = null
+  offset = -1
 
   @Watch('status')
-  onResultChange (newVal, oldVal) {
-    if (oldVal === 'RUNNING') {
+  onResultChange (newVal) {
+    if (newVal === 'RUNNING') {
+      this.offset = -1
+      this.logList = []
       this.getLogs()
     } else {
       window.clearTimeout(this.timer)
     }
   }
-  @Watch('jobId')
-  onJobIdChange () {
-    this.getLogs()
-  }
 
   @Watch('activeNotebook', { immediate: true, deep: true })
   onCurrentNotebookChange (newVal) {
     if (newVal && newVal.active === 'true' &&
-      (this.isDemo || !this.logMessageList[newVal.id] || (this.logMessageList[newVal.id] && !this.logMessageList[newVal.id].includes(this.cellId)))
+      (
+        this.isDemo ||
+        !this.logMessageList[newVal.id] ||
+        (
+          this.logMessageList[newVal.id] &&
+          !this.logMessageList[newVal.id].includes(this.cellId)
+        )
+      ) &&
+      this.status === 'RUNNING'
     ) {
       this.initLog()
     }
@@ -65,6 +72,8 @@ export default class LogMessage extends Vue {
     if (!this.isDemo) {
       this.addLogMessage({ name: 'logMessageList', notebookId: this.activeNotebook.id, cellId: this.cellId })
     }
+    this.offset = -1
+    this.logList = []
     this.getLogs()
   }
 
@@ -80,12 +89,13 @@ export default class LogMessage extends Vue {
 
   async getLogs () {
     try {
-      const res = await this.getJobLogs(this.jobId)
+      const res = await this.getJobLogs({ job_id: this.jobId, offset: this.offset })
       if (this._isDestroyed) {
         return false
       }
-      this.logList = res.data?.logs ?? []
-      if (this.status === 'RUNNING') {
+      this.offset = res.data?.offset || -1
+      this.logList.push(...(res.data?.logs ?? []))
+      if (this.status === 'RUNNING' && res.data?.offset !== -1) {
         this.pollingData()
       } else {
         window.clearTimeout(this.timer)
diff --git a/src/service/module/jobs.js b/src/service/module/jobs.js
index cd74633..0f613dc 100644
--- a/src/service/module/jobs.js
+++ b/src/service/module/jobs.js
@@ -5,5 +5,5 @@ export default {
   getJobList: params => axios.get(`/api/jobs?${params}`),
   getCodeById: job_id => axios.get(`/api/job/${job_id}/content`),
   deleteJobs: ids => axios.delete(`/api/jobs/${ids}`),
-  getJobLogs: job_id => axios.get(`/api/job/${job_id}/log`)
+  getJobLogs: ({ job_id, offset = -1 }) => axios.get(`/api/job/${job_id}/log?offset=${offset}`)
 }
\ No newline at end of file