bfg-common 1.6.3 → 1.6.4

package/components/common/monitor/utilization/infoBlock/Old.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="utilization-info-block">
+    <div class="header-block">
+      <p class="title">{{ props.infoData.title }}</p>
+    </div>
+    <div class="body-block">
+      <div class="bar">
+        <div :title="currentTitle" class="track">
+          <div
+            :style="{
+              width: animated ? barPercent + '%' : '0%',
+              background: consumedItem?.color,
+              boxShadow: `0 0 6px ${consumedItem?.color}88`,
+            }"
+            class="fill"
+          />
+        </div>
+      </div>
+      <div class="footer-body-block">
+        <p>0 {{ localization.common.gb }}</p>
+        <p>{{ maxItem?.value }}</p>
+      </div>
+    </div>
+    <div class="footer-block">
+      <div
+        v-for="(item, key) in props.infoData.data"
+        :key="key"
+        class="footer-item"
+      >
+        <div class="left-block">
+          <div
+            v-if="item.color"
+            :style="`background-color: ${item.color}`"
+            class="color-block"
+          ></div>
+          <p class="name">{{ item.label }}</p>
+        </div>
+        <p class="value">{{ item.value }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_UtilizationDataItem,
+  UI_I_UtilizationDataItems,
+} from '~/components/common/monitor/utilization/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  infoData: UI_I_UtilizationDataItem
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const animated = ref<boolean>(false)
+
+const maxItem = computed<UI_I_UtilizationDataItems | null>(
+  () =>
+    props.infoData.data.find((item) =>
+      item.label.toLowerCase().includes('capacity')
+    ) || null
+)
+
+const consumedItem = computed<UI_I_UtilizationDataItems | null>(
+  () =>
+    props.infoData.data.find((item) =>
+      item.label.toLowerCase().includes('consumed')
+    ) || null
+)
+
+const usageItem = computed<UI_I_UtilizationDataItems | null>(
+  () =>
+    props.infoData.data.find((item) =>
+      item.label.toLowerCase().includes('usagepercent')
+    ) || null
+)
+const currentTitle = computed<string>(
+  () =>
+    `${consumedItem.value?.value} / ${maxItem.value?.value} - ${usageItem.value?.value}`
+)
+
+const barPercent = computed<string>(() => {
+  const parse = (v: string) => parseFloat(v.replace(/[^\d.]/g, '')) || 0
+  if (!maxItem.value || !consumedItem.value) return '0'
+  return String(
+    Math.min(
+      (parse(consumedItem.value.value) / parse(maxItem.value.value)) * 100,
+      100
+    )
+  )
+})
+
+onMounted(() => {
+  setTimeout(() => (animated.value = true), 100)
+})
+</script>
+
+<style scoped lang="scss">
+.utilization-info-block {
+  width: 522px;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0px 0px 2px #ccc;
+
+  .header-block {
+    margin-bottom: 20px;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+
+  .body-block {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 20px;
+
+    .bar {
+      .track {
+        height: 18px;
+        background: #e5e7eb;
+        border-radius: 4px;
+        overflow: hidden;
+        border: 1px solid gray;
+      }
+
+      .fill {
+        height: 100%;
+        border-radius: 2px;
+        transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+    .footer-body-block {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      p {
+        font-size: 11px;
+      }
+    }
+  }
+
+  .footer-block {
+    display: grid;
+    grid-row-gap: 5px;
+    width: 70%;
+
+    .footer-item {
+      display: grid;
+      align-items: center;
+      gap: 5px;
+      grid-template-columns: 70% 30%;
+
+      .left-block {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+
+        .color-block {
+          width: 15px;
+          height: 15px;
+          border: 1px solid black;
+          border-radius: 4px;
+        }
+
+        .name {
+          font-size: 14px;
+          font-weight: 500;
+        }
+      }
+
+      .value {
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+  }
+}
+</style>

package/components/common/monitor/utilization/lib/models/enums.ts

@@ -0,0 +1,4 @@
+export enum UI_E_UtilizationBlockCurrentKeys {
+  cpuUtilization = 'hostCpu',
+  hostMemoryUtilization = 'hostMem',
+}

package/components/common/monitor/utilization/lib/models/interfaces.ts

@@ -0,0 +1,25 @@
+export interface API_UI_I_UtilizationDataItems {
+  label: string
+  value: string
+}
+
+export interface API_UI_I_UtilizationDataItem {
+  items: API_UI_I_UtilizationDataItems[]
+}
+
+export interface API_UI_I_UtilizationData {
+  [key: string]: API_UI_I_UtilizationDataItem
+}
+
+export interface UI_I_UtilizationDataItems {
+  label: string
+  value: string
+  color: string
+}
+
+export interface UI_I_UtilizationDataItem {
+  id: string
+  isShow: boolean
+  title: string
+  data: UI_I_UtilizationDataItems[]
+}

package/components/common/monitor/utilization/lib/utils/index.ts

@@ -0,0 +1,31 @@
+import type {
+  API_UI_I_UtilizationData,
+  UI_I_UtilizationDataItem,
+} from '~/components/common/monitor/utilization/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { UI_E_UtilizationBlockCurrentKeys } from '~/components/common/monitor/utilization/lib/models/enums'
+
+export const constructApiData = (
+  apiData: API_UI_I_UtilizationData,
+  localization: UI_I_Localization
+): UI_I_UtilizationDataItem[] => {
+  const result: UI_I_UtilizationDataItem[] = []
+  Object.keys(apiData).forEach((key) => {
+    result.push({
+      id: key,
+      isShow: true,
+      title: localization.common[UI_E_UtilizationBlockCurrentKeys[key]],
+      data: apiData[key].items.map((item) => {
+        item.color = !item.label.toLowerCase().includes('capacity')
+          ? '#' +
+            Math.floor(Math.random() * 0xffffff)
+              .toString(16)
+              .padStart(6, '0')
+          : ''
+
+        return item
+      }),
+    })
+  })
+  return result
+}

package/components/common/noDataProvided/NoDataProvidedNew.vue

@@ -43,7 +43,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
     }
 
     .ui-no-data-provided-title {
-      font-weight: 500;
+      font-weight: 400;
       font-size: 16px;
       line-height: 19px;
       letter-spacing: 0;

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

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

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

@@ -52,10 +52,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);
+      }
     }
   }
 
@@ -95,11 +99,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 +116,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;
     }
   }

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

@@ -8,6 +8,7 @@
     ]"
   >
     <div
+      v-if="!props.isNewVmFromTemplate"
       :class="[
         'checkbox-container',
         { checked: isCustomizeOs },
@@ -59,35 +60,24 @@
       </p>
     </div>
     <div
-      :class="[
-        'checkbox-container',
-        { checked: isPowerOn },
-        { disabled: props.isNewVmFromTemplate },
-      ]"
+      :class="['checkbox-container', { checked: isPowerOn }]"
       @click.stop.prevent="onTogglePowerOn"
     >
-      <!--      :disabled="props.isNewVmFromTemplate"-->
       <ui-checkbox
         v-model="isPowerOn"
         :label-text="localization.vmWizard.autoPowerOn"
-        :title="localization.vmWizard.autoPowerOn"
-        :disabled="props.isNewVmFromTemplate"
         test-id="power-on"
         size="md"
       />
-      <!--      { disabled: props.isNewVmFromTemplate },-->
-      <p
-        :class="[
-          'checkbox-block-description mt-2 ml-7',
-          { disabled: props.isNewVmFromTemplate },
-        ]"
-      >
+      <p class="checkbox-block-description mt-2 ml-7">
         {{ localization.vmWizard.powerVMAfterCreation }}
       </p>
     </div>
-    <div v-if="props.isNewVmFromTemplate" class="checkbox-container">
+    <div
+      v-if="props.isNewVmFromTemplate && props.project === 'sphere'"
+      class="checkbox-container"
+    >
       <ui-input
-        v-if="props.project === 'sphere'"
         v-model="maxParallel"
         :placeholder="localization.vmWizard.maxParallel"
         test-id="max-parallel"
@@ -180,7 +170,7 @@ const onToggleCustomizeHardware = (): void => {
 }
 
 const onTogglePowerOn = (): void => {
-  if (props.isNewVmFromTemplate) return
+  // if (props.isNewVmFromTemplate) return
 
   isPowerOn.value = !isPowerOn.value
   if (isPowerOn.value) {
@@ -223,7 +213,8 @@ watch(
 
 <style scoped lang="scss">
 .select-options {
-  grid-template-columns: 1fr 1fr;
+  //grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   grid-template-rows: max-content;
   overflow-y: auto;
   padding-bottom: 16px;

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

@@ -163,7 +163,7 @@ 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);
     }

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,
       })
     }
   }