Skip to content

M
mindinsight

MindSpore / mindinsight

通知 7
Star 3
Fork 2
M
mindinsight
提交 1c6263f2 编写于 作者: M mindspore-ci-bot 提交者： Gitee
浏览文件
操作

!470 UI fix hardware issue 

Merge pull request !470 from 潘慧/master_ph
上级 a5537c7c 9b30fd7f
隐藏空白更改
内联 并排
Showing with 107 addition and 36 deletion
mindinsight/ui/src/locales/zh-cn.json
浏览文件 @ 1c6263f2
......@@ -396,7 +396,7 @@
"chipNameTip": "芯片名称",
"deviceIdTip": "芯片号",
"availableTip": "芯片是否空闲（仅供参考）",
"healthTip": "芯片健康指数（正常、一般警告、重要警告、紧急警告）",
"healthTip": "芯片健康指数",
"ipTip": "芯片IP地址",
"aicoreTip": "芯片利用率",
"hbmTip": "芯片已用HBM内存",
......@@ -414,7 +414,16 @@
"cpuGuestniceTip": "运行低优先级虚拟机的时间百分比",
"cpuInterruptTip": "处理硬中断的时间百分比",
"cpuDpcTip": "远程调用的时间百分比",
"noNpuInfo":"暂无昇腾AI处理器信息"
"noNpuInfo": "暂无昇腾AI处理器信息",
"normal": "正常",
"generalWarn": "一般警告",
"importantWarn": "重要警告",
"emergencyWarn": "紧急警告",
"noChip": "芯片不存在或未启动",
"availableFree": "芯片空闲",
"availableBusy": "芯片已被占用或不可用（仅供参考）",
"failQueryChip": "芯片信息查询有误",
"faliQuery": "查询有误"
},
"components": {
"summaryTitle": "训练选择",
......@@ -452,6 +461,7 @@
"50542218": "筛选参数错误",
"50545012": "张量数据不存在，请刷新。",
"50545013": "请求的数据过大，请使用其他维度重试。",
"50545014": "查询的张量数据已被新数据替换，请刷新。"
"50545014": "查询的张量数据已被新数据替换，请刷新。",
"50548001": "昇腾AI处理器信息查询超时"
}
}
mindinsight/ui/src/services/request-service.js
浏览文件 @ 1c6263f2
......@@ -292,9 +292,6 @@ export default {
return axios({
method: 'get',
url: 'v1/mindinsight/sysmetric/current',
headers: {
ignoreError: true,
},
});
},
};
mindinsight/ui/src/views/train-manage/hardware-visual.vue
浏览文件 @ 1c6263f2
......@@ -18,7 +18,8 @@ limitations under the License.
<div class="cl-hardware-visual">
<div class="cl-hardware-content"
v-if="!(chipTableData.length === 0 && cpuList.length===0)">
<div class="cl-hardware-top">
<div class="cl-hardware-top"
v-if="chipTableData.length">
<div class="cl-hardware-left">
<div class="cl-sub-title"
v-if="chipTableData.length">
......@@ -28,7 +29,8 @@ limitations under the License.
<el-table v-if="chipTableData.length"
:data="chipTableData"
width="100%"
height="100%">
height="100%"
:row-class-name="tableRowClassName">
<el-table-column width="120">
<template slot="header">
<span class="cl-text-center">
......@@ -76,8 +78,10 @@ limitations under the License.
<template slot-scope="scope">
<span class="cl-text-center">
<i class="el-icon-success"
v-if="scope.row.available"></i>
v-if="scope.row.available"
:title="$t('hardwareVisual.availableFree')"></i>
<i class="el-icon-question"
:title="$t('hardwareVisual.availableBusy')"
v-else></i>
</span>
</template>
......@@ -97,15 +101,20 @@ limitations under the License.
<template slot-scope="scope">
<span class="cl-text-center">
<i class="el-icon-success"
v-if="scope.row.health===0"></i>
v-if="scope.row.health===0"
:title="$t('hardwareVisual.normal')"></i>
<i class="el-icon-warning normal"
v-if="scope.row.health===1"></i>
v-if="scope.row.health===1"
:title="$t('hardwareVisual.generalWarn')"></i>
<i class="el-icon-warning important"
v-if="scope.row.health===2"></i>
v-if="scope.row.health===2"
:title="$t('hardwareVisual.importantWarn')"></i>
<i class="el-icon-warning emergency"
v-if="scope.row.health===3"></i>
v-if="scope.row.health===3"
:title="$t('hardwareVisual.emergencyWarn')"></i>
<i class="el-icon-remove"
v-if="scope.row.health=== 0xffffffff"></i>
v-if="scope.row.health=== 0xffffffff"
:title="$t('hardwareVisual.noChip')"></i>
</span>
</template>
</el-table-column>
......@@ -136,8 +145,10 @@ limitations under the License.
</el-tooltip>
</template>
<template slot-scope="scope">
<el-progress :percentage="scope.row.aicore_rate"
:format="format"></el-progress>
<div class="core-wrap">
<el-progress :percentage="scope.row.aicore_rate===-1?0:scope.row.aicore_rate"
:format="format(scope.row.aicore_rate)"></el-progress>
</div>
</template>
</el-table-column>
......@@ -154,8 +165,8 @@ limitations under the License.
</template>
<template slot-scope="scope">
<div class="hbs-wrap">
<el-progress :percentage="
parseInt(scope.row.hbm_info.memory_usage/scope.row.hbm_info.memory_size*100)"
<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>
......@@ -195,7 +206,7 @@ limitations under the License.
:class="{zero:!scope.row.temperature}"></div>
<div class="process-wrap">
<div class="process-cover"
:style="{width:scope.row.temperature/temperatureMax*100+'%'}"></div>
:style="{width:temperatureMax?scope.row.temperature/temperatureMax*100+'%':0}"></div>
</div>
<span>{{scope.row.temperature}}</span>
</div>
......@@ -213,7 +224,8 @@ limitations under the License.
</div>
</div>
</div>
<div class="cl-hardware-bottom">
<div class="cl-hardware-bottom"
:class="{noNpu:!chipTableData.length}">
<div class="cl-hardware-left">
<div class="cl-sub-title">
CPU
......@@ -314,7 +326,7 @@ export default {
overallCpuInfo: [],
selectedCpuInfo: [],
selectedCpuIndex: null,
pieColorArr: ['#5e7ce0', '#a6dd82'],
pieColorArr: ['#5e7ce0', '#ccc', '#a6dd82'],
autoUpdateTimer: null, // Automatic refresh timer
isReloading: false, // Manually refresh
};
......@@ -410,10 +422,14 @@ export default {
}
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;
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);
......@@ -439,6 +455,17 @@ export default {
} 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'),
);
}
}
});
}
}
},
......@@ -452,6 +479,12 @@ export default {
},
);
},
tableRowClassName({row, rowIndex}) {
if (!row.success) {
return 'fail-row';
}
return '';
},
/**
* add tips
* @param {Array} arr cpu Info
......@@ -507,14 +540,21 @@ export default {
if (val.idle !== undefined) {
if (index === key) {
this.selectedCpuIndex = key;
val.selected = true;
this.selectedCpuInfo = Object.keys(this.cpuList[index]).map((val) => {
return {
label: val,
value: this.cpuList[index][val],
};
});
this.selectedCpuInfo.pop();
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;
......@@ -530,9 +570,12 @@ export default {
* @param {Object} data chart data
*/
dealChartData(chart, data) {
const virtual = Object.keys(data);
chart.legend = virtual.reverse();
chart.data = virtual.map((val) => {
if (data.others === 0) {
chart.legend = ['used', 'available'];
} else {
chart.legend = ['used', 'others', 'available'];
}
chart.data = chart.legend.map((val) => {
return {
value: data[val],
name: val,
......@@ -565,7 +608,11 @@ export default {
return `${n}`;
},
format(percentage, item) {
return `${percentage}`;
return () => {
return percentage === -1
? this.$t('hardwareVisual.faliQuery')
: `${percentage}`;
};
},
formatHbm(hbmInfo) {
return function() {
......@@ -639,7 +686,7 @@ export default {
name: '',
center: ['25%', '50%'],
type: 'pie',
radius: ['40%', '60%'],
radius: this.chipTableData.length ? ['40%', '60%'] : ['30%', '40%'],
avoidLabelOverlap: false,
label: {
show: true,
......@@ -739,7 +786,7 @@ export default {
height: calc(100% - 36px);
overflow: auto;
.el-icon-question::before {
color: red;
color: #f06281;
}
.el-icon-success:before {
color: #57d7ac;
......@@ -797,6 +844,12 @@ export default {
margin-right: -145px;
}
}
.core-wrap {
.el-progress-bar {
padding-right: 80px;
margin-right: -85px;
}
}
.power {
background: #e5f6f6;
padding-left: 10px;
......@@ -873,6 +926,13 @@ export default {
}
}
}
.cl-hardware-bottom.noNpu {
padding-top: 16px;
height: 570px;
.cl-cpu-wrap {
height: 399px;
}
}
.el-table thead tr {
background: #f0f3fa;
}
......@@ -905,5 +965,9 @@ export default {
.el-icon-info:before {
color: #6c7280;
}
.el-table .fail-row {
opacity: 0.24;
filter: grayscale(1);
}
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或