From dcd80f2072fbbcb84111c9fea4c1f2ada881fb8e Mon Sep 17 00:00:00 2001 From: ph Date: Tue, 8 Sep 2020 09:57:32 +0800 Subject: [PATCH] AI CPU support type and all tab --- .../ui/src/views/profiling-gpu/operator.vue | 11 +- .../profiling-gpu/profiling-dashboard.vue | 4 +- .../ui/src/views/profiling/operator.vue | 508 ++++++++++++++---- .../views/profiling/profiling-dashboard.vue | 4 +- 4 files changed, 397 insertions(+), 130 deletions(-) diff --git a/mindinsight/ui/src/views/profiling-gpu/operator.vue b/mindinsight/ui/src/views/profiling-gpu/operator.vue index 46153af..8749f3e 100644 --- a/mindinsight/ui/src/views/profiling-gpu/operator.vue +++ b/mindinsight/ui/src/views/profiling-gpu/operator.vue @@ -1152,17 +1152,18 @@ export default { margin-right: 20px; } .cl-profiler-top { - height: 45%; + height: 47%; .chart-title { float: left; font-weight: bold; + height: 32px; } } .cl-profiler-top.fullScreen { display: none; } .cl-profiler-bottom { - height: 55%; + height: 53%; padding-top: 10px; .fullScreen { float: right; @@ -1189,16 +1190,16 @@ export default { width: 100%; height: 100%; min-width: 1300px; - min-height: 306px; + min-height: 321px; overflow: hidden; } } .core-tab { .cl-profiler-top { - height: 45%; + height: 47%; } .cl-profiler-bottom { - height: 55%; + height: 53%; } .cl-profiler-echarts { height: calc(100% - 32px); diff --git a/mindinsight/ui/src/views/profiling-gpu/profiling-dashboard.vue b/mindinsight/ui/src/views/profiling-gpu/profiling-dashboard.vue index 2e8a270..b088963 100644 --- a/mindinsight/ui/src/views/profiling-gpu/profiling-dashboard.vue +++ b/mindinsight/ui/src/views/profiling-gpu/profiling-dashboard.vue @@ -430,9 +430,7 @@ export default { RequestService.queryTimeline(params) .then((res) => { if (res && res.data && res.data.length) { - this.timeLine.data = this.stringToUint8Array( - JSON.stringify(res.data), - ); + this.timeLine.data = JSON.stringify(res.data); this.timeLine.waiting = false; } }) diff --git a/mindinsight/ui/src/views/profiling/operator.vue b/mindinsight/ui/src/views/profiling/operator.vue index b554953..523c739 100644 --- a/mindinsight/ui/src/views/profiling/operator.vue +++ b/mindinsight/ui/src/views/profiling/operator.vue @@ -22,7 +22,7 @@ limitations under the License.
{{$t('profiling.chartTitle')}}
@@ -45,14 +45,14 @@ limitations under the License.
-
- + :min-width="(ele === 'op_info') ? 350 : (ele === 'full_op_name') ? 220 : ''" + :show-overflow-tooltip="(ele === 'avg_execution_time')"> - + :min-width="(item === 'op_info') ? 350 : (item === 'full_op_name') ? 220 : ''" + :show-overflow-tooltip="(item === 'avg_execution_time')"> - -
+
+
+
{{$t('profiling.chartTitle')}}
+ + + {{$t('operator.pie')}} + + + {{ $t('operator.bar')}} + + +
-
+
+
-
- + +
+ + + {{$t('operator.allOperator')}} + + + {{$t('operator.classificationOperator')}} + + +
+ + +
- + + + + + + + + - + - + :total="opCpuAllTypeList.pageTotal">
{ - this.coreCharts.chartDom.resize(); - }); + if (this.apiType === 'core') { + this.coreFullScreen = !this.coreFullScreen; + if (this.coreCharts.chartDom && !this.coreFullScreen) { + this.$nextTick(() => { + this.coreCharts.chartDom.resize(); + }); + } + } else { + this.cpuFullScreen = !this.cpuFullScreen; + if (this.cpuCharts.chartDom && !this.cpuFullScreen) { + this.$nextTick(() => { + this.cpuCharts.chartDom.resize(); + }); + } } }, /** @@ -391,16 +509,17 @@ export default { */ cardChange() { if (this.apiType === 'core') { - this.statisticType = 0; + this.coreStatisticType = 0; this.clearCoreData(); this.getCoreTypeList(); } else if (this.apiType === 'cpu') { + this.cpuStatisticType = 0; this.clearCpuData(); - this.getCpuList(true); + this.getCpuTypeList(); } }, /** - * Operators type sort + * Operators core type sort * @param {Object} sort Sort data */ opTypeSortChange(sort) { @@ -409,18 +528,38 @@ export default { type: sort.order, }; this.$nextTick(() => { - const item = this.$refs['expandChild']; + const item = this.$refs['expandCoreChild']; if (item && this.curActiveRow.rowItem) { item.sort(this.curActiveRow.childProp, this.curActiveRow.childOrder); } }); }, + /** + * Operators cpu type sort + * @param {Object} sort Sort data + */ + opCpuTypeSortChange(sort) { + this.op_cpu_sort_condition = { + name: sort.prop, + type: sort.order, + }; + this.$nextTick(() => { + const item = this.$refs['expandCpuChild']; + if (item && this.curCpuActiveRow.rowItem) { + item.sort(this.curCpuActiveRow.childProp, this.curCpuActiveRow.childOrder); + } + }); + }, /** * clear cpu data */ clearCpuData() { - this.searchByCPUTypeInput = ''; - this.opCpuList = { + this.searchByCpuTypeInput = ''; + this.searchAllByCpuTypeInput = ''; + this.op_cpu_filter_condition = {}; + this.opCpuTypeCol = []; + this.opCpuTypeList = []; + this.opCpuAllTypeList = { opDetailCol: [], opDetailList: [], pageTotal: 0, @@ -429,10 +568,7 @@ export default { limit: 15, }, op_filter_condition: {}, - op_sort_condition: { - name: 'total_time', - type: 'descending', - }, + op_sort_condition: {}, }; }, /** @@ -457,7 +593,7 @@ export default { }; }, /** - * get core list + * get core type list */ getCoreTypeList() { const params = {}; @@ -573,10 +709,10 @@ export default { this.formatterDetailData(row, res.data); this.$nextTick(() => { let item = null; - if (this.statisticType) { + if (this.coreStatisticType) { item = this.$refs['opAllTable']; } else { - item = this.$refs['expandChild']; + item = this.$refs['expandCoreChild']; this.curActiveRow = { rowItem: row, childProp: row.op_sort_condition.name, @@ -596,28 +732,59 @@ export default { .catch(() => {}); }, /** - * get cpu list - * @param {Boolean} isSort if sort + * get cpu type list */ - getCpuList(isSort) { + getCpuTypeList() { const params = {}; params.params = { profile: this.profile_dir, train_id: this.train_id, }; params.body = { - op_type: 'aicpu', + op_type: 'aicpu_type', device_id: this.currentCard, - filter_condition: this.opCpuList.op_filter_condition, - sort_condition: this.opCpuList.op_sort_condition, - group_condition: this.opCpuList.opDetailPage, + filter_condition: this.op_cpu_filter_condition, + sort_condition: this.op_cpu_sort_condition, }; requestService .getProfilerOpData(params) .then((res) => { this.initOver = true; + this.opCpuTypeList = []; if (res && res.data) { + this.opCpuTypeCol = res.data.col_name; if (res.data.object) { + res.data.object.forEach((k) => { + const object = { + isExpanded: false, + opDetailList: [], + opDetailCol: [], + opDetailPage: { + offset: 0, + limit: 15, + }, + pageTotal: 0, + op_filter_condition: { + op_type: { + in: [k[0]], + }, + }, + op_sort_condition: {}, + }; + res.data.col_name.forEach((item, index) => { + object[item] = k[index]; + }); + this.opCpuTypeList.push(object); + }); + this.$nextTick(() => { + const elementItem = this.$refs['expandCpuTable']; + if (elementItem) { + elementItem.sort( + this.op_sort_condition.name, + this.op_sort_condition.type, + ); + } + }); if ( !this.cpuCharts.device_id || this.cpuCharts.device_id !== this.currentCard @@ -625,33 +792,84 @@ export default { this.cpuCharts.device_id = this.currentCard; this.cpuCharts.data = []; res.data.object.forEach((k) => { - this.cpuCharts.data.push({ - name: k[0], - op_name: k[1], - value: k[2], - }); - }); - this.setOption(this.cpuCharts); - } - 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, - ); + if ( + this.cpuCharts.data && + this.cpuCharts.data.length < 19 + ) { + this.cpuCharts.data.push({ + name: k[0], + value: k[1], + percent: k[3], + }); + } else { + if (!this.cpuCharts.data[19]) { + this.cpuCharts.data[19] = { + name: 'Other', + value: 0, + percent: 0, + }; + } + this.cpuCharts.data[19].value += k[1]; + this.cpuCharts.data[19].percent += k[3]; } }); + this.setOption(this.cpuCharts); } } } }) .catch(() => { + this.opTypeList = []; this.initOver = true; }); }, + /** + * get cpu list + * @param {Object} row type row + * @param {Boolean} isSort if sort + */ + getCpuDetailList(row, isSort) { + const params = {}; + params.params = { + profile: this.profile_dir, + train_id: this.train_id, + }; + params.body = { + op_type: 'aicpu_detail', + device_id: this.currentCard, + filter_condition: row.op_filter_condition, + sort_condition: row.op_sort_condition, + group_condition: row.opDetailPage, + }; + requestService + .getProfilerOpData(params) + .then((res) => { + if (res && res.data) { + this.formatterDetailData(row, res.data); + this.$nextTick(() => { + let item = null; + if (this.cpuStatisticType) { + item = this.$refs['opCpuAllTable']; + } else { + item = this.$refs['expandCpuChild']; + this.curCpuActiveRow = { + rowItem: row, + childProp: row.op_sort_condition.name, + childOrder: row.op_sort_condition.type, + }; + } + if (item && isSort) { + item.sort( + row.op_sort_condition.name, + row.op_sort_condition.type, + ); + } + this.$refs.expandCpuTable.doLayout(); + }); + } + }) + .catch(() => {}); + }, /** * operator detail list page change * @param {Object} row table cell @@ -666,15 +884,15 @@ export default { * @param {Object} row table cell * @param {Number} pageIndex current page */ - opCpuPageChange(row, pageIndex) { + opCpuDetailPageChange(row, pageIndex) { row.opDetailPage.offset = pageIndex - 1; - this.getCpuList(false); + this.getCpuDetailList(row, false); }, /** * get core list by search */ searchOpCoreList() { - if (this.statisticType) { + if (this.coreStatisticType) { this.opAllTypeList.op_filter_condition = {}; if (this.searchByNameInput) { this.opAllTypeList.op_filter_condition = { @@ -708,16 +926,35 @@ export default { * get cpu list by search */ searchOpCpuList() { - this.opCpuList.op_filter_condition = {}; - if (this.searchByCPUTypeInput) { - this.opCpuList.op_filter_condition = { - op_type: {partial_match_str_in: [this.searchByCPUTypeInput]}, - }; + if (this.cpuStatisticType) { + this.opCpuAllTypeList.op_filter_condition = {}; + if (this.searchAllByCpuTypeInput) { + this.opCpuAllTypeList.op_filter_condition = { + op_type: {partial_match_str_in: [this.searchAllByCpuTypeInput]}, + }; + } else { + this.opCpuAllTypeList.op_filter_condition = {}; + } + this.opCpuAllTypeList.opDetailPage.offset = 0; + this.getCpuDetailList(this.opCpuAllTypeList, false); } else { - this.opCpuList.op_filter_condition = {}; + this.op_cpu_filter_condition = {}; + if (this.searchByCpuTypeInput) { + this.op_cpu_filter_condition = { + op_type: {partial_match_str_in: [this.searchByCpuTypeInput]}, + }; + } else { + this.op_cpu_filter_condition = {}; + } + if (this.curCpuActiveRow.rowItem) { + this.curCpuActiveRow = { + rowItem: null, + childProp: null, + childOrder: null, + }; + } + this.getCpuTypeList(); } - this.opCpuList.opDetailPage.offset = 0; - this.getCpuList(false); }, /** * core detail sort @@ -743,7 +980,7 @@ export default { type: column.order, }; row.opDetailPage.offset = 0; - this.getCpuList(false); + this.getCpuDetailList(row, false); }, /** * format detail data @@ -772,7 +1009,7 @@ export default { * expand core type table * @param {Object} row table cell */ - expandTypeItem(row) { + expandCoreTypeItem(row) { row.isExpanded = !row.isExpanded; if (row.isExpanded) { if (this.curActiveRow.rowItem) { @@ -803,6 +1040,41 @@ export default { }; } }, + /** + * expand cpu type table + * @param {Object} row table cell + */ + expandCpuTypeItem(row) { + row.isExpanded = !row.isExpanded; + if (row.isExpanded) { + if (this.curCpuActiveRow.rowItem) { + const item = this.$refs['expandCpuTable']; + if (item) { + item.toggleRowExpansion(this.curCpuActiveRow.rowItem, false); + } + } + this.curCpuActiveRow = { + rowItem: row, + childProp: null, + childOrder: null, + }; + row.opDetailList = []; + row.opDetailCol = []; + row.opDetailPage.offset = 0; + row.pageTotal = 0; + row.op_sort_condition = { + name: 'total_time', + type: 'descending', + }; + this.getCpuDetailList(row, true); + } else { + this.curCpuActiveRow = { + rowItem: null, + childProp: null, + childOrder: null, + }; + } + }, /** * tab change */ @@ -813,7 +1085,7 @@ export default { ) { this.initOver = false; this.clearCpuData(); - this.getCpuList(true); + this.getCpuTypeList(); } else if ( this.apiType === 'core' && this.coreCharts.device_id !== this.currentCard @@ -830,7 +1102,7 @@ export default { * core table type change */ coreTableChange() { - if (this.statisticType && !this.opAllTypeList.opDetailCol.length) { + if (this.coreStatisticType && !this.opAllTypeList.opDetailCol.length) { this.opAllTypeList.op_sort_condition = { name: 'avg_execution_time', type: 'descending', @@ -838,6 +1110,18 @@ export default { this.getCoreDetailList(this.opAllTypeList, true); } }, + /** + * cpu table type change + */ + cpuTableChange() { + if (this.cpuStatisticType && !this.opCpuAllTypeList.opDetailCol.length) { + this.opCpuAllTypeList.op_sort_condition = { + name: 'total_time', + type: 'descending', + }; + this.getCpuDetailList(this.opCpuAllTypeList, true); + } + }, /** * operator cpu chart change */ @@ -998,16 +1282,9 @@ export default { type: 'value', }; chart.data.forEach((item) => { - const name = this.apiType === 'cpu' ? item.op_name : item.name; - option.xAxis.data.push(name); + option.xAxis.data.push(item.name); option.series[0].data.push(item.value); }); - if (this.apiType === 'cpu') { - option.xAxis.axisLabel.formatter = (params, dataIndex) => { - const xAxisValue = chart.data[dataIndex].op_name; - return xAxisValue.replace(/^.+\//g, ''); - }; - } } this.$nextTick(() => { const cpuDom = document.getElementById(chart.id); @@ -1050,7 +1327,7 @@ export default { } } this.$nextTick(() => { - this.rowName = `${column.label}${this.$t('dataTraceback.details')}`; + this.rowName = `op_info${this.$t('dataTraceback.details')}`; this.detailsDialogVisible = true; this.detailsDataList = this.formateJsonString(val); }); @@ -1191,17 +1468,18 @@ export default { margin-right: 20px; } .cl-profiler-top { - height: 45%; + height: 47%; .chart-title { float: left; font-weight: bold; + height: 32px; } } .cl-profiler-top.fullScreen { display: none; } .cl-profiler-bottom { - height: 55%; + height: 53%; padding-top: 10px; .fullScreen { float: right; @@ -1212,14 +1490,6 @@ export default { .cl-profiler-bottom.fullScreen { height: 100%; } - .cpu-tab { - .cl-profiler-top { - height: calc(36% + 32px); - } - .cl-profiler-bottom { - height: 100%; - } - } .cl-profiler-echarts { width: 100%; height: calc(100% - 32px); @@ -1231,7 +1501,7 @@ export default { width: 100%; height: 100%; min-width: 1300px; - min-height: 306px; + min-height: 321px; overflow: hidden; } } diff --git a/mindinsight/ui/src/views/profiling/profiling-dashboard.vue b/mindinsight/ui/src/views/profiling/profiling-dashboard.vue index ac4c276..7b551be 100644 --- a/mindinsight/ui/src/views/profiling/profiling-dashboard.vue +++ b/mindinsight/ui/src/views/profiling/profiling-dashboard.vue @@ -1142,9 +1142,7 @@ export default { RequestService.queryTimeline(params) .then((res) => { if (res && res.data && res.data.length) { - this.timeLine.data = this.stringToUint8Array( - JSON.stringify(res.data), - ); + this.timeLine.data = JSON.stringify(res.data); this.timeLine.waiting = false; } }) -- GitLab