Skip to content

M
mindinsight

MindSpore / mindinsight

通知 8
Star 3
Fork 2
M
mindinsight
提交 67019a3c 编写于 作者: P ph
浏览文件
操作

UI remove hardware visual

上级 81250b16
隐藏空白更改
内联 并排
Showing with 44 addition and 1220 deletion
mindinsight/ui/src/assets/images/cpu-bg.svg 已删除 100644 → 0
浏览文件 @ 81250b16
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1920px" height="1080px" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>矩形</title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="0 0 1920 0 1920 1080 0 1080"></polygon>
<pattern id="pattern-3" width="16.4850993" height="16.4850993" x="-16.4850993" y="-16.4850993" patternUnits="userSpaceOnUse">
<use xlink:href="#image-4" transform="scale(0.34343957,0.34343957)"></use>
</pattern>
<image id="image-4" width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEGWlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPrtzZyMkzlNsNIV0qD8NJQ2TVjShtLp/3d02bpZJNtoi6GT27s6Yyc44M7v9oU9FUHwx6psUxL+3gCAo9Q/bPrQvlQol2tQgKD60+INQ6Ium65k7M5lpurHeZe58853vnnvuuWfvBei5qliWkRQBFpquLRcy4nOHj4g9K5CEh6AXBqFXUR0rXalMAjZPC3e1W99Dwntf2dXd/p+tt0YdFSBxH2Kz5qgLiI8B8KdVy3YBevqRHz/qWh72Yui3MUDEL3q44WPXw3M+fo1pZuQs4tOIBVVTaoiXEI/MxfhGDPsxsNZfoE1q66ro5aJim3XdoLFw72H+n23BaIXzbcOnz5mfPoTvYVz7KzUl5+FRxEuqkp9G/Ajia219thzg25abkRE/BpDc3pqvphHvRFys2weqvp+krbWKIX7nhDbzLOItiM8358pTwdirqpPFnMF2xLc1WvLyOwTAibpbmvHHcvttU57y5+XqNZrLe3lE/Pq8eUj2fXKfOe3pfOjzhJYtB/yll5SDFcSDiH+hRkH25+L+sdxKEAMZahrlSX8ukqMOWy/jXW2m6M9LDBc31B9LFuv6gVKg/0Szi3KAr1kGq1GMjU/aLbnq6/lRxc4XfJ98hTargX++DbMJBSiYMIe9Ck1YAxFkKEAG3xbYaKmDDgYyFK0UGYpfoWYXG+fAPPI6tJnNwb7ClP7IyF+D+bjOtCpkhz6CFrIa/I6sFtNl8auFXGMTP34sNwI/JhkgEtmDz14ySfaRcTIBInmKPE32kxyyE2Tv+thKbEVePDfW/byMM1Kmm0XdObS7oGD/MypMXFPXrCwOtoYjyyn7BV29/MZfsVzpLDdRtuIZnbpXzvlf+ev8MvYr/Gqk4H/kV/G3csdazLuyTMPsbFhzd1UabQbjFvDRmcWJxR3zcfHkVw9GfpbJmeev9F08WW8uDkaslwX6avlWGU6NRKz0g/SHtCy9J30o/ca9zX3Kfc19zn3BXQKRO8ud477hLnAfc1/G9mrzGlrfexZ5GLdn6ZZrrEohI2wVHhZywjbhUWEy8icMCGNCUdiBlq3r+xafL549HQ5jH+an+1y+LlYBifuxAvRN/lVVVOlwlCkdVm9NOL5BE4wkQ2SMlDZU97hX86EilU/lUmkQUztTE6mx1EEPh7OmdqBtAvv8HdWpbrJS6tJj3n0CWdM6busNzRV3S9KTYhqvNiqWmuroiKgYhshMjmhTh9ptWhsF7970j/SbMrsPE1suR5z7DMC+P/Hs+y7ijrQAlhyAgccjbhjPygfeBTjzhNqy28EdkUh8C+DU9+z2v/oyeH791OncxHOs5y2AtTc7nb/f73TWPkD/qwBnjX8BoJ98VQNcC+8AAAFFSURBVGgF7djbDYMwDAXQBjEMYqyqY1WMxTppLiJIQIA8ariWkp8IPuweO60am67r7MstY8wwjuPH7dMz3uUua63p+/7r9rePIRW/9QmQzCV9ub0YgSIgzhxvQkjFb1EZBAdEKolkfJTqtnb7bv/zOJm58moRE0AzYgFoRawAGhE7gDZEEKAJcQjQgjgFaEBcAtgRUQBmRDSAFZEEYEQkA9gQWQAmRDaABVEEYEAUAx5H4EaGOyw+SMl66mbXzNOD4k6gCPNUY/CFwF1YOn5zRxJJRINqaUbUuZA/79sd3wm3xIdbdS60rXzo2XVCbO60/HxKJgFKKv4CkEziuyKBWAE0InYAbYggQBPiEKAFcQrQgLgEsCOiAMyIaAArIgnAiEgGsCGyAEyIbAALogjAgCgGPI7AX9w6F3JtqHMhnMWLFSrSD9jOnakVHpZYAAAAAElFTkSuQmCC"></image>
</defs>
<g id="硬件资源可视-特性文档" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="矩形">
<use fill="#F2F5FC" xlink:href="#path-1"></use>
<use fill-opacity="0.2" fill="url(#pattern-3)" style="mix-blend-mode: multiply;" xlink:href="#path-1"></use>
</g>
</g>
</svg>
\ No newline at end of file
mindinsight/ui/src/assets/images/occupy.svg 已删除 100644 → 0
浏览文件 @ 81250b16
<?xml version="1.0" encoding="UTF-8"?>
<svg width="197px" height="197px" viewBox="0 0 197 197" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>设备占比</title>
<desc>Created with Sketch.</desc>
<g id="硬件资源可视-特性文档" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="设备占比" fill="#FA9841" fill-rule="nonzero">
<path d="M98.4375,0.1375 C44.1479091,0.1375 0.1375,44.1479091 0.1375,98.4375 C0.1375,152.727091 44.1479091,196.7375 98.4375,196.7375 C152.727091,196.7375 196.7375,152.727091 196.7375,98.4375 C196.682379,44.1707574 152.704243,0.192621163 98.4375,0.1375 Z M103.4375,15.4375 C121.974914,16.606052 139.582848,23.9661683 153.4375,36.3375 L103.4375,86.3375 L103.4375,15.3375 L103.4375,15.4375 Z M15.1374914,98.4375 C15.2134747,54.4129965 49.495318,18.0295843 93.4375,15.3375 L93.4375,98.4375 C93.46687,99.7540728 94.0043749,101.008251 94.9375,101.9375 L153.637491,160.6375 C129.148862,182.422768 94.1517029,187.800527 64.2521242,174.372702 C34.3525455,160.944877 15.1226403,131.21388 15.1374914,98.4375 Z M160.7375,153.6375 L105.5375,98.4375 L160.7375,43.2375 C188.850198,74.6684524 188.850198,122.206548 160.7375,153.6375 Z" id="形状"></path>
</g>
</g>
</svg>
\ No newline at end of file
mindinsight/ui/src/components/gridTableSimple.vue
浏览文件 @ 67019a3c
......@@ -67,7 +67,7 @@ limitations under the License.
:title="$t('scalar.fullScreen')"
@click="toggleFullScreen"
:class="fullScreen ? 'active-color' : ''">
<span><i class="el-icon-full-screen"></i></span>
<i class="el-icon-full-screen"></i>
</div>
</div>
</div>
......@@ -159,6 +159,7 @@ export default {
* @param {String} filterStr Dimension String
*/
initializeFilterArr(dimension, filterStr) {
this.filterCorrect = true;
if (!filterStr) {
this.filterArr = [];
return;
......@@ -223,11 +224,13 @@ export default {
) {
return value;
} else if (value < 0) {
return `<span class="table-item-span" style="background:rgba(94, 124, 224, ${value /
this.statistics.min})">${value}</span>`;
return `<span class="table-item-span" style="background:rgba(227, 125, 41, ${
value / this.statistics.min
})">${value}</span>`;
} else {
return `<span class="table-item-span" style="background:rgba(246, 111, 106, ${value /
this.statistics.max})">${value}</span>`;
return `<span class="table-item-span" style="background:rgba(0, 165, 167, ${
value / this.statistics.max
})">${value}</span>`;
}
},
/**
......@@ -292,9 +295,8 @@ export default {
},
/**
* accuracy changed
* @param {Number} value The value after changed
*/
accuracyChange(value) {
accuracyChange() {
this.formateGridArray();
if (!this.requestError && !this.incorrectData) {
this.updateGrid();
......@@ -416,7 +418,6 @@ export default {
</script>
<style lang="scss">
.cl-slickgrid-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
......@@ -426,6 +427,36 @@ export default {
.grid-item {
width: 100%;
height: 100%;
::-webkit-scrollbar-button {
z-index: 200;
width: 10px;
height: 10px;
background: #fff;
cursor: pointer;
}
::-webkit-scrollbar-button:horizontal:single-button:start {
background-image: url('../assets/images/scroll-btn-left.png');
background-position: center;
}
::-webkit-scrollbar-button:horizontal:single-button:end {
background-image: url('../assets/images/scroll-btn-right.png');
background-position: center;
}
::-webkit-scrollbar-button:vertical:single-button:start {
background-image: url('../assets/images/scroll-btn-up.png');
background-position: center;
}
::-webkit-scrollbar-button:vertical:single-button:end {
background-image: url('../assets/images/scroll-btn-down.png');
background-position: center;
}
::-webkit-scrollbar-thumb {
background-color: #bac5cc;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
}
.error-msg-container {
width: 100%;
......@@ -496,15 +527,7 @@ export default {
border-left: none;
text-align: center;
}
.slick-viewport-left {
overflow: hidden !important;
}
.slick-viewport-left .slick-row {
background-color: white !important;
::-webkit-scrollbar {
width: 0px;
}
}
.ui-widget-content {
background: none;
}
......
mindinsight/ui/src/components/header.vue
浏览文件 @ 67019a3c
......@@ -44,10 +44,6 @@ limitations under the License.
:title='$t("summaryManage.comparePlate")'>
{{$t("summaryManage.comparePlate")}}
</el-menu-item>
<el-menu-item index="/hardware-visual"
:title='$t("summaryManage.hardwareVisual")'>
{{$t("summaryManage.hardwareVisual")}}
</el-menu-item>
</el-menu>
</div>
</div>
......@@ -58,15 +54,8 @@ limitations under the License.
|| this.$route.path.indexOf('/histogram') > 0
|| this.$route.path.indexOf('/tensor') > 0
|| this.$route.path.indexOf('/training-dashboard') > 0
|| !this.$route.path.indexOf('/compare-plate')
|| !this.$route.path.indexOf('/hardware-visual')">
<div class="reload-training"
v-if="this.$route.path.indexOf('/scalar') > 0
|| this.$route.path.indexOf('/image') > 0
|| this.$route.path.indexOf('/histogram') > 0
|| this.$route.path.indexOf('/tensor') > 0
|| this.$route.path.indexOf('/training-dashboard') > 0
|| !this.$route.path.indexOf('/compare-plate')">
|| !this.$route.path.indexOf('/compare-plate')">
<div class="reload-training">
<!-- automatic refresh switch -->
<el-switch v-model="isTimeReload"
:active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
......@@ -89,31 +78,6 @@ limitations under the License.
v-if="isTimeReload && isShowInp"
@click="cancelTimeValue"></i>
</div>
<div class="reload-hardware"
v-if="!this.$route.path.indexOf('/hardware-visual')">
<!-- automatic refresh switch -->
<el-switch v-model="isHardwareTimeReload"
:active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
hardwareTimeReloadValue+$t('header.timeSecond')+$t('symbols.rightbracket')"
@change="hardwareTimeReload"></el-switch>
<i class="el-icon-edit"
:title="$t('header.timeReloadScope')"
v-if="isHardwareTimeReload && !isShowHardwareInp"
@click="editHardwareTime"></i>
<el-input v-if="isHardwareTimeReload && isShowHardwareInp"
v-model="newHardwareReloadValue"
type="text"
@input="hardwareTimeValueChange"></el-input>
<i class="el-icon-check"
v-if="isHardwareTimeReload && isShowHardwareInp"
@click="saveHardwareTimeValue"></i>
<i class="el-icon-close"
v-if="isHardwareTimeReload && isShowHardwareInp"
@click="cancelHardwareTimeValue"></i>
</div>
<!-- manual refresh switch -->
<img src="../assets/images/reload.png"
alt=""
......@@ -154,9 +118,6 @@ export default {
isLanguage: true,
timeReloadValue: this.$store.state.timeReloadValue,
newReloadValue: this.$store.state.timeReloadValue,
isShowHardwareInp: false,
hardwareTimeReloadValue: this.$store.state.hardwareTimeReloadValue,
newHardwareReloadValue: this.$store.state.hardwareTimeReloadValue,
};
},
computed: {
......@@ -183,13 +144,6 @@ export default {
}
return isChinese;
},
// set and get isHardwareTimeReload status
isHardwareTimeReload: {
get() {
return this.$store.state.isHardwareTimeReload;
},
set(val) {},
},
},
watch: {},
mounted() {},
......@@ -244,48 +198,6 @@ export default {
.replace(/\./g, '');
this.newReloadValue = Number(this.newReloadValue);
},
// hardware reload setting
hardwareTimeReload(val) {
localStorage.isHardwareTimeReload = val;
this.$store.commit('setIsHardwareTimeReload', val);
},
editHardwareTime() {
this.isShowHardwareInp = true;
},
saveHardwareTimeValue() {
if (this.newHardwareReloadValue >= 0) {
this.newHardwareReloadValue =
this.newHardwareReloadValue < 3
? 3
: this.newHardwareReloadValue > 300
? 300
: this.newHardwareReloadValue;
const timeValue = this.newHardwareReloadValue;
this.hardwareTimeReloadValue = timeValue;
localStorage.hardwareTimeReloadValue = timeValue;
this.$store.commit('setHardwareTimeReloadValue', timeValue);
this.isShowHardwareInp = false;
} else {
this.cancelHardwareTimeValue();
}
},
cancelHardwareTimeValue() {
this.isShowHardwareInp = false;
this.newHardwareReloadValue = this.hardwareTimeReloadValue;
},
hardwareTimeValueChange() {
if (this.newHardwareReloadValue === '') {
return;
}
this.newHardwareReloadValue = this.newHardwareReloadValue
.toString()
.replace(/[^\.\d]/g, '')
.replace(/\./g, '');
this.newHardwareReloadValue = Number(this.newHardwareReloadValue);
},
// get active menu item
getActive() {
const str = this.$route.path.split('/');
......
mindinsight/ui/src/components/histogramUnit.vue
浏览文件 @ 67019a3c
......@@ -525,7 +525,7 @@ export default {
}</td><td style="text-align:center;">${this.formateNUmber(
hoveredItem.step,
)}</td><td>${this.formateNUmber(
(hoveredItem.relative_time / 1000).toFixed(3),
(hoveredItem.relative_time).toFixed(3),
)}${unit}</td><td>${this.dealrelativeTime(
new Date(hoveredItem.wall_time * 1000).toString(),
)}</td>`;
......
mindinsight/ui/src/locales/en-us.json
浏览文件 @ 67019a3c
......@@ -400,49 +400,6 @@
"gpuunit": "us/time",
"chartTitle": "Average Time Consumption Ranking"
},
"hardwareVisual": {
"processor": "Ascend AI Processor",
"ram": "Memory",
"selectedCpu": "Selected CPUs:",
"allCpu": "Total CPUs:",
"chipNameTip": "Chip name",
"deviceIdTip": "Chip ID",
"availableTip": "Is chip available(for reference only)",
"healthTip": "Chip health status",
"ipTip": "Chip IP address",
"hbmTip": "Chip HBM usage",
"powerTip": "Chip real-time power",
"temperatureTip": "Chip real-time temperature",
"cpuUserTip": "Time for running in user mode (%)",
"cpuSystemTip": "Time for running in kernel mode (%)",
"cpuIdleTip": "Idle time (%)",
"cpuNiceTip": "Time for running low-priority processes (%)",
"cpuIowaitTip": "Time for waiting for I/O (%)",
"cpuIrqTip": "Time for processing hardware interrupts (%)",
"cpuSoftirqTip": "Time for processing software interrupts (%)",
"cpuStealTip": "Time occupied by other VMs (%)",
"cpuGuestTip": "Time for running the VM (%)",
"cpuGuestniceTip": "Time for running low-priority VMs (%)",
"cpuInterruptTip": "Time for processing hardware interrupts (%)",
"cpuDpcTip": "Time for remote calling (%)",
"noNpuInfo": "No Ascend AI processor information",
"normal": "Normal",
"generalWarn": "Minor warning",
"importantWarn": "Major warning",
"emergencyWarn": "Critical warning",
"noChip": "The chip does not exist or is not started.",
"availableFree": "The chip is available.",
"availableBusy": "The chip is occupied or unavailable.",
"failQueryChip": "An error occurs during chip information query.",
"name": "Name",
"npu": "ID",
"available": "Available",
"health": "Health",
"ipAddress": "IP Address",
"hbmUsage": "HBM-Usage(MB)",
"power": "Power(W)",
"temp": "Temp(℃)"
},
"components": {
"summaryTitle": "Training selection",
"tagSelectTitle": "Tag Selection",
......
mindinsight/ui/src/locales/zh-cn.json
浏览文件 @ 67019a3c
......@@ -399,49 +399,6 @@
"gpuunit": "us/次",
"chartTitle": "平均耗时排行"
},
"hardwareVisual": {
"processor": "昇腾AI处理器",
"ram": "内存",
"selectedCpu": "CPU-选中：",
"allCpu": "CPU-总计：",
"chipNameTip": "芯片名称",
"deviceIdTip": "芯片编号",
"availableTip": "芯片是否空闲（仅供参考）",
"healthTip": "芯片健康状态",
"ipTip": "芯片IP地址",
"hbmTip": "芯片已用HBM内存",
"powerTip": "芯片实时功率",
"temperatureTip": "芯片实时温度",
"cpuUserTip": "运行于用户态的时间百分比",
"cpuSystemTip": "运行于内核态的时间百分比",
"cpuIdleTip": "处于空闲状态的时间百分比",
"cpuNiceTip": "运行低优先级进程的时间百分比",
"cpuIowaitTip": "等待IO的时间百分比",
"cpuIrqTip": "处理硬中断的时间百分比",
"cpuSoftirqTip": "处理软中断的时间百分比",
"cpuStealTip": "被其他虚拟机抢夺的时间百分比",
"cpuGuestTip": "运行虚拟机的时间百分比",
"cpuGuestniceTip": "运行低优先级虚拟机的时间百分比",
"cpuInterruptTip": "处理硬中断的时间百分比",
"cpuDpcTip": "远程调用的时间百分比",
"noNpuInfo": "暂无昇腾AI处理器信息",
"normal": "正常",
"generalWarn": "一般警告",
"importantWarn": "重要警告",
"emergencyWarn": "紧急警告",
"noChip": "芯片不存在或未启动",
"availableFree": "芯片空闲",
"availableBusy": "芯片已被占用或不可用",
"failQueryChip": "芯片信息查询有误",
"name": "名称",
"npu": "编号",
"available": "是否空闲",
"health": "健康状态",
"ipAddress": "IP 地址",
"hbmUsage": "已用HBM内存(MB)",
"power": "功率(W)",
"temp": "温度(℃)"
},
"components": {
"summaryTitle": "训练选择",
"tagSelectTitle": "标签选择",
......
mindinsight/ui/src/router.js
浏览文件 @ 67019a3c
......@@ -117,9 +117,5 @@ export default new Router({
},
],
},
{
path: '/hardware-visual',
component: () => import('./views/train-manage/hardware-visual.vue'),
},
],
});
mindinsight/ui/src/services/request-service.js
浏览文件 @ 67019a3c
......@@ -288,10 +288,4 @@ export default {
},
});
},
getMetricsData() {
return axios({
method: 'get',
url: 'v1/mindinsight/sysmetric/current',
});
},
};
mindinsight/ui/src/store.js
浏览文件 @ 67019a3c
......@@ -30,12 +30,6 @@ export default new Vuex.Store({
timeReloadValue: localStorage.timeReloadValue
? localStorage.timeReloadValue
: 10,
// Scheduled hardware reload flag
isHardwareTimeReload: localStorage.isHardwareTimeReload === 'false' ? false : true,
// hardware reload time
hardwareTimeReloadValue: localStorage.hardwareTimeReloadValue
? localStorage.hardwareTimeReloadValue
: 5,
// multiSelevtGroup component count
multiSelectedGroupCount: 0,
tableId: 0,
......@@ -81,13 +75,6 @@ export default new Vuex.Store({
setTimeReloadValue: (state, val) => {
state.timeReloadValue = val;
},
// set isHardwareTimeReload
setIsHardwareTimeReload: (state, val) => {
state.isHardwareTimeReload = val;
},
setHardwareTimeReloadValue: (state, val) => {
state.hardwareTimeReloadValue = val;
},
multiSelectedGroupComponentNum(state) {
state.multiSelectedGroupCount++;
},
......
mindinsight/ui/src/views/train-manage/hardware-visual.vue 已删除 100644 → 0
浏览文件 @ 81250b16
<!--
Copyright 2020 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-hardware-visual">
<div class="cl-hardware-content"
v-if="!(chipTableData.length === 0 && cpuList.length===0)">
<div class="cl-hardware-top"
v-if="chipTableData.length">
<div class="cl-hardware-left">
<div class="cl-sub-title"
v-if="chipTableData.length">
{{$t('hardwareVisual.processor')}}
</div>
<div class="cl-chip-wrap">
<el-table v-if="chipTableData.length"
:data="chipTableData"
width="100%"
height="100%"
:row-class-name="tableRowClassName">
<el-table-column width="120">
<template slot="header">
<span class="cl-text-center">
{{ $t('hardwareVisual.name') }}
<el-tooltip class="item"
effect="light"
:content="$t('hardwareVisual.chipNameTip')"
placement="top-start">
<i class="el-icon-info"></i>
</el-tooltip>
</span>
</template>
<template slot-scope="scope">
<span class="cl-text-center">{{ scope.row.chip_name }}</span>
</template>
</el-table-column>
<el-table-column width="80">
<template slot="header">
<span class="cl-text-center">
{{ $t('hardwareVisual.npu') }}
<el-tooltip class="item"
effect="light"
:content="$t('hardwareVisual.deviceIdTip')"
placement="top-start">
<i class="el-icon-info"></i>
</el-tooltip>
</span>
</template>
<template slot-scope="scope">
<span class="cl-text-center">{{ scope.row.device_id }}</span>
</template>
</el-table-column>
<el-table-column width="110">
<template slot="header">
<span class="cl-text-center">
{{ $t('hardwareVisual.available') }}
<el-tooltip class="item"
effect="light"
:content="$t('hardwareVisual.availableTip')"
placement="top-start">
<i class="el-icon-info"></i>
</el-tooltip>
</span>
</template>
<template slot-scope="scope">
<span class="cl-text-center">
<i class="el-icon-success"
v-if="scope.row.available"
:title="$t('hardwareVisual.availableFree')"></i>
<i class="available-fail"
:title="$t('hardwareVisual.availableBusy')"
v-else></i>
</span>
</template>
</el-table-column>
<el-table-column width="100">
<template slot="header">
<span class="cl-text-center">
{{ $t('hardwareVisual.health') }}
<el-tooltip class="item"
effect="light"
:content="$t('hardwareVisual.healthTip')"
placement="top-start">
<i class="el-icon-info"></i>
</el-tooltip>
</span>
</template>
<template slot-scope="scope">
<span class="cl-text-center">
<i class="el-icon-success"
v-if="scope.row.health===0"
:title="$t('hardwareVisual.normal')"></i>
<i class="el-icon-warning normal"
v-if="scope.row.health===1"
:title="$t('hardwareVisual.generalWarn')"></i>
<i class="el-icon-warning important"
v-if="scope.row.health===2"
:title="$t('hardwareVisual.importantWarn')"></i>
<i class="el-icon-warning emergency"
v-if="scope.row.health===3"
:title="$t('hardwareVisual.emergencyWarn')"></i>
<i class="el-icon-remove"
v-if="scope.row.health=== 0xffffffff"
:title="$t('hardwareVisual.noChip')"></i>
</span>
</template>
</el-table-column>
<el-table-column width="130">
<template slot="header">
<span class="cl-text-center">
{{ $t('hardwareVisual.ipAddress') }}
<el-tooltip class="item"
effect="light"
:content="$t('hardwareVisual.ipTip')"
placement="top-start">
<i class="el-icon-info"></i>
</el-tooltip>
</span>
</template>
<template slot-scope="scope">
<span class="cl-text-center">{{ scope.row.ip_address }}</span>
</template>
</el-table-column>
<el-table-column prop="hbm_usage"
min-width="100">
<template slot="header">
{{ $t('hardwareVisual.hbmUsage') }}
<el-tooltip class="item"
effect="light"
:content="$t('hardwareVisual.hbmTip')"
placement="top-start">
<i class="el-icon-info"></i>
</el-tooltip>
</template>
<template slot-scope="scope">
<div class="hbs-wrap">
<el-progress :percentage="scope.row.hbm_info.memory_size?
parseInt(scope.row.hbm_info.memory_usage/scope.row.hbm_info.memory_size*100):0"
:format="formatHbm(scope.row.hbm_info)"></el-progress>
</div>
</template>
</el-table-column>
<el-table-column prop="power">
<template slot="header">
{{ $t('hardwareVisual.power') }}
<el-tooltip class="item"
effect="light"
:content="$t('hardwareVisual.powerTip')"
placement="top-start">
<i class="el-icon-info"></i>
</el-tooltip>
</template>
<template slot-scope="scope">
<div class="power-wrap">
<div class="power"
:style="{width:`${scope.row.power/powerMax*100}%`}">{{scope.row.power}}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="temp"
width="150">
<template slot="header">
{{ $t('hardwareVisual.temp') }}
<el-tooltip class="item"
effect="light"
:content="$t('hardwareVisual.temperatureTip')"
placement="top-start">
<i class="el-icon-info"></i>
</el-tooltip>
</template>
<template slot-scope="scope">
<div class="temp-wrap">
<div class="circle"
:class="{zero:!scope.row.temperature}"></div>
<div class="process-wrap">
<div class="process-cover"
:style="{width:temperatureMax?scope.row.temperature/temperatureMax*100+'%':0}"></div>
</div>
<span>{{scope.row.temperature}}</span>
</div>
</template>
</el-table-column>
</el-table>
<div class="image-noData"
v-if="chipTableData.length === 0">
<div>
<img :src="require('@/assets/images/nodata.png')"
alt="" />
</div>
<p>{{$t("hardwareVisual.noNpuInfo")}}</p>
</div>
</div>
</div>
</div>
<div class="cl-hardware-bottom"
:class="{noNpu:!chipTableData.length}">
<div class="cl-hardware-left">
<div class="cl-sub-title">
CPU
</div>
<div class="cl-cpu-wrap">
<div class="cpu-items">
<div class="cpu-item"
v-for="(item,key) in cpuList"
:key="key">
<div class="cpu"
:class="{selected:item.selected}"
:style="{backgroundColor:item.idle!==undefined?
`rgba(250,152,65,${(100-item.idle).toFixed(2)/100}`:'#ccc'}"
:title="item.idle!==undefined?`Core ${key}`:''"
@click="viewPerCpuInfo(key)">
{{ item.idle!==undefined?(100-item.idle).toFixed(2):'' }}
</div>
</div>
</div>
<div class="cpu-detail">
<div class="all-cpu-info">
<span>{{$t('hardwareVisual.allCpu')}}</span>
<div class="info-item"
v-for="(item,index) in overallCpuInfo"
:key="index">
<el-tooltip class="item"
effect="light"
:content="item.tips"
placement="top-start">
<span>
<span class="label">{{item.label}}</span>
<span class="value">{{`${item.value}%`}}</span>
</span>
</el-tooltip>
</div>
</div>
<div class="selected-cpu-info"
v-if="selectedCpuIndex!==null">
<span>{{$t('hardwareVisual.selectedCpu')}}</span>
<div class="info-item"
v-for="(item,index) in selectedCpuInfo"
:key="index">
<el-tooltip class="item"
effect="light"
:content="item.tips"
placement="top-start">
<span>
<span class="label">{{item.label}}</span>
<span class="value">{{`${item.value}%`}}</span>
</span>
</el-tooltip>
</div>
</div>
</div>
</div>
</div>
<div class="cl-hardware-right">
<div class="cl-sub-title ram">
{{$t('hardwareVisual.ram')}}
</div>
<div class="cl-ram-wrap">
<div class="virtual-wrap">
<div id="virtual"></div>
</div>
</div>
</div>
</div>
</div>
<div class="image-noData"
v-if="chipTableData.length === 0 && cpuList.length===0">
<div>
<img :src="require('@/assets/images/nodata.png')"
alt="" />
</div>
<p>{{initOver?$t("public.noData"):$t('public.dataLoading')}}</p>
</div>
</div>
</template>
<script>
import echarts from 'echarts';
import RequestService from '../../services/request-service';
export default {
data() {
return {
chipTableData: [],
powerMax: null,
temperatureMax: null,
virtualChart: {
id: 'virtual',
chartDom: null,
data: [],
legend: [],
totalValue: null,
},
defaultCpuNum: 96,
cpuList: [],
overallCpuInfo: [],
selectedCpuInfo: [],
selectedCpuIndex: null,
pieColorArr: ['#5e7ce0', '#ccc', '#a6dd82'],
autoUpdateTimer: null, // Automatic refresh timer
isReloading: false, // Manually refresh
legendSelected: {},
initOver: false,
mark: false,
};
},
computed: {
/**
* Global refresh switch
* @return {Boolean}
*/
isReload() {
return this.$store.state.isReload;
},
/**
* Automatic hardware refresh switch
* @return {Boolean}
*/
isHardwareTimeReload() {
return this.$store.state.isHardwareTimeReload;
},
/**
* Automatic hardware refresh value
* @return {Boolean}
*/
hardwareTimeReloadValue() {
return this.$store.state.hardwareTimeReloadValue;
},
},
watch: {
/**
* Global refresh switch Listener
* @param {Boolean} newVal Value After Change
* @param {Boolean} oldVal Value Before Change
*/
isReload(newVal, oldVal) {
if (newVal) {
this.isReloading = true;
if (this.isHardwareTimeReload) {
this.autoUpdateSamples();
}
this.init();
}
},
/**
* Automatic refresh switch Listener
* @param {Boolean} newVal Value After Change
* @param {Boolean} oldVal Value Before Change
*/
isHardwareTimeReload(newVal, oldVal) {
if (newVal) {
this.autoUpdateSamples();
} else {
this.stopUpdateSamples();
}
},
/**
* The refresh time is changed.
*/
hardwareTimeReloadValue() {
this.autoUpdateSamples();
},
},
destroyed() {
// Disable the automatic refresh function
if (this.autoUpdateTimer) {
clearInterval(this.autoUpdateTimer);
this.autoUpdateTimer = null;
}
// Stop Refreshing
if (this.isReloading) {
this.$store.commit('setIsReload', false);
this.isReloading = false;
}
},
mounted() {
document.title = this.$t('summaryManage.hardwareVisual') + '-MindInsight';
// Automatic refresh
if (this.isHardwareTimeReload) {
this.autoUpdateSamples();
}
this.init();
},
methods: {
/**
* Initialization data
*/
init() {
this.mark = false;
RequestService.getMetricsData().then(
(res) => {
this.mark = true;
this.initOver = true;
if (this.isReloading) {
this.$store.commit('setIsReload', false);
this.isReloading = false;
}
if (res && res.data) {
this.chipTableData = res.data.npu || [];
if (this.chipTableData.length === 0) {
this.defaultCpuNum = 192;
}
this.powerMax =
Math.max(...this.chipTableData.map((val) => val.power)) * 1.2;
this.temperatureMax =
Math.max(...this.chipTableData.map((val) => val.temperature)) *
1.2;
// 1.2 In order to Demonstrated effect
if (res.data.memory && res.data.memory.virtual) {
this.dealChartData(this.virtualChart, res.data.memory.virtual);
this.setOption(this.virtualChart);
}
if (res.data.cpu) {
const overall = res.data.cpu.overall || {};
this.overallCpuInfo = Object.keys(overall).map((val) => {
return {
label: val,
value: overall[val],
};
});
this.addtips(this.overallCpuInfo);
this.cpuList = (res.data.cpu.percpu || []).map((val) => {
return {...val, selected: false};
});
while (this.cpuList.length < this.defaultCpuNum) {
this.cpuList.push({});
}
if (this.selectedCpuIndex !== null) {
this.viewPerCpuInfo(this.selectedCpuIndex);
} else {
this.selectedCpuInfo = [];
}
this.$nextTick(() => {
const doms = document.querySelectorAll('.fail-row');
if (doms) {
for (let i = 0; i < doms.length; i++) {
doms[i].setAttribute(
'title',
this.$t('hardwareVisual.failQueryChip'),
);
}
}
});
}
}
},
(err) => {
this.mark = true;
this.chipTableData = [];
this.cpuList = [];
this.initOver = true;
if (this.isReloading) {
this.$store.commit('setIsReload', false);
this.isReloading = false;
}
},
);
},
tableRowClassName({row, rowIndex}) {
if (!row.success) {
return 'fail-row';
}
return '';
},
/**
* add tips
* @param {Array} arr cpu Info
*/
addtips(arr) {
arr.forEach((val) => {
switch (val.label) {
case 'user':
val.tips = this.$t('hardwareVisual.cpuUserTip');
break;
case 'nice':
val.tips = this.$t('hardwareVisual.cpuNiceTip');
break;
case 'system':
val.tips = this.$t('hardwareVisual.cpuSystemTip');
break;
case 'idle':
val.tips = this.$t('hardwareVisual.cpuIdleTip');
break;
case 'iowait':
val.tips = this.$t('hardwareVisual.cpuIowaitTip');
break;
case 'irq':
val.tips = this.$t('hardwareVisual.cpuIrqTip');
break;
case 'softirq':
val.tips = this.$t('hardwareVisual.cpuSoftirqTip');
break;
case 'steal':
val.tips = this.$t('hardwareVisual.cpuStealTip');
break;
case 'guest':
val.tips = this.$t('hardwareVisual.cpuGuestTip');
break;
case 'guest_nice':
val.tips = this.$t('hardwareVisual.cpuGuestniceTip');
break;
case 'interrupt':
val.tips = this.$t('hardwareVisual.cpuInterruptTip');
break;
case 'dpc':
val.tips = this.$t('hardwareVisual.cpuDpcTip');
break;
}
});
},
/**
* View the information of each cpu
* @param {Number} index index
*/
viewPerCpuInfo(index) {
this.cpuList.forEach((val, key) => {
if (val.idle !== undefined) {
if (index === key) {
this.selectedCpuIndex = key;
val.selected = !val.selected;
if (val.selected) {
this.selectedCpuInfo = Object.keys(this.cpuList[index]).map(
(val) => {
return {
label: val,
value: this.cpuList[index][val],
};
},
);
this.selectedCpuInfo.pop();
} else {
this.selectedCpuIndex = null;
this.selectedCpuInfo = [];
}
} else {
if (this.cpuList[index].idle !== undefined) {
val.selected = false;
}
}
}
});
this.addtips(this.selectedCpuInfo);
},
/**
* Handling pie chart data
* @param {Object} chart chart obejct
* @param {Object} data chart data
*/
dealChartData(chart, data) {
if (data.others === 0) {
chart.legend = ['used', 'available'];
this.pieColorArr = ['#5e7ce0', '#a6dd82'];
} else {
chart.legend = ['used', 'others', 'available'];
this.pieColorArr = ['#5e7ce0', '#ccc', '#a6dd82'];
}
chart.data = chart.legend.map((val) => {
return {
value: data[val],
name: val,
};
});
chart.totalValue = 0;
chart.data.forEach((val) => {
chart.totalValue += val.value;
});
},
/**
* Data unit conversion
* @param {Number} n chart obejct
* @param {Boolean} type format type
* @return {String}
*/
bytesHuman(n, type) {
const symbols = 'KMG'
.split('')
.map((symbol, index) => [symbol, 1 << ((index + 1) * 10)]);
for (const [symbol, prefix] of symbols.reverse()) {
if (n >= prefix) {
if (type) {
return `${n}(${(n / prefix).toFixed(1)}${symbol})`;
} else {
return `${(n / prefix).toFixed(1)}${symbol}`;
}
}
}
return `${n}`;
},
formatHbm(hbmInfo) {
return function() {
return `${hbmInfo.memory_usage}/${hbmInfo.memory_size}`;
};
},
/**
* Enable automatic hardware refresh
*/
autoUpdateSamples() {
if (this.autoUpdateTimer) {
clearInterval(this.autoUpdateTimer);
this.autoUpdateTimer = null;
}
this.autoUpdateTimer = setInterval(() => {
if (this.mark) {
this.$store.commit('clearToken');
this.init();
}
}, this.hardwareTimeReloadValue * 1000);
},
/**
* Disable automatic refresh
*/
stopUpdateSamples() {
if (this.autoUpdateTimer) {
clearInterval(this.autoUpdateTimer);
this.autoUpdateTimer = null;
}
},
setOption(chart) {
const option = {
tooltip: {
trigger: 'item',
formatter: (params) => {
return `${params.name}<br>
${params.marker}${this.bytesHuman(params.value, true)}`;
},
confine: true,
},
legend: {
orient: 'vertical',
left: '50%',
top: '35%',
icon: 'circle',
data: chart.legend,
formatter: (params) => {
let legendStr = '';
for (let i = 0; i < chart.data.length; i++) {
if (chart.data[i].name === params) {
const name = chart.data[i].name;
legendStr = `{a|${this.bytesHuman(
chart.data[i].value,
true,
)}}\n{b|${name}}`;
}
}
return legendStr;
},
selected: this.legendSelected,
textStyle: {
rich: {
a: {
fontSize: 14,
},
b: {
color: '#aeb2bf',
},
},
},
},
series: [
{
name: '',
center: ['25%', '50%'],
type: 'pie',
radius: this.chipTableData.length ? ['40%', '60%'] : ['30%', '40%'],
avoidLabelOverlap: false,
label: {
show: true,
formatter: () => {
return `{a|${this.bytesHuman(chart.totalValue)}}{b|All}`;
},
position: 'center',
textStyle: {
rich: {
a: {
fontSize: 20,
color: '#000',
},
b: {
color: '#aeb2bf',
},
},
},
},
labelLine: {
show: false,
},
data: chart.data,
itemStyle: {
normal: {
color: (params) => {
return this.pieColorArr[params.dataIndex];
},
},
},
},
],
};
this.$nextTick(() => {
const cpuDom = document.getElementById(chart.id);
if (cpuDom) {
chart.chartDom = echarts.init(cpuDom, null);
chart.chartDom.setOption(option, true);
chart.chartDom.resize();
chart.chartDom.on('legendselectchanged', (obj) => {
this.legendSelected = obj.selected;
});
}
});
},
},
};
</script>
<style lang="scss" >
.cl-hardware-visual {
height: 100%;
background-color: #fff;
.cl-hardware-content {
height: 100%;
padding: 0 24px 24px 24px;
.cl-hardware-top {
height: calc(100% - 372px);
padding-top: 16px;
& > div {
width: 100%;
.cl-text-center {
display: inline-block;
text-align: center;
width: 100%;
}
.el-table::before {
height: 0px;
}
}
}
.cl-hardware-bottom {
height: 360px;
.cl-hardware-left {
width: calc(100% - 466px);
margin-right: 16px;
}
.cl-hardware-right {
width: 450px;
}
}
& > div {
height: calc(50% - 8px);
margin-bottom: 16px;
& > div {
float: left;
height: 100%;
border: 1px solid #eee;
border-radius: 4px;
padding: 16px;
.cl-sub-title {
font-weight: bold;
font-size: 16px;
margin-bottom: 15px;
}
.cl-sub-title.ram {
margin-bottom: 10px;
}
.cl-chip-wrap {
height: calc(100% - 36px);
overflow: auto;
.available-fail {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 12px;
background-image: url('../../assets/images/occupy.svg');
background-size: 100% 100%;
}
.el-icon-success:before {
color: #57d7ac;
}
.el-icon-error:before {
color: #e37783;
}
.el-icon-warning.normal:before {
color: #6f81e4;
}
.el-icon-warning.important:before {
color: #faa048;
}
.el-icon-warning.emergency:before {
color: #f06281;
}
.el-icon-remove:before {
color: #8b8e95;
}
.temp-wrap {
.circle {
width: 10px;
height: 10px;
border-radius: 5px;
background: #ffaa00;
display: inline-block;
position: absolute;
left: 1px;
top: 50%;
margin-top: -4px;
}
.circle.zero {
background: #e6ebf5;
}
.process-wrap {
background: #e6ebf5;
width: calc(100% - 50px);
height: 6px;
display: inline-block;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
margin-right: 5px;
.process-cover {
height: 6px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background: #ff5100;
background-image: linear-gradient(to right, #ffaa00, #ff5100);
}
}
}
.hbs-wrap {
.el-progress-bar {
padding-right: 140px;
margin-right: -145px;
}
}
.core-wrap {
.el-progress-bar {
padding-right: 80px;
margin-right: -85px;
}
}
.power {
background: #e5f6f6;
padding-left: 10px;
}
}
.cl-ram-wrap {
height: calc(100% - 36px);
.virtual-wrap {
height: 100%;
overflow: auto;
#virtual {
height: 100%;
overflow: hidden;
}
}
}
.cl-disk-wrap {
height: calc(100% - 36px);
overflow: auto;
}
.cl-cpu-wrap {
height: 201px;
.cpu-items {
height: 100%;
overflow: auto;
background: url('../../assets/images/cpu-bg.svg') repeat;
padding: 3px 0 0 3px;
.cpu-item {
float: left;
width: calc(6.25% - 3px);
height: 30px;
text-align: center;
background: #fff;
margin-right: 3px;
margin-bottom: 3px;
cursor: pointer;
.cpu {
height: 100%;
line-height: 30px;
}
.cpu.selected {
line-height: 30px;
outline: 3px solid #00a5a7;
}
}
}
.cpu-detail {
& > div {
margin-top: 10px;
& > span {
margin-right: 5px;
color: #b2b4bb;
}
& > div {
display: inline-block;
padding: 0 7px;
border-right: 1px solid #ccc;
&:last-child {
border-right: none;
}
.label {
margin-right: 5px;
cursor: pointer;
}
.value {
display: inline-block;
width: 40px;
text-align: right;
cursor: pointer;
}
}
}
}
}
}
}
.cl-hardware-bottom.noNpu {
padding-top: 16px;
height: 570px;
.cl-cpu-wrap {
height: 399px;
}
}
.el-table thead tr {
background: #f0f3fa;
}
.el-table th.is-leaf .cell {
border-left: 1px solid #d4d9e6;
}
.el-table th.is-leaf:first-child .cell {
border-left: none;
}
.el-pagination {
margin: 7px 0;
float: right;
}
}
.el-table th {
height: 32px;
}
.image-noData {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
p {
font-size: 16px;
padding-top: 10px;
}
}
.el-icon-info:before {
color: #6c7280;
}
.el-table .fail-row {
opacity: 0.24;
filter: grayscale(1);
}
}
</style>
mindinsight/ui/src/views/train-manage/histogram.vue
浏览文件 @ 67019a3c
......@@ -787,7 +787,7 @@ export default {
}</td><td style="text-align:center;">${this.formateNUmber(
hoveredItem.step,
)}</td><td>${this.formateNUmber(
(hoveredItem.relative_time / 1000).toFixed(3),
(hoveredItem.relative_time).toFixed(3),
)}${unit}</td><td>${this.dealrelativeTime(
new Date(hoveredItem.wall_time * 1000).toString(),
)}</td>`;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或