Skip to content

M
mindinsight

MindSpore / mindinsight

通知 7
Star 3
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 @@
"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": "总时长 ≈ "
......
mindinsight/ui/src/views/train-manage/data-process.vue
浏览文件 @ 8d9346bc
......@@ -72,9 +72,8 @@ limitations under the License.
clickKey="device_queue_op"
v-show="!processSummary.noData">
<div class="title">
{{$t('profiling.deviceQueueOp')}}
{{$t('profiling.deviceQueueOpTip')}}
</div>
<div class="content">{{$t('profiling.deviceQueueOpTip')}} | TDT</div>
</div>
<div class="queue-container"
......@@ -126,7 +125,8 @@ limitations under the License.
<div class="md-bottom"
v-if="!(connectQueueChart.noData && dataQueueChart.noData && deviceQueueOpChart
&& 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="chart-content">
<div class="chart-wrap"
......@@ -135,21 +135,15 @@ limitations under the License.
<template v-if="!connectQueueChart.noData">
<div class="data-tips">
<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">
{{$t('profiling.queueFullRatio')}}{{connectQueueChart.queueSummary.full_queue}}</div>
{{$t('profiling.queueTip1')}}{{connectQueueChart.queueSummary.full_queue}}
/{{connectQueueChart.size}}</div>
</div>
<div id="connect-queue"
class="chart"></div>
</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 class="chart-wrap"
:class="{highlight:selected==='data_queue'}">
......@@ -157,25 +151,20 @@ limitations under the License.
<template v-if="!dataQueueChart.noData">
<div class="data-tips">
<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">
{{$t('profiling.queueFullRatio')}}{{dataQueueChart.queueSummary.full_queue}}</div>
{{$t('profiling.queueTip1')}}{{dataQueueChart.queueSummary.full_queue}}
/{{dataQueueChart.size}}</div>
</div>
<div id="data-queue"
class="chart"></div>
</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 class="queue-step-wrap">
<div class="queue-step-wrap"
v-if="processSummary.count === 6">
<div class="title">{{$t('profiling.operatorTimeConAnalysis')}}</div>
<div class="chart-content second">
<div class="chart-wrap analysis"
......@@ -193,14 +182,6 @@ limitations under the License.
<div id="device_queue_op"
class="chart"></div>
</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 class="chart-wrap analysis"
:class="{highlight:selected==='get_next'}">
......@@ -217,14 +198,28 @@ limitations under the License.
<div id="get_next"
class="chart"></div>
</template>
<div class="image-noData"
v-if="getNextChart.noData">
<div>
<img :src="require('@/assets/images/nodata.png')"
alt="" />
</div>
</div>
</div>
<div class="queue-step-wrap single"
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>
<p>{{$t("public.noData")}}</p>
</div>
<div id="connect-queue"
class="chart"></div>
</template>
</div>
</div>
</div>
......@@ -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%;
......
mindinsight/ui/src/views/train-manage/operator.vue
浏览文件 @ 8d9346bc
<template>
<div class="operator">
<div class="operator-title">{{$t('profiling.operatorDetail')}}</div>
<div class="cl-profiler">
<div class="operator-title">{{$t('profiling.operatorDetail')}}</div>
<div class="cl-profiler">
<el-tabs v-model="apiType"
@tab-click="tabChange">
@tab-click="tabChange">
<el-tab-pane label="AI CORE"
name="core">
name="core">
<div class="cl-profiler-top"
v-if="coreCharts.data.length">
v-if="coreCharts.data.length">
<div>
<span class="profiler-title">
{{$t('operator.operatorTypeStatistics')}}
......@@ -31,7 +31,7 @@
</div>
</div>
<div class="cl-profiler-bottom"
v-if="coreCharts.data.length">
v-if="coreCharts.data.length">
<span class="profiler-title">
{{ $t('operator.operatorStatistics') }}
</span>
......@@ -82,73 +82,75 @@
@cell-click="showInfoDetail"
@sort-change="(...args)=>{coreDetailSortChange(props.row, ...args)}">
<el-table-column v-for="(ele, key) in props.row.opDetailCol"
:property="ele"
:key="key"
:sortable="ele === 'op_info' ? false : 'custom'"
:width="(ele==='execution_time'|| ele==='subgraph' ||
:property="ele"
:key="key"
:sortable="ele === 'op_info' ? false : 'custom'"
:width="(ele==='execution_time'|| ele==='subgraph' ||
ele==='op_name'|| ele==='op_type')?'220':''"
show-overflow-tooltip
:label="ele">
show-overflow-tooltip
:label="ele">
</el-table-column>
</el-table>
<el-pagination :current-page="props.row.opDetailPage.offset + 1"
:page-size="props.row.opDetailPage.limit"
@current-change="(...args)=>{opDetailPageChange(props.row, ...args)}"
layout="total, prev, pager, next, jumper"
:total="props.row.pageTotal">
:page-size="props.row.opDetailPage.limit"
@current-change="(...args)=>{opDetailPageChange(props.row, ...args)}"
layout="total, prev, pager, next, jumper"
:total="props.row.pageTotal">
</el-pagination>
<div class="clear"></div>
</div>
</template>
</el-table-column>
<el-table-column v-for="(item, $index) in opTypeCol"
:property="item"
:key="$index"
sortable
:label="item">
:property="item"
:key="$index"
sortable
:label="item">
</el-table-column>
</el-table>
<el-table v-show="statisticType && opAllTypeList.opDetailCol && opAllTypeList.opDetailCol.length"
:data="opAllTypeList.opDetailList"
stripe
ref="opAllTable"
width="100%"
height="calc(100% - 114px)"
@cell-click="showInfoDetail"
@sort-change="(...args)=>{coreDetailSortChange(opAllTypeList, ...args)}"
tooltip-effect="light">
<el-table-column v-for="(item, $index) in opAllTypeList.opDetailCol"
:property="item"
:key="$index"
:label="item"
:sortable="item === 'op_info' ? false : 'custom'"
:width="(item==='execution_time'|| item==='subgraph' ||
:property="item"
:key="$index"
:label="item"
:sortable="item === 'op_info' ? false : 'custom'"
:width="(item==='execution_time'|| item==='subgraph' ||
item==='op_name'|| item==='op_type')?'220':''"
show-overflow-tooltip>
show-overflow-tooltip>
</el-table-column>
</el-table>
<el-pagination v-show="statisticType"
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="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">
</el-pagination>
</div>
<div class="image-noData"
v-if="initOver && coreCharts.data.length === 0">
v-if="initOver && coreCharts.data.length === 0">
<div>
<img :src="require('@/assets/images/nodata.png')"
alt="" />
alt="" />
</div>
<p>{{ $t("public.noData") }}</p>
</div>
</el-tab-pane>
<el-tab-pane label="AI CPU"
class="cpu-tab"
name="cpu">
name="cpu"
v-if="false">
<div class="cl-profiler-top"
v-if="cpuCharts.data.length">
v-if="cpuCharts.data.length">
<div>
<span class="profiler-title">
{{ $t('operator.operatorStatistics') }}
......@@ -156,11 +158,11 @@
</div>
<div class="cl-profiler-echarts">
<div class
id="cpu-echarts"></div>
id="cpu-echarts"></div>
</div>
</div>
<div class="cl-profiler-bottom"
v-if="cpuCharts.data.length">
v-if="cpuCharts.data.length">
<span class="profiler-title">
{{ $t('operator.operatorStatistics') }}
</span>
......@@ -174,41 +176,42 @@
<el-table v-show="opCpuList.opDetailCol && opCpuList.opDetailCol.length"
:data="opCpuList.opDetailList"
stripe
ref="opCPUTable"
width="100%"
height="calc(100% - 82px)"
tooltip-effect="light"
@sort-change="(...args)=>{cpuDetailSortChange(opCpuList, ...args)}">
<el-table-column v-for="(item, $index) in opCpuList.opDetailCol"
:property="item"
:key="$index"
:label="item"
sortable="custom"
show-overflow-tooltip>
:property="item"
:key="$index"
:label="item"
sortable="custom"
show-overflow-tooltip>
</el-table-column>
</el-table>
<el-pagination v-if="opCpuList.opDetailList.length"
: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">
: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">
</el-pagination>
</div>
<div class="image-noData"
v-if="initOver && cpuCharts.data.length === 0">
v-if="initOver && cpuCharts.data.length === 0">
<div>
<img :src="require('@/assets/images/nodata.png')"
alt="" />
alt="" />
</div>
<p>{{$t("public.noData")}}</p>
</div>
</el-tab-pane>
</el-tabs>
<el-dialog :title="rowName"
:visible.sync="detailsDialogVisible"
width="50%"
:close-on-click-modal="false"
class="details-data-list">
:visible.sync="detailsDialogVisible"
width="50%"
:close-on-click-modal="false"
class="details-data-list">
<el-table :data="detailsDataList"
row-key="id"
lazy
......@@ -217,11 +220,11 @@
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column width="50" />
<el-table-column prop="key"
width="180"
label="Key"> </el-table-column>
width="180"
label="Key"> </el-table-column>
<el-table-column prop="value"
show-overflow-tooltip
label="Value">
show-overflow-tooltip
label="Value">
<template slot-scope="scope">
{{ scope.row.value }}
</template>
......@@ -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}<br>${
params[0].marker
}${params[0].value.toFixed(4)}`;
},
confine: true,
};
option.series = [
......@@ -1026,7 +1049,7 @@ export default {
};
</script>
<style lang="scss">
.operator{
.operator {
height: 100%;
}
.clear {
......@@ -1043,9 +1066,9 @@ export default {
font-weight: bold;
}
.operator-title {
padding: 0 15px;
font-size: 16px;
font-weight: bold;
padding: 0 15px;
font-size: 16px;
font-weight: bold;
}
.cl-profiler {
height: calc(100% - 21px);
......
mindinsight/ui/src/views/train-manage/profiling-dashboard.vue
浏览文件 @ 8d9346bc
......@@ -30,29 +30,29 @@ limitations under the License.
effect="light">
<div slot="content"
class="tooltip-container">
<div>{{$t("profiling.features")}}</div>
<div class="font-size-style">{{$t("profiling.features")}}</div>
<div>{{$t('profiling.iterationInfo')}}</div>
<div>
<span>{{$t('profiling.queueInfo')}}&nbsp;</span>
<span class="font-style">{{$t('profiling.queueInfo')}}&nbsp;</span>
<span>{{$t('profiling.iterationGapInfo')}}</span>
</div>
<div>
<span>{{$t('profiling.fpbpTitle')}}&nbsp;</span>
<span class="font-style">{{$t('profiling.fpbpTitle')}}&nbsp;</span>
<span>{{$t('profiling.fpbpInfo')}}</span>
</div>
<div>
<span>{{$t('profiling.iterativeTailingTitle')}}&nbsp;</span>
<span class="font-style">{{$t('profiling.iterativeTailingTitle')}}&nbsp;</span>
<span>{{$t('profiling.iterativeTailingInfo')}}</span>
</div>
<br />
<div>{{$t('profiling.statistics')}}</div>
<div class="font-size-style">{{$t('profiling.statistics')}}</div>
<div>{{$t('profiling.totalTime')}}
<span>{{totalTime}}{{$t('profiling.millisecond')}}</span>
</div>
<div>{{$t('profiling.totalSteps')}}<span>{{totalSteps}}</span></div>
<div>{{$t('profiling.fpbpTimeRatio')}}<span>{{fpAndBp}}</span></div>
<div>{{$t('profiling.iterationGapTimeRatio')}}<span>{{iterationInterval}}</span></div>
<div>{{$t('profiling.iterativeTailingTimeRatio')}}<span>{{tail}}</span></div>
<div>{{$t('profiling.iterationGapTimeRatio')}}<span>{{iteration_interval_percent}}</span></div>
<div>{{$t('profiling.fpbpTimeRatio')}}<span>{{fp_and_bp_percent}}</span></div>
<div>{{$t('profiling.iterativeTailingTimeRatio')}}<span>{{tail_percent}}</span></div>
</div>
<i class="el-icon-info"></i>
</el-tooltip>
......@@ -114,14 +114,15 @@ limitations under the License.
effect="light">
<div slot="content"
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.dataProcessInfo')}}</div>
<div>{{$t('profiling.analysisOne')}}</div>
<div>{{$t('profiling.analysisTwo')}}</div>
<div v-show="deviceInfoShow || queueInfoShow">{{$t('profiling.higherAnalysis')}}</div>
<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')}}
<span>{{queueInfoEmptyNum}} / {{queueInfoTotalNum}}</span>
</div>
......@@ -185,9 +186,8 @@ limitations under the License.
<div class="cell-container device_queue_op"
clickKey="device_queue_op">
<div class="title">
{{$t('profiling.deviceQueueOp')}}
{{$t('profiling.deviceQueueOpTip')}}
</div>
<div class="content">{{$t('profiling.deviceQueueOpTip')}} | TDT</div>
</div>
<div class="queue-container"
......@@ -332,11 +332,11 @@ import CommonProperty from '../../common/common-property';
export default {
data() {
return {
fpAndBp: '--',
iterationInterval: '--',
fp_and_bp_percent: '--',
iteration_interval_percent: '--',
totalSteps: '--',
totalTime: '--',
tail: '--',
tail_percent: '--',
queueInfoShow: false,
deviceInfoShow: false,
queueInfoEmptyNum: '--',
......@@ -617,17 +617,18 @@ export default {
this.dealTraceData();
}, 100);
if (res.data.summary) {
this.fpAndBp = res.data.summary.fp_and_bp;
this.iterationInterval = res.data.summary.iteration_interval;
this.fp_and_bp_percent = res.data.summary.fp_and_bp_percent;
this.iteration_interval_percent =
res.data.summary.iteration_interval_percent;
this.totalSteps = res.data.summary.total_steps;
this.totalTime = res.data.summary.total_time;
this.tail = res.data.summary.tail;
this.tail_percent = res.data.summary.tail_percent;
} else {
this.fpAndBp = '--';
this.iterationInterval = '--';
this.fp_and_bp_percent = '--';
this.iteration_interval_percent = '--';
this.totalSteps = '--';
this.totalTime = '--';
this.tail = '--';
this.tail_percent = '--';
}
} else {
document.querySelector('#trace').style.height = '0px';
......@@ -653,6 +654,7 @@ export default {
const svg = document.querySelector('#trace svg');
this.svg.totalTime = this.svg.data[0][0].duration;
if (this.svg.totalTime) {
this.svg.colorIndex = 0;
this.svg.data.forEach((row, index) => {
if (row && row.length) {
const dashedLine = this.addDashedLine(index);
......@@ -868,14 +870,16 @@ export default {
this.timelineInfo.noData = true;
});
this.perfetto.waiting = true;
RequestService.queryTimeline(params).then((res) => {
if (res && res.data) {
this.perfetto.data = this.stringToUint8Array(
JSON.stringify(res.data),
);
this.perfetto.waiting = false;
}
});
RequestService.queryTimeline(params)
.then((res) => {
if (res && res.data) {
this.perfetto.data = this.stringToUint8Array(
JSON.stringify(res.data),
);
this.perfetto.waiting = false;
}
})
.catch(() => {});
},
dealProcess(data) {
this.processSummary.device = {
......@@ -922,6 +926,13 @@ export default {
.tooltip-container {
line-height: 20px;
padding: 10px;
.font-style {
font-weight: bold;
}
.font-size-style {
font-weight: bold;
font-size: 16px;
}
}
.pro-router-wrap {
height: 100%;
......@@ -1032,10 +1043,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;
......
mindinsight/ui/src/views/train-manage/profiling.vue
浏览文件 @ 8d9346bc
......@@ -98,7 +98,6 @@ export default {
this.curDashboardInfo.query.path = '';
this.$message.error(this.$t('trainingDashboard.invalidId'));
}
this.getDataOfProfileHelper();
},
selectValueChange() {
const helperDiv = document.getElementById('helper-tips');
......@@ -121,6 +120,7 @@ export default {
});
});
this.curDashboardInfo.curCardNum = this.CardNumArr[0].value;
this.getDataOfProfileHelper();
}
} else {
this.CardNumArr = [];
......@@ -241,11 +241,13 @@ export default {
const divDom = document.createElement('div');
divDom.setAttribute('class', 'content-style');
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++) {
const desc = anchorContent.relpace(
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>`,
);
anchorContent = desc;
......@@ -310,7 +312,7 @@ export default {
margin-left: 32px;
background: #edf0f5;
word-wrap: break-word;
.nowrap-style{
.nowrap-style {
white-space: nowrap;
}
.cur-card {
......
mindinsight/ui/src/views/train-manage/step-trace.vue
浏览文件 @ 8d9346bc
......@@ -33,9 +33,14 @@ limitations under the License.
</div>
</div>
<div class="step-message">
<div class="step-padding-right">{{$t('profiling.stepTraceMessage')}}</div>
<div class="step-padding-right">{{$t('profiling.FPMessage')}}<span>{{fp_start}}</span></div>
<div class="step-padding-right">{{$t('profiling.BPMessage')}}<span>{{bp_end}}</span></div>
<div class="step-left-padding-right">
<span class="font-weight-style">{{$t('profiling.FPMessage')}}</span>
<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 class="pf-content-middle"
v-show="!tabsArr[0].noData && !tabsArr[1].noData && !tabsArr[2].noData && !svg.noData">
......@@ -377,9 +382,13 @@ export default {
res.data.training_trace_graph.length
) {
this.svg.noData = false;
if (res.data.point_info && res.data.point_info.length) {
this.fp_start = res.data.point_info.fp_start;
this.bp_end = res.data.point_info.bp_end;
if (res.data.point_info) {
this.fp_start = res.data.point_info.fp_start
? res.data.point_info.fp_start
: '--';
this.bp_end = res.data.point_info.bp_end
? res.data.point_info.bp_end
: '--';
} else {
this.fp_start = '--';
this.bp_end = '--';
......@@ -418,6 +427,7 @@ export default {
const svg = document.querySelector('#trace svg');
this.svg.totalTime = this.svg.data[0][0].duration;
if (this.svg.totalTime) {
this.svg.colorIndex = 0;
this.svg.data.forEach((row, index) => {
if (row && row.length) {
const dashedLine = this.addDashedLine(index);
......@@ -623,7 +633,6 @@ export default {
}
}
.step-message {
display: flex;
height: 24px;
line-height: 24px;
margin-top: 6px;
......@@ -631,7 +640,15 @@ export default {
overflow-y: auto;
}
.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 {
padding: 15px 15px 0;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或