Skip to content

M
mindinsight

MindSpore / mindinsight

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

UI support profiling minddata （4th commit）

上级 ed594114
隐藏空白更改
内联 并排
Showing with 232 addition and 177 deletion
mindinsight/ui/src/locales/zh-cn.json
浏览文件 @ 8d9346bc
...@@ -230,8 +230,6 @@ ...@@ -230,8 +230,6 @@
"path": "路径", "path": "路径",
"number": "卡编号", "number": "卡编号",
"distribution": "分布图", "distribution": "分布图",
"queueEmptyRatio": "队列空比例：",
"queueFullRatio": "队列满比例：",
"dataQueueDis": "数据队列分布图", "dataQueueDis": "数据队列分布图",
"operatorTimeConAnalysis": "算子耗时分析", "operatorTimeConAnalysis": "算子耗时分析",
"timeConStastic": "耗时统计", "timeConStastic": "耗时统计",
...@@ -320,7 +318,7 @@ ...@@ -320,7 +318,7 @@
"pipelineTopTitle": "算子间队列平均使用率", "pipelineTopTitle": "算子间队列平均使用率",
"pipelineMiddleTitle": "算子间队列关系", "pipelineMiddleTitle": "算子间队列关系",
"deviceQueueOp": "数据发送", "deviceQueueOp": "数据发送",
"deviceQueueOpTip": "数据发送算子", "deviceQueueOpTip": "前向+后向",
"getNext": "取数据算子", "getNext": "取数据算子",
"connectorQuene": "主机队列", "connectorQuene": "主机队列",
"getData": "数据获取", "getData": "数据获取",
...@@ -329,16 +327,16 @@ ...@@ -329,16 +327,16 @@
"opNum": "算子数目：", "opNum": "算子数目：",
"opTimes": "算子执行总次数：", "opTimes": "算子执行总次数：",
"features": "功能介绍：", "features": "功能介绍：",
"iterationInfo": "迭代轨迹展示的是每个step从上个迭代开始至该step结束的耗时信息，主体时间分为3部分：迭代间隙、前向+反向、迭代拖尾。", "iterationInfo": "迭代轨迹展示的是每个step从上个迭代开始至该step结束的耗时信息，主体时间分为3部分：迭代间隙、前向反向、迭代拖尾。",
"iterationGapInfo": "主要负责从数据队列中读取数据，如果该部分耗时较长，建议前往数据处理部分进一步分析；", "iterationGapInfo": "主要负责从数据队列中读取数据，如果该部分耗时较长，建议前往数据处理部分进一步分析；",
"fpbpTitle": "前向反向", "fpbpTitle": "前向反向",
"fpbpInfo": "执行网络中的前向算子以及反向算子，承载了一个step主要的计算工作，如果该部分耗时较长，建议前往算子统计或时间线中进一步分析；", "fpbpInfo": "执行网络中的前向算子以及反向算子，承载了一个step主要的计算工作，如果该部分耗时较长，建议前往算子统计或时间线中进一步分析；",
"iterativeTailingTitle": "迭代拖尾", "iterativeTailingTitle": "迭代拖尾",
"iterativeTailingInfo": "主要在多卡场景下执行参数聚合参数更新操作，如果该部分耗时较长，建议查看all_reduce耗时以及并行情况。", "iterativeTailingInfo": "主要在多卡场景下执行参数聚合、参数更新操作，如果该部分耗时较长，建议查看all_reduce耗时以及并行情况。",
"statistics": "统计信息：", "statistics": "统计信息：",
"totalTime": "总耗时：", "totalTime": "总耗时：",
"totalSteps": "总step数：", "totalSteps": "总step数：",
"fpbpTimeRatio": "前向+反向耗时占比：", "fpbpTimeRatio": "前向反向耗时占比：",
"iterationGapTimeRatio": "迭代间隙耗时占比：", "iterationGapTimeRatio": "迭代间隙耗时占比：",
"iterativeTailingTimeRatio": "迭代拖尾耗时占比：", "iterativeTailingTimeRatio": "迭代拖尾耗时占比：",
"dataProcess": "该图展示了数据处理阶段的流程，数据通过数据处理阶段存入主机队列，再通过数据传输阶段存入芯片侧的数据队列，最终由数据传输算子get_next发送给前向训练使用。", "dataProcess": "该图展示了数据处理阶段的流程，数据通过数据处理阶段存入主机队列，再通过数据传输阶段存入芯片侧的数据队列，最终由数据传输算子get_next发送给前向训练使用。",
...@@ -358,7 +356,6 @@ ...@@ -358,7 +356,6 @@
"queueTip2": "队列为空比例：", "queueTip2": "队列为空比例：",
"totalCapacity": "总容量", "totalCapacity": "总容量",
"averageCapacity": "平均使用容量", "averageCapacity": "平均使用容量",
"stepTraceMessage": "当前FP和BP为自动选点，如不合乎预期，请自行修改。",
"FPMessage": "FP起始算子：", "FPMessage": "FP起始算子：",
"BPMessage": "BP终止算子：", "BPMessage": "BP终止算子：",
"approximateTime": "总时长 ≈ " "approximateTime": "总时长 ≈ "
......
mindinsight/ui/src/views/train-manage/data-process.vue
浏览文件 @ 8d9346bc
...@@ -72,9 +72,8 @@ limitations under the License. ...@@ -72,9 +72,8 @@ limitations under the License.
clickKey="device_queue_op" clickKey="device_queue_op"
v-show="!processSummary.noData"> v-show="!processSummary.noData">
<div class="title"> <div class="title">
{{$t('profiling.deviceQueueOp')}} {{$t('profiling.deviceQueueOpTip')}}
</div> </div>
<div class="content">{{$t('profiling.deviceQueueOpTip')}} | TDT</div>
</div> </div>
<div class="queue-container" <div class="queue-container"
...@@ -126,7 +125,8 @@ limitations under the License. ...@@ -126,7 +125,8 @@ limitations under the License.
<div class="md-bottom" <div class="md-bottom"
v-if="!(connectQueueChart.noData && dataQueueChart.noData && deviceQueueOpChart v-if="!(connectQueueChart.noData && dataQueueChart.noData && deviceQueueOpChart
&& getNextChart.getNextChart)"> && getNextChart.getNextChart)">
<div class="queue-step-wrap"> <div class="queue-step-wrap"
v-if="processSummary.count === 6">
<div class="title">{{$t('profiling.queueStep')}}</div> <div class="title">{{$t('profiling.queueStep')}}</div>
<div class="chart-content"> <div class="chart-content">
<div class="chart-wrap" <div class="chart-wrap"
...@@ -135,21 +135,15 @@ limitations under the License. ...@@ -135,21 +135,15 @@ limitations under the License.
<template v-if="!connectQueueChart.noData"> <template v-if="!connectQueueChart.noData">
<div class="data-tips"> <div class="data-tips">
<div v-if="connectQueueChart.queueSummary.empty_queue!==undefined"> <div v-if="connectQueueChart.queueSummary.empty_queue!==undefined">
{{$t('profiling.queueEmptyRatio')}}{{connectQueueChart.queueSummary.empty_queue}}</div> {{$t('profiling.queueTip2')}}{{connectQueueChart.queueSummary.empty_queue}}
/{{connectQueueChart.size}}</div>
<div v-if="connectQueueChart.queueSummary.full_queue!==undefined"> <div v-if="connectQueueChart.queueSummary.full_queue!==undefined">
{{$t('profiling.queueFullRatio')}}{{connectQueueChart.queueSummary.full_queue}}</div> {{$t('profiling.queueTip1')}}{{connectQueueChart.queueSummary.full_queue}}
/{{connectQueueChart.size}}</div>
</div> </div>
<div id="connect-queue" <div id="connect-queue"
class="chart"></div> class="chart"></div>
</template> </template>
<div class="image-noData"
v-if="connectQueueChart.noData">
<div>
<img :src="require('@/assets/images/nodata.png')"
alt="" />
</div>
<p>{{$t("public.noData")}}</p>
</div>
</div> </div>
<div class="chart-wrap" <div class="chart-wrap"
:class="{highlight:selected==='data_queue'}"> :class="{highlight:selected==='data_queue'}">
...@@ -157,25 +151,20 @@ limitations under the License. ...@@ -157,25 +151,20 @@ limitations under the License.
<template v-if="!dataQueueChart.noData"> <template v-if="!dataQueueChart.noData">
<div class="data-tips"> <div class="data-tips">
<div v-if="dataQueueChart.queueSummary.empty_queue!==undefined"> <div v-if="dataQueueChart.queueSummary.empty_queue!==undefined">
{{$t('profiling.queueEmptyRatio')}}{{dataQueueChart.queueSummary.empty_queue}}</div> {{$t('profiling.queueTip2')}}{{dataQueueChart.queueSummary.empty_queue}}
/{{dataQueueChart.size}}</div>
<div v-if="dataQueueChart.queueSummary.full_queue!==undefined"> <div v-if="dataQueueChart.queueSummary.full_queue!==undefined">
{{$t('profiling.queueFullRatio')}}{{dataQueueChart.queueSummary.full_queue}}</div> {{$t('profiling.queueTip1')}}{{dataQueueChart.queueSummary.full_queue}}
/{{dataQueueChart.size}}</div>
</div> </div>
<div id="data-queue" <div id="data-queue"
class="chart"></div> class="chart"></div>
</template> </template>
<div class="image-noData"
v-if="dataQueueChart.noData">
<div>
<img :src="require('@/assets/images/nodata.png')"
alt="" />
</div>
<p>{{$t("public.noData")}}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="queue-step-wrap"> <div class="queue-step-wrap"
v-if="processSummary.count === 6">
<div class="title">{{$t('profiling.operatorTimeConAnalysis')}}</div> <div class="title">{{$t('profiling.operatorTimeConAnalysis')}}</div>
<div class="chart-content second"> <div class="chart-content second">
<div class="chart-wrap analysis" <div class="chart-wrap analysis"
...@@ -193,14 +182,6 @@ limitations under the License. ...@@ -193,14 +182,6 @@ limitations under the License.
<div id="device_queue_op" <div id="device_queue_op"
class="chart"></div> class="chart"></div>
</template> </template>
<div class="image-noData"
v-if="deviceQueueOpChart.noData">
<div>
<img :src="require('@/assets/images/nodata.png')"
alt="" />
</div>
<p>{{$t("public.noData")}}</p>
</div>
</div> </div>
<div class="chart-wrap analysis" <div class="chart-wrap analysis"
:class="{highlight:selected==='get_next'}"> :class="{highlight:selected==='get_next'}">
...@@ -217,14 +198,28 @@ limitations under the License. ...@@ -217,14 +198,28 @@ limitations under the License.
<div id="get_next" <div id="get_next"
class="chart"></div> class="chart"></div>
</template> </template>
<div class="image-noData" </div>
v-if="getNextChart.noData"> </div>
<div> </div>
<img :src="require('@/assets/images/nodata.png')" <div class="queue-step-wrap single"
alt="" /> v-if="processSummary.count !== 6">
<div class="title">{{$t('profiling.queueStep')}}</div>
<div class="chart-content">
<div class="chart-wrap"
:class="{highlight:selected==='connector_queue'}">
<div class="title">{{$t('profiling.connectorQuene')}}</div>
<template v-if="!connectQueueChart.noData">
<div class="data-tips">
<div v-if="connectQueueChart.queueSummary.empty_queue!==undefined">
{{$t('profiling.queueTip2')}}{{connectQueueChart.queueSummary.empty_queue}}
/{{connectQueueChart.size}}</div>
<div v-if="connectQueueChart.queueSummary.full_queue!==undefined">
{{$t('profiling.queueTip1')}}{{connectQueueChart.queueSummary.full_queue}}
/{{connectQueueChart.size}}</div>
</div> </div>
<p>{{$t("public.noData")}}</p> <div id="connect-queue"
</div> class="chart"></div>
</template>
</div> </div>
</div> </div>
</div> </div>
...@@ -315,6 +310,7 @@ export default { ...@@ -315,6 +310,7 @@ export default {
type: 0, type: 0,
params: 'device_queue', params: 'device_queue',
noData: false, noData: false,
size: null,
}, },
dataQueueChart: { dataQueueChart: {
id: 'data-queue', id: 'data-queue',
...@@ -325,6 +321,7 @@ export default { ...@@ -325,6 +321,7 @@ export default {
type: 0, type: 0,
params: 'get_next', params: 'get_next',
noData: false, noData: false,
size: null,
}, },
deviceQueueOpChart: { deviceQueueOpChart: {
id: 'device_queue_op', id: 'device_queue_op',
...@@ -423,10 +420,6 @@ export default { ...@@ -423,10 +420,6 @@ export default {
this.resizeCallback(); this.resizeCallback();
}, },
init() { init() {
this.queryQueueInfo(this.connectQueueChart);
this.queryQueueInfo(this.dataQueueChart);
this.queryMinddataOp(this.deviceQueueOpChart);
this.queryMinddataOp(this.getNextChart);
this.queryProcessSummary(); this.queryProcessSummary();
}, },
resizeCallback() { resizeCallback() {
...@@ -442,7 +435,7 @@ export default { ...@@ -442,7 +435,7 @@ export default {
if (this[val].chartDom) { if (this[val].chartDom) {
setTimeout(() => { setTimeout(() => {
this[val].chartDom.resize(); this[val].chartDom.resize();
}, 200); }, 300);
} }
}); });
}, },
...@@ -505,6 +498,7 @@ export default { ...@@ -505,6 +498,7 @@ export default {
if (result.size > 0) { if (result.size > 0) {
this.setOption(chart, result.size); this.setOption(chart, result.size);
chart.noData = false; chart.noData = false;
chart.size = result.size;
} else { } else {
if (chart.chartDom) { if (chart.chartDom) {
chart.chartDom.clear(); chart.chartDom.clear();
...@@ -607,6 +601,16 @@ export default { ...@@ -607,6 +601,16 @@ export default {
this.processSummary.count = Object.keys(data).length; this.processSummary.count = Object.keys(data).length;
this.dealProcess(data); 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 { } else {
this.dealProcess(null); this.dealProcess(null);
} }
...@@ -1223,10 +1227,6 @@ export default { ...@@ -1223,10 +1227,6 @@ export default {
padding: 0 0 0 20px; padding: 0 0 0 20px;
font-weight: bold; font-weight: bold;
} }
.content {
padding: 10px 20px 0px 20px;
font-size: 12px;
}
} }
.data-process { .data-process {
background-color: #e3f8eb; background-color: #e3f8eb;
...@@ -1354,6 +1354,15 @@ export default { ...@@ -1354,6 +1354,15 @@ export default {
height: calc(100% - 25px); height: calc(100% - 25px);
} }
} }
.queue-step-wrap.single{
height: 100%;
.chart-content{
.chart-wrap{
width: 100%;
}
}
}
} }
.pipeline-wrap { .pipeline-wrap {
height: 100%; height: 100%;
......
mindinsight/ui/src/views/train-manage/operator.vue
浏览文件 @ 8d9346bc
<template> <template>
<div class="operator"> <div class="operator">
<div class="operator-title">{{$t('profiling.operatorDetail')}}</div> <div class="operator-title">{{$t('profiling.operatorDetail')}}</div>
<div class="cl-profiler"> <div class="cl-profiler">
<el-tabs v-model="apiType" <el-tabs v-model="apiType"
@tab-click="tabChange"> @tab-click="tabChange">
<el-tab-pane label="AI CORE" <el-tab-pane label="AI CORE"
name="core"> name="core">
<div class="cl-profiler-top" <div class="cl-profiler-top"
v-if="coreCharts.data.length"> v-if="coreCharts.data.length">
<div> <div>
<span class="profiler-title"> <span class="profiler-title">
{{$t('operator.operatorTypeStatistics')}} {{$t('operator.operatorTypeStatistics')}}
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</div> </div>
</div> </div>
<div class="cl-profiler-bottom" <div class="cl-profiler-bottom"
v-if="coreCharts.data.length"> v-if="coreCharts.data.length">
<span class="profiler-title"> <span class="profiler-title">
{{ $t('operator.operatorStatistics') }} {{ $t('operator.operatorStatistics') }}
</span> </span>
...@@ -82,73 +82,75 @@ ...@@ -82,73 +82,75 @@
@cell-click="showInfoDetail" @cell-click="showInfoDetail"
@sort-change="(...args)=>{coreDetailSortChange(props.row, ...args)}"> @sort-change="(...args)=>{coreDetailSortChange(props.row, ...args)}">
<el-table-column v-for="(ele, key) in props.row.opDetailCol" <el-table-column v-for="(ele, key) in props.row.opDetailCol"
:property="ele" :property="ele"
:key="key" :key="key"
:sortable="ele === 'op_info' ? false : 'custom'" :sortable="ele === 'op_info' ? false : 'custom'"
:width="(ele==='execution_time'|| ele==='subgraph' || :width="(ele==='execution_time'|| ele==='subgraph' ||
ele==='op_name'|| ele==='op_type')?'220':''" ele==='op_name'|| ele==='op_type')?'220':''"
show-overflow-tooltip show-overflow-tooltip
:label="ele"> :label="ele">
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination :current-page="props.row.opDetailPage.offset + 1" <el-pagination :current-page="props.row.opDetailPage.offset + 1"
:page-size="props.row.opDetailPage.limit" :page-size="props.row.opDetailPage.limit"
@current-change="(...args)=>{opDetailPageChange(props.row, ...args)}" @current-change="(...args)=>{opDetailPageChange(props.row, ...args)}"
layout="total, prev, pager, next, jumper" layout="total, prev, pager, next, jumper"
:total="props.row.pageTotal"> :total="props.row.pageTotal">
</el-pagination> </el-pagination>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-for="(item, $index) in opTypeCol" <el-table-column v-for="(item, $index) in opTypeCol"
:property="item" :property="item"
:key="$index" :key="$index"
sortable sortable
:label="item"> :label="item">
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-table v-show="statisticType && opAllTypeList.opDetailCol && opAllTypeList.opDetailCol.length" <el-table v-show="statisticType && opAllTypeList.opDetailCol && opAllTypeList.opDetailCol.length"
:data="opAllTypeList.opDetailList" :data="opAllTypeList.opDetailList"
stripe stripe
ref="opAllTable"
width="100%" width="100%"
height="calc(100% - 114px)" height="calc(100% - 114px)"
@cell-click="showInfoDetail" @cell-click="showInfoDetail"
@sort-change="(...args)=>{coreDetailSortChange(opAllTypeList, ...args)}" @sort-change="(...args)=>{coreDetailSortChange(opAllTypeList, ...args)}"
tooltip-effect="light"> tooltip-effect="light">
<el-table-column v-for="(item, $index) in opAllTypeList.opDetailCol" <el-table-column v-for="(item, $index) in opAllTypeList.opDetailCol"
:property="item" :property="item"
:key="$index" :key="$index"
:label="item" :label="item"
:sortable="item === 'op_info' ? false : 'custom'" :sortable="item === 'op_info' ? false : 'custom'"
:width="(item==='execution_time'|| item==='subgraph' || :width="(item==='execution_time'|| item==='subgraph' ||
item==='op_name'|| item==='op_type')?'220':''" item==='op_name'|| item==='op_type')?'220':''"
show-overflow-tooltip> show-overflow-tooltip>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination v-show="statisticType" <el-pagination v-show="statisticType"
v-if="opAllTypeList.opDetailList.length" v-if="opAllTypeList.opDetailList.length"
:current-page="opAllTypeList.opDetailPage.offset + 1" :current-page="opAllTypeList.opDetailPage.offset + 1"
:page-size="opAllTypeList.opDetailPage.limit" :page-size="opAllTypeList.opDetailPage.limit"
@current-change="(...args)=>{opDetailPageChange(opAllTypeList, ...args)}" @current-change="(...args)=>{opDetailPageChange(opAllTypeList, ...args)}"
layout="total, prev, pager, next, jumper" layout="total, prev, pager, next, jumper"
:total="opAllTypeList.pageTotal"> :total="opAllTypeList.pageTotal">
</el-pagination> </el-pagination>
</div> </div>
<div class="image-noData" <div class="image-noData"
v-if="initOver && coreCharts.data.length === 0"> v-if="initOver && coreCharts.data.length === 0">
<div> <div>
<img :src="require('@/assets/images/nodata.png')" <img :src="require('@/assets/images/nodata.png')"
alt="" /> alt="" />
</div> </div>
<p>{{ $t("public.noData") }}</p> <p>{{ $t("public.noData") }}</p>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="AI CPU" <el-tab-pane label="AI CPU"
class="cpu-tab" class="cpu-tab"
name="cpu"> name="cpu"
v-if="false">
<div class="cl-profiler-top" <div class="cl-profiler-top"
v-if="cpuCharts.data.length"> v-if="cpuCharts.data.length">
<div> <div>
<span class="profiler-title"> <span class="profiler-title">
{{ $t('operator.operatorStatistics') }} {{ $t('operator.operatorStatistics') }}
...@@ -156,11 +158,11 @@ ...@@ -156,11 +158,11 @@
</div> </div>
<div class="cl-profiler-echarts"> <div class="cl-profiler-echarts">
<div class <div class
id="cpu-echarts"></div> id="cpu-echarts"></div>
</div> </div>
</div> </div>
<div class="cl-profiler-bottom" <div class="cl-profiler-bottom"
v-if="cpuCharts.data.length"> v-if="cpuCharts.data.length">
<span class="profiler-title"> <span class="profiler-title">
{{ $t('operator.operatorStatistics') }} {{ $t('operator.operatorStatistics') }}
</span> </span>
...@@ -174,41 +176,42 @@ ...@@ -174,41 +176,42 @@
<el-table v-show="opCpuList.opDetailCol && opCpuList.opDetailCol.length" <el-table v-show="opCpuList.opDetailCol && opCpuList.opDetailCol.length"
:data="opCpuList.opDetailList" :data="opCpuList.opDetailList"
stripe stripe
ref="opCPUTable"
width="100%" width="100%"
height="calc(100% - 82px)" height="calc(100% - 82px)"
tooltip-effect="light" tooltip-effect="light"
@sort-change="(...args)=>{cpuDetailSortChange(opCpuList, ...args)}"> @sort-change="(...args)=>{cpuDetailSortChange(opCpuList, ...args)}">
<el-table-column v-for="(item, $index) in opCpuList.opDetailCol" <el-table-column v-for="(item, $index) in opCpuList.opDetailCol"
:property="item" :property="item"
:key="$index" :key="$index"
:label="item" :label="item"
sortable="custom" sortable="custom"
show-overflow-tooltip> show-overflow-tooltip>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination v-if="opCpuList.opDetailList.length" <el-pagination v-if="opCpuList.opDetailList.length"
:current-page="opCpuList.opDetailPage.offset + 1" :current-page="opCpuList.opDetailPage.offset + 1"
:page-size="opCpuList.opDetailPage.limit" :page-size="opCpuList.opDetailPage.limit"
@current-change="(...args)=>{opCpuPageChange(opCpuList, ...args)}" @current-change="(...args)=>{opCpuPageChange(opCpuList, ...args)}"
layout="total, prev, pager, next, jumper" layout="total, prev, pager, next, jumper"
:total="opCpuList.pageTotal"> :total="opCpuList.pageTotal">
</el-pagination> </el-pagination>
</div> </div>
<div class="image-noData" <div class="image-noData"
v-if="initOver && cpuCharts.data.length === 0"> v-if="initOver && cpuCharts.data.length === 0">
<div> <div>
<img :src="require('@/assets/images/nodata.png')" <img :src="require('@/assets/images/nodata.png')"
alt="" /> alt="" />
</div> </div>
<p>{{$t("public.noData")}}</p> <p>{{$t("public.noData")}}</p>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-dialog :title="rowName" <el-dialog :title="rowName"
:visible.sync="detailsDialogVisible" :visible.sync="detailsDialogVisible"
width="50%" width="50%"
:close-on-click-modal="false" :close-on-click-modal="false"
class="details-data-list"> class="details-data-list">
<el-table :data="detailsDataList" <el-table :data="detailsDataList"
row-key="id" row-key="id"
lazy lazy
...@@ -217,11 +220,11 @@ ...@@ -217,11 +220,11 @@
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column width="50" /> <el-table-column width="50" />
<el-table-column prop="key" <el-table-column prop="key"
width="180" width="180"
label="Key"> </el-table-column> label="Key"> </el-table-column>
<el-table-column prop="value" <el-table-column prop="value"
show-overflow-tooltip show-overflow-tooltip
label="Value"> label="Value">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.value }} {{ scope.row.value }}
</template> </template>
...@@ -327,7 +330,7 @@ export default { ...@@ -327,7 +330,7 @@ export default {
if (this.coreCharts.chartDom) { if (this.coreCharts.chartDom) {
setTimeout(() => { setTimeout(() => {
this.coreCharts.chartDom.resize(); this.coreCharts.chartDom.resize();
}, 200); }, 300);
} }
}, },
/** /**
...@@ -340,7 +343,7 @@ export default { ...@@ -340,7 +343,7 @@ export default {
this.getCoreTypeList(); this.getCoreTypeList();
} else if (this.apiType === 'cpu') { } else if (this.apiType === 'cpu') {
this.clearCpuData(); this.clearCpuData();
this.getCpuList(); this.getCpuList(true);
} }
}, },
opTypeSortChange() { opTypeSortChange() {
...@@ -508,19 +511,22 @@ export default { ...@@ -508,19 +511,22 @@ export default {
if (res && res.data) { if (res && res.data) {
this.formatterDetailData(row, res.data); this.formatterDetailData(row, res.data);
this.$nextTick(() => { this.$nextTick(() => {
const item = this.$refs['expandChild']; let item = null;
if (item) { if (this.statisticType) {
item = this.$refs['opAllTable'];
} else {
item = this.$refs['expandChild'];
this.curActiveRow = { this.curActiveRow = {
rowItem: row, rowItem: row,
childProp: row.op_sort_condition.name, childProp: row.op_sort_condition.name,
childOrder: row.op_sort_condition.type, childOrder: row.op_sort_condition.type,
}; };
if (isSort) { }
item.sort( if (item && isSort) {
row.op_sort_condition.name, item.sort(
row.op_sort_condition.type, row.op_sort_condition.name,
); row.op_sort_condition.type,
} );
} }
}); });
} }
...@@ -529,8 +535,9 @@ export default { ...@@ -529,8 +535,9 @@ export default {
}, },
/** /**
* get cpu list * get cpu list
* @param {Boolean} isSort if sort
*/ */
getCpuList() { getCpuList(isSort) {
const params = {}; const params = {};
params.params = { params.params = {
profile: this.profile_dir, profile: this.profile_dir,
...@@ -569,6 +576,17 @@ export default { ...@@ -569,6 +576,17 @@ export default {
res.data.object.splice(8); res.data.object.splice(8);
} }
this.formatterDetailData(this.opCpuList, res.data); 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 { ...@@ -592,7 +610,7 @@ export default {
*/ */
opCpuPageChange(row, pageIndex) { opCpuPageChange(row, pageIndex) {
row.opDetailPage.offset = pageIndex - 1; row.opDetailPage.offset = pageIndex - 1;
this.getCpuList(); this.getCpuList(false);
}, },
/** /**
* get core list by search * get core list by search
...@@ -639,7 +657,7 @@ export default { ...@@ -639,7 +657,7 @@ export default {
} else { } else {
this.opCpuList.op_filter_condition = {}; this.opCpuList.op_filter_condition = {};
} }
this.getCpuList(); this.getCpuList(false);
}, },
/** /**
* core detail sort * core detail sort
...@@ -665,7 +683,7 @@ export default { ...@@ -665,7 +683,7 @@ export default {
type: column.order, type: column.order,
}; };
row.opDetailPage.offset = 0; row.opDetailPage.offset = 0;
this.getCpuList(); this.getCpuList(false);
}, },
/** /**
* format detail data * format detail data
...@@ -732,7 +750,7 @@ export default { ...@@ -732,7 +750,7 @@ export default {
) { ) {
this.initOver = false; this.initOver = false;
this.clearCpuData(); this.clearCpuData();
this.getCpuList(); this.getCpuList(true);
} else if ( } else if (
this.apiType === 'core' && this.apiType === 'core' &&
this.coreCharts.device_id !== this.currentCard this.coreCharts.device_id !== this.currentCard
...@@ -855,6 +873,11 @@ export default { ...@@ -855,6 +873,11 @@ export default {
option.color = ['#6C92FA']; option.color = ['#6C92FA'];
option.tooltip = { option.tooltip = {
trigger: 'axis', trigger: 'axis',
formatter: (params) => {
return `${params[0].axisValue}<br>${
params[0].marker
}${params[0].value.toFixed(4)}`;
},
confine: true, confine: true,
}; };
option.series = [ option.series = [
...@@ -1026,7 +1049,7 @@ export default { ...@@ -1026,7 +1049,7 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.operator{ .operator {
height: 100%; height: 100%;
} }
.clear { .clear {
...@@ -1043,9 +1066,9 @@ export default { ...@@ -1043,9 +1066,9 @@ export default {
font-weight: bold; font-weight: bold;
} }
.operator-title { .operator-title {
padding: 0 15px; padding: 0 15px;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
.cl-profiler { .cl-profiler {
height: calc(100% - 21px); height: calc(100% - 21px);
......
mindinsight/ui/src/views/train-manage/profiling-dashboard.vue
浏览文件 @ 8d9346bc
...@@ -30,29 +30,29 @@ limitations under the License. ...@@ -30,29 +30,29 @@ limitations under the License.
effect="light"> effect="light">
<div slot="content" <div slot="content"
class="tooltip-container"> class="tooltip-container">
<div>{{$t("profiling.features")}}</div> <div class="font-size-style">{{$t("profiling.features")}}</div>
<div>{{$t('profiling.iterationInfo')}}</div> <div>{{$t('profiling.iterationInfo')}}</div>
<div> <div>
<span>{{$t('profiling.queueInfo')}}&nbsp;</span> <span class="font-style">{{$t('profiling.queueInfo')}}&nbsp;</span>
<span>{{$t('profiling.iterationGapInfo')}}</span> <span>{{$t('profiling.iterationGapInfo')}}</span>
</div> </div>
<div> <div>
<span>{{$t('profiling.fpbpTitle')}}&nbsp;</span> <span class="font-style">{{$t('profiling.fpbpTitle')}}&nbsp;</span>
<span>{{$t('profiling.fpbpInfo')}}</span> <span>{{$t('profiling.fpbpInfo')}}</span>
</div> </div>
<div> <div>
<span>{{$t('profiling.iterativeTailingTitle')}}&nbsp;</span> <span class="font-style">{{$t('profiling.iterativeTailingTitle')}}&nbsp;</span>
<span>{{$t('profiling.iterativeTailingInfo')}}</span> <span>{{$t('profiling.iterativeTailingInfo')}}</span>
</div> </div>
<br /> <br />
<div>{{$t('profiling.statistics')}}</div> <div class="font-size-style">{{$t('profiling.statistics')}}</div>
<div>{{$t('profiling.totalTime')}} <div>{{$t('profiling.totalTime')}}
<span>{{totalTime}}{{$t('profiling.millisecond')}}</span> <span>{{totalTime}}{{$t('profiling.millisecond')}}</span>
</div> </div>
<div>{{$t('profiling.totalSteps')}}<span>{{totalSteps}}</span></div> <div>{{$t('profiling.totalSteps')}}<span>{{totalSteps}}</span></div>
<div>{{$t('profiling.fpbpTimeRatio')}}<span>{{fpAndBp}}</span></div> <div>{{$t('profiling.iterationGapTimeRatio')}}<span>{{iteration_interval_percent}}</span></div>
<div>{{$t('profiling.iterationGapTimeRatio')}}<span>{{iterationInterval}}</span></div> <div>{{$t('profiling.fpbpTimeRatio')}}<span>{{fp_and_bp_percent}}</span></div>
<div>{{$t('profiling.iterativeTailingTimeRatio')}}<span>{{tail}}</span></div> <div>{{$t('profiling.iterativeTailingTimeRatio')}}<span>{{tail_percent}}</span></div>
</div> </div>
<i class="el-icon-info"></i> <i class="el-icon-info"></i>
</el-tooltip> </el-tooltip>
...@@ -114,14 +114,15 @@ limitations under the License. ...@@ -114,14 +114,15 @@ limitations under the License.
effect="light"> effect="light">
<div slot="content" <div slot="content"
class="tooltip-container"> class="tooltip-container">
<div>{{$t("profiling.features")}}</div> <div class="font-size-style">{{$t("profiling.features")}}</div>
<div>{{$t('profiling.dataProcess')}}</div> <div>{{$t('profiling.dataProcess')}}</div>
<div>{{$t('profiling.dataProcessInfo')}}</div> <div>{{$t('profiling.dataProcessInfo')}}</div>
<div>{{$t('profiling.analysisOne')}}</div> <div>{{$t('profiling.analysisOne')}}</div>
<div>{{$t('profiling.analysisTwo')}}</div> <div>{{$t('profiling.analysisTwo')}}</div>
<div v-show="deviceInfoShow || queueInfoShow">{{$t('profiling.higherAnalysis')}}</div> <div v-show="deviceInfoShow || queueInfoShow">{{$t('profiling.higherAnalysis')}}</div>
<br /> <br />
<div v-show="deviceInfoShow || queueInfoShow">{{$t('profiling.statistics')}}</div> <div v-show="deviceInfoShow || queueInfoShow"
class="font-size-style">{{$t('profiling.statistics')}}</div>
<div v-show="queueInfoShow">{{$t('profiling.chipInfo')}} <div v-show="queueInfoShow">{{$t('profiling.chipInfo')}}
<span>{{queueInfoEmptyNum}} / {{queueInfoTotalNum}}</span> <span>{{queueInfoEmptyNum}} / {{queueInfoTotalNum}}</span>
</div> </div>
...@@ -185,9 +186,8 @@ limitations under the License. ...@@ -185,9 +186,8 @@ limitations under the License.
<div class="cell-container device_queue_op" <div class="cell-container device_queue_op"
clickKey="device_queue_op"> clickKey="device_queue_op">
<div class="title"> <div class="title">
{{$t('profiling.deviceQueueOp')}} {{$t('profiling.deviceQueueOpTip')}}
</div> </div>
<div class="content">{{$t('profiling.deviceQueueOpTip')}} | TDT</div>
</div> </div>
<div class="queue-container" <div class="queue-container"
...@@ -332,11 +332,11 @@ import CommonProperty from '../../common/common-property'; ...@@ -332,11 +332,11 @@ import CommonProperty from '../../common/common-property';
export default { export default {
data() { data() {
return { return {
fpAndBp: '--', fp_and_bp_percent: '--',
iterationInterval: '--', iteration_interval_percent: '--',
totalSteps: '--', totalSteps: '--',
totalTime: '--', totalTime: '--',
tail: '--', tail_percent: '--',
queueInfoShow: false, queueInfoShow: false,
deviceInfoShow: false, deviceInfoShow: false,
queueInfoEmptyNum: '--', queueInfoEmptyNum: '--',
...@@ -617,17 +617,18 @@ export default { ...@@ -617,17 +617,18 @@ export default {
this.dealTraceData(); this.dealTraceData();
}, 100); }, 100);
if (res.data.summary) { if (res.data.summary) {
this.fpAndBp = res.data.summary.fp_and_bp; this.fp_and_bp_percent = res.data.summary.fp_and_bp_percent;
this.iterationInterval = res.data.summary.iteration_interval; this.iteration_interval_percent =
res.data.summary.iteration_interval_percent;
this.totalSteps = res.data.summary.total_steps; this.totalSteps = res.data.summary.total_steps;
this.totalTime = res.data.summary.total_time; this.totalTime = res.data.summary.total_time;
this.tail = res.data.summary.tail; this.tail_percent = res.data.summary.tail_percent;
} else { } else {
this.fpAndBp = '--'; this.fp_and_bp_percent = '--';
this.iterationInterval = '--'; this.iteration_interval_percent = '--';
this.totalSteps = '--'; this.totalSteps = '--';
this.totalTime = '--'; this.totalTime = '--';
this.tail = '--'; this.tail_percent = '--';
} }
} else { } else {
document.querySelector('#trace').style.height = '0px'; document.querySelector('#trace').style.height = '0px';
...@@ -653,6 +654,7 @@ export default { ...@@ -653,6 +654,7 @@ export default {
const svg = document.querySelector('#trace svg'); const svg = document.querySelector('#trace svg');
this.svg.totalTime = this.svg.data[0][0].duration; this.svg.totalTime = this.svg.data[0][0].duration;
if (this.svg.totalTime) { if (this.svg.totalTime) {
this.svg.colorIndex = 0;
this.svg.data.forEach((row, index) => { this.svg.data.forEach((row, index) => {
if (row && row.length) { if (row && row.length) {
const dashedLine = this.addDashedLine(index); const dashedLine = this.addDashedLine(index);
...@@ -868,14 +870,16 @@ export default { ...@@ -868,14 +870,16 @@ export default {
this.timelineInfo.noData = true; this.timelineInfo.noData = true;
}); });
this.perfetto.waiting = true; this.perfetto.waiting = true;
RequestService.queryTimeline(params).then((res) => { RequestService.queryTimeline(params)
if (res && res.data) { .then((res) => {
this.perfetto.data = this.stringToUint8Array( if (res && res.data) {
JSON.stringify(res.data), this.perfetto.data = this.stringToUint8Array(
); JSON.stringify(res.data),
this.perfetto.waiting = false; );
} this.perfetto.waiting = false;
}); }
})
.catch(() => {});
}, },
dealProcess(data) { dealProcess(data) {
this.processSummary.device = { this.processSummary.device = {
...@@ -922,6 +926,13 @@ export default { ...@@ -922,6 +926,13 @@ export default {
.tooltip-container { .tooltip-container {
line-height: 20px; line-height: 20px;
padding: 10px; padding: 10px;
.font-style {
font-weight: bold;
}
.font-size-style {
font-weight: bold;
font-size: 16px;
}
} }
.pro-router-wrap { .pro-router-wrap {
height: 100%; height: 100%;
...@@ -1032,10 +1043,6 @@ export default { ...@@ -1032,10 +1043,6 @@ export default {
padding: 0 0 0 20px; padding: 0 0 0 20px;
font-weight: bold; font-weight: bold;
} }
.content {
padding: 10px 20px 0px 20px;
font-size: 12px;
}
} }
.data-process { .data-process {
background-color: #e3f8eb; background-color: #e3f8eb;
......
mindinsight/ui/src/views/train-manage/profiling.vue
浏览文件 @ 8d9346bc
...@@ -98,7 +98,6 @@ export default { ...@@ -98,7 +98,6 @@ export default {
this.curDashboardInfo.query.path = ''; this.curDashboardInfo.query.path = '';
this.$message.error(this.$t('trainingDashboard.invalidId')); this.$message.error(this.$t('trainingDashboard.invalidId'));
} }
this.getDataOfProfileHelper();
}, },
selectValueChange() { selectValueChange() {
const helperDiv = document.getElementById('helper-tips'); const helperDiv = document.getElementById('helper-tips');
...@@ -121,6 +120,7 @@ export default { ...@@ -121,6 +120,7 @@ export default {
}); });
}); });
this.curDashboardInfo.curCardNum = this.CardNumArr[0].value; this.curDashboardInfo.curCardNum = this.CardNumArr[0].value;
this.getDataOfProfileHelper();
} }
} else { } else {
this.CardNumArr = []; this.CardNumArr = [];
...@@ -241,11 +241,13 @@ export default { ...@@ -241,11 +241,13 @@ export default {
const divDom = document.createElement('div'); const divDom = document.createElement('div');
divDom.setAttribute('class', 'content-style'); divDom.setAttribute('class', 'content-style');
const anchorList = this.$t(`profiling`)[item].anchor; const anchorList = this.$t(`profiling`)[item].anchor;
const anchorContent = this.$t(`profiling`)[item].desc; let anchorContent = this.$t(`profiling`)[item].desc;
for (let i = 0; i < anchorList.length; i++) { for (let i = 0; i < anchorList.length; i++) {
const desc = anchorContent.relpace( const desc = anchorContent.relpace(
anchorList[i], anchorList[i],
`<a target="_blank" href="${this.$t(`profiling`)[item].url[i]}"> `<a target="_blank" href="${
this.$t(`profiling`)[item].url[i]
}">
${anchorList[i]}</a>`, ${anchorList[i]}</a>`,
); );
anchorContent = desc; anchorContent = desc;
...@@ -310,7 +312,7 @@ export default { ...@@ -310,7 +312,7 @@ export default {
margin-left: 32px; margin-left: 32px;
background: #edf0f5; background: #edf0f5;
word-wrap: break-word; word-wrap: break-word;
.nowrap-style{ .nowrap-style {
white-space: nowrap; white-space: nowrap;
} }
.cur-card { .cur-card {
......
mindinsight/ui/src/views/train-manage/step-trace.vue
浏览文件 @ 8d9346bc
...@@ -33,9 +33,14 @@ limitations under the License. ...@@ -33,9 +33,14 @@ limitations under the License.
</div> </div>
</div> </div>
<div class="step-message"> <div class="step-message">
<div class="step-padding-right">{{$t('profiling.stepTraceMessage')}}</div> <div class="step-left-padding-right">
<div class="step-padding-right">{{$t('profiling.FPMessage')}}<span>{{fp_start}}</span></div> <span class="font-weight-style">{{$t('profiling.FPMessage')}}</span>
<div class="step-padding-right">{{$t('profiling.BPMessage')}}<span>{{bp_end}}</span></div> <span>{{fp_start}}</span>
</div>
<div class="step-padding-right">
<span class="font-weight-style">{{$t('profiling.BPMessage')}}</span>
<span>{{bp_end}}</span>
</div>
</div> </div>
<div class="pf-content-middle" <div class="pf-content-middle"
v-show="!tabsArr[0].noData && !tabsArr[1].noData && !tabsArr[2].noData && !svg.noData"> v-show="!tabsArr[0].noData && !tabsArr[1].noData && !tabsArr[2].noData && !svg.noData">
...@@ -377,9 +382,13 @@ export default { ...@@ -377,9 +382,13 @@ export default {
res.data.training_trace_graph.length res.data.training_trace_graph.length
) { ) {
this.svg.noData = false; this.svg.noData = false;
if (res.data.point_info && res.data.point_info.length) { if (res.data.point_info) {
this.fp_start = res.data.point_info.fp_start; this.fp_start = res.data.point_info.fp_start
this.bp_end = res.data.point_info.bp_end; ? res.data.point_info.fp_start
: '--';
this.bp_end = res.data.point_info.bp_end
? res.data.point_info.bp_end
: '--';
} else { } else {
this.fp_start = '--'; this.fp_start = '--';
this.bp_end = '--'; this.bp_end = '--';
...@@ -418,6 +427,7 @@ export default { ...@@ -418,6 +427,7 @@ export default {
const svg = document.querySelector('#trace svg'); const svg = document.querySelector('#trace svg');
this.svg.totalTime = this.svg.data[0][0].duration; this.svg.totalTime = this.svg.data[0][0].duration;
if (this.svg.totalTime) { if (this.svg.totalTime) {
this.svg.colorIndex = 0;
this.svg.data.forEach((row, index) => { this.svg.data.forEach((row, index) => {
if (row && row.length) { if (row && row.length) {
const dashedLine = this.addDashedLine(index); const dashedLine = this.addDashedLine(index);
...@@ -623,7 +633,6 @@ export default { ...@@ -623,7 +633,6 @@ export default {
} }
} }
.step-message { .step-message {
display: flex;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
margin-top: 6px; margin-top: 6px;
...@@ -631,7 +640,15 @@ export default { ...@@ -631,7 +640,15 @@ export default {
overflow-y: auto; overflow-y: auto;
} }
.step-padding-right { .step-padding-right {
padding-right: 6px; padding-right: 20px;
display: inline-block;
}
.step-left-padding-right {
padding-right: 30px;
display: inline-block;
}
.font-weight-style {
font-weight: bold;
} }
.pf-content-middle { .pf-content-middle {
padding: 15px 15px 0; padding: 15px 15px 0;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或