bfg-common 1.4.518 → 1.4.521

package/components/common/pages/shortcuts/Shortcuts.vue

@@ -31,7 +31,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 .shortcut {
   margin: 20px;
   height: 100%;
-
+  overflow: auto;
   &.new {
     background: var(--bottom-pannel-bg-color);
     padding: 16px;

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

@@ -8,12 +8,8 @@
       @click="changeLastNavigation"
       @contextmenu="changeLastNavigation"
     >
-      <span
-        v-if="props.item.iconClassName"
-        :class="['unit-icon', props.item.iconClassName]"
-      />
-      <span v-else-if="props.item.iconName" class="unit-icon">
-        <atoms-the-icon2 :name="props.item.iconName" width="28" height="28" />
+      <span class="unit-icon">
+        <ui-icon :name="props.item.iconName" width="28" height="28"></ui-icon>
       </span>
       <div class="unit-text" :title="props.item.text">
         {{ props.item.text }}
@@ -53,31 +49,6 @@ const changeLastNavigation = (): void => {
       min-height: 28px;
       display: inline-block;
       color: var(--close-icon);
-
-      &.icon-lifecycle-manager,
-      &.icon-cloud-provider-services {
-        background-size: contain;
-        background-repeat: no-repeat;
-      }
-      &.icon-lifecycle-manager {
-        background-image: url('assets/img/icons/icon-life-m-light.svg');
-        html.dark-theme & {
-          background-image: url('assets/img/icons/icon-life-m-dark.svg');
-        }
-      }
-      &.icon-cloud-provider-services {
-        background-image: url('assets/img/icons/icon-cps.png');
-        html.dark-theme & {
-          background-image: url('assets/img/icons/icon-cps-dark-mode.png');
-        }
-      }
-      &.icon-vm-customizationManager-32x,
-      &.icon-storage-profile-32x,
-      &.icon-Host_Policy-32x,
-      &.icon-certificate-32x {
-        width: 28px;
-        height: 28px;
-      }
     }
     &-text {
       color: #9da6ad;

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

@@ -8,12 +8,8 @@
       @click="changeLastNavigation"
       @contextmenu="changeLastNavigation"
     >
-      <span
-        v-if="props.item.iconClassName"
-        :class="['unit-icon', props.item.iconClassName]"
-      />
-      <span v-else-if="props.item.iconName" class="icon-2">
-        <atoms-the-icon2 :name="props.item.iconName" width="34" height="34" />
+      <span class="icon-2">
+        <ui-icon :name="props.item.iconName" width="34" height="34"></ui-icon>
       </span>
       <div class="unit-text" :title="props.item.text">
         {{ props.item.text }}
@@ -47,39 +43,6 @@ const changeLastNavigation = (): void => {
   width: 95px;
   margin: 21px 10px;
   text-decoration-line: none;
-  &-icon {
-    margin: 0px 10px 15px 10px;
-    min-width: 34px;
-    min-height: 34px;
-    display: inline-block;
-    color: var(--global-font-color3);
-
-    &.icon-lifecycle-manager,
-    &.icon-cloud-provider-services {
-      background-size: contain;
-      background-repeat: no-repeat;
-    }
-    &.icon-lifecycle-manager {
-      background-image: url('assets/img/icons/icon-life-m-light.svg');
-      html.dark-theme & {
-        background-image: url('assets/img/icons/icon-life-m-dark.svg');
-        color: var(--global-font-color3);
-      }
-    }
-    &.icon-cloud-provider-services {
-      background-image: url('assets/img/icons/icon-cps.png');
-      html.dark-theme & {
-        background-image: url('assets/img/icons/icon-cps-dark-mode.png');
-      }
-    }
-    &.icon-vm-customizationManager-32x,
-    &.icon-storage-profile-32x,
-    &.icon-Host_Policy-32x,
-    &.icon-certificate-32x {
-      width: 34px;
-      height: 34px;
-    }
-  }
   .icon-2 {
     margin: 0 10px 15px 10px;
     color: var(--global-font-color3);

package/components/common/pages/shortcuts/category/Category.vue

@@ -23,20 +23,4 @@ const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 </script>
-<style lang="scss" scoped>
-//.category {
-//  &-text {
-//    color: var(--light-white-100);
-//    font-size: 18px;
-//    line-height: 21px;
-//    font-weight: 400;
-//  }
-//  &-block {
-//    display: flex;
-//    flex-direction: row;
-//    justify-content: flex-start;
-//    border-top: 1px solid var(--global-border-color);
-//    margin-top: -4px;
-//  }
-//}
-</style>
+<style lang="scss" scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/NewPciDevice.vue

@@ -1,56 +1,34 @@
 <template>
-  <div class="hardware-pci-device">
-    <atoms-stack-block
-      :has-children="true"
-      :removable="isRemovable"
-      test-id="pci-device-stack-block"
-      @remove="onRemovePciDevice"
-    >
-      <template #stackBlockKey>
-        <div
-          :id="`vm-wizard-toggle-block-pci-device-${props.index}`"
-          :data-id="`vm-wizard-toggle-block-pci-device-${props.index}`"
-          class="flex-align-center"
-        >
-          <span>{{ label }}</span>
-        </div>
-      </template>
-      <template #stackBlockContent>
-        <span class="main-label">
-          {{ selectedLabel }}
-        </span>
-      </template>
-      <template #stackChildren>
-        <template v-if="props.type === 'new'">
-          <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-type-selection
-            v-model="selectedType"
-            :options="pciDeviceTypeOptions"
-            :pci-device-index="props.index"
-          />
-
-          <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-direct-path-io
-            v-show="selectedType.value === 'direct_path_io'"
-            v-model="directPathIo"
-            :pci-device-index="props.index"
-            :passthrough-devices="props.passthroughDevices"
-          />
-          <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-dynamic-direct-path-io
-            v-show="selectedType.value === 'dynamic_direct_path_io'"
-            v-model="dynamicDirectPathIo"
-            :pci-device-index="props.index"
-            :passthrough-devices="props.passthroughDevices"
-          />
-          <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-nvidia-grid
-            v-show="selectedType.value === 'nvidia_grid'"
-            v-model="nvidiaGridProfile"
-            :pci-device-index="props.index"
-          />
-        </template>
-
-        <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-note />
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-new
+    v-if="isNewView"
+    v-model:selected-type="selectedType"
+    v-model:direct-path-io="directPathIo"
+    v-model:dynamic-direct-path-io="dynamicDirectPathIo"
+    v-model:nvidia-grid-profile="nvidiaGridProfile"
+    :index="props.index"
+    :passthrough-devices="props.passthroughDevices"
+    :type="props.type"
+    :is-removable="isRemovable"
+    :label="label"
+    :selected-label="selectedLabel"
+    :pci-device-type-options="pciDeviceTypeOptions"
+    @remove="emits('remove')"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-old
+    v-else
+    v-model:selected-type="selectedType"
+    v-model:direct-path-io="directPathIo"
+    v-model:dynamic-direct-path-io="dynamicDirectPathIo"
+    v-model:nvidia-grid-profile="nvidiaGridProfile"
+    :index="props.index"
+    :passthrough-devices="props.passthroughDevices"
+    :type="props.type"
+    :is-removable="isRemovable"
+    :label="label"
+    :selected-label="selectedLabel"
+    :pci-device-type-options="pciDeviceTypeOptions"
+    @remove="emits('remove')"
+  />
 </template>
 
 <script setup lang="ts">
@@ -75,6 +53,9 @@ const emits = defineEmits<{
   (event: 'remove'): void
 }>()
 
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const isRunning = computed<boolean>(() => {
@@ -95,7 +76,7 @@ const label = computed<string>(() => {
 const selectedLabel = computed<string>(() => {
   switch (selectedType.value.value) {
     case 'direct_path_io':
-      return `${directPathIo.value.address}|${directPathIo.value.device_name}`
+      return `${directPathIo.value.address} | ${directPathIo.value.device_name}`
     case 'dynamic_direct_path_io':
       return dynamicDirectPathIo.value
     default:
@@ -155,14 +136,7 @@ watch(
   },
   { immediate: true }
 )
-
-const onRemovePciDevice = (): void => {
-  emits('remove')
-}
 </script>
 
 <style scoped lang="scss">
-#network-connect {
-  margin-right: 4px;
-}
 </style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/NewPciDeviceNew.vue

@@ -0,0 +1,85 @@
+<template>
+  <ui-stack-block
+    :has-children="true"
+    :removable="props.isRemovable"
+    test-id="pci-device-stack-block"
+    @remove="emits('remove')"
+  >
+    <template #stackBlockKey>
+      <div
+        :id="`vm-wizard-toggle-block-pci-device-${props.index}`"
+        :data-id="`vm-wizard-toggle-block-pci-device-${props.index}`"
+        class="flex-align-center"
+      >
+        <span>{{ props.label }}</span>
+      </div>
+    </template>
+    <template #stackBlockContent>
+      <span class="main-label">
+        {{ props.selectedLabel }}
+      </span>
+    </template>
+    <template #stackChildren>
+      <template v-if="props.type === 'new'">
+        <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-type-selection
+          v-model="selectedType"
+          :options="props.pciDeviceTypeOptions"
+          :pci-device-index="props.index"
+        />
+
+        <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-direct-path-io
+          v-show="selectedType.value === 'direct_path_io'"
+          v-model="directPathIo"
+          :pci-device-index="props.index"
+          :passthrough-devices="props.passthroughDevices"
+        />
+        <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-dynamic-direct-path-io
+          v-show="selectedType.value === 'dynamic_direct_path_io'"
+          v-model="dynamicDirectPathIo"
+          :pci-device-index="props.index"
+        />
+        <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-nvidia-grid
+          v-show="selectedType.value === 'nvidia_grid'"
+          v-model="nvidiaGridProfile"
+          :pci-device-index="props.index"
+        />
+      </template>
+
+      <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-note />
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_T_PciDeviceType } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
+import type { UI_I_PciDevice } from '~/lib/models/store/vm/interfaces'
+
+const selectedType = defineModel<UI_I_OptionItem>('selected-type', {
+  required: true,
+})
+const directPathIo = defineModel<UI_I_PciDevice>('direct-path-io', {
+  required: true,
+})
+const dynamicDirectPathIo = defineModel<string>('dynamic-direct-path-io', {
+  required: true,
+})
+const nvidiaGridProfile = defineModel<string>('nvidia-grid-profile', {
+  required: true,
+})
+
+const props = defineProps<{
+  index: number
+  passthroughDevices: UI_I_PciDevice[]
+  type: UI_T_PciDeviceType
+  isRemovable: boolean
+  label: string
+  selectedLabel: string
+  pciDeviceTypeOptions: UI_I_OptionItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'remove'): void
+}>()
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/NewPciDeviceOld.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="hardware-pci-device">
+    <atoms-stack-block
+      :has-children="true"
+      :removable="props.isRemovable"
+      test-id="pci-device-stack-block"
+      @remove="emits('remove')"
+    >
+      <template #stackBlockKey>
+        <div
+          :id="`vm-wizard-toggle-block-pci-device-${props.index}`"
+          :data-id="`vm-wizard-toggle-block-pci-device-${props.index}`"
+          class="flex-align-center"
+        >
+          <span>{{ props.label }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent>
+        <span class="main-label">
+          {{ props.selectedLabel }}
+        </span>
+      </template>
+      <template #stackChildren>
+        <template v-if="props.type === 'new'">
+          <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-type-selection
+            v-model="selectedType"
+            :options="props.pciDeviceTypeOptions"
+            :pci-device-index="props.index"
+          />
+
+          <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-direct-path-io
+            v-show="selectedType.value === 'direct_path_io'"
+            v-model="directPathIo"
+            :pci-device-index="props.index"
+            :passthrough-devices="props.passthroughDevices"
+          />
+          <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-dynamic-direct-path-io
+            v-show="selectedType.value === 'dynamic_direct_path_io'"
+            v-model="dynamicDirectPathIo"
+            :pci-device-index="props.index"
+          />
+          <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-nvidia-grid
+            v-show="selectedType.value === 'nvidia_grid'"
+            v-model="nvidiaGridProfile"
+            :pci-device-index="props.index"
+          />
+        </template>
+
+        <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-note />
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_T_PciDeviceType } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
+import type { UI_I_PciDevice } from '~/lib/models/store/vm/interfaces'
+
+const selectedType = defineModel<UI_I_OptionItem>('selected-type', {
+  required: true,
+})
+const directPathIo = defineModel<UI_I_PciDevice>('direct-path-io', {
+  required: true,
+})
+const dynamicDirectPathIo = defineModel<string>('dynamic-direct-path-io', {
+  required: true,
+})
+const nvidiaGridProfile = defineModel<string>('nvidia-grid-profile', {
+  required: true,
+})
+
+const props = defineProps<{
+  index: number
+  passthroughDevices: UI_I_PciDevice[]
+  type: UI_T_PciDeviceType
+  isRemovable: boolean
+  label: string
+  selectedLabel: string
+  pciDeviceTypeOptions: UI_I_OptionItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'remove'): void
+}>()
+</script>
+
+<style scoped lang="scss">
+#network-connect {
+  margin-right: 4px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/directPathIo/DirectPathIo.vue

@@ -1,23 +1,16 @@
 <template>
-  <atoms-stack-block :has-children="false">
-    <template #stackBlockContent>
-      <div class="select">
-        <select
-          id="direct-path-io"
-          v-model="valueLocal"
-          data-id="direct-path-io-select"
-        >
-          <option
-            v-for="item in props.passthroughDevices"
-            :key="item.id"
-            :value="item"
-          >
-            {{ item.address }} | {{ item.device_name }}
-          </option>
-        </select>
-      </div>
-    </template>
-  </atoms-stack-block>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-direct-path-io-new
+    v-if="isNewView"
+    v-model="model"
+    :pci-device-index="props.pciDeviceIndex"
+    :passthrough-devices="props.passthroughDevices"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-direct-path-io-old
+    v-else
+    v-model="model"
+    :pci-device-index="props.pciDeviceIndex"
+    :passthrough-devices="props.passthroughDevices"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -26,23 +19,15 @@ import type {
   UI_I_ConfigurePciDevicesTable,
 } from '~/lib/models/store/host/interfaces'
 
+const model = defineModel<UI_I_ConfigureAllPciDevicesItem>({required: true})
+
 const props = defineProps<{
-  modelValue: UI_I_ConfigureAllPciDevicesItem
   pciDeviceIndex: number
   passthroughDevices: UI_I_ConfigurePciDevicesTable
 }>()
-const emits = defineEmits<{
-  (event: 'update:model-value', value: UI_I_ConfigureAllPciDevicesItem): void
-}>()
 
-const valueLocal = computed<UI_I_ConfigureAllPciDevicesItem>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue: UI_I_ConfigureAllPciDevicesItem) {
-    emits('update:model-value', newValue)
-  },
-})
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 </script>
 
 <style lang="scss" scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/directPathIo/DirectPathIoNew.vue

@@ -0,0 +1,35 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      <span>{{ localization.common.pciDevice }}</span>
+    </template>
+    <template #stackBlockContent>
+      <ui-select
+        id="direct-path-io"
+        v-model="model"
+        width="auto"
+        :items="props.passthroughDevices"
+        :test-id="`direct-path-io-select-${props.pciDeviceIndex}`"
+      />
+    </template>
+  </ui-stack-block>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_ConfigureAllPciDevicesItem,
+  UI_I_ConfigurePciDevicesTable,
+} from '~/lib/models/store/host/interfaces'
+
+const model = defineModel<UI_I_ConfigureAllPciDevicesItem>()
+
+const props = defineProps<{
+  pciDeviceIndex: number
+  passthroughDevices: UI_I_ConfigurePciDevicesTable
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/directPathIo/DirectPathIoOld.vue

@@ -0,0 +1,37 @@
+<template>
+  <atoms-stack-block :has-children="false">
+    <template #stackBlockContent>
+      <div class="select">
+        <select
+          id="direct-path-io"
+          v-model="model"
+          :data-id="`direct-path-io-select-${props.pciDeviceIndex}`"
+        >
+          <option
+            v-for="item in props.passthroughDevices"
+            :key="item.id"
+            :value="item"
+          >
+            {{ item.address }} | {{ item.device_name }}
+          </option>
+        </select>
+      </div>
+    </template>
+  </atoms-stack-block>
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_ConfigureAllPciDevicesItem,
+  UI_I_ConfigurePciDevicesTable,
+} from '~/lib/models/store/host/interfaces'
+
+const model = defineModel<UI_I_ConfigureAllPciDevicesItem>()
+
+const props = defineProps<{
+  pciDeviceIndex: number
+  passthroughDevices: UI_I_ConfigurePciDevicesTable
+}>()
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/DynamicDirectPathIo.vue

@@ -1,49 +1,33 @@
 <template>
-  <div>
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.pciDevice }}
-      </template>
-      <template #stackBlockContent>
-        <div>{{ localization.common.connectAnyFollowing }}:</div>
-        <atoms-select-the-select
-          v-model="localValue"
-          :options="options"
-          test-id="dynamic-direct-path-io-select"
-        >
-          <span class="text-uppercase">{{ localization.common.selectHardware }}</span>
-        </atoms-select-the-select>
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-dynamic-direct-path-io-new
+    v-if="isNewView"
+    v-model="model"
+    :options="options"
+    :pci-device-index="props.pciDeviceIndex"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-dynamic-direct-path-io-old
+    v-else
+    v-model="model"
+    :options="options"
+    :pci-device-index="props.pciDeviceIndex"
+  />
 </template>
 
 <script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_Option } from '~/components/atoms/select/lib/models/interfaces'
 import { optionsConfig } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/lib/config/options'
 
+const model = defineModel<string>({required: true})
+
 const props = defineProps<{
-  modelValue: string
   pciDeviceIndex: number
 }>()
-const emits = defineEmits<{
-  (event: 'update:model-value', value: string): void
-}>()
-
-const localValue = computed<string>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue) {
-    emits('update:model-value', newValue)
-  },
-})
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const options = ref<UI_I_Option[]>(optionsConfig)
-localValue.value = '' + options.value[0].value
+model.value = '' + options.value[0].value
 </script>
 
 <style lang="scss" scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/DynamicDirectPathIoNew.vue

@@ -0,0 +1,48 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.common.pciDevice }}
+    </template>
+    <template #stackBlockContent>
+      <div class="dynamic-direct-path-io-content">
+        <span class="dynamic-direct-path-io-content-label"
+          >{{ localization.common.connectAnyFollowing }}:</span
+        >
+        <ui-select
+          v-model="model"
+          width="auto"
+          :items="props.options"
+          :test-id="`dynamic-direct-path-io-select-${pciDeviceIndex}`"
+        />
+      </div>
+    </template>
+  </ui-stack-block>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Option } from '~/components/atoms/select/lib/models/interfaces'
+
+const model = defineModel<string>({ required: true })
+
+const props = defineProps<{
+  options: UI_I_Option[]
+  pciDeviceIndex: number
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.dynamic-direct-path-io-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  &-label {
+    font-size: 13px;
+    line-height: 15.73px;
+    color: #9da6ad;
+  }
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/DynamicDirectPathIoOld.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.pciDevice }}
+      </template>
+      <template #stackBlockContent>
+        <div>{{ localization.common.connectAnyFollowing }}:</div>
+        <atoms-select-the-select
+          v-model="model"
+          :options="props.options"
+          :test-id="`dynamic-direct-path-io-select-${pciDeviceIndex}`"
+        >
+          <span class="text-uppercase">{{ localization.common.selectHardware }}</span>
+        </atoms-select-the-select>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Option } from '~/components/atoms/select/lib/models/interfaces'
+
+const model = defineModel<string>({required: true})
+
+const props = defineProps<{
+  options: UI_I_Option[]
+  pciDeviceIndex: number
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/note/Note.vue

@@ -1,27 +1,15 @@
 <template>
-  <atoms-stack-block :has-children="false">
-    <template #stackBlockContent>
-      <span>
-        <atoms-the-icon
-          name="warning"
-          width="16px"
-          heigth="16px"
-          class="note-icon"
-        />
-      </span>
-      <span>{{ localization.common.note }}: {{ localization.common.pciDeviceNote }}</span>
-    </template>
-  </atoms-stack-block>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-note-new
+    v-if="isNewView"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-note-old
+    v-else
+  />
 </template>
 
 <script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 </script>
 
-<style lang="scss" scoped>
-.note-icon {
-  margin-bottom: -4px;
-}
-</style>
+<style lang="scss" scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/note/NoteNew.vue

@@ -0,0 +1,42 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockContent>
+      <div class="note-content">
+        <ui-icon
+          name="warning-outline"
+          width="16px"
+          heigth="16px"
+          class="note-icon"
+          color="#FBCE28"
+        />
+        <p class="note-text">
+          {{ localization.common.note }}:
+          {{ localization.common.pciDeviceNote }}
+        </p>
+      </div>
+    </template>
+  </ui-stack-block>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.note-content {
+  display: flex;
+  gap: 10px;
+
+  .note-icon {
+    min-width: 16px;
+  }
+
+  .note-text {
+    font-size: 13px;
+    line-height: 15.73px;
+    color: #9da6ad;
+  }
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/note/NoteOld.vue

@@ -0,0 +1,30 @@
+<template>
+  <atoms-stack-block :has-children="false">
+    <template #stackBlockContent>
+      <span>
+        <atoms-the-icon
+          name="warning"
+          width="16px"
+          heigth="16px"
+          class="note-icon"
+        />
+      </span>
+      <span
+        >{{ localization.common.note }}:
+        {{ localization.common.pciDeviceNote }}</span
+      >
+    </template>
+  </atoms-stack-block>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.note-icon {
+  margin-bottom: -4px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/nvidiaGrid/NvidiaGrid.vue

@@ -1,42 +1,26 @@
 <template>
-  <div>
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.nvidiaGridGpuProfile }}
-      </template>
-      <template #stackBlockContent>
-        <input
-          :id="`nvidia-grid-${props.pciDeviceIndex}`"
-          v-model="profile"
-          :data-id="`nvidia-grid-${props.pciDeviceIndex}-input`"
-          type="text"
-        />
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-nvidia-grid-new
+    v-if="isNewView"
+    v-model="model"
+    :pci-device-index="props.pciDeviceIndex"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-nvidia-grid-old
+    v-else
+    v-model="model"
+    :pci-device-index="props.pciDeviceIndex"
+  />
 </template>
 
 <script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const model = defineModel<string>({required: true})
 
 const props = defineProps<{
-  modelValue: string
   pciDeviceIndex: number
 }>()
-const emits = defineEmits<{
-  (event: 'update:model-value', value: string): void
-}>()
-
-const profile = computed<string>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue) {
-    emits('update:model-value', newValue)
-  },
-})
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 </script>
 
 <style lang="scss" scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/nvidiaGrid/NvidiaGridNew.vue

@@ -0,0 +1,30 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.common.nvidiaGridGpuProfile }}
+    </template>
+    <template #stackBlockContent>
+      <ui-input
+        :id="`nvidia-grid-${props.pciDeviceIndex}`"
+        v-model="model"
+        :test-id="`nvidia-grid-${props.pciDeviceIndex}-input`"
+        type="text"
+        size="sm"
+      />
+    </template>
+  </ui-stack-block>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const model = defineModel<string>({ required: true })
+
+const props = defineProps<{
+  pciDeviceIndex: number
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/nvidiaGrid/NvidiaGridOld.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.nvidiaGridGpuProfile }}
+      </template>
+      <template #stackBlockContent>
+        <input
+          :id="`nvidia-grid-${props.pciDeviceIndex}`"
+          v-model="model"
+          :data-id="`nvidia-grid-${props.pciDeviceIndex}-input`"
+          type="text"
+        />
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const model = defineModel<string>({required: true})
+
+const props = defineProps<{
+  pciDeviceIndex: number
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/typeSelection/TypeSelection.vue

@@ -1,52 +1,30 @@
 <template>
-  <div>
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockContent>
-        <div class="flex-align-center">
-          <div
-            v-for="(item, index) in options"
-            :key="item"
-            class="flex-align-center"
-          >
-            <input
-              :id="`pci-device-radio-input-${props.pciDeviceIndex}-${index}`"
-              v-model="selectedType"
-              type="radio"
-              :value="item"
-              :disabled="!!index"
-              :data-id="`pci-device-radio-input-${props.pciDeviceIndex}-${index}`"
-            />
-            <label
-              :for="`pci-device-radio-input-${props.pciDeviceIndex}-${index}`"
-              >{{ item.text }}</label
-            >
-          </div>
-        </div>
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-type-selection-new
+    v-if="isNewView"
+    v-model="model"
+    :options="props.options"
+    :pci-device-index="props.pciDeviceIndex"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-type-selection-old
+    v-else
+    v-model="model"
+    :options="props.options"
+    :pci-device-index="props.pciDeviceIndex"
+  />
 </template>
 
 <script setup lang="ts">
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 
+const model = defineModel<UI_I_OptionItem>({required: true})
+
 const props = defineProps<{
-  modelValue: UI_I_OptionItem
   options: UI_I_OptionItem[]
   pciDeviceIndex: number
 }>()
-const emits = defineEmits<{
-  (event: 'update:model-value', value: UI_I_OptionItem): void
-}>()
 
-const selectedType = computed<UI_I_OptionItem>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue: UI_I_OptionItem) {
-    emits('update:model-value', newValue)
-  },
-})
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 </script>
 
 <style scoped lang="scss">

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/typeSelection/TypeSelectionNew.vue

@@ -0,0 +1,46 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockContent>
+      <div class="type-selection-content">
+        <div v-for="(item, index) in props.options" :key="item">
+          <ui-radio
+            :id="`pci-device-radio-input-${props.pciDeviceIndex}-${index}`"
+            v-model="modelLocal"
+            :value="item.value"
+            :label="item.text"
+            :disabled="!!index"
+            :test-id="`pci-device-radio-input-${props.pciDeviceIndex}-${index}`"
+          />
+        </div>
+      </div>
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const model = defineModel<UI_I_OptionItem>()
+
+const props = defineProps<{
+  options: UI_I_OptionItem[]
+  pciDeviceIndex: number
+}>()
+
+const modelLocal = computed<string>({
+  get() {
+    return model.value?.value || ''
+  },
+  set(newValue: string) {
+    model.value = props.options.find((option) => option.value === newValue)
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.type-selection-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/typeSelection/TypeSelectionOld.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <div
+            v-for="(item, index) in props.options"
+            :key="item"
+            class="flex-align-center"
+          >
+            <input
+              :id="`pci-device-radio-input-${props.pciDeviceIndex}-${index}`"
+              v-model="model"
+              type="radio"
+              :value="item"
+              :disabled="!!index"
+              :data-id="`pci-device-radio-input-${props.pciDeviceIndex}-${index}`"
+            />
+            <label
+              :for="`pci-device-radio-input-${props.pciDeviceIndex}-${index}`"
+            >{{ item.text }}</label
+            >
+          </div>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const model = defineModel<UI_I_OptionItem>()
+
+const props = defineProps<{
+  options: UI_I_OptionItem[]
+  pciDeviceIndex: number
+}>()
+</script>
+
+<style scoped lang="scss">
+input,
+label {
+  margin-right: 4px;
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.518",
+  "version": "1.4.521",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",