Skip to content

M
mindinsight

MindSpore / mindinsight

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

!505 Optimized ui page initialization 

Merge pull request !505 from 冯学峰/myMaster02
上级 145513bf 1b2e05ff
隐藏空白更改
内联 并排
Showing with 108 addition and 39 deletion
mindinsight/ui/src/views/train-manage/profiling-dashboard.vue
浏览文件 @ bfbe5e87
......@@ -60,7 +60,8 @@ limitations under the License.
</div>
<div class="trace-container">
<div id="trace"
class="training-trace">
class="training-trace"
:style="{height: svg.totalHeight + 'px'}">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
height="100%"
......@@ -525,6 +526,10 @@ export default {
}
});
},
/**
* router link
* @param { String } path router path
*/
viewDetail(path) {
this.$router.push({
path,
......@@ -535,6 +540,9 @@ export default {
},
});
},
/**
* chart setOption
*/
setPieOption() {
const option = {};
option.tooltip = {
......@@ -580,6 +588,9 @@ export default {
this.pieChart.chartDom.resize();
}, 10);
},
/**
* init chart
*/
initPieChart() {
const params = {};
params.params = {
......@@ -650,7 +661,8 @@ export default {
(res) => {
this.svg.initOver = true;
if (
res.data &&
res &&
res.data &&
res.data.training_trace_graph &&
res.data.training_trace_graph.length
) {
......@@ -677,14 +689,14 @@ export default {
this.tail_percent = '--';
}
} else {
document.querySelector('#trace').style.height = '0px';
this.svg.totalHeight = 0;
this.svg.noData = true;
this.svg.data = [];
this.removeTrace();
}
},
(error) => {
document.querySelector('#trace').style.height = '0px';
this.svg.totalHeight = 0;
this.svg.noData = true;
this.svg.data = [];
this.svg.initOver = true;
......@@ -740,9 +752,6 @@ export default {
});
this.svg.totalHeight += this.svg.rowPadding;
document.querySelector(
'#trace',
).style.height = `${this.svg.totalHeight}px`;
this.svg.data = JSON.parse(JSON.stringify(data));
this.$nextTick(() => {
......@@ -853,7 +862,7 @@ export default {
break;
}
const textContent = `${name}: ${data.duration.toFixed(4)}ms`;
const textContent = `${name}: ${this.toFixedFun(data.duration, 4)}ms`;
const textWidth = this.getTextWidth(textContent);
const normalSize = data.duration >= this.svg.minTime;
......@@ -932,7 +941,7 @@ export default {
data.duration === this.svg.totalTime
? this.$t('profiling.approximateTime')
: ''
}${data.duration.toFixed(4)}ms`;
}${this.toFixedFun(data.duration, 4)}ms`;
const textWidth = text.textContent
? this.getTextWidth(text.textContent)
: 0;
......@@ -1020,7 +1029,10 @@ export default {
this.timelineInfo.initOver = true;
if (res && res.data) {
this.timelineInfo.noData = false;
this.timelineInfo.totalTime = res.data.total_time.toFixed(4);
this.timelineInfo.totalTime = this.toFixedFun(
res.data.total_time,
4,
);
this.timelineInfo.streamNum = res.data.num_of_streams;
this.timelineInfo.opNum = res.data.num_of_ops;
this.timelineInfo.opTimes = res.data.op_exe_times;
......@@ -1100,6 +1112,18 @@ export default {
const timestamp = `${year}${mouth}${day}${hour}${minute}${second}${millisecond}`;
return `timeline_${this.trainingJobId}_${this.currentCard}_${timestamp}.json`;
},
/**
* Keep the number with n decimal places.
* @param {Number} num
* @param {Number} pow Number of decimal places
* @return {Number}
*/
toFixedFun(num, pow) {
if (isNaN(num) || isNaN(pow) || !num || !pow) {
return num;
}
return Math.round(num * Math.pow(10, pow)) / Math.pow(10, pow);
},
},
destroyed() {
window.removeEventListener('resize', this.resizeTrace, false);
......
mindinsight/ui/src/views/train-manage/step-trace.vue
浏览文件 @ bfbe5e87
......@@ -57,7 +57,8 @@ limitations under the License.
<div class="pf-content-middle">
<div id="trace-container">
<div id="trace"
class="training-trace">
class="training-trace"
:style="{height: svg.totalHeight + 'px'}">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
height="100%"
......@@ -313,7 +314,7 @@ export default {
};
RequestService.targetTimeInfo(params).then(
(res) => {
if (res.data && res.data.summary) {
if (res && res.data && res.data.summary) {
const summary = res.data.summary;
Object.keys(summary).forEach((val) => {
summary[val] = summary[val];
......@@ -324,7 +325,7 @@ export default {
}
});
}
if (res.data && res.data.info) {
if (res && res.data && res.data.info) {
if (res.data.size && !this.steps.max) {
this.steps.max = res.data.size;
this.steps.disabled = false;
......@@ -439,7 +440,8 @@ export default {
(res) => {
this.svg.initOver = true;
if (
res.data &&
res &&
res.data &&
res.data.training_trace_graph &&
res.data.training_trace_graph.length
) {
......@@ -527,9 +529,6 @@ export default {
});
this.svg.totalHeight += this.svg.rowPadding;
document.querySelector(
'#trace',
).style.height = `${this.svg.totalHeight}px`;
this.svg.data = JSON.parse(JSON.stringify(data));
this.$nextTick(() => {
......@@ -640,7 +639,7 @@ export default {
break;
}
const textContent = `${name}: ${data.duration.toFixed(4)}ms`;
const textContent = `${name}: ${this.toFixedFun(data.duration, 4)}ms`;
const textWidth = this.getTextWidth(textContent);
const normalSize = data.duration >= this.svg.minTime;
......@@ -719,7 +718,7 @@ export default {
data.duration === this.svg.totalTime
? this.$t('profiling.approximateTime')
: ''
}${data.duration.toFixed(4)}ms`;
}${this.toFixedFun(data.duration, 4)}ms`;
const textWidth = text.textContent
? this.getTextWidth(text.textContent)
: 0;
......@@ -789,6 +788,18 @@ export default {
this.svg.resizeTimer = null;
}, 500);
},
/**
* Keep the number with n decimal places.
* @param {Number} num
* @param {Number} pow Number of decimal places
* @return {Number}
*/
toFixedFun(num, pow) {
if (isNaN(num) || isNaN(pow) || !num || !pow) {
return num;
}
return Math.round(num * Math.pow(10, pow)) / Math.pow(10, pow);
},
},
destroyed() {
window.removeEventListener('resize', this.resizeTrace, false);
......
mindinsight/ui/src/views/train-manage/training-dashboard.vue
浏览文件 @ bfbe5e87
......@@ -105,9 +105,14 @@ limitations under the License.
v-show="!firstFloorNodes.length || wrongPlugin">
<img :src="require('@/assets/images/nodata.png')"
alt="" />
<p class='no-data-text'>
<p v-if="initOverKey.graph"
class='no-data-text'>
{{$t("public.noData")}}
</p>
<p v-else
class='no-data-text'>
{{$t("public.dataLoading")}}
</p>
</div>
</div>
</div>
......@@ -124,9 +129,14 @@ limitations under the License.
v-show="!showDatasetGraph || wrongPlugin">
<img :src="require('@/assets/images/nodata.png')"
alt="" />
<p class='no-data-text'>
<p v-if="initOverKey.dataMap"
class='no-data-text'>
{{$t("public.noData")}}
</p>
<p v-else
class='no-data-text'>
{{$t("public.dataLoading")}}
</p>
</div>
</div>
</div>
......@@ -267,6 +277,8 @@ export default {
image: false,
tensor: false,
scalar: false,
graph: false,
dataMap: false,
},
};
},
......@@ -405,6 +417,8 @@ export default {
image: true,
tensor: true,
scalar: true,
graph: true,
dataMap: true,
};
return;
}
......@@ -423,6 +437,8 @@ export default {
this.dealTensorData(tensorTags);
if (!this.firstFloorNodes.length && graphIds.length) {
this.queryGraphData();
} else {
this.initOverKey.graph = true;
}
})
.catch((error) => {
......@@ -431,6 +447,8 @@ export default {
image: true,
tensor: true,
scalar: true,
graph: true,
dataMap: true,
};
if (
!error.response ||
......@@ -575,7 +593,7 @@ export default {
this.charOption = {};
this.charData = [];
this.curPageArr = [];
this.initOverKey.scalar=true;
this.initOverKey.scalar = true;
return;
}
const params = {
......@@ -590,7 +608,7 @@ export default {
!res.data.train_jobs ||
!res.data.train_jobs.length
) {
this.initOverKey.scalar=true;
this.initOverKey.scalar = true;
return;
}
if (res.data && res.data.error_code) {
......@@ -640,7 +658,7 @@ export default {
}
}, this.errorScalar)
.catch((e) => {
this.initOverKey.scalar=true;
this.initOverKey.scalar = true;
});
},
/**
......@@ -1507,6 +1525,7 @@ export default {
.dot(dot)
.attributer(this.attributer)
.render(() => {
this.initOverKey.graph = true;
if (d3.select('#graph svg')) {
d3.select('#graph svg').on('.zoom', null);
}
......@@ -1530,18 +1549,27 @@ export default {
RequestService.queryGraphData(params)
.then(
(response) => {
if (response && response.data && response.data.nodes) {
if (
response &&
response.data &&
response.data.nodes &&
response.data.nodes.length
) {
const nodes = response.data.nodes;
if (nodes && nodes.length) {
this.packageDataToObject(nodes);
const dot = this.packageGraphData();
this.initGraph(dot);
}
this.packageDataToObject(nodes);
const dot = this.packageGraphData();
this.initGraph(dot);
} else {
this.initOverKey.graph = true;
}
},
(error) => {},
(error) => {
this.initOverKey.graph = true;
},
)
.catch((e) => {});
.catch((e) => {
this.initOverKey.graph = true;
});
},
/**
* Processes its own and corresponding child node data when expanding or closing namespaces.
......@@ -1861,11 +1889,17 @@ export default {
const dot = this.packageDatasetGraph();
this.initDatasetGraph(dot);
}
} else {
this.initOverKey.dataMap = true;
}
},
(err) => {},
(err) => {
this.initOverKey.dataMap = true;
},
)
.catch((e) => {});
.catch((e) => {
this.initOverKey.dataMap = true;
});
},
/**
* Processing dataset Graph Data
......@@ -1877,8 +1911,9 @@ export default {
if (!data) {
return;
}
const key = `${parentKey ? parentKey + '/' : ''}${data.op_type ||
''}_${index}`;
const key = `${parentKey ? parentKey + '/' : ''}${
data.op_type || ''
}_${index}`;
const obj = {
key: key,
id: '',
......@@ -1993,6 +2028,7 @@ export default {
*/
afterinitDatasetGraph() {
this.showDatasetGraph = true;
this.initOverKey.dataMap = true;
if (d3.select('#dataMapGraph svg')) {
d3.select('#dataMapGraph svg').on('.zoom', null);
}
......@@ -2003,9 +2039,7 @@ export default {
this.datasetGraphviz = null;
}
}, 100);
d3.select('#dataMapGraph')
.selectAll('title')
.remove();
d3.select('#dataMapGraph').selectAll('title').remove();
},
/**
* Query the cachee status of training jonb
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或