bfg-common 1.6.95 → 1.6.97

package/components/common/vm/actions/register/New.vue

@@ -21,12 +21,14 @@
         :sub-title-height="heightName"
       >
         <template #subTitle>
-          <div ref="subTitleBlockName" class="subtitle-block">
-            <div
-              id="name-alert-wrapper"
-              :class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
-            ></div>
-            <ui-wizard-subtitle :sub-title="currentSubtitleSelectNameBlock" />
+          <div ref="subTitleBlockName">
+            <div class="subtitle-block">
+              <div
+                id="name-alert-wrapper"
+                :class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
+              ></div>
+              <ui-wizard-subtitle :sub-title="currentSubtitleSelectNameBlock" />
+            </div>
           </div>
         </template>
         <template #content>
@@ -51,7 +53,7 @@
             "
             :test-ids="props.nameTestIds"
             :has-location="props.isSphere"
-            :location-nodes="props.locationNodes"
+            :location-nodes="localLocationNodes"
             :allowed-location-kinds="props.allowedLocationKinds"
             :location-description="props.locationDescription"
             @submit="emits('change-name', $event)"
@@ -68,21 +70,23 @@
         :sub-title-height="heightComputeResource"
       >
         <template #subTitle>
-          <div ref="computeResource" class="subtitle-block">
-            <ui-alert
-              v-if="props.computeResourceAlert.length"
-              :messages="props.computeResourceAlert"
-              test-id="computed-resource-alert"
-              type="error"
-              size="md"
-              class="subtitle-block__alert mb-4"
-            />
-            <ui-wizard-subtitle
-              :sub-title="
-                localization.vmWizard
-                  .selectDestinationComputeResourceForThisOperation
-              "
-            />
+          <div ref="computeResource">
+            <div class="subtitle-block">
+              <ui-alert
+                v-if="props.computeResourceAlert.length"
+                :messages="props.computeResourceAlert"
+                test-id="computed-resource-alert"
+                type="error"
+                size="md"
+                class="subtitle-block__alert mb-4"
+              />
+              <ui-wizard-subtitle
+                :sub-title="
+                  localization.vmWizard
+                    .selectDestinationComputeResourceForThisOperation
+                "
+              />
+            </div>
           </div>
         </template>
         <template #content>
@@ -115,10 +119,12 @@
           </div>
         </template>
         <template #content>
-          <common-ready-to-complete
-            v-if="selectedStep.id === props.dynamicSteps.readyComplete"
-            :data="props.readyCompleteTableInfo"
-          />
+          <div class="register-vm-ready-to-complete-container">
+            <common-ready-to-complete
+              v-if="selectedStep.id === props.dynamicSteps.readyComplete"
+              :data="props.readyCompleteTableInfo"
+            />
+          </div>
         </template>
       </ui-wizard-block>
     </template>
@@ -213,6 +219,15 @@ const currentSubtitleSelectNameBlock = ref<string>(
 
 const initialCompare = compare(vmForm)
 const hasChanges = computed<boolean>(() => initialCompare.getDiff(vmForm.value))
+
+const localLocationNodes = computed<UI_I_TreeNode[]>(() => {
+  const copyData = useDeepCopy(props.locationNodes)
+  if (copyData[0] && !copyData[0]?.nodes.length) {
+    copyData[0].hasNodes = true
+  }
+
+  return copyData
+})
 </script>
 
 <style>
@@ -234,10 +249,23 @@ const hasChanges = computed<boolean>(() => initialCompare.getDiff(vmForm.value))
   border-color: var(--select-name-border-color);
 }
 .compute-resource-container {
-  padding-bottom: 40px;
+  padding-bottom: 16px;
 
+  :deep(.tree-content) {
+    padding: 8px !important;
+  }
   :deep(.compatibility-wrap) {
     margin-top: 24px;
   }
 }
+.register-vm-ready-to-complete-container {
+  padding-bottom: 16px;
+
+  :deep(.details-list__col-right) {
+    align-items: flex-start;
+  }
+  :deep(.details-item-value) {
+    white-space: normal;
+  }
+}
 </style>

package/components/common/vm/actions/register/lib/config/steps.ts

@@ -72,7 +72,7 @@ export const stepsFunc = (
     {
       id: dynamicSteps.readyComplete,
       stepName: '',
-      title: localization.vmWizard.readyComplete,
+      title: localization.common.readyComplete,
       subTitle: localization.vmWizard.lastCreateSubtitle,
       status: UI_E_WIZARD_STATUS.INACTIVE,
       isValid: true,

package/components/common/vm/actions/rename/New.vue

@@ -11,12 +11,21 @@
     @hide="emits('hide')"
   >
     <template #content>
+      <ui-alert
+        v-if="props.errors.length"
+        :messages="props.errors.length && !isEmptyName ? props.errors : []"
+        test-id="vm-rename-error-alert"
+        type="error"
+        class="mb-2 mt-2 mx-8"
+        size="md"
+        hide-close-button
+      />
       <div class="content">
         <form @submit.prevent="onRename">
           <ui-input
             id="name"
             v-model="nameLocal"
-            :error="props.errors[0]"
+            :error="props.isEmptyName ? localization.common.fieldRequired : ''"
             :label="localization.common.name"
             test-id="rename-vm-name-input"
             type="text"
@@ -37,6 +46,7 @@ const props = defineProps<{
   vmName: string
   isLoading: boolean
   errors: string[]
+  isEmptyName: boolean
 }>()
 const emits = defineEmits<{
   (event: 'hide'): void

package/components/common/vm/actions/rename/Old.vue

@@ -1,6 +1,7 @@
 <template>
   <common-modals-rename
     :name="props.vmName"
+    :subtitle="props.vmName"
     :is-loading="props.isLoading"
     test-id="rename-vm"
     @hide="emits('hide')"

package/components/common/vm/actions/rename/Rename.vue

@@ -4,6 +4,7 @@
     :vm-name="props.vmName"
     :is-loading="isLoading"
     :errors="errors"
+    :is-empty-name="isEmptyName"
     @hide="onHide"
     @change-name="onChangeName"
     @remove-validation-errors="onRemoveValidationErrors"
@@ -64,6 +65,7 @@ const onChangeName = async (name: string): Promise<void> => {
   onHide()
 }
 
+const isEmptyName = ref<boolean>(false)
 const errors = ref<string[]>([])
 const showValidationErrors = (data: string[]): void => {
   errors.value = data
@@ -74,6 +76,8 @@ const onRemoveValidationErrors = (): void => {
 
 const onCheckName = async (name: string): Promise<boolean> => {
   let result = true
+  isEmptyName.value = false
+  errors.value = []
 
   const url = props.nameRequestUrl.replace('{name}', encodeURIComponent(name))
   const { error } = await useMyFetch<null, API_UI_I_Error>(url, {
@@ -83,9 +87,11 @@ const onCheckName = async (name: string): Promise<boolean> => {
   const status = error.value?.statusCode || 200
   switch (status) {
     case 400: // Empty name
+    case 404: // 404 получаем в Сфере
       showValidationErrors([
         localization.value.common.emptyNameValidationDescription,
       ])
+      isEmptyName.value = true
       result = false
       break
     case 405: // Invalid kind

package/components/common/vm/snapshots/DetailView.vue

@@ -7,13 +7,13 @@
     >
       <tbody>
         <tr>
-          <td class="left">{{ localization.common.name }}</td>
+          <td class="left" data-id="vm-snapshot-name-label">{{ localization.common.name }}</td>
           <td class="left snapshot-name-label" data-id="vm-snapshot-name">
             {{ detailData.name }}
           </td>
         </tr>
         <tr>
-          <td class="left">{{ localization.common.description }}</td>
+          <td class="left" data-id="vm-snapshot-description-label">{{ localization.common.description }}</td>
           <td
             class="left snapshot-name-label"
             data-id="vm-snapshot-description"
@@ -22,17 +22,17 @@
           </td>
         </tr>
         <tr>
-          <td class="left">{{ localization.snapshots.timestamp }}</td>
+          <td class="left" data-id="vm-snapshot-timestamp-label">{{ localization.snapshots.timestamp }}</td>
           <td class="left snapshot-name-label" data-id="vm-snapshot-timestamp">
             {{ detailData.timestamp }}
           </td>
         </tr>
         <tr>
-          <td class="left">{{ localization.common.size }}</td>
+          <td class="left" data-id="vm-snapshot-size-label">{{ localization.common.size }}</td>
           <td class="left snapshot-name-label">{{ detailData.size }}</td>
         </tr>
         <tr>
-          <td class="left">
+          <td class="left" data-id="vm-snapshot-of-memory-label">
             {{ localization.common.snapshotTheVirtualMachinesMemory }}
           </td>
           <td class="left snapshot-name-label" data-id="vm-snapshot-of-memory">
@@ -40,7 +40,7 @@
           </td>
         </tr>
         <tr>
-          <td class="left">
+          <td class="left" data-id="vm-snapshot-file-system-label">
             {{ localization.common.quiesceGuestFileSystem }}
           </td>
           <td

package/components/common/vm/snapshots/lib/models/types.ts

@@ -2,6 +2,7 @@ export type UI_T_SnapshotActionType =
   | 'take'
   | 'edit'
   | 'revert'
+  | 'revertLast'
   | 'delete'
   | 'delete_all'
   | 'group_take'

package/components/common/vm/snapshots/modals/confirm/New.vue

@@ -10,7 +10,7 @@
     @hide-modal="emits('hide')"
     @confirm="emits('submit')"
   >
-    <template v-if="props.type === 'revert'" #otherContent>
+    <template v-if="props.type === 'revert' || props.type === 'revertLast'" #otherContent>
       <div class="confirm-modal-checkbox-content mt-4 p-3">
         <ui-checkbox
           v-model="suspendOnRevert"
@@ -18,7 +18,7 @@
             localization.common
               .suspendThisVirtualMachineWhenRevertingToSelectedSnapshot
           "
-          :disabled="props.vmState === 2"
+          :disabled="props.vmState !== 2"
           test-id="vm-snapshots-modal-revert-checkbox"
           class="confirm-modal-checkbox flex items-start"
           size="md"
@@ -79,6 +79,7 @@ const descriptionText = computed<string>(() => {
       break
 
     case 'revert':
+    case 'revertLast':
       description =
         localization.value.snapshots.revertToSnapshotDescription.replace(
           '{0}',

package/components/common/vm/snapshots/modals/confirm/Old.vue

@@ -8,7 +8,7 @@
     @submit="onConfirm"
   >
     <template #modalBody>
-      <div v-if="props.type === 'revert'">
+      <div v-if="props.type === 'revert' || props.type === 'revertLast'">
         <p class="description-text" data-id="description-revert-content">
           {{ descriptionRevertContent }}
         </p>
@@ -16,13 +16,13 @@
           <div
             :class="[
               'clr-checkbox-wrapper flex-align-center w-100',
-              { disabled: props.vmState === 2 },
+              { disabled: props.vmState !== 2 },
             ]"
           >
             <input
               id="suspend-on-revert"
               v-model="suspendOnRevert"
-              :disabled="props.vmState === 2"
+              :disabled="props.vmState !== 2"
               data-id="suspend-on-revert-checkbox"
               type="checkbox"
               class="checkbox-btn"

package/components/common/vm/snapshots/modals/confirm/lib/models/enums.ts

@@ -2,6 +2,7 @@ export enum UI_E_TitleConfirmModal {
   'take' = '',
   'edit' = 'edit',
   'revert' = 'revert',
+  'revertLast' = 'revert',
   'delete' = 'delete',
   'delete_all' = 'deleteAll',
   'group_delete_all' = 'deleteAll',
@@ -12,6 +13,7 @@ export enum UI_E_TitleModal {
   'take' = '',
   'edit' = '',
   'revert' = 'revertToSnapshot',
+  'revertLast' = 'revertLatestSnapshot',
   'delete' = 'deleteSnapshot',
   'delete_all' = 'deleteAllSnapshots',
   'group_delete_all' = 'deleteAllSnapshots',

package/components/common/vm/snapshots/modals/lib/config/modalTexts.ts

@@ -18,6 +18,7 @@ export const modalTexts = (
     groupTake: localization.common.create,
     edit: localization.common.save,
     revert: localization.common.revert,
+    revertLast: localization.common.revert,
     delete: localization.common.delete,
     delete_all: localization.common.deleteAll,
     group_delete_all: localization.common.deleteAll,

package/components/common/wizards/common/steps/name/New.vue

@@ -16,10 +16,12 @@
 
     <div class="name-field">
       <div class="flex-1 flex-align-center">
-        <ui-skeleton-item v-if="isLoading" width="112px" height="20px"/>
-        <label v-else :for="`${props.testIds.name}-name`" class="name-label">{{
-          localization.common.name
-        }}</label>
+        <ui-skeleton-item v-if="isLoading" width="112px" height="20px" />
+        <label v-else :for="`${props.testIds.name}-name`" class="name-label"
+          >{{ localization.common.name }} ({{
+            localization.common.optional
+          }})</label
+        >
 
         <common-tooltip-help
           v-if="!isLoading"
@@ -33,33 +35,42 @@
       </div>
 
       <div class="flex-2">
-        <ui-skeleton-item v-if="isLoading" width="480px" height="36px" border-radius="8px"/>
+        <ui-skeleton-item
+          v-if="isLoading"
+          width="480px"
+          height="36px"
+          border-radius="8px"
+        />
 
         <!--        ToDo при возможности придумать способ выделить тултип в компонент инпута-->
         <ui-tooltip
-            v-else
-            id="vm-name-tooltip"
-            test-id="vm-name-tooltip"
-            size="md"
-            width="240"
-            position="bottom"
-            show-type="variant-1"
-            timing="500"
+          v-else
+          id="vm-name-tooltip"
+          test-id="vm-name-tooltip"
+          size="md"
+          width="240"
+          position="bottom"
+          show-type="variant-1"
+          timing="500"
         >
           <template #target>
             <ui-input
-                v-model="name"
-                id="vm-name-tooltip"
-                :placeholder="`${localization.common.name} (${localization.common.optional})`"
-                type="text"
-                maxlength="54"
-                :error="props.nameErrorText"
-                :test-id="props.testIds.name"
-                :disabled="props.isDisabledField"
+              v-model="name"
+              id="vm-name-tooltip"
+              :placeholder="`${localization.common.name}`"
+              type="text"
+              maxlength="54"
+              :error="props.nameErrorText"
+              :test-id="props.testIds.name"
+              :disabled="props.isDisabledField"
             />
           </template>
-          <template v-if="props.errors.length" #content >
-            <p v-for="(error, index) in props.errors" :key="index" class="name-tooltip-text">
+          <template v-if="props.errors.length" #content>
+            <p
+              v-for="(error, index) in props.errors"
+              :key="index"
+              class="name-tooltip-text"
+            >
               {{ error }}
             </p>
           </template>
@@ -70,11 +81,19 @@
     <template v-if="props.hasLocation">
       <div class="location">
         <div class="flex-1">
-          <span v-if="location" class="location-label">{{ localization.common.location }}</span>
-          <ui-skeleton-item v-else width="144px" height="20px"/>
+          <span v-if="location" class="location-label">{{
+            localization.common.location
+          }}</span>
+          <ui-skeleton-item v-else width="144px" height="20px" />
         </div>
 
-        <div v-if="location" :class="['selected-location flex-2', { disabled: props.isDisabledField }]">
+        <div
+          v-if="location"
+          :class="[
+            'selected-location flex-2',
+            { disabled: props.isDisabledField },
+          ]"
+        >
           <span :class="['node-icon', location.iconClassName]" />
           <span :class="['text', isShowAlert && 'error']">
             {{ location.name }}
@@ -82,10 +101,10 @@
         </div>
         <ui-skeleton-item v-else width="160px" height="20px" />
       </div>
-      <div :class="['tree-view-wrap', { 'disabled': props.isDisabledField }]">
+      <div :class="['tree-view-wrap', { disabled: props.isDisabledField }]">
         <common-wizards-common-steps-name-location
-            v-model:location="location"
-            :nodes="props.locationNodes"
+          v-model:location="location"
+          :nodes="props.locationNodes"
         />
       </div>
     </template>
@@ -123,7 +142,7 @@ const isShowAlert = computed<boolean>(() =>
 const isLoading = ref(true)
 
 onMounted(() => {
-  setTimeout(() => isLoading.value = false, 0)
+  setTimeout(() => (isLoading.value = false), 0)
 })
 </script>
 
@@ -134,9 +153,10 @@ onMounted(() => {
   --select-name-help-icon-active-color: #008fd6;
   --select-name-help-hide-icon-color: #213444;
   --select-name-border-color: #e9ebeda3;
+  --select-wizard-step-name-top-border-color: #e9ebeda3;
   --select-name-location-node-color: #182531;
   --select-name-location-bg-color: #ffffff;
-  --select-name-tooltip-bg: #EA3223E0;
+  --select-name-tooltip-bg: #ea3223e0;
 }
 :root.dark-theme {
   --select-name-text-color: #e9eaec;
@@ -144,9 +164,10 @@ onMounted(() => {
   --select-name-help-icon-active-color: #2ba2de;
   --select-name-help-hide-icon-color: #e9eaec;
   --select-name-border-color: #e9ebed1f;
+  --select-wizard-step-name-top-border-color: #e9ebed1f;
   --select-name-location-node-color: #e9eaec;
   --select-name-location-bg-color: #1b2a371f;
-  --select-name-tooltip-bg: #EA3223B8;
+  --select-name-tooltip-bg: #ea3223b8;
 }
 </style>
 <style scoped lang="scss">
@@ -163,14 +184,14 @@ onMounted(() => {
     align-items: center;
     column-gap: 16px;
 
-    :deep(.tooltip) {
+    :deep(.tooltip-container-hover .tooltip) {
       background-color: var(--select-name-tooltip-bg);
       backdrop-filter: blur(0.5px);
     }
 
     .name-tooltip-text {
       font-size: 12px;
-      color: #E9EAEC;
+      color: #e9eaec;
     }
 
     .name-label {
@@ -200,7 +221,7 @@ onMounted(() => {
     display: flex;
     margin-top: 16px;
     padding: 22px 0;
-    border-top: 1px solid var(--select-name-border-color);
+    border-top: 1px solid var(--select-wizard-step-name-top-border-color);
     column-gap: 16px;
     align-items: flex-start;
 

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

@@ -256,4 +256,10 @@ const onCreateDatastore = (): void => emits('submit')
     padding: 10px 12px;
   }
 }
+:deep(.ui-wizard-content-right-container) {
+  padding: 0 30px;
+}
+:deep(.ui-wizard-subtitle-container) + *, :deep(.ui-wizard-subtitle-container) {
+  padding-left: 2px;
+}
 </style>

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

@@ -130,7 +130,7 @@ export const stepsFunc = (
   // },
   {
     id: dynamicSteps.readyComplete,
-    title: localization.common.readyComplete,
+    title: localization.vmWizard.readyComplete,
     subTitle: localization.common.readyCompleteDatastoreDesc,
     status: UI_E_WIZARD_STATUS.INACTIVE,
     fields: {},

package/components/common/wizards/datastore/add/steps/_vmfsVersion/lib/config/versionOptions.ts

@@ -6,13 +6,13 @@ export const vmfsVersionFunc = (
 ): UI_I_RadioOption[] => {
   return [
     {
-      label: 'VMFS 6',
+      label: 'STORMFS 6',
       value: 'vmfs-6',
       disabled: false,
       description: localization.common.vmfsVersionDesc1,
     },
     {
-      label: 'VMFS 5',
+      label: 'STORMFS 5',
       value: 'vmfs-5',
       disabled: false,
       description: localization.common.vmfsVersionDesc2,