bfg-common 1.5.539 → 1.5.540

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

@@ -1,311 +1,330 @@
-<template>
-  <div :class="['select-storage', { 'in-wizard': isInWizard }]">
-    <Teleport v-if="!props.hideAlert" to="#storage-alert-wrapper">
-      <ui-alert
-        v-show="props.errors.length"
-        :messages="props.errors"
-        :items="props.errors"
-        status="alert-danger"
-        test-id="storage-alert"
-        size="md"
-        @hide="emits('remove-error')"
-      />
-    </Teleport>
-
-    <div class="table-wrap">
-      <ui-data-table
-        :data="data"
-        :options="tableOptionsLocal"
-        :loading="props.isDatastoreLoading"
-        :default-layout="false"
-        :texts="tableTexts"
-        :skeleton="skeletonData"
-        test-id="select-storage-data-table"
-        server-off
-        size="sm"
-        @select-row="onSelectRow"
-      >
-        <template v-if="!props.isInWizard" #skeleton-header>
-          <div class="flex justify-between items-center">
-            <ui-skeleton-item width="80" height="20" />
-            <ui-skeleton-item width="88" height="22" border-radius="6px" />
-          </div>
-        </template>
-        <template v-if="!props.isInWizard" #insteadOfTitleActions>
-          <h3 class="storage-count">
-            {{ storageCount }}
-          </h3>
-        </template>
-        <template #name="{ item }">
-          <ui-icon
-            name="datastores"
-            width="18"
-            height="18"
-            class="mr-1 row-datastores-icon"
-          />
-          {{ item.text }}
-        </template>
-        <template #state="{ item }">
-          <ui-chip :color="item.data.color" size="sm" rounded>
-            <ui-icon :name="item.data.iconClassName" width="12" height="12" />
-            {{ item.data.text }}
-          </ui-chip>
-        </template>
-      </ui-data-table>
-    </div>
-
-    <common-wizards-common-compatibility
-      v-if="!props.hideCompatibility"
-      :status="props.compatibility[0]"
-      :text="props.compatibility[1]"
-      :loading="props.isDatastoreLoading"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_DataTableOptions,
-  UI_I_DataTableSkeleton,
-} from 'bfg-uikit/components/ui/dataTable/models/interfaces'
-import type {
-  UI_I_DataTable,
-  UI_I_TableTexts,
-} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_CompatibilityStatus } from '~/components/common/wizards/common/compatibility/lib/models/types'
-import {
-  tableBodyFunc,
-  tableDataFunc,
-  tableOptions,
-} from '~/components/common/vm/actions/common/select/storage/new/lib/config/table'
-import { tableTextsFunc } from '~/lib/config/uiTable'
-
-const selectedRow = defineModel<number | null>('selectedRow')
-
-const props = withDefaults(
-  defineProps<{
-    datastore: UI_I_DatastoreTableItem[]
-    isDatastoreLoading: boolean
-    errors: string[]
-    selectedStorage: UI_I_DatastoreTableItem | null
-    compatibility: [UI_T_CompatibilityStatus, string]
-    hideCompatibility?: boolean
-    hideAlert?: boolean
-    isInWizard?: boolean
-    tableOptions?: UI_I_DataTableOptions
-  }>(),
-  {
-    hideCompatibility: undefined,
-    hideAlert: undefined,
-    isInWizard: undefined,
-    tableOptions: undefined,
-  }
-)
-const emits = defineEmits<{
-  (event: 'remove-error'): void
-  (event: 'change-storage', value: number): void
-}>()
-
-const tableOptionsLocal = computed<UI_I_DataTableOptions>(
-  () => props.tableOptions || tableOptions
-)
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const tableTexts = computed<UI_I_TableTexts>(() =>
-  tableTextsFunc(localization.value)
-)
-
-const storageCount = computed<string>(() =>
-  localization.value.vmWizard.storageCount.replace(
-    '{0}',
-    data.value.body.length.toString()
-  )
-)
-// const loading = ref<boolean>(true)
-const data = ref<UI_I_DataTable>(tableDataFunc(localization.value))
-
-watch(
-  () => props.datastore,
-  (newValue: UI_I_DatastoreTableItem[]) => {
-    // loading.value = true
-
-    // if (!newValue.length || data.value.body.length) return
-
-    data.value.body = tableBodyFunc(
-      newValue,
-      localization.value,
-      selectedRow.value
-    )
-
-    // loading.value = false
-  },
-  { immediate: true, deep: true }
-  // { deep: true }
-)
-
-watch(selectedRow, (newValue) => {
-  if (newValue && props.datastore.length) {
-    data.value.body = tableBodyFunc(
-      props.datastore,
-      localization.value,
-      newValue
-    )
-  }
-})
-
-const onSelectRow = (selectedData: UI_I_DataTable): void => {
-  const selectedId = selectedData[0]?.data[0]?.data.id
-  const selectedItemIndex = props.datastore.findIndex(
-    (item) => item.id === selectedId
-  )
-
-  emits('change-storage', selectedItemIndex)
-}
-
-const skeletonData = ref<UI_I_DataTableSkeleton>({
-  columnsCount: 5,
-  headColumns: [],
-  bodyColumns: [],
-})
-</script>
-
-<style>
-:root {
-  --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;
-  --select-storage-compatibility-table-column-button-hover-bg: #f6f7f8;
-  --select-storage-compatibility-table-column-button-active-hover-bg: #f0f8fd;
-}
-:root.dark-theme {
-  --select-storage-border-color: #e9ebed1f;
-  --select-storage-bg-color: var(--wizard-right-bg);
-  --select-storage-title-color: #e9eaec;
-  --select-storage-compatibility-bg-color: #1b2a371f;
-  --select-storage-compatibility-description-color: #e9eaec;
-  --select-storage-compatibility-empty-description-color: #9da6ad;
-  --select-storage-compatibility-table-column-button-hover-bg: linear-gradient(
-      0deg,
-      rgba(233, 234, 236, 0.04) 0%,
-      rgba(233, 234, 236, 0.04) 100%
-    ),
-    rgba(27, 42, 55, 0.24);
-  --select-storage-compatibility-table-column-button-active-hover-bg: linear-gradient(
-      0deg,
-      rgba(43, 162, 222, 0.08) 0%,
-      rgba(43, 162, 222, 0.08) 100%
-    ),
-    rgba(27, 42, 55, 0.24);
-}
-</style>
-<style scoped lang="scss">
-//:root.dark-theme {
-//  .select-storage {
-//    &.in-wizard {
-//      :deep(.column-manager-button) {
-//        &:hover {
-//          background: #b8bcc10a;
-//        }
-//        &.active:hover {
-//          background-color: #2785b614;
-//        }
-//      }
-//    }
-//  }
-//}
-.select-storage {
-  padding-top: 12px;
-  //padding-bottom: 16px;
-
-  :deep(.title-sm) {
-    font-size: 12px;
-  }
-
-  :deep(.table-container.default-layout) {
-    box-shadow: unset;
-    padding: 0;
-  }
-  .storage-count {
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--select-storage-title-color);
-  }
-
-  :deep(.column-manager-button) {
-    span {
-      font-size: 12px;
-      font-weight: 500;
-    }
-    //&:not(.active):hover {
-    //  background-color: var(
-    //    --select-storage-compatibility-table-column-button-hover-bg
-    //  );
-    //  color: var(--btn-table-manager-color);
-    //}
-    //&.active:hover {
-    //  background-color: var(
-    //    --select-storage-compatibility-table-column-button-active-hover-bg
-    //  );
-    //}
-  }
-
-  &:not(.in-wizard) {
-    :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;
-  }
-
-  .compatibility-wrap {
-    margin-top: 24px;
-
-    .compatibility {
-      font-size: 16px;
-      font-weight: 500;
-      color: var(--select-storage-title-color);
-      margin-bottom: 16px;
-    }
-    .compatibility-message {
-      border-radius: 8px;
-      border: 1px solid var(--select-storage-border-color);
-      padding: 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);
-        }
-      }
-    }
-  }
-  .row-datastores-icon {
-    min-width: 18px;
-  }
-}
-</style>
+<template>
+  <div :class="['select-storage', { 'in-wizard': isInWizard }]">
+    <Teleport v-if="!props.hideAlert" to="#storage-alert-wrapper">
+      <ui-alert
+        v-show="props.errors.length"
+        :messages="props.errors"
+        :items="props.errors"
+        status="alert-danger"
+        test-id="storage-alert"
+        size="md"
+        @hide="emits('remove-error')"
+      />
+    </Teleport>
+
+    <div class="table-wrap">
+      <ui-data-table
+        :data="data"
+        :options="tableOptionsLocal"
+        :loading="props.isDatastoreLoading"
+        :default-layout="false"
+        :texts="tableTexts"
+        :skeleton="skeletonData"
+        test-id="select-storage-data-table"
+        server-off
+        size="sm"
+        @select-row="onSelectRow"
+      >
+        <template v-if="!props.isInWizard" #skeleton-header>
+          <div class="flex justify-between items-center">
+            <ui-skeleton-item width="80" height="20" />
+            <ui-skeleton-item width="88" height="22" border-radius="6px" />
+          </div>
+        </template>
+        <template v-if="!props.isInWizard" #insteadOfTitleActions>
+          <h3 class="storage-count">
+            {{ storageCount }}
+          </h3>
+        </template>
+        <template #name="{ item }">
+          <ui-icon
+            name="datastores"
+            width="18"
+            height="18"
+            class="mr-1 row-datastores-icon"
+          />
+          {{ item.text }}
+        </template>
+        <template #state="{ item }">
+          <ui-chip :color="item.data.color" size="sm" rounded>
+            <ui-icon :name="item.data.iconClassName" width="12" height="12" />
+            {{ item.data.text }}
+          </ui-chip>
+        </template>
+      </ui-data-table>
+    </div>
+
+    <div v-if="!props.hideCompatibility" class="compatibility-wrap">
+      <p class="compatibility">
+        {{ localization.inventorySummary.compatibility }}
+      </p>
+      <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"
+              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 empty">{{
+              localization.vmWizard.noStorageSelected
+            }}</span>
+          </template>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_DataTableOptions,
+  UI_I_DataTableSkeleton,
+} from 'bfg-uikit/components/ui/dataTable/models/interfaces'
+import type {
+  UI_I_DataTable,
+  UI_I_TableTexts,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import {
+  tableBodyFunc,
+  tableDataFunc,
+  tableOptions,
+} from '~/components/common/vm/actions/common/select/storage/new/lib/config/table'
+import { tableTextsFunc } from '~/lib/config/uiTable'
+
+const selectedRow = defineModel<number | null>('selectedRow')
+
+const props = withDefaults(
+  defineProps<{
+    datastore: UI_I_DatastoreTableItem[]
+    isDatastoreLoading: boolean
+    errors: string[]
+    selectedStorage: UI_I_DatastoreTableItem | null
+    hideCompatibility?: boolean
+    hideAlert?: boolean
+    isInWizard?: boolean
+    tableOptions?: UI_I_DataTableOptions
+  }>(),
+  {
+    hideCompatibility: undefined,
+    hideAlert: undefined,
+    isInWizard: undefined,
+    tableOptions: undefined,
+  }
+)
+const emits = defineEmits<{
+  (event: 'remove-error'): void
+  (event: 'change-storage', value: number): void
+}>()
+
+const tableOptionsLocal = computed<UI_I_DataTableOptions>(
+  () => props.tableOptions || tableOptions
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const tableTexts = computed<UI_I_TableTexts>(() =>
+  tableTextsFunc(localization.value)
+)
+
+const storageCount = computed<string>(() =>
+  localization.value.vmWizard.storageCount.replace(
+    '{0}',
+    data.value.body.length.toString()
+  )
+)
+// const loading = ref<boolean>(true)
+const data = ref<UI_I_DataTable>(tableDataFunc(localization.value))
+
+watch(
+  () => props.datastore,
+  (newValue: UI_I_DatastoreTableItem[]) => {
+    // loading.value = true
+
+    // if (!newValue.length || data.value.body.length) return
+
+    data.value.body = tableBodyFunc(
+      newValue,
+      localization.value,
+      selectedRow.value
+    )
+
+    // loading.value = false
+  },
+  { immediate: true, deep: true }
+  // { deep: true }
+)
+
+watch(selectedRow, (newValue) => {
+  if (newValue && props.datastore.length) {
+    data.value.body = tableBodyFunc(
+      props.datastore,
+      localization.value,
+      newValue
+    )
+  }
+})
+
+const onSelectRow = (selectedData: UI_I_DataTable): void => {
+  const selectedId = selectedData[0]?.data[0]?.data.id
+  const selectedItemIndex = props.datastore.findIndex(
+    (item) => item.id === selectedId
+  )
+
+  emits('change-storage', selectedItemIndex)
+}
+
+const skeletonData = ref<UI_I_DataTableSkeleton>({
+  columnsCount: 5,
+  headColumns: [],
+  bodyColumns: [],
+})
+</script>
+
+<style>
+:root {
+  --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;
+  --select-storage-compatibility-table-column-button-hover-bg: #f6f7f8;
+  --select-storage-compatibility-table-column-button-active-hover-bg: #f0f8fd;
+}
+:root.dark-theme {
+  --select-storage-border-color: #e9ebed1f;
+  --select-storage-bg-color: var(--wizard-right-bg);
+  --select-storage-title-color: #e9eaec;
+  --select-storage-compatibility-bg-color: #1b2a371f;
+  --select-storage-compatibility-description-color: #e9eaec;
+  --select-storage-compatibility-empty-description-color: #9da6ad;
+  --select-storage-compatibility-table-column-button-hover-bg: linear-gradient(
+      0deg,
+      rgba(233, 234, 236, 0.04) 0%,
+      rgba(233, 234, 236, 0.04) 100%
+    ),
+    rgba(27, 42, 55, 0.24);
+  --select-storage-compatibility-table-column-button-active-hover-bg: linear-gradient(
+      0deg,
+      rgba(43, 162, 222, 0.08) 0%,
+      rgba(43, 162, 222, 0.08) 100%
+    ),
+    rgba(27, 42, 55, 0.24);
+}
+</style>
+<style scoped lang="scss">
+//:root.dark-theme {
+//  .select-storage {
+//    &.in-wizard {
+//      :deep(.column-manager-button) {
+//        &:hover {
+//          background: #b8bcc10a;
+//        }
+//        &.active:hover {
+//          background-color: #2785b614;
+//        }
+//      }
+//    }
+//  }
+//}
+.select-storage {
+  padding-top: 12px;
+  //padding-bottom: 16px;
+
+  :deep(.title-sm) {
+    font-size: 12px;
+  }
+
+  :deep(.table-container.default-layout) {
+    box-shadow: unset;
+    padding: 0;
+  }
+  .storage-count {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--select-storage-title-color);
+  }
+
+  :deep(.column-manager-button) {
+    span {
+      font-size: 12px;
+      font-weight: 500;
+    }
+    //&:not(.active):hover {
+    //  background-color: var(
+    //    --select-storage-compatibility-table-column-button-hover-bg
+    //  );
+    //  color: var(--btn-table-manager-color);
+    //}
+    //&.active:hover {
+    //  background-color: var(
+    //    --select-storage-compatibility-table-column-button-active-hover-bg
+    //  );
+    //}
+  }
+
+  &:not(.in-wizard) {
+    :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;
+  }
+
+  .compatibility-wrap {
+    margin-top: 24px;
+
+    .compatibility {
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--select-storage-title-color);
+      margin-bottom: 16px;
+    }
+    .compatibility-message {
+      border-radius: 8px;
+      border: 1px solid var(--select-storage-border-color);
+      padding: 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);
+        }
+      }
+    }
+  }
+  .row-datastores-icon {
+    min-width: 18px;
+  }
+}
+</style>

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
 }