config_tools: add custom cpu_affinity component

add custom cpu_affinity component

Tracked-On: #6691
Signed-off-by: Weiyi Feng <weiyix.feng@intel.com>

misc/config_tools/configurator/packages/configurator/package.json

@@ -24,6 +24,7 @@
     "ajv-i18n": "^4.2.0",
     "bootstrap": "^5.1.3",
     "bootstrap-vue-3": "^0.1.10",
+    "encoding": "^0.1.13",
     "js-base64": "^3.7.2",
     "lodash": "^4.17.21",
     "naive-ui": "^2.28.1",

misc/config_tools/configurator/packages/configurator/src/pages/Config.vue

@@ -34,7 +34,8 @@
     </b-accordion-item>
     <Banner>
       <div style="position: relative">
-        <button type="button" :disabled="!scenarioHaveData" class="btn btn-primary btn-lg SaveButton" @click="saveScenario">
+        <button type="button" :disabled="!scenarioHaveData" class="btn btn-primary btn-lg SaveButton"
+                @click="saveScenario">
           Save Scenario and Launch Scripts
         </button>
       </div>
@@ -94,6 +95,7 @@ export default {
   props: ['WorkingFolder'],
   mounted() {
     this.updateCurrentFormSchema()
+    window.getCurrentFormSchemaData = this.getCurrentFormSchemaData
     window.getCurrentScenarioData = this.getCurrentScenarioData
   },
   data() {
@@ -147,6 +149,9 @@ export default {
       this.updateCurrentFormSchema()
       this.updateCurrentFormData()
     },
+    getCurrentFormSchemaData() {
+      return this.currentFormSchema
+    },
     getCurrentScenarioData() {
       return this.scenario
     },
@@ -189,7 +194,7 @@ export default {
       let vmConfigcurrent = []
       let postvmlist = []
       let isserivevm = false
-      let msg=''
+      let msg = ''
       this.scenario.vm.map((vmConfig, vmIndex) => {
         if (vmConfig['@id'] === this.activeVMID) {
           currentVMIndex = vmIndex
@@ -209,7 +214,7 @@ export default {
       confirm(msg).then((r) => {
         if (r) {
           if (isserivevm) {
-            for (let i=postvmlist.length-1; i>=0; i--) {
+            for (let i = postvmlist.length - 1; i >= 0; i--) {
               this.scenario.vm.splice(postvmlist[i], 1);
             }
           }
@@ -283,29 +288,29 @@ export default {
       debugger
       // begin write down and verify
       configurator.writeFile(this.WorkingFolder + 'scenario.xml', scenarioXMLData)
-        .then(() => {
+          .then(() => {
-          step = 1
+            step = 1
-          configurator.pythonObject.validateScenario(this.board.content, scenarioXMLData)
+            configurator.pythonObject.validateScenario(this.board.content, scenarioXMLData)
-        })
+          })
-        .then(() => {
+          .then(() => {
             step = 2
             let launchScripts = configurator.pythonObject.generateLaunchScript(this.board.content, scenarioXMLData)
             for (let filename in launchScripts) {
               configurator.writeFile(this.WorkingFolder + filename, launchScripts[filename])
             }
-        })
+          })
-        .then(() => {
+          .then(() => {
             alert(`${msg.join('')} \n All files successfully saved to your working folder ${this.WorkingFolder}`)
-        })
+          })
-        .catch((err) => {
+          .catch((err) => {
-          console.log(err)
+            console.log(err)
-          let outmsg = ''
+            let outmsg = ''
-          for (var i = 0; i < step; i++)
+            for (var i = 0; i < step; i++)
-            outmsg += msg[i]
+              outmsg += msg[i]
-          for (i = step; i < 3; i++)
+            for (i = step; i < 3; i++)
-            outmsg += errmsg[i]
+              outmsg += errmsg[i]
-          alert(`${outmsg} \n Please check your configuration`)
+            alert(`${outmsg} \n Please check your configuration`)
-        })
+          })
     }
   }
 }
@@ -316,7 +321,7 @@ export default {
   position: absolute;
   right: 1rem;
   top: 64px;
-  z-index: 3;
+  z-index: 5;
 }
 
 </style>

misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm.vue

@@ -57,6 +57,7 @@ import {Icon} from "@vicons/utils";
 import {Minus} from "@vicons/fa"
 import localizeEn from 'ajv-i18n/localize/en';
 import IVSHMEM_REGION from "./ConfigForm/CustomWidget/IVSHMEM_REGION.vue";
+import cpu_affinity from "./ConfigForm/CustomWidget/cpu_affinity.vue";
 
 i18n.useLocal(localizeEn);
 export default {
@@ -78,6 +79,9 @@ export default {
         "labelSuffix": "："
       },
       uiSchema: {
+        "cpu_affinity": {
+          'ui:field': cpu_affinity
+        },
         "FEATURES": {
           "IVSHMEM": {
             "ui:title": "InterVM shared memory",

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

@@ -0,0 +1,134 @@
+<template>
+  <div style="border:1px solid gray;background: #F5F5F5;padding: 1rem">
+    <b>{{ uiOptions.title }}</b>
+    <div class="p-4">
+      <b-row>
+        <b-col></b-col>
+        <b-col></b-col>
+        <b-col>Virtual CPU ID</b-col>
+        <b-col class="ps-5">Real-time vCPU:</b-col>
+        <b-col></b-col>
+      </b-row>
+      <b-row class="align-items-center"
+             v-for="(cpu,index) in defaultVal.pcpu">
+        <b-col>pCPU ID</b-col>
+        <b-col>
+          <b-form-select v-model="cpu.pcpu_id" :options="pcpuid_enum"></b-form-select>
+        </b-col>
+        <b-col class="p-3 col-3">
+          <div style="padding:9px;border-radius: 9px;width: 100%;border: 1px solid dimgray;background: lightgray;">
+            {{ vCPUName(index) }}
+          </div>
+        </b-col>
+        <b-col class="p-3">
+          <b-form-checkbox v-model="cpu.real_time_vcpu"/>
+        </b-col>
+        <b-col>
+          <div class="ToolSet">
+            <div @click="addPCPU(index)" :class="{'d-none': (this.defaultVal.pcpu.length-1)!==index}">
+              <Icon size="18px">
+                <Plus/>
+              </Icon>
+            </div>
+            <div @click="removePCPU(index)">
+              <Icon size="18px">
+                <Minus/>
+              </Icon>
+            </div>
+          </div>
+        </b-col>
+      </b-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  fieldProps,
+  vueUtils,
+  formUtils,
+  schemaValidate
+} from '@lljj/vue3-form-naive';
+import _ from 'lodash'
+import {Icon} from "@vicons/utils";
+import {Plus, Minus} from '@vicons/fa'
+import {BFormInput} from "bootstrap-vue-3";
+
+export default {
+  name: "cpu_affinity",
+  components: {BFormInput, Icon, Plus, Minus},
+  props: {
+    ...fieldProps,
+  },
+  watch: {
+    rootFormData: {
+      handler(newValue, oldValue) {
+        this.defaultVal = vueUtils.getPathVal(newValue, this.curNodePath)
+      },
+      deep: true
+    },
+    defaultVal: {
+      handler(newValue, oldValue) {
+        vueUtils.setPathVal(this.rootFormData, this.curNodePath, newValue);
+      },
+      deep: true
+    }
+  },
+  computed: {
+    pcpuid_enum() {
+      return window.getCurrentFormSchemaData().BasicConfigType.definitions.CPUAffinityConfiguration.properties.pcpu_id.enum
+    },
+    uiOptions() {
+      return formUtils.getUiOptions({
+        schema: this.schema,
+        uiSchema: this.uiSchema
+      });
+    },
+  },
+  data() {
+    return {
+      defaultVal: vueUtils.getPathVal(this.rootFormData, this.curNodePath)
+    }
+  },
+  mounted() {
+    if (!_.isArray(this.defaultVal.pcpu)) {
+      this.defaultVal.pcpu = []
+      this.addPCPU(-1)
+    }
+  },
+  methods: {
+    vCPUName(index) {
+      return `${this.rootFormData.name} vCPU ${index}`
+    },
+    addPCPU(index) {
+      this.defaultVal.pcpu.splice(index + 1, 0, {pcpu_id: null, real_time_vcpu: false})
+    },
+    removePCPU(index) {
+      if (this.defaultVal.pcpu.length === 1) {
+        // prevent delete for the last one
+        return
+      }
+      this.defaultVal.pcpu.splice(index, 1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.ToolSet {
+  display: flex;
+  justify-content: end;
+  gap: 0.5rem;
+  max-width: 5rem;
+  width: 100%;
+}
+
+.ToolSet div {
+  cursor: pointer;
+  border: 1px solid gray;
+  border-radius: 3px;
+  background: #f9f9f9;
+  padding: 5px 5px 3px;
+}
+</style>

misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/uiSchemaGenerate.py

@@ -0,0 +1,30 @@
+import json
+
+
+def generate_ui_schema(cur_node_name):
+    def _handle(node_path_list: list):
+        val = node_path_list[0]
+        if val == '0':
+            val = 'items'
+        if len(node_path_list) == 1:
+            return {
+                val: {}
+            }
+        node_path_list = node_path_list[1:]
+
+        return {
+            val: _handle(node_path_list)
+        }
+
+    path_list = cur_node_name.split('.')
+    return _handle(path_list)
+
+
+def main():
+    name = 'cpu_affinity.pcpu.0.pcpu_id'
+    result = generate_ui_schema(name)
+    print(json.dumps(result, indent='  '))
+
+
+if __name__ == '__main__':
+    main()

misc/config_tools/configurator/yarn.lock

@@ -427,6 +427,13 @@ diff-sequences@^27.5.1:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
   integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
 
+encoding@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 esbuild-android-64@0.14.38:
   version "0.14.38"
   resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.38.tgz#5b94a1306df31d55055f64a62ff6b763a47b7f64"
@@ -619,6 +626,13 @@ highlight.js@^11.5.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.5.1.tgz#027c24e4509e2f4dcd00b4a6dda542ce0a1f7aea"
   integrity sha512-LKzHqnxr4CrD2YsNoIf/o5nJ09j4yi/GcH5BnYz9UnVpZdS4ucMgvP61TDty5xJcFGRjnH4DpujkS9bHT3hq0Q==
 
+iconv-lite@^0.6.2:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 immutable@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
@@ -814,6 +828,11 @@ rollup@^2.59.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+"safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
 sass@^1.50.0:
   version "1.51.0"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.51.0.tgz#25ea36cf819581fe1fe8329e8c3a4eaaf70d2845"