bfg-common 1.5.215 → 1.5.217

package/assets/localization/local_be.json

@@ -1349,7 +1349,7 @@
     "selectSwitch": "Выберыце перамыкач",
     "selectTargetDevice": "Выберыце мэтавае прылада",
     "selectTargetDeviceForNewConnection": "Выберыце мэтавае прылада для новага падключэння.",
-    "selectValidClusterOrHostDestination": "Выберыце кластар, хост або пул рэсурсаў у якасці месца прызначэння.",
+    "selectValidClusterOrHostDestination": "Абярыце кластар, вузел і пул рэсурсаў.",
     "selectValidDestinationStorage": "Выберыце сапраўднае сховішча прызначэння.",
     "selectVmKernelAdapter": "Выберыце адаптар VMkernel",
     "send": "Адправіць",
@@ -1752,7 +1752,7 @@
     "commands": "Каманда",
     "perc": "Пярко",
     "bytes": "Байт",
-    "vmNameValidationDescription": "Імя павінна ўтрымліваць лацінскія літары, лічбы, '-', '_', '.' і павінна ўтрымліваць ад 5 да 54 знакаў. Калі прапусціць дадзены крок, сістэма згенеруе імя аўтаматычна.",
+    "vmNameValidationDescription": "Імя павінна ўтрымліваць лацінскія літары, лічбы, '-','_','.'і павінна ўтрымліваць ад 5 да 54 знакаў. Калі прапусціць дадзены крок, сістэма згенеруе імя аўтаматычна",
     "tokens": "Tokens",
     "deleteToken": "Выдаліць маркер",
     "deleteTokenDesc": "Вы хочаце выдаліць выбраны токен?",

package/assets/localization/local_en.json

@@ -329,7 +329,7 @@
     "custom": "Custom",
     "customAttributes": "Custom Attributes",
     "customerImprovementProgram": "Customer Experience Improvement Program",
-    "customizeHardware": "Customize Hardware",
+    "customizeHardware": "Customize hardware",
     "daemon": "Daemon",
     "datacenter": "Datacenter",
     "dataCenter": "DataCenter",
@@ -1311,11 +1311,11 @@
     "selectCompatibility": "Select compatibility",
     "selectCompatibilityVirtualMachineDependingHostsYourEnvironment": "Select compatibility for this virtual machine depending on the host in your environment",
     "selectCompatibilityVmDependingHostsEnvironment": "Select compatibility for this virtual machine depending on the host in your environment",
-    "selectComputeResource": "Select a Compute Resource",
+    "selectComputeResource": "Select a compute resource",
     "selectConfiguration": "select a configuration",
     "selectConnectionType": "Select connection type",
     "selectConnectionTypeToCreate": "Select a connection type to create.",
-    "selectCreationType": "Select a Creation Type",
+    "selectCreationType": "Select a creation type",
     "selectDatastoreClusterDatastore": "Select a datastore cluster or datastore",
     "selectDatastoreName": "Select a name",
     "selectDestination": "Select Destination",
@@ -1328,7 +1328,7 @@
     "selectExistingSwitch": "Select an existing switch",
     "selectFeedbackType": "Select a feedback type first",
     "selectFile": "Select File",
-    "selectGuestOS": "Select a Guest OS",
+    "selectGuestOS": "Select a guest OS",
     "selectGuestOSMachineType": "Select a guest OS and Machine Type",
     "selectHardware": "Select Hardware",
     "selectHost": "Select a host",
@@ -1339,16 +1339,16 @@
     "selectLocationForVirtualMachines": "Select a location for this host's virtual machines.",
     "selectLocationVirtualMachine": "Select a location for the virtual machine.",
     "selectName": "Select a name",
-    "selectNameFolder": "Select a Name and Folder",
+    "selectNameFolder": "Select a name and folder",
     "selectNetwork": "Select Network",
     "selectNfsVersion": "Select the NFS version.",
     "selectPhysicalNetworkAdapterFromListToViewItsDetails": "Select a physical network adapter from the list to view its details.",
-    "selectStorage": "Select Storage",
+    "selectStorage": "Select storage",
     "selectStorageConfigurationDiskFiles": "Select the storage for the configuration and disk files",
     "selectSwitch": "Select Switch",
     "selectTargetDevice": "Select target device",
     "selectTargetDeviceForNewConnection": "Select a target device for the new connection.",
-    "selectValidClusterOrHostDestination": "Select a cluster, host or resource pool as destination.",
+    "selectValidClusterOrHostDestination": "Select a cluster, host, resource pool.",
     "selectValidDestinationStorage": "Select a valid destination storage.",
     "selectVmKernelAdapter": "Select VMkernel adapter",
     "send": "Send",
@@ -1414,7 +1414,7 @@
     "specifyServerName": "The server name cannot be empty. Enter a name.",
     "specifyUniqueName": "Specify a unique name",
     "specifyUniqueNameTargetLocation": "Specify a unique name and target location",
-    "specifyValidClusterOrHostDestination": "Specify a valid cluster, host or resource pool as destination.",
+    "specifyValidClusterOrHostDestination": "Specify a valid cluster, host, resource pool.",
     "specifyVMkernelIPv4Settings": "Specify VMkernel IPv4 settings.",
     "specifyVMkernelPortSettings": "Specify port settings.",
     "sphere": "Sphere",
@@ -1751,7 +1751,7 @@
     "commands": "Commands",
     "perc": "Perc",
     "bytes": "Bytes",
-    "vmNameValidationDescription": "The name must contain Latin letters and numbers, '-', '_', '.' and it must contain from 5 to 54 characters. If you skip this step, the system will generate the name automatically.",
+    "vmNameValidationDescription": "The name must contain Latin letters and numbers, '-','_','.' and it must contain from 5 to 54 characters. If you skip this step, the system will generate the name automatically",
     "tokens": "Tokens",
     "deleteToken": "Delete Token",
     "deleteTokenDesc": "Do you want to delete the selected Token?",

package/assets/localization/local_hy.json

@@ -1348,7 +1348,7 @@
     "selectSwitch": "Ընտրեք անջատիչ",
     "selectTargetDevice": "Ընտրեք թիրախային սարքը",
     "selectTargetDeviceForNewConnection": "Ընտրեք թիրախային սարքը նոր կապի համար:",
-    "selectValidClusterOrHostDestination": "Ընտրեք կլաստեր, հոսթ կամ ռեսուրսների փուլ՝ որպես նշանակության վայր։",
+    "selectValidClusterOrHostDestination": "Որպես նպատակակետ ընտրեք կլաստեր, հոսթ, ռեսուրսների լողավազան:",
     "selectValidDestinationStorage": "Ընտրեք վավեր նպատակային պահեստ:",
     "selectVmKernelAdapter": "Ընտրեք VMkernel ադապտեր",
     "send": "Ուղարկել",
@@ -1751,7 +1751,7 @@
     "commands": "Հրամաններ",
     "perc": "Պերկ",
     "bytes": "Բայթ",
-    "vmNameValidationDescription": "Անունը պետք է պարունակի լատինական տառեր, թվեր, '-', '_', '.' և պետք է պարունակի 5-ից 54 նիշ: Եթե բաց թողնենք այս քայլը, համակարգը ինքնաբերաբար կստեղծի անուն:",
+    "vmNameValidationDescription": "Անունը պետք է պարունակի լատինական տառեր, թվեր, '-','_','.'և պետք է պարունակի 5-ից 54 նիշ: Եթե բաց թողնենք այս քայլը, համակարգը ինքնաբերաբար կստեղծի անուն",
     "tokens": "Tokens",
     "deleteToken": "Ջնջել Token",
     "deleteTokenDesc": "Ցանկանու՞մ եք ջնջել ընտրված Token:",

package/assets/localization/local_kk.json

@@ -1348,7 +1348,7 @@
     "selectSwitch": "Ауыстырғышты таңдаңыз",
     "selectTargetDevice": "Мақсатты құрылғыны таңдаңыз",
     "selectTargetDeviceForNewConnection": "Жаңа қосылым үшін мақсатты құрылғыны таңдаңыз.",
-    "selectValidClusterOrHostDestination": "Кластерді, хостты немесе курортты тек тағайындау ретінде таңдаңыз.",
+    "selectValidClusterOrHostDestination": "Кластерді, торапты және ресурстар пулын таңдаңыз.",
     "selectValidDestinationStorage": "Жарамды мақсатты жадты таңдаңыз.",
     "selectVmKernelAdapter": "Vmkernel адаптерін таңдаңыз",
     "send": "Жіберу",
@@ -1751,7 +1751,7 @@
     "commands": "Командалар",
     "perc": "Жеңілдік",
     "bytes": "Байттар",
-    "vmNameValidationDescription": "Атауында латын әріптері, сандары болуы керек, '-', '_', '.' және 5-тен 54 таңбаға дейін болуы керек. Егер сіз бұл қадамды өткізіп жіберсеңіз, жүйе автоматты түрде атау жасайды.",
+    "vmNameValidationDescription": "Атауында латын әріптері, сандары болуы керек, '-','_','.'және 5-тен 54 таңбаға дейін болуы керек. Егер сіз бұл қадамды өткізіп жіберсеңіз, жүйе автоматты түрде атау жасайды",
     "tokens": "Tokens",
     "deleteToken": "Токенді жою",
     "deleteTokenDesc": "Таңдалған таңбалауышты жою керек пе?",

package/assets/localization/local_ru.json

@@ -1348,7 +1348,7 @@
     "selectSwitch": "Выберите коммутатор",
     "selectTargetDevice": "Выберите целевое устройство.",
     "selectTargetDeviceForNewConnection": "Выберите целевое устройство для нового подключения.",
-    "selectValidClusterOrHostDestination": "Выберите кластер, хост или пул ресурсов в качестве назначения.",
+    "selectValidClusterOrHostDestination": "Выберите кластер, узел, пул ресурсов.",
     "selectValidDestinationStorage": "Выберите действительное целевое хранилище.",
     "selectVmKernelAdapter": "Выберите адаптер VMkernel",
     "send": "Отправить",
@@ -1751,7 +1751,7 @@
     "commands": "Команды",
     "perc": "Перк",
     "bytes": "Байты",
-    "vmNameValidationDescription": "Имя должно содержать латинские буквы, цифры, '-', '_', '.' и должно содержать от 5 до 54 символов. Если пропустить данный шаг, система сгенерирует имя автоматически.",
+    "vmNameValidationDescription": "Имя должно содержать латинские буквы, цифры, '-','_','.' и должно содержать от 5 до 54 символов. Если пропустить данный шаг, система сгенерирует имя автоматически",
     "tokens": "Токены",
     "deleteToken": "Удалить токен",
     "deleteTokenDesc": "Вы хотите удалить выбранный токен?",

package/assets/localization/local_zh.json

@@ -1347,7 +1347,7 @@
     "selectSwitch": "选择开关",
     "selectTargetDevice": "选择目标设备",
     "selectTargetDeviceForNewConnection": "为新连接选择目标设备。",
-    "selectValidClusterOrHostDestination": "选择一个集群、主机或资源池作为目标位置。",
+    "selectValidClusterOrHostDestination": "请选择集群、节点和资源池",
     "selectValidDestinationStorage": "选择一个有效的目标存储。",
     "selectVmKernelAdapter": "选择VMkernel适配器",
     "send": "发送",
@@ -1750,7 +1750,7 @@
     "commands": "命令",
     "perc": "全氯乙烯",
     "bytes": "字节",
-    "vmNameValidationDescription": "名称必须包含拉丁字母、数字、'-' 、'_' 、'.' 。 并且必须包含 5 到 54 个字符。 如果跳过此步骤，系统会自动生成一个名称。",
+    "vmNameValidationDescription": "名称必须包含拉丁字母、数字、'-'、'_'、'.'。 并且必须包含 5 到 54 个字符。 如果跳过此步骤，系统会自动生成一个名称",
     "tokens": "Tokens",
     "deleteToken": "删除令牌",
     "deleteTokenDesc": "您想删除选定的令牌吗？",

package/assets/scss/common/normalize.scss

@@ -320,7 +320,6 @@ li {
     min-width: 30ch;
   }
 }
-//TODO remove with old design
 .description {
   color: var(--global-font-color) !important;
 }

package/components/common/context/recursion/RecursionNew.vue

@@ -118,7 +118,7 @@ const emits = defineEmits<{
   padding: 8px;
 
   //overflow-x: hidden;
-  overflow-y: auto;
+  //overflow-y: auto;
 
   .context-loader {
     position: absolute;

package/components/common/pages/shortcuts/block/BlockNew.vue

@@ -42,11 +42,13 @@ const navigate = computed<string>(() => '/' + props.item.navigateTo)
 
 <style>
 :root {
-  --shortcut-item-hover-bg: #e9ebed33;
+  --shortcut-item-hover-bg: linear-gradient(135deg, #FFFFFF 0%, #F0F8FD 100%);
+  --shortcut-item-hover-box-shadow: inset 0 0 0 1.5px #008fd6, 0px 2px 24px 0px #0000001f;
   --shortcut-item-disabled-text-icon-color: #bdc3c7;
 }
 :root.dark-theme {
-  --shortcut-item-hover-bg: #e9ebed08;
+  --shortcut-item-hover-bg: linear-gradient(135deg, #334453 0%, #324C5E 100%);
+  --shortcut-item-hover-box-shadow: inset 0 0 0 1.5px #2BA2DE, 0px -1px 12px 0px rgba(0, 0, 0, 0.1), 0px 4px 20px 0px rgba(0, 0, 0, 0.12);
   --shortcut-item-disabled-text-icon-color: #bdc3c770;
 }
 </style>
@@ -55,6 +57,7 @@ const navigate = computed<string>(() => '/' + props.item.navigateTo)
 .category-block-item {
   max-width: 176px;
   min-height: 110px;
+  transition: background 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 200ms ease-in-out, color 150ms ease-in-out;
 
   &.disabled {
     opacity: 0.6;
@@ -90,6 +93,8 @@ const navigate = computed<string>(() => '/' + props.item.navigateTo)
 
   &:hover:not(.disabled) {
     background: var(--shortcut-item-hover-bg);
+    box-shadow: var(--shortcut-item-hover-box-shadow);
+    transform: translateY(-1px);
     cursor: pointer;
     .unit {
       &-icon {

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/Password.vue

@@ -61,6 +61,7 @@ setForm()
 
 const showValidationErrors = (): void => {
   const valid = validation.touch()
+  console.log(valid, 111)
   passwordErrorText.value = !valid.isValid ? valid.errors.password[0] : ''
   emits('valid', valid.isValid)
 }
@@ -82,9 +83,9 @@ const setPasswordDisable = (): void => {
 const passwordErrorText = ref<string>('')
 
 const changePassword = (value: string): void => {
-  showValidationErrors()
-
   password.value = value
+
+  showValidationErrors()
 }
 
 const isEnabledPassword = ref<boolean>(!!password.value)
@@ -94,6 +95,8 @@ const onGeneratePassword = (): void => {
 
   form.value.password.value = generatedPassword
   password.value = generatedPassword
+
+  showValidationErrors()
 }
 </script>
 

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/lib/utils.ts

@@ -1,12 +1,24 @@
-export const generatePassword = (passwordLength = 12): string => {
-  const chars =
-    '0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+export const generatePassword = (length = 12): string => {
+  const lowercase = 'abcdefghijklmnopqrstuvwxyz';
+  const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  const digits = '0123456789';
+  const special = '!@#$%^&*';
+  const all = lowercase + uppercase + digits + special;
 
-  let password = ''
-  for (let i = 0; i <= passwordLength; i++) {
-    const randomNumber = Math.floor(Math.random() * chars.length)
-    password += chars.substring(randomNumber, randomNumber + 1)
+  // Гарантируем наличие обязательных символов
+  const requiredChars = [
+    lowercase[Math.floor(Math.random() * lowercase.length)],
+    uppercase[Math.floor(Math.random() * uppercase.length)],
+    digits[Math.floor(Math.random() * digits.length)],
+    special[Math.floor(Math.random() * special.length)]
+  ];
+
+  // Оставшиеся символы
+  const remainingLength = length - requiredChars.length;
+  for (let i = 0; i < remainingLength; i++) {
+    requiredChars.push(all[Math.floor(Math.random() * all.length)]);
   }
 
-  return password
+  // Перемешиваем
+  return requiredChars.sort(() => 0.5 - Math.random()).join('');
 }

package/components/common/vm/actions/common/select/computeResource/New.vue

@@ -1,166 +1,141 @@
-<template>
-  <div class="select-compute-resource">
-    <Teleport to="#compute-resource-alert-wrapper">
-      <ui-alert
-        v-show="props.errors.length"
-        :messages="props.errors"
-        status="alert-danger"
-        test-id="computed-resource-alert"
-        class="errors-alert"
-        size="md"
-        @remove="emits('remove-validation-errors')"
-      />
-    </Teleport>
-
-    <div class="tree-view-wrap">
-      <common-vm-actions-common-select-compute-resource-tree-view
-        v-model="selectedNode"
-        :data-center="props.dataCenter"
-        :compute-resource="props.computeResource"
-        :compute-resource-tree="props.computeResourceTree"
-        @get-compute-resource-tree="emits('get-compute-resource-tree', $event)"
-        @show-compute-resource-tree="
-          emits('show-compute-resource-tree', $event)
-        "
-        @select-compute-resource-tree="
-          emits('select-compute-resource-tree', $event)
-        "
-        @clear-compute-resource-tree="emits('clear-compute-resource-tree')"
-      />
-    </div>
-
-    <div class="compatibility-wrap">
-      <p class="compatibility">
-        {{ localization.inventorySummary.compatibility }}
-      </p>
-      <div class="compatibility-message flex-align-start">
-        <ui-skeleton-item v-if="!selectedNode" width="160px" height="16px" />
-        <template v-else-if="props.compatibilityText[1]">
-          <ui-icon
-            v-show="!props.compatibilityText[0]"
-            name="error"
-            width="16"
-            height="16"
-            class="icon-compatibility-alert"
-          />
-
-          <ui-icon
-            v-show="props.compatibilityText[0]"
-            name="success-fill"
-            width="16"
-            height="16"
-            class="icon-compatibility-alert"
-          />
-          <span class="compatibility-message-description">{{
-            props.compatibilityText[1]
-          }}</span>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-
-const selectedNode = defineModel<UI_I_TreeNode>('modelValue', {
-  required: true,
-})
-
-const props = defineProps<{
-  dataCenter: UI_I_TreeNode | null
-  computeResource: UI_I_TreeNode
-  computeResourceTree: UI_I_TreeNode[]
-  errors: string[]
-  compatibilityText: [boolean, string]
-}>()
-
-const emits = defineEmits<{
-  (
-    event: 'get-compute-resource-tree',
-    value: { id: string | number; cb: () => void }
-  ): void
-  (event: 'show-compute-resource-tree', value: UI_I_TreeNode): void
-  (event: 'select-compute-resource-tree', value: UI_I_TreeNode): void
-  (event: 'clear-compute-resource-tree'): void
-  (event: 'remove-validation-errors'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style>
-:root {
-  --select-compute-resource-border-color: #e9ebed;
-  --select-compute-resource-location-bg-color: #ffffff;
-  --select-compute-resource-compatibility-title-color: #4d5d69;
-  --select-compute-resource-compatibilityd-empty-escription-color: #4d5d69;
-  --select-compute-resource-compatibility-description-color: #4d5d69;
-}
-:root.dark-theme {
-  --select-compute-resource-border-color: #e9ebed1f;
-  --select-compute-resource-location-bg-color: #1b2a371f;
-  --select-compute-resource-compatibility-title-color: #e9eaec;
-  --select-compute-resource-compatibilityd-empty-escription-color: #9da6ad;
-  --select-compute-resource-compatibility-description-color: #e9eaec;
-}
-</style>
-<style scoped lang="scss">
-.select-compute-resource {
-  padding-bottom: 22px;
-
-  .tree-view-wrap {
-    //height: 170px;
-    min-height: 160px;
-    max-height: 240px;
-    border-radius: 8px;
-    border: 1px solid var(--select-compute-resource-border-color);
-    padding: 8px;
-    background-color: var(--select-compute-resource-location-bg-color);
-    margin: 16px 0 24px;
-    overflow: auto;
-
-    :deep(.tree-content) {
-      padding: 0 !important;
-
-      .node-wrapper {
-        border-radius: 4px;
-
-        .node-name {
-          font-size: 12px;
-          margin-left: 8px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-
-  .compatibility-wrap {
-    .compatibility {
-      font-size: 16px;
-      font-weight: 500;
-      color: var(--select-compute-resource-compatibility-title-color);
-      margin-bottom: 16px;
-    }
-    .compatibility-message {
-      border-radius: 8px;
-      border: 1px solid var(--select-compute-resource-border-color);
-      padding: 12px;
-      background-color: var(--select-compute-resource-location-bg-color);
-      gap: 10px;
-
-      .icon-compatibility-alert {
-        min-width: 16px;
-        min-height: 16px;
-      }
-      .compatibility-message-description {
-        font-size: 13px;
-        color: var(--select-compute-resource-compatibility-description-color);
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="select-compute-resource">
+    <Teleport to="#compute-resource-alert-wrapper">
+      <ui-alert
+        v-show="props.errors.length"
+        :messages="props.errors"
+        status="alert-danger"
+        test-id="computed-resource-alert"
+        class="errors-alert"
+        @remove="emits('remove-validation-errors')"
+      />
+    </Teleport>
+
+    <div class="tree-view-wrap">
+      <common-vm-actions-common-select-compute-resource-tree-view
+        v-model="selectedNode"
+        :data-center="props.dataCenter"
+        :compute-resource="props.computeResource"
+        :compute-resource-tree="props.computeResourceTree"
+        @get-compute-resource-tree="emits('get-compute-resource-tree', $event)"
+        @show-compute-resource-tree="
+          emits('show-compute-resource-tree', $event)
+        "
+        @select-compute-resource-tree="
+          emits('select-compute-resource-tree', $event)
+        "
+        @clear-compute-resource-tree="emits('clear-compute-resource-tree')"
+      />
+    </div>
+
+    <div class="compatibility-wrap">
+      <p class="compatibility">
+        {{ localization.inventorySummary.compatibility }}
+      </p>
+      <div class="compatibility-message flex-align-center">
+        <ui-skeleton-item v-if="!selectedNode" width="160px" height="16px" />
+        <template v-else-if="props.compatibilityText[1]">
+          <ui-icon
+            v-show="!props.compatibilityText[0]"
+            name="error"
+            width="16"
+            height="16"
+          />
+
+          <ui-icon
+            v-show="props.compatibilityText[0]"
+            name="success-fill"
+            width="16"
+            height="16"
+          />
+          <span class="compatibility-message-description">{{
+            props.compatibilityText[1]
+          }}</span>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+
+const selectedNode = defineModel<UI_I_TreeNode>('modelValue', {
+  required: true,
+})
+
+const props = defineProps<{
+  dataCenter: UI_I_TreeNode | null
+  computeResource: UI_I_TreeNode
+  computeResourceTree: UI_I_TreeNode[]
+  errors: string[]
+  compatibilityText: [boolean, string]
+}>()
+
+const emits = defineEmits<{
+  (
+    event: 'get-compute-resource-tree',
+    value: { id: string | number; cb: () => void }
+  ): void
+  (event: 'show-compute-resource-tree', value: UI_I_TreeNode): void
+  (event: 'select-compute-resource-tree', value: UI_I_TreeNode): void
+  (event: 'clear-compute-resource-tree'): void
+  (event: 'remove-validation-errors'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style>
+:root {
+  --select-compute-resource-border-color: #e9ebed;
+  --select-compute-resource-location-bg-color: #ffffff;
+  --select-compute-resource-compatibility-title-color: #4d5d69;
+  --select-compute-resource-compatibility-description-color: #4d5d69;
+}
+:root.dark-theme {
+  --select-compute-resource-border-color: #e9ebed1f;
+  --select-compute-resource-location-bg-color: transparent;
+  --select-compute-resource-compatibility-title-color: #e9eaec;
+  --select-compute-resource-compatibility-description-color: #9da6ad;
+}
+</style>
+<style scoped lang="scss">
+.select-compute-resource {
+  .tree-view-wrap {
+    height: 170px;
+    border-radius: 8px;
+    border: 1px solid var(--select-compute-resource-border-color);
+    padding: 12px;
+    background-color: var(--select-compute-resource-location-bg-color);
+    margin: 16px 0 24px;
+    overflow: auto;
+
+    :deep(.tree-content) {
+      padding: 0 !important;
+    }
+  }
+
+  .compatibility-wrap {
+    .compatibility {
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--select-compute-resource-compatibility-title-color);
+      margin-bottom: 16px;
+    }
+    .compatibility-message {
+      border-radius: 8px;
+      border: 1px solid var(--select-compute-resource-border-color);
+      padding: 12px;
+      background-color: var(--select-compute-resource-location-bg-color);
+      gap: 12px;
+
+      .compatibility-message-description {
+        font-size: 13px;
+        color: var(--select-compute-resource-compatibility-description-color);
+      }
+    }
+  }
+}
+</style>