xiayifan
4 years ago
15 changed files with 1977 additions and 424 deletions
Unified View
Diff Options
-
+2 -0mindinsight/ui/src/locales/en-us.json
-
+2 -0mindinsight/ui/src/locales/zh-cn.json
-
+16 -0mindinsight/ui/src/router.js
-
+2 -2mindinsight/ui/src/views/profiling-gpu/operator.vue
-
+12 -19mindinsight/ui/src/views/profiling-gpu/profiling-dashboard.vue
-
+124 -27mindinsight/ui/src/views/profiling-gpu/profiling.vue
-
+473 -0mindinsight/ui/src/views/profiling-gpu/resource-utilization.vue
-
+349 -24mindinsight/ui/src/views/profiling/cpu-detail.vue
-
+16 -242mindinsight/ui/src/views/profiling/data-process.vue
-
+20 -13mindinsight/ui/src/views/profiling/memory-detail.vue
-
+2 -2mindinsight/ui/src/views/profiling/operator.vue
-
+11 -18mindinsight/ui/src/views/profiling/profiling-dashboard.vue
-
+124 -70mindinsight/ui/src/views/profiling/profiling.vue
-
+816 -0mindinsight/ui/src/views/profiling/resource-utilization.vue
-
+8 -7mindinsight/ui/src/views/profiling/step-trace.vue
+ 2
- 0
mindinsight/ui/src/locales/en-us.json
View File
| @@ -477,6 +477,8 @@ | |||||
| "processCpuUtil": "Process CPU Usage", | "processCpuUtil": "Process CPU Usage", | ||||
| "operatorCpuUtil": "Operator CPU Usage", | "operatorCpuUtil": "Operator CPU Usage", | ||||
| "utilizationTitle": "Usage(%)", | "utilizationTitle": "Usage(%)", | ||||
| "trainingPerformance": "Training Performance", | |||||
| "resourceUtilization": "Resource Utilization", | |||||
| "memory": { | "memory": { | ||||
| "memoryDetailLink": "Memory Usage Information", | "memoryDetailLink": "Memory Usage Information", | ||||
| "overView": "Memory Allocation OverView", | "overView": "Memory Allocation OverView", | ||||
+ 2
- 0
mindinsight/ui/src/locales/zh-cn.json
View File
| @@ -476,6 +476,8 @@ | |||||
| "processCpuUtil": "进程CPU利用率", | "processCpuUtil": "进程CPU利用率", | ||||
| "operatorCpuUtil": "算子CPU利用率", | "operatorCpuUtil": "算子CPU利用率", | ||||
| "utilizationTitle": "利用率（%）", | "utilizationTitle": "利用率（%）", | ||||
| "trainingPerformance": "训练性能", | |||||
| "resourceUtilization": "资源利用", | |||||
| "memory": { | "memory": { | ||||
| "memoryDetailLink": "内存使用情况", | "memoryDetailLink": "内存使用情况", | ||||
| "overView": "内存分配概览", | "overView": "内存分配概览", | ||||
+ 16
- 0
mindinsight/ui/src/router.js
View File
| @@ -103,6 +103,14 @@ export default new Router({ | |||||
| path: 'memory-detail', | path: 'memory-detail', | ||||
| component: () => import('./views/profiling/memory-detail.vue'), | component: () => import('./views/profiling/memory-detail.vue'), | ||||
| }, | }, | ||||
| { | |||||
| path: 'cpu-detail', | |||||
| component: () => import('./views/profiling/cpu-detail.vue'), | |||||
| }, | |||||
| { | |||||
| path: 'resource-utilization', | |||||
| component: () => import('./views/profiling/resource-utilization.vue'), | |||||
| }, | |||||
| ], | ], | ||||
| }, | }, | ||||
| { | { | ||||
| @@ -123,10 +131,18 @@ export default new Router({ | |||||
| path: 'operator', | path: 'operator', | ||||
| component: () => import('./views/profiling-gpu/operator.vue'), | component: () => import('./views/profiling-gpu/operator.vue'), | ||||
| }, | }, | ||||
| { | |||||
| path: 'resource-utilization', | |||||
| component: () => import('./views/profiling-gpu/resource-utilization.vue'), | |||||
| }, | |||||
| { | { | ||||
| path: 'step-trace', | path: 'step-trace', | ||||
| component: () => import('./views/profiling/step-trace.vue'), | component: () => import('./views/profiling/step-trace.vue'), | ||||
| }, | }, | ||||
| { | |||||
| path: 'cpu-detail', | |||||
| component: () => import('./views/profiling/cpu-detail.vue'), | |||||
| }, | |||||
| ], | ], | ||||
| }, | }, | ||||
| { | { | ||||
+ 2
- 2
mindinsight/ui/src/views/profiling-gpu/operator.vue
View File
| @@ -1197,11 +1197,11 @@ export default { | |||||
| } | } | ||||
| .operator .operator-title { | .operator .operator-title { | ||||
| padding: 0 15px; | padding: 0 15px; | ||||
| font-size: 16px; | |||||
| font-size: 18px; | |||||
| font-weight: bold; | font-weight: bold; | ||||
| } | } | ||||
| .operator .cl-profiler { | .operator .cl-profiler { | ||||
| height: calc(100% - 21px); | |||||
| height: calc(100% - 24px); | |||||
| overflow-y: auto; | overflow-y: auto; | ||||
| width: 100%; | width: 100%; | ||||
| background: #fff; | background: #fff; | ||||
+ 12
- 19
mindinsight/ui/src/views/profiling-gpu/profiling-dashboard.vue
View File
| @@ -1,5 +1,5 @@ | |||||
| <!-- | <!-- | ||||
| Copyright 2020 Huawei Technologies Co., Ltd.All Rights Reserved. | |||||
| Copyright 2020-2021 Huawei Technologies Co., Ltd.All Rights Reserved. | |||||
| Licensed under the Apache License, Version 2.0 (the "License"); | Licensed under the Apache License, Version 2.0 (the "License"); | ||||
| you may not use this file except in compliance with the License. | you may not use this file except in compliance with the License. | ||||
| @@ -180,7 +180,6 @@ limitations under the License. | |||||
| </div> | </div> | ||||
| <div class="title">{{$t('profiling.connectorQuene')}}</div> | <div class="title">{{$t('profiling.connectorQuene')}}</div> | ||||
| <div class="description"> | <div class="description"> | ||||
| <div class="line"></div> | |||||
| <div class="item" | <div class="item" | ||||
| v-if="processSummary.device.empty || processSummary.device.empty === 0"> | v-if="processSummary.device.empty || processSummary.device.empty === 0"> | ||||
| {{$t('profiling.queueTip2')}} | {{$t('profiling.queueTip2')}} | ||||
| @@ -224,7 +223,6 @@ limitations under the License. | |||||
| </div> | </div> | ||||
| <div class="title">{{$t('profiling.dataQueue')}}</div> | <div class="title">{{$t('profiling.dataQueue')}}</div> | ||||
| <div class="description"> | <div class="description"> | ||||
| <div class="line"></div> | |||||
| <div class="item" | <div class="item" | ||||
| v-if="processSummary.get_next.empty || processSummary.get_next.empty === 0"> | v-if="processSummary.get_next.empty || processSummary.get_next.empty === 0"> | ||||
| {{$t('profiling.queueTip2')}} | {{$t('profiling.queueTip2')}} | ||||
| @@ -1252,8 +1250,8 @@ export default { | |||||
| height: 100%; | height: 100%; | ||||
| } | } | ||||
| .pro-router-wrap > div > div { | .pro-router-wrap > div > div { | ||||
| border: 1px solid #eee; | |||||
| border-radius: 4px; | |||||
| border: 1px solid #d9d9d9; | |||||
| border-radius: 1px; | |||||
| } | } | ||||
| .pro-router-wrap > div .title-wrap { | .pro-router-wrap > div .title-wrap { | ||||
| padding: 15px; | padding: 15px; | ||||
| @@ -1261,7 +1259,7 @@ export default { | |||||
| .pro-router-wrap > div .title-wrap .title { | .pro-router-wrap > div .title-wrap .title { | ||||
| float: left; | float: left; | ||||
| font-weight: bold; | font-weight: bold; | ||||
| font-size: 16px; | |||||
| font-size: 18px; | |||||
| } | } | ||||
| .pro-router-wrap > div .title-wrap .tip-icon { | .pro-router-wrap > div .title-wrap .tip-icon { | ||||
| float: right; | float: right; | ||||
| @@ -1297,7 +1295,7 @@ export default { | |||||
| color: #c0c4cc; | color: #c0c4cc; | ||||
| } | } | ||||
| .pro-router-wrap > div .title-wrap::after { | .pro-router-wrap > div .title-wrap::after { | ||||
| content: ""; | |||||
| content: ''; | |||||
| clear: both; | clear: both; | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| @@ -1326,7 +1324,7 @@ export default { | |||||
| padding-right: 15px; | padding-right: 15px; | ||||
| } | } | ||||
| .pro-router-wrap .pro-router-left .step-trace { | .pro-router-wrap .pro-router-left .step-trace { | ||||
| height: 45%; | |||||
| height: calc(100% - 275px); | |||||
| margin-bottom: 15px; | margin-bottom: 15px; | ||||
| } | } | ||||
| .pro-router-wrap .pro-router-left .step-trace .trace-container { | .pro-router-wrap .pro-router-left .step-trace .trace-container { | ||||
| @@ -1350,11 +1348,11 @@ export default { | |||||
| overflow: visible; | overflow: visible; | ||||
| } | } | ||||
| .pro-router-wrap .pro-router-left .minddata { | .pro-router-wrap .pro-router-left .minddata { | ||||
| height: calc(55% - 15px); | |||||
| height: 260px; | |||||
| } | } | ||||
| .pro-router-wrap .pro-router-left .minddata .pipeline-container { | .pro-router-wrap .pro-router-left .minddata .pipeline-container { | ||||
| width: 100%; | width: 100%; | ||||
| padding: 20px 20px; | |||||
| padding: 0 20px; | |||||
| height: calc(100% - 52px); | height: calc(100% - 52px); | ||||
| display: flex; | display: flex; | ||||
| font-size: 0; | font-size: 0; | ||||
| @@ -1429,14 +1427,9 @@ export default { | |||||
| white-space: nowrap; | white-space: nowrap; | ||||
| overflow: visible; | overflow: visible; | ||||
| width: 100%; | width: 100%; | ||||
| min-width: 100px; | |||||
| text-align: center; | text-align: center; | ||||
| } | |||||
| .pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description .line { | |||||
| width: 1px; | |||||
| height: 40px; | |||||
| margin: 20px 0; | |||||
| border-left: 1px solid #979797; | |||||
| display: inline-block; | |||||
| margin-top: 30px; | |||||
| } | } | ||||
| .pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description .item { | .pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description .item { | ||||
| font-size: 12px; | font-size: 12px; | ||||
| @@ -1452,7 +1445,7 @@ export default { | |||||
| width: 400px; | width: 400px; | ||||
| } | } | ||||
| .pro-router-wrap .pro-router-right .op-time-consume { | .pro-router-wrap .pro-router-right .op-time-consume { | ||||
| height: calc(60% - 15px); | |||||
| height: calc(100% - 275px); | |||||
| margin-bottom: 15px; | margin-bottom: 15px; | ||||
| } | } | ||||
| .pro-router-wrap .pro-router-right .op-time-consume .time-list { | .pro-router-wrap .pro-router-right .op-time-consume .time-list { | ||||
| @@ -1506,7 +1499,7 @@ export default { | |||||
| height: 25px; | height: 25px; | ||||
| } | } | ||||
| .pro-router-wrap .pro-router-right .time-line { | .pro-router-wrap .pro-router-right .time-line { | ||||
| height: 40%; | |||||
| height: 260px; | |||||
| } | } | ||||
| .pro-router-wrap .pro-router-right .time-line .timeline-info { | .pro-router-wrap .pro-router-right .time-line .timeline-info { | ||||
| width: 100%; | width: 100%; | ||||
+ 124
- 27
mindinsight/ui/src/views/profiling-gpu/profiling.vue
View File
| @@ -15,15 +15,20 @@ limitations under the License. | |||||
| --> | --> | ||||
| <template> | <template> | ||||
| <div class="prof-wrap"> | <div class="prof-wrap"> | ||||
| <div class="prof-head"> | |||||
| <span class="cl-title-left">{{$t('summaryManage.viewProfiler')}}</span> | |||||
| <div class="path-message"> | |||||
| <span>{{$t('symbols.leftbracket')}}</span> | |||||
| <span>{{$t('trainingDashboard.summaryDirPath')}}</span> | |||||
| <span>{{summaryPath}}</span> | |||||
| <span>{{$t('symbols.rightbracket')}}</span> | |||||
| </div> | |||||
| </div> | |||||
| <div class="prof-content"> | <div class="prof-content"> | ||||
| <div class="prof-content-left" | <div class="prof-content-left" | ||||
| :class="{collapse:collapse}"> | :class="{collapse:collapse}"> | ||||
| <div class="helper" | <div class="helper" | ||||
| v-show="!collapse"> | v-show="!collapse"> | ||||
| <div class="summary-path"> | |||||
| {{$t('trainingDashboard.summaryDirPath')}} | |||||
| <span>{{ summaryPath}}</span> | |||||
| </div> | |||||
| <div class="cur-card"> | <div class="cur-card"> | ||||
| <label>{{$t('profiling.curCard')}}</label> | <label>{{$t('profiling.curCard')}}</label> | ||||
| <el-select v-model="curDashboardInfo.curCardNum" | <el-select v-model="curDashboardInfo.curCardNum" | ||||
| @@ -50,10 +55,26 @@ limitations under the License. | |||||
| </div> | </div> | ||||
| <div class="prof-content-right" | <div class="prof-content-right" | ||||
| :class="{collapse:collapse}"> | :class="{collapse:collapse}"> | ||||
| <router-view></router-view> | |||||
| <div class="tab-container" | |||||
| v-show="$route.path === '/profiling-gpu/profiling-dashboard' | |||||
| || $route.path === '/profiling-gpu/resource-utilization'"> | |||||
| <el-tabs v-model="tabData.activeName" | |||||
| @tab-click="paneChange"> | |||||
| <el-tab-pane v-for="pane in tabData.tabPanes" | |||||
| :key="pane.name" | |||||
| :label="pane.label" | |||||
| :name="pane.name"></el-tab-pane> | |||||
| </el-tabs> | |||||
| </div> | |||||
| <div class="router-container" | |||||
| :class="$route.path === '/profiling-gpu/profiling-dashboard' | |||||
| || $route.path === '/profiling-gpu/resource-utilization'?'dashboard':'detail'"> | |||||
| <router-view></router-view> | |||||
| </div> | |||||
| <div class="close" | <div class="close" | ||||
| @click="backToDdashboard" | @click="backToDdashboard" | ||||
| v-if="$route.path !== '/profiling-gpu/profiling-dashboard'"> | |||||
| v-if="$route.path !== '/profiling-gpu/profiling-dashboard' | |||||
| && $route.path !== '/profiling-gpu/resource-utilization'"> | |||||
| <img src="@/assets/images/close-page.png"> | <img src="@/assets/images/close-page.png"> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -84,10 +105,27 @@ export default { | |||||
| curCardNum: null, | curCardNum: null, | ||||
| query: {}, | query: {}, | ||||
| }, | }, | ||||
| tabData: { | |||||
| activeName: '0', | |||||
| tabPanes: [ | |||||
| { | |||||
| name: '0', | |||||
| label: this.$t('profiling.trainingPerformance'), | |||||
| }, | |||||
| { | |||||
| name: '1', | |||||
| label: this.$t('profiling.resourceUtilization'), | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| }; | }; | ||||
| }, | }, | ||||
| watch: {}, | watch: {}, | ||||
| mounted() { | mounted() { | ||||
| if ( | |||||
| this.$route.path === 'resource-utilization') { | |||||
| this.tabData.activeName = this.tabData.tabPanes[1].name; | |||||
| } | |||||
| this.$nextTick(() => { | this.$nextTick(() => { | ||||
| this.init(); | this.init(); | ||||
| }); | }); | ||||
| @@ -101,12 +139,15 @@ export default { | |||||
| this.curDashboardInfo.query.id = this.$route.query.id; | this.curDashboardInfo.query.id = this.$route.query.id; | ||||
| this.curDashboardInfo.query.dir = this.$route.query.dir; | this.curDashboardInfo.query.dir = this.$route.query.dir; | ||||
| this.curDashboardInfo.query.path = this.$route.query.path; | this.curDashboardInfo.query.path = this.$route.query.path; | ||||
| this.summaryPath = decodeURIComponent( this.$route.query.id); | |||||
| this.tabData.activeName = | |||||
| this.$route.query.activePane || this.tabData.tabPanes[0].name; | |||||
| this.summaryPath = decodeURIComponent(this.$route.query.id); | |||||
| this.getDeviceList(); | this.getDeviceList(); | ||||
| } else { | } else { | ||||
| this.curDashboardInfo.query.trainingJobId = ''; | this.curDashboardInfo.query.trainingJobId = ''; | ||||
| this.curDashboardInfo.query.dir = ''; | this.curDashboardInfo.query.dir = ''; | ||||
| this.curDashboardInfo.query.path = ''; | this.curDashboardInfo.query.path = ''; | ||||
| this.tabData.activeName = this.tabData.tabPanes[0].name; | |||||
| this.$message.error(this.$t('trainingDashboard.invalidId')); | this.$message.error(this.$t('trainingDashboard.invalidId')); | ||||
| } | } | ||||
| }, | }, | ||||
| @@ -298,12 +339,18 @@ export default { | |||||
| * Router back to profiling-dashboard | * Router back to profiling-dashboard | ||||
| */ | */ | ||||
| backToDdashboard() { | backToDdashboard() { | ||||
| let path = '/profiling-gpu/profiling-dashboard'; | |||||
| if (this.tabData.activeName === this.tabData.tabPanes[1].name) { | |||||
| path = '/profiling-gpu/resource-utilization'; | |||||
| } | |||||
| this.$router.push({ | this.$router.push({ | ||||
| path: '/profiling-gpu/profiling-dashboard', | |||||
| path: path, | |||||
| query: { | query: { | ||||
| dir: this.curDashboardInfo.query.dir, | dir: this.curDashboardInfo.query.dir, | ||||
| id: this.curDashboardInfo.query.id, | id: this.curDashboardInfo.query.id, | ||||
| path: this.curDashboardInfo.query.path, | path: this.curDashboardInfo.query.path, | ||||
| activePane: this.tabData.activeName, | |||||
| cardNum: this.curDashboardInfo.curCardNum, | |||||
| }, | }, | ||||
| }); | }); | ||||
| }, | }, | ||||
| @@ -311,6 +358,35 @@ export default { | |||||
| this.collapse = !this.collapse; | this.collapse = !this.collapse; | ||||
| this.$bus.$emit('collapse'); | this.$bus.$emit('collapse'); | ||||
| }, | }, | ||||
| /** | |||||
| * Tab button click | |||||
| * @param {Object} tabItem Tab | |||||
| */ | |||||
| paneChange(tabItem) { | |||||
| if (tabItem && tabItem.name) { | |||||
| let path = ''; | |||||
| switch (tabItem.name) { | |||||
| case this.tabData.tabPanes[0].name: | |||||
| path = '/profiling-gpu/profiling-dashboard'; | |||||
| break; | |||||
| case this.tabData.tabPanes[1].name: | |||||
| path = '/profiling-gpu/resource-utilization'; | |||||
| break; | |||||
| } | |||||
| if (path) { | |||||
| this.$router.push({ | |||||
| path: path, | |||||
| query: { | |||||
| dir: this.curDashboardInfo.query.dir, | |||||
| id: this.curDashboardInfo.query.id, | |||||
| path: this.curDashboardInfo.query.path, | |||||
| activePane: this.tabData.activeName, | |||||
| cardNum: this.curDashboardInfo.curCardNum, | |||||
| }, | |||||
| }); | |||||
| } | |||||
| } | |||||
| }, | |||||
| }, | }, | ||||
| destroyed() { | destroyed() { | ||||
| this.$bus.$off('collapse'); | this.$bus.$off('collapse'); | ||||
| @@ -322,9 +398,20 @@ export default { | |||||
| height: 100%; | height: 100%; | ||||
| background: #fff; | background: #fff; | ||||
| } | } | ||||
| .prof-wrap .prof-head { | |||||
| height: 50px; | |||||
| line-height: 50px; | |||||
| display: inline-block; | |||||
| } | |||||
| .prof-wrap .prof-head .path-message { | |||||
| display: inline-block; | |||||
| line-height: 20px; | |||||
| padding: 18px 0; | |||||
| font-weight: bold; | |||||
| } | |||||
| .prof-wrap .prof-content { | .prof-wrap .prof-content { | ||||
| height: 100%; | |||||
| padding: 24px 24px 24px 0; | |||||
| height: calc(100% - 50px); | |||||
| padding: 0 24px 24px 0; | |||||
| } | } | ||||
| .prof-wrap .prof-content > div { | .prof-wrap .prof-content > div { | ||||
| float: left; | float: left; | ||||
| @@ -347,25 +434,12 @@ export default { | |||||
| background: #edf0f5; | background: #edf0f5; | ||||
| word-wrap: break-word; | word-wrap: break-word; | ||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left .helper .summary-path { | |||||
| line-height: 24px; | |||||
| font-size: 14px; | |||||
| overflow: hidden; | |||||
| font-weight: bold; | |||||
| padding-bottom: 10px; | |||||
| word-break: break-all; | |||||
| text-overflow: -o-ellipsis-lastline; | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| display: -webkit-box; | |||||
| -webkit-line-clamp: 4; | |||||
| -webkit-box-orient: vertical; | |||||
| } | |||||
| .prof-wrap .prof-content .prof-content-left .helper .nowrap-style { | .prof-wrap .prof-content .prof-content-left .helper .nowrap-style { | ||||
| white-space: nowrap; | white-space: nowrap; | ||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left .helper .cur-card { | .prof-wrap .prof-content .prof-content-left .helper .cur-card { | ||||
| margin-bottom: 32px; | |||||
| padding-bottom: 20px; | |||||
| border-bottom: 1px solid #d9d9d9; | |||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left .helper .cur-card .card-select { | .prof-wrap .prof-content .prof-content-left .helper .cur-card .card-select { | ||||
| width: calc(100% - 120px); | width: calc(100% - 120px); | ||||
| @@ -374,9 +448,9 @@ export default { | |||||
| margin-right: 14px; | margin-right: 14px; | ||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left .helper .helper-title { | .prof-wrap .prof-content .prof-content-left .helper .helper-title { | ||||
| font-size: 20px; | |||||
| font-size: 18px; | |||||
| font-weight: bold; | font-weight: bold; | ||||
| margin-bottom: 32px; | |||||
| margin: 24px 0; | |||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left .helper .helper-title .el-icon-rank { | .prof-wrap .prof-content .prof-content-left .helper .helper-title .el-icon-rank { | ||||
| float: right; | float: right; | ||||
| @@ -399,6 +473,10 @@ export default { | |||||
| margin-bottom: 20px; | margin-bottom: 20px; | ||||
| font-size: 16px; | font-size: 16px; | ||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left .helper .link-title { | |||||
| cursor: pointer; | |||||
| } | |||||
| .prof-wrap .prof-content .prof-content-left .helper .container-bottom { | .prof-wrap .prof-content .prof-content-left .helper .container-bottom { | ||||
| margin-bottom: 16px; | margin-bottom: 16px; | ||||
| } | } | ||||
| @@ -450,6 +528,25 @@ export default { | |||||
| transition: width 0.2s; | transition: width 0.2s; | ||||
| position: relative; | position: relative; | ||||
| } | } | ||||
| .prof-content-right .tab-container { | |||||
| width: 100%; | |||||
| padding-bottom: 5px; | |||||
| } | |||||
| .prof-content-right .tab-container .el-tabs__item { | |||||
| font-size: 14px; | |||||
| line-height: 14px; | |||||
| height: 27px; | |||||
| } | |||||
| .prof-content-right .tab-container .el-tabs__item.is-active { | |||||
| color: #00a5a7; | |||||
| font-weight: bold; | |||||
| } | |||||
| .prof-content-right .router-container.detail { | |||||
| height: 100%; | |||||
| } | |||||
| .prof-content-right .router-container.dashboard { | |||||
| height: calc(100% - 46px); | |||||
| } | |||||
| .prof-wrap .prof-content .prof-content-right .close { | .prof-wrap .prof-content .prof-content-right .close { | ||||
| position: absolute; | position: absolute; | ||||
| right: 0; | right: 0; | ||||
+ 473
- 0
mindinsight/ui/src/views/profiling-gpu/resource-utilization.vue
View File
| @@ -0,0 +1,473 @@ | |||||
| <!-- | |||||
| Copyright 2021 Huawei Technologies Co., Ltd.All Rights Reserved. | |||||
| Licensed under the Apache License, Version 2.0 (the "License"); | |||||
| you may not use this file except in compliance with the License. | |||||
| You may obtain a copy of the License at | |||||
| http://www.apache.org/licenses/LICENSE-2.0 | |||||
| Unless required by applicable law or agreed to in writing, software | |||||
| distributed under the License is distributed on an "AS IS" BASIS, | |||||
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |||||
| See the License for the specific language governing permissions and | |||||
| limitations under the License. | |||||
| --> | |||||
| <template> | |||||
| <div class="cl-resource-content"> | |||||
| <div class="dashboard-item"> | |||||
| <div class="title-item"> | |||||
| <div class="title-text"> | |||||
| {{$t('profiling.structuralCpuUtil')}} | |||||
| </div> | |||||
| <div class="detail-link" | |||||
| :class="{disabled:!cpuInfo.initOver || cpuInfo.noData}"> | |||||
| <button :disabled="!cpuInfo.initOver || cpuInfo.noData" | |||||
| @click="jumpToCpuDetail"> | |||||
| {{$t('profiling.viewDetail')}} | |||||
| <i class="el-icon-d-arrow-right"></i> | |||||
| </button> | |||||
| </div> | |||||
| </div> | |||||
| <div class="content-item"> | |||||
| <div class="cpu-info" v-if="!cpuInfo.noData"> | |||||
| <div class="cpu-chart" | |||||
| id="deviceCpuChart" | |||||
| ref="deviceCpuChart"></div> | |||||
| <div class="cpu-chart-info"> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.logicCores')}}</span><span>{{deviceCpuChart.logicCores}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgUserUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgUser)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSysUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgSystem)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgIOUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgIO)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgIdleUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgFree)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgWaitingProcess')}}</span><span>{{deviceCpuChart.cpuAvgProcess}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSwitchCount')}}</span><span>{{deviceCpuChart.cpuAvgSwitch}}</span> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="noData-content" v-else> | |||||
| <img :src="require('@/assets/images/nodata.png')" alt="" /> | |||||
| <p>{{cpuInfo.initOver?$t("public.noData"):$t("public.dataLoading")}}</p> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import RequestService from '../../services/request-service'; | |||||
| import echarts from 'echarts'; | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| // ------------------------common-------------------- | |||||
| queryData: { | |||||
| dir: '', | |||||
| id: '', | |||||
| path: '', | |||||
| activePane: '', | |||||
| }, | |||||
| summaryPath: '', | |||||
| curCardNum: '', | |||||
| pageResizeTimer: null, // Timer for changing the window size | |||||
| firstInit: true, // First init of page | |||||
| // ------------------------cpu----------------------- | |||||
| deviceCpuChart: { | |||||
| id: 'deviceCpuChart', | |||||
| chartDom: null, | |||||
| option: { | |||||
| tooltip: { | |||||
| trigger: 'axis', | |||||
| formatter: null, | |||||
| confine: true, | |||||
| }, | |||||
| legend: { | |||||
| right: 70, | |||||
| top: 8, | |||||
| data: [], | |||||
| }, | |||||
| xAxis: { | |||||
| name: '', | |||||
| data: [], | |||||
| }, | |||||
| yAxis: { | |||||
| name: this.$t('profiling.utilizationTitle'), | |||||
| type: 'value', | |||||
| }, | |||||
| dataZoom: [ | |||||
| { | |||||
| start: 0, | |||||
| end: 100, | |||||
| bottom: 0, | |||||
| }, | |||||
| { | |||||
| start: 0, | |||||
| end: 100, | |||||
| type: 'inside', | |||||
| bottom: 0, | |||||
| }, | |||||
| ], | |||||
| grid: { | |||||
| left: 40, | |||||
| top: 40, | |||||
| right: 70, | |||||
| bottom: 60, | |||||
| }, | |||||
| series: [], | |||||
| }, | |||||
| logicCores: 0, | |||||
| cpuAvgUser: 0, | |||||
| cpuAvgSystem: 0, | |||||
| cpuAvgIO: 0, | |||||
| cpuAvgFree: 0, | |||||
| cpuAvgProcess: 0, | |||||
| cpuAvgSwitch: 0, | |||||
| }, // The total data of device cpu info | |||||
| cpuInfo: { | |||||
| initOver: false, | |||||
| noData: true, | |||||
| stepArray: [], | |||||
| cpuInfoStr: { | |||||
| user_utilization: this.$t('profiling.userUtilization'), | |||||
| sys_utilization: this.$t('profiling.sysUtilization'), | |||||
| io_utilization: this.$t('profiling.ioUtilization'), | |||||
| idle_utilization: this.$t('profiling.idleUtilization'), | |||||
| }, | |||||
| samplingInterval: 0, | |||||
| }, | |||||
| }; | |||||
| }, | |||||
| watch: { | |||||
| // Listening card number | |||||
| '$parent.curDashboardInfo.curCardNum': { | |||||
| handler(newValue) { | |||||
| if (isNaN(newValue) || newValue === this.curCardNum || this.firstInit) { | |||||
| return; | |||||
| } | |||||
| this.curCardNum = newValue; | |||||
| this.noGraphicsDataFlag = false; | |||||
| this.graphicsInitOver = false; | |||||
| this.init(); | |||||
| }, | |||||
| deep: true, | |||||
| immediate: true, | |||||
| }, | |||||
| }, | |||||
| mounted() { | |||||
| window.addEventListener('resize', this.resizeCallback, false); | |||||
| this.$bus.$on('collapse', this.resizeCallback); | |||||
| this.queryData = { | |||||
| dir: this.$route.query.dir, | |||||
| id: this.$route.query.id, | |||||
| path: this.$route.query.path, | |||||
| activePane: this.$route.query.activePane, | |||||
| }; | |||||
| if ( | |||||
| this.$route.query && | |||||
| this.$route.query.path && | |||||
| !isNaN(this.$route.query.cardNum) | |||||
| ) { | |||||
| this.summaryPath = this.$route.query.path; | |||||
| this.curCardNum = this.$route.query.cardNum; | |||||
| this.init(); | |||||
| } | |||||
| this.firstInit = false; | |||||
| }, | |||||
| methods: { | |||||
| // ------------------common--------------------- | |||||
| init() { | |||||
| this.queryCpuInfo(); | |||||
| }, | |||||
| /** | |||||
| * Window resize | |||||
| */ | |||||
| resizeCallback() { | |||||
| if (this.pageResizeTimer) { | |||||
| clearTimeout(this.pageResizeTimer); | |||||
| this.pageResizeTimer = null; | |||||
| } | |||||
| this.pageResizeTimer = setTimeout(() => { | |||||
| if (this.deviceCpuChart.chartDom) { | |||||
| this.deviceCpuChart.chartDom.resize(); | |||||
| } | |||||
| }, 300); | |||||
| }, | |||||
| // ----------------cpu----------------------------------- | |||||
| /** | |||||
| * The logic of add percent sign | |||||
| * @param {number | string} number | |||||
| * @return {string} | |||||
| */ | |||||
| addPercentSign(number) { | |||||
| if (number === 0 || number === '0') { | |||||
| return '0'; | |||||
| } else { | |||||
| return `${number}%`; | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * Query cpu info | |||||
| */ | |||||
| queryCpuInfo( ) { | |||||
| const params = { | |||||
| params: { | |||||
| profile: this.queryData.dir, | |||||
| train_id: this.queryData.id, | |||||
| }, | |||||
| body: { | |||||
| device_id: this.curCardNum, | |||||
| filter_condition: {}, | |||||
| }, | |||||
| }; | |||||
| this.cpuInfo.noData = true; | |||||
| this.cpuInfo.initOver = false; | |||||
| RequestService.getCpuUtilization(params).then( | |||||
| (res) => { | |||||
| this.cpuInfo.initOver = true; | |||||
| if (res && res.data) { | |||||
| this.cpuInfo.noData = !res.data.step_total_num; | |||||
| this.cpuInfo.stepArray = res.data.step_info; | |||||
| this.samplingInterval = res.data.sampling_interval; | |||||
| this.deviceCpuChart.logicCores = res.data.cpu_processor_num; | |||||
| const deviceInfo = res.data.device_info; | |||||
| if (deviceInfo && this.samplingInterval) { | |||||
| this.initDeviceCpu(deviceInfo); | |||||
| } else { | |||||
| this.clearCpuChart(); | |||||
| this.cpuInfo.noData = true; | |||||
| } | |||||
| } else { | |||||
| this.clearCpuChart(); | |||||
| } | |||||
| }, | |||||
| () => { | |||||
| this.clearCpuChart(); | |||||
| this.cpuInfo.initOver = true; | |||||
| }, | |||||
| ); | |||||
| }, | |||||
| /** | |||||
| * clear cpu chart | |||||
| */ | |||||
| clearCpuChart() { | |||||
| if (this.deviceCpuChart.chartDom) { | |||||
| this.deviceCpuChart.chartDom.clear(); | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * format chart tip | |||||
| * @param {Object} params | |||||
| * @param {Array} stepArray | |||||
| * @return {String} | |||||
| */ | |||||
| formatCpuChartTip(params, stepArray) { | |||||
| const data = params; | |||||
| let str = ''; | |||||
| if (data && data.length) { | |||||
| const colorArray = [ | |||||
| '#c23531', | |||||
| '#2f4554', | |||||
| '#61a0a8', | |||||
| '#d48265', | |||||
| ]; | |||||
| const index = data[0].dataIndex; | |||||
| str += `step: ${stepArray[index]}`; | |||||
| data.forEach((item, index) => { | |||||
| str += `<br><span class="cpu-chart-tip" style="background-color:${colorArray[index]};"></span>` + | |||||
| `${item.seriesName}: ${item.data}`; | |||||
| }); | |||||
| str += `</div>`; | |||||
| } | |||||
| return str; | |||||
| }, | |||||
| /** | |||||
| * Init device cpu chart | |||||
| * @param {Object} deviceInfo | |||||
| */ | |||||
| initDeviceCpu(deviceInfo) { | |||||
| const series = []; | |||||
| const legend = []; | |||||
| Object.keys(this.cpuInfo.cpuInfoStr).forEach((val) => { | |||||
| const info = deviceInfo[val]; | |||||
| if (info && info.metrics) { | |||||
| const item = { | |||||
| type: 'line', | |||||
| name: this.cpuInfo.cpuInfoStr[val], | |||||
| data: info.metrics, | |||||
| showSymbol: false, | |||||
| }; | |||||
| series.push(item); | |||||
| legend.push(item.name); | |||||
| } | |||||
| }); | |||||
| this.deviceCpuChart.cpuAvgUser = deviceInfo.user_utilization.avg_value; | |||||
| this.deviceCpuChart.cpuAvgSystem = deviceInfo.sys_utilization.avg_value; | |||||
| this.deviceCpuChart.cpuAvgIO = deviceInfo.io_utilization.avg_value; | |||||
| this.deviceCpuChart.cpuAvgFree = deviceInfo.idle_utilization.avg_value; | |||||
| this.deviceCpuChart.cpuAvgProcess = deviceInfo.runable_processes.avg_value; | |||||
| this.deviceCpuChart.cpuAvgSwitch = deviceInfo.context_switch_count.avg_value; | |||||
| this.deviceCpuChart.option.series = series; | |||||
| this.deviceCpuChart.option.xAxis.name = `${this.$t('profiling.sampleInterval')}\n${ | |||||
| this.$t('symbols.leftbracket')}${this.samplingInterval}ms${this.$t('symbols.rightbracket')}`; | |||||
| this.deviceCpuChart.option.xAxis.data = deviceInfo[Object.keys(deviceInfo)[0]].metrics.map( | |||||
| (val, index) => index + 1, | |||||
| ); | |||||
| this.deviceCpuChart.option.legend.data = legend; | |||||
| this.deviceCpuChart.option.tooltip.formatter = (params) => { | |||||
| return this.formatCpuChartTip(params, this.cpuInfo.stepArray); | |||||
| }; | |||||
| this.$nextTick(() => { | |||||
| if (!this.deviceCpuChart.chartDom) { | |||||
| if (this.$refs.deviceCpuChart) { | |||||
| this.deviceCpuChart.chartDom = echarts.init(this.$refs.deviceCpuChart); | |||||
| } | |||||
| } | |||||
| this.deviceCpuChart.chartDom.setOption(this.deviceCpuChart.option); | |||||
| }); | |||||
| }, | |||||
| /** | |||||
| * Router to memory-detail | |||||
| */ | |||||
| jumpToCpuDetail() { | |||||
| if (this.$route.path !== '/profiling-gpu/cpu-detail') { | |||||
| this.$router.push({ | |||||
| path: '/profiling-gpu/cpu-detail', | |||||
| query: { | |||||
| dir: this.queryData.dir, | |||||
| id: this.queryData.id, | |||||
| cardNum: this.curCardNum, | |||||
| path: this.queryData.path, | |||||
| activePane: this.queryData.activePane, | |||||
| }, | |||||
| }); | |||||
| } | |||||
| }, | |||||
| }, | |||||
| destroyed() { | |||||
| // Remove the listener of window size change | |||||
| window.removeEventListener('resize', this.resizeCallback); | |||||
| // Remove timer | |||||
| if (this.pageResizeTimer) { | |||||
| clearTimeout(this.pageResizeTimer); | |||||
| this.pageResizeTimer = null; | |||||
| } | |||||
| // Remove bus | |||||
| this.$bus.$off('collapse'); | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style> | |||||
| .cl-resource-content { | |||||
| height: 100%; | |||||
| } | |||||
| .cl-resource-content .dashboard-item { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| padding: 15px; | |||||
| border: solid 1px #d9d9d9; | |||||
| border-radius: 4px; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .title-item { | |||||
| display: flex; | |||||
| height: 24px; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .title-item .title-text { | |||||
| flex: 1; | |||||
| font-size: 18px; | |||||
| font-weight: bold; | |||||
| line-height: 24px; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .title-item .detail-link { | |||||
| cursor: pointer; | |||||
| font-size: 12px; | |||||
| height: 18px; | |||||
| line-height: 12px; | |||||
| padding-top: 2px; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .title-item .detail-link a { | |||||
| color: #00a5a7; | |||||
| padding-right: 6px; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .title-item .detail-link button { | |||||
| color: #00a5a7; | |||||
| border: none; | |||||
| background-color: #fff; | |||||
| cursor: pointer; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .title-item .detail-link.disabled button { | |||||
| color: #c0c4cc; | |||||
| cursor: not-allowed; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .content-item { | |||||
| height: calc(100% - 38px); | |||||
| margin-top: 20px; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .content-item .dashboard-chart-content { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| .cl-resource-content .margin-item { | |||||
| margin-top: 20px; | |||||
| } | |||||
| .cl-resource-content .noData-content { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| flex-direction: column; | |||||
| } | |||||
| .cl-resource-content .noData-content p, | |||||
| .cl-resource-content .noData-content .noData-text { | |||||
| font-size: 16px; | |||||
| } | |||||
| .content-item .cpu-info { | |||||
| display: grid; | |||||
| grid-template-columns: 1fr 300px; | |||||
| height: 100%; | |||||
| } | |||||
| .content-item .cpu-info .cpu-chart { | |||||
| height: 100%; | |||||
| width: 100% | |||||
| } | |||||
| .content-item .cpu-info .cpu-chart-info { | |||||
| height: 100%; | |||||
| width: 100%; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| padding-left: 20px; | |||||
| background-color: #f1f1f1; | |||||
| } | |||||
| .content-item .cpu-chart-info .info-title { | |||||
| font-size: 14px; | |||||
| font-weight: bold; | |||||
| line-height: 30px; | |||||
| } | |||||
| .content-item .cpu-chart-info .info-line { | |||||
| line-height: 30px; | |||||
| } | |||||
| .cpu-chart-tip { | |||||
| display: inline-block; | |||||
| margin-right: 5px; | |||||
| border-radius: 10px; | |||||
| width: 10px; | |||||
| height: 10px; | |||||
| } | |||||
| </style> | |||||
mindinsight/ui/src/mixins/cpu-utilization.vue → mindinsight/ui/src/views/profiling/cpu-detail.vue
View File
| @@ -13,16 +13,141 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |||||
| See the License for the specific language governing permissions and | See the License for the specific language governing permissions and | ||||
| limitations under the License. | limitations under the License. | ||||
| --> | --> | ||||
| <template> | |||||
| <div class="data-process-wrap"> | |||||
| <div class="title">{{$t('profiling.cpuUtilization')}}</div> | |||||
| <div class="cpu-info" v-if="!cpuInfo.noData"> | |||||
| <div class="step-filter"> | |||||
| <label>{{cpuInfo.stepTip}}</label> | |||||
| <label>{{$t('profiling.startStep')}}</label> | |||||
| <el-input class="step-input" | |||||
| v-model.number="cpuInfo.startStep.showStep"></el-input> | |||||
| <label>{{$t('profiling.endStep')}}</label> | |||||
| <el-input class="step-input" | |||||
| v-model.number="cpuInfo.endStep.showStep"></el-input> | |||||
| <el-button @click="viewStepFilter">{{$t('profiling.filterStep')}}</el-button> | |||||
| <el-button @click="resetStepFilter">{{$t('profiling.resetStep')}}</el-button> | |||||
| </div> | |||||
| <div class="cpu-detail"> | |||||
| <div class="cpu-detail-item"> | |||||
| <div class="detail-item-title">{{$t('profiling.structuralCpuUtil')}}</div> | |||||
| <div class="detail-item"> | |||||
| <div class="cpu-chart" | |||||
| id="deviceCpuChart" | |||||
| ref="deviceCpuChart"></div> | |||||
| <div class="cpu-chart-info"> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.logicCores')}}</span><span>{{deviceCpuChart.logicCores}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgUserUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgUser)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSysUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgSystem)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgIOUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgIO)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgIdleUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgFree)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgWaitingProcess')}}</span><span>{{deviceCpuChart.cpuAvgProcess}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSwitchCount')}}</span><span>{{deviceCpuChart.cpuAvgSwitch}}</span> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="cpu-detail-item cpu-detail-item-top"> | |||||
| <div class="detail-item-title">{{$t('profiling.processCpuUtil')}}</div> | |||||
| <div class="detail-item"> | |||||
| <div class="cpu-chart" | |||||
| id="processCpuChart" | |||||
| ref="processCpuChart"> | |||||
| </div> | |||||
| <div class="cpu-chart-info"> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgUserUtilization')}}</span> | |||||
| <span>{{addPercentSign(processCpuChart.cpuAvgUser)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSysUtilization')}}</span> | |||||
| <span>{{addPercentSign(processCpuChart.cpuAvgSystem)}}</span> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="cpu-detail-item cpu-detail-item-top"> | |||||
| <div class="detail-item-title">{{$t('profiling.operatorCpuUtil')}}</div> | |||||
| <div class="detail-item-graph" | |||||
| id="operator-graph"></div> | |||||
| <div class="detail-item"> | |||||
| <div class="cpu-chart" | |||||
| id="operatorCpuChart" | |||||
| ref="operatorCpuChart"> | |||||
| </div> | |||||
| <div class="cpu-chart-info"> | |||||
| <div class="info-title"> | |||||
| {{$t('profiling.allOperators')}} | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgUserUtilization')}}</span> | |||||
| <span>{{addPercentSign(operatorCpuChart.cpuAvgTotalUser)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSysUtilization')}}</span> | |||||
| <span>{{addPercentSign(operatorCpuChart.cpuAvgTotalSystem)}}</span> | |||||
| </div> | |||||
| <div class="info-title"> | |||||
| {{$t('profiling.currentOperator')}} | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgUserUtilization')}}</span> | |||||
| <span>{{addPercentSign(operatorCpuChart.cpuAvgOpUser)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSysUtilization')}}</span> | |||||
| <span>{{addPercentSign(operatorCpuChart.cpuAvgOpSystem)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.workersNum')}}{{$t('symbols.colon')}}</span> | |||||
| <span>{{operatorCpuChart.processNumber}}</span> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="image-noData" v-else> | |||||
| <div> | |||||
| <img :src="require('@/assets/images/nodata.png')" | |||||
| alt="" /> | |||||
| </div> | |||||
| <p>{{cpuInfo.initOver?$t("public.noData"):$t("public.dataLoading")}}</p> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | <script> | ||||
| import echarts from 'echarts'; | import echarts from 'echarts'; | ||||
| import {select, selectAll} from 'd3'; | |||||
| const d3 = {select, selectAll}; | |||||
| import RequestService from '../../services/request-service'; | |||||
| import initDot from '../../mixins/init-dot'; | |||||
| import {select, selectAll, zoom} from 'd3'; | |||||
| import 'd3-graphviz'; | import 'd3-graphviz'; | ||||
| import RequestService from '@/services/request-service'; | |||||
| import initDot from '../mixins/init-dot'; | |||||
| const d3 = {select, selectAll, zoom}; | |||||
| export default { | export default { | ||||
| props: {}, | |||||
| data() { | data() { | ||||
| return { | return { | ||||
| dir: '', // Profiler path | |||||
| currentCard: '', // Current card number | |||||
| trainId: '', | |||||
| chartGrid: { | chartGrid: { | ||||
| grid: { | grid: { | ||||
| left: 40, | left: 40, | ||||
| @@ -165,14 +290,93 @@ export default { | |||||
| prevGraph: undefined, // The previous clicked graph | prevGraph: undefined, // The previous clicked graph | ||||
| operatorCPUList: [], // The list of operator cpu info | operatorCPUList: [], // The list of operator cpu info | ||||
| selIndex: null, // The index of selected graph node, to get right operator cpu info | selIndex: null, // The index of selected graph node, to get right operator cpu info | ||||
| resizeDebounce: null, // The function of resize callback | |||||
| }; | }; | ||||
| }, | }, | ||||
| watch: { | |||||
| '$parent.curDashboardInfo.curCardNum': { | |||||
| handler(newValue) { | |||||
| if (newValue || newValue === 0) { | |||||
| this.dir = this.$route.query.dir; | |||||
| this.trainId = this.$route.query.id; | |||||
| this.currentCard = newValue; | |||||
| if (this.trainId) { | |||||
| document.title = `${decodeURIComponent(this.trainId)}` | |||||
| + `-${this.$t('profiling.cpuUtilization')}-MindInsight`; | |||||
| } else { | |||||
| document.title = `${this.$t('profiling.cpuUtilization')}-MindInsight`; | |||||
| } | |||||
| this.cpuInfo.startStep.showStep = ''; | |||||
| this.cpuInfo.startStep.step = ''; | |||||
| this.cpuInfo.endStep.showStep = ''; | |||||
| this.cpuInfo.endStep.step = ''; | |||||
| this.queryCpuInfo(false, true); | |||||
| } | |||||
| }, | |||||
| deep: true, | |||||
| immediate: true, | |||||
| }, | |||||
| }, | |||||
| computed: {}, | |||||
| created() { | created() { | ||||
| Object.assign(this.deviceCpuChart.option, this.chartGrid, this.chartDataZoom); | Object.assign(this.deviceCpuChart.option, this.chartGrid, this.chartDataZoom); | ||||
| Object.assign(this.processCpuChart.option, this.chartGrid, this.chartDataZoom); | Object.assign(this.processCpuChart.option, this.chartGrid, this.chartDataZoom); | ||||
| Object.assign(this.operatorCpuChart.option, this.chartGrid, this.chartDataZoom); | Object.assign(this.operatorCpuChart.option, this.chartGrid, this.chartDataZoom); | ||||
| }, | }, | ||||
| mounted() { | |||||
| this.resizeDebounce = this.debounce(this.resizeCallback, 200); | |||||
| window.addEventListener('resize', this.resizeDebounce, false); | |||||
| setTimeout(() => { | |||||
| this.$bus.$on('collapse', this.debounce(this.resizeCallback, 200)); | |||||
| }, 500); | |||||
| }, | |||||
| methods: { | methods: { | ||||
| /** | |||||
| * The logic of add percent sign | |||||
| * @param {number | string} number | |||||
| * @return {string} | |||||
| */ | |||||
| addPercentSign(number) { | |||||
| if (number === 0 || number === '0') { | |||||
| return '0'; | |||||
| } else { | |||||
| return `${number}%`; | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * Anti-shake | |||||
| * @param { Function } fn callback function | |||||
| * @param { Number } delay delay time | |||||
| * @return { Function } | |||||
| */ | |||||
| debounce(fn, delay) { | |||||
| let timer = null; | |||||
| return function() { | |||||
| if (timer) { | |||||
| clearTimeout(timer); | |||||
| } | |||||
| timer = setTimeout(fn, delay); | |||||
| }; | |||||
| }, | |||||
| init() { | |||||
| this.queryCpuInfo(); | |||||
| }, | |||||
| /** | |||||
| * Resize callback function | |||||
| */ | |||||
| resizeCallback() { | |||||
| const chartArr = [ | |||||
| 'deviceCpuChart', | |||||
| 'processCpuChart', | |||||
| 'operatorCpuChart', | |||||
| ]; | |||||
| chartArr.forEach((val) => { | |||||
| if (this[val].chartDom) { | |||||
| this[val].chartDom.resize(); | |||||
| } | |||||
| }); | |||||
| }, | |||||
| /** | /** | ||||
| * The logic of query and render graph info of cpu | * The logic of query and render graph info of cpu | ||||
| * @return {Promise} | * @return {Promise} | ||||
| @@ -345,9 +549,9 @@ export default { | |||||
| }, | }, | ||||
| /** | /** | ||||
| * Query average rate info | |||||
| * @param {Boolean} isFilter wherter filter step | |||||
| * @param {Boolean} isInitGraph wherter init graph | |||||
| * Query cpu info | |||||
| * @param {Boolean} isFilter whether filter step | |||||
| * @param {Boolean} isInitGraph whether init graph | |||||
| */ | */ | ||||
| queryCpuInfo(isFilter, isInitGraph) { | queryCpuInfo(isFilter, isInitGraph) { | ||||
| this.cpuInfo.deviceId = this.currentCard; | this.cpuInfo.deviceId = this.currentCard; | ||||
| @@ -373,8 +577,8 @@ export default { | |||||
| this.cpuInfo.noData = !res.data.step_total_num; | this.cpuInfo.noData = !res.data.step_total_num; | ||||
| this.cpuInfo.step = res.data.step_total_num; | this.cpuInfo.step = res.data.step_total_num; | ||||
| this.cpuInfo.stepArray = res.data.step_info; | this.cpuInfo.stepArray = res.data.step_info; | ||||
| this.cpuInfo.stepTip = this.$t('profiling.cpuStepTip', {max: `${this.cpuInfo.step}`}); | |||||
| this.cpuInfo.cpuStepInputTip = this.$t('profiling.cpuStepInputTip', {max: `${this.cpuInfo.step}`}); | |||||
| this.cpuInfo.stepTip = this.$t('profiling.cpuStepTip', {max: this.cpuInfo.step}); | |||||
| this.cpuInfo.cpuStepInputTip = this.$t('profiling.cpuStepInputTip', {max: this.cpuInfo.step}); | |||||
| this.samplingInterval = res.data.sampling_interval; | this.samplingInterval = res.data.sampling_interval; | ||||
| this.deviceCpuChart.logicCores = res.data.cpu_processor_num; | this.deviceCpuChart.logicCores = res.data.cpu_processor_num; | ||||
| const deviceInfo = res.data.device_info; | const deviceInfo = res.data.device_info; | ||||
| @@ -396,6 +600,7 @@ export default { | |||||
| } | } | ||||
| } else { | } else { | ||||
| this.clearCpuChart(); | this.clearCpuChart(); | ||||
| this.cpuInfo.noData = true; | |||||
| } | } | ||||
| } else { | } else { | ||||
| this.clearCpuChart(); | this.clearCpuChart(); | ||||
| @@ -404,8 +609,8 @@ export default { | |||||
| }, | }, | ||||
| () => { | () => { | ||||
| this.clearCpuChart(); | this.clearCpuChart(); | ||||
| this.cpuInfo.initOver = true; | |||||
| this.cpuInfo.noData = true; | this.cpuInfo.noData = true; | ||||
| this.cpuInfo.initOver = true; | |||||
| }, | }, | ||||
| ); | ); | ||||
| }, | }, | ||||
| @@ -427,9 +632,10 @@ export default { | |||||
| * filter step to view cpu info | * filter step to view cpu info | ||||
| */ | */ | ||||
| viewStepFilter() { | viewStepFilter() { | ||||
| const stepValidation = new RegExp('^[0-9]*[1-9][0-9]*$'); | |||||
| if ( | if ( | ||||
| /^[0-9]*[1-9][0-9]*$/.test(this.cpuInfo.startStep.showStep) && | |||||
| /^[0-9]*[1-9][0-9]*$/.test(this.cpuInfo.endStep.showStep) && | |||||
| stepValidation.test(this.cpuInfo.startStep.showStep) && | |||||
| stepValidation.test(this.cpuInfo.endStep.showStep) && | |||||
| this.cpuInfo.startStep.showStep <= this.cpuInfo.endStep.showStep && | this.cpuInfo.startStep.showStep <= this.cpuInfo.endStep.showStep && | ||||
| this.cpuInfo.endStep.showStep <= this.cpuInfo.step | this.cpuInfo.endStep.showStep <= this.cpuInfo.step | ||||
| ) { | ) { | ||||
| @@ -437,14 +643,14 @@ export default { | |||||
| this.cpuInfo.endStep.step = this.cpuInfo.endStep.showStep; | this.cpuInfo.endStep.step = this.cpuInfo.endStep.showStep; | ||||
| this.queryCpuInfo(true, false); | this.queryCpuInfo(true, false); | ||||
| } else if (this.cpuInfo.endStep.showStep === '' && | } else if (this.cpuInfo.endStep.showStep === '' && | ||||
| /^[0-9]*[1-9][0-9]*$/.test(this.cpuInfo.startStep.showStep) && | |||||
| stepValidation.test(this.cpuInfo.startStep.showStep) && | |||||
| this.cpuInfo.startStep.showStep <= this.cpuInfo.step) { | this.cpuInfo.startStep.showStep <= this.cpuInfo.step) { | ||||
| this.cpuInfo.startStep.step = this.cpuInfo.startStep.showStep; | this.cpuInfo.startStep.step = this.cpuInfo.startStep.showStep; | ||||
| this.cpuInfo.endStep.step = this.cpuInfo.step; | this.cpuInfo.endStep.step = this.cpuInfo.step; | ||||
| this.cpuInfo.endStep.showStep = this.cpuInfo.step; | this.cpuInfo.endStep.showStep = this.cpuInfo.step; | ||||
| this.queryCpuInfo(true, false); | this.queryCpuInfo(true, false); | ||||
| } else if (this.cpuInfo.startStep.showStep === '' && | } else if (this.cpuInfo.startStep.showStep === '' && | ||||
| /^[0-9]*[1-9][0-9]*$/.test(this.cpuInfo.endStep.showStep) && | |||||
| stepValidation.test(this.cpuInfo.endStep.showStep) && | |||||
| this.cpuInfo.endStep.showStep <= this.cpuInfo.step) { | this.cpuInfo.endStep.showStep <= this.cpuInfo.step) { | ||||
| this.cpuInfo.startStep.step = 1; | this.cpuInfo.startStep.step = 1; | ||||
| this.cpuInfo.startStep.showStep = 1; | this.cpuInfo.startStep.showStep = 1; | ||||
| @@ -475,7 +681,7 @@ export default { | |||||
| * @param {Array} stepArray | * @param {Array} stepArray | ||||
| * @return {String} | * @return {String} | ||||
| */ | */ | ||||
| formateCpuChartTip(params, stepArray) { | |||||
| formatCpuChartTip(params, stepArray) { | |||||
| const data = params; | const data = params; | ||||
| let str = ''; | let str = ''; | ||||
| if (data && data.length) { | if (data && data.length) { | ||||
| @@ -530,11 +736,13 @@ export default { | |||||
| ); | ); | ||||
| this.deviceCpuChart.option.legend.data = legend; | this.deviceCpuChart.option.legend.data = legend; | ||||
| this.deviceCpuChart.option.tooltip.formatter = (params) => { | this.deviceCpuChart.option.tooltip.formatter = (params) => { | ||||
| return this.formateCpuChartTip(params, this.cpuInfo.stepArray); | |||||
| return this.formatCpuChartTip(params, this.cpuInfo.stepArray); | |||||
| }; | }; | ||||
| this.$nextTick(() => { | this.$nextTick(() => { | ||||
| if (this.$refs.deviceCpuChart) { | |||||
| this.deviceCpuChart.chartDom = echarts.init(this.$refs.deviceCpuChart); | |||||
| if (!this.deviceCpuChart.chartDom) { | |||||
| if (this.$refs.deviceCpuChart) { | |||||
| this.deviceCpuChart.chartDom = echarts.init(this.$refs.deviceCpuChart); | |||||
| } | |||||
| } | } | ||||
| this.deviceCpuChart.chartDom.setOption(this.deviceCpuChart.option); | this.deviceCpuChart.chartDom.setOption(this.deviceCpuChart.option); | ||||
| }); | }); | ||||
| @@ -569,11 +777,13 @@ export default { | |||||
| ); | ); | ||||
| this.processCpuChart.option.legend.data = legend; | this.processCpuChart.option.legend.data = legend; | ||||
| this.processCpuChart.option.tooltip.formatter = (params) => { | this.processCpuChart.option.tooltip.formatter = (params) => { | ||||
| return this.formateCpuChartTip(params, this.cpuInfo.stepArray); | |||||
| return this.formatCpuChartTip(params, this.cpuInfo.stepArray); | |||||
| }; | }; | ||||
| this.$nextTick(() => { | this.$nextTick(() => { | ||||
| if (this.$refs.processCpuChart) { | |||||
| this.processCpuChart.chartDom = echarts.init(this.$refs.processCpuChart); | |||||
| if (!this.processCpuChart.chartDom) { | |||||
| if (this.$refs.processCpuChart) { | |||||
| this.processCpuChart.chartDom = echarts.init(this.$refs.processCpuChart); | |||||
| } | |||||
| } | } | ||||
| this.processCpuChart.chartDom.setOption(this.processCpuChart.option); | this.processCpuChart.chartDom.setOption(this.processCpuChart.option); | ||||
| }); | }); | ||||
| @@ -635,11 +845,11 @@ export default { | |||||
| ); | ); | ||||
| this.operatorCpuChart.option.legend.data = legend; | this.operatorCpuChart.option.legend.data = legend; | ||||
| this.operatorCpuChart.option.tooltip.formatter = (params) => { | this.operatorCpuChart.option.tooltip.formatter = (params) => { | ||||
| return this.formateCpuChartTip(params, this.cpuInfo.stepArray); | |||||
| return this.formatCpuChartTip(params, this.cpuInfo.stepArray); | |||||
| }; | }; | ||||
| this.$nextTick(() => { | this.$nextTick(() => { | ||||
| if (this.$refs.operatorCpuChart) { | |||||
| if (!this.operatorCpuChart.chartDom) { | |||||
| if (!this.operatorCpuChart.chartDom) { | |||||
| if (this.$refs.operatorCpuChart) { | |||||
| this.operatorCpuChart.chartDom = echarts.init(this.$refs.operatorCpuChart); | this.operatorCpuChart.chartDom = echarts.init(this.$refs.operatorCpuChart); | ||||
| } | } | ||||
| } | } | ||||
| @@ -649,5 +859,120 @@ export default { | |||||
| } | } | ||||
| }, | }, | ||||
| }, | }, | ||||
| destroyed() { | |||||
| // Remove the listener of window size change | |||||
| window.removeEventListener('resize', this.resizeDebounce); | |||||
| this.$bus.$off('collapse'); | |||||
| }, | |||||
| }; | }; | ||||
| </script> | </script> | ||||
| <style> | |||||
| .data-process-wrap { | |||||
| height: 100%; | |||||
| background: #fff; | |||||
| padding: 0 16px; | |||||
| } | |||||
| .data-process-wrap .title { | |||||
| font-size: 18px; | |||||
| font-weight: bold; | |||||
| text-align: left; | |||||
| } | |||||
| .data-process-wrap .image-noData { | |||||
| width: 100%; | |||||
| height: calc(100% - 37px); | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| flex-direction: column; | |||||
| } | |||||
| .data-process-wrap .image-noData p { | |||||
| font-size: 16px; | |||||
| padding-top: 10px; | |||||
| } | |||||
| .data-process-wrap .el-button { | |||||
| border: 1px solid #00a5a7; | |||||
| border-radius: 2px; | |||||
| background-color: white; | |||||
| color: #00a5a7; | |||||
| padding: 7px 15px; | |||||
| } | |||||
| .data-process-wrap .el-button:hover { | |||||
| background: rgb(230, 246, 246); | |||||
| } | |||||
| .cpu-info { | |||||
| height: calc(100% - 24px); | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| } | |||||
| .cpu-info .step-filter { | |||||
| min-height: 44px; | |||||
| } | |||||
| .cpu-info .step-filter .step-input { | |||||
| width: 100px; | |||||
| margin-right: 20px; | |||||
| } | |||||
| .cpu-info .step-filter:first-child label { | |||||
| margin-right: 10px; | |||||
| } | |||||
| .cpu-info .cpu-detail { | |||||
| height: calc(100% - 44px); | |||||
| flex-grow: 1; | |||||
| overflow-x: hidden; | |||||
| overflow-y: scroll; | |||||
| } | |||||
| .cpu-info .cpu-detail .cpu-detail-item { | |||||
| padding: 16px; | |||||
| border: 1px solid #d9d9d9; | |||||
| border-radius: 4px; | |||||
| margin-right: 8px; | |||||
| } | |||||
| .cpu-info .cpu-detail .cpu-detail-item-top { | |||||
| margin-top: 16px; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item-title { | |||||
| height: 20px; | |||||
| font-size: 15px; | |||||
| font-weight: bold; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item-graph { | |||||
| height: 120px; | |||||
| background-color: #f7faff; | |||||
| margin: 10px 0; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item { | |||||
| height: 400px; | |||||
| display: flex; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item:last-of-type { | |||||
| padding-bottom: 0; | |||||
| border-bottom: none; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item .cpu-chart { | |||||
| height: 100%; | |||||
| flex-grow: 1; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item .cpu-chart-info { | |||||
| height: 100%; | |||||
| width: 300px; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| padding-left: 20px; | |||||
| background-color: #f1f1f1; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item .cpu-chart-info .info-title { | |||||
| font-size: 14px; | |||||
| font-weight: bold; | |||||
| line-height: 30px; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item .cpu-chart-info .info-line { | |||||
| line-height: 30px; | |||||
| } | |||||
| .cpu-chart-tip { | |||||
| display: inline-block; | |||||
| margin-right: 5px; | |||||
| border-radius: 10px; | |||||
| width: 10px; | |||||
| height: 10px; | |||||
| } | |||||
| </style> | |||||
+ 16
- 242
mindinsight/ui/src/views/profiling/data-process.vue
View File
| @@ -113,7 +113,8 @@ limitations under the License. | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="data-process-bottom" v-show="!processSummary.noData"> | |||||
| <div class="data-process-bottom" | |||||
| v-show="!processSummary.noData"> | |||||
| <div class="queue-step-wrap" | <div class="queue-step-wrap" | ||||
| v-if="processSummary.count === processSummary.maxCount"> | v-if="processSummary.count === processSummary.maxCount"> | ||||
| <div class="title">{{$t('profiling.queueStep')}}</div> | <div class="title">{{$t('profiling.queueStep')}}</div> | ||||
| @@ -302,141 +303,17 @@ limitations under the License. | |||||
| <p>{{initOver?$t("public.noData"):$t("public.dataLoading")}}</p> | <p>{{initOver?$t("public.noData"):$t("public.dataLoading")}}</p> | ||||
| </div> | </div> | ||||
| </el-tab-pane> | </el-tab-pane> | ||||
| <!-- CPU --> | |||||
| <el-tab-pane :label="$t('profiling.cpuUtilization')" | |||||
| name="cpuInfo"> | |||||
| <div class="cpu-info" | |||||
| v-if="!cpuInfo.noData"> | |||||
| <div class="step-filter"> | |||||
| <label>{{cpuInfo.stepTip}}</label> | |||||
| <label>{{$t('profiling.startStep')}}</label> | |||||
| <el-input class="step-input" | |||||
| v-model.number="cpuInfo.startStep.showStep"></el-input> | |||||
| <label>{{$t('profiling.endStep')}}</label> | |||||
| <el-input class="step-input" | |||||
| v-model.number="cpuInfo.endStep.showStep"></el-input> | |||||
| <el-button @click="viewStepFilter">{{$t('profiling.filterStep')}}</el-button> | |||||
| <el-button @click="resetStepFilter">{{$t('profiling.resetStep')}}</el-button> | |||||
| </div> | |||||
| <div class="cpu-detail"> | |||||
| <div class="cpu-detail-item"> | |||||
| <div class="detail-item-title">{{$t('profiling.structuralCpuUtil')}}</div> | |||||
| <div class="detail-item"> | |||||
| <div class="cpu-chart" | |||||
| id="deviceCpuChart" | |||||
| ref="deviceCpuChart"></div> | |||||
| <div class="cpu-chart-info"> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.logicCores')}}</span><span>{{deviceCpuChart.logicCores}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgUserUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgUser)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSysUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgSystem)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgIOUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgIO)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgIdleUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgFree)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgWaitingProcess')}}</span><span>{{deviceCpuChart.cpuAvgProcess}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSwitchCount')}}</span><span>{{deviceCpuChart.cpuAvgSwitch}}</span> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="cpu-detail-item cpu-detail-item-top"> | |||||
| <div class="detail-item-title">{{$t('profiling.processCpuUtil')}}</div> | |||||
| <div class="detail-item"> | |||||
| <div class="cpu-chart" | |||||
| id="processCpuChart" | |||||
| ref="processCpuChart"> | |||||
| </div> | |||||
| <div class="cpu-chart-info"> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgUserUtilization')}}</span> | |||||
| <span>{{addPercentSign(processCpuChart.cpuAvgUser)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSysUtilization')}}</span> | |||||
| <span>{{addPercentSign(processCpuChart.cpuAvgSystem)}}</span> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="cpu-detail-item cpu-detail-item-top"> | |||||
| <div class="detail-item-title">{{$t('profiling.operatorCpuUtil')}}</div> | |||||
| <div class="detail-item-graph" | |||||
| id="operator-graph"></div> | |||||
| <div class="detail-item"> | |||||
| <div class="cpu-chart" | |||||
| id="operatorCpuChart" | |||||
| ref="operatorCpuChart"> | |||||
| </div> | |||||
| <div class="cpu-chart-info"> | |||||
| <div class="info-title"> | |||||
| {{$t('profiling.allOperators')}} | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgUserUtilization')}}</span> | |||||
| <span>{{addPercentSign(operatorCpuChart.cpuAvgTotalUser)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSysUtilization')}}</span> | |||||
| <span>{{addPercentSign(operatorCpuChart.cpuAvgTotalSystem)}}</span> | |||||
| </div> | |||||
| <div class="info-title"> | |||||
| {{$t('profiling.currentOperator')}} | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgUserUtilization')}}</span> | |||||
| <span>{{addPercentSign(operatorCpuChart.cpuAvgOpUser)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSysUtilization')}}</span> | |||||
| <span>{{addPercentSign(operatorCpuChart.cpuAvgOpSystem)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.workersNum')}}{{$t('symbols.colon')}}</span> | |||||
| <span>{{operatorCpuChart.processNumber}}</span> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="image-noData" | |||||
| v-else> | |||||
| <div> | |||||
| <img :src="require('@/assets/images/nodata.png')" | |||||
| alt="" /> | |||||
| </div> | |||||
| <p>{{cpuInfo.initOver?$t("public.noData"):$t("public.dataLoading")}}</p> | |||||
| </div> | |||||
| </el-tab-pane> | |||||
| </el-tabs> | </el-tabs> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import echarts from 'echarts'; | import echarts from 'echarts'; | ||||
| import RequestService from '../../services/request-service'; | import RequestService from '../../services/request-service'; | ||||
| import cpuUtilizaton from '../../mixins/cpu-utilization.vue'; | |||||
| import {select, selectAll, zoom} from 'd3'; | import {select, selectAll, zoom} from 'd3'; | ||||
| import {event as currentEvent} from 'd3-selection'; | import {event as currentEvent} from 'd3-selection'; | ||||
| import 'd3-graphviz'; | import 'd3-graphviz'; | ||||
| const d3 = {select, selectAll, zoom}; | const d3 = {select, selectAll, zoom}; | ||||
| export default { | export default { | ||||
| mixins: [cpuUtilizaton], | |||||
| props: {}, | props: {}, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| @@ -533,15 +410,13 @@ export default { | |||||
| }, | }, | ||||
| watch: { | watch: { | ||||
| '$parent.curDashboardInfo.curCardNum': { | '$parent.curDashboardInfo.curCardNum': { | ||||
| handler(newValue, oldValue) { | |||||
| handler(newValue) { | |||||
| if (newValue || newValue === 0) { | if (newValue || newValue === 0) { | ||||
| this.dir = this.$route.query.dir; | this.dir = this.$route.query.dir; | ||||
| this.trainId = this.$route.query.id; | this.trainId = this.$route.query.id; | ||||
| this.currentCard = newValue; | this.currentCard = newValue; | ||||
| if (this.trainId) { | if (this.trainId) { | ||||
| document.title = | |||||
| `${decodeURIComponent(this.trainId)}` + | |||||
| `-${this.$t('profiling.mindData')}-MindInsight`; | |||||
| document.title = `${decodeURIComponent(this.trainId)}` + `-${this.$t('profiling.mindData')}-MindInsight`; | |||||
| } else { | } else { | ||||
| document.title = `${this.$t('profiling.mindData')}-MindInsight`; | document.title = `${this.$t('profiling.mindData')}-MindInsight`; | ||||
| } | } | ||||
| @@ -549,12 +424,6 @@ export default { | |||||
| this.init(); | this.init(); | ||||
| } else if (this.activeName === 'pipeLine') { | } else if (this.activeName === 'pipeLine') { | ||||
| this.queryAverageRate(); | this.queryAverageRate(); | ||||
| } else { | |||||
| this.cpuInfo.startStep.showStep = ''; | |||||
| this.cpuInfo.startStep.step = ''; | |||||
| this.cpuInfo.endStep.showStep = ''; | |||||
| this.cpuInfo.endStep.step = ''; | |||||
| this.queryCpuInfo(false, true); | |||||
| } | } | ||||
| } | } | ||||
| if (this.activeName === 'queueInfo' && this.$parent.curDashboardInfo.initOver) { | if (this.activeName === 'queueInfo' && this.$parent.curDashboardInfo.initOver) { | ||||
| @@ -567,11 +436,7 @@ export default { | |||||
| }, | }, | ||||
| computed: {}, | computed: {}, | ||||
| mounted() { | mounted() { | ||||
| window.addEventListener( | |||||
| 'resize', | |||||
| this.debounce(this.resizeCallback, 200), | |||||
| false, | |||||
| ); | |||||
| window.addEventListener('resize', this.debounce(this.resizeCallback, 200), false); | |||||
| setTimeout(() => { | setTimeout(() => { | ||||
| this.$bus.$on('collapse', this.debounce(this.resizeCallback, 200)); | this.$bus.$on('collapse', this.debounce(this.resizeCallback, 200)); | ||||
| }, 500); | }, 500); | ||||
| @@ -612,15 +477,6 @@ export default { | |||||
| this.queryAverageRate(); | this.queryAverageRate(); | ||||
| } else if (this.activeName === 'queueInfo' && this.connectQueueChart.deviceId !== this.currentCard) { | } else if (this.activeName === 'queueInfo' && this.connectQueueChart.deviceId !== this.currentCard) { | ||||
| this.init(); | this.init(); | ||||
| } else if ( | |||||
| this.activeName === 'cpuInfo' && | |||||
| this.cpuInfo.deviceId !== this.currentCard | |||||
| ) { | |||||
| this.cpuInfo.startStep.showStep = ''; | |||||
| this.cpuInfo.startStep.step = ''; | |||||
| this.cpuInfo.endStep.showStep = ''; | |||||
| this.cpuInfo.endStep.step = ''; | |||||
| this.queryCpuInfo(false, true); | |||||
| } | } | ||||
| this.$nextTick(() => { | this.$nextTick(() => { | ||||
| this.resizeCallback(); | this.resizeCallback(); | ||||
| @@ -641,9 +497,6 @@ export default { | |||||
| 'getNextChart', | 'getNextChart', | ||||
| 'averageRateChart', | 'averageRateChart', | ||||
| 'queueDeepChart', | 'queueDeepChart', | ||||
| 'deviceCpuChart', | |||||
| 'processCpuChart', | |||||
| 'operatorCpuChart', | |||||
| ]; | ]; | ||||
| chartArr.forEach((val) => { | chartArr.forEach((val) => { | ||||
| if (this[val].chartDom) { | if (this[val].chartDom) { | ||||
| @@ -919,11 +772,7 @@ export default { | |||||
| this.dealPipeLineData(data); | this.dealPipeLineData(data); | ||||
| this.pipeData = !!!(res.data.object && res.data.object.length); | this.pipeData = !!!(res.data.object && res.data.object.length); | ||||
| if ( | |||||
| res.data.object && | |||||
| res.data.object.length && | |||||
| res.data.col_name | |||||
| ) { | |||||
| if (res.data.object && res.data.object.length && res.data.col_name) { | |||||
| const result = res.data.object.map((val) => { | const result = res.data.object.map((val) => { | ||||
| const obj = {}; | const obj = {}; | ||||
| res.data.col_name.forEach((value, key) => { | res.data.col_name.forEach((value, key) => { | ||||
| @@ -1469,12 +1318,12 @@ export default { | |||||
| padding: 0 16px; | padding: 0 16px; | ||||
| } | } | ||||
| .data-process-wrap .title { | .data-process-wrap .title { | ||||
| font-size: 16px; | |||||
| font-size: 18px; | |||||
| font-weight: bold; | font-weight: bold; | ||||
| text-align: left; | text-align: left; | ||||
| } | } | ||||
| .data-process-wrap .el-tabs.el-tabs--top { | .data-process-wrap .el-tabs.el-tabs--top { | ||||
| height: calc(100% - 22px); | |||||
| height: calc(100% - 24px); | |||||
| } | } | ||||
| .data-process-wrap .el-tabs__content { | .data-process-wrap .el-tabs__content { | ||||
| height: calc(100% - 54px); | height: calc(100% - 54px); | ||||
| @@ -1590,15 +1439,15 @@ export default { | |||||
| .data-process-wrap .data-process-bottom .queue-step-wrap > .title { | .data-process-wrap .data-process-bottom .queue-step-wrap > .title { | ||||
| margin-bottom: 15px; | margin-bottom: 15px; | ||||
| font-weight: bold; | font-weight: bold; | ||||
| font-size: 15px; | |||||
| font-size: 16px; | |||||
| } | } | ||||
| .data-process-wrap .data-process-bottom .queue-step-wrap .chart-content { | .data-process-wrap .data-process-bottom .queue-step-wrap .chart-content { | ||||
| height: calc(100% - 30px); | |||||
| height: calc(100% - 31px); | |||||
| } | } | ||||
| .data-process-wrap .data-process-bottom .queue-step-wrap .chart-content .chart-wrap { | .data-process-wrap .data-process-bottom .queue-step-wrap .chart-content .chart-wrap { | ||||
| float: left; | float: left; | ||||
| width: calc(50% - 12px); | width: calc(50% - 12px); | ||||
| height: calc(100% - 5px); | |||||
| height: calc(100% - 10px); | |||||
| border-radius: 4px; | border-radius: 4px; | ||||
| overflow-y: auto; | overflow-y: auto; | ||||
| border: 1px solid #D9D9D9; | border: 1px solid #D9D9D9; | ||||
| @@ -1628,7 +1477,7 @@ export default { | |||||
| border-color: #3399ff; | border-color: #3399ff; | ||||
| } | } | ||||
| .data-process-wrap .data-process-bottom .queue-step-wrap .chart-content.second { | .data-process-wrap .data-process-bottom .queue-step-wrap .chart-content.second { | ||||
| height: calc(100% - 25px); | |||||
| height: calc(100% - 26px); | |||||
| } | } | ||||
| .data-process-wrap .data-process-bottom .queue-step-wrap.single { | .data-process-wrap .data-process-bottom .queue-step-wrap.single { | ||||
| height: 100%; | height: 100%; | ||||
| @@ -1643,12 +1492,12 @@ export default { | |||||
| height: 35%; | height: 35%; | ||||
| } | } | ||||
| .data-process-wrap .pipeline-wrap .pipeline-top .pipeline-top-title { | .data-process-wrap .pipeline-wrap .pipeline-top .pipeline-top-title { | ||||
| font-size: 15px; | |||||
| font-size: 16px; | |||||
| font-weight: bold; | font-weight: bold; | ||||
| } | } | ||||
| .data-process-wrap .pipeline-wrap .pipeline-top .average-rate-wrap { | .data-process-wrap .pipeline-wrap .pipeline-top .average-rate-wrap { | ||||
| overflow-y: auto; | overflow-y: auto; | ||||
| height: calc(100% - 20px); | |||||
| height: calc(100% - 21px); | |||||
| } | } | ||||
| .data-process-wrap .pipeline-wrap .pipeline-top .average-rate-wrap #average-rate { | .data-process-wrap .pipeline-wrap .pipeline-top .average-rate-wrap #average-rate { | ||||
| height: 100%; | height: 100%; | ||||
| @@ -1659,11 +1508,11 @@ export default { | |||||
| height: 30%; | height: 30%; | ||||
| } | } | ||||
| .data-process-wrap .pipeline-wrap .pipeline-middle .pipeline-middle-title { | .data-process-wrap .pipeline-wrap .pipeline-middle .pipeline-middle-title { | ||||
| font-size: 15px; | |||||
| font-size: 16px; | |||||
| font-weight: bold; | font-weight: bold; | ||||
| } | } | ||||
| .data-process-wrap .pipeline-wrap .pipeline-middle .operator-graph { | .data-process-wrap .pipeline-wrap .pipeline-middle .operator-graph { | ||||
| height: calc(100% - 20px); | |||||
| height: calc(100% - 21px); | |||||
| } | } | ||||
| .data-process-wrap .pipeline-wrap .pipeline-middle .operator-graph #graph { | .data-process-wrap .pipeline-wrap .pipeline-middle .operator-graph #graph { | ||||
| width: 100%; | width: 100%; | ||||
| @@ -1756,79 +1605,4 @@ export default { | |||||
| .data-process-wrap .el-button:hover { | .data-process-wrap .el-button:hover { | ||||
| background: rgb(230, 246, 246); | background: rgb(230, 246, 246); | ||||
| } | } | ||||
| .cpu-info { | |||||
| height: 100%; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| } | |||||
| .cpu-info .step-filter { | |||||
| min-height: 44px; | |||||
| } | |||||
| .cpu-info .step-filter .step-input { | |||||
| width: 100px; | |||||
| margin-right: 20px; | |||||
| } | |||||
| .cpu-info .step-filter:first-child label { | |||||
| margin-right: 10px; | |||||
| } | |||||
| .cpu-info .cpu-detail { | |||||
| flex-grow: 1; | |||||
| overflow-x: hidden; | |||||
| overflow-y: scroll; | |||||
| } | |||||
| .cpu-info .cpu-detail .cpu-detail-item { | |||||
| padding: 16px; | |||||
| border: 1px solid #d9d9d9; | |||||
| border-radius: 4px; | |||||
| margin-right: 8px; | |||||
| } | |||||
| .cpu-info .cpu-detail .cpu-detail-item-top { | |||||
| margin-top: 16px; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item-title { | |||||
| height: 20px; | |||||
| font-size: 15px; | |||||
| font-weight: bold; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item-graph { | |||||
| height: 120px; | |||||
| background-color: #f7faff; | |||||
| margin: 10px 0; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item { | |||||
| height: 400px; | |||||
| display: flex; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item:last-of-type { | |||||
| padding-bottom: 0; | |||||
| border-bottom: none; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item .cpu-chart { | |||||
| height: 100%; | |||||
| flex-grow: 1; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item .cpu-chart-info { | |||||
| height: 100%; | |||||
| width: 300px; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| padding-left: 20px; | |||||
| background-color: #f1f1f1; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item .cpu-chart-info .info-title { | |||||
| font-size: 14px; | |||||
| font-weight: bold; | |||||
| line-height: 30px; | |||||
| } | |||||
| .cpu-info .cpu-detail .detail-item .cpu-chart-info .info-line { | |||||
| line-height: 30px; | |||||
| } | |||||
| .cpu-chart-tip { | |||||
| display: inline-block; | |||||
| margin-right: 5px; | |||||
| border-radius: 10px; | |||||
| width: 10px; | |||||
| height: 10px; | |||||
| } | |||||
| </style> | </style> | ||||
+ 20
- 13
mindinsight/ui/src/views/profiling/memory-detail.vue
View File
| @@ -220,13 +220,14 @@ export default { | |||||
| curSelectedPointIndex: 0, // Subscript of the current selection point | curSelectedPointIndex: 0, // Subscript of the current selection point | ||||
| curGraphId: '', // ID of the current graphics | curGraphId: '', // ID of the current graphics | ||||
| breakdownsInitOver: false, // BreakDown data request complete | breakdownsInitOver: false, // BreakDown data request complete | ||||
| firstInit: true, // First init of page | |||||
| }; | }; | ||||
| }, | }, | ||||
| watch: { | watch: { | ||||
| // Listening card number | // Listening card number | ||||
| '$parent.curDashboardInfo.curCardNum': { | '$parent.curDashboardInfo.curCardNum': { | ||||
| handler(newValue, oldValue) { | |||||
| if (isNaN(newValue) || newValue === this.curCardNum) { | |||||
| handler(newValue) { | |||||
| if (isNaN(newValue) || newValue === this.curCardNum || this.firstInit) { | |||||
| return; | return; | ||||
| } | } | ||||
| this.curCardNum = newValue; | this.curCardNum = newValue; | ||||
| @@ -290,6 +291,10 @@ export default { | |||||
| */ | */ | ||||
| getMemorySummary() { | getMemorySummary() { | ||||
| if (!this.summaryPath || isNaN(this.curCardNum)) { | if (!this.summaryPath || isNaN(this.curCardNum)) { | ||||
| this.overViewInitOver = true; | |||||
| this.noGraphicsDataFlag = true; | |||||
| this.graphicsInitOver = true; | |||||
| this.breakdownsInitOver = true; | |||||
| return; | return; | ||||
| } | } | ||||
| const params = { | const params = { | ||||
| @@ -347,13 +352,14 @@ export default { | |||||
| this.breakdownsInitOver = true; | this.breakdownsInitOver = true; | ||||
| return; | return; | ||||
| } | } | ||||
| this.noGraphicsDataFlag = false; | |||||
| const resData = res.data[Object.keys(res.data)[0]]; | const resData = res.data[Object.keys(res.data)[0]]; | ||||
| this.curGraphId = resData.graph_id; | this.curGraphId = resData.graph_id; | ||||
| this.currentGraphicsDic = resData; | this.currentGraphicsDic = resData; | ||||
| this.graphicsOption = this.formateGraphicsOption(); | |||||
| this.graphicsOption = this.formatGraphicsOption(); | |||||
| this.drawGraphics(); | this.drawGraphics(); | ||||
| this.$nextTick(() => { | this.$nextTick(() => { | ||||
| this.formateBreakdowns(); | |||||
| this.formatBreakdowns(); | |||||
| }); | }); | ||||
| }, | }, | ||||
| () => { | () => { | ||||
| @@ -366,7 +372,7 @@ export default { | |||||
| /** | /** | ||||
| * Sort out the memory allocation data in a table | * Sort out the memory allocation data in a table | ||||
| */ | */ | ||||
| formateBreakdowns() { | |||||
| formatBreakdowns() { | |||||
| this.breakdownsInitOver = false; | this.breakdownsInitOver = false; | ||||
| this.currentBreakdownsData = []; | this.currentBreakdownsData = []; | ||||
| if (!this.currentGraphicsDic.nodes) { | if (!this.currentGraphicsDic.nodes) { | ||||
| @@ -420,7 +426,7 @@ export default { | |||||
| * Sorting chart data | * Sorting chart data | ||||
| * @return {Object} Chart data | * @return {Object} Chart data | ||||
| */ | */ | ||||
| formateGraphicsOption() { | |||||
| formatGraphicsOption() { | |||||
| if (!this.currentGraphicsDic) { | if (!this.currentGraphicsDic) { | ||||
| return {}; | return {}; | ||||
| } | } | ||||
| @@ -618,7 +624,7 @@ export default { | |||||
| if (!this.graphicsChart) { | if (!this.graphicsChart) { | ||||
| this.graphicsChart = echarts.init(this.$refs.memoryChart, null); | this.graphicsChart = echarts.init(this.$refs.memoryChart, null); | ||||
| } | } | ||||
| this.graphicsChart.setOption(this.graphicsOption, false); | |||||
| this.graphicsChart.setOption(this.graphicsOption); | |||||
| if (!this.chartClickListenerOn) { | if (!this.chartClickListenerOn) { | ||||
| this.chartClickListenerOn = true; | this.chartClickListenerOn = true; | ||||
| this.graphicsChart.on( | this.graphicsChart.on( | ||||
| @@ -654,7 +660,7 @@ export default { | |||||
| seriesData.markPoint.data[0].coord = seriesData.data[dataIndex]; | seriesData.markPoint.data[0].coord = seriesData.data[dataIndex]; | ||||
| this.drawGraphics(); | this.drawGraphics(); | ||||
| this.curSelectedPointIndex = dataIndex; | this.curSelectedPointIndex = dataIndex; | ||||
| this.formateBreakdowns(); | |||||
| this.formatBreakdowns(); | |||||
| } | } | ||||
| }, | }, | ||||
| /** | /** | ||||
| @@ -720,6 +726,7 @@ export default { | |||||
| )}-MindInsight`; | )}-MindInsight`; | ||||
| } | } | ||||
| window.addEventListener('resize', this.resizeCallback, false); | window.addEventListener('resize', this.resizeCallback, false); | ||||
| this.$bus.$on('collapse', this.resizeCallback); | |||||
| if ( | if ( | ||||
| this.$route.query && | this.$route.query && | ||||
| this.$route.query.path && | this.$route.query.path && | ||||
| @@ -729,7 +736,7 @@ export default { | |||||
| this.curCardNum = this.$route.query.cardNum; | this.curCardNum = this.$route.query.cardNum; | ||||
| this.init(); | this.init(); | ||||
| } | } | ||||
| this.$bus.$on('collapse', this.resizeCallback); | |||||
| this.firstInit = false; | |||||
| }, | }, | ||||
| }; | }; | ||||
| </script> | </script> | ||||
| @@ -757,12 +764,12 @@ export default { | |||||
| } | } | ||||
| .cl-memory-detail .title-content .title-text { | .cl-memory-detail .title-content .title-text { | ||||
| font-size: 20px; | |||||
| font-size: 18px; | |||||
| } | } | ||||
| .cl-memory-detail .top-content .content-item { | .cl-memory-detail .top-content .content-item { | ||||
| display: flex; | display: flex; | ||||
| height: calc(100% - 24px); | |||||
| height: calc(100% - 21px); | |||||
| width: 100%; | width: 100%; | ||||
| } | } | ||||
| @@ -817,7 +824,7 @@ export default { | |||||
| .cl-memory-detail .bottom-content .chart-container .chart-content, | .cl-memory-detail .bottom-content .chart-container .chart-content, | ||||
| .cl-memory-detail .bottom-content .table-container .table-content { | .cl-memory-detail .bottom-content .table-container .table-content { | ||||
| margin-top: 16px; | margin-top: 16px; | ||||
| height: calc(100% - 30px); | |||||
| height: calc(100% - 37px); | |||||
| } | } | ||||
| .cl-memory-detail .bottom-content .chart-container { | .cl-memory-detail .bottom-content .chart-container { | ||||
| height: calc(60% - 20px); | height: calc(60% - 20px); | ||||
| @@ -827,7 +834,7 @@ export default { | |||||
| height: 40%; | height: 40%; | ||||
| } | } | ||||
| .cl-memory-detail .title-item { | .cl-memory-detail .title-item { | ||||
| font-size: 18px; | |||||
| font-size: 16px; | |||||
| font-weight: bold; | font-weight: bold; | ||||
| } | } | ||||
| .cl-memory-detail .el-table td, | .cl-memory-detail .el-table td, | ||||
+ 2
- 2
mindinsight/ui/src/views/profiling/operator.vue
View File
| @@ -1521,11 +1521,11 @@ export default { | |||||
| } | } | ||||
| .operator .operator-title { | .operator .operator-title { | ||||
| padding: 0 15px; | padding: 0 15px; | ||||
| font-size: 16px; | |||||
| font-size: 18px; | |||||
| font-weight: bold; | font-weight: bold; | ||||
| } | } | ||||
| .operator .cl-profiler { | .operator .cl-profiler { | ||||
| height: calc(100% - 21px); | |||||
| height: calc(100% - 24px); | |||||
| overflow-y: auto; | overflow-y: auto; | ||||
| width: 100%; | width: 100%; | ||||
| background: #fff; | background: #fff; | ||||
+ 11
- 18
mindinsight/ui/src/views/profiling/profiling-dashboard.vue
View File
| @@ -1,5 +1,5 @@ | |||||
| <!-- | <!-- | ||||
| Copyright 2020 Huawei Technologies Co., Ltd.All Rights Reserved. | |||||
| Copyright 2020-2021 Huawei Technologies Co., Ltd.All Rights Reserved. | |||||
| Licensed under the Apache License, Version 2.0 (the "License"); | Licensed under the Apache License, Version 2.0 (the "License"); | ||||
| you may not use this file except in compliance with the License. | you may not use this file except in compliance with the License. | ||||
| @@ -179,7 +179,6 @@ limitations under the License. | |||||
| </div> | </div> | ||||
| <div class="title">{{$t('profiling.connectorQuene')}}</div> | <div class="title">{{$t('profiling.connectorQuene')}}</div> | ||||
| <div class="description"> | <div class="description"> | ||||
| <div class="line"></div> | |||||
| <div class="item" | <div class="item" | ||||
| v-if="processSummary.device.empty || processSummary.device.empty === 0"> | v-if="processSummary.device.empty || processSummary.device.empty === 0"> | ||||
| {{$t('profiling.queueTip2')}} | {{$t('profiling.queueTip2')}} | ||||
| @@ -223,7 +222,6 @@ limitations under the License. | |||||
| </div> | </div> | ||||
| <div class="title">{{$t('profiling.dataQueue')}}</div> | <div class="title">{{$t('profiling.dataQueue')}}</div> | ||||
| <div class="description"> | <div class="description"> | ||||
| <div class="line"></div> | |||||
| <div class="item" | <div class="item" | ||||
| v-if="processSummary.get_next.empty || processSummary.get_next.empty === 0"> | v-if="processSummary.get_next.empty || processSummary.get_next.empty === 0"> | ||||
| {{$t('profiling.queueTip2')}} | {{$t('profiling.queueTip2')}} | ||||
| @@ -1257,8 +1255,8 @@ export default { | |||||
| height: 100%; | height: 100%; | ||||
| } | } | ||||
| .pro-router-wrap > div > div { | .pro-router-wrap > div > div { | ||||
| border: 1px solid #eee; | |||||
| border-radius: 4px; | |||||
| border: 1px solid #d9d9d9; | |||||
| border-radius: 1px; | |||||
| } | } | ||||
| .pro-router-wrap > div .title-wrap { | .pro-router-wrap > div .title-wrap { | ||||
| padding: 15px; | padding: 15px; | ||||
| @@ -1266,7 +1264,7 @@ export default { | |||||
| .pro-router-wrap > div .title-wrap .title { | .pro-router-wrap > div .title-wrap .title { | ||||
| float: left; | float: left; | ||||
| font-weight: bold; | font-weight: bold; | ||||
| font-size: 16px; | |||||
| font-size: 18px; | |||||
| } | } | ||||
| .pro-router-wrap > div .title-wrap .tip-icon { | .pro-router-wrap > div .title-wrap .tip-icon { | ||||
| float: right; | float: right; | ||||
| @@ -1331,7 +1329,7 @@ export default { | |||||
| padding-right: 15px; | padding-right: 15px; | ||||
| } | } | ||||
| .pro-router-wrap .pro-router-left .step-trace { | .pro-router-wrap .pro-router-left .step-trace { | ||||
| height: 45%; | |||||
| height: calc(100% - 275px); | |||||
| margin-bottom: 15px; | margin-bottom: 15px; | ||||
| } | } | ||||
| .pro-router-wrap .pro-router-left .step-trace .trace-container { | .pro-router-wrap .pro-router-left .step-trace .trace-container { | ||||
| @@ -1355,11 +1353,11 @@ export default { | |||||
| overflow: visible; | overflow: visible; | ||||
| } | } | ||||
| .pro-router-wrap .pro-router-left .minddata { | .pro-router-wrap .pro-router-left .minddata { | ||||
| height: calc(55% - 15px); | |||||
| height: 260px; | |||||
| } | } | ||||
| .pro-router-wrap .pro-router-left .minddata .pipeline-container { | .pro-router-wrap .pro-router-left .minddata .pipeline-container { | ||||
| width: 100%; | width: 100%; | ||||
| padding: 20px 20px; | |||||
| padding: 0 20px; | |||||
| height: calc(100% - 52px); | height: calc(100% - 52px); | ||||
| display: flex; | display: flex; | ||||
| font-size: 0; | font-size: 0; | ||||
| @@ -1434,14 +1432,9 @@ export default { | |||||
| white-space: nowrap; | white-space: nowrap; | ||||
| overflow: visible; | overflow: visible; | ||||
| width: 100%; | width: 100%; | ||||
| min-width: 100px; | |||||
| text-align: center; | text-align: center; | ||||
| } | |||||
| .pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description .line { | |||||
| width: 1px; | |||||
| height: 40px; | |||||
| margin: 20px 0; | |||||
| border-left: 1px solid #979797; | |||||
| display: inline-block; | |||||
| margin-top: 30px; | |||||
| } | } | ||||
| .pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description .item { | .pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description .item { | ||||
| font-size: 12px; | font-size: 12px; | ||||
| @@ -1457,7 +1450,7 @@ export default { | |||||
| width: 400px; | width: 400px; | ||||
| } | } | ||||
| .pro-router-wrap .pro-router-right .op-time-consume { | .pro-router-wrap .pro-router-right .op-time-consume { | ||||
| height: calc(60% - 15px); | |||||
| height: calc(100% - 275px); | |||||
| margin-bottom: 15px; | margin-bottom: 15px; | ||||
| } | } | ||||
| .pro-router-wrap .pro-router-right .op-time-consume .time-list { | .pro-router-wrap .pro-router-right .op-time-consume .time-list { | ||||
| @@ -1511,7 +1504,7 @@ export default { | |||||
| height: 25px; | height: 25px; | ||||
| } | } | ||||
| .pro-router-wrap .pro-router-right .time-line { | .pro-router-wrap .pro-router-right .time-line { | ||||
| height: 40%; | |||||
| height: 260px; | |||||
| overflow: hidden; | overflow: hidden; | ||||
| } | } | ||||
| .pro-router-wrap .pro-router-right .time-line .timeline-info { | .pro-router-wrap .pro-router-right .time-line .timeline-info { | ||||
+ 124
- 70
mindinsight/ui/src/views/profiling/profiling.vue
View File
| @@ -15,15 +15,20 @@ limitations under the License. | |||||
| --> | --> | ||||
| <template> | <template> | ||||
| <div class="prof-wrap"> | <div class="prof-wrap"> | ||||
| <div class="prof-head"> | |||||
| <span class="cl-title-left">{{$t('summaryManage.viewProfiler')}}</span> | |||||
| <div class="path-message"> | |||||
| <span>{{$t('symbols.leftbracket')}}</span> | |||||
| <span>{{$t('trainingDashboard.summaryDirPath')}}</span> | |||||
| <span>{{summaryPath}}</span> | |||||
| <span>{{$t('symbols.rightbracket')}}</span> | |||||
| </div> | |||||
| </div> | |||||
| <div class="prof-content"> | <div class="prof-content"> | ||||
| <div class="prof-content-left" | <div class="prof-content-left" | ||||
| :class="{collapse:collapse}"> | :class="{collapse:collapse}"> | ||||
| <div class="helper" | <div class="helper" | ||||
| v-show="!collapse"> | v-show="!collapse"> | ||||
| <div class="summary-path"> | |||||
| {{$t('trainingDashboard.summaryDirPath')}} | |||||
| <span>{{ summaryPath}}</span> | |||||
| </div> | |||||
| <div class="cur-card"> | <div class="cur-card"> | ||||
| <label>{{$t('profiling.curCard')}}</label> | <label>{{$t('profiling.curCard')}}</label> | ||||
| <el-select v-model="curDashboardInfo.curCardNum" | <el-select v-model="curDashboardInfo.curCardNum" | ||||
| @@ -42,13 +47,6 @@ limitations under the License. | |||||
| </div> | </div> | ||||
| <div class="suggested-title">{{$t("profiling.suggestions")}}</div> | <div class="suggested-title">{{$t("profiling.suggestions")}}</div> | ||||
| <div id="helper-tips"></div> | <div id="helper-tips"></div> | ||||
| <div class="memory-title-container"> | |||||
| <div class="memory-title"> | |||||
| {{$t("profiling.memory.memoryDetailLink")}}</div> | |||||
| <div class="memory-link" | |||||
| @click="jumpToMemoryDetail"> | |||||
| {{$t('profiling.viewDetail')}}</div> | |||||
| </div> | |||||
| </div> | </div> | ||||
| <div class="collapse-btn" | <div class="collapse-btn" | ||||
| :class="{collapse:collapse}" | :class="{collapse:collapse}" | ||||
| @@ -57,10 +55,26 @@ limitations under the License. | |||||
| </div> | </div> | ||||
| <div class="prof-content-right" | <div class="prof-content-right" | ||||
| :class="{collapse:collapse}"> | :class="{collapse:collapse}"> | ||||
| <router-view></router-view> | |||||
| <div class="tab-container" | |||||
| v-show="$route.path === '/profiling/profiling-dashboard' | |||||
| || $route.path === '/profiling/resource-utilization'"> | |||||
| <el-tabs v-model="tabData.activeName" | |||||
| @tab-click="paneChange"> | |||||
| <el-tab-pane v-for="pane in tabData.tabPanes" | |||||
| :key="pane.name" | |||||
| :label="pane.label" | |||||
| :name="pane.name"></el-tab-pane> | |||||
| </el-tabs> | |||||
| </div> | |||||
| <div class="router-container" | |||||
| :class="$route.path === '/profiling/profiling-dashboard' | |||||
| || $route.path === '/profiling/resource-utilization'?'dashboard':'detail'"> | |||||
| <router-view></router-view> | |||||
| </div> | |||||
| <div class="close" | <div class="close" | ||||
| @click="backToDdashboard" | @click="backToDdashboard" | ||||
| v-if="$route.path !== '/profiling/profiling-dashboard'"> | |||||
| v-if="$route.path !== '/profiling/profiling-dashboard' | |||||
| && $route.path !== '/profiling/resource-utilization'"> | |||||
| <img src="@/assets/images/close-page.png"> | <img src="@/assets/images/close-page.png"> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -92,10 +106,29 @@ export default { | |||||
| query: {}, | query: {}, | ||||
| initOver: false, | initOver: false, | ||||
| }, | }, | ||||
| tabData: { | |||||
| activeName: '0', | |||||
| tabPanes: [ | |||||
| { | |||||
| name: '0', | |||||
| label: this.$t('profiling.trainingPerformance'), | |||||
| }, | |||||
| { | |||||
| name: '1', | |||||
| label: this.$t('profiling.resourceUtilization'), | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| }; | }; | ||||
| }, | }, | ||||
| watch: {}, | watch: {}, | ||||
| mounted() { | mounted() { | ||||
| if ( | |||||
| this.$route.path === 'resource-utilization' || | |||||
| this.$route.path === '/profiling/memory-detail' | |||||
| ) { | |||||
| this.tabData.activeName = this.tabData.tabPanes[1].name; | |||||
| } | |||||
| this.$nextTick(() => { | this.$nextTick(() => { | ||||
| this.init(); | this.init(); | ||||
| }); | }); | ||||
| @@ -109,12 +142,15 @@ export default { | |||||
| this.curDashboardInfo.query.id = this.$route.query.id; | this.curDashboardInfo.query.id = this.$route.query.id; | ||||
| this.curDashboardInfo.query.dir = this.$route.query.dir; | this.curDashboardInfo.query.dir = this.$route.query.dir; | ||||
| this.curDashboardInfo.query.path = this.$route.query.path; | this.curDashboardInfo.query.path = this.$route.query.path; | ||||
| this.summaryPath = decodeURIComponent( this.$route.query.id); | |||||
| this.tabData.activeName = | |||||
| this.$route.query.activePane || this.tabData.tabPanes[0].name; | |||||
| this.summaryPath = decodeURIComponent(this.$route.query.id); | |||||
| this.getDeviceList(); | this.getDeviceList(); | ||||
| } else { | } else { | ||||
| this.curDashboardInfo.query.trainingJobId = ''; | this.curDashboardInfo.query.trainingJobId = ''; | ||||
| this.curDashboardInfo.query.dir = ''; | this.curDashboardInfo.query.dir = ''; | ||||
| this.curDashboardInfo.query.path = ''; | this.curDashboardInfo.query.path = ''; | ||||
| this.tabData.activeName = this.tabData.tabPanes[0].name; | |||||
| this.$message.error(this.$t('trainingDashboard.invalidId')); | this.$message.error(this.$t('trainingDashboard.invalidId')); | ||||
| } | } | ||||
| }, | }, | ||||
| @@ -306,35 +342,54 @@ export default { | |||||
| * Router back to profiling-dashboard | * Router back to profiling-dashboard | ||||
| */ | */ | ||||
| backToDdashboard() { | backToDdashboard() { | ||||
| let path = '/profiling/profiling-dashboard'; | |||||
| if (this.tabData.activeName === this.tabData.tabPanes[1].name) { | |||||
| path = '/profiling/resource-utilization'; | |||||
| } | |||||
| this.$router.push({ | this.$router.push({ | ||||
| path: '/profiling/profiling-dashboard', | |||||
| path: path, | |||||
| query: { | query: { | ||||
| dir: this.curDashboardInfo.query.dir, | dir: this.curDashboardInfo.query.dir, | ||||
| id: this.curDashboardInfo.query.id, | id: this.curDashboardInfo.query.id, | ||||
| path: this.curDashboardInfo.query.path, | path: this.curDashboardInfo.query.path, | ||||
| activePane: this.tabData.activeName, | |||||
| cardNum: this.curDashboardInfo.curCardNum, | |||||
| }, | }, | ||||
| }); | }); | ||||
| }, | }, | ||||
| /** | |||||
| * Router to memory-detail | |||||
| */ | |||||
| jumpToMemoryDetail() { | |||||
| if (this.$route.path !== '/profiling/memory-detail') { | |||||
| this.$router.push({ | |||||
| path: '/profiling/memory-detail', | |||||
| query: { | |||||
| dir: this.curDashboardInfo.query.dir, | |||||
| id: this.curDashboardInfo.query.id, | |||||
| cardNum: this.curDashboardInfo.curCardNum, | |||||
| path: this.curDashboardInfo.query.path, | |||||
| }, | |||||
| }); | |||||
| } | |||||
| }, | |||||
| collapseLeft() { | collapseLeft() { | ||||
| this.collapse = !this.collapse; | this.collapse = !this.collapse; | ||||
| this.$bus.$emit('collapse'); | this.$bus.$emit('collapse'); | ||||
| }, | }, | ||||
| /** | |||||
| * Tab button click | |||||
| * @param {Object} tabItem Tab | |||||
| */ | |||||
| paneChange(tabItem) { | |||||
| if (tabItem && tabItem.name) { | |||||
| let path = ''; | |||||
| switch (tabItem.name) { | |||||
| case this.tabData.tabPanes[0].name: | |||||
| path = '/profiling/profiling-dashboard'; | |||||
| break; | |||||
| case this.tabData.tabPanes[1].name: | |||||
| path = '/profiling/resource-utilization'; | |||||
| break; | |||||
| } | |||||
| if (path) { | |||||
| this.$router.push({ | |||||
| path: path, | |||||
| query: { | |||||
| dir: this.curDashboardInfo.query.dir, | |||||
| id: this.curDashboardInfo.query.id, | |||||
| path: this.curDashboardInfo.query.path, | |||||
| activePane: this.tabData.activeName, | |||||
| cardNum: this.curDashboardInfo.curCardNum, | |||||
| }, | |||||
| }); | |||||
| } | |||||
| } | |||||
| }, | |||||
| }, | }, | ||||
| destroyed() { | destroyed() { | ||||
| this.$bus.$off('collapse'); | this.$bus.$off('collapse'); | ||||
| @@ -346,9 +401,20 @@ export default { | |||||
| height: 100%; | height: 100%; | ||||
| background: #fff; | background: #fff; | ||||
| } | } | ||||
| .prof-wrap .prof-head { | |||||
| height: 50px; | |||||
| line-height: 50px; | |||||
| display: inline-block; | |||||
| } | |||||
| .prof-wrap .prof-head .path-message { | |||||
| display: inline-block; | |||||
| line-height: 20px; | |||||
| padding: 18px 0; | |||||
| font-weight: bold; | |||||
| } | |||||
| .prof-wrap .prof-content { | .prof-wrap .prof-content { | ||||
| height: 100%; | |||||
| padding: 24px 24px 24px 0; | |||||
| height: calc(100% - 50px); | |||||
| padding: 0 24px 24px 0; | |||||
| } | } | ||||
| .prof-wrap .prof-content > div { | .prof-wrap .prof-content > div { | ||||
| float: left; | float: left; | ||||
| @@ -371,25 +437,12 @@ export default { | |||||
| background: #edf0f5; | background: #edf0f5; | ||||
| word-wrap: break-word; | word-wrap: break-word; | ||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left .helper .summary-path { | |||||
| line-height: 24px; | |||||
| font-size: 14px; | |||||
| overflow: hidden; | |||||
| font-weight: bold; | |||||
| padding-bottom: 10px; | |||||
| word-break: break-all; | |||||
| text-overflow: -o-ellipsis-lastline; | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| display: -webkit-box; | |||||
| -webkit-line-clamp: 4; | |||||
| -webkit-box-orient: vertical; | |||||
| } | |||||
| .prof-wrap .prof-content .prof-content-left .helper .nowrap-style { | .prof-wrap .prof-content .prof-content-left .helper .nowrap-style { | ||||
| white-space: nowrap; | white-space: nowrap; | ||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left .helper .cur-card { | .prof-wrap .prof-content .prof-content-left .helper .cur-card { | ||||
| margin-bottom: 32px; | |||||
| padding-bottom: 20px; | |||||
| border-bottom: 1px solid #d9d9d9; | |||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left .helper .cur-card .card-select { | .prof-wrap .prof-content .prof-content-left .helper .cur-card .card-select { | ||||
| width: calc(100% - 120px); | width: calc(100% - 120px); | ||||
| @@ -398,9 +451,9 @@ export default { | |||||
| margin-right: 14px; | margin-right: 14px; | ||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left .helper .helper-title { | .prof-wrap .prof-content .prof-content-left .helper .helper-title { | ||||
| font-size: 20px; | |||||
| font-size: 18px; | |||||
| font-weight: bold; | font-weight: bold; | ||||
| margin-bottom: 32px; | |||||
| margin: 24px 0; | |||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left .helper .helper-title .el-icon-rank { | .prof-wrap .prof-content .prof-content-left .helper .helper-title .el-icon-rank { | ||||
| float: right; | float: right; | ||||
| @@ -423,24 +476,6 @@ export default { | |||||
| margin-bottom: 20px; | margin-bottom: 20px; | ||||
| font-size: 16px; | font-size: 16px; | ||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left .helper .memory-title-container { | |||||
| margin-top: 20px; | |||||
| padding-top: 20px; | |||||
| border-top: 1px solid #d9d9d9; | |||||
| } | |||||
| .prof-wrap .prof-content .prof-content-left .helper .memory-title-container .memory-title { | |||||
| float: left; | |||||
| font-weight: bold; | |||||
| font-size: 16px; | |||||
| } | |||||
| .prof-wrap .prof-content .prof-content-left .helper .memory-title-container .memory-link { | |||||
| float: right; | |||||
| line-height: 21px; | |||||
| cursor: pointer; | |||||
| color: #3399ff; | |||||
| } | |||||
| .prof-wrap .prof-content .prof-content-left .helper .link-title { | .prof-wrap .prof-content .prof-content-left .helper .link-title { | ||||
| cursor: pointer; | cursor: pointer; | ||||
| @@ -482,10 +517,10 @@ export default { | |||||
| line-height: 86px; | line-height: 86px; | ||||
| z-index: 1; | z-index: 1; | ||||
| text-align: center; | text-align: center; | ||||
| background-image: url("../../assets/images/collapse-left.svg"); | |||||
| background-image: url('../../assets/images/collapse-left.svg'); | |||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left .collapse-btn.collapse { | .prof-wrap .prof-content .prof-content-left .collapse-btn.collapse { | ||||
| background-image: url("../../assets/images/collapse-right.svg"); | |||||
| background-image: url('../../assets/images/collapse-right.svg'); | |||||
| } | } | ||||
| .prof-wrap .prof-content .prof-content-left.collapse { | .prof-wrap .prof-content .prof-content-left.collapse { | ||||
| width: 0; | width: 0; | ||||
| @@ -496,6 +531,25 @@ export default { | |||||
| transition: width 0.2s; | transition: width 0.2s; | ||||
| position: relative; | position: relative; | ||||
| } | } | ||||
| .prof-content-right .tab-container { | |||||
| width: 100%; | |||||
| padding-bottom: 5px; | |||||
| } | |||||
| .prof-content-right .tab-container .el-tabs__item { | |||||
| font-size: 14px; | |||||
| line-height: 14px; | |||||
| height: 27px; | |||||
| } | |||||
| .prof-content-right .tab-container .el-tabs__item.is-active { | |||||
| color: #00a5a7; | |||||
| font-weight: bold; | |||||
| } | |||||
| .prof-content-right .router-container.detail { | |||||
| height: 100%; | |||||
| } | |||||
| .prof-content-right .router-container.dashboard { | |||||
| height: calc(100% - 46px); | |||||
| } | |||||
| .prof-wrap .prof-content .prof-content-right .close { | .prof-wrap .prof-content .prof-content-right .close { | ||||
| position: absolute; | position: absolute; | ||||
| right: 0; | right: 0; | ||||
+ 816
- 0
mindinsight/ui/src/views/profiling/resource-utilization.vue
View File
| @@ -0,0 +1,816 @@ | |||||
| <!-- | |||||
| Copyright 2021 Huawei Technologies Co., Ltd.All Rights Reserved. | |||||
| Licensed under the Apache License, Version 2.0 (the "License"); | |||||
| you may not use this file except in compliance with the License. | |||||
| You may obtain a copy of the License at | |||||
| http://www.apache.org/licenses/LICENSE-2.0 | |||||
| Unless required by applicable law or agreed to in writing, software | |||||
| distributed under the License is distributed on an "AS IS" BASIS, | |||||
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |||||
| See the License for the specific language governing permissions and | |||||
| limitations under the License. | |||||
| --> | |||||
| <template> | |||||
| <div class="cl-resource-content"> | |||||
| <div class="dashboard-item"> | |||||
| <div class="title-item"> | |||||
| <div class="title-text"> | |||||
| {{$t('profiling.structuralCpuUtil')}} | |||||
| </div> | |||||
| <div class="detail-link" | |||||
| :class="{disabled:!cpuInfo.initOver || cpuInfo.noData}"> | |||||
| <button :disabled="!cpuInfo.initOver || cpuInfo.noData" | |||||
| @click="jumpToCpuDetail"> | |||||
| {{$t('profiling.viewDetail')}} | |||||
| <i class="el-icon-d-arrow-right"></i> | |||||
| </button> | |||||
| </div> | |||||
| </div> | |||||
| <div class="content-item"> | |||||
| <div class="cpu-info" v-if="!cpuInfo.noData"> | |||||
| <div class="cpu-chart" | |||||
| id="deviceCpuChart" | |||||
| ref="deviceCpuChart"></div> | |||||
| <div class="cpu-chart-info"> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.logicCores')}}</span><span>{{deviceCpuChart.logicCores}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgUserUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgUser)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSysUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgSystem)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgIOUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgIO)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgIdleUtilization')}}</span> | |||||
| <span>{{addPercentSign(deviceCpuChart.cpuAvgFree)}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgWaitingProcess')}}</span><span>{{deviceCpuChart.cpuAvgProcess}}</span> | |||||
| </div> | |||||
| <div class="info-line"> | |||||
| <span>{{$t('profiling.avgSwitchCount')}}</span><span>{{deviceCpuChart.cpuAvgSwitch}}</span> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="noData-content" v-else> | |||||
| <img :src="require('@/assets/images/nodata.png')" alt="" /> | |||||
| <p>{{cpuInfo.initOver?$t("public.noData"):$t("public.dataLoading")}}</p> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="dashboard-item margin-item"> | |||||
| <div class="title-item"> | |||||
| <div class="title-text"> | |||||
| {{$t('profiling.memory.usedMemory')}} | |||||
| </div> | |||||
| <div class="detail-link" | |||||
| :class="{disabled:!graphicsInitOver || noGraphicsDataFlag}"> | |||||
| <button :disabled="!graphicsInitOver || noGraphicsDataFlag" | |||||
| @click="jumpToMemoryDetail"> | |||||
| {{$t('profiling.viewDetail')}} | |||||
| <i class="el-icon-d-arrow-right"></i> | |||||
| </button> | |||||
| </div> | |||||
| </div> | |||||
| <div class="content-item"> | |||||
| <div class="noData-content" | |||||
| v-show="!graphicsInitOver || noGraphicsDataFlag"> | |||||
| <div> | |||||
| <img :src="require('@/assets/images/nodata.png')" | |||||
| alt="" /> | |||||
| </div> | |||||
| <div v-if="graphicsInitOver && noGraphicsDataFlag" | |||||
| class="noData-text">{{$t("public.noData")}}</div> | |||||
| <div v-else | |||||
| class="noData-text">{{$t("public.dataLoading")}}</div> | |||||
| </div> | |||||
| <div class="dashboard-chart-content" | |||||
| v-show="!noGraphicsDataFlag && graphicsInitOver" | |||||
| ref="dashboardMemoryChart"></div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import RequestService from '../../services/request-service'; | |||||
| import echarts from 'echarts'; | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| // ------------------------common-------------------- | |||||
| queryData: { | |||||
| dir: '', | |||||
| id: '', | |||||
| path: '', | |||||
| activePane: '', | |||||
| }, | |||||
| summaryPath: '', | |||||
| curCardNum: '', | |||||
| pageResizeTimer: null, // Timer for changing the window size | |||||
| firstInit: true, // First init of page | |||||
| // ------------------------memory-------------------- | |||||
| graphicsInitOver: false, // Graphics loading completed | |||||
| noGraphicsDataFlag: false, // No graphics data | |||||
| totalMemory: '-', // Total memory | |||||
| memoryGraphicsChart: null, // Memory chart object | |||||
| // ------------------------cpu----------------------- | |||||
| deviceCpuChart: { | |||||
| id: 'deviceCpuChart', | |||||
| chartDom: null, | |||||
| option: { | |||||
| tooltip: { | |||||
| trigger: 'axis', | |||||
| formatter: null, | |||||
| confine: true, | |||||
| }, | |||||
| legend: { | |||||
| right: 70, | |||||
| top: 8, | |||||
| data: [], | |||||
| }, | |||||
| xAxis: { | |||||
| name: '', | |||||
| data: [], | |||||
| }, | |||||
| yAxis: { | |||||
| name: this.$t('profiling.utilizationTitle'), | |||||
| type: 'value', | |||||
| }, | |||||
| dataZoom: [ | |||||
| { | |||||
| start: 0, | |||||
| end: 100, | |||||
| bottom: 0, | |||||
| }, | |||||
| { | |||||
| start: 0, | |||||
| end: 100, | |||||
| type: 'inside', | |||||
| bottom: 0, | |||||
| }, | |||||
| ], | |||||
| grid: { | |||||
| left: 40, | |||||
| top: 40, | |||||
| right: 70, | |||||
| bottom: 60, | |||||
| }, | |||||
| series: [], | |||||
| }, | |||||
| logicCores: 0, | |||||
| cpuAvgUser: 0, | |||||
| cpuAvgSystem: 0, | |||||
| cpuAvgIO: 0, | |||||
| cpuAvgFree: 0, | |||||
| cpuAvgProcess: 0, | |||||
| cpuAvgSwitch: 0, | |||||
| }, // The total data of device cpu info | |||||
| cpuInfo: { | |||||
| initOver: false, | |||||
| noData: true, | |||||
| stepArray: [], | |||||
| cpuInfoStr: { | |||||
| user_utilization: this.$t('profiling.userUtilization'), | |||||
| sys_utilization: this.$t('profiling.sysUtilization'), | |||||
| io_utilization: this.$t('profiling.ioUtilization'), | |||||
| idle_utilization: this.$t('profiling.idleUtilization'), | |||||
| }, | |||||
| samplingInterval: 0, | |||||
| }, | |||||
| }; | |||||
| }, | |||||
| watch: { | |||||
| // Listening card number | |||||
| '$parent.curDashboardInfo.curCardNum': { | |||||
| handler(newValue) { | |||||
| if (isNaN(newValue) || newValue === this.curCardNum || this.firstInit) { | |||||
| return; | |||||
| } | |||||
| this.curCardNum = newValue; | |||||
| this.noGraphicsDataFlag = false; | |||||
| this.graphicsInitOver = false; | |||||
| this.init(); | |||||
| }, | |||||
| deep: true, | |||||
| immediate: true, | |||||
| }, | |||||
| }, | |||||
| mounted() { | |||||
| window.addEventListener('resize', this.resizeCallback, false); | |||||
| this.$bus.$on('collapse', this.resizeCallback); | |||||
| this.queryData = { | |||||
| dir: this.$route.query.dir, | |||||
| id: this.$route.query.id, | |||||
| path: this.$route.query.path, | |||||
| activePane: this.$route.query.activePane, | |||||
| }; | |||||
| if ( | |||||
| this.$route.query && | |||||
| this.$route.query.path && | |||||
| !isNaN(this.$route.query.cardNum) | |||||
| ) { | |||||
| this.summaryPath = this.$route.query.path; | |||||
| this.curCardNum = this.$route.query.cardNum; | |||||
| this.init(); | |||||
| } | |||||
| this.firstInit = false; | |||||
| }, | |||||
| methods: { | |||||
| // ------------------common--------------------- | |||||
| init() { | |||||
| this.getMemorySummary(); | |||||
| this.queryCpuInfo(); | |||||
| }, | |||||
| /** | |||||
| * Window resize | |||||
| */ | |||||
| resizeCallback() { | |||||
| if (this.pageResizeTimer) { | |||||
| clearTimeout(this.pageResizeTimer); | |||||
| this.pageResizeTimer = null; | |||||
| } | |||||
| this.pageResizeTimer = setTimeout(() => { | |||||
| if (this.memoryGraphicsChart) { | |||||
| this.memoryGraphicsChart.resize(); | |||||
| } | |||||
| if (this.deviceCpuChart.chartDom) { | |||||
| this.deviceCpuChart.chartDom.resize(); | |||||
| } | |||||
| }, 300); | |||||
| }, | |||||
| // ----------------memory----------------------------------- | |||||
| /** | |||||
| * Router to memory-detail | |||||
| */ | |||||
| jumpToMemoryDetail() { | |||||
| this.$router.push({ | |||||
| path: '/profiling/memory-detail', | |||||
| query: { | |||||
| dir: this.queryData.dir, | |||||
| id: this.queryData.id, | |||||
| cardNum: this.curCardNum, | |||||
| path: this.queryData.path, | |||||
| activePane: this.queryData.activePane, | |||||
| }, | |||||
| }); | |||||
| }, | |||||
| /** | |||||
| * Obtains base memory information | |||||
| */ | |||||
| getMemorySummary() { | |||||
| if (!this.summaryPath || isNaN(this.curCardNum)) { | |||||
| this.noGraphicsDataFlag = true; | |||||
| this.graphicsInitOver = true; | |||||
| return; | |||||
| } | |||||
| const params = { | |||||
| dir: this.summaryPath, | |||||
| device_id: this.curCardNum, | |||||
| }; | |||||
| RequestService.queryMemorySummary(params) | |||||
| .then( | |||||
| (res) => { | |||||
| if (res && res.data && res.data.summary) { | |||||
| const resData = res.data.summary; | |||||
| this.totalMemory = isNaN(resData.capacity) | |||||
| ? '-' | |||||
| : resData.capacity; | |||||
| } else { | |||||
| this.totalMemory = '-'; | |||||
| } | |||||
| }, | |||||
| () => { | |||||
| this.overViewInitOver = true; | |||||
| }, | |||||
| ) | |||||
| .then(() => { | |||||
| this.getMemoryGraphics(); | |||||
| }); | |||||
| }, | |||||
| /** | |||||
| * Obtains memory details | |||||
| */ | |||||
| getMemoryGraphics() { | |||||
| const params = { | |||||
| dir: this.summaryPath, | |||||
| device_id: this.curCardNum, | |||||
| }; | |||||
| RequestService.queryMemoryGraphics(params).then( | |||||
| (res) => { | |||||
| this.graphicsInitOver = true; | |||||
| if (!res || !res.data || !Object.keys(res.data).length) { | |||||
| this.noGraphicsDataFlag = true; | |||||
| return; | |||||
| } | |||||
| this.noGraphicsDataFlag = false; | |||||
| const resData = res.data[Object.keys(res.data)[0]]; | |||||
| this.currentGraphicsDic = resData; | |||||
| this.graphicsOption = this.formatGraphicsOption(); | |||||
| this.drawGraphics(); | |||||
| }, | |||||
| () => { | |||||
| this.graphicsInitOver = true; | |||||
| this.noGraphicsDataFlag = true; | |||||
| }, | |||||
| ); | |||||
| }, | |||||
| /** | |||||
| * Sorting chart data | |||||
| * @return {Object} Chart data | |||||
| */ | |||||
| formatGraphicsOption() { | |||||
| if (!this.currentGraphicsDic) { | |||||
| return {}; | |||||
| } | |||||
| const that = this; | |||||
| const allocationData = []; | |||||
| const topData = []; | |||||
| const staticData = []; | |||||
| const lifeCycle = []; | |||||
| let startIndex = -1; | |||||
| let endIndex = -1; | |||||
| this.currentGraphicsDic.nodes.forEach((node, index) => { | |||||
| if (node.node_id === this.currentGraphicsDic.fp_start) { | |||||
| startIndex = index; | |||||
| } else if (node.node_id === this.currentGraphicsDic.bp_end) { | |||||
| endIndex = index; | |||||
| } | |||||
| allocationData.push([ | |||||
| node.node_id, | |||||
| this.currentGraphicsDic.lines[index], | |||||
| ]); | |||||
| topData.push([node.node_id, this.totalMemory]); | |||||
| staticData.push([node.node_id, this.currentGraphicsDic.static_mem]); | |||||
| const curLifeCycle = []; | |||||
| node.outputs.forEach((output) => { | |||||
| curLifeCycle.push([output.life_start, output.life_end]); | |||||
| }); | |||||
| lifeCycle.push(curLifeCycle); | |||||
| }); | |||||
| const allocationLine = { | |||||
| id: this.graphicsId, | |||||
| name: this.$t('profiling.memory.curMemorySize'), | |||||
| data: allocationData, | |||||
| type: 'line', | |||||
| showSymbol: false, | |||||
| lineStyle: { | |||||
| color: '#00a5a7', | |||||
| }, | |||||
| color: '#00a5a7', | |||||
| markLine: { | |||||
| lineStyle: { | |||||
| color: '#00a5a7', | |||||
| }, | |||||
| label: { | |||||
| formatter(param) { | |||||
| let labelStr = ''; | |||||
| if (param.dataIndex) { | |||||
| labelStr = `${that.$t('profiling.memory.bpEnd')}${that.$t( | |||||
| 'symbols.colon', | |||||
| )}${endIndex}`; | |||||
| } else { | |||||
| labelStr = `${that.$t('profiling.memory.fpStart')}${that.$t( | |||||
| 'symbols.colon', | |||||
| )}${startIndex}`; | |||||
| } | |||||
| return labelStr; | |||||
| }, | |||||
| }, | |||||
| symbol: ['none', 'none'], | |||||
| data: [{xAxis: startIndex}, {xAxis: endIndex}], | |||||
| }, | |||||
| markPoint: { | |||||
| symbol: 'emptyCircle', | |||||
| symbolSize: 8, | |||||
| itemStyle: { | |||||
| color: '#f45c5e', | |||||
| }, | |||||
| data: [ | |||||
| { | |||||
| coord: allocationData[this.curSelectedPointIndex], | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| }; | |||||
| const topLine = { | |||||
| data: topData, | |||||
| name: this.$t('profiling.memory.totalMemory'), | |||||
| type: 'line', | |||||
| smooth: 0, | |||||
| symbol: 'none', | |||||
| lineStyle: { | |||||
| color: '#fdca5a', | |||||
| }, | |||||
| color: '#fdca5a', | |||||
| }; | |||||
| const staticLine = { | |||||
| data: staticData, | |||||
| name: this.$t('profiling.memory.staticMenory'), | |||||
| type: 'line', | |||||
| smooth: 0, | |||||
| symbol: 'none', | |||||
| lineStyle: { | |||||
| color: '#3d58a6', | |||||
| }, | |||||
| color: '#3d58a6', | |||||
| }; | |||||
| const seriesData = [allocationLine, staticLine]; | |||||
| const selectedDic = {}; | |||||
| selectedDic[this.$t('profiling.memory.curMemorySize')] = true; | |||||
| selectedDic[this.$t('profiling.memory.staticMenory')] = true; | |||||
| const legendData = [ | |||||
| this.$t('profiling.memory.curMemorySize'), | |||||
| this.$t('profiling.memory.staticMenory'), | |||||
| ]; | |||||
| if (!isNaN(this.totalMemory)) { | |||||
| seriesData.push(topLine); | |||||
| legendData.unshift(this.$t('profiling.memory.totalMemory')); | |||||
| selectedDic[this.$t('profiling.memory.totalMemory')] = false; | |||||
| } | |||||
| const optionData = { | |||||
| legend: { | |||||
| show: true, | |||||
| icon: 'circle', | |||||
| data: legendData, | |||||
| selected: selectedDic, | |||||
| }, | |||||
| grid: { | |||||
| top: 60, | |||||
| bottom: 60, | |||||
| }, | |||||
| xAxis: { | |||||
| name: this.$t('profiling.memory.chartXaxisUnit'), | |||||
| type: 'value', | |||||
| show: true, | |||||
| }, | |||||
| yAxis: { | |||||
| name: this.$t('profiling.memory.chartYaxisUnit'), | |||||
| scale: true, | |||||
| nameGap: 24, | |||||
| }, | |||||
| tooltip: { | |||||
| trigger: 'axis', | |||||
| axisPointer: { | |||||
| type: 'line', | |||||
| }, | |||||
| formatter(params) { | |||||
| let tipStr = ''; | |||||
| params.forEach((param) => { | |||||
| if (param.seriesId === that.graphicsId) { | |||||
| const dataIndex = param.dataIndex; | |||||
| const curData = that.currentGraphicsDic.nodes[dataIndex]; | |||||
| if (curData) { | |||||
| tipStr = | |||||
| `<div>${that.$t('profiling.memory.curOperaterId')}` + | |||||
| `${that.$t('symbols.colon')}${curData.node_id}</div>` + | |||||
| `<div>${that.$t('profiling.memory.curOperator')}` + | |||||
| `${that.$t('symbols.colon')}${curData.name}</div>` + | |||||
| `<div>${that.$t( | |||||
| 'profiling.memory.curOperatorMemorySize', | |||||
| )}` + | |||||
| `${that.$t('symbols.colon')}${that.formmateNummber( | |||||
| curData.size, | |||||
| )}</div>` + | |||||
| `<div>${that.$t('profiling.memory.curMemorySize')}` + | |||||
| `${that.$t('symbols.colon')}${that.formmateNummber( | |||||
| that.currentGraphicsDic.lines[dataIndex], | |||||
| )}</div>` + | |||||
| `<div>${that.$t('profiling.memory.memoryChanged')}` + | |||||
| `${that.$t('symbols.colon')}${that.formmateNummber( | |||||
| curData.allocated, | |||||
| )}</div>`; | |||||
| } | |||||
| } | |||||
| }); | |||||
| return tipStr; | |||||
| }, | |||||
| }, | |||||
| dataZoom: [ | |||||
| { | |||||
| type: 'inside', | |||||
| filterMode: 'empty', | |||||
| orient: 'horizontal', | |||||
| xAxisIndex: 0, | |||||
| }, | |||||
| { | |||||
| type: 'slider', | |||||
| filterMode: 'empty', | |||||
| orient: 'horizontal', | |||||
| xAxisIndex: 0, | |||||
| bottom: 10, | |||||
| }, | |||||
| ], | |||||
| series: seriesData, | |||||
| }; | |||||
| return optionData; | |||||
| }, | |||||
| /** | |||||
| * Charting | |||||
| */ | |||||
| drawGraphics() { | |||||
| if (!this.graphicsOption) { | |||||
| return; | |||||
| } | |||||
| this.$nextTick(() => { | |||||
| if (!this.memoryGraphicsChart) { | |||||
| this.memoryGraphicsChart = echarts.init( | |||||
| this.$refs.dashboardMemoryChart, | |||||
| null, | |||||
| ); | |||||
| } | |||||
| this.memoryGraphicsChart.setOption(this.graphicsOption); | |||||
| this.memoryGraphicsChart.resize(); | |||||
| }); | |||||
| }, | |||||
| /** | |||||
| * Convert Numeric display format | |||||
| * @param {Number} number | |||||
| * @return {String} Formatted number | |||||
| */ | |||||
| formmateNummber(number) { | |||||
| const digitMax = 10; | |||||
| const digitMin = 1; | |||||
| if (!isNaN(number) && number.toString().length > this.numberLimit) { | |||||
| if (number > digitMin && number < digitMax) { | |||||
| return number.toFixed(4); | |||||
| } else { | |||||
| return number.toExponential(4); | |||||
| } | |||||
| } else { | |||||
| return number; | |||||
| } | |||||
| }, | |||||
| // ----------------cpu----------------------------------- | |||||
| /** | |||||
| * The logic of add percent sign | |||||
| * @param {number | string} number | |||||
| * @return {string} | |||||
| */ | |||||
| addPercentSign(number) { | |||||
| if (number === 0 || number === '0') { | |||||
| return '0'; | |||||
| } else { | |||||
| return `${number}%`; | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * Query cpu info | |||||
| */ | |||||
| queryCpuInfo( ) { | |||||
| const params = { | |||||
| params: { | |||||
| profile: this.queryData.dir, | |||||
| train_id: this.queryData.id, | |||||
| }, | |||||
| body: { | |||||
| device_id: this.curCardNum, | |||||
| filter_condition: {}, | |||||
| }, | |||||
| }; | |||||
| this.cpuInfo.noData = true; | |||||
| this.cpuInfo.initOver = false; | |||||
| RequestService.getCpuUtilization(params).then( | |||||
| (res) => { | |||||
| this.cpuInfo.initOver = true; | |||||
| if (res && res.data) { | |||||
| this.cpuInfo.noData = !res.data.step_total_num; | |||||
| this.cpuInfo.stepArray = res.data.step_info; | |||||
| this.samplingInterval = res.data.sampling_interval; | |||||
| this.deviceCpuChart.logicCores = res.data.cpu_processor_num; | |||||
| const deviceInfo = res.data.device_info; | |||||
| if (deviceInfo && this.samplingInterval) { | |||||
| this.initDeviceCpu(deviceInfo); | |||||
| } else { | |||||
| this.clearCpuChart(); | |||||
| this.cpuInfo.noData = true; | |||||
| } | |||||
| } else { | |||||
| this.clearCpuChart(); | |||||
| } | |||||
| }, | |||||
| () => { | |||||
| this.clearCpuChart(); | |||||
| this.cpuInfo.initOver = true; | |||||
| }, | |||||
| ); | |||||
| }, | |||||
| /** | |||||
| * clear cpu chart | |||||
| */ | |||||
| clearCpuChart() { | |||||
| if (this.deviceCpuChart.chartDom) { | |||||
| this.deviceCpuChart.chartDom.clear(); | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * format chart tip | |||||
| * @param {Object} params | |||||
| * @param {Array} stepArray | |||||
| * @return {String} | |||||
| */ | |||||
| formatCpuChartTip(params, stepArray) { | |||||
| const data = params; | |||||
| let str = ''; | |||||
| if (data && data.length) { | |||||
| const colorArray = [ | |||||
| '#c23531', | |||||
| '#2f4554', | |||||
| '#61a0a8', | |||||
| '#d48265', | |||||
| ]; | |||||
| const index = data[0].dataIndex; | |||||
| str += `step: ${stepArray[index]}`; | |||||
| data.forEach((item, index) => { | |||||
| str += `<br><span class="cpu-chart-tip" style="background-color:${colorArray[index]};"></span>` + | |||||
| `${item.seriesName}: ${item.data}`; | |||||
| }); | |||||
| str += `</div>`; | |||||
| } | |||||
| return str; | |||||
| }, | |||||
| /** | |||||
| * Init device cpu chart | |||||
| * @param {Object} deviceInfo | |||||
| */ | |||||
| initDeviceCpu(deviceInfo) { | |||||
| const series = []; | |||||
| const legend = []; | |||||
| Object.keys(this.cpuInfo.cpuInfoStr).forEach((val) => { | |||||
| const info = deviceInfo[val]; | |||||
| if (info && info.metrics) { | |||||
| const item = { | |||||
| type: 'line', | |||||
| name: this.cpuInfo.cpuInfoStr[val], | |||||
| data: info.metrics, | |||||
| showSymbol: false, | |||||
| }; | |||||
| series.push(item); | |||||
| legend.push(item.name); | |||||
| } | |||||
| }); | |||||
| this.deviceCpuChart.cpuAvgUser = deviceInfo.user_utilization.avg_value; | |||||
| this.deviceCpuChart.cpuAvgSystem = deviceInfo.sys_utilization.avg_value; | |||||
| this.deviceCpuChart.cpuAvgIO = deviceInfo.io_utilization.avg_value; | |||||
| this.deviceCpuChart.cpuAvgFree = deviceInfo.idle_utilization.avg_value; | |||||
| this.deviceCpuChart.cpuAvgProcess = deviceInfo.runable_processes.avg_value; | |||||
| this.deviceCpuChart.cpuAvgSwitch = deviceInfo.context_switch_count.avg_value; | |||||
| this.deviceCpuChart.option.series = series; | |||||
| this.deviceCpuChart.option.xAxis.name = `${this.$t('profiling.sampleInterval')}\n${ | |||||
| this.$t('symbols.leftbracket')}${this.samplingInterval}ms${this.$t('symbols.rightbracket')}`; | |||||
| this.deviceCpuChart.option.xAxis.data = deviceInfo[Object.keys(deviceInfo)[0]].metrics.map( | |||||
| (val, index) => index + 1, | |||||
| ); | |||||
| this.deviceCpuChart.option.legend.data = legend; | |||||
| this.deviceCpuChart.option.tooltip.formatter = (params) => { | |||||
| return this.formatCpuChartTip(params, this.cpuInfo.stepArray); | |||||
| }; | |||||
| this.$nextTick(() => { | |||||
| if (!this.deviceCpuChart.chartDom) { | |||||
| if (this.$refs.deviceCpuChart) { | |||||
| this.deviceCpuChart.chartDom = echarts.init(this.$refs.deviceCpuChart); | |||||
| } | |||||
| } | |||||
| this.deviceCpuChart.chartDom.setOption(this.deviceCpuChart.option); | |||||
| }); | |||||
| }, | |||||
| /** | |||||
| * Router to memory-detail | |||||
| */ | |||||
| jumpToCpuDetail() { | |||||
| if (this.$route.path !== '/profiling/cpu-detail') { | |||||
| this.$router.push({ | |||||
| path: '/profiling/cpu-detail', | |||||
| query: { | |||||
| dir: this.queryData.dir, | |||||
| id: this.queryData.id, | |||||
| cardNum: this.curCardNum, | |||||
| path: this.queryData.path, | |||||
| activePane: this.queryData.activePane, | |||||
| }, | |||||
| }); | |||||
| } | |||||
| }, | |||||
| }, | |||||
| destroyed() { | |||||
| // Remove the listener of window size change | |||||
| window.removeEventListener('resize', this.resizeCallback); | |||||
| // Remove timer | |||||
| if (this.pageResizeTimer) { | |||||
| clearTimeout(this.pageResizeTimer); | |||||
| this.pageResizeTimer = null; | |||||
| } | |||||
| // Remove bus | |||||
| this.$bus.$off('collapse'); | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style> | |||||
| .cl-resource-content { | |||||
| height: 100%; | |||||
| } | |||||
| .cl-resource-content .dashboard-item { | |||||
| width: 100%; | |||||
| height: calc(50% - 10px); | |||||
| padding: 15px; | |||||
| border: solid 1px #d9d9d9; | |||||
| border-radius: 4px; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .title-item { | |||||
| display: flex; | |||||
| height: 24px; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .title-item .title-text { | |||||
| flex: 1; | |||||
| font-size: 18px; | |||||
| font-weight: bold; | |||||
| line-height: 24px; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .title-item .detail-link { | |||||
| cursor: pointer; | |||||
| font-size: 12px; | |||||
| height: 18px; | |||||
| line-height: 12px; | |||||
| padding-top: 2px; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .title-item .detail-link a { | |||||
| color: #00a5a7; | |||||
| padding-right: 6px; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .title-item .detail-link button { | |||||
| color: #00a5a7; | |||||
| border: none; | |||||
| background-color: #fff; | |||||
| cursor: pointer; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .title-item .detail-link.disabled button { | |||||
| color: #c0c4cc; | |||||
| cursor: not-allowed; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .content-item { | |||||
| height: calc(100% - 44px); | |||||
| margin-top: 20px; | |||||
| } | |||||
| .cl-resource-content .dashboard-item .content-item .dashboard-chart-content { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| .cl-resource-content .margin-item { | |||||
| margin-top: 20px; | |||||
| } | |||||
| .cl-resource-content .noData-content { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| flex-direction: column; | |||||
| } | |||||
| .cl-resource-content .noData-content p, | |||||
| .cl-resource-content .noData-content .noData-text { | |||||
| font-size: 16px; | |||||
| } | |||||
| .content-item .cpu-info { | |||||
| display: grid; | |||||
| grid-template-columns: 1fr 300px; | |||||
| height: 100%; | |||||
| } | |||||
| .content-item .cpu-info .cpu-chart { | |||||
| height: 100%; | |||||
| width: 100% | |||||
| } | |||||
| .content-item .cpu-info .cpu-chart-info { | |||||
| height: 100%; | |||||
| width: 100%; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| padding-left: 20px; | |||||
| background-color: #f1f1f1; | |||||
| } | |||||
| .content-item .cpu-chart-info .info-title { | |||||
| font-size: 14px; | |||||
| font-weight: bold; | |||||
| line-height: 30px; | |||||
| } | |||||
| .content-item .cpu-chart-info .info-line { | |||||
| line-height: 30px; | |||||
| } | |||||
| .cpu-chart-tip { | |||||
| display: inline-block; | |||||
| margin-right: 5px; | |||||
| border-radius: 10px; | |||||
| width: 10px; | |||||
| height: 10px; | |||||
| } | |||||
| </style> | |||||
+ 8
- 7
mindinsight/ui/src/views/profiling/step-trace.vue
View File
| @@ -1,5 +1,5 @@ | |||||
| <!-- | <!-- | ||||
| Copyright 2020 Huawei Technologies Co., Ltd.All Rights Reserved. | |||||
| Copyright 2020-2021 Huawei Technologies Co., Ltd.All Rights Reserved. | |||||
| Licensed under the Apache License, Version 2.0 (the "License"); | Licensed under the Apache License, Version 2.0 (the "License"); | ||||
| you may not use this file except in compliance with the License. | you may not use this file except in compliance with the License. | ||||
| @@ -945,7 +945,7 @@ export default { | |||||
| } | } | ||||
| .step-trace .step-trace-title { | .step-trace .step-trace-title { | ||||
| padding: 0 15px; | padding: 0 15px; | ||||
| font-size: 16px; | |||||
| font-size: 18px; | |||||
| font-weight: bold; | font-weight: bold; | ||||
| } | } | ||||
| .step-trace .step-trace-title .el-icon-question { | .step-trace .step-trace-title .el-icon-question { | ||||
| @@ -999,12 +999,12 @@ export default { | |||||
| } | } | ||||
| .step-trace .pf-content-middle { | .step-trace .pf-content-middle { | ||||
| padding: 10px 15px 0; | padding: 10px 15px 0; | ||||
| height: calc(100% - 62px); | |||||
| height: calc(100% - 64px); | |||||
| } | } | ||||
| .step-trace .pf-content-middle #trace-container { | .step-trace .pf-content-middle #trace-container { | ||||
| width: 100%; | width: 100%; | ||||
| height: 50%; | height: 50%; | ||||
| border: 1px solid #ccc; | |||||
| border: 1px solid #D9D9D9; | |||||
| overflow: auto; | overflow: auto; | ||||
| } | } | ||||
| .step-trace .pf-content-middle #trace-container .training-trace { | .step-trace .pf-content-middle #trace-container .training-trace { | ||||
| @@ -1024,13 +1024,13 @@ export default { | |||||
| } | } | ||||
| .step-trace .pf-content-middle .chart-wrap { | .step-trace .pf-content-middle .chart-wrap { | ||||
| float: left; | float: left; | ||||
| height: calc(50% - 20px); | |||||
| height: calc(50% - 25px); | |||||
| margin-top: 20px; | margin-top: 20px; | ||||
| margin-right: 15px; | margin-right: 15px; | ||||
| width: calc(33.3% - 10px); | width: calc(33.3% - 10px); | ||||
| border: 1px solid #ccc; | |||||
| border: 1px solid #D9D9D9; | |||||
| padding: 30px 30px 0; | padding: 30px 30px 0; | ||||
| border-radius: 4px; | |||||
| border-radius: 1px; | |||||
| overflow: auto; | overflow: auto; | ||||
| } | } | ||||
| .step-trace .pf-content-middle .chart-wrap:last-child { | .step-trace .pf-content-middle .chart-wrap:last-child { | ||||
| @@ -1045,6 +1045,7 @@ export default { | |||||
| .step-trace .pf-content-middle .chart-wrap .title { | .step-trace .pf-content-middle .chart-wrap .title { | ||||
| margin: 0 0 15px 20px; | margin: 0 0 15px 20px; | ||||
| font-weight: bold; | font-weight: bold; | ||||
| font-size: 16px; | |||||
| } | } | ||||
| .step-trace .pf-content-middle .chart-wrap .rate-wrap { | .step-trace .pf-content-middle .chart-wrap .rate-wrap { | ||||
| font-size: 12px; | font-size: 12px; | ||||