Merge pull request WeBankFinTech#159 from Kabimon/dev-1.0.0

LGTM
Mu-L · Feb 11, 2022 · 92554c5 · 92554c5
2 parents ebf3500 + 469a228
commit 92554c5
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 61 deletions.
diff --git a/web/src/app.js b/web/src/app.js
@@ -40,7 +40,7 @@ export const request = {
   errorHandler: {
     default(error) {
       if (error.message && error.message.indexOf('timeout of') > -1) {
-        return message.error('请求超时')
+        return message.warning('请求超时')
       }
       console.log(error, '系统异常')
       message.error(error?.response?.data?.message || "系统异常");

diff --git a/web/src/pages/jobManagement/components/bottomLog.vue b/web/src/pages/jobManagement/components/bottomLog.vue
@@ -24,68 +24,62 @@
                 <a-progress :percent="jobProgress.percent" :success-percent="jobProgress.successPercent"/>
               </a-tooltip>
             </div>
-            <div v-if="jobProgress.tasks && jobProgress.tasks.running" class="job-progress-wrap">
+            <div v-if="jobProgress.tasks && jobProgress.tasks.Running" class="job-progress-wrap">
               <span class="job-progress-title">正在运行</span>
               <div class="job-progress-body">
-                <div class="job-progress-percent" v-for="progress in jobProgress.tasks.running" :key="progress.name">
+                <div class="job-progress-percent" v-for="progress in jobProgress.tasks.Running" :key="progress.name">
                   <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{ progress.name }}</span>
-                  <a-progress status="active" :percent="progress.progress" />
-                  <div class="job-progress-percent" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px">
-                    <span>资源使用</span>
-                    <!--<div style="position: relative;padding-bottom: 20px;margin-bottom: 5px">-->
-                    <!--<span style="position: absolute;bottom: 0;left:0;font-size: 12px">CPU使用</span>-->
-                    <!--<a-progress type="dashboard" :width="50" :percent="metricsInfo[progress.taskId].resourceUsed.cpu" style="margin-right: 30px"/>-->
-                    <!--<span style="position: absolute;bottom: 0;left:80px;font-size: 12px">内存使用</span>-->
-                    <!--<a-progress type="dashboard" :width="50" :percent="metricsInfo[progress.taskId].resourceUsed.memory" />-->
-                    <!--</div>-->
-                    <div style="margin-bottom: 5px">
-                      <div class="core-block" style="background-color: #2e92f7">
-                        <div>{{metricsInfo[progress.taskId].resourceUsed.cpu}} vcores</div>
-                        <div>CPU使用</div>
-                      </div>
-                      <div class="core-block" style="background-color: #2e92f7">
-                        <div>{{metricsInfo[progress.taskId].resourceUsed.memory}} MB</div>
-                        <div>内存使用</div>
-                      </div>
-                    </div>
-                    <span>流量情况</span>
-                    <div style="position: relative;padding-bottom: 20px;margin-bottom: 5px">
-                      <span style="position: absolute;bottom: 0;left:0;font-size: 12px">{{metricsInfo[progress.taskId].traffic.source}}</span>
-                      <DatabaseFilled  style="margin-right: 50px;color:#2e92f7;font-size: 25px"/>
-                      <span style="position: absolute;bottom: 0;left:67px;font-size: 12px">{{metricsInfo[progress.taskId].traffic.flow}} Records/S</span>
-                      <svg class="icon icon-symbol" aria-hidden="true" style="font-size: 40px;margin-right: 50px">
-                        <use xlink:href="#icon-lansejiantoudaikuang"></use>
-                      </svg>
-                      <span style="position: absolute;bottom: 0;left:167px;font-size: 12px">{{metricsInfo[progress.taskId].traffic.sink}}</span>
-                      <DatabaseFilled  style="color:#2e92f7;font-size: 25px" />
-                    </div>
-                    <span>核心指标</span>
-                    <div>
-                      <div class="core-block" style="background-color: #2e92f7">
-                        <div>{{metricsInfo[progress.taskId].indicator.exchangedRecords}}</div>
-                        <div>已同步</div>
-                      </div>
-                      <div class="core-block" style="background-color: #ff4d4f">
-                        <div>{{metricsInfo[progress.taskId].indicator.errorRecords}}</div>
-                        <div>错误记录</div>
-                      </div>
-                      <div class="core-block" style="background-color: gold">
-                        <div>{{metricsInfo[progress.taskId].indicator.ignoredRecords}}</div>
-                        <div>忽略记录</div>
-                      </div>
-                    </div>
-                  </div>
+                  <a-progress status="active" :percent="progress.progress * 100" />
+                  <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
+                </div>
+              </div>
+            </div>
+            <div v-if="jobProgress.tasks && jobProgress.tasks.Scheduled" class="job-progress-wrap">
+              <span class="job-progress-title">准备中</span>
+              <div class="job-progress-body">
+                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Scheduled">
+                  <span :title="progress.name">{{ progress.name }}</span><a-progress :percent="0" />
                 </div>
               </div>
             </div>
             <div v-if="jobProgress.tasks && jobProgress.tasks.Inited" class="job-progress-wrap">
-                <span class="job-progress-title">准备中</span>
-                <div class="job-progress-body">
-                  <div class="job-progress-percent" v-for="progress in jobProgress.tasks.Inited" :key="progress.name">
-                    <span :title="progress.name">{{ progress.name }}</span><a-progress :percent="0" />
-                  </div>
+              <span class="job-progress-title">初始化</span>
+              <div class="job-progress-body">
+                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Inited">
+                  <span :title="progress.name">{{ progress.name }}</span><a-progress :percent="0" />
                 </div>
               </div>
+            </div>
+            <div v-if="jobProgress.tasks && jobProgress.tasks.Failed" class="job-progress-wrap">
+              <span class="job-progress-title" style="color:#ff4d4f">失败</span>
+              <div class="job-progress-body">
+                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Failed">
+                  <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{ progress.name }}</span>
+                  <a-progress status="active" :percent="progress.progress * 100" />
+                  <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
+                </div>
+              </div>
+            </div>
+            <div v-if="jobProgress.tasks && jobProgress.tasks.Cancelled" class="job-progress-wrap">
+              <span class="job-progress-title" style="color:#ff4d4f">终止</span>
+              <div class="job-progress-body">
+                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Cancelled">
+                  <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{ progress.name }}</span>
+                  <a-progress status="active" :percent="progress.progress * 100" />
+                  <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
+                </div>
+              </div>
+            </div>
+            <div v-if="jobProgress.tasks && jobProgress.tasks.Success" class="job-progress-wrap">
+              <span class="job-progress-title">成功</span>
+              <div class="job-progress-body">
+                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Success">
+                  <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{ progress.name }}</span>
+                  <a-progress status="active" :percent="progress.progress * 100" />
+                  <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
+                </div>
+              </div>
+            </div>
           </a-tab-pane>
           <a-tab-pane key="2" tab="实时日志" force-render>
             <execution-log :param="logParams"></execution-log>
@@ -107,12 +101,14 @@ import {
 } from "@/common/service";
 import { message, notification } from "ant-design-vue";
 import executionLog from './executionLog'
+import metrics from './metricsInfo'
 
 export default {
   components: {
     DatabaseFilled,
     CloseOutlined,
-    executionLog
+    executionLog,
+    metrics
   },
   data() {
     return {
@@ -175,7 +171,7 @@ export default {
           if (res.job && res.job.tasks) {
             res.job.successTasks = res.job.tasks.Success?.length || 0
             res.job.initedTasks = res.job.tasks.Inited?.length || 0
-            res.job.runningTasks = res.job.tasks.running?.length || 0
+            res.job.runningTasks = res.job.tasks.Running?.length || 0
             res.job.totalTasks = this.tasklist.length
             res.job.successPercent = res.job.successTasks * 100 / res.job.totalTasks
             res.job.percent = (res.job.successTasks + res.job.runningTasks) * 100 / res.job.totalTasks

diff --git a/web/src/pages/jobManagement/components/executionLog.vue b/web/src/pages/jobManagement/components/executionLog.vue
@@ -159,7 +159,7 @@ export default defineComponent({
           })
           .catch((err) => {
             console.log(err)
-            message.error("获取日志失败")
+            //message.error("获取日志失败")
           })
       } else {
         getTaskExecLog({

diff --git a/web/src/pages/jobManagement/components/jobDetail.vue b/web/src/pages/jobManagement/components/jobDetail.vue
@@ -259,7 +259,7 @@
               <div class="job-progress-body">
                 <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Running">
                   <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{ progress.name }}</span>
-                  <a-progress status="active" :percent="progress.progress" />
+                  <a-progress status="active" :percent="progress.progress * 100" />
                   <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
                 </div>
               </div>
@@ -285,7 +285,7 @@
               <div class="job-progress-body">
                 <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Failed">
                   <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{ progress.name }}</span>
-                  <a-progress status="active" :percent="progress.progress" />
+                  <a-progress status="active" :percent="progress.progress * 100" />
                   <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
                 </div>
               </div>
@@ -295,7 +295,7 @@
               <div class="job-progress-body">
                 <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Cancelled">
                   <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{ progress.name }}</span>
-                  <a-progress status="active" :percent="progress.progress" />
+                  <a-progress status="active" :percent="progress.progress * 100" />
                   <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
                 </div>
               </div>
@@ -305,7 +305,7 @@
               <div class="job-progress-body">
                 <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Success">
                   <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{ progress.name }}</span>
-                  <a-progress status="active" :percent="progress.progress" />
+                  <a-progress status="active" :percent="progress.progress * 100" />
                   <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
                 </div>
               </div>