config_tools: add custom CAT widget

add custom CAT widget Tracked-On: #6691 Signed-off-by: Weiyi Feng <weiyix.feng@intel.com>
2022-05-22 17:15:34 +08:00 · 2022-05-22 17:15:34 +08:00 · 84550004dd
parent 8ffbcc22ce
commit 84550004dd
10 changed files with 632 additions and 34 deletions
--- a/misc/config_tools/configurator/packages/configurator/package.json
+++ b/misc/config_tools/configurator/packages/configurator/package.json
@ -21,6 +21,7 @@
    "@tauri-apps/api": "^1.0.0-rc.4",
    "@vicons/fa": "^0.12.0",
    "@vicons/utils": "^0.1.4",
+    "@vueform/slider": "^2.0.10",
    "ajv-i18n": "^4.2.0",
    "bootstrap": "^5.1.3",
    "bootstrap-vue-3": "^0.1.10",
--- a/misc/config_tools/configurator/packages/configurator/src/main.js
+++ b/misc/config_tools/configurator/packages/configurator/src/main.js
@ -1,4 +1,5 @@
 const isTauri = !!window.__TAURI_IPC__;
+window.isDev = process.env.NODE_ENV === 'development';

 if (isTauri) {
    let openCount = 0
--- a/misc/config_tools/configurator/packages/configurator/src/pages/Config.vue
+++ b/misc/config_tools/configurator/packages/configurator/src/pages/Config.vue
@ -16,10 +16,12 @@
        <div class="d-flex flex-column">
          <div class="p-1 ps-3 fs-4">1. Import a board configuration file</div>
          <div class="py-2" style="letter-spacing: 0.49px;">
-            {{currentBoardFile}}
+            {{ currentBoardFile }}
          </div>
          <div class="py-2" style="letter-spacing: 0.49px;">
-            {{currentBoardManu}}  {{CurrentBoardProd}}
+            {{ currentBoardManu }}
+            <br/>
+            {{ CurrentBoardProd }}
          </div>
        </div>
      </template>
@ -38,7 +40,8 @@
          </div>
        </div>
      </template>
-      <Scenario v-if="boardHaveData" :scenario="scenario" :WorkingFolder="WorkingFolder" @scenarioUpdate="scenarioUpdate"/>
+      <Scenario v-if="boardHaveData" :scenario="scenario" :WorkingFolder="WorkingFolder"
+                @scenarioUpdate="scenarioUpdate"/>
    </b-accordion-item>
    <Banner>
      <div style="position: relative">
@ -66,7 +69,7 @@
          />
        </div>
        <div v-if="errors">
-          <div class="px-4" style="color: red" v-for="error in errors">{{ error.message }}</div>
+          <div class="px-4" style="color: red" v-for="error in errors">{{ error }}</div>
        </div>
        <div class="p-4">
          <ConfigForm
@ -100,13 +103,15 @@ import configurator from "../lib/acrn";
 export default {
  name: "Config",
  components: {ConfigForm, TabBox, Scenario, Icon, Board, Banner, AngleLeft},
-  props: { WorkingFolder: {type: String},
-           isNewConfig: {type: String}
-         },
+  props: {
+    WorkingFolder: {type: String},
+    isNewConfig: {type: String}
+  },
  mounted() {
    this.updateCurrentFormSchema()
    window.getCurrentFormSchemaData = this.getCurrentFormSchemaData
    window.getCurrentScenarioData = this.getCurrentScenarioData
+    window.getBoardData = this.getBoardData
    this.showFlag = this.isNewConfig === 'true'
  },
  data() {
@ -176,6 +181,7 @@ export default {
      }
    },
    scenarioUpdate(scenarioData) {
+      this.errors = []
      this.scenario = scenarioData;
      this.showFlag = false;
      this.updateCurrentFormSchema()
@ -187,6 +193,9 @@ export default {
    getCurrentScenarioData() {
      return this.scenario
    },
+    getBoardData() {
+      return this.board
+    },
    updateCurrentFormData() {
      if (this.activeVMID === -1) {
        this.currentFormData = this.scenario.hv;
@ -246,7 +255,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--) {
              let launchScriptsname = this.WorkingFolder + `launch_user_vm_id${postvmlist[i]}.sh`
              this.removeLaunchScript(launchScriptsname);
              this.scenario.vm.splice(postvmlist[i], 1);
@ -266,12 +275,12 @@ export default {
    removeLaunchScript(filePath) {
      console.log(filePath)
      configurator.isFile(filePath)
-      .then((isFile) => {
-        if (isFile) {
-          configurator.removeFile(filePath)
-          .catch((err) => alert(`Launch script is not exist: ${filePath}`))
-        }
-      })
+          .then((isFile) => {
+            if (isFile) {
+              configurator.removeFile(filePath)
+                  .catch((err) => alert(`Launch script is not exist: ${filePath}`))
+            }
+          })
    },
    scenarioConfigFormDataUpdate(vmid, data) {
      if (vmid === -1) {
@ -343,11 +352,11 @@ export default {
      let errorFlag = false
      errorFlag = this.confirmVmName()
      this.assignVMID()
-      let msg = [ "Settings validated\n",
-	      "scenario xml saved\n",
+      let msg = ["Settings validated\n",
+        "scenario xml saved\n",
        "launch scripts generated\n"];
-      let errmsg = [ "Settings validate failed\n",
-		    "scenario xml save failed\n",
+      let errmsg = ["Settings validate failed\n",
+        "scenario xml save failed\n",
        "launch scripts generate failed\n"];
      let stepDone = 0
      let totalMsg = msg.length // msg and errMsg must be same length.
@ -381,8 +390,8 @@ export default {
        console.log("validate settings...")
        try {
          this.errors = configurator.pythonObject.validateScenario(this.board.content, scenarioXMLData)
-          if (this.errors.length != 0) {
-              throw "validation failed"
+          if (this.errors.length !== 0) {
+            throw "validation failed"
          }
          console.log("validation ok")
          stepDone = 1
@ -398,7 +407,7 @@ export default {
            stepDone = 3
          }
          alert(`${msg.slice(0,stepDone).join('')} \n All files successfully saved to your working folder ${this.WorkingFolder}`)
-        } catch(err) {
+        } catch (err) {
          console.log("error" + err)
          let outmsg = ''
          for (var i = 0; i < stepDone; i++)
--- a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm.vue
+++ b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm.vue
@ -62,11 +62,12 @@ import VUART from "./ConfigForm/CustomWidget/VUART.vue";
 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";
 i18n.useLocal(localizeEn);
+
 export default {
  name: "ConfigForm",
-  components: {Icon, Minus, VueForm},
+  components: {Icon, Minus, VueForm, CAT, VUART, cpu_affinity, IVSHMEM_REGION},
  emits: ['scenarioConfigFormDataUpdate', 'deleteVM', 'vmNameChange'],
  props: {
    currentActiveVMID: {type: Number},
@ -100,6 +101,9 @@ export default {
        "cpu_affinity": {
          'ui:field': cpu_affinity
        },
+        CACHE_REGION: {
+          "ui:field": CAT
+        },
        "FEATURES": {
          "IVSHMEM": {
            "ui:title": "InterVM shared memory",
@ -128,7 +132,7 @@ export default {
      let newID = newValue.hasOwnProperty('@id') ? newValue['@id'] : -1;
      let oldID = oldValue.hasOwnProperty('@id') ? oldValue['@id'] : -1;
      if (newID === oldID) {
-        if (oldValue.name != newValue.name) {
+        if (oldValue.name !== newValue.name) {
          this.$emit('vmNameChange', newValue.name, oldValue.name)
        }

--- 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
@ -0,0 +1,418 @@
+<template>
+  <b>Memory Isolation for Performance</b>
+
+  <div class="py-3">
+    <b-form-checkbox v-model="SSRAM_ENABLED" :value="'y'" :uncheckedValue="'n'">Software SRAM (for real-time apps)</b-form-checkbox>
+  </div>
+  <div class="d-flex gap-2 flex-column">
+    <text>Intel Resource Director Technology</text>
+    <b-form-checkbox v-model="RDT_ENABLED" :value="'y'" :uncheckedValue="'n'">
+      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'">
+        Code and Data Prioritization
+      </b-form-checkbox>
+      <b-form-checkbox v-model="VCAT_ENABLED" :value="'y'" :uncheckedValue="'n'">
+        Virtual Cache Allocation Technology (VCAT)
+      </b-form-checkbox>
+    </div>
+  </div>
+  <p>
+    L3 Cache Allocation Technology
+    <br/>
+    Drag the ends of the boxes to cover the cache chunks you want to allocate to specific VMs. If you have a real-time
+    VM,ensure its cache chunks do not overlap with any other VM's cache chunks.
+  </p>
+  <div class="py-4" v-for="CACHE_ALLOCATION in CAT_INFO" v-if="RDT_ENABLED==='y'">
+    <div class="d-flex justify-content-between py-2 align-items-center">
+      <text>
+        L{{ CACHE_ALLOCATION.level }} Cache Allocation Technology {{
+          cat_level_region_sum[CACHE_ALLOCATION.level].count > 1 ? ' Module ' + cat_level_region_sum[CACHE_ALLOCATION.level][CACHE_ALLOCATION.id] : ''
+        }}
+        (pCPU : {{ Math.min(...CACHE_ALLOCATION.processors) }}~{{ Math.max(...CACHE_ALLOCATION.processors) }})
+      </text>
+      <b-button>
+        Apply basic real-time defaults
+      </b-button>
+    </div>
+    <div class="d-flex">
+      <div class="leftTitle">
+        <!--left title-->
+        <div v-for="(POLICY,index) in CACHE_ALLOCATION.data.POLICY">
+          <div v-if="index===0&&CACHE_ALLOCATION.real_time_count>0">Real-time</div>
+          <div v-if="index===CACHE_ALLOCATION.real_time_count">Standard</div>
+          {{ POLICY.VM }} vCPU {{ POLICY.VCPU }}{{ POLICY.TYPE === 'Unified' ? '' : "_" + POLICY.TYPE }}
+        </div>
+      </div>
+      <div class="flex-grow-1">
+        <div class="d-flex rightTitle">
+          <!--right title-->
+          <div v-for="n in CACHE_ALLOCATION.capacity_mask_length" class="chunkTitle"
+               :style="{width: (100/(CACHE_ALLOCATION.capacity_mask_length))+'%'}"
+          >
+            chunk{{ CACHE_ALLOCATION.capacity_mask_length - n }}
+          </div>
+        </div>
+        <div>
+          <!--right table-->
+          <div v-for="(POLICY,index) in CACHE_ALLOCATION.data.POLICY">
+            <div style="height: 33px;width: 100%;background: #bfbfbf"
+                 v-if="index===CACHE_ALLOCATION.real_time_count && CACHE_ALLOCATION.real_time_count>0"></div>
+            <HexBlockRangeSelector
+                v-model="POLICY.CLOS_MASK"
+                :max="CACHE_ALLOCATION.capacity_mask_length"
+            />
+          </div>
+        </div>
+        <div class="pt-4 ps-2">
+          Note: each chunk is {{ CACHE_ALLOCATION.cache_size / CACHE_ALLOCATION.capacity_mask_length / 1024 }}KB
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {vueUtils, fieldProps} from "@lljj/vue3-form-naive";
+import _ from "lodash";
+import HexBlockRangeSelector from "./CAT/HexBlockRangeSelector.vue";
+
+
+// noinspection JSUnusedLocalSymbols
+export default {
+  name: "CAT",
+  components: {HexBlockRangeSelector},
+  props: {
+    ...fieldProps
+  },
+  mounted() {
+    this.updateCatInfo()
+  },
+  computed: {
+    VCAT_ENABLED:{
+      get() {
+        return vueUtils.getPathVal(this.rootFormData, 'FEATURES.RDT.VCAT_ENABLED')
+      },
+      set(value) {
+        vueUtils.setPathVal(this.rootFormData, 'FEATURES.RDT.VCAT_ENABLED', value)
+      }
+    },
+    SSRAM_ENABLED: {
+      get() {
+        return vueUtils.getPathVal(this.rootFormData, 'FEATURES.SSRAM.SSRAM_ENABLED')
+      },
+      set(value) {
+        vueUtils.setPathVal(this.rootFormData, 'FEATURES.SSRAM.SSRAM_ENABLED', value)
+      }
+    },
+    RDT_ENABLED: {
+      get() {
+        return vueUtils.getPathVal(this.rootFormData, 'FEATURES.RDT.RDT_ENABLED')
+      },
+      set(value) {
+        vueUtils.setPathVal(this.rootFormData, 'FEATURES.RDT.RDT_ENABLED', value)
+      }
+    },
+    CDP_ENABLED: {
+      get() {
+        return vueUtils.getPathVal(this.rootFormData, 'FEATURES.RDT.CDP_ENABLED')
+      },
+      set(value) {
+        vueUtils.setPathVal(this.rootFormData, 'FEATURES.RDT.CDP_ENABLED', value)
+        this.updateCatInfo()
+      }
+    }
+  },
+  watch: {
+    CAT_INFO: {
+      handler(newValue, _) {
+        let data = [];
+        for (let i = 0; i < newValue.length; i++) {
+          data.push(newValue[i].data)
+        }
+        this.defaultVal.CACHE_ALLOCATION = data
+      },
+      deep: true
+    },
+  },
+  data() {
+    return {
+      defaultVal: vueUtils.getPathVal(this.rootFormData, this.curNodePath),
+      CAT_INFO: {},
+      cat_level_region_sum: {}
+    }
+  },
+  methods: {
+    updateCatInfo() {
+      // Intel Resource Director Tech
+      // Intel Resource Director Technology (RDT) provides cache and memory bandwidth allocation features. The features can be used to improve an application's real-time performance.
+      //
+      //
+      // FEATURES.RDT.RDT_ENABLED
+      // Intel Resource Director Tech：
+      //
+      // FEATURES.RDT.CDP_ENABLED
+      // Code and Data Prioritization：
+      //
+      // FEATURES.RDT.VCAT_ENABLED
+      // Virtual Cache Allocation Tech：
+      //
+      // Software SRAM
+      // Configure Software SRAM. This feature reserves memory buffers as always-cached memory to improve an application's real-time performance.
+      //
+      //
+      // FEATURES.SSRAM.SSRAM_ENABLED
+      // Software SRAM：
+      // get CAT info from board xml
+      let board_cat_info = window.getBoardData().CAT_INFO;
+      let CDP_ENABLED = this.CDP_ENABLED === 'y'
+
+      // noinspection JSUnusedLocalSymbols
+      let board_cat_info_example = [
+        {
+          "id": "0x0", "level": 3, "type": "3", "cache_size": 31457280, "capacity_mask_length": 12,
+          "processors": [0, 8, 1, 9, 2, 10, 3, 11, 4, 12, 5, 13, 6, 14, 7, 15]
+        }
+      ]
+
+      // get scenario   pcpu config
+      let pcpu_vms = {}
+      // noinspection JSUnusedLocalSymbols
+      let pcpu_vms_example = {
+        0: [
+          {"VM": "POST_VM_1", "VCPU": 0},
+          {"VM": "POST_VM_2", "VCPU": 2}
+        ],
+        1: [
+          {"VM": "POST_VM_1", "VCPU": 1},
+          {"VM": "POST_VM_5", "VCPU": 2}
+        ]
+      }
+      window.getCurrentScenarioData().vm.map((vmConfig) => {
+        if (
+            !vmConfig.hasOwnProperty('cpu_affinity') ||
+            !vmConfig.cpu_affinity.hasOwnProperty('pcpu') ||
+            !_.isArray(vmConfig.cpu_affinity.pcpu)
+        ) {
+          return
+        }
+
+        vmConfig.cpu_affinity.pcpu.map((pcpu, index) => {
+          if (!pcpu_vms.hasOwnProperty(pcpu.pcpu_id)) {
+            pcpu_vms[pcpu.pcpu_id] = {'y': [], 'n': []}
+          }
+          pcpu_vms[pcpu.pcpu_id][
+              // old scenario may not have this attr
+              pcpu.real_time_vcpu ?
+                  // if it had this attr, use it
+                  pcpu.real_time_vcpu :
+                  // doesn't have it, auto set to no
+                  'n'
+              ].push({
+            "VM": vmConfig.name,
+            "VCPU": index
+          })
+        })
+      })
+
+
+      // noinspection JSUnusedLocalSymbols
+      let defaultVal_data_example = {
+        "CACHE_ALLOCATION": [
+          {
+            "CACHE_ID": "0x8", "CACHE_LEVEL": 2, "POLICY": [
+              {"VM": "POST_RT_VM1", "VCPU": 0, "TYPE": "Unified", "CLOS_MASK": "0x0fff"},
+              {"VM": "POST_RT_VM1", "VCPU": 1, "TYPE": "Unified", "CLOS_MASK": "0x0fff"},
+              {"VM": "VM4-RTVM2", "VCPU": 0, "TYPE": "Unified", "CLOS_MASK": "0x0fff"},
+              {"VM": "VM4-RTVM2", "VCPU": 1, "TYPE": "Unified", "CLOS_MASK": "0x0fff"}
+            ]
+          },
+          {
+            "CACHE_ID": "0x9", "CACHE_LEVEL": 2, "POLICY": [
+              {"VM": "VM5-RTVM3", "VCPU": 0, "TYPE": "Unified", "CLOS_MASK": "0x0fff"},
+              {"VM": "VM5-RTVM3", "VCPU": 1, "TYPE": "Unified", "CLOS_MASK": "0x0fff"},
+              {"VM": "VM6-RTVM4", "VCPU": 0, "TYPE": "Unified", "CLOS_MASK": "0x0fff"},
+              {"VM": "VM6-RTVM4", "VCPU": 1, "TYPE": "Unified", "CLOS_MASK": "0x0fff"}
+            ]
+          }
+        ]
+      }
+
+      // load data from scenario
+      let scenario_cat_data = {}
+      // noinspection JSUnresolvedVariable
+      if (this.defaultVal.hasOwnProperty('CACHE_ALLOCATION') && _.isArray(this.defaultVal.CACHE_ALLOCATION)) {
+        // noinspection JSUnresolvedVariable
+        this.defaultVal.CACHE_ALLOCATION.map((cache_region) => {
+          if (!scenario_cat_data.hasOwnProperty(cache_region['CACHE_LEVEL'])) {
+            scenario_cat_data[cache_region['CACHE_LEVEL']] = {}
+          }
+          scenario_cat_data[cache_region['CACHE_LEVEL']][cache_region['CACHE_ID']] = cache_region
+        })
+      }
+
+      // noinspection JSUnusedLocalSymbols
+      let scenario_cat_data_example = {
+        2: {
+          '0x7': {
+            "CACHE_ID": "0x7", "CACHE_LEVEL": 2, "POLICY": [
+              {"VM": "POST_RT_VM1", "VCPU": 0, "TYPE": "Unified", "CLOS_MASK": "0x0fff"}
+            ]
+          },
+          '0x8': {
+            "CACHE_ID": "0x8", "CACHE_LEVEL": 2, "POLICY": [
+              {"VM": "POST_RT_VM1", "VCPU": 0, "TYPE": "Unified", "CLOS_MASK": "0x0fff"}
+            ]
+          }
+        },
+        3: {
+          '0x0': {}
+        }
+      }
+
+      this.cat_level_region_sum = {}
+      // noinspection JSUnusedLocalSymbols
+      let cat_level_region_sum_example = {
+        2: {
+          count: 2,
+          '0x8': 1,
+          '0x9': 2
+        },
+        3: {
+          count: 1,
+          '0x0': 1
+        }
+      }
+      board_cat_info.map((cat_region_info) => {
+        // count regions for each cat level
+        if (!this.cat_level_region_sum.hasOwnProperty(cat_region_info.level)) {
+          this.cat_level_region_sum[cat_region_info.level] = {count: 0};
+        }
+        this.cat_level_region_sum[cat_region_info.level].count += 1
+        this.cat_level_region_sum[cat_region_info.level][cat_region_info.id] = this.cat_level_region_sum[cat_region_info.level].count;
+
+        // get vm cpu clos_mask from scenario
+        let vmCPUClosMasks = {}
+        // noinspection JSUnusedLocalSymbols
+        let vmCPUClosMasks_example = {
+          'VM_NAME': {
+            0: {"Unified": '0xfff'},
+            1: {"Code": '0xff0', "Data": '0x00f'} // CDP_ENABLED
+          }
+        }
+        if (scenario_cat_data.hasOwnProperty(cat_region_info.level) && scenario_cat_data[cat_region_info.level].hasOwnProperty(cat_region_info.id)) {
+          let current_region_scenario_cat_data = scenario_cat_data[cat_region_info.level][cat_region_info.id];
+          // noinspection JSUnusedLocalSymbols
+          let current_region_scenario_cat_data_example = {
+            "CACHE_ID": "0x7", "CACHE_LEVEL": 2, "POLICY": [
+              {"VM": "POST_RT_VM1", "VCPU": 0, "TYPE": "Unified", "CLOS_MASK": "0x0fff"}
+            ]
+          }
+          for (let i = 0; i < current_region_scenario_cat_data.POLICY.length; i++) {
+            let current_policies = current_region_scenario_cat_data.POLICY[i]
+            if (!vmCPUClosMasks.hasOwnProperty(current_policies.VM)) {
+              vmCPUClosMasks[current_policies.VM] = {}
+            }
+            if (!vmCPUClosMasks[current_policies.VM].hasOwnProperty(current_policies.VCPU)) {
+              vmCPUClosMasks[current_policies.VM][current_policies.VCPU] = {}
+            }
+            if (["Unified", "Code", "Data"].indexOf(current_policies.TYPE) > 0) {
+              console.log(current_policies.TYPE, current_policies.CLOS_MASK)
+              vmCPUClosMasks[current_policies.VM][current_policies.VCPU][current_policies.TYPE] = current_policies.CLOS_MASK
+            }
+          }
+        }
+
+        cat_region_info['data'] = {
+          "CACHE_ID": cat_region_info.id,
+          "CACHE_LEVEL": cat_region_info.level,
+          "POLICY": []
+        }
+
+        function addCATPolicy(cpu_policies_line, line_type) {
+          cpu_policies_line['TYPE'] = line_type;
+          let clos_mask = "";
+          if (
+              vmCPUClosMasks.hasOwnProperty(cpu_policies_line.VM) &&
+              vmCPUClosMasks[cpu_policies_line.VM].hasOwnProperty(cpu_policies_line.VCPU) &&
+              vmCPUClosMasks[cpu_policies_line.VM][cpu_policies_line.VCPU].hasOwnProperty(line_type)
+          ) {
+            clos_mask = vmCPUClosMasks[cpu_policies_line.VM][cpu_policies_line.VCPU][line_type];
+          } else {
+            clos_mask = "0x" + parseInt('1'.repeat(cat_region_info.capacity_mask_length), 2).toString(16);
+          }
+          cpu_policies_line['CLOS_MASK'] = clos_mask;
+          cat_region_info.data.POLICY.push(cpu_policies_line)
+        }
+
+        function addPolicy(cpu_policies) {
+          // noinspection JSUnusedLocalSymbols
+          let cpu_policies_example = [
+            {"VM": "POST_VM_1", "VCPU": 0},
+            {"VM": "POST_VM_2", "VCPU": 2}
+          ]
+          for (let j = 0; j < cpu_policies.length; j++) {
+            let cpu_policies_line = cpu_policies[j];
+            if (CDP_ENABLED) {
+              addCATPolicy(cpu_policies_line, "Code")
+              addCATPolicy(_.cloneDeep(cpu_policies_line), "Data")
+            } else {
+              addCATPolicy(cpu_policies_line, "Unified")
+            }
+          }
+          return CDP_ENABLED ? 2 * cpu_policies.length : cpu_policies.length
+        }
+
+        cat_region_info.real_time_count = 0
+        for (let i = 0; i < cat_region_info.processors.length; i++) {
+          let cpu_policies = _.cloneDeep(pcpu_vms[cat_region_info.processors[i]] ? pcpu_vms[cat_region_info.processors[i]]['y'] || [] : []);
+          cat_region_info.real_time_count += addPolicy(cpu_policies)
+        }
+        for (let i = 0; i < cat_region_info.processors.length; i++) {
+          let cpu_policies = _.cloneDeep(pcpu_vms[cat_region_info.processors[i]] ? pcpu_vms[cat_region_info.processors[i]]['n'] || [] : []);
+          addPolicy(cpu_policies)
+        }
+      })
+
+      this.CAT_INFO = board_cat_info;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.leftTitle {
+  min-width: 180px;
+  white-space: nowrap;
+  padding-right: 1rem;
+}
+
+.leftTitle div {
+  line-height: 33px;
+}
+
+.leftTitle div div {
+  font-weight: 800;
+}
+
+.chunkTitle {
+  border: 1px solid white;
+  padding: 7px 0 12px;
+}
+
+.rightTitle {
+  background: #4A6AAA;
+  color: white;
+  text-align: center;
+  font-size: 12px;
+}
+
+.form-check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+</style>
--- a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/CAT/HexBlockRangeSelector.vue
+++ b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/CAT/HexBlockRangeSelector.vue
@ -0,0 +1,118 @@
+<template>
+  <div>
+    <Slider v-model="hexField" :merge="-1" :max="max" :tooltips="false"/>
+  </div>
+</template>
+
+<script>
+import Slider from '@vueform/slider'
+
+export default {
+  name: "HexBlockRangeSelector",
+  components: {
+    Slider,
+  },
+  computed: {
+    hexField: {
+      get() {
+        let strBin = parseInt(this.modelValue).toString(2)
+        let rangeStart = 0;
+        for (let i = strBin.length - 1; i >= 0; i--) {
+          if (strBin[i] === '0') {
+            rangeStart++
+          } else {
+            break
+          }
+        }
+        let rangeEnd = strBin.length;
+        return [this.max - rangeEnd, this.max - rangeStart]
+      },
+      set(value) {
+        if (value[0] - value[1] === 0) {
+          this.hexField = this.lastVal;
+          return;
+        }
+        this.lastVal = value;
+        let result = ""
+        for (let i = 0; i < this.max; i++) {
+          let tmp = null;
+          if (i < value[0]) {
+            tmp = '0'
+          } else if (i < value[1]) {
+            tmp = '1'
+          } else if (i >= value[1]) {
+            tmp = '0'
+          } else {
+            debugger
+            throw new Error('???')
+          }
+          result += tmp;
+        }
+        console.log(result)
+        result = '0x' + (parseInt(result, 2).toString(16))
+        console.log(result)
+        this.$emit("update:modelValue", result);
+      }
+    }
+  },
+  data() {
+    return {lastVal: [0, 1]}
+  },
+  props: {
+    modelValue: {
+      type: String
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 10
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --slider-connect-bg: #ffd966;
+  --slider-connect-bg-disabled: #bfbfbf;
+}
+
+@import "@vueform/slider/themes/default.css";
+
+.slider-horizontal {
+  height: 33px;
+}
+
+[disabled] .slider-handle {
+  background: #bfbfbf !important;
+}
+
+.slider-base, .slider-connects {
+  height: 30px;
+  top: 1px;
+  border-radius: unset;
+  background: linear-gradient(to right, #c9d5ea 99%, white 0);
+}
+
+.slider-horizontal .slider-handle {
+  transform: translate(51%, 0px);
+  background: #ffd966;
+  height: 29px;
+  top: 1px;
+  border: unset;
+  border-radius: unset;
+  box-shadow: unset;
+
+  &.slider-handle-upper {
+    transform: translate(-51%, 0px);
+  }
+}
+</style>
+<style>
+.slider-base, .slider-connects {
+  background-size: v-bind(` calc(100% / ${max}) 100% `);
+}
+</style>
--- a/misc/config_tools/configurator/packages/vue-json-schema-form/vue3/vue3-core/src/components/Widget.js
+++ b/misc/config_tools/configurator/packages/vue-json-schema-form/vue3/vue3-core/src/components/Widget.js
@ -6,10 +6,10 @@ import {
    computed, h, ref, watch, inject
 } from 'vue';

-import { IconInfo } from '@lljj/vjsf-utils/icons';
+import {IconInfo} from '@lljj/vjsf-utils/icons';

-import { validateFormDataAndTransformMsg } from '@lljj/vjsf-utils/schema/validate';
-import { fallbackLabel } from '@lljj/vjsf-utils/formUtils';
+import {validateFormDataAndTransformMsg} from '@lljj/vjsf-utils/schema/validate';
+import {fallbackLabel} from '@lljj/vjsf-utils/formUtils';

 import {
    isRootNodePath, path2prop, getPathVal, setPathVal, resolveComponent
@ -131,7 +131,7 @@ export default {
    },
    emits: ['otherDataChange'],
    inheritAttrs: true,
-    setup(props, { emit }) {
+    setup(props, {emit}) {
        const genFormProvide = inject('genFormProvide');
        const widgetValue = computed({
            get() {
@ -191,7 +191,7 @@ export default {
                },
            ) : null;

-            const { COMPONENT_MAP } = props.globalOptions;
+            const {COMPONENT_MAP} = props.globalOptions;
            const miniDescriptionVNode = (miniDesModel && descriptionVNode) ? h(resolveComponent(COMPONENT_MAP.popover), {
                style: {
                    margin: '0 2px',
@ -227,7 +227,7 @@ export default {
                    style: formItemStyle,
                    ...props.fieldAttrs,

-                    ...props.labelWidth ? { labelWidth: props.labelWidth } : {},
+                    ...props.labelWidth ? {labelWidth: props.labelWidth} : {},
                    ...props.isFormData ? {
                        // 这里对根节点打特殊标志，绕过elementUi无prop属性不校验
                        prop: isRootNode ? '__$$root' : path2prop(props.curNodePath),
@ -295,6 +295,13 @@ export default {
                            },
                        }, [
                            ...miniDescriptionVNode ? [miniDescriptionVNode] : [],
+                            (window.isDev ?
+                                    h('div', {style: {position: 'relative'}}, [
+                                        h('div', {style: {position: 'absolute'}},
+                                            `${props.curNodePath}`)
+                                    ]) :
+                                    ''
+                            ),
                            `${label}`,
                            `${(props.formProps && props.formProps.labelSuffix) || ''}`
                        ])
--- a/misc/config_tools/configurator/pyodide/loadBoard.py
+++ b/misc/config_tools/configurator/pyodide/loadBoard.py
@ -10,7 +10,7 @@ import elementpath
 import lxml.etree as etree
 from bs4 import BeautifulSoup

-from . import convert_result, nuc11_board, scenario_json_schema,nuc11_board_path
+from . import convert_result, nuc11_board, scenario_json_schema, nuc11_board_path


 def get_dynamic_scenario(board):
@ -27,7 +27,7 @@ def get_dynamic_scenario(board):
        if not elements:
            elements = ['']
        # TODO: Add more converters if needed
-        enum_type_convert = {'integer': int}
+        enum_type_convert = {'integer': lambda x: int(x) if x else 0}
        if obj_type in enum_type_convert.keys():
            elements = [enum_type_convert[obj_type](x) for x in elements]
        return elements
@ -75,6 +75,40 @@ def get_dynamic_scenario(board):
    return form_schemas


+def get_cat_info(soup):
+    threads = soup.select('core thread')
+    threads = {thread.attrs['id']: thread.select_one('cpu_id').text for thread in threads}
+    caches = soup.select('caches cache')
+    cat_info = []
+    for cache in caches:
+        cache_level = int(cache.attrs['level'])
+
+        if cache_level == 1 or len(processors := cache.select('processors processor')) <= 1:
+            # ignore cache_level 1 and single core cache region
+            continue
+
+        capacity_mask_length = cache.select_one('capability capacity_mask_length')
+        if not capacity_mask_length:
+            # some region not have capacity_mask_length
+            capacity_mask_length = cache.select_one('ways')
+        capacity_mask_length = int(capacity_mask_length.text)
+
+        processors = [int(threads[processor.text]) for processor in processors]
+        processors.sort()
+        cache_info = {
+            'id': cache.attrs['id'],
+            'level': cache_level,
+            'type': cache.attrs['type'],
+            'cache_size': int(cache.select_one('cache_size').text),
+            'capacity_mask_length': capacity_mask_length,
+            'processors': processors,
+        }
+        cat_info.append(cache_info)
+    cat_info.sort(key=lambda x: int(x['id'], 16))
+    cat_info.sort(key=lambda x: x['level'], reverse=True)
+    return cat_info
+
+
 def get_board_info(board, path):
    soup = BeautifulSoup(board, 'xml')
    try:
@ -87,6 +121,7 @@ def get_board_info(board, path):
    result = {
        'name': board_name + '.board.xml',
        'content': board,
+        'CAT_INFO': get_cat_info(soup),
        'BIOS_INFO': soup.select_one('BIOS_INFO').text,
        'BASE_BOARD_INFO': soup.select_one('BASE_BOARD_INFO').text
    }
--- a/misc/config_tools/configurator/yarn.lock
+++ b/misc/config_tools/configurator/yarn.lock
@ -268,6 +268,11 @@
  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.33.tgz#69a8c99ceb37c1b031d5cc4aec2ff1dc77e1161e"
  integrity sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg==

+"@vueform/slider@^2.0.10":
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/@vueform/slider/-/slider-2.0.10.tgz#f72358c8528cac000dc739d5d9355bce37ce9537"
+  integrity sha512-FRFKEdICDWWrK7P+rzQiqryFlAnDgy+ZYha9zaFg8Z/9dsSby5DAF4TaaqnUxezkAT22j7O0Ho7Eft+oaViieA==
+
 "@xicons/utils@^0.1.4":
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/@xicons/utils/-/utils-0.1.4.tgz#cece50613b34d4b4c71e73bb0be92981067e11e1"
--- a/misc/config_tools/schema/config.xsd
+++ b/misc/config_tools/schema/config.xsd
@ -114,7 +114,7 @@ These settings can only be changed at build time.</xs:documentation>
      </xs:annotation>
    </xs:element>
    <xs:element name="RDT" type="RDTType">
-      <xs:annotation acrn:title="Intel Resource Director Tech" acrn:views="advanced">
+      <xs:annotation acrn:title="Intel Resource Director Tech" acrn:views="">
        <xs:documentation>Intel Resource Director Technology (RDT) provides cache and memory bandwidth allocation features. The features can be used to improve an application's real-time performance.</xs:documentation>
      </xs:annotation>
    </xs:element>
@ -124,7 +124,7 @@ These settings can only be changed at build time.</xs:documentation>
      </xs:annotation>
    </xs:element>
    <xs:element name="SSRAM" minOccurs="0" type="SSRAMInfo">
-      <xs:annotation acrn:title="Software SRAM" acrn:views="advanced">
+      <xs:annotation acrn:title="Software SRAM" acrn:views="">
        <xs:documentation>Configure Software SRAM. This feature reserves memory buffers as always-cached memory to improve an application's real-time performance.</xs:documentation>
      </xs:annotation>
    </xs:element>