bfg-common 1.5.239 → 1.5.240

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

@@ -8,6 +8,7 @@
     :selected-storage="selectedStorage"
     :hide-compatibility="props.hideCompatibility"
     :hide-alert="props.hideAlert"
+    :is-show-name-icon="props.isShowNameIcon"
     @remove-error="onRemoveValidationErrors"
     @change-storage="changeStorage"
   />
@@ -39,6 +40,7 @@ const props = defineProps<{
   storage?: UI_I_DatastoreTableItem
   hideCompatibility?: boolean
   hideAlert?: boolean
+  isShowNameIcon?: boolean
 }>()
 const emits = defineEmits<{
   (event: 'submit', value: UI_I_DatastoreTableItem): void

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

@@ -29,6 +29,10 @@
             {{ storageCount }}
           </h3></template
         >
+        <template v-if="props.isShowNameIcon" #name="{ item }">
+          <ui-icon name="datastores" width="18" height="18" class="mr-1" />
+          {{ item.text }}
+        </template>
         <template #state="{ item }">
           <ui-chip :color="item.data.color" rounded>
             <ui-icon :name="item.data.iconClassName" width="14" height="14" />
@@ -90,6 +94,7 @@ const props = defineProps<{
   selectedStorage: UI_I_DatastoreTableItem | null
   hideCompatibility?: boolean
   hideAlert?: boolean
+  isShowNameIcon?: boolean
 }>()
 const emits = defineEmits<{
   (event: 'remove-error'): void
@@ -131,7 +136,7 @@ watch(
 )
 
 const onSelectRow = (selectedData: UI_I_DataTable): void => {
-  const selectedId = selectedData[0]?.data[0]?.key
+  const selectedId = selectedData[0]?.data[0]?.data.id
   const selectedItemIndex = props.datastore.findIndex(
     (item) => item.id === selectedId
   )

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

@@ -257,9 +257,10 @@ export const tableBodyFunc = (
       isSelected: key === selectedRow,
       data: [
         {
-          key: item.id,
+          key: 'name',
           col: 0,
           text: item.name,
+          data: { id: item.id },
         },
         {
           key: 'state',

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/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>