From 8d9346bceb57aaf73bcef0b2fee520fb87fa70e0 Mon Sep 17 00:00:00 2001 From: ph Date: Fri, 19 Jun 2020 21:10:07 +0800 Subject: [PATCH] =?UTF-8?q?UI=20support=20profiling=20minddata=20=EF=BC=88?= =?UTF-8?q?4th=20commit=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mindinsight/ui/src/locales/zh-cn.json | 11 +- .../src/views/train-manage/data-process.vue | 105 ++++++----- .../ui/src/views/train-manage/operator.vue | 177 ++++++++++-------- .../train-manage/profiling-dashboard.vue | 73 ++++---- .../ui/src/views/train-manage/profiling.vue | 10 +- .../ui/src/views/train-manage/step-trace.vue | 33 +++- 6 files changed, 232 insertions(+), 177 deletions(-) diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json index 473d02c..1788a93 100644 --- a/mindinsight/ui/src/locales/zh-cn.json +++ b/mindinsight/ui/src/locales/zh-cn.json @@ -230,8 +230,6 @@ "path": "路径", "number": "卡编号", "distribution": "分布图", - "queueEmptyRatio": "队列空比例：", - "queueFullRatio": "队列满比例：", "dataQueueDis": "数据队列分布图", "operatorTimeConAnalysis": "算子耗时分析", "timeConStastic": "耗时统计", @@ -320,7 +318,7 @@ "pipelineTopTitle": "算子间队列平均使用率", "pipelineMiddleTitle": "算子间队列关系", "deviceQueueOp": "数据发送", - "deviceQueueOpTip": "数据发送算子", + "deviceQueueOpTip": "前向+后向", "getNext": "取数据算子", "connectorQuene": "主机队列", "getData": "数据获取", @@ -329,16 +327,16 @@ "opNum": "算子数目：", "opTimes": "算子执行总次数：", "features": "功能介绍：", - "iterationInfo": "迭代轨迹展示的是每个step从上个迭代开始至该step结束的耗时信息，主体时间分为3部分：迭代间隙、前向+反向、迭代拖尾。", + "iterationInfo": "迭代轨迹展示的是每个step从上个迭代开始至该step结束的耗时信息，主体时间分为3部分：迭代间隙、前向反向、迭代拖尾。", "iterationGapInfo": "主要负责从数据队列中读取数据，如果该部分耗时较长，建议前往数据处理部分进一步分析；", "fpbpTitle": "前向反向", "fpbpInfo": "执行网络中的前向算子以及反向算子，承载了一个step主要的计算工作，如果该部分耗时较长，建议前往算子统计或时间线中进一步分析；", "iterativeTailingTitle": "迭代拖尾", - "iterativeTailingInfo": "主要在多卡场景下执行参数聚合参数更新操作，如果该部分耗时较长，建议查看all_reduce耗时以及并行情况。", + "iterativeTailingInfo": "主要在多卡场景下执行参数聚合、参数更新操作，如果该部分耗时较长，建议查看all_reduce耗时以及并行情况。", "statistics": "统计信息：", "totalTime": "总耗时：", "totalSteps": "总step数：", - "fpbpTimeRatio": "前向+反向耗时占比：", + "fpbpTimeRatio": "前向反向耗时占比：", "iterationGapTimeRatio": "迭代间隙耗时占比：", "iterativeTailingTimeRatio": "迭代拖尾耗时占比：", "dataProcess": "该图展示了数据处理阶段的流程，数据通过数据处理阶段存入主机队列，再通过数据传输阶段存入芯片侧的数据队列，最终由数据传输算子get_next发送给前向训练使用。", @@ -358,7 +356,6 @@ "queueTip2": "队列为空比例：", "totalCapacity": "总容量", "averageCapacity": "平均使用容量", - "stepTraceMessage": "当前FP和BP为自动选点，如不合乎预期，请自行修改。", "FPMessage": "FP起始算子：", "BPMessage": "BP终止算子：", "approximateTime": "总时长 ≈ " diff --git a/mindinsight/ui/src/views/train-manage/data-process.vue b/mindinsight/ui/src/views/train-manage/data-process.vue index e8bc0cb..7289cc2 100644 --- a/mindinsight/ui/src/views/train-manage/data-process.vue +++ b/mindinsight/ui/src/views/train-manage/data-process.vue @@ -72,9 +72,8 @@ limitations under the License. clickKey="device_queue_op" v-show="!processSummary.noData">
- {{$t('profiling.deviceQueueOp')}} + {{$t('profiling.deviceQueueOpTip')}}
-
{{$t('profiling.deviceQueueOpTip')}} | TDT
-
+
{{$t('profiling.queueStep')}}
- {{$t('profiling.queueEmptyRatio')}}{{connectQueueChart.queueSummary.empty_queue}}
+ {{$t('profiling.queueTip2')}}{{connectQueueChart.queueSummary.empty_queue}} + /{{connectQueueChart.size}}
- {{$t('profiling.queueFullRatio')}}{{connectQueueChart.queueSummary.full_queue}}
+ {{$t('profiling.queueTip1')}}{{connectQueueChart.queueSummary.full_queue}} + /{{connectQueueChart.size}}
-
-
- -
-

{{$t("public.noData")}}

-
@@ -157,25 +151,20 @@ limitations under the License. -
-
- -
-

{{$t("public.noData")}}

-
-
+
{{$t('profiling.operatorTimeConAnalysis')}}
-
-
- -
-

{{$t("public.noData")}}

-
@@ -217,14 +198,28 @@ limitations under the License.
-
-
- +
+
+
+
+
{{$t('profiling.queueStep')}}
+
+
+
{{$t('profiling.connectorQuene')}}
+
@@ -315,6 +310,7 @@ export default { type: 0, params: 'device_queue', noData: false, + size: null, }, dataQueueChart: { id: 'data-queue', @@ -325,6 +321,7 @@ export default { type: 0, params: 'get_next', noData: false, + size: null, }, deviceQueueOpChart: { id: 'device_queue_op', @@ -423,10 +420,6 @@ export default { this.resizeCallback(); }, init() { - this.queryQueueInfo(this.connectQueueChart); - this.queryQueueInfo(this.dataQueueChart); - this.queryMinddataOp(this.deviceQueueOpChart); - this.queryMinddataOp(this.getNextChart); this.queryProcessSummary(); }, resizeCallback() { @@ -442,7 +435,7 @@ export default { if (this[val].chartDom) { setTimeout(() => { this[val].chartDom.resize(); - }, 200); + }, 300); } }); }, @@ -505,6 +498,7 @@ export default { if (result.size > 0) { this.setOption(chart, result.size); chart.noData = false; + chart.size = result.size; } else { if (chart.chartDom) { chart.chartDom.clear(); @@ -607,6 +601,16 @@ export default { this.processSummary.count = Object.keys(data).length; this.dealProcess(data); + this.$nextTick(() => { + if (this.processSummary.count < 6) { + this.queryQueueInfo(this.connectQueueChart); + } else { + this.queryQueueInfo(this.connectQueueChart); + this.queryQueueInfo(this.dataQueueChart); + this.queryMinddataOp(this.deviceQueueOpChart); + this.queryMinddataOp(this.getNextChart); + } + }); } else { this.dealProcess(null); } @@ -1223,10 +1227,6 @@ export default { padding: 0 0 0 20px; font-weight: bold; } - .content { - padding: 10px 20px 0px 20px; - font-size: 12px; - } } .data-process { background-color: #e3f8eb; @@ -1354,6 +1354,15 @@ export default { height: calc(100% - 25px); } } + .queue-step-wrap.single{ + height: 100%; + .chart-content{ + .chart-wrap{ + width: 100%; + } + } + } + } .pipeline-wrap { height: 100%; diff --git a/mindinsight/ui/src/views/train-manage/operator.vue b/mindinsight/ui/src/views/train-manage/operator.vue index f87fb74..4d4de16 100644 --- a/mindinsight/ui/src/views/train-manage/operator.vue +++ b/mindinsight/ui/src/views/train-manage/operator.vue @@ -1,13 +1,13 @@ + :property="item" + :key="$index" + sortable + :label="item"> + show-overflow-tooltip> + v-if="opAllTypeList.opDetailList.length" + :current-page="opAllTypeList.opDetailPage.offset + 1" + :page-size="opAllTypeList.opDetailPage.limit" + @current-change="(...args)=>{opDetailPageChange(opAllTypeList, ...args)}" + layout="total, prev, pager, next, jumper" + :total="opAllTypeList.pageTotal">
+ v-if="initOver && coreCharts.data.length === 0">
+ alt="" />

{{ $t("public.noData") }}

+ name="cpu" + v-if="false">
+ v-if="cpuCharts.data.length">
{{ $t('operator.operatorStatistics') }} @@ -156,11 +158,11 @@
+ id="cpu-echarts">
+ v-if="cpuCharts.data.length"> {{ $t('operator.operatorStatistics') }} @@ -174,41 +176,42 @@ + :property="item" + :key="$index" + :label="item" + sortable="custom" + show-overflow-tooltip> + :current-page="opCpuList.opDetailPage.offset + 1" + :page-size="opCpuList.opDetailPage.limit" + @current-change="(...args)=>{opCpuPageChange(opCpuList, ...args)}" + layout="total, prev, pager, next, jumper" + :total="opCpuList.pageTotal">
+ v-if="initOver && cpuCharts.data.length === 0">
+ alt="" />

{{$t("public.noData")}}

+ :visible.sync="detailsDialogVisible" + width="50%" + :close-on-click-modal="false" + class="details-data-list"> + width="180" + label="Key"> + show-overflow-tooltip + label="Value"> @@ -327,7 +330,7 @@ export default { if (this.coreCharts.chartDom) { setTimeout(() => { this.coreCharts.chartDom.resize(); - }, 200); + }, 300); } }, /** @@ -340,7 +343,7 @@ export default { this.getCoreTypeList(); } else if (this.apiType === 'cpu') { this.clearCpuData(); - this.getCpuList(); + this.getCpuList(true); } }, opTypeSortChange() { @@ -508,19 +511,22 @@ export default { if (res && res.data) { this.formatterDetailData(row, res.data); this.$nextTick(() => { - const item = this.$refs['expandChild']; - if (item) { + let item = null; + if (this.statisticType) { + item = this.$refs['opAllTable']; + } else { + item = this.$refs['expandChild']; this.curActiveRow = { rowItem: row, childProp: row.op_sort_condition.name, childOrder: row.op_sort_condition.type, }; - if (isSort) { - item.sort( - row.op_sort_condition.name, - row.op_sort_condition.type, - ); - } + } + if (item && isSort) { + item.sort( + row.op_sort_condition.name, + row.op_sort_condition.type, + ); } }); } @@ -529,8 +535,9 @@ export default { }, /** * get cpu list + * @param {Boolean} isSort if sort */ - getCpuList() { + getCpuList(isSort) { const params = {}; params.params = { profile: this.profile_dir, @@ -569,6 +576,17 @@ export default { res.data.object.splice(8); } this.formatterDetailData(this.opCpuList, res.data); + if (isSort) { + this.$nextTick(() => { + const item = this.$refs['opCPUTable']; + if (item) { + item.sort( + this.opCpuList.op_sort_condition.name, + this.opCpuList.op_sort_condition.type, + ); + } + }); + } } } }) @@ -592,7 +610,7 @@ export default { */ opCpuPageChange(row, pageIndex) { row.opDetailPage.offset = pageIndex - 1; - this.getCpuList(); + this.getCpuList(false); }, /** * get core list by search @@ -639,7 +657,7 @@ export default { } else { this.opCpuList.op_filter_condition = {}; } - this.getCpuList(); + this.getCpuList(false); }, /** * core detail sort @@ -665,7 +683,7 @@ export default { type: column.order, }; row.opDetailPage.offset = 0; - this.getCpuList(); + this.getCpuList(false); }, /** * format detail data @@ -732,7 +750,7 @@ export default { ) { this.initOver = false; this.clearCpuData(); - this.getCpuList(); + this.getCpuList(true); } else if ( this.apiType === 'core' && this.coreCharts.device_id !== this.currentCard @@ -855,6 +873,11 @@ export default { option.color = ['#6C92FA']; option.tooltip = { trigger: 'axis', + formatter: (params) => { + return `${params[0].axisValue}
${ + params[0].marker + }${params[0].value.toFixed(4)}`; + }, confine: true, }; option.series = [ @@ -1026,7 +1049,7 @@ export default { };