mirror of
https://github.com/projectacrn/acrn-hypervisor.git
synced 2025-06-20 12:42:54 +00:00
config_tools: add virtio gpu widget
add virtio gpu widget for the new design. Tracked-On: #7970 Signed-off-by: Kunhui-Li <kunhuix.li@intel.com> Signed-off-by: Yang,Yu-chu <yu-chu.yang@intel.com> Reviewed-by: Junjie Mao <junjie.mao@intel.com>
This commit is contained in:
Kunhui-Li
acrnsi-robot
parent
f165ff3b5a
commit
ad17268c5e
@ -54,6 +54,7 @@ import Network from "./ConfigForm/CustomWidget/Virtio/Network.vue";
|
|||||||
import Console from "./ConfigForm/CustomWidget/Virtio/Console.vue";
|
import Console from "./ConfigForm/CustomWidget/Virtio/Console.vue";
|
||||||
import Input from "./ConfigForm/CustomWidget/Virtio/Input.vue";
|
import Input from "./ConfigForm/CustomWidget/Virtio/Input.vue";
|
||||||
import CAT from "./ConfigForm/CustomWidget/CAT.vue";
|
import CAT from "./ConfigForm/CustomWidget/CAT.vue";
|
||||||
|
import GPU from "./ConfigForm/CustomWidget/Virtio/GPU.vue";
|
||||||
|
|
||||||
i18n.useLocal(localizeEn);
|
i18n.useLocal(localizeEn);
|
||||||
|
|
||||||
@ -91,6 +92,10 @@ export default {
|
|||||||
"ui:title": "",
|
"ui:title": "",
|
||||||
'ui:field': Input,
|
'ui:field': Input,
|
||||||
},
|
},
|
||||||
|
"gpu": {
|
||||||
|
"ui:title": "Virtio GPU device",
|
||||||
|
"ui:field": GPU,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
"cpu_affinity": {
|
"cpu_affinity": {
|
||||||
'ui:field': cpu_affinity
|
'ui:field': cpu_affinity
|
||||||
|
|||||||
@ -0,0 +1,267 @@
|
|||||||
|
<template>
|
||||||
|
<div><br><b>Virtio GPU device</b></div>
|
||||||
|
<div><br><span v-html="this.GPUDescription" style="color: rgb(153, 153, 153)"></span></div>
|
||||||
|
<div class="virtio_gpu" v-if="defaultVal && defaultVal.displays.display.length !== 0">
|
||||||
|
<div class="virtio_gpu_demo">
|
||||||
|
<b style="margin-bottom: 2rem">Virtual displays</b>
|
||||||
|
<b-row class="align-items-center my-2 mt-4">
|
||||||
|
<b-col md="2">
|
||||||
|
<label>
|
||||||
|
<n-popover trigger="hover" placement="top-start">
|
||||||
|
<template #trigger>
|
||||||
|
<IconInfo/>
|
||||||
|
</template>
|
||||||
|
<span v-html="this.GPUConfiguration.properties.display_type.description"></span>
|
||||||
|
</n-popover>
|
||||||
|
Display type:
|
||||||
|
</label>
|
||||||
|
</b-col>
|
||||||
|
<b-col md="4">
|
||||||
|
<b-form-select v-model="defaultVal.display_type" :options="GPUDisplayType"/>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<div class="align-items-center my-2 mt-4" v-if="defaultVal.display_type === 'Window'"
|
||||||
|
v-for="(window_display, index) in defaultVal.displays.display">
|
||||||
|
<div style="float: left; text-indent: 2em;">
|
||||||
|
<b>Display {{ index + 1 }}</b>
|
||||||
|
</div>
|
||||||
|
<div class="ToolSet" style="float: right;">
|
||||||
|
<div @click="removeDisplay(defaultVal.displays.display, index)">
|
||||||
|
<Icon size="18px">
|
||||||
|
<Minus/>
|
||||||
|
</Icon>
|
||||||
|
</div>
|
||||||
|
<div @click="addWindowDisplay(defaultVal.displays.display, index)">
|
||||||
|
<Icon size="18px">
|
||||||
|
<Plus/>
|
||||||
|
</Icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="windowDisplay" style="text-indent: 1em;">
|
||||||
|
<b-row class="align-items-center my-2 mt-4">
|
||||||
|
<b-col md="3">
|
||||||
|
<label>
|
||||||
|
<n-popover trigger="hover" placement="top-start">
|
||||||
|
<template #trigger>
|
||||||
|
<IconInfo/>
|
||||||
|
</template>
|
||||||
|
<span v-html="this.DisplayConfiguration.properties.window_resolutions.description"></span>
|
||||||
|
</n-popover>
|
||||||
|
Window resolutions:
|
||||||
|
</label>
|
||||||
|
</b-col>
|
||||||
|
<b-col md="4">
|
||||||
|
<b-form-select v-model="window_display.window_resolutions" :options="WindowResolutionsType"/>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<b-row class="align-items-center my-2">
|
||||||
|
<b-col md="3">
|
||||||
|
<label>
|
||||||
|
<n-popover trigger="hover" placement="top-start">
|
||||||
|
<template #trigger>
|
||||||
|
<IconInfo/>
|
||||||
|
</template>
|
||||||
|
<span v-html="this.DisplayConfiguration.properties.horizontal_offset.description"></span>
|
||||||
|
</n-popover>
|
||||||
|
Horizontal offset (pixels):
|
||||||
|
</label>
|
||||||
|
</b-col>
|
||||||
|
<b-col md="4">
|
||||||
|
<b-form-input v-model="window_display.horizontal_offset"/>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<b-row class="align-items-center my-2">
|
||||||
|
<b-col md="3">
|
||||||
|
<label>
|
||||||
|
<n-popover trigger="hover" placement="top-start">
|
||||||
|
<template #trigger>
|
||||||
|
<IconInfo/>
|
||||||
|
</template>
|
||||||
|
<span v-html="this.DisplayConfiguration.properties.vertical_offset.description"></span>
|
||||||
|
</n-popover>
|
||||||
|
Vertical offset (pixels):
|
||||||
|
</label>
|
||||||
|
</b-col>
|
||||||
|
<b-col md="4">
|
||||||
|
<b-form-input v-model="window_display.vertical_offset"/>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="align-items-center my-2 mt-4" v-else-if="defaultVal.display_type === 'Full screen'"
|
||||||
|
v-for="(fullScreen_display, index) in defaultVal.displays.display">
|
||||||
|
<div style="float: left; text-indent: 2em;">
|
||||||
|
<b>Display {{ index + 1 }}</b>
|
||||||
|
</div>
|
||||||
|
<div class="ToolSet" style="float: right;">
|
||||||
|
<div @click="removeDisplay(defaultVal.displays.display, index)">
|
||||||
|
<Icon size="18px">
|
||||||
|
<Minus/>
|
||||||
|
</Icon>
|
||||||
|
</div>
|
||||||
|
<div @click="addFullScreenDisplay(defaultVal.displays.display, index)">
|
||||||
|
<Icon size="18px">
|
||||||
|
<Plus/>
|
||||||
|
</Icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<b-row style="text-indent: 1em" class="align-items-center my-2 mt-4">
|
||||||
|
<b-col md="2">
|
||||||
|
<label>
|
||||||
|
<n-popover trigger="hover" placement="top-start">
|
||||||
|
<template #trigger>
|
||||||
|
<IconInfo/>
|
||||||
|
</template>
|
||||||
|
<span v-html="this.DisplayConfiguration.properties.monitor_id.description"></span>
|
||||||
|
</n-popover>
|
||||||
|
Monitor id:
|
||||||
|
</label>
|
||||||
|
</b-col>
|
||||||
|
<b-col md="4">
|
||||||
|
<b-form-select v-model="fullScreen_display.monitor_id" :options="MonitorIdType"/>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ToolSet">
|
||||||
|
<div>
|
||||||
|
<Icon size="18px" color="rgb(60,60,60)" @click="removeVirtioGPU">
|
||||||
|
<Minus/>
|
||||||
|
</Icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
<div class="ToolSet" style="margin-inline-start: 1rem; margin-bottom: 1rem">
|
||||||
|
<div @click="addVirtioGPU">
|
||||||
|
<Icon size="18px">
|
||||||
|
<Plus/>
|
||||||
|
</Icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import _ from "lodash";
|
||||||
|
import {Icon} from "@vicons/utils";
|
||||||
|
import {Plus, Minus} from '@vicons/fa'
|
||||||
|
import {fieldProps, vueUtils} from '@lljj/vue3-form-naive';
|
||||||
|
import IconInfo from '@lljj/vjsf-utils/icons/IconInfo.vue';
|
||||||
|
import {BRow} from "bootstrap-vue-3";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "GPU",
|
||||||
|
components: {BRow, Icon, Plus, Minus, IconInfo},
|
||||||
|
props: {
|
||||||
|
...fieldProps,
|
||||||
|
fieldProps: {
|
||||||
|
type: null,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
GPUDescription: this.rootSchema.definitions['VMConfigType']['properties']['virtio_devices']['properties']['gpu']['description'],
|
||||||
|
GPUConfiguration: this.rootSchema.definitions['VirtioGPUConfiguration'],
|
||||||
|
GPUDisplayType: this.rootSchema.definitions['VirtioGPUDisplayType']['enum'],
|
||||||
|
DisplayConfiguration: this.rootSchema.definitions['DisplayConfiguration'],
|
||||||
|
WindowResolutionsType: this.rootSchema.definitions['WindowResolutionsType']['enum'],
|
||||||
|
MonitorIdType: this.rootSchema.definitions['DisplayConfiguration']['properties']['monitor_id']['enum'],
|
||||||
|
defaultVal: vueUtils.getPathVal(this.rootFormData, this.curNodePath)
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
rootFormData: {
|
||||||
|
handler(newValue, oldValue) {
|
||||||
|
this.defaultVal = vueUtils.getPathVal(newValue, this.curNodePath)
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
defaultVal: {
|
||||||
|
handler(newValue, oldValue) {
|
||||||
|
// Note: `newValue` will be equal to `oldValue` here
|
||||||
|
// on nested mutations as long as the object itself
|
||||||
|
// hasn't been replaced.
|
||||||
|
vueUtils.setPathVal(this.rootFormData, this.curNodePath, newValue);
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addWindowDisplay(display, index) {
|
||||||
|
display.splice(index + 1, 0, {
|
||||||
|
"window_resolutions": "",
|
||||||
|
"horizontal_offset": "",
|
||||||
|
"vertical_offset": "",
|
||||||
|
})
|
||||||
|
},
|
||||||
|
addFullScreenDisplay(display, index) {
|
||||||
|
display.splice(index + 1, 0, {
|
||||||
|
"monitor_id": "",
|
||||||
|
})
|
||||||
|
},
|
||||||
|
removeDisplay(display, index) {
|
||||||
|
if (display.length <= 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
display.splice(index, 1)
|
||||||
|
},
|
||||||
|
removeVirtioGPU() {
|
||||||
|
this.defaultVal = null
|
||||||
|
},
|
||||||
|
addVirtioGPU() {
|
||||||
|
this.defaultVal = {
|
||||||
|
"display_type": "",
|
||||||
|
"displays": {
|
||||||
|
"display": [
|
||||||
|
{
|
||||||
|
"window_resolutions": "",
|
||||||
|
"horizontal_offset": "",
|
||||||
|
"vertical_offset": "",
|
||||||
|
"monitor_id": "",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.ToolSet {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
gap: 0.5rem;
|
||||||
|
max-width: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ToolSet div {
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid gray;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: #f9f9f9;
|
||||||
|
padding: 5px 5px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.virtio_gpu {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.virtio_gpu_demo {
|
||||||
|
width: 100%;
|
||||||
|
border: 2px solid #cccccc;
|
||||||
|
padding: 12px 50px 12px 6px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user