config_tools: add error icon in tabBox when validate failed

add error icon in tabBox when validate failed

Tracked-On: #6691
Signed-off-by: Weiyi Feng <weiyix.feng@intel.com>
This commit is contained in:
Weiyi Feng 2022-06-15 19:02:50 +08:00 committed by acrnsi-robot
parent 89bfe20e2d
commit 8eb1bbda3f
2 changed files with 82 additions and 20 deletions

View File

@ -64,12 +64,15 @@
<TabBox
:scenario="scenario"
:activeVMID="activeVMID"
:errors="errors"
@tabActive="switchTab"
@addVM="addVM"
/>
</div>
<div v-if="errors">
<div class="px-4" style="color: red" v-for="error in errors">{{ error.message }}</div>
<div v-if="errors.hasOwnProperty(activeVMID)">
<div class="px-4" style="color: red" v-for="error in errors[activeVMID]">
{{ error.severity }}: {{ error.message }}
</div>
</div>
<div class="p-4">
<ConfigForm
@ -184,7 +187,7 @@ export default {
scenarioUpdate(scenarioData) {
let scenarioXMLData = this.scenarioToXML(scenarioData)
let all_errors = configurator.pythonObject.validateScenario(this.board.content, scenarioXMLData)
this.errors = all_errors.semantic_errors
this.errors = this.translateErrors(all_errors, scenarioData)
this.scenario = scenarioData;
this.showFlag = false;
this.updateCurrentFormSchema()
@ -385,6 +388,39 @@ export default {
}
return scenarioWithDefault
},
translateErrors(errors, scenarioData) {
let formErrors = {}
let translate = error => {
error.paths.forEach(path => {
let formPath = path.split('/')[2];
// translate form path to scenario vmid
let vmid = -1
if (formPath === 'hv') {
vmid = -1
} else if (formPath === 'vm') {
vmid = scenarioData.vm[0]['@id']
} else if (/vm\[\d+]/.test(formPath)) {
let vmIndex = /vm\[(\d+)]/.exec(formPath)[1]
vmIndex = parseInt(vmIndex) - 1
vmid = scenarioData.vm[vmIndex]['@id']
}
if (!formErrors.hasOwnProperty(vmid)) {
formErrors[vmid] = []
}
formErrors[vmid].push(error)
})
}
if (errors.syntactic_errors.length > 0) {
errors.syntactic_errors.forEach(translate)
}
if (errors.semantic_errors.length !== 0) {
errors.semantic_errors.forEach(translate)
}
return formErrors
},
saveScenario() {
if (_.isEmpty(this.scenario.vm)) {
alert("Please add at least one VM")
@ -427,18 +463,22 @@ export default {
configurator.writeFile(this.WorkingFolder + 'scenario.xml', scenarioXMLData)
.then(() => {
// validate scenario and clean up the launch script
stepDone = 1
console.log("validate settings...")
let all_errors = configurator.pythonObject.validateScenario(this.board.content, scenarioXMLData)
this.errors = all_errors.semantic_errors
// noinspection ExceptionCaughtLocallyJS
// noinspection JSUnresolvedVariable
this.errors = this.translateErrors(all_errors, this.scenario)
// noinspection JSUnresolvedVariable
if (all_errors.syntactic_errors.length !== 0 || all_errors.semantic_errors.length !== 0) {
throw new Error("validation failed")
}
console.log("validation ok")
stepDone = 2
return this.cleanLaunchScript()
}).then(() => {
})
.then(() => {
// generate launch script
if (needSaveLaunchScript) {
let launchScripts = configurator.pythonObject.generateLaunchScript(this.board.content, scenarioXMLData)
let writeDone = []
@ -446,17 +486,17 @@ export default {
writeDone.push(configurator.writeFile(this.WorkingFolder + filename, launchScripts[filename]))
}
return Promise.all(writeDone)
} else {
return
}
})
.then((result) => {
// show success message
if (!_.isEmpty(result)) {
stepDone = 3
}
alert(`${msg.slice(0, stepDone).join('')} \nAll files successfully saved to your working folder ${this.WorkingFolder}`)
})
.catch((err) => {
// show error message
console.log("error" + err)
let outmsg = ''
for (var i = 0; i < stepDone; i++)

View File

@ -8,8 +8,13 @@
</div>
<div class="TabSplitter"></div>
<div class="d-inline-block p-3 pt-2 Tab" :class="{Active:activeVMID===pre.id}"
<div class="d-inline-block p-3 pt-2 Tab position-relative" :class="{Active:activeVMID===pre.id}"
:key="pre.id" v-for="pre in vms.PRE_LAUNCHED_VM" @click="active(pre.id)">
<div class="position-absolute" style="right: 3px;top:5px;" v-if="errors.hasOwnProperty(pre.id)">
<Icon size="18px" color="red" style="cursor: pointer;">
<ExclamationCircle/>
</Icon>
</div>
<div style="font-size:22px">
{{ pre.name }}
</div>
@ -24,9 +29,14 @@
</div>
<div class="d-inline-block p-3 pt-2 Tab" :class="{Active:activeVMID===service.id}"
<div class="d-inline-block p-3 pt-2 Tab position-relative" :class="{Active:activeVMID===service.id}"
:key="service.id" v-for="service in vms.SERVICE_VM"
@click="active(service.id)">
<div class="position-absolute" style="right: 3px;top:5px;" v-if="errors.hasOwnProperty(service.id)">
<Icon size="18px" color="red" style="cursor: pointer;">
<ExclamationCircle/>
</Icon>
</div>
<div style="font-size:22px">
{{ service.name }}
</div>
@ -34,9 +44,14 @@
</div>
<div class="d-inline-block p-3 pt-2 Tab" :class="{Active:activeVMID===post.id}"
<div class="d-inline-block p-3 pt-2 Tab position-relative" :class="{Active:activeVMID===post.id}"
:key="post.id" v-for="post in vms.POST_LAUNCHED_VM"
@click="active(post.id)">
<div class="position-absolute" style="right: 3px;top:5px;" v-if="errors.hasOwnProperty(post.id)">
<Icon size="18px" color="red" style="cursor: pointer;">
<ExclamationCircle/>
</Icon>
</div>
<div style="font-size:22px">
{{ post.name }}
</div>
@ -53,12 +68,19 @@
</template>
<script>
import {Icon} from "@vicons/utils";
import {ExclamationCircle} from "@vicons/fa";
export default {
name: "TabBox",
components: {Icon, ExclamationCircle},
props: {
scenario: {
type: Object
},
errors: {
type: Object
},
activeVMID: {type: Number}
},
emits: ['tabActive', 'addVM'],