From a512d8657dde2e5fff38429cbc3ef89ba0fee152 Mon Sep 17 00:00:00 2001
From: Conghui <conghui.chen@intel.com>
Date: Mon, 30 May 2022 14:11:26 +0800
Subject: [PATCH] config-tools: add tooltips

Add tooltips for vUART, IVSHMEM and CAT.
Other tiny fix.

Tracked-On: #7639
Signed-off-by: Conghui <conghui.chen@intel.com>
---
 .../configurator/src/pages/Config.vue         |  1 -
 .../Config/ConfigForm/CustomWidget/CAT.vue    | 35 ++++++++++--
 .../CustomWidget/IVSHMEM_REGION.vue           | 51 ++++++++++++++---
 .../Config/ConfigForm/CustomWidget/VUART.vue  | 56 ++++++++++++++++---
 4 files changed, 119 insertions(+), 24 deletions(-)

diff --git a/misc/config_tools/configurator/packages/configurator/src/pages/Config.vue b/misc/config_tools/configurator/packages/configurator/src/pages/Config.vue
index f2847b0a1..30fdb9af2 100644
--- a/misc/config_tools/configurator/packages/configurator/src/pages/Config.vue
+++ b/misc/config_tools/configurator/packages/configurator/src/pages/Config.vue
@@ -147,7 +147,6 @@ export default {
       // update the info in title
       this.currentBoardFile = 'Current file: ' + this.board['name']
       let boardContent = this.board.content
-      let reg = /(?<=Manufacturer).+(?=\\n)/
       let result = boardContent.match(/Manufacturer.+\n/gm)
       console.log(result)
       if (result && result.length > 0) {
diff --git a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/CAT.vue b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/CAT.vue
index e7790c5c6..e2f0ce734 100644
--- a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/CAT.vue
+++ b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/CAT.vue
@@ -7,7 +7,12 @@
           v-model="SSRAM_ENABLED" :value="'y'" :uncheckedValue="'n'"
           :disabled="RDT_ENABLED==='y'"
       >
-        Software SRAM (for real-time apps)
+        <n-popover trigger="hover" placement="top-start">
+          <template #trigger>
+              <IconInfo/>
+          </template>
+          <span v-html="this.SSRAMInfo.properties.SSRAM_ENABLED.description"></span>
+        </n-popover>Software SRAM (for real-time apps)
       </b-form-checkbox>
     </div>
     <div class="d-flex gap-2 flex-column">
@@ -16,18 +21,33 @@
           v-model="RDT_ENABLED" :value="'y'" :uncheckedValue="'n'"
           :disabled="SSRAM_ENABLED==='y'"
       >
-        Cache Allocation Technology (requires CPU Afinity configuration in each desired VM)
+        <n-popover trigger="hover" placement="top-start">
+          <template #trigger>
+              <IconInfo/>
+          </template>
+          <span v-html="this.RDTType.properties.RDT_ENABLED.description"></span>
+        </n-popover>Cache Allocation Technology (requires CPU Afinity configuration in each desired VM)
       </b-form-checkbox>
       <div class="d-flex flex-column gap-2 ps-3 pb-3">
         <b-form-checkbox
             v-model="CDP_ENABLED" :value="'y'" :uncheckedValue="'n'"
             :disabled="SSRAM_ENABLED==='y'||VCAT_ENABLED==='y'">
-          Code and Data Prioritization
+            <n-popover trigger="hover" placement="top-start">
+              <template #trigger>
+                  <IconInfo/>
+              </template>
+              <span v-html="this.RDTType.properties.CDP_ENABLED.description"></span>
+            </n-popover>Code and Data Prioritization
         </b-form-checkbox>
         <b-form-checkbox
             v-model="VCAT_ENABLED" :value="'y'" :uncheckedValue="'n'"
             :disabled="SSRAM_ENABLED==='y'||CDP_ENABLED==='y'">
-          Virtual Cache Allocation Technology (VCAT)
+            <n-popover trigger="hover" placement="top-start">
+              <template #trigger>
+                  <IconInfo/>
+              </template>
+              <span v-html="this.RDTType.properties.VCAT_ENABLED.description"></span>
+            </n-popover>Virtual Cache Allocation Technology (VCAT)
         </b-form-checkbox>
       </div>
     </div>
@@ -102,6 +122,7 @@
 import _ from "lodash";
 import {vueUtils, fieldProps} from "@lljj/vue3-form-naive";
 import HexBlockRangeSelector from "./CAT/HexBlockRangeSelector.vue";
+import IconInfo from '@lljj/vjsf-utils/icons/IconInfo.vue';
 
 function count(source, target) {
   return (source.match(new RegExp(target, 'g')) || []).length;
@@ -111,7 +132,7 @@ function count(source, target) {
 // noinspection JSUnresolvedVariable
 export default {
   name: "CAT",
-  components: {HexBlockRangeSelector},
+  components: {HexBlockRangeSelector, IconInfo},
   props: {
     ...fieldProps
   },
@@ -174,7 +195,9 @@ export default {
   data() {
     return {
       CAT_INFO: null,
-      cat_level_region_sum: {}
+      cat_level_region_sum: {},
+      SSRAMInfo: this.rootSchema.definitions['SSRAMInfo'],
+      RDTType: this.rootSchema.definitions['RDTType']
     }
   },
   methods: {
diff --git a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/IVSHMEM_REGION.vue b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/IVSHMEM_REGION.vue
index d82e841a3..d2c14d656 100644
--- a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/IVSHMEM_REGION.vue
+++ b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/IVSHMEM_REGION.vue
@@ -6,7 +6,12 @@
 
         <b-row class="align-items-center my-2 mt-4">
           <b-col md="2">
-            Region name:
+            <n-popover trigger="hover" placement="top-start">
+              <template #trigger>
+                  <IconInfo/>
+              </template>
+              <span v-html="this.IVSHMEMRegionType.properties.NAME.description"></span>
+            </n-popover>Region name:
           </b-col>
           <b-col md="4">
               <b-form-input v-model="IVSHMEM_VMO.NAME" placeholder="Any string with no white spaces."/>
@@ -15,7 +20,14 @@
 
         <b-row class="align-items-center my-2">
           <b-col md="2">
-            <label>Emulated by: </label>
+            <label>
+              <n-popover trigger="hover" placement="top-start">
+                <template #trigger>
+                    <IconInfo/>
+                </template>
+                <span v-html="this.IVSHMEMRegionType.properties.PROVIDED_BY.description"></span>
+              </n-popover>Emulated by:
+            </label>
           </b-col>
           <b-col md="4">
             <b-form-select v-model="IVSHMEM_VMO.PROVIDED_BY" :options="providerType"></b-form-select>
@@ -24,7 +36,14 @@
 
         <b-row class="align-items-center my-2">
           <b-col md="2">
-            <label>Size (MB): </label>
+            <label>
+              <n-popover trigger="hover" placement="top-start">
+                <template #trigger>
+                    <IconInfo/>
+                </template>
+                <span v-html="this.IVSHMEMRegionType.properties.IVSHMEM_SIZE.description"></span>
+              </n-popover>Size (MB):
+            </label>
           </b-col>
           <b-col md="4">
             <b-form-select v-model="IVSHMEM_VMO.IVSHMEM_SIZE" :options="IVSHMEMSize"></b-form-select>
@@ -36,13 +55,25 @@
           <p>Select all VMs that will use this shared memory region</p>
           <b-row>
             <b-col sm="2" offset-sm="6">
-              Virtual BDF:
+              <n-popover trigger="hover" placement="top-start">
+                <template #trigger>
+                    <IconInfo/>
+                </template>
+                <span v-html="this.IVSHMEMVM.properties.VBDF.description"></span>
+              </n-popover>Virtual BDF:
             </b-col>
           </b-row>
           <b-row class="justify-content-between align-items-center"
                  v-for="(IVSHMEM_VM,index) in IVSHMEM_VMO.IVSHMEM_VMS.IVSHMEM_VM">
-            <b-col sm="1">
-              <label>VM name:</label>
+            <b-col sm="2">
+              <label>
+                <n-popover trigger="hover" placement="top-start">
+                  <template #trigger>
+                      <IconInfo/>
+                  </template>
+                  <span v-html="this.VMConfigType.properties.name.description"></span>
+                </n-popover>VM name:
+              </label>
             </b-col>
             <b-col sm="3">
               <b-form-select :state="validation(IVSHMEM_VM.VM_NAME)" v-model="IVSHMEM_VM.VM_NAME" :options="vmNames"></b-form-select>
@@ -106,11 +137,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: 'IVSHMEM_REGION',
-  components: {Icon, Plus, Minus},
+  components: {Icon, Plus, Minus, IconInfo},
   props: {
     ...fieldProps,
     // Todo: use ui:fieldProps to pass getScenarioData function
@@ -132,7 +163,9 @@ export default {
   data() {
     return {
       providerType: this.rootSchema.definitions['ProviderType']['enum'],
-      IVSHMEMSize: this.rootSchema.definitions['IVSHMEMSize']['enum'],
+      IVSHMEMRegionType: this.rootSchema.definitions['IVSHMEMRegionType'],
+      IVSHMEMVM: this.rootSchema.definitions['IVSHMEMVM'],
+      VMConfigType: this.rootSchema.definitions['VMConfigType'],
       defaultVal: vueUtils.getPathVal(this.rootFormData, this.curNodePath)
     };
   },
diff --git a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/VUART.vue b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/VUART.vue
index 7311cfa2f..9153ecfc4 100644
--- a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/VUART.vue
+++ b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/VUART.vue
@@ -6,7 +6,14 @@
 
         <b-row class="align-items-center my-2 mt-4">
           <b-col md="2">
-            <label>VM name: </label>
+            <label>
+              <n-popover trigger="hover" placement="top-start">
+                <template #trigger>
+                    <IconInfo/>
+                </template>
+                <span v-html="this.VMConfigType.properties.name.description"></span>
+              </n-popover>VM name:
+            </label>
           </b-col>
           <b-col md="4">
             <b-form-select :state="validation(VUARTConn.endpoint[0].vm_name)" v-model="VUARTConn.endpoint[0].vm_name" :options="vmNames"></b-form-select>
@@ -24,7 +31,14 @@
 
         <b-row class="align-items-center my-2">
           <b-col md="2">
-            <label>VM name: </label>
+            <label>
+              <n-popover trigger="hover" placement="top-start">
+                <template #trigger>
+                    <IconInfo/>
+                </template>
+                <span v-html="this.VMConfigType.properties.name.description"></span>
+              </n-popover>VM name:
+            </label>
           </b-col>
           <b-col md="4">
             <b-form-select :state="validation(VUARTConn.endpoint[1].vm_name)" v-model="VUARTConn.endpoint[1].vm_name" :options="vmNames"></b-form-select>
@@ -36,7 +50,14 @@
 
         <b-row class="align-items-center my-2">
           <b-col md="2">
-            <label>Type: </label>
+            <label>
+              <n-popover trigger="hover" placement="top-start">
+                <template #trigger>
+                    <IconInfo/>
+                </template>
+                <span v-html="this.VuartConnectionType.properties.type.description"></span>
+              </n-popover>Type: 
+            </label>
           </b-col>
           <b-col md="4">
             <b-form-select :state="validation(VUARTConn.type)" v-model="VUARTConn.type" :options="VuartType"></b-form-select>
@@ -53,8 +74,23 @@
             <b-col sm="4">
               Virtual UART port:
             </b-col>
-            <b-col sm="4" v-if="VUARTConn.type === 'legacy'"> I/O address: </b-col>
-            <b-col sm="4" v-else-if="VUARTConn.type === 'pci'"> VBDF </b-col>
+            <b-col sm="4" v-if="VUARTConn.type === 'legacy'">
+              <n-popover trigger="hover" placement="top-start">
+                <template #trigger>
+                    <IconInfo/>
+                </template>
+                <span v-html="this.VuartEndpointType.io_port.description"></span>
+              </n-popover>
+              I/O address:
+            </b-col>
+            <b-col sm="4" v-else-if="VUARTConn.type === 'pci'">
+              <n-popover trigger="hover" placement="top-start">
+                  <template #trigger>
+                      <IconInfo/>
+                  </template>
+                  <span>{{this.VuartEndpointType.vbdf.description}}</span>
+                </n-popover>VBDF
+            </b-col>
           </b-row>
           <b-row class="justify-content-sm-start align-items-center">
             <b-col sm="4"> Connection_{{ index + 1 }}-{{ VUARTConn.endpoint[0].vm_name }} </b-col>
@@ -104,11 +140,12 @@ 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: 'VUART',
-  components: {Icon, Plus, Minus},
+  components: {Icon, Plus, Minus, IconInfo},
   props: {
     ...fieldProps,
     // Todo: use ui:fieldProps to pass getScenarioData function
@@ -130,7 +167,10 @@ export default {
   data() {
     return {
       VuartType: this.rootSchema.definitions['VuartType']['enum'],
+      VuartEndpointType: this.rootSchema.definitions['VuartEndpointType']['properties'],
       IOPortDefault: this.rootSchema.definitions['VuartEndpointType']['properties']['io_port']['default'],
+      VMConfigType: this.rootSchema.definitions['VMConfigType'],
+      VuartConnectionType: this.rootSchema.definitions['VuartConnectionType'],
       defaultVal: vueUtils.getPathVal(this.rootFormData, this.curNodePath)
     };
   },
@@ -168,12 +208,12 @@ export default {
         "endpoint": [
           {
             "vm_name": "",
-            "io_port": this.IOPortDefault,
+            "io_port": "",
             "vbdf": "",
           },
           {
             "vm_name": "",
-            "io_port": this.IOPortDefault,
+            "io_port": "",
             "vbdf": "",
           }
         ]