bfg-common 1.5.244 → 1.5.245

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

@@ -16,7 +16,7 @@
       <ui-data-table
         :data="data"
         :options="tableOptions"
-        :loading="loading"
+        :loading="props.isDatastoreLoading"
         :default-layout="false"
         :texts="tableTexts"
         test-id="select-storage-data-table"
@@ -29,6 +29,10 @@
             {{ storageCount }}
           </h3></template
         >
+        <template #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" />
@@ -86,6 +90,7 @@ const selectedRow = defineModel<number | null>('selectedRow')
 
 const props = defineProps<{
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   errors: string[]
   selectedStorage: UI_I_DatastoreTableItem | null
   hideCompatibility?: boolean
@@ -108,13 +113,13 @@ const storageCount = computed<string>(() =>
     data.value.body.length.toString()
   )
 )
-const loading = ref<boolean>(true)
+// const loading = ref<boolean>(true)
 const data = ref<UI_I_DataTable>(tableDataFunc(localization.value))
 
 watch(
   () => props.datastore,
   (newValue: UI_I_DatastoreTableItem[]) => {
-    loading.value = true
+    // loading.value = true
 
     // if (!newValue.length || data.value.body.length) return
 
@@ -124,14 +129,14 @@ watch(
       selectedRow.value
     )
 
-    loading.value = false
+    // loading.value = false
   },
   { immediate: true, deep: true }
   // { deep: true }
 )
 
 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/EditSettings.vue

@@ -8,6 +8,7 @@
     :project="props.project"
     :loading="loadingLocal"
     :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
     :networks-table="props.networksTable"
     :selected-nav-item="selectedNavItem"
     :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
@@ -42,6 +43,7 @@
     :project="props.project"
     :loading="loadingLocal"
     :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
     :networks-table="props.networksTable"
     :selected-nav-item="selectedNavItem"
     :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
@@ -110,6 +112,7 @@ const props = defineProps<{
   vmCpuHelpTextSecond: string
   vmId: string
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   validateSendDataFunc: UI_T_EditVmFinishFunc
   getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
   state?: string | number

package/components/common/vm/actions/editSettings/EditSettingsOld.vue

@@ -50,6 +50,7 @@
             :state="props.state"
             :get-datastore-table-func="props.getDatastoreTableFunc"
             :datastore="props.datastore"
+            :is-datastore-loading="props.isDatastoreLoading"
             :customize-hardware-submit="props.customizeHardwareSubmit"
             is-edit
             @get-storage="emits('get-storage', $event)"
@@ -103,6 +104,7 @@ const props = defineProps<{
   project: UI_T_Project
   loading: boolean
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   networksTable: UI_I_NetworkTableItem[]
   selectedNavItem: UI_T_SelectedNavItem
   vmCpuHelpTextSecond: string

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

@@ -53,6 +53,7 @@
             :state="props.state"
             :get-datastore-table-func="props.getDatastoreTableFunc"
             :datastore="props.datastore"
+            :is-datastore-loading="props.isDatastoreLoading"
             :customize-hardware-submit="props.customizeHardwareSubmit"
             is-edit
             @get-storage="emits('get-storage', $event)"
@@ -110,6 +111,7 @@ const props = defineProps<{
   project: UI_T_Project
   loading: boolean
   datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
   networksTable: UI_I_NetworkTableItem[]
   selectedNavItem: UI_T_SelectedNavItem
   vmCpuHelpTextSecond: string

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>

package/components/common/wizards/datastore/add/New.vue

@@ -21,14 +21,9 @@
             <div class="subtitle-block flex-row">
               <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
 
-              <common-tooltip-help
-                  test-id="datastore-type-subtitle"
-                  help-id="datastore-type-subtitle-icon"
-                  :help-text="localization.common.datastoreTypeHelpDesc"
-                  :title="localization.common.information"
-                  dropdown-width="272px"
-                  dropdown-left
-                  dropdown-top
+              <common-wizards-datastore-add-steps-common-tooltip-info
+                id="datastore-type-subtitle-tooltip"
+                :description="localization.common.datastoreTypeHelpDesc"
               />
             </div>
           </div>

package/components/common/wizards/datastore/add/steps/common/tooltipInfo/TooltipInfo.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="tooltip-info">
+    <ui-icon
+      :id="`${props.id}-info-trigger`"
+      name="info"
+      width="16"
+      height="16"
+      :class="['tooltip-info__icon pointer', { active: isShowInfo }]"
+      @click.stop="isShowInfo = !isShowInfo"
+    />
+    <ui-popup-window
+      v-model="isShowInfo"
+      top
+      left
+      width="272px"
+      :elem-id="`${props.id}-info-trigger`"
+    >
+      <div class="common-widget-info">
+        <div class="flex justify-between">
+          <div class="flex">
+            <ui-icon name="info-2" width="16px" height="16px" />
+            <span class="title"> {{ localization.common.information }}</span>
+          </div>
+          <ui-icon
+            name="close"
+            class="pointer hide-icon"
+            width="16px"
+            height="16px"
+            @click.stop="isShowInfo = false"
+          />
+        </div>
+
+        <div class="common-widget-info-description">
+          {{ props.description }}
+        </div>
+      </div>
+    </ui-popup-window>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  id: string
+  description: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowInfo = ref<boolean>(false)
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.tooltip-info {
+  @include flex($align: center);
+  &__icon {
+    color: var(--form-icon-color);
+    &:hover {
+      color: var(--close-icon);
+    }
+    &.active {
+      color: var(--btn-primary-fill-bg-color);
+    }
+  }
+
+  .common-widget-info {
+    padding: 16px;
+
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16px;
+      color: var(--zabbix-text-color);
+      margin-left: 8px;
+    }
+
+    .common-widget-info-description {
+      font-size: 13px;
+      line-height: 15.73px;
+      color: var(--zabbix-text-color);
+      margin-top: 12px;
+      white-space: pre-line;
+    }
+
+    svg {
+      color: var(--alert-icon);
+      min-width: 16px;
+    }
+  }
+}
+</style>

package/components/common/wizards/datastore/add/steps/nameAndConfigure/NameAndConfigureNew.vue

@@ -26,15 +26,9 @@
         <span class="basics-step-row-title-text">
           {{ localization.common.folder }}
         </span>
-
-        <common-tooltip-help
-            test-id="configuration-folder-help"
-            help-id="configuration-folder-help-icon"
-            :title="localization.common.information"
-            :help-text="'Specify the folder path - for example, /vols/vol0/datastore-001'"
-            dropdown-width="272px"
-            dropdown-left
-            dropdown-top
+        <common-wizards-datastore-add-steps-common-tooltip-info
+          :id="'option.testId'"
+          :description="'Specify the folder path - for example, /vols/vol0/datastore-001'"
         />
       </div>
       <div class="basics-step-row-content">
@@ -57,14 +51,9 @@
         <span class="basics-step-row-title-text">
           {{ localization.common.server }}
         </span>
-        <common-tooltip-help
-            test-id="configuration-server-help"
-            help-id="configuration-server-help-icon"
-            :title="localization.common.information"
-            :help-text="'Specify the server address - for example, nas, nas.it.com or 192.168.0.1.'"
-            dropdown-width="272px"
-            dropdown-left
-            dropdown-top
+        <common-wizards-datastore-add-steps-common-tooltip-info
+          :id="'option.testIdserver'"
+          :description="'Specify the server address - for example, nas, nas.it.com or 192.168.0.1.'"
         />
       </div>
       <div class="basics-step-row-content">

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

@@ -32,15 +32,9 @@
         <span class="row__title-text">
           {{ localization.common.selectHost }}
         </span>
-
-        <common-tooltip-help
-            test-id="device-select-host-tooltip"
-            help-id="device-select-host-tooltip"
-            :title="localization.common.information"
-            :help-text="localization.common.selectHostToViewAccessible"
-            dropdown-width="272px"
-            dropdown-left
-            dropdown-top
+        <common-wizards-datastore-add-steps-common-tooltip-info
+          id="device-select-host-tooltip"
+          :description="localization.common.selectHostToViewAccessible"
         />
       </div>
       <div v-if="props.isShowSelectHost" class="row__content">

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

@@ -17,14 +17,9 @@
         </template>
 
         <template #tooltip>
-          <common-tooltip-help
-              :test-id="`${option.testId}-${key}`"
-              :help-id="`${option.testId}-${key}`"
-              :help-text="option.tooltipContent"
-              :title="localization.common.information"
-              dropdown-width="272px"
-              dropdown-left
-              dropdown-top
+          <common-wizards-datastore-add-steps-common-tooltip-info
+            :id="option.testId"
+            :description="option.tooltipContent"
           />
         </template>
       </ui-radio>