bfg-common 1.6.22 → 1.6.23

package/components/common/pages/scheduledTasks/table/new/New.vue

@@ -82,18 +82,16 @@
               <ui-icon name="vertical-dotes" width="20" height="20" />
             </span>
           </ui-button>
-          <Teleport to="body">
-            <ui-dropdown
-              :show="actionsShowId === item.data.id"
-              :test-id="`event-table-action-dropdown-${item.data.id}`"
-              :items="schedulerDropActions"
-              :elem-id="`event-table-action-${item.data.id}`"
-              width="max-content"
-              left
-              @select="onSelectAction"
-              @hide="onHideActionsDropdown"
-            />
-          </Teleport>
+          <ui-dropdown
+            :show="actionsShowId === item.data.id"
+            :test-id="`event-table-action-dropdown-${item.data.id}`"
+            :items="schedulerDropActions"
+            :elem-id="`event-table-action-${item.data.id}`"
+            width="max-content"
+            left
+            @select="onSelectAction"
+            @hide="onHideActionsDropdown"
+          />
         </div>
       </template>
 

package/components/common/pages/tasks/Tasks.vue

@@ -58,10 +58,7 @@ const getTasks = async (): Promise<void> => {
     sortBy: sort.value || '',
     filter: filter.value || '',
   }
-  await $store.dispatch('tasks/A_GET_TASKS', {
-    data: payload,
-    project: props.project,
-  })
+  await $store.dispatch('tasks/A_GET_TASKS', payload)
 }
 const onUpdatePagination = (event: UI_I_Pagination): void => {
   pagination.value = event

package/components/common/pages/tasks/table/Table.vue

@@ -67,30 +67,28 @@
             <ui-icon name="vertical-dotes" width="20" height="20" />
           </span>
         </ui-button>
-        <Teleport to="body">
-          <ui-dropdown
-            :show="actionsShowId === item.data.id"
-            :test-id="`data-table-task-dropdown-${item.data.id}`"
-            :items="actions"
-            :elem-id="`data-table-task-action-${item.data.id}`"
-            width="max-content"
-            left
-            @select="onSelectAction(item.data.target, $event)"
-            @hide="onHideActionsDropdown"
-          >
-            <template #row="{ item: dropMenu }">
-              <ui-icon
-                v-if="dropMenu.iconName === 'hide'"
-                name="password-hide"
-                width="16"
-                height="16"
-              />
-              <span class="action-text">
-                {{ dropMenu.text }}
-              </span>
-            </template>
-          </ui-dropdown>
-        </Teleport>
+        <ui-dropdown
+          :show="actionsShowId === item.data.id"
+          :test-id="`data-table-task-dropdown-${item.data.id}`"
+          :items="actions"
+          :elem-id="`data-table-task-action-${item.data.id}`"
+          width="max-content"
+          left
+          @select="onSelectAction(item.data.target, $event)"
+          @hide="onHideActionsDropdown"
+        >
+          <template #row="{ item: dropMenu }">
+            <ui-icon
+              v-if="dropMenu.iconName === 'hide'"
+              name="password-hide"
+              width="16"
+              height="16"
+            />
+            <span class="action-text">
+              {{ dropMenu.text }}
+            </span>
+          </template>
+        </ui-dropdown>
       </div>
     </template>
 

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

@@ -52,14 +52,10 @@ const props = defineProps<{
 </style>
 
 <style scoped lang="scss">
-.vertical {
+.fill-parent {
   &.dragging {
     .gutter-vertical.gutter {
-      background-color: var(--new-gutter-active-bg-color);
-
-      &::before {
-        background-color: var(--new-gutter-active-before-bg-color);
-      }
+      background-color: var(--gutter-active-bg-color);
     }
   }
 
@@ -99,11 +95,11 @@ const props = defineProps<{
     //}
 
     &:hover {
-      background-color: var(--new-gutter-hover-bg-color);
+      background-color: var(--gutter-hover-bg-color);
       cursor: row-resize;
 
       &:before {
-        background-color: var(--new-gutter-active-before-bg-color);
+        background-color: var(--gutter-handler-active-bg-color);
       }
     }
 
@@ -116,9 +112,8 @@ const props = defineProps<{
       transition-duration: 0.25s;
       width: 24px;
       height: 2px;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
+      left: calc(50% - 12px);
+      top: calc(50% - 1px);
       border-radius: 4px;
     }
   }

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,8 +153,7 @@
             :datastore="props.datastore"
             :is-datastore-loading="props.isDatastoreLoading"
             :get-datastore-table-func="props.getDatastoreTableFunc"
-            :storage="storageLocal"
-            @change-storage="setSelectedStorageIdLocal"
+            :storage="props.vmtSettings?.storage"
             @submit="emits('change-storage', $event)"
             @has-errors="isStorageAlertWrapperEmpty = $event"
           />
@@ -594,20 +593,6 @@ 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,7 +242,6 @@ 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,7 +9,9 @@ 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: [
     {
@@ -29,7 +31,7 @@ export const tableDataFunc = (localization: UI_I_Localization): UI_I_DataTable =
       text: localization.inventorySummary.state,
       isSortable: false,
       sort: 'asc',
-      sortColumn: false,
+      sortColumn: true,
       width: '160px',
       show: true,
       filter: true,
@@ -40,7 +42,7 @@ export const tableDataFunc = (localization: UI_I_Localization): UI_I_DataTable =
       text: localization.common.capacity,
       isSortable: false,
       sort: 'asc',
-      sortColumn: false,
+      sortColumn: true,
       width: '150px',
       show: true,
       filter: true,
@@ -51,7 +53,7 @@ export const tableDataFunc = (localization: UI_I_Localization): UI_I_DataTable =
       text: localization.common.provisioned,
       isSortable: false,
       sort: 'asc',
-      sortColumn: false,
+      sortColumn: true,
       width: '150px',
       show: true,
       filter: true,
@@ -62,7 +64,7 @@ export const tableDataFunc = (localization: UI_I_Localization): UI_I_DataTable =
       text: localization.common.free,
       isSortable: false,
       sort: 'asc',
-      sortColumn: false,
+      sortColumn: true,
       width: '150px',
       show: true,
       filter: true,
@@ -73,7 +75,7 @@ export const tableDataFunc = (localization: UI_I_Localization): UI_I_DataTable =
       text: localization.common.used,
       isSortable: false,
       sort: 'asc',
-      sortColumn: false,
+      sortColumn: true,
       width: '150px',
       show: true,
       filter: true,
@@ -84,7 +86,7 @@ export const tableDataFunc = (localization: UI_I_Localization): UI_I_DataTable =
       text: localization.common.type,
       isSortable: false,
       sort: 'asc',
-      sortColumn: false,
+      sortColumn: true,
       width: '120px',
       show: true,
       filter: true,
@@ -95,7 +97,7 @@ export const tableDataFunc = (localization: UI_I_Localization): UI_I_DataTable =
       text: localization.common.thinProvisioning,
       isSortable: false,
       sort: 'asc',
-      sortColumn: false,
+      sortColumn: true,
       width: '160px',
       show: true,
       filter: true,
@@ -106,7 +108,7 @@ export const tableDataFunc = (localization: UI_I_Localization): UI_I_DataTable =
       text: localization.common.access,
       isSortable: false,
       sort: 'asc',
-      sortColumn: false,
+      sortColumn: true,
       width: '120px',
       show: true,
       filter: true,
@@ -117,7 +119,7 @@ export const tableDataFunc = (localization: UI_I_Localization): UI_I_DataTable =
       text: localization.common.hardwareAcceleration,
       isSortable: false,
       sort: 'asc',
-      sortColumn: false,
+      sortColumn: true,
       width: '200px',
       show: true,
       filter: true,
@@ -128,7 +130,7 @@ export const tableDataFunc = (localization: UI_I_Localization): UI_I_DataTable =
       text: localization.common.driverType,
       isSortable: false,
       sort: 'asc',
-      sortColumn: false,
+      sortColumn: true,
       width: '150px',
       show: true,
       filter: true,
@@ -139,7 +141,7 @@ export const tableDataFunc = (localization: UI_I_Localization): UI_I_DataTable =
       text: localization.common.device,
       isSortable: false,
       sort: 'asc',
-      sortColumn: false,
+      sortColumn: true,
       width: '150px',
       show: true,
       filter: true,
@@ -150,7 +152,7 @@ export const tableDataFunc = (localization: UI_I_Localization): UI_I_DataTable =
       text: localization.common.storageIoControl,
       isSortable: false,
       sort: 'asc',
-      sortColumn: false,
+      sortColumn: true,
       width: '180px',
       show: true,
       filter: true,

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

@@ -4,7 +4,6 @@
     :sub-title="props.subTitle"
     :description="props.description"
     :modal-texts="props.modalTexts"
-    :loading="props.isLoading"
     @hide-modal="emits('hide')"
     @confirm="emits('confirm')"
   >
@@ -23,11 +22,9 @@ 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" data-id="vm-snapshot-name-label">{{ localization.common.name }}</td>
+          <td class="left">{{ localization.common.name }}</td>
           <td class="left snapshot-name-label" data-id="vm-snapshot-name">
             {{ detailData.name }}
           </td>
         </tr>
         <tr>
-          <td class="left" data-id="vm-snapshot-description-label">{{ localization.common.description }}</td>
+          <td class="left">{{ 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" data-id="vm-snapshot-timestamp-label">{{ localization.snapshots.timestamp }}</td>
+          <td class="left">{{ localization.snapshots.timestamp }}</td>
           <td class="left snapshot-name-label" data-id="vm-snapshot-timestamp">
             {{ detailData.timestamp }}
           </td>
         </tr>
         <tr>
-          <td class="left" data-id="vm-snapshot-size-label">{{ localization.common.size }}</td>
+          <td class="left">{{ localization.common.size }}</td>
           <td class="left snapshot-name-label">{{ detailData.size }}</td>
         </tr>
         <tr>
-          <td class="left" data-id="vm-snapshot-of-memory-label">
+          <td class="left">
             {{ 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" data-id="vm-snapshot-file-system-label">
+          <td class="left">
             {{ localization.common.quiesceGuestFileSystem }}
           </td>
           <td

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

@@ -256,10 +256,4 @@ 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;
+  margin: 16px 0 16px 2px;
 
   &__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"
+      class="advanced-options-btn btn btn-link"
       @click="isShowAdvancedOptions = !isShowAdvancedOptions"
     >
       <template #icon>

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

@@ -618,20 +618,9 @@ 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: message,
-        alertMessage: message,
+        fieldMessage: validationFields[fieldName],
+        alertMessage: validationFields[fieldName],
       })
     }
   }

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

@@ -44,21 +44,22 @@
         >
           <template #subTitle>
             <div ref="selectTargetDeviceBlock">
-              <div class="alert-block flex flex-col">
+              <div class="subtitle-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>
@@ -88,21 +89,22 @@
         >
           <template #subTitle>
             <div ref="createStandardSwitchBlock">
-              <div class="alert-block flex flex-col">
+              <div class="subtitle-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>
@@ -144,21 +146,22 @@
         >
           <template #subTitle>
             <div ref="portPropertiesBlock">
-              <div class="alert-block flex flex-col">
+              <div class="subtitle-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>
@@ -187,21 +190,22 @@
         >
           <template #subTitle>
             <div ref="ipFourSettingsBlock">
-              <div class="alert-block flex flex-col">
+              <div class="subtitle-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>
@@ -229,21 +233,22 @@
         >
           <template #subTitle>
             <div ref="connectionSettingsBlock">
-              <div class="alert-block flex flex-col">
+              <div class="subtitle-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>
@@ -458,7 +463,6 @@ const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
   }
   :deep(.ui-wizard-content-with-subtitle) {
     padding-right: 0;
-    scrollbar-gutter: unset;
   }
 }
 
@@ -473,7 +477,7 @@ const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
 :deep(.ui-alert-item) {
   margin-bottom: 12px;
 
-  &:last-of-type {
+  &.mb-4 {
     margin-bottom: 16px;
   }
 }

package/components/common/wizards/network/add/lib/config/initialData.ts

@@ -37,7 +37,7 @@ export const portPropertiesInitial = (
   localization: UI_I_Localization
 ): UI_I_PortProperties => ({
   networkLabel: '',
-  vlanId: `${localization.common.none2} (0)`,
+  vlanId: `${localization.common.none} (0)`,
   mtu: {
     option: '0',
     size: 1500,
@@ -62,15 +62,15 @@ export const connectionSettingsInitial = (
   localization: UI_I_Localization
 ): UI_I_ConnectionSettings => ({
   networkLabel: 'VM Network',
-  vlanId: `${localization.common.none2} (0)`,
+  vlanId: `${localization.common.none} (0)`,
 })
 
 export const vlanIdSelectDataFunc = (
   localization: UI_I_Localization
 ): UI_I_VlanIdData[] => [
   {
-    text: `${localization.common.none2} (0)`,
-    value: `${localization.common.none2} (0)`,
+    text: `${localization.common.none} (0)`,
+    value: `${localization.common.none} (0)`,
   },
   {
     text: `${localization.common.all} (4095)`,

package/components/common/wizards/network/add/lib/utils/utils.ts

@@ -5,5 +5,5 @@ export const getVlanId = (
   localization: UI_I_Localization
 ): string =>
   (vlanId === `${localization.common.all} (4095)` && '4095') ||
-  (vlanId === `${localization.common.none2} (0)` && '0') ||
+  (vlanId === `${localization.common.none} (0)` && '0') ||
   vlanId

package/components/common/wizards/network/add/steps/ipFourSettings/IpFourSettingsNew.vue

@@ -281,8 +281,14 @@ const fields = computed({
   }
 }
 :deep(.ui-checkbox-label) {
-  &.md {
-    height: unset;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  .ui-checkbox-label-text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
 }
 .tooltip-text {

package/components/common/wizards/network/add/steps/portProperties/PortPropertiesNew.vue

@@ -299,8 +299,14 @@ const portPropertiesEnabledServices = computed<
   padding: 0 8px 0 12px;
 }
 :deep(.ui-checkbox-label) {
-  &.md {
-    height: unset;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  .ui-checkbox-label-text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
 }
 </style>