From ad17268c5ed5b1377d21a9a6015f01cfb245cad4 Mon Sep 17 00:00:00 2001
From: Kunhui-Li <kunhuix.li@intel.com>
Date: Wed, 17 Aug 2022 14:25:04 +0800
Subject: [PATCH] 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>
---
 .../src/pages/Config/ConfigForm.vue           |   5 +
 .../ConfigForm/CustomWidget/Virtio/GPU.vue    | 267 ++++++++++++++++++
 2 files changed, 272 insertions(+)
 create mode 100644 misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/GPU.vue

diff --git a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm.vue b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm.vue
index f9571cb49..2ce959adc 100644
--- a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm.vue
+++ b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm.vue
@@ -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
diff --git a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/GPU.vue b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/GPU.vue
new file mode 100644
index 000000000..7720c632c
--- /dev/null
+++ b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/GPU.vue
@@ -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>