bfg-common 1.5.408 → 1.5.410

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/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/New.vue

@@ -22,12 +22,12 @@
               <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="320px"
-                  dropdown-left
+                test-id="datastore-type-subtitle"
+                help-id="datastore-type-subtitle-icon"
+                :help-text="localization.common.datastoreTypeHelpDesc"
+                :title="localization.common.information"
+                dropdown-width="320px"
+                dropdown-left
               />
             </div>
           </div>
@@ -100,6 +100,7 @@
             v-model="formModelLocal"
             :project="props.project"
             :messages-fields="selectedStep.fields"
+            :is-loading="isLoading"
           />
         </template>
       </ui-wizard-block>

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

@@ -15,8 +15,10 @@
       @select-row="onSelectRow"
     >
       <template #icon="{ item }">
-        <span :class="['icon', item.data.iconClassName]" />
-        <span class="text-ellipsis">
+        <span
+          :class="['host-accessibility-table__icon', item.data.iconClassName]"
+        />
+        <span class="host-accessibility-table__text text-ellipsis">
           {{ item.text }}
         </span>
       </template>
@@ -54,7 +56,7 @@ const texts = computed<UI_I_TableTexts>(() => ({
   searchHere: localization.value.common.searchHere,
   rowsPerPage: localization.value.common.rowsPerPage,
   of: localization.value.common.of,
-  selected: localization.value.common.selected,
+  selected: localization.value.common.selected2,
   columns: localization.value.common.columns,
   previous: localization.value.common.previous,
   next: localization.value.common.next,
@@ -101,8 +103,11 @@ const onSelectRow = (value: UI_I_DataTableBody[]): void => {
 <style lang="scss" scoped>
 .host-accessibility-table {
   margin-bottom: 10px;
-  .icon {
+  &__icon {
     margin-right: 4px;
   }
+  &__text {
+    font-size: 12px;
+  }
 }
 </style>

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

@@ -4,6 +4,7 @@
     v-model="formModel"
     v-model:alert-info="isShowAlertInfo"
     :messages-fields="props.messagesFields"
+    :is-loading="props.isLoading"
   />
 
   <common-wizards-datastore-add-steps-name-and-configure-old
@@ -23,11 +24,18 @@ import type { UI_I_WizardStep } from '~/components/atoms/wizard/lib/models/inter
 import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
 
 const formModel = defineModel<UI_I_CreateDatastoreForm>({ required: true })
-const props = defineProps<{
-  project: UI_T_Project
-  alertMessages: string[]
-  messagesFields: UI_I_WizardStep['fields']
-}>()
+
+const props = withDefaults(
+  defineProps<{
+    project: UI_T_Project
+    alertMessages: string[]
+    messagesFields: UI_I_WizardStep['fields']
+    isLoading?: boolean // Только для нового интерфейса.
+  }>(),
+  {
+    isLoading: false,
+  }
+)
 const emits = defineEmits<{
   (event: 'hide-alert', value: number): void
 }>()

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

@@ -13,6 +13,7 @@
           test-id="configuration-name-input"
           :placeholder="localization.common.name"
           is-focused
+          :disabled="props.isLoading"
           :error="nameErrorText"
           @blur="initValidation(true, ['name'])"
           @input="initValidation(false, ['name'])"
@@ -44,6 +45,7 @@
           v-model="formModelLocal.folder"
           test-id="configuration-folder-input"
           :placeholder="$text.toCapitalizeByIndex(localization.common.eg, [0]) + ': /vols/vol0/datastore-001'"
+          :disabled="props.isLoading"
           :error="folderErrorText"
           @blur="initValidation(true, ['folder'])"
           @input="initValidation(false, ['folder'])"
@@ -74,6 +76,7 @@
           v-model="formModelLocal.server"
           test-id="configuration-server-input"
           :placeholder="$text.toCapitalizeByIndex(localization.common.eg, [0]) + ': nas, nas.it.com or 192.168.0.1'"
+          :disabled="props.isLoading"
           :error="serverErrorText"
           @blur="initValidation(true, ['server'])"
           @input="initValidation(false, ['server'])"
@@ -96,6 +99,7 @@ const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
 
 const props = defineProps<{
   messagesFields: UI_I_WizardStep['fields']
+  isLoading: boolean
 }>()
 const emits = defineEmits<{
   (event: 'remove-errors'): void

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

@@ -205,6 +205,7 @@ const onSelectHost = (event: string): void => {
     }
     &__host-name {
       font-family: 'Inter', sans-serif;
+      height: 36px;
       display: flex;
       align-items: center;
       column-gap: 8px;

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

@@ -20,9 +20,9 @@
           :name="item.data.iconClassName"
           width="18"
           height="18"
-          class="icon"
+          class="device-table__icon"
         />
-        <span class="text-ellipsis">
+        <span class="device-table__text text-ellipsis">
           {{ item.text }}
         </span>
       </template>
@@ -103,6 +103,9 @@ const texts = computed<UI_I_TableTexts>(() => ({
 }))
 
 const tableSkeleton = ref<UI_I_DataTableSkeleton>({
+  columnsCount: 4,
+  headColumns: [],
+  bodyColumns: [],
   withoutPagination: true,
 })
 
@@ -156,8 +159,13 @@ const onSelectRow = (value: UI_I_DataTableBody[]): void => {
 
 <style lang="scss" scoped>
 .device-table-container {
-  .icon {
-    margin-right: 4px;
+  .device-table {
+    &__icon {
+      margin-right: 4px;
+    }
+    &__text {
+      font-size: 12px;
+    }
   }
 }
 </style>

package/components/common/wizards/datastore/add/steps/nameAndDevice/table/new/lib/models/enums.ts

@@ -12,5 +12,5 @@ export enum E_DeviceStatusChipColor {
 export enum E_DeviceStatusIcon {
   StatusCheck = 'status-check',
   Close = 'close',
-  HelpIcon = 'help-circle',
+  HelpIcon = 'icon-help',
 }

package/components/common/wizards/datastore/add/steps/typeMode/lib/config/typeOptions.ts

@@ -1,43 +1,43 @@
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
-
-export const datastoreTypesFunc = (
-  localization: UI_I_Localization,
-  _project?: UI_T_Project
-): UI_I_RadioOption[] => {
-  return [
-    {
-      id: 'datastore-type-shared-storm',
-      label: localization.common.stormSharedStorage,
-      value: 2,
-      disabled: false,
-      description: localization.common.sharedStormDesc,
-      isTooltip: false,
-      tooltipContent: localization.common.stormSharedStorageHelpDesc,
-      testId: 'datastore-type-shared-storm',
-    },
-    {
-      id: 'datastore-type-nfs',
-      label: localization.common.nfs,
-      value: 4,
-      disabled: false,
-      description: localization.common.nfsDesc,
-      isTooltip: false,
-      tooltipContent: localization.common.nfsHelpDesc,
-      testId: 'datastore-type-nfs',
-    },
-  ]
-
-  // if (project === 'procurator') {
-  //   types.unshift({
-  //     label: localization.common.localStorage,
-  //     value: 1,
-  //     disabled: false,
-  //     description: localization.common.localDesc,
-  //     isTooltip: false,
-  //     tooltipContent: localization.common.localStorageHelpDesc,
-  //     testId: 'datastore-type-local',
-  //   })
-  // }
-}
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
+
+export const datastoreTypesFunc = (
+  localization: UI_I_Localization,
+  _project?: UI_T_Project
+): UI_I_RadioOption[] => {
+  return [
+    {
+      id: 'datastore-type-shared-storm',
+      label: localization.common.stormSharedStorage,
+      value: 2,
+      disabled: false,
+      description: localization.common.sharedStormDesc,
+      isTooltip: false,
+      tooltipContent: localization.common.stormSharedStorageHelpDesc,
+      testId: 'datastore-type-shared-storm',
+    },
+    {
+      id: 'datastore-type-nfs',
+      label: localization.common.nfs,
+      value: 4,
+      disabled: false,
+      description: localization.common.nfsDesc,
+      isTooltip: false,
+      tooltipContent: localization.common.nfsHelpDesc,
+      testId: 'datastore-type-nfs',
+    },
+  ]
+
+  // if (project === 'procurator') {
+  //   types.unshift({
+  //     label: localization.common.localStorage,
+  //     value: 1,
+  //     disabled: false,
+  //     description: localization.common.localDesc,
+  //     isTooltip: false,
+  //     tooltipContent: localization.common.localStorageHelpDesc,
+  //     testId: 'datastore-type-local',
+  //   })
+  // }
+}