config_tools: add tooltips for virtio devices

add tooltips for virtio network, input and console.

Tracked-On: #7897
Signed-off-by: Kunhui-Li <kunhuix.li@intel.com>
Reviewed-by: Junjie Mao <junjie.mao@intel.com>

misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Console.vue

@@ -5,7 +5,14 @@
         <b style="margin-bottom: 2rem">Virtio console device</b>
         <b-row class="align-items-center my-2 mt-4">
           <b-col md="2">
-            <label>Use type: </label>
+            <label>
+              <n-popover trigger="hover" placement="top-start">
+              <template #trigger>
+                <IconInfo/>
+              </template>
+              <span v-html="this.ConsoleConfiguration.properties.use_type.description"></span>
+              </n-popover>Use type:
+            </label>
           </b-col>
           <b-col md="4">
             <b-form-select v-model="console.use_type" :options="getUseTypes"/>
@@ -14,7 +21,14 @@
 
         <b-row class="align-items-center">
           <b-col md="2">
-            <label>Backend type: </label>
+            <label>
+              <n-popover trigger="hover" placement="top-start">
+              <template #trigger>
+                <IconInfo/>
+              </template>
+              <span v-html="this.ConsoleConfiguration.properties.backend_type.description"></span>
+              </n-popover>Backend type:
+            </label>
           </b-col>
           <b-col md="4">
             <b-form-select v-model="console.backend_type" :options="ConsoleBackendType"/>
@@ -23,7 +37,14 @@
 
         <b-row class="align-items-center my-2" v-if="console.backend_type === 'file'">
           <b-col md="2">
-            <label>Output file path: </label>
+            <label>
+              <n-popover trigger="hover" placement="top-start">
+              <template #trigger>
+                <IconInfo/>
+              </template>
+              <span v-html="this.ConsoleConfiguration.properties.output_file_path.description"></span>
+              </n-popover>Output file path:
+            </label>
           </b-col>
           <b-col md="4">
             <b-form-input v-model="console.output_file_path"/>
@@ -32,7 +53,14 @@
 
         <b-row class="align-items-center my-2" v-else-if="console.backend_type === 'tty'">
           <b-col md="2">
-            <label>TTY device path: </label>
+            <label>
+              <n-popover trigger="hover" placement="top-start">
+              <template #trigger>
+                <IconInfo/>
+              </template>
+              <span v-html="this.ConsoleConfiguration.properties.tty_device_path.description"></span>
+              </n-popover>TTY device path:
+            </label>
           </b-col>
           <b-col md="4">
             <b-form-input v-model="console.tty_device_path"/>
@@ -41,7 +69,14 @@
 
         <b-row class="align-items-center my-2" v-else-if="console.backend_type === 'sock client' || console.backend_type === 'sock server'">
           <b-col md="2">
-            <label>Sock file path: </label>
+            <label>
+              <n-popover trigger="hover" placement="top-start">
+              <template #trigger>
+                <IconInfo/>
+              </template>
+              <span v-html="this.ConsoleConfiguration.properties.sock_file_path.description"></span>
+              </n-popover>Sock file path:
+            </label>
           </b-col>
           <b-col md="4">
             <b-form-input v-model="console.sock_file_path"/>
@@ -82,10 +117,11 @@ 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';
 
 export default {
   name: "Console",
-  components: {Icon, Plus, Minus},
+  components: {Icon, Plus, Minus, IconInfo},
   props: {
     ...fieldProps,
     fieldProps: {
@@ -95,6 +131,7 @@ export default {
   },
   data() {
     return {
+      ConsoleConfiguration: this.rootSchema.definitions['BasicVirtioConsoleBackendType'],
       enumNames: this.rootSchema.definitions['VirtioConsoleUseType']['enumNames'],
       enum: this.rootSchema.definitions['VirtioConsoleUseType']['enum'],
       ConsoleBackendType: this.rootSchema.definitions['BasicVirtioConsoleBackendType']['enum'],
@@ -176,7 +213,7 @@ export default {
 .virtio_console_demo {
   width: 100%;
   border: 2px solid #cccccc;
-  padding: 8px 2px 12px 6px;
+  padding: 12px 2px 12px 6px;
   border-radius: 5px;
   margin-bottom: 1rem;
 }

misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Input.vue

@@ -4,8 +4,15 @@
       <div class="virtio_input_demo">
         <b style="margin-bottom: 2rem">Virtio input device</b>
         <b-row class="align-items-center my-2 mt-4">
-          <b-col md="2">
+          <b-col md="3">
-            <label>Backend device file: </label>
+            <label>
+              <n-popover trigger="hover" placement="top-start">
+              <template #trigger>
+                <IconInfo/>
+              </template>
+              <span v-html="this.InputConfiguration.properties.backend_device_file.description"></span>
+              </n-popover>Backend device file:
+            </label>
           </b-col>
           <b-col md="8">
             <b-form-select v-model="input.backend_device_file" :options="BackendDeviceFileType"/>
@@ -13,7 +20,13 @@
         </b-row>
 
         <b-row class="align-items-center my-2">
-          <b-col md="2">
+          <b-col md="3">
+            <n-popover trigger="hover" placement="top-start">
+              <template #trigger>
+                <IconInfo/>
+              </template>
+              <span v-html="this.InputConfiguration.properties.id.description"></span>
+            </n-popover>
             Guest virtio input device unique identifier:
           </b-col>
           <b-col md="4">
@@ -57,10 +70,11 @@ 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';
 
 export default {
   name: "Input",
-  components: {Icon, Plus, Minus},
+  components: {Icon, Plus, Minus, IconInfo},
   props: {
     ...fieldProps,
     fieldProps: {
@@ -114,7 +128,7 @@ export default {
 </script>
 
 <style scoped>
-label:after{
+label:before{
   content: '*';
   color: red;
 }
@@ -145,7 +159,7 @@ label:after{
 .virtio_input_demo {
   width: 100%;
   border: 2px solid #cccccc;
-  padding: 8px 0 12px 6px;
+  padding: 12px 0 12px 6px;
   border-radius: 5px;
   margin-bottom: 1rem;
 }

misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Network.vue

@@ -5,7 +5,14 @@
         <b style="margin-bottom: 2rem">Virtio network device</b>
         <b-row class="align-items-center my-2 mt-4">
           <b-col md="2">
-            <label>Virtio framework: </label>
+            <label>
+              <n-popover trigger="hover" placement="top-start">
+              <template #trigger>
+                <IconInfo/>
+              </template>
+              <span v-html="this.NetworkConfiguration.properties.virtio_framework.description"></span>
+              </n-popover>Virtio framework:
+            </label>
           </b-col>
           <b-col md="4">
             <b-form-select v-model="network.virtio_framework" :options="NetworkFrameworkType"/>
@@ -14,7 +21,14 @@
 
         <b-row class="align-items-center my-2">
           <b-col md="2">
-            <label>Network interface name: </label>
+            <label>
+              <n-popover trigger="hover" placement="top-start">
+              <template #trigger>
+                <IconInfo/>
+              </template>
+              <span v-html="this.NetworkConfiguration.properties.interface_name.description"></span>
+              </n-popover>Network interface name:
+            </label>
           </b-col>
           <b-col md="4">
             <b-form-input :state="validateInterfaceName(network.interface_name)" v-model="network.interface_name" placeholder="An arbitrary-long string with letters, digits, underscores or dashes."/>
@@ -57,10 +71,11 @@ 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';
 
 export default {
   name: "Network",
-  components: {Icon, Plus, Minus},
+  components: {Icon, Plus, Minus, IconInfo},
   props: {
     ...fieldProps,
     fieldProps: {
@@ -115,7 +130,7 @@ export default {
 </script>
 
 <style scoped>
-label:after{
+label:before{
   content: '*';
   color: red;
 }
@@ -146,7 +161,7 @@ label:after{
 .virtio_network_demo {
   width: 100%;
   border: 2px solid #cccccc;
-  padding: 8px 0 12px 6px;
+  padding: 12px 0 12px 6px;
   border-radius: 5px;
   margin-bottom: 1rem;
 }