Skip to content

M
mindinsight

MindSpore / mindinsight

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

!546 Add training log path to training panel sub-page and profiling page 

Merge pull request !546 from 秦君艳/path
上级 1491de23 8beb39ba
隐藏空白更改
内联 并排
Showing with 389 addition and 273 deletion
mindinsight/ui/src/views/profiling/profiling.vue
浏览文件 @ 362a05e4
...@@ -20,6 +20,10 @@ limitations under the License. ...@@ -20,6 +20,10 @@ limitations under the License.
:class="{collapse:collapse}"> :class="{collapse:collapse}">
<div class="helper" <div class="helper"
v-show="!collapse"> v-show="!collapse">
<div class="summary-path">
{{$t('trainingDashboard.summaryDirPath')}}
<span>{{ summaryPath}}</span>
</div>
<div class="cur-card"> <div class="cur-card">
<label>{{$t('profiling.curCard')}}</label> <label>{{$t('profiling.curCard')}}</label>
<el-select v-model="curDashboardInfo.curCardNum" <el-select v-model="curDashboardInfo.curCardNum"
...@@ -61,6 +65,7 @@ import RequestService from '../../services/request-service'; ...@@ -61,6 +65,7 @@ import RequestService from '../../services/request-service';
export default { export default {
data() { data() {
return { return {
summaryPath: this.$route.query.summaryPath,
tipsArrayList: [ tipsArrayList: [
'step_trace-iter_interval', 'step_trace-iter_interval',
'minddata_pipeline-general', 'minddata_pipeline-general',
...@@ -331,11 +336,26 @@ export default { ...@@ -331,11 +336,26 @@ export default {
} }
.helper { .helper {
padding: 32px; padding: 32px;
padding-top: 20px;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
margin-left: 24px; margin-left: 24px;
background: #edf0f5; background: #edf0f5;
word-wrap: break-word; word-wrap: break-word;
.summary-path {
line-height: 24px;
font-size: 14px;
overflow: hidden;
font-weight: bold;
padding-bottom: 10px;
word-break: break-all;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.nowrap-style { .nowrap-style {
white-space: nowrap; white-space: nowrap;
} }
......
mindinsight/ui/src/views/train-manage/data-map.vue
浏览文件 @ 362a05e4
...@@ -19,7 +19,14 @@ limitations under the License. ...@@ -19,7 +19,14 @@ limitations under the License.
<div class="cl-data-map-manage"> <div class="cl-data-map-manage">
<div class='data-map-p32'> <div class='data-map-p32'>
<div class="cl-title cl-data-map-title"> <div class="cl-title cl-data-map-title">
<div class="cl-title-left">{{$t('dataMap.titleText')}}</div> <div class="cl-title-left">{{$t('dataMap.titleText')}}
<div class="path-message">
<span>{{$t('symbols.leftbracket')}}</span>
<span>{{$t('trainingDashboard.summaryDirPath')}}</span>
<span>{{summaryPath}}</span>
<span>{{$t('symbols.rightbracket')}}</span>
</div>
</div>
<div class="cl-title-right"> <div class="cl-title-right">
<div class="cl-close-btn" <div class="cl-close-btn"
@click="jumpToTrainDashboard"> @click="jumpToTrainDashboard">
...@@ -162,6 +169,7 @@ export default { ...@@ -162,6 +169,7 @@ export default {
trainJobID: '', trainJobID: '',
selectedNode: [], selectedNode: [],
noData: false, noData: false,
summaryPath: this.$route.query.summaryPath,
}; };
}, },
mounted() { mounted() {
...@@ -213,8 +221,9 @@ export default { ...@@ -213,8 +221,9 @@ export default {
if (!data) { if (!data) {
return; return;
} }
const key = `${parentKey ? parentKey + '/' : ''}${data.op_type || const key = `${parentKey ? parentKey + '/' : ''}${
''}_${index}`; data.op_type || ''
}_${index}`;
const obj = { const obj = {
key: key, key: key,
id: '', id: '',
...@@ -329,9 +338,7 @@ export default { ...@@ -329,9 +338,7 @@ export default {
this.graphviz = null; this.graphviz = null;
} }
}, 100); }, 100);
d3.select('#graph') d3.select('#graph').selectAll('title').remove();
.selectAll('title')
.remove();
this.startApp(); this.startApp();
}, },
/** /**
...@@ -631,6 +638,13 @@ export default { ...@@ -631,6 +638,13 @@ export default {
.cl-data-map-title { .cl-data-map-title {
height: 56px; height: 56px;
line-height: 56px; line-height: 56px;
.path-message {
display: inline-block;
line-height: 20px;
padding: 0px 4px 15px 4px;
font-weight: bold;
vertical-align: bottom;
}
} }
.data-map-p32 { .data-map-p32 {
height: 100%; height: 100%;
......
mindinsight/ui/src/views/train-manage/graph.vue
浏览文件 @ 362a05e4
...@@ -59,6 +59,12 @@ limitations under the License. ...@@ -59,6 +59,12 @@ limitations under the License.
<div class="cl-title cl-graph-title"> <div class="cl-title cl-graph-title">
<div class="cl-title-left"> <div class="cl-title-left">
{{ $t('graph.titleText') }} {{ $t('graph.titleText') }}
<div class="path-message">
<span>{{$t('symbols.leftbracket')}}</span>
<span>{{$t('trainingDashboard.summaryDirPath')}}</span>
<span>{{summaryPath}}</span>
<span>{{$t('symbols.rightbracket')}}</span>
</div>
<span @click="showUserGuide" <span @click="showUserGuide"
class="guide"> class="guide">
<i class="guide-icon"></i> <i class="guide-icon"></i>
...@@ -421,6 +427,7 @@ const d3 = {select, selectAll, zoom}; ...@@ -421,6 +427,7 @@ const d3 = {select, selectAll, zoom};
export default { export default {
data() { data() {
return { return {
summaryPath: this.$route.query.summaryPath,
clickScope: {}, // Information about the node that is clicked for the first time. clickScope: {}, // Information about the node that is clicked for the first time.
smallResize: {}, // The container of display area box. smallResize: {}, // The container of display area box.
insideBox: {}, // Basic information about the display area box insideBox: {}, // Basic information about the display area box
...@@ -2968,6 +2975,13 @@ export default { ...@@ -2968,6 +2975,13 @@ export default {
.cl-graph-title { .cl-graph-title {
height: 56px; height: 56px;
line-height: 56px; line-height: 56px;
.path-message {
display: inline-block;
line-height: 20px;
padding: 0px 4px 15px 4px;
font-weight: bold;
vertical-align: bottom;
}
.guide { .guide {
cursor: pointer; cursor: pointer;
margin-left: 10px; margin-left: 10px;
......
mindinsight/ui/src/views/train-manage/histogram.vue
浏览文件 @ 362a05e4
...@@ -18,7 +18,14 @@ limitations under the License. ...@@ -18,7 +18,14 @@ limitations under the License.
<div class="histogram-bk"> <div class="histogram-bk">
<!-- Title area --> <!-- Title area -->
<div class="cl-title cl-histogram-title"> <div class="cl-title cl-histogram-title">
<div class="cl-title-left">{{$t('histogram.titleText')}}</div> <div class="cl-title-left">{{$t('histogram.titleText')}}
<div class="path-message">
<span>{{$t('symbols.leftbracket')}}</span>
<span>{{$t('trainingDashboard.summaryDirPath')}}</span>
<span>{{summaryPath}}</span>
<span>{{$t('symbols.rightbracket')}}</span>
</div>
</div>
<div class="cl-title-right"> <div class="cl-title-right">
<div class="cl-close-btn" <div class="cl-close-btn"
@click="jumpToTrainDashboard"> @click="jumpToTrainDashboard">
...@@ -126,6 +133,7 @@ export default { ...@@ -126,6 +133,7 @@ export default {
return { return {
tagList: [], // Tag list. tagList: [], // Tag list.
trainingJobId: this.$route.query.train_id, // ID of the current training job. trainingJobId: this.$route.query.train_id, // ID of the current training job.
summaryPath: this.$route.query.summaryPath,
originDataArr: [], // List of all data. originDataArr: [], // List of all data.
initOver: false, // Indicates whether the initialization is complete. initOver: false, // Indicates whether the initialization is complete.
curAxisName: 0, // Current time type. curAxisName: 0, // Current time type.
...@@ -263,8 +271,11 @@ export default { ...@@ -263,8 +271,11 @@ export default {
document.title = this.$t('histogram.titleText') + '-MindInsight'; document.title = this.$t('histogram.titleText') + '-MindInsight';
return; return;
} }
document.title = decodeURIComponent(this.$route.query.train_id) +'-' + this.$t('histogram.titleText') + document.title =
'-MindInsight'; decodeURIComponent(this.$route.query.train_id) +
'-' +
this.$t('histogram.titleText') +
'-MindInsight';
this.getOriginData(); this.getOriginData();
if (this.isTimeReload) { if (this.isTimeReload) {
this.autoUpdateSamples(); this.autoUpdateSamples();
...@@ -810,25 +821,23 @@ export default { ...@@ -810,25 +821,23 @@ export default {
'.cl-histogram-show-data-content', '.cl-histogram-show-data-content',
).offsetTop; ).offsetTop;
if (height + e.event.y + 20 > screenHeight && screenHeight > height) { if (height + e.event.y + 20 > screenHeight && screenHeight > height) {
document.querySelector('#echartTip').style.top = `${e.event.y + document.querySelector('#echartTip').style.top = `${
scrollTop - e.event.y + scrollTop - height - 20 - offsetTop
height - }px`;
20 -
offsetTop}px`;
} else { } else {
document.querySelector('#echartTip').style.top = `${e.event.y + document.querySelector('#echartTip').style.top = `${
scrollTop + e.event.y + scrollTop + 20 - offsetTop
20 - }px`;
offsetTop}px`;
} }
// Blank area on the right of the chart is 80 // Blank area on the right of the chart is 80
if (width + e.event.x + 80 > screenWidth && screenWidth > width) { if (width + e.event.x + 80 > screenWidth && screenWidth > width) {
document.querySelector('#echartTip').style.left = `${e.event.x - document.querySelector('#echartTip').style.left = `${
width - e.event.x - width - 20
20}px`; }px`;
} else { } else {
document.querySelector('#echartTip').style.left = `${e.event.x + document.querySelector('#echartTip').style.left = `${
20}px`; e.event.x + 20
}px`;
} }
} }
...@@ -1377,6 +1386,13 @@ export default { ...@@ -1377,6 +1386,13 @@ export default {
.cl-histogram-title { .cl-histogram-title {
height: 56px; height: 56px;
line-height: 56px; line-height: 56px;
.path-message {
display: inline-block;
line-height: 20px;
padding: 0px 4px 15px 4px;
font-weight: bold;
vertical-align: bottom;
}
.cl-close-btn { .cl-close-btn {
width: 20px; width: 20px;
height: 20px; height: 20px;
......
mindinsight/ui/src/views/train-manage/image.vue
浏览文件 @ 362a05e4
...@@ -18,7 +18,14 @@ limitations under the License. ...@@ -18,7 +18,14 @@ limitations under the License.
<div class="cl-image-manage"> <div class="cl-image-manage">
<div class="image-bk"> <div class="image-bk">
<div class="cl-title cl-image-title"> <div class="cl-title cl-image-title">
<div class="cl-title-left">{{$t('images.titleText')}}</div> <div class="cl-title-left">{{$t('images.titleText')}}
<div class="path-message">
<span>{{$t('symbols.leftbracket')}}</span>
<span>{{$t('trainingDashboard.summaryDirPath')}}</span>
<span>{{summaryPath}}</span>
<span>{{$t('symbols.rightbracket')}}</span>
</div>
</div>
<div class="cl-title-right"> <div class="cl-title-right">
<div class="cl-close-btn" <div class="cl-close-btn"
@click="jumpToTrainDashboard"> @click="jumpToTrainDashboard">
...@@ -138,6 +145,7 @@ export default { ...@@ -138,6 +145,7 @@ export default {
brightness: 50, // Brightness brightness: 50, // Brightness
contrast: 50, // Contrast contrast: 50, // Contrast
trainingJobId: this.$route.query.train_id, // ID of the current training job trainingJobId: this.$route.query.train_id, // ID of the current training job
summaryPath: this.$route.query.summaryPath,
multiSelectedTagNames: {}, // Dictionary for storing the name of the selected tags multiSelectedTagNames: {}, // Dictionary for storing the name of the selected tags
curFilterSamples: [], // List of images that meet the current filter criteria curFilterSamples: [], // List of images that meet the current filter criteria
tagOperateList: [], // Tag list tagOperateList: [], // Tag list
...@@ -676,6 +684,13 @@ export default { ...@@ -676,6 +684,13 @@ export default {
.cl-image-title { .cl-image-title {
height: 56px; height: 56px;
line-height: 56px; line-height: 56px;
.path-message {
display: inline-block;
line-height: 20px;
padding: 0px 4px 15px 4px;
font-weight: bold;
vertical-align: bottom;
}
} }
} }
.title { .title {
......
mindinsight/ui/src/views/train-manage/scalar.vue
浏览文件 @ 362a05e4
...@@ -19,7 +19,14 @@ limitations under the License. ...@@ -19,7 +19,14 @@ limitations under the License.
<div class="scalar-bk"> <div class="scalar-bk">
<div class="cl-title cl-scalar-title" <div class="cl-title cl-scalar-title"
v-show="originDataArr.length>0"> v-show="originDataArr.length>0">
<div class="cl-title-left">{{$t("scalar.titleText")}}</div> <div class="cl-title-left">{{$t("scalar.titleText")}}
<div class="path-message">
<span>{{$t('symbols.leftbracket')}}</span>
<span>{{$t('trainingDashboard.summaryDirPath')}}</span>
<span>{{summaryPath}}</span>
<span>{{$t('symbols.rightbracket')}}</span>
</div>
</div>
<div class="cl-title-right"> <div class="cl-title-right">
<ScalarButton class="scalar-btn" <ScalarButton class="scalar-btn"
:right="scalarCompare" :right="scalarCompare"
...@@ -291,6 +298,7 @@ export default { ...@@ -291,6 +298,7 @@ export default {
compare: false, // Comparison Page compare: false, // Comparison Page
scalarCompare: this.$t('scalar')['comparison'], scalarCompare: this.$t('scalar')['comparison'],
trainingJobId: this.$route.query.train_id, // ID of the current training job trainingJobId: this.$route.query.train_id, // ID of the current training job
summaryPath: this.$route.query.summaryPath,
thresholdDialogVisible: false, thresholdDialogVisible: false,
delThresholdVisible: false, delThresholdVisible: false,
currentTagName: '', currentTagName: '',
...@@ -298,8 +306,8 @@ export default { ...@@ -298,8 +306,8 @@ export default {
thresholdErrorMsg: '', thresholdErrorMsg: '',
thresholdRelational: '', thresholdRelational: '',
thresholdValue: [ thresholdValue: [
{ filterCondition: this.$t('scalar.lessThan'), value: '' }, {filterCondition: this.$t('scalar.lessThan'), value: ''},
{ filterCondition: this.$t('scalar.lessThan'), value: '' }, {filterCondition: this.$t('scalar.lessThan'), value: ''},
], ],
filterOptions: [ filterOptions: [
{ {
...@@ -412,7 +420,7 @@ export default { ...@@ -412,7 +420,7 @@ export default {
return; return;
} }
document.title = `${decodeURIComponent( document.title = `${decodeURIComponent(
this.$route.query.train_id this.$route.query.train_id,
)}-${this.$t('scalar.titleText')}-MindInsight`; )}-${this.$t('scalar.titleText')}-MindInsight`;
// Adding a Listener // Adding a Listener
window.addEventListener('resize', this.resizeCallback, false); window.addEventListener('resize', this.resizeCallback, false);
...@@ -440,7 +448,7 @@ export default { ...@@ -440,7 +448,7 @@ export default {
if (localStorage.getItem('thresholdCache')) { if (localStorage.getItem('thresholdCache')) {
try { try {
this.thresholdLocal = JSON.parse( this.thresholdLocal = JSON.parse(
localStorage.getItem('thresholdCache') localStorage.getItem('thresholdCache'),
); );
this.clearCache(); this.clearCache();
} catch (e) { } catch (e) {
...@@ -467,8 +475,8 @@ export default { ...@@ -467,8 +475,8 @@ export default {
) { ) {
delete this.thresholdLocal[this.decodeTrainingJobId]; delete this.thresholdLocal[this.decodeTrainingJobId];
localStorage.setItem( localStorage.setItem(
'thresholdCache', 'thresholdCache',
JSON.stringify(this.thresholdLocal) JSON.stringify(this.thresholdLocal),
); );
} }
} }
...@@ -484,81 +492,81 @@ export default { ...@@ -484,81 +492,81 @@ export default {
train_id: this.trainingJobId, train_id: this.trainingJobId,
}; };
RequestService.getSingleTrainJob(params, false) RequestService.getSingleTrainJob(params, false)
.then((res) => { .then((res) => {
// error; // error;
if ( if (
!res || !res ||
!res.data || !res.data ||
!res.data.train_jobs || !res.data.train_jobs ||
!res.data.train_jobs.length !res.data.train_jobs.length
) { ) {
this.initOver = true;
return;
}
const tempTagList = [];
const dataList = [];
const propsList = [];
const data = res.data.train_jobs[0];
const runNmeColor = CommonProperty.commonColorArr[0];
data.tags.forEach((tagObj) => {
if (!this.oriDataDictionaries[tagObj]) {
this.oriDataDictionaries[tagObj] = true;
// Add the tag list
tempTagList.push({
label: tagObj,
checked: true,
show: true,
});
const sampleIndex = dataList.length;
// Adding Chart Data
dataList.push({
tagName: tagObj,
runNames: data.name,
colors: runNmeColor,
show: false,
updateFlag: false,
dataRemove: false,
fullScreen: false,
sampleIndex: sampleIndex,
domId: 'prDom' + this.DomIdIndex,
charData: {
oriData: [],
charOption: {},
},
zoomData: [null, null],
zoomDataTimer: null,
charObj: null,
invalidData: false,
});
propsList.push({
tagName: tagObj,
runNames: data.name,
colors: '',
});
this.DomIdIndex++;
}
});
this.tagOperateList = tempTagList;
this.tagPropsList = JSON.parse(JSON.stringify(tempTagList));
if (dataList.length === 1) {
dataList[0].fullScreen = true;
}
this.originDataArr = dataList;
this.propsList = propsList;
this.initOver = true; this.initOver = true;
return;
}
const tempTagList = [];
const dataList = [];
const propsList = [];
const data = res.data.train_jobs[0];
const runNmeColor = CommonProperty.commonColorArr[0];
data.tags.forEach((tagObj) => {
if (!this.oriDataDictionaries[tagObj]) {
this.oriDataDictionaries[tagObj] = true;
// Add the tag list
tempTagList.push({
label: tagObj,
checked: true,
show: true,
});
const sampleIndex = dataList.length;
// Adding Chart Data
dataList.push({
tagName: tagObj,
runNames: data.name,
colors: runNmeColor,
show: false,
updateFlag: false,
dataRemove: false,
fullScreen: false,
sampleIndex: sampleIndex,
domId: 'prDom' + this.DomIdIndex,
charData: {
oriData: [],
charOption: {},
},
zoomData: [null, null],
zoomDataTimer: null,
charObj: null,
invalidData: false,
});
propsList.push({ this.$nextTick(() => {
tagName: tagObj, this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic();
runNames: data.name, // Obtains data on the current page
colors: '', this.updateTagInPage();
}); this.resizeCallback();
this.DomIdIndex++; });
} }, this.requestErrorCallback)
}); .catch((e) => {
this.tagOperateList = tempTagList; this.initOver = true;
this.tagPropsList = JSON.parse(JSON.stringify(tempTagList)); this.$message.error(this.$t('public.dataError'));
if (dataList.length === 1) {
dataList[0].fullScreen = true;
}
this.originDataArr = dataList;
this.propsList = propsList;
this.initOver = true;
this.$nextTick(() => {
this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic();
// Obtains data on the current page
this.updateTagInPage();
this.resizeCallback();
}); });
}, this.requestErrorCallback)
.catch((e) => {
this.initOver = true;
this.$message.error(this.$t('public.dataError'));
});
}, },
/** /**
...@@ -606,108 +614,108 @@ export default { ...@@ -606,108 +614,108 @@ export default {
}; };
RequestService.getScalarsSample(params) RequestService.getScalarsSample(params)
.then((res) => { .then((res) => {
// error // error
if (!res || !res.data || !res.data.metadatas) { if (!res || !res.data || !res.data.metadatas) {
// canceled // canceled
if (res.toString() === 'false') { if (res.toString() === 'false') {
return;
}
if (sampleObject.charObj) {
sampleObject.charObj.clear();
sampleObject.onePoint = false;
}
return; return;
} }
let hasInvalidData = false;
if (sampleObject.charObj) { if (sampleObject.charObj) {
sampleObject.charObj.clear(); sampleObject.charObj.showLoading();
sampleObject.onePoint = false;
} }
return;
}
let hasInvalidData = false;
if (sampleObject.charObj) { const resData = res.data;
sampleObject.charObj.showLoading();
}
const resData = res.data; const tempObject = {
valueData: {
const tempObject = { stepData: [],
valueData: { absData: [],
stepData: [], relativeData: [],
absData: [], },
relativeData: [], logData: {
}, stepData: [],
logData: { absData: [],
stepData: [], relativeData: [],
absData: [], },
relativeData: [], };
}, let relativeTimeBench = 0;
}; if (resData.metadatas.length) {
let relativeTimeBench = 0; relativeTimeBench = resData.metadatas[0].wall_time;
if (resData.metadatas.length) {
relativeTimeBench = resData.metadatas[0].wall_time;
}
// Initializing Chart Data
resData.metadatas.forEach((metaData) => {
if (metaData.value === null && !hasInvalidData) {
hasInvalidData = true;
} }
tempObject.valueData.stepData.push([
metaData.step,
metaData.value,
]);
tempObject.valueData.absData.push([
metaData.wall_time,
metaData.value,
]);
tempObject.valueData.relativeData.push([
metaData.wall_time - relativeTimeBench,
metaData.value,
]);
const logValue = metaData.value >= 0 ? metaData.value : '';
tempObject.logData.stepData.push([metaData.step, logValue]);
tempObject.logData.absData.push([metaData.wall_time, logValue]);
tempObject.logData.relativeData.push([
metaData.wall_time - relativeTimeBench,
logValue,
]);
});
sampleObject.charData.oriData[0] = tempObject; // Initializing Chart Data
resData.metadatas.forEach((metaData) => {
if (metaData.value === null && !hasInvalidData) {
hasInvalidData = true;
}
tempObject.valueData.stepData.push([
metaData.step,
metaData.value,
]);
tempObject.valueData.absData.push([
metaData.wall_time,
metaData.value,
]);
tempObject.valueData.relativeData.push([
metaData.wall_time - relativeTimeBench,
metaData.value,
]);
const logValue = metaData.value >= 0 ? metaData.value : '';
tempObject.logData.stepData.push([metaData.step, logValue]);
tempObject.logData.absData.push([metaData.wall_time, logValue]);
tempObject.logData.relativeData.push([
metaData.wall_time - relativeTimeBench,
logValue,
]);
});
sampleObject.charData.oriData[0] = tempObject;
if (hasInvalidData) { if (hasInvalidData) {
this.$set(sampleObject, 'invalidData', true); this.$set(sampleObject, 'invalidData', true);
} else { } else {
this.$set(sampleObject, 'invalidData', false); this.$set(sampleObject, 'invalidData', false);
} }
sampleObject.charData.charOption = this.formateCharOption( sampleObject.charData.charOption = this.formateCharOption(
sampleIndex sampleIndex,
); );
const tempOption = sampleObject.charData.charOption; const tempOption = sampleObject.charData.charOption;
if ( if (
tempOption.series[0].data.length === 1 || tempOption.series[0].data.length === 1 ||
sampleObject.onePoint sampleObject.onePoint
) { ) {
tempOption.series[0].showSymbol = true; tempOption.series[0].showSymbol = true;
} else { } else {
tempOption.series[0].showSymbol = false; tempOption.series[0].showSymbol = false;
} }
this.$forceUpdate(); this.$forceUpdate();
this.$nextTick(() => { this.$nextTick(() => {
if (sampleObject.charObj) {
sampleObject.charObj.hideLoading();
}
// Draw chart
if (!this.compare) {
this.updateOrCreateChar(sampleIndex, true);
}
});
})
.catch((e) => {
if (sampleObject.charObj) { if (sampleObject.charObj) {
sampleObject.charObj.hideLoading(); sampleObject.charObj.clear();
}
// Draw chart
if (!this.compare) {
this.updateOrCreateChar(sampleIndex, true);
} }
}); });
})
.catch((e) => {
if (sampleObject.charObj) {
sampleObject.charObj.clear();
}
});
}); });
}, },
...@@ -718,7 +726,7 @@ export default { ...@@ -718,7 +726,7 @@ export default {
setOnePoint(sampleObject) { setOnePoint(sampleObject) {
const that = this; const that = this;
sampleObject.charObj.on('datazoom', function (params) { sampleObject.charObj.on('datazoom', function(params) {
const xAxisObject = params.batch[0]; const xAxisObject = params.batch[0];
const yAxisObject = params.batch[1]; const yAxisObject = params.batch[1];
const charData = sampleObject.charData.charOption.series[0].data; const charData = sampleObject.charData.charOption.series[0].data;
...@@ -777,7 +785,7 @@ export default { ...@@ -777,7 +785,7 @@ export default {
setRestore(sampleObject) { setRestore(sampleObject) {
const that = this; const that = this;
sampleObject.charObj.on('restore', function (params) { sampleObject.charObj.on('restore', function(params) {
const charData = sampleObject.charData.charOption.series[0].data; const charData = sampleObject.charData.charOption.series[0].data;
const tempCharOption = sampleObject.charData.charOption; const tempCharOption = sampleObject.charData.charOption;
...@@ -846,12 +854,12 @@ export default { ...@@ -846,12 +854,12 @@ export default {
if (curOriData) { if (curOriData) {
if (sampleObject.log) { if (sampleObject.log) {
dataObj.data = this.formateSmoothData( dataObj.data = this.formateSmoothData(
curOriData.logData[this.curBenchX] curOriData.logData[this.curBenchX],
); );
dataObjBackend.data = curOriData.logData[this.curBenchX]; dataObjBackend.data = curOriData.logData[this.curBenchX];
} else { } else {
dataObj.data = this.formateSmoothData( dataObj.data = this.formateSmoothData(
curOriData.valueData[this.curBenchX] curOriData.valueData[this.curBenchX],
); );
dataObjBackend.data = curOriData.valueData[this.curBenchX]; dataObjBackend.data = curOriData.valueData[this.curBenchX];
} }
...@@ -981,23 +989,23 @@ export default { ...@@ -981,23 +989,23 @@ export default {
position: (point, params, dom, rect, size) => { position: (point, params, dom, rect, size) => {
const curDom = document.getElementById(sampleObject.domId); const curDom = document.getElementById(sampleObject.domId);
if (!curDom) { if (!curDom) {
return { left: 0, bottom: '100%' }; return {left: 0, bottom: '100%'};
} }
if (sampleObject.fullScreen) { if (sampleObject.fullScreen) {
if (point[0] + size.contentSize[0] <= size.viewSize[0]) { if (point[0] + size.contentSize[0] <= size.viewSize[0]) {
return { left: point[0], bottom: '10%' }; return {left: point[0], bottom: '10%'};
} else { } else {
return { right: size.viewSize[0] - point[0], bottom: '10%' }; return {right: size.viewSize[0] - point[0], bottom: '10%'};
} }
} else { } else {
const parentNode = curDom.parentNode; const parentNode = curDom.parentNode;
if (!parentNode) { if (!parentNode) {
return { left: 0, bottom: '100%' }; return {left: 0, bottom: '100%'};
} }
if (parentNode.offsetLeft > size.contentSize[0]) { if (parentNode.offsetLeft > size.contentSize[0]) {
return { right: '100%', bottom: 0 }; return {right: '100%', bottom: 0};
} else { } else {
return { left: '100%', bottom: 0 }; return {left: '100%', bottom: 0};
} }
} }
}, },
...@@ -1082,16 +1090,16 @@ export default { ...@@ -1082,16 +1090,16 @@ export default {
`display:inline-block;"></td><td>${parma.seriesName}</td>` + `display:inline-block;"></td><td>${parma.seriesName}</td>` +
`<td>${that.formateYaxisValue(parma.value[1])}</td>` + `<td>${that.formateYaxisValue(parma.value[1])}</td>` +
`<td>${that.formateYaxisValue( `<td>${that.formateYaxisValue(
curSerieOriData.stepData[parma.dataIndex][1] curSerieOriData.stepData[parma.dataIndex][1],
)}</td>` + )}</td>` +
`<td>${curSerieOriData.stepData[parma.dataIndex][0]}</td>` + `<td>${curSerieOriData.stepData[parma.dataIndex][0]}</td>` +
`<td>${curSerieOriData.relativeData[ `<td>${curSerieOriData.relativeData[
parma.dataIndex parma.dataIndex
][0].toFixed(3)}${unit}</td>` + ][0].toFixed(3)}${unit}</td>` +
`<td>${that.dealrelativeTime( `<td>${that.dealrelativeTime(
new Date( new Date(
curSerieOriData.absData[parma.dataIndex][0] * 1000 curSerieOriData.absData[parma.dataIndex][0] * 1000,
).toString() ).toString(),
)}</td>` + )}</td>` +
`</tr>`; `</tr>`;
} }
...@@ -1176,9 +1184,9 @@ export default { ...@@ -1176,9 +1184,9 @@ export default {
this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName] this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName]
) { ) {
const tempStorgeArr = JSON.parse( const tempStorgeArr = JSON.parse(
JSON.stringify( JSON.stringify(
this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName] this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName],
) ),
); );
let pieceStr = ''; let pieceStr = '';
pieceStr = this.formatePieceStr(tempStorgeArr); pieceStr = this.formatePieceStr(tempStorgeArr);
...@@ -1212,8 +1220,8 @@ export default { ...@@ -1212,8 +1220,8 @@ export default {
// Updating chart option // Updating chart option
if (sampleObject.updateFlag) { if (sampleObject.updateFlag) {
sampleObject.charObj.setOption( sampleObject.charObj.setOption(
sampleObject.charData.charOption, sampleObject.charData.charOption,
sampleObject.dataRemove sampleObject.dataRemove,
); );
sampleObject.updateFlag = false; sampleObject.updateFlag = false;
sampleObject.dataRemove = false; sampleObject.dataRemove = false;
...@@ -1221,8 +1229,8 @@ export default { ...@@ -1221,8 +1229,8 @@ export default {
} else { } else {
// creat chart // creat chart
sampleObject.charObj = echarts.init( sampleObject.charObj = echarts.init(
document.getElementById(sampleObject.domId), document.getElementById(sampleObject.domId),
null null,
); );
sampleObject.charObj.setOption(sampleObject.charData.charOption, true); sampleObject.charObj.setOption(sampleObject.charData.charOption, true);
this.setOnePoint(sampleObject); this.setOnePoint(sampleObject);
...@@ -1328,13 +1336,13 @@ export default { ...@@ -1328,13 +1336,13 @@ export default {
const oriIndexData = sampleObject.charData.oriData[index]; const oriIndexData = sampleObject.charData.oriData[index];
if (sampleObject.log) { if (sampleObject.log) {
seriesData[index * 2].data = this.formateSmoothData( seriesData[index * 2].data = this.formateSmoothData(
oriIndexData.logData[this.curBenchX] oriIndexData.logData[this.curBenchX],
); );
seriesData[index * 2 + 1].data = seriesData[index * 2 + 1].data =
oriIndexData.logData[this.curBenchX]; oriIndexData.logData[this.curBenchX];
} else { } else {
seriesData[index * 2].data = this.formateSmoothData( seriesData[index * 2].data = this.formateSmoothData(
oriIndexData.valueData[this.curBenchX] oriIndexData.valueData[this.curBenchX],
); );
seriesData[index * 2 + 1].data = seriesData[index * 2 + 1].data =
oriIndexData.valueData[this.curBenchX]; oriIndexData.valueData[this.curBenchX];
...@@ -1548,56 +1556,56 @@ export default { ...@@ -1548,56 +1556,56 @@ export default {
train_id: this.trainingJobId, train_id: this.trainingJobId,
}; };
RequestService.getSingleTrainJob(params, ignoreError) RequestService.getSingleTrainJob(params, ignoreError)
.then((res) => { .then((res) => {
if (this.isReloading) { if (this.isReloading) {
this.$store.commit('setIsReload', false); this.$store.commit('setIsReload', false);
this.isReloading = false; this.isReloading = false;
} }
// Fault tolerance processing // Fault tolerance processing
if (!res || !res.data) { if (!res || !res.data) {
return; return;
} else if (!res.data.train_jobs || !res.data.train_jobs.length) { } else if (!res.data.train_jobs || !res.data.train_jobs.length) {
this.clearAllData(); this.clearAllData();
return; return;
} }
const data = res.data.train_jobs[0]; const data = res.data.train_jobs[0];
// Delete the data that does not exist // Delete the data that does not exist
const tagRemoveFlag = this.removeNonexistentData(data); const tagRemoveFlag = this.removeNonexistentData(data);
// Check whether new data exists and add it to the page // Check whether new data exists and add it to the page
const tagAddFlag = this.checkNewDataAndComplete(data); const tagAddFlag = this.checkNewDataAndComplete(data);
this.$nextTick(() => { this.$nextTick(() => {
this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic(); this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic();
this.updateTagInPage(!tagRemoveFlag && !tagAddFlag); this.updateTagInPage(!tagRemoveFlag && !tagAddFlag);
this.resizeCallback(); this.resizeCallback();
}); });
const tempTagList = []; const tempTagList = [];
const propsList = []; const propsList = [];
// Initial chart data // Initial chart data
data.tags.forEach((tagObj) => { data.tags.forEach((tagObj) => {
// Check whether the tag with the same name exists // Check whether the tag with the same name exists
tempTagList.push({ tempTagList.push({
label: tagObj, label: tagObj,
checked: true, checked: true,
show: true, show: true,
}); });
// Add the tag list. // Add the tag list.
propsList.push({ propsList.push({
tagName: tagObj, tagName: tagObj,
runNames: data.name, runNames: data.name,
colors: '', colors: '',
});
}); });
this.tagPropsList = tempTagList;
this.propsList = propsList;
}, this.requestErrorCallback)
.catch((e) => {
this.$message.error(this.$t('public.dataError'));
}); });
this.tagPropsList = tempTagList;
this.propsList = propsList;
}, this.requestErrorCallback)
.catch((e) => {
this.$message.error(this.$t('public.dataError'));
});
}, },
/** /**
...@@ -1703,15 +1711,15 @@ export default { ...@@ -1703,15 +1711,15 @@ export default {
if (index % 2 === 0) { if (index % 2 === 0) {
if (log) { if (log) {
serie.data = this.formateSmoothData( serie.data = this.formateSmoothData(
sampleObject.charData.oriData[index / 2].logData[ sampleObject.charData.oriData[index / 2].logData[
this.curBenchX this.curBenchX
] ],
); );
} else { } else {
serie.data = this.formateSmoothData( serie.data = this.formateSmoothData(
sampleObject.charData.oriData[index / 2].valueData[ sampleObject.charData.oriData[index / 2].valueData[
this.curBenchX this.curBenchX
] ],
); );
} }
} }
...@@ -1807,13 +1815,13 @@ export default { ...@@ -1807,13 +1815,13 @@ export default {
tempOriData.forEach((originData, index) => { tempOriData.forEach((originData, index) => {
if (log) { if (log) {
tempOption.series[index * 2].data = this.formateSmoothData( tempOption.series[index * 2].data = this.formateSmoothData(
tempOriData[index].logData[this.curBenchX] tempOriData[index].logData[this.curBenchX],
); );
tempOption.series[index * 2 + 1].data = tempOption.series[index * 2 + 1].data =
tempOriData[index].logData[this.curBenchX]; tempOriData[index].logData[this.curBenchX];
} else { } else {
tempOption.series[index * 2].data = this.formateSmoothData( tempOption.series[index * 2].data = this.formateSmoothData(
tempOriData[index].valueData[this.curBenchX] tempOriData[index].valueData[this.curBenchX],
); );
tempOption.series[index * 2 + 1].data = tempOption.series[index * 2 + 1].data =
tempOriData[index].valueData[this.curBenchX]; tempOriData[index].valueData[this.curBenchX];
...@@ -1900,7 +1908,7 @@ export default { ...@@ -1900,7 +1908,7 @@ export default {
this.thresholdLocal[this.decodeTrainingJobId][sampleItem.tagName] this.thresholdLocal[this.decodeTrainingJobId][sampleItem.tagName]
) { ) {
delete this.thresholdLocal[this.decodeTrainingJobId][ delete this.thresholdLocal[this.decodeTrainingJobId][
sampleItem.tagName sampleItem.tagName
]; ];
} }
this.currentTagName = sampleItem.tagName; this.currentTagName = sampleItem.tagName;
...@@ -2249,7 +2257,7 @@ export default { ...@@ -2249,7 +2257,7 @@ export default {
this.originDataArr.forEach((sampleObject) => { this.originDataArr.forEach((sampleObject) => {
if (this.multiSelectedTagNames[sampleObject.tagName]) { if (this.multiSelectedTagNames[sampleObject.tagName]) {
this.thresholdLocal[this.decodeTrainingJobId][ this.thresholdLocal[this.decodeTrainingJobId][
sampleObject.tagName sampleObject.tagName
] = chartPieces; ] = chartPieces;
sampleObject.pieceStr = pieceStr; sampleObject.pieceStr = pieceStr;
...@@ -2260,14 +2268,14 @@ export default { ...@@ -2260,14 +2268,14 @@ export default {
}); });
} else { } else {
this.thresholdLocal[this.decodeTrainingJobId][ this.thresholdLocal[this.decodeTrainingJobId][
this.currentTagName this.currentTagName
] = chartPieces; ] = chartPieces;
this.currentSample.pieceStr = pieceStr; this.currentSample.pieceStr = pieceStr;
this.setVisualMap(this.currentSample, chartPieces); this.setVisualMap(this.currentSample, chartPieces);
} }
localStorage.setItem( localStorage.setItem(
'thresholdCache', 'thresholdCache',
JSON.stringify(this.thresholdLocal) JSON.stringify(this.thresholdLocal),
); );
this.thresholdDialogVisible = false; this.thresholdDialogVisible = false;
...@@ -2332,11 +2340,11 @@ export default { ...@@ -2332,11 +2340,11 @@ export default {
this.thresholdLocal && this.thresholdLocal &&
this.thresholdLocal[this.decodeTrainingJobId] && this.thresholdLocal[this.decodeTrainingJobId] &&
this.thresholdLocal[this.decodeTrainingJobId][ this.thresholdLocal[this.decodeTrainingJobId][
sampleObject.tagName sampleObject.tagName
] ]
) { ) {
delete this.thresholdLocal[this.decodeTrainingJobId][ delete this.thresholdLocal[this.decodeTrainingJobId][
sampleObject.tagName sampleObject.tagName
]; ];
sampleObject.pieceStr = ''; sampleObject.pieceStr = '';
const tempCharOption = sampleObject.charData.charOption; const tempCharOption = sampleObject.charData.charOption;
...@@ -2363,7 +2371,7 @@ export default { ...@@ -2363,7 +2371,7 @@ export default {
this.thresholdLocal[this.decodeTrainingJobId][this.currentTagName] this.thresholdLocal[this.decodeTrainingJobId][this.currentTagName]
) { ) {
delete this.thresholdLocal[this.decodeTrainingJobId][ delete this.thresholdLocal[this.decodeTrainingJobId][
this.currentTagName this.currentTagName
]; ];
this.currentSample.pieceStr = ''; this.currentSample.pieceStr = '';
const tempCharOption = this.currentSample.charData.charOption; const tempCharOption = this.currentSample.charData.charOption;
...@@ -2375,7 +2383,7 @@ export default { ...@@ -2375,7 +2383,7 @@ export default {
tempCharOption.visualMap = null; tempCharOption.visualMap = null;
tempCharOption.series[0].markLine = null; tempCharOption.series[0].markLine = null;
tempCharOption.series[0].lineStyle[ tempCharOption.series[0].lineStyle[
'color' 'color'
] = this.currentSample.colors; ] = this.currentSample.colors;
} }
this.currentSample.charObj.setOption(tempCharOption, false); this.currentSample.charObj.setOption(tempCharOption, false);
...@@ -2383,8 +2391,8 @@ export default { ...@@ -2383,8 +2391,8 @@ export default {
} }
this.clearCache(); this.clearCache();
localStorage.setItem( localStorage.setItem(
'thresholdCache', 'thresholdCache',
JSON.stringify(this.thresholdLocal) JSON.stringify(this.thresholdLocal),
); );
this.delThresholdVisible = false; this.delThresholdVisible = false;
}, },
...@@ -2445,7 +2453,13 @@ export default { ...@@ -2445,7 +2453,13 @@ export default {
background-color: #fff; background-color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.path-message {
display: inline-block;
line-height: 20px;
padding: 0px 4px 15px 4px;
font-weight: bold;
vertical-align: bottom;
}
.cl-scalar-title { .cl-scalar-title {
height: 56px; height: 56px;
line-height: 56px; line-height: 56px;
......
mindinsight/ui/src/views/train-manage/summary-manage.vue
浏览文件 @ 362a05e4
...@@ -211,6 +211,7 @@ export default { ...@@ -211,6 +211,7 @@ export default {
dir: profilerDir, dir: profilerDir,
id: trainId, id: trainId,
path: path, path: path,
summaryPath: row.train_id,
}, },
}); });
window.open(routeUrl.href, '_blank'); window.open(routeUrl.href, '_blank');
......
mindinsight/ui/src/views/train-manage/tensor.vue
浏览文件 @ 362a05e4
...@@ -18,7 +18,14 @@ limitations under the License. ...@@ -18,7 +18,14 @@ limitations under the License.
<div class="tensor-bk"> <div class="tensor-bk">
<!-- Title area --> <!-- Title area -->
<div class="cl-title cl-tensor-title"> <div class="cl-title cl-tensor-title">
<div class="cl-title-left">{{$t('tensors.titleText')}}</div> <div class="cl-title-left">{{$t('tensors.titleText')}}
<div class="path-message">
<span>{{$t('symbols.leftbracket')}}</span>
<span>{{$t('trainingDashboard.summaryDirPath')}}</span>
<span>{{summaryPath}}</span>
<span>{{$t('symbols.rightbracket')}}</span>
</div>
</div>
<div class="cl-title-right"> <div class="cl-title-right">
<div class="cl-close-btn" <div class="cl-close-btn"
@click="jumpToTrainDashboard"> @click="jumpToTrainDashboard">
...@@ -183,6 +190,7 @@ export default { ...@@ -183,6 +190,7 @@ export default {
return { return {
tagList: [], // Tag list. tagList: [], // Tag list.
trainingJobId: this.$route.query.train_id, // ID of the current training job. trainingJobId: this.$route.query.train_id, // ID of the current training job.
summaryPath: this.$route.query.summaryPath,
originDataArr: [], // List of all data. originDataArr: [], // List of all data.
initOver: false, // Indicates whether the initialization is complete. initOver: false, // Indicates whether the initialization is complete.
curFullTagDic: {}, // Dictionary that contains all the current tags. curFullTagDic: {}, // Dictionary that contains all the current tags.
...@@ -1092,6 +1100,13 @@ export default { ...@@ -1092,6 +1100,13 @@ export default {
.cl-tensor-title { .cl-tensor-title {
height: 56px; height: 56px;
line-height: 56px; line-height: 56px;
.path-message {
display: inline-block;
line-height: 20px;
padding: 0px 4px 15px 4px;
font-weight: bold;
vertical-align: bottom;
}
.cl-close-btn { .cl-close-btn {
width: 20px; width: 20px;
height: 20px; height: 20px;
......
mindinsight/ui/src/views/train-manage/training-dashboard.vue
浏览文件 @ 362a05e4
...@@ -474,6 +474,7 @@ export default { ...@@ -474,6 +474,7 @@ export default {
path: '/train-manage/scalar', path: '/train-manage/scalar',
query: { query: {
train_id: this.trainingJobId, train_id: this.trainingJobId,
summaryPath: this.summaryPath,
}, },
}); });
}, },
...@@ -488,6 +489,7 @@ export default { ...@@ -488,6 +489,7 @@ export default {
path: '/train-manage/histogram', path: '/train-manage/histogram',
query: { query: {
train_id: this.trainingJobId, train_id: this.trainingJobId,
summaryPath: this.summaryPath,
}, },
}); });
}, },
...@@ -522,6 +524,7 @@ export default { ...@@ -522,6 +524,7 @@ export default {
path: '/train-manage/tensor', path: '/train-manage/tensor',
query: { query: {
train_id: this.trainingJobId, train_id: this.trainingJobId,
summaryPath: this.summaryPath,
}, },
}); });
} }
...@@ -538,6 +541,7 @@ export default { ...@@ -538,6 +541,7 @@ export default {
path: '/train-manage/data-map', path: '/train-manage/data-map',
query: { query: {
train_id: this.trainingJobId, train_id: this.trainingJobId,
summaryPath: this.summaryPath,
}, },
}); });
}, },
...@@ -552,6 +556,7 @@ export default { ...@@ -552,6 +556,7 @@ export default {
path: '/train-manage/graph', path: '/train-manage/graph',
query: { query: {
train_id: this.trainingJobId, train_id: this.trainingJobId,
summaryPath: this.summaryPath,
}, },
}); });
}, },
...@@ -1500,6 +1505,7 @@ export default { ...@@ -1500,6 +1505,7 @@ export default {
path: '/train-manage/image', path: '/train-manage/image',
query: { query: {
train_id: this.trainingJobId, train_id: this.trainingJobId,
summaryPath: this.summaryPath,
}, },
}); });
}, },
...@@ -2085,8 +2091,9 @@ export default { ...@@ -2085,8 +2091,9 @@ export default {
.path-message { .path-message {
display: inline-block; display: inline-block;
line-height: 20px; line-height: 20px;
padding: 18px 16px; padding: 21px 4px 0 4px;
font-weight: bold; font-weight: bold;
vertical-align: bottom;
} }
.loading-icon { .loading-icon {
margin-left: 5px; margin-left: 5px;
...@@ -2096,8 +2103,8 @@ export default { ...@@ -2096,8 +2103,8 @@ export default {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
line-height: 20px; line-height: 56px;
padding: 18px 0; padding: 0;
} }
} }
.cl-dashboard-center { .cl-dashboard-center {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或