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 Input from "./ConfigForm/CustomWidget/Virtio/Input.vue";
|
||||
import CAT from "./ConfigForm/CustomWidget/CAT.vue";
|
||||
import GPU from "./ConfigForm/CustomWidget/Virtio/GPU.vue";
|
||||
|
||||
i18n.useLocal(localizeEn);
|
||||
|
||||
@ -91,6 +92,10 @@ export default {
|
||||
"ui:title": "",
|
||||
'ui:field': Input,
|
||||
},
|
||||
"gpu": {
|
||||
"ui:title": "Virtio GPU device",
|
||||
"ui:field": GPU,
|
||||
},
|
||||
},
|
||||
"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