bfg-common 1.6.23 → 1.6.25

package/components/common/split/vertical/New.vue

@@ -3,13 +3,22 @@
     :id="props.elementId"
     :class="['fill-parent vertical', { dragging: props.isDrag }]"
   >
-    <div :style="props.topPanelStyle" class="vui-horizontal-panel firstPanel">
+    <div
+      :style="props.topPanelStyle"
+      :class="[
+        'vui-horizontal-panel firstPanel',
+        {
+          'hidden-second': !props.bottomPermission,
+        },
+      ]"
+    >
       <div class="vui-horizontal-panel sec-nav-container">
         <slot name="firstPanel" />
       </div>
     </div>
 
     <div
+      v-if="props.bottomPermission"
       :id="`gutter-${props.elementId}`"
       class="gutter gutter-vertical"
       tabindex="0"
@@ -20,7 +29,16 @@
       <div class="gutter-vertical-handler"></div>
     </div>
 
-    <div :style="props.bottomPanelStyle" class="secondPanel bottom">
+    <div
+      v-if="props.bottomPermission"
+      :style="props.bottomPanelStyle"
+      :class="[
+        'secondPanel bottom',
+        {
+          hidden: !props.bottomPermission,
+        },
+      ]"
+    >
       <slot name="secondPanel" />
     </div>
   </div>
@@ -37,6 +55,7 @@ const props = defineProps<{
   isDrag: boolean
   topPanelStyle: UI_I_SplitVerticalStyle
   bottomPanelStyle: UI_I_SplitVerticalStyle
+  bottomPermission: boolean
 }>()
 </script>
 
@@ -52,10 +71,14 @@ const props = defineProps<{
 </style>
 
 <style scoped lang="scss">
-.fill-parent {
+.vertical {
   &.dragging {
     .gutter-vertical.gutter {
-      background-color: var(--gutter-active-bg-color);
+      background-color: var(--new-gutter-active-bg-color);
+
+      &::before {
+        background-color: var(--new-gutter-active-before-bg-color);
+      }
     }
   }
 
@@ -63,6 +86,11 @@ const props = defineProps<{
     max-height: calc(100% - 36px);
     height: calc(100vh - 36px);
 
+    &.hidden-second {
+      max-height: 100%;
+      height: 100% !important;
+    }
+
     .sec-nav-container {
       width: 100%;
       height: 100%;
@@ -95,11 +123,11 @@ const props = defineProps<{
     //}
 
     &:hover {
-      background-color: var(--gutter-hover-bg-color);
+      background-color: var(--new-gutter-hover-bg-color);
       cursor: row-resize;
 
       &:before {
-        background-color: var(--gutter-handler-active-bg-color);
+        background-color: var(--new-gutter-active-before-bg-color);
       }
     }
 
@@ -112,8 +140,9 @@ const props = defineProps<{
       transition-duration: 0.25s;
       width: 24px;
       height: 2px;
-      left: calc(50% - 12px);
-      top: calc(50% - 1px);
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
       border-radius: 4px;
     }
   }
@@ -122,6 +151,11 @@ const props = defineProps<{
     overflow: hidden;
     flex: 1;
     box-shadow: var(--second-panel-box-shadow);
+
+    &.hidden {
+      display: none;
+      height: 0;
+    }
     //z-index: calc(var(--z-default) + 1);
   }
 }

package/components/common/split/vertical/Old.vue

@@ -3,13 +3,22 @@
     :id="props.elementId"
     :class="['fill-parent vertical', { dragging: props.isDrag }]"
   >
-    <div :style="props.topPanelStyle" class="vui-horizontal-panel firstPanel">
+    <div
+      :style="props.topPanelStyle"
+      :class="[
+        'vui-horizontal-panel firstPanel',
+        {
+          'hidden-second': !props.bottomPermission,
+        },
+      ]"
+    >
       <div class="vui-horizontal-panel sec-nav-container">
         <slot name="firstPanel" />
       </div>
     </div>
 
     <div
+      v-if="props.bottomPermission"
       :id="`gutter-${props.elementId}`"
       class="gutter gutter-vertical"
       tabindex="0"
@@ -20,7 +29,16 @@
       <div class="gutter-vertical-handler"></div>
     </div>
 
-    <div :style="props.bottomPanelStyle" class="secondPanel bottom">
+    <div
+      v-if="props.bottomPermission"
+      :style="props.bottomPanelStyle"
+      :class="[
+        'secondPanel bottom',
+        {
+          hidden: !props.bottomPermission,
+        },
+      ]"
+    >
       <slot name="secondPanel" />
     </div>
   </div>
@@ -37,6 +55,7 @@ const props = defineProps<{
   isDrag: boolean
   topPanelStyle: UI_I_SplitVerticalStyle
   bottomPanelStyle: UI_I_SplitVerticalStyle
+  bottomPermission: boolean
 }>()
 </script>
 
@@ -52,6 +71,11 @@ const props = defineProps<{
     max-height: calc(100% - 36px);
     height: calc(100vh - 36px);
 
+    &.hidden-second {
+      max-height: 100%;
+      height: 100% !important;
+    }
+
     .sec-nav-container {
       width: 100%;
       height: 100%;
@@ -109,6 +133,11 @@ const props = defineProps<{
     height: auto;
     overflow: hidden;
     flex: 1;
+
+    &.hidden {
+      display: none;
+      height: 0;
+    }
   }
 }
 </style>

package/components/common/split/vertical/Vertical.vue

@@ -7,6 +7,7 @@
     :is-drag="isDrag"
     :top-panel-style="topPanelStyle"
     :bottom-panel-style="bottomPanelStyle"
+    :bottom-permission="props.bottomPermission"
   >
     <template #firstPanel>
       <slot name="firstPanel" />
@@ -25,6 +26,7 @@
     :is-drag="isDrag"
     :top-panel-style="topPanelStyle"
     :bottom-panel-style="bottomPanelStyle"
+    :bottom-permission="props.bottomPermission"
   >
     <template #firstPanel>
       <slot name="firstPanel" />
@@ -46,12 +48,14 @@ const props = withDefaults(
     topPanelH?: number
     topPanelMinHeight?: number
     bottomPanelMinHeight?: number
+    bottomPermission?: boolean
   }>(),
   {
     topPanelMinHeight: 200, // 200px
     bottomPanelMinHeight: 200, // 200px
     topPanelHForce: '',
     topPanelH: undefined,
+    bottomPermission: true,
   }
 )
 const emits = defineEmits<{

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

@@ -55,13 +55,13 @@
           <div ref="subTitleBlockName">
             <div class="subtitle-block">
               <div
-                  id="name-alert-wrapper"
-                  :class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
+                id="name-alert-wrapper"
+                :class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
               ></div>
               <ui-wizard-subtitle
-                  :sub-title="
-                localization.vmWizard.specifyUniqueNameAndTargetLocationForVm
-              "
+                :sub-title="
+                  localization.vmWizard.specifyUniqueNameAndTargetLocationForVm
+                "
               />
             </div>
           </div>
@@ -153,7 +153,8 @@
             :datastore="props.datastore"
             :is-datastore-loading="props.isDatastoreLoading"
             :get-datastore-table-func="props.getDatastoreTableFunc"
-            :storage="props.vmtSettings?.storage"
+            :storage="storageLocal"
+            @change-storage="setSelectedStorageIdLocal"
             @submit="emits('change-storage', $event)"
             @has-errors="isStorageAlertWrapperEmpty = $event"
           />
@@ -593,6 +594,20 @@ const isNameAlertWrapperEmpty = ref<boolean>(false)
 // const isComputeResourceAlertWrapperEmpty = ref<boolean>(false)
 const isStorageAlertWrapperEmpty = ref<boolean>(false)
 const isCompatibilityAlertWrapperEmpty = ref<boolean>(false)
+
+const storageLocal = computed<UI_I_DatastoreTableItem | undefined>(() => {
+  return selectedStorageLocal.value ?? props.vmtSettings?.storage
+})
+
+/* TODO: В дальнейшем необходимо вынести все данные наружу и передавать его через v-model */
+// рефакторинг. При возврате на шаг выбора хранилища ранее выбранное хранилище не отображается как выбранное.
+// Для хранилища в v-model необходимо сохранять ID хранилища, а не ключ индекса.
+const selectedStorageLocal = ref<UI_I_DatastoreTableItem | null>(null)
+const setSelectedStorageIdLocal = (datastore: UI_I_DatastoreTableItem) => {
+  selectedStorageLocal.value = {
+    id: datastore.id,
+  } as UI_I_DatastoreTableItem
+}
 </script>
 
 <style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/New.vue

@@ -242,6 +242,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 .cpu-info-block {
   :deep(.help-text) {
     margin-bottom: 12px;
+    color: var(--stack-block-text-color);
   }
   :deep(.cpu-more-info) {
     font-size: 13px;

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

@@ -9,9 +9,7 @@ import type { UI_I_StatusData } from '~/components/common/vm/actions/common/sele
 import { datastoreLocalizationByState } from '~/components/common/lib/config/states'
 import { getStatus } from '~/components/common/vm/actions/common/select/storage/new/lib/utils/utils'
 
-export const tableDataFunc = (
-  localization: UI_I_Localization
-): UI_I_DataTable => ({
+export const tableDataFunc = (localization: UI_I_Localization): UI_I_DataTable => ({
   id: 'select-storage',
   header: [
     {
@@ -31,7 +29,7 @@ export const tableDataFunc = (
       text: localization.inventorySummary.state,
       isSortable: false,
       sort: 'asc',
-      sortColumn: true,
+      sortColumn: false,
       width: '160px',
       show: true,
       filter: true,
@@ -42,7 +40,7 @@ export const tableDataFunc = (
       text: localization.common.capacity,
       isSortable: false,
       sort: 'asc',
-      sortColumn: true,
+      sortColumn: false,
       width: '150px',
       show: true,
       filter: true,
@@ -53,7 +51,7 @@ export const tableDataFunc = (
       text: localization.common.provisioned,
       isSortable: false,
       sort: 'asc',
-      sortColumn: true,
+      sortColumn: false,
       width: '150px',
       show: true,
       filter: true,
@@ -64,7 +62,7 @@ export const tableDataFunc = (
       text: localization.common.free,
       isSortable: false,
       sort: 'asc',
-      sortColumn: true,
+      sortColumn: false,
       width: '150px',
       show: true,
       filter: true,
@@ -75,7 +73,7 @@ export const tableDataFunc = (
       text: localization.common.used,
       isSortable: false,
       sort: 'asc',
-      sortColumn: true,
+      sortColumn: false,
       width: '150px',
       show: true,
       filter: true,
@@ -86,7 +84,7 @@ export const tableDataFunc = (
       text: localization.common.type,
       isSortable: false,
       sort: 'asc',
-      sortColumn: true,
+      sortColumn: false,
       width: '120px',
       show: true,
       filter: true,
@@ -97,7 +95,7 @@ export const tableDataFunc = (
       text: localization.common.thinProvisioning,
       isSortable: false,
       sort: 'asc',
-      sortColumn: true,
+      sortColumn: false,
       width: '160px',
       show: true,
       filter: true,
@@ -108,7 +106,7 @@ export const tableDataFunc = (
       text: localization.common.access,
       isSortable: false,
       sort: 'asc',
-      sortColumn: true,
+      sortColumn: false,
       width: '120px',
       show: true,
       filter: true,
@@ -119,7 +117,7 @@ export const tableDataFunc = (
       text: localization.common.hardwareAcceleration,
       isSortable: false,
       sort: 'asc',
-      sortColumn: true,
+      sortColumn: false,
       width: '200px',
       show: true,
       filter: true,
@@ -130,7 +128,7 @@ export const tableDataFunc = (
       text: localization.common.driverType,
       isSortable: false,
       sort: 'asc',
-      sortColumn: true,
+      sortColumn: false,
       width: '150px',
       show: true,
       filter: true,
@@ -141,7 +139,7 @@ export const tableDataFunc = (
       text: localization.common.device,
       isSortable: false,
       sort: 'asc',
-      sortColumn: true,
+      sortColumn: false,
       width: '150px',
       show: true,
       filter: true,
@@ -152,7 +150,7 @@ export const tableDataFunc = (
       text: localization.common.storageIoControl,
       isSortable: false,
       sort: 'asc',
-      sortColumn: true,
+      sortColumn: false,
       width: '180px',
       show: true,
       filter: true,

package/components/common/vm/actions/confirm/Confirm.vue

@@ -4,6 +4,7 @@
     :sub-title="props.subTitle"
     :description="props.description"
     :modal-texts="props.modalTexts"
+    :loading="props.isLoading"
     @hide-modal="emits('hide')"
     @confirm="emits('confirm')"
   >
@@ -22,9 +23,11 @@ const props = withDefaults(
     subTitle: string
     description: string
     modalTexts?: UI_I_ModalTexts
+    isLoading?: boolean
   }>(),
   {
     modalTexts: undefined,
+    isLoading: false
   }
 )
 

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/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/steps/nameAndDevice/NameAndDeviceNew.vue

@@ -179,7 +179,7 @@ const onSelectHost = (event: string): void => {
   display: flex;
   flex-direction: column;
   row-gap: 16px;
-  margin: 16px 0 16px 2px;
+  margin: 16px 0;
 
   &__alert {
     align-items: flex-start;

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

@@ -3,7 +3,7 @@
     <ui-button
       variant="text"
       test-id="advanced-options-button"
-      class="advanced-options-btn btn btn-link"
+      class="advanced-options-btn"
       @click="isShowAdvancedOptions = !isShowAdvancedOptions"
     >
       <template #icon>

package/components/common/wizards/network/add/Add.vue

@@ -618,9 +618,20 @@ const finalValidationFunc = async (
     const stepId = wizard.getStepIdByFieldName(fieldName)
 
     if (stepId !== -1) {
+      let message = ''
+
+      if (validationFields[fieldName]) {
+        message = `${validationFields[
+          fieldName
+        ][0].toUpperCase()}${validationFields[fieldName].substring(1)}`
+
+        message =
+          message.charAt(message.length - 1) !== '.' ? message + '.' : message
+      }
+
       stepHasError = wizard.setValidation(stepId, fieldName, {
-        fieldMessage: validationFields[fieldName],
-        alertMessage: validationFields[fieldName],
+        fieldMessage: message,
+        alertMessage: message,
       })
     }
   }

package/components/common/wizards/network/add/AddNew.vue

@@ -44,22 +44,21 @@
         >
           <template #subTitle>
             <div ref="selectTargetDeviceBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="select-target-device-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -89,22 +88,21 @@
         >
           <template #subTitle>
             <div ref="createStandardSwitchBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="create-standard-switch-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -146,22 +144,21 @@
         >
           <template #subTitle>
             <div ref="portPropertiesBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="port-properties-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -190,22 +187,21 @@
         >
           <template #subTitle>
             <div ref="ipFourSettingsBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="ip-four-settings-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -233,22 +229,21 @@
         >
           <template #subTitle>
             <div ref="connectionSettingsBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="connection-settings-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -463,6 +458,7 @@ const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
   }
   :deep(.ui-wizard-content-with-subtitle) {
     padding-right: 0;
+    scrollbar-gutter: unset;
   }
 }
 
@@ -477,7 +473,7 @@ const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
 :deep(.ui-alert-item) {
   margin-bottom: 12px;
 
-  &.mb-4 {
+  &:last-of-type {
     margin-bottom: 16px;
   }
 }