bfg-common 1.5.343 → 1.5.345

package/components/common/vmt/actions/add/lib/models/interfaces.ts

@@ -1,23 +1,23 @@
-import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-
-export interface UI_I_VmtForm {
-  name: string
-  compatibility: string
-  guestMachineType: UI_I_OptionItem | null
-  guestOsFamily: UI_I_OptionItem | null
-  guestOsVersion: UI_I_OptionItem | null
-  computeResource: UI_I_TreeNode | null
-  storage: UI_I_DatastoreTableItem | null
-  locationPath: string
-}
-
-export interface I_DynamicSteps {
-  selectName: number
-  selectStorage: number
-  selectGuestOSMachineType: number
-  customizeHardware: number
-  readyComplete: number
-  scheduledTasks?: number
-}
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+
+export interface UI_I_VmtForm {
+  name: string
+  compatibility: string
+  guestMachineType: UI_I_OptionItem | null
+  guestOsFamily: UI_I_OptionItem | null
+  guestOsVersion: UI_I_OptionItem | null
+  computeResource: UI_I_TreeNode | null
+  storage: UI_I_DatastoreTableItem | null
+  locationPath: string
+}
+
+export interface I_DynamicSteps {
+  selectName: number
+  selectStorage: number
+  selectGuestOSMachineType: number
+  customizeHardware: number
+  readyComplete: number
+  scheduledTasks?: number
+}

package/components/common/wizards/datastore/add/steps/hostAccessibility/table/new/New.vue

@@ -32,7 +32,7 @@ import type {
   UI_I_DataTableHeader,
   UI_I_TableTexts,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type {UI_I_DataTableSkeleton} from "~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces";
+import type { UI_I_DataTableSkeleton } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import {
   getBodyDataFunc,
   getHeaderDataFunc,
@@ -101,19 +101,6 @@ const onSelectRow = (value: UI_I_DataTableBody[]): void => {
 <style lang="scss" scoped>
 .host-accessibility-table {
   margin-bottom: 10px;
-
-  :deep(.bottom-grid-content) {
-    border: 1px solid var(--select-storage-border-color);
-    border-radius: 8px;
-    padding: 12px;
-    background-color: var(--select-storage-bg-color);
-  }
-  :deep(.select-row-item) {
-    background-color: var(--select-storage-bg-color);
-  }
-  :deep(.table-container .table-title) {
-    margin-bottom: 12px;
-  }
   .icon {
     margin-right: 4px;
   }

package/components/common/wizards/datastore/add/steps/hostAccessibility/table/new/lib/config/compatibleTable.ts

@@ -45,6 +45,7 @@ export const options: UI_I_DataTableOptions = {
   isResizable: true,
   showSelectedRows: true,
   showColumnManager: true,
+  inBlock: false,
   inModal: true
 }
 

package/components/common/wizards/datastore/add/steps/nameAndDevice/NameAndDeviceNew.vue

@@ -173,7 +173,6 @@ const onSelectHost = (event: string): void => {
   }
   .row {
     &__title {
-      padding-top: 8px;
       max-width: 240px;
       width: 100%;
       display: flex;
@@ -183,9 +182,6 @@ const onSelectHost = (event: string): void => {
       font-weight: 400;
       font-size: 13px;
       line-height: 20px;
-      letter-spacing: 0;
-      vertical-align: middle;
-      align-self: flex-start;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;

package/components/common/wizards/datastore/add/steps/nameAndDevice/table/new/New.vue

@@ -16,25 +16,40 @@
       @sort="onSorting"
     >
       <template #icon="{ item }">
-        <span :class="['icon', item.data.iconClassName]" >
-            <ui-icon name="disk" width="18" height="18" />
-        </span>
+        <ui-icon
+          :name="item.data.iconClassName"
+          width="18"
+          height="18"
+          class="icon"
+        />
         <span class="text-ellipsis">
           {{ item.text }}
         </span>
       </template>
 
       <template #status="{ item }">
-        <ui-chip :test-id="item.data.testId" :color="item.data.chipColor" rounded>
+        <ui-chip
+          :test-id="item.data.testId"
+          :color="item.data.chipColor"
+          size="sm"
+          rounded
+        >
           <ui-icon
-              :name="item.data.icon"
-              width="14px"
-              height="14px"
-              class="chip-icon"
+            :name="item.data.icon"
+            width="14px"
+            height="14px"
+            class="chip-icon"
           ></ui-icon>
           {{ item.text }}
         </ui-chip>
       </template>
+
+      <template #skeleton-header>
+        <div class="flex justify-between items-center">
+          <ui-skeleton-item width="80" height="20" />
+          <ui-skeleton-item width="88" height="28" border-radius="6" />
+        </div>
+      </template>
     </ui-data-table>
   </div>
 </template>
@@ -47,7 +62,7 @@ import type {
   UI_I_DataTableBody,
   UI_I_TableTexts,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type {UI_I_DataTableSkeleton} from "~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces";
+import type { UI_I_DataTableSkeleton } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import {
   options,
   getHeaderDataFunc,
@@ -55,8 +70,9 @@ import {
 } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/table/new/lib/config/lunDiskTable'
 import type { UI_I_CreateStorageLunDiskItem } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/table/lib/models/interfaces'
 
-
-const selectedLunDisks = defineModel<UI_I_CreateStorageLunDiskItem[]>({ required: true })
+const selectedLunDisks = defineModel<UI_I_CreateStorageLunDiskItem[]>({
+  required: true,
+})
 const props = defineProps<{
   tableData: UI_I_CreateStorageLunDiskItem[]
   totalItems: number
@@ -87,7 +103,7 @@ const texts = computed<UI_I_TableTexts>(() => ({
 }))
 
 const tableSkeleton = ref<UI_I_DataTableSkeleton>({
-  withoutPagination: true
+  withoutPagination: true,
 })
 
 const data = computed<UI_I_DataTable>(() => ({
@@ -109,7 +125,11 @@ watch(
       return
     }
 
-    deviceBodyItems.value = getBodyDataFunc(newValue, localization.value, selectedLunDisks.value)
+    deviceBodyItems.value = getBodyDataFunc(
+      newValue,
+      localization.value,
+      selectedLunDisks.value
+    )
   },
   { deep: true, immediate: true }
 )
@@ -136,22 +156,6 @@ const onSelectRow = (value: UI_I_DataTableBody[]): void => {
 
 <style lang="scss" scoped>
 .device-table-container {
-  :deep(.bottom-grid-content) {
-    border: 1px solid var(--select-storage-border-color);
-    border-radius: 8px;
-    padding: 12px;
-    background-color: var(--select-storage-bg-color);
-  }
-  :deep(.select-row-item) {
-    background-color: var(--select-storage-bg-color);
-  }
-  :deep(.table-title-actions-container) {
-    justify-content: flex-start;
-  }
-  :deep(.table-container .table-title) {
-    margin-bottom: 12px;
-  }
-
   .icon {
     margin-right: 4px;
   }

package/components/common/wizards/datastore/add/steps/nameAndDevice/table/new/lib/config/lunDiskTable.ts

@@ -113,12 +113,11 @@ export const options: UI_I_DataTableOptions = {
   showSelectedRows: true,
   showColumnManager: true,
   inModal: true,
-  // perPageOptions: [{ text: '10', value: 100, default: true }],
+  inBlock: false
   // isFocusable: false,
   // showPaginationOnTop: false,
   // showSearch: false,
   // withActions: false,
-  inBlock: true
   // showExport: false,
   // withCollapse: false,
 }

package/components/common/wizards/datastore/add/steps/readyComplete/ReadyCompleteNew.vue

@@ -157,10 +157,16 @@ const labelMaxWidth = computed<number>(() => {
         .icon {
           margin-right: 8px;
           width: 20px;
-          height: 20px;
+          height: 19px;
         }
       }
     }
+
+    &:last-child {
+      .details__list {
+        padding-bottom: 16px;
+      }
+    }
   }
 }
 </style>

package/components/common/wizards/datastore/add/steps/typeMode/TypeModeNew.vue

@@ -18,15 +18,15 @@
 
         <template #tooltip>
           <common-tooltip-help
-              :test-id="`${option.testId}-${key}`"
-              :help-id="`${option.testId}-${key}`"
-              :help-text="option.tooltipContent"
-              :title="localization.common.information"
-              icon-width="18"
-              icon-height="18"
-              dropdown-width="320px"
-              dropdown-left
-              dropdown-top
+            :test-id="`${option.testId}-${key}`"
+            :help-id="`${option.testId}-${key}`"
+            :help-text="option.tooltipContent"
+            :title="localization.common.information"
+            icon-width="18"
+            icon-height="18"
+            dropdown-width="320px"
+            dropdown-left
+            dropdown-top
           />
         </template>
       </ui-radio>

package/components/common/wizards/network/add/steps/SelectConnectionType.vue

@@ -1,104 +1,104 @@
-<template>
-  <div class="wizard-content-container add-networking-step">
-    <div class="wizard-content">
-      <form>
-        <div v-permission="'Networks.CreateSysx'" class="radio">
-          <input
-            id="vmkernel-adapter"
-            v-model="connectionTypeLocal"
-            type="radio"
-            value="0"
-            name="connection-type"
-          />
-          <label for="vmkernel-adapter" data-id="vmkernel-adapter-radio">
-            {{ localization.common.vmKernelNetworkAdapter }}
-          </label>
-        </div>
-        <div v-permission="'Networks.CreateSysx'" class="add-networking-radio-button-description">
-          {{ localization.common.vMKernelTcpIpStackHandlesTraffic }}
-        </div>
-        <div v-permission="'Networks.CreatePortGroup'" class="radio">
-          <input
-            id="virtual"
-            v-model="connectionTypeLocal"
-            type="radio"
-            value="1"
-            name="connection-type"
-          />
-          <label for="virtual" data-id="virtual-radio">
-            {{ localization.common.virtualMachinePortGroupStandardSwitch }}
-          </label>
-        </div>
-        <div
-          v-permission="'Networks.CreatePortGroup'"
-          class="add-networking-radio-button-description"
-        >
-          {{ localization.common.portGroupHandlesVirtualMachineTraffic }}
-        </div>
-        <div class="radio">
-          <input
-            id="physical-adapter"
-            v-model="connectionTypeLocal"
-            type="radio"
-            value="2"
-            name="connection-type"
-          />
-          <label for="physical-adapter" data-id="physical-adapter-radio">
-            {{ localization.common.physicalNetworkAdapter }}
-          </label>
-        </div>
-        <div class="add-networking-radio-button-description">
-          {{ localization.common.physicalNetworkAdapterHandlesNetworkTraffic }}
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-
-const props = defineProps<{
-  modelValue: string
-  project?: UI_T_Project
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const emits = defineEmits<{
-  (event: 'update:model-value', connectionType: string): void
-}>()
-
-const connectionTypeLocal = computed<string>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue: string) {
-    emits('update:model-value', newValue)
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.wizard-content {
-  height: auto;
-  width: inherit;
-  margin: 0;
-
-  .radio {
-    min-height: 20px;
-    margin: 10px 0;
-
-    label {
-      font-weight: 700;
-      margin: 6px 12px 6px 0;
-    }
-  }
-
-  .add-networking-radio-button-description {
-    padding-left: 20px;
-    color: #333;
-  }
-}
-</style>
+<template>
+  <div class="wizard-content-container add-networking-step">
+    <div class="wizard-content">
+      <form>
+        <div v-permission="'Networks.CreateSysx'" class="radio">
+          <input
+            id="vmkernel-adapter"
+            v-model="connectionTypeLocal"
+            type="radio"
+            value="0"
+            name="connection-type"
+          />
+          <label for="vmkernel-adapter" data-id="vmkernel-adapter-radio">
+            {{ localization.common.vmKernelNetworkAdapter }}
+          </label>
+        </div>
+        <div v-permission="'Networks.CreateSysx'" class="add-networking-radio-button-description">
+          {{ localization.common.vMKernelTcpIpStackHandlesTraffic }}
+        </div>
+        <div v-permission="'Networks.CreatePortGroup'" class="radio">
+          <input
+            id="virtual"
+            v-model="connectionTypeLocal"
+            type="radio"
+            value="1"
+            name="connection-type"
+          />
+          <label for="virtual" data-id="virtual-radio">
+            {{ localization.common.virtualMachinePortGroupStandardSwitch }}
+          </label>
+        </div>
+        <div
+          v-permission="'Networks.CreatePortGroup'"
+          class="add-networking-radio-button-description"
+        >
+          {{ localization.common.portGroupHandlesVirtualMachineTraffic }}
+        </div>
+        <div class="radio">
+          <input
+            id="physical-adapter"
+            v-model="connectionTypeLocal"
+            type="radio"
+            value="2"
+            name="connection-type"
+          />
+          <label for="physical-adapter" data-id="physical-adapter-radio">
+            {{ localization.common.physicalNetworkAdapter }}
+          </label>
+        </div>
+        <div class="add-networking-radio-button-description">
+          {{ localization.common.physicalNetworkAdapterHandlesNetworkTraffic }}
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const props = defineProps<{
+  modelValue: string
+  project?: UI_T_Project
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const emits = defineEmits<{
+  (event: 'update:model-value', connectionType: string): void
+}>()
+
+const connectionTypeLocal = computed<string>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue: string) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.wizard-content {
+  height: auto;
+  width: inherit;
+  margin: 0;
+
+  .radio {
+    min-height: 20px;
+    margin: 10px 0;
+
+    label {
+      font-weight: 700;
+      margin: 6px 12px 6px 0;
+    }
+  }
+
+  .add-networking-radio-button-description {
+    padding-left: 20px;
+    color: #333;
+  }
+}
+</style>