bfg-common 1.5.227 → 1.5.228

package/components/common/vm/actions/common/select/os/Os.vue

@@ -1,139 +1,139 @@
-<template>
-  <common-vm-actions-common-select-os-new
-    v-if="isNewView"
-    v-model:machine-type="machineType"
-    v-model:guest-os-family="guestOsFamily"
-    v-model:guest-os-version="guestOsVersion"
-    :api-error-machine-type="apiErrorMachineType"
-    :machine-type-options="machineTypeOptions"
-    :api-error-guest-os-family="apiErrorGuestOsFamily"
-    :os-options="osOptions"
-    :api-error-guest-os-version="apiErrorGuestOsVersion"
-    :versions-options="versionsOptions"
-    @change-os="onChangeOs"
-    @remove-error-by-title="onRemoveValidationError"
-  />
-  <common-vm-actions-common-select-os-old
-    v-else
-    v-model:machine-type="machineType"
-    v-model:guest-os-family="guestOsFamily"
-    v-model:guest-os-version="guestOsVersion"
-    :api-error-machine-type="apiErrorMachineType"
-    :machine-type-options="machineTypeOptions"
-    :api-error-guest-os-family="apiErrorGuestOsFamily"
-    :os-options="osOptions"
-    :api-error-guest-os-version="apiErrorGuestOsVersion"
-    :versions-options="versionsOptions"
-    @change-os="onChangeOs"
-    @remove-error-by-title="onRemoveValidationError"
-  />
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ArbitraryObject,
-} from '~/lib/models/interfaces'
-import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-const machineType = defineModel<UI_I_OptionItem | null>('machine-type', {
-  required: true,
-})
-const guestOsFamily = defineModel<UI_I_OptionItem | null>('guest-os-family', {
-  required: true,
-})
-const guestOsVersion = defineModel<UI_I_OptionItem | null>('guest-os-version', {
-  required: true,
-})
-
-const props = defineProps<{
-  familiesOptions: UI_I_OptionItem[]
-  machineTypesOptions: UI_I_OptionItem[]
-  versionsOptions: UI_I_ArbitraryObject<UI_I_OptionItem[]>
-  errorValidationFields: UI_I_ErrorValidationField[]
-}>()
-const emits = defineEmits<{
-  (event: 'remove-error-by-title', value: string): void
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const machineTypeOptions = ref<UI_I_OptionItem[]>(props.machineTypesOptions)
-watch(
-  () => props.machineTypesOptions,
-  (newValue) => {
-    machineTypeOptions.value = [...newValue]
-    if (machineType.value) return
-
-    const q35MachineIndex = newValue.findIndex((item) =>
-      item.value.toLowerCase().includes('q35')
-    )
-    if (q35MachineIndex === -1) {
-      machineType.value = newValue[0]
-    } else {
-      machineType.value = newValue[q35MachineIndex]
-    }
-  },
-  { immediate: true }
-)
-
-const osOptions = ref<UI_I_OptionItem[]>(props.familiesOptions)
-watch(
-  () => props.familiesOptions,
-  (newValue) => {
-    osOptions.value = [...newValue]
-    if (guestOsFamily.value) return
-    guestOsFamily.value = newValue[0]
-  },
-  { immediate: true }
-)
-const onChangeOs = (): void => {
-  guestOsVersion.value = versionsOptions.value[0]
-}
-
-const versionsOptions = computed<UI_I_OptionItem[]>(() => {
-  if (!guestOsFamily.value) return []
-
-  return props.versionsOptions[guestOsFamily.value.value] || []
-})
-watch(
-  versionsOptions,
-  () => {
-    if (guestOsVersion.value) return
-
-    guestOsVersion.value = versionsOptions.value[0]
-  },
-  { immediate: true }
-)
-
-const apiErrorMachineType = computed<string>(() => {
-  return (
-    props.errorValidationFields?.find(
-      (message) => message.field === 'machine_type'
-    )?.error_message || ''
-  )
-})
-
-const apiErrorGuestOsFamily = computed<string>(() => {
-  return (
-    props.errorValidationFields?.find(
-      (message) => message.field === 'guest_os_family'
-    )?.error_message || ''
-  )
-})
-
-const apiErrorGuestOsVersion = computed<string>(() => {
-  return (
-    props.errorValidationFields?.find(
-      (message) => message.field === 'guest_os_version'
-    )?.error_message || ''
-  )
-})
-
-const onRemoveValidationError = (type: string): void => {
-  emits('remove-error-by-title', type)
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-vm-actions-common-select-os-new
+    v-if="isNewView"
+    v-model:machine-type="machineType"
+    v-model:guest-os-family="guestOsFamily"
+    v-model:guest-os-version="guestOsVersion"
+    :api-error-machine-type="apiErrorMachineType"
+    :machine-type-options="machineTypeOptions"
+    :api-error-guest-os-family="apiErrorGuestOsFamily"
+    :os-options="osOptions"
+    :api-error-guest-os-version="apiErrorGuestOsVersion"
+    :versions-options="versionsOptions"
+    @change-os="onChangeOs"
+    @remove-error-by-title="onRemoveValidationError"
+  />
+  <common-vm-actions-common-select-os-old
+    v-else
+    v-model:machine-type="machineType"
+    v-model:guest-os-family="guestOsFamily"
+    v-model:guest-os-version="guestOsVersion"
+    :api-error-machine-type="apiErrorMachineType"
+    :machine-type-options="machineTypeOptions"
+    :api-error-guest-os-family="apiErrorGuestOsFamily"
+    :os-options="osOptions"
+    :api-error-guest-os-version="apiErrorGuestOsVersion"
+    :versions-options="versionsOptions"
+    @change-os="onChangeOs"
+    @remove-error-by-title="onRemoveValidationError"
+  />
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ArbitraryObject,
+} from '~/lib/models/interfaces'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const machineType = defineModel<UI_I_OptionItem | null>('machine-type', {
+  required: true,
+})
+const guestOsFamily = defineModel<UI_I_OptionItem | null>('guest-os-family', {
+  required: true,
+})
+const guestOsVersion = defineModel<UI_I_OptionItem | null>('guest-os-version', {
+  required: true,
+})
+
+const props = defineProps<{
+  familiesOptions: UI_I_OptionItem[]
+  machineTypesOptions: UI_I_OptionItem[]
+  versionsOptions: UI_I_ArbitraryObject<UI_I_OptionItem[]>
+  errorValidationFields: UI_I_ErrorValidationField[]
+}>()
+const emits = defineEmits<{
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const machineTypeOptions = ref<UI_I_OptionItem[]>(props.machineTypesOptions)
+watch(
+  () => props.machineTypesOptions,
+  (newValue) => {
+    machineTypeOptions.value = [...newValue]
+    if (machineType.value) return
+
+    const q35MachineIndex = newValue.findIndex((item) =>
+      item.value.toLowerCase().includes('q35')
+    )
+    if (q35MachineIndex === -1) {
+      machineType.value = newValue[0]
+    } else {
+      machineType.value = newValue[q35MachineIndex]
+    }
+  },
+  { immediate: true }
+)
+
+const osOptions = ref<UI_I_OptionItem[]>(props.familiesOptions)
+watch(
+  () => props.familiesOptions,
+  (newValue) => {
+    osOptions.value = [...newValue]
+    if (guestOsFamily.value) return
+    guestOsFamily.value = newValue[0]
+  },
+  { immediate: true }
+)
+const onChangeOs = (): void => {
+  guestOsVersion.value = versionsOptions.value[0]
+}
+
+const versionsOptions = computed<UI_I_OptionItem[]>(() => {
+  if (!guestOsFamily.value) return []
+
+  return props.versionsOptions[guestOsFamily.value.value] || []
+})
+watch(
+  versionsOptions,
+  () => {
+    if (guestOsVersion.value) return
+
+    guestOsVersion.value = versionsOptions.value[0]
+  },
+  { immediate: true }
+)
+
+const apiErrorMachineType = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'machine_type'
+    )?.error_message || ''
+  )
+})
+
+const apiErrorGuestOsFamily = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'guest_os_family'
+    )?.error_message || ''
+  )
+})
+
+const apiErrorGuestOsVersion = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'guest_os_version'
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (type: string): void => {
+  emits('remove-error-by-title', type)
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/actions/common/select/storage/Storage.vue

@@ -44,6 +44,7 @@ const emits = defineEmits<{
   (event: 'submit', value: UI_I_DatastoreTableItem): void
   (event: 'change-storage', value: UI_I_DatastoreTableItem): void
   (event: 'is-selected-row', value: boolean): void
+  (event: 'has-errors', value: boolean): void
 }>()
 
 const { $store }: any = useNuxtApp()
@@ -134,6 +135,13 @@ const showValidationErrors = (arr: string[]): void => {
 const onRemoveValidationErrors = (): void => {
   errors.value = []
 }
+watch(
+  errors,
+  (newValue) => {
+    emits('has-errors', !newValue.length)
+  },
+  { immediate: true, deep: true }
+)
 </script>
 
 <style scoped lang="scss"></style>

package/components/common/vm/actions/common/select/storage/new/New.vue

@@ -7,7 +7,8 @@
         :items="props.errors"
         status="alert-danger"
         test-id="storage-alert"
-        @remove="emits('remove-error')"
+        size="md"
+        @hide="emits('remove-error')"
       />
     </Teleport>
 
@@ -41,18 +42,23 @@
       <p class="compatibility">
         {{ localization.inventorySummary.compatibility }}
       </p>
-      <div class="compatibility-message flex-align-center">
+      <div class="compatibility-message flex-align-start">
         <ui-skeleton-item v-if="loading" width="160px" height="16px" />
         <template v-else>
           <template v-if="props.selectedStorage">
-            <ui-icon name="success-fill" width="16" height="16" />
+            <ui-icon
+              name="success-fill"
+              width="16"
+              height="16"
+              class="icon-compatibility-alert"
+            />
             <span class="compatibility-message-description">{{
               localization.common.compatibilityChecksSucceeded
             }}</span>
           </template>
           <template v-else>
             <!--            <ui-icon name="error" width="16" height="16" />-->
-            <span class="compatibility-message-description">{{
+            <span class="compatibility-message-description empty">{{
               localization.vmWizard.noStorageSelected
             }}</span>
           </template>
@@ -139,18 +145,23 @@ const onSelectRow = (selectedData: UI_I_DataTable): void => {
   --select-storage-border-color: #e9ebed;
   --select-storage-bg-color: #ffffff;
   --select-storage-title-color: #4d5d69;
+  --select-storage-compatibility-bg-color: #ffffff;
   --select-storage-compatibility-description-color: #4d5d69;
+  --select-storage-compatibility-empty-description-color: #9da6ad;
 }
 :root.dark-theme {
   --select-storage-border-color: #e9ebed1f;
   --select-storage-bg-color: var(--wizard-right-bg);
   --select-storage-title-color: #e9eaec;
-  --select-storage-compatibility-description-color: #9da6ad;
+  --select-storage-compatibility-bg-color: #1b2a371f;
+  --select-storage-compatibility-description-color: #e9eaec;
+  --select-storage-compatibility-empty-description-color: #9da6ad;
 }
 </style>
 <style scoped lang="scss">
 .select-storage {
-  padding-top: 16px;
+  padding-top: 12px;
+  padding-bottom: 16px;
 
   .storage-count {
     font-size: 16px;
@@ -187,12 +198,20 @@ const onSelectRow = (selectedData: UI_I_DataTable): void => {
       border-radius: 8px;
       border: 1px solid var(--select-storage-border-color);
       padding: 12px;
-      background-color: var(--select-storage-bg-color);
-      gap: 12px;
+      background-color: var(--select-storage-compatibility-bg-color);
+      gap: 10px;
 
+      .icon-compatibility-alert {
+        min-width: 16px;
+        min-height: 16px;
+      }
       .compatibility-message-description {
         font-size: 13px;
         color: var(--select-storage-compatibility-description-color);
+
+        &.empty {
+          color: var(--select-storage-compatibility-empty-description-color);
+        }
       }
     }
   }

package/components/common/vm/actions/common/select/storage/new/lib/config/table.ts

@@ -98,7 +98,7 @@ export const tableDataFunc = (
       isSortable: false,
       sort: 'asc',
       sortColumn: true,
-      width: '150px',
+      width: '190px',
       show: true,
       filter: true,
     },
@@ -120,7 +120,7 @@ export const tableDataFunc = (
       isSortable: false,
       sort: 'asc',
       sortColumn: true,
-      width: '150px',
+      width: '190px',
       show: true,
       filter: true,
     },
@@ -153,16 +153,16 @@ export const tableDataFunc = (
       isSortable: false,
       sort: 'asc',
       sortColumn: true,
-      width: '150px',
+      width: '190px',
       show: true,
       filter: true,
     },
-    {
-      col: 13,
-      colName: 'default-actions',
-      text: '',
-      show: true,
-    },
+    // {
+    //   col: 13,
+    //   colName: 'default-actions',
+    //   text: '',
+    //   show: true,
+    // },
   ],
 
   body: [],

package/components/common/vm/actions/common/select/storage/new/lib/models/interfaces.ts

@@ -1,6 +1,6 @@
-export interface UI_I_StatusData {
-  iconClassName: string
-  color: string
-  isState: boolean
-  text: string
+export interface UI_I_StatusData {
+  iconClassName: string
+  color: string
+  isState: boolean
+  text: string
 }

package/components/common/vm/actions/common/select/storage/new/lib/utils/utils.ts

@@ -1,21 +1,21 @@
-import type { UI_I_StatusData } from '~/components/common/vm/actions/common/select/storage/new/lib/models/interfaces'
-
-export const getStatus = (
-  status: boolean,
-  text1?: string,
-  text2?: string
-): UI_I_StatusData => {
-  return status
-    ? {
-        iconClassName: 'status-check',
-        color: 'green',
-        isState: true,
-        text: text1 || 'True',
-      }
-    : {
-        iconClassName: 'close',
-        color: 'red',
-        isState: true,
-        text: text2 || 'False',
-      }
-}
+import type { UI_I_StatusData } from '~/components/common/vm/actions/common/select/storage/new/lib/models/interfaces'
+
+export const getStatus = (
+  status: boolean,
+  text1?: string,
+  text2?: string
+): UI_I_StatusData => {
+  return status
+    ? {
+        iconClassName: 'status-check',
+        color: 'green',
+        isState: true,
+        text: text1 || 'True',
+      }
+    : {
+        iconClassName: 'close',
+        color: 'red',
+        isState: true,
+        text: text2 || 'False',
+      }
+}

package/components/common/vm/actions/editSettings/new/New.vue

@@ -18,7 +18,7 @@
           v-if="!vmSettings || props.loading"
         />
 
-        <div v-else class="vm-context">
+        <div v-else class="vm-context px-8">
           <common-vm-actions-common-customize-hardware
             v-model:vm-name="vmName"
             v-model:guest-machine-type="vmSettings.guestMachineType"

package/components/common/vm/actions/editSettings/new/Skeleton.vue

@@ -1,88 +1,88 @@
-<template>
-  <div class="skeleton-wrap">
-    <div class="tabs">
-      <ui-skeleton-item width="64px" height="16px" />
-      <ui-skeleton-item width="64px" height="16px" />
-    </div>
-    <div class="actions">
-      <ui-skeleton-item width="80px" height="16px" />
-      <ui-skeleton-item width="152px" height="32px" border-radius="6px" />
-    </div>
-    <div class="stack-block-wrap">
-      <div class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-
-      <div v-for="item in 2" :key="item" class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
-          <ui-skeleton-item width="80px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-
-      <div v-for="item in 5" :key="item" class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="196px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.skeleton-wrap {
-  padding: 0 32px;
-
-  .tabs {
-    display: flex;
-    align-items: center;
-    gap: 32px;
-    padding: 8px 0 12px;
-    border-bottom: 1px solid var(--divider-color);
-  }
-
-  .actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 12px 0;
-  }
-
-  .stack-block-wrap {
-    display: grid;
-    grid-gap: 12px;
-
-    .stack-block {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 8px 12px;
-      background: var(--stack-block-bg-color);
-      border-radius: 6px;
-
-      .stack-label,
-      .stack-value {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="skeleton-wrap">
+    <div class="tabs">
+      <ui-skeleton-item width="64px" height="16px" />
+      <ui-skeleton-item width="64px" height="16px" />
+    </div>
+    <div class="actions">
+      <ui-skeleton-item width="80px" height="16px" />
+      <ui-skeleton-item width="152px" height="32px" border-radius="6px" />
+    </div>
+    <div class="stack-block-wrap">
+      <div class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+
+      <div v-for="item in 2" :key="item" class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
+          <ui-skeleton-item width="80px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+
+      <div v-for="item in 5" :key="item" class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="196px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.skeleton-wrap {
+  padding: 0 32px;
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    padding: 8px 0 12px;
+    border-bottom: 1px solid var(--divider-color);
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 12px 0;
+  }
+
+  .stack-block-wrap {
+    display: grid;
+    grid-gap: 12px;
+
+    .stack-block {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 12px;
+      background: var(--stack-block-bg-color);
+      border-radius: 6px;
+
+      .stack-label,
+      .stack-value {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+    }
+  }
+}
+</style>