bfg-common 1.6.95 → 1.6.97

package/components/common/monitor/utilization/new/New.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="utilization flex flex-col h-full overflow-hidden">
+    <common-monitor-utilization-new-skeleton v-if="props.isLoading" />
+    <template v-else>
+      <div class="flex flex-wrap justify-between gap-4 mb-4 px-[6px]">
+        <h3 class="utilization-title text-[18px] font-[500]">
+          {{ localization.common.utilization }}
+        </h3>
+
+        <ui-button
+          id="utilization-settings-edit-button"
+          test-id="utilization-settings-edit-button"
+          variant="text"
+          class="utilization-settings-edit-button"
+          is-without-sizes
+          is-without-height
+          @click="isShowSettings = !isShowSettings"
+        >
+          <ui-icon name="settings" width="18px" height="18px" />
+        </ui-button>
+        <ui-popup-window
+          v-model="isShowSettings"
+          test-id="utilization-settings-select"
+          elem-id="utilization-settings-edit-button"
+          :margin-between-trigger="4"
+          width="144px"
+          left
+        >
+          <ul class="utilization-settings-items grid gap-2 p-2">
+            <li class="list-item">
+              <ui-checkbox
+                v-model="isCheckAllSettings"
+                :label-text="localization.common.all"
+                :disabled="isDisabledCheckAllSettings"
+                test-id="utilization-settings-all"
+                size="md"
+                @change="onCheckAllSettings"
+              />
+            </li>
+            <li v-for="item in allDataLocal" :key="item.id" class="list-item">
+              <ui-checkbox
+                v-model="item.isShow"
+                :test-id="`utilization-settings-${item.id}`"
+                :label-text="item.title"
+                size="md"
+              />
+            </li>
+          </ul>
+        </ui-popup-window>
+      </div>
+
+      <div class="utilization-info-block-flex-container overflow-auto">
+        <ui-portlet-sortable-view
+          :portlets="portlets"
+          :name="portletsPageName"
+          @change-container-size="onChangeContainerSize"
+        >
+          <template
+            #default="{ portletId, dragged, isOpen, draggedAny, isLast }"
+          >
+            <common-monitor-utilization-new-portlet
+              :all-data="allDataLocal"
+              :portlet-id="portletId"
+              :dragged="dragged"
+              :dragged-any="draggedAny"
+              :is-open="isOpen"
+              :is-last="isLast"
+              :not-single-column-block="notSingleColumnBlock"
+              @toggle-portlet="onTogglePortlet"
+            />
+          </template>
+        </ui-portlet-sortable-view>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Portlet } from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/interfaces'
+import { togglePortletFunc } from '~/node_modules/bfg-uikit/components/ui/portlet/lib/utils/utils'
+import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { getPortletsLocal } from '~/components/common/monitor/utilization/new/lib/utils/newPortlet'
+
+const allDataLocal = defineModel<UI_I_UtilizationDataItem[]>('all-data', {
+  required: true,
+})
+const props = defineProps<{
+  isLoading: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'set-items-show-settings'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowSettings = ref<boolean>(false)
+
+const isCheckAllSettings = ref<boolean>(false)
+const isDisabledCheckAllSettings = computed<boolean>(() =>
+  allDataLocal.value.every((item) => item.isShow)
+)
+const onCheckAllSettings = () => {
+  allDataLocal.value = allDataLocal.value.map((item) => {
+    return {
+      ...item,
+      isShow: isCheckAllSettings.value,
+    }
+  })
+}
+
+const portletsPageName = 'utilization'
+
+const portlets = ref<UI_I_Portlet[]>([])
+
+let initialPortlets: UI_I_Portlet[] = []
+
+const containerWidth = ref<number>(0)
+
+const notSingleColumnBlock = computed<boolean>(
+  () =>
+    containerWidth.value > 1150 ||
+    (containerWidth.value < 720 && containerWidth.value > 500)
+)
+
+const onChangeContainerSize = (width: number): void => {
+  containerWidth.value = width
+}
+
+const getPortletData = (): void => {
+  portlets.value = getPortletsLocal(portletsPageName, initialPortlets)
+}
+
+const onTogglePortlet = (id: string): void => {
+  togglePortletFunc(id, portletsPageName, initialPortlets, getPortletData)
+}
+
+watch(
+  allDataLocal,
+  (newValue) => {
+    if (newValue.length) {
+      initialPortlets = []
+
+      newValue.forEach((item) => {
+        initialPortlets.push({
+          id: item.id,
+          list: 1,
+          isOpen: true,
+        })
+      })
+      getPortletData()
+      emits('set-items-show-settings')
+
+      const isNotAllSelected = newValue.some((item) => !item.isShow)
+      isCheckAllSettings.value = !isNotAllSelected
+    }
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style>
+:root {
+  --utilization-settings-trigger-btn-bg-color: #f6f7f8;
+}
+:root.dark-theme {
+  --utilization-settings-trigger-btn-bg-color: #283948;
+}
+</style>
+
+<style scoped lang="scss">
+.utilization {
+  padding-top: 16px;
+
+  &-title {
+    color: var(--title-form-first-color);
+  }
+
+  .utilization-settings-edit-button {
+    width: 34px;
+    height: 34px;
+    border: 1px solid var(--line-color);
+    color: var(--modal-icon);
+    background-color: var(--btn-default-outline-bg-color);
+    &:hover {
+      background-color: var(--utilization-settings-trigger-btn-bg-color);
+    }
+  }
+  .utilization-settings-items {
+    .list-item {
+      padding: 7px 9px;
+    }
+  }
+}
+</style>

package/components/common/monitor/utilization/new/Portlet.vue

@@ -0,0 +1,42 @@
+<template>
+  <ui-portlet
+    v-if="selectedItem?.isShow"
+    :title="selectedItem.title"
+    :dragged="props.dragged"
+    :dragged-any="props.draggedAny"
+    :is-open="props.isOpen"
+    :portlet-id="props.portletId"
+    :is-last="props.isLast"
+    :not-single="!props.notSingleColumnBlock"
+    :test-id="`utilization-portlet-${props.portletId}`"
+    @toggle="emits('toggle-portlet', $event)"
+  >
+    <template #portletBody>
+      <common-monitor-utilization-info-block :info-data="selectedItem" />
+    </template>
+  </ui-portlet>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
+
+const props = defineProps<{
+  allData: UI_I_UtilizationDataItem[]
+  portletId: string
+  dragged: boolean
+  isOpen: boolean
+  isLast: boolean
+  draggedAny: boolean
+  notSingleColumnBlock: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'toggle-portlet', id: string): void
+}>()
+
+const selectedItem = computed<UI_I_UtilizationDataItem | null>(
+  () => props.allData.find((item) => item.id === props.portletId) || null
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/monitor/utilization/new/Skeleton.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="flex flex-col overflow-hidden h-full pb-4">
+    <div class="flex flex-wrap justify-between gap-4 px-[6px]">
+      <ui-skeleton-item width="160" height="22" />
+      <ui-skeleton-item width="34" height="34" border-radius="8" />
+    </div>
+    <div
+      class="utilization-portlet-skeleton-container h-full overflow-auto mt-4"
+    >
+      <div class="utilization-portlet-skeleton p-4">
+        <div class="flex justify-between">
+          <ui-skeleton-item width="80" height="20" />
+          <ui-icon
+            name="drag-area"
+            class="utilization-portlet-skeleton-drag-icon"
+          />
+          <ui-icon
+            class="utilization-portlet-skeleton-arrow-icon"
+            name="arrow"
+            width="20"
+            height="20"
+          />
+        </div>
+        <div
+          class="utilization-portlet-skeleton-progress-container grid mt-4 gap-2"
+        >
+          <ui-skeleton-item width="100%" height="20" />
+          <ui-skeleton-item width="100%" height="20" />
+          <ui-icon name="dotes-with-arrow" class="icon-dotes left" />
+          <ui-icon name="dotes-with-arrow" class="icon-dotes right" />
+        </div>
+        <div class="block-header-text-info flex justify-between mt-3 pb-4">
+          <ui-skeleton-item width="64" height="16" />
+          <ui-skeleton-item width="64" height="16" />
+        </div>
+        <div class="flex justify-between mt-4">
+          <ui-skeleton-item width="144" height="18" />
+          <ui-skeleton-item width="144" height="18" />
+        </div>
+        <div class="flex justify-between mt-4">
+          <ui-skeleton-item width="144" height="18" />
+          <ui-skeleton-item width="144" height="18" />
+        </div>
+        <div class="flex justify-between mt-4">
+          <ui-skeleton-item width="144" height="18" />
+          <ui-skeleton-item width="144" height="18" />
+        </div>
+        <div class="flex justify-between mt-4">
+          <ui-skeleton-item width="144" height="18" />
+          <ui-skeleton-item width="144" height="18" />
+        </div>
+        <div class="flex justify-between mt-4">
+          <ui-skeleton-item width="144" height="18" />
+          <ui-skeleton-item width="144" height="18" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style>
+:root {
+  --utilization-settings-skeleton-block-bg: #ffffff;
+  --utilization-settings-skeleton-drag-icon: #e9ebed;
+  --utilization-settings-skeleton-toggle-icon: #213444;
+  --utilization-settings-skeleton-dotes-icon: #bdc3c7;
+  --utilization-settings-skeleton-progress-bottom-info-block-border: #e9ebeda3;
+}
+:root.dark-theme {
+  --utilization-settings-skeleton-block-bg: #334453;
+  --utilization-settings-skeleton-drag-icon: #e9ebed1f;
+  --utilization-settings-skeleton-toggle-icon: #e9eaec;
+  --utilization-settings-skeleton-dotes-icon: #bdc3c770;
+  --utilization-settings-skeleton-progress-bottom-info-block-border: #e9ebed1f;
+}
+</style>
+
+<style scoped lang="scss">
+.utilization-portlet-skeleton-container {
+  padding-left: 6px;
+  padding-right: 6px;
+
+  .utilization-portlet-skeleton {
+    background-color: var(--utilization-settings-skeleton-block-bg);
+    box-shadow: 0 1px 4px 0 #00000014;
+    border-radius: 8px;
+
+    .utilization-portlet-skeleton-drag-icon {
+      color: var(--utilization-settings-skeleton-drag-icon);
+    }
+    .utilization-portlet-skeleton-arrow-icon {
+      color: var(--utilization-settings-skeleton-toggle-icon);
+    }
+    .utilization-portlet-skeleton-progress-container {
+      height: 64px;
+      position: relative;
+
+      .icon-dotes {
+        color: var(--utilization-settings-skeleton-dotes-icon);
+        position: absolute;
+        top: -2px;
+
+        &.left {
+          left: 30%;
+          transform: rotateY(170deg);
+        }
+        &.right {
+          left: 70%;
+        }
+      }
+    }
+    .block-header-text-info {
+      border-bottom: 1px solid
+        var(--utilization-settings-skeleton-progress-bottom-info-block-border);
+    }
+  }
+}
+</style>

package/components/common/monitor/utilization/new/lib/utils/newPortlet.ts

@@ -0,0 +1,7 @@
+import type { UI_I_Portlet } from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/interfaces'
+
+export const getPortletsLocal = (
+  portletsPageName: string,
+  initialPortlets: UI_I_Portlet[]
+): UI_I_Portlet[] =>
+  useLocalStorage(`${portletsPageName}-portlets-positions`) || initialPortlets

package/components/common/noDataProvided/NoDataProvided.vue

@@ -0,0 +1,17 @@
+<template>
+  <component :is="currentComponent" />
+</template>
+
+<script setup lang="ts">
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./NoDataProvidedNew.vue'))
+    : defineAsyncComponent(() => import('./NoDataProvidedOld.vue'))
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/noDataProvided/NoDataProvidedNew.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="ui-no-data-provided">
+    <div class="ui-no-data-provided-center">
+      <div class="ui-no-data-provided-icon">
+        <ui-icon name="no-data-provided" width="92" height="92" />
+      </div>
+      <span class="ui-no-data-provided-title">
+        {{ localization.common.noDataProvided }}
+      </span>
+      <span class="ui-no-data-provided-subtitle">
+        {{ localization.common.noDataProvidedMessage }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.ui-no-data-provided {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .ui-no-data-provided-center {
+    position: absolute;
+
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .ui-no-data-provided-icon {
+      width: 92px;
+      height: 92px;
+    }
+
+    .ui-no-data-provided-title {
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 19px;
+      letter-spacing: 0;
+      text-align: center;
+      margin: 16px 0 6px;
+      color: var(--title-form-first-color);
+    }
+
+    .ui-no-data-provided-subtitle {
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 16px;
+      letter-spacing: 0;
+      text-align: center;
+      vertical-align: middle;
+      color: var(--form-icon-color);
+    }
+  }
+}
+</style>

package/components/common/noDataProvided/NoDataProvidedOld.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="summary__empty-block flex items-center justify-center">
+    {{ localization.common.noDataProvided }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.summary__empty-block {
+  height: inherit;
+  font-size: 25px;
+}
+</style>

package/components/common/pages/auth/TheFooter.vue

@@ -57,6 +57,11 @@ const supportLink = computed<string>(() => {
   padding: 11px 44px;
 
   .content {
+    @media (max-width: 640px) {
+      flex-direction: column;
+      gap: 0;
+      align-items: flex-start;
+    }
     .company-info {
       font-size: 14px;
       line-height: 18px;
@@ -70,6 +75,10 @@ const supportLink = computed<string>(() => {
 
     .dote-divider {
       color: #9da6ad;
+
+      @media (max-width: 640px) {
+        display: none;
+      }
     }
 
     .support-link {

package/components/common/pages/backups/lib/models/interfaces.ts

@@ -31,6 +31,7 @@ export interface UI_I_BackupAction {
   id?: string
   name?: string
   backupId?: string
+  vmId?: string
   bucketId?: string
   storageId?: string
 }

package/components/common/pages/backups/modals/Modals.vue

@@ -187,6 +187,7 @@ watch(
       case 'restoreBackup':
         isShowRestoreModal.value = true
         restoreForm.value.backup_storage = newValue.storageId || ''
+        restoreForm.value.vm = newValue.vmId || ''
         restoreForm.value.bucket = newValue.bucketId || ''
         restoreForm.value.backup = newValue.backupId || ''
         break

package/components/common/pages/backups/modals/createBackup/New.vue

@@ -283,4 +283,8 @@ const onCreateDatastore = (): void => emits('submit')
   scrollbar-gutter: stable;
   padding-right: 16px;
 }
+:deep(.column-manager-button.sm span) {
+  font-size: 12px;
+  font-weight: 500;
+}
 </style>

package/components/common/pages/backups/modals/createBackup/Old.vue

@@ -12,7 +12,7 @@
       @submit="onFinish"
     >
       <template #modalBody="{ selectedStep }">
-        <common-pages-scheduled-tasks-modals-common-new-task-form
+        <common-pages-scheduled-tasks-modals-common-task-form
           v-show="selectedStep.id === dynamicSteps.schedulingOptions"
           v-model="modelSchedulerTask"
           :target="props.selectedVmName"

package/components/common/pages/backups/modals/createBackup/datastores/tableView/new/lib/config/table.ts

@@ -191,19 +191,19 @@ export const getBodyDataFunc = (
         },
         {
           col: 'col2',
-          text: $binary.round(datastore.capacity.capacity_mb, false, lang)
+          text: $binary.round(datastore.capacity.capacity_mb || 0, false, lang)
         },
         {
           col: 'col3',
-          text: $binary.round(datastore.capacity.provisioned_mb, false, lang)
+          text: $binary.round(datastore.capacity.provisioned_mb || 0, false, lang)
         },
         {
           col: 'col4',
-          text: $binary.round(datastore.capacity.free_mb, false, lang)
+          text: $binary.round(datastore.capacity.free_mb || 0, false, lang)
         },
         {
           col: 'col5',
-          text: $binary.round(datastore.capacity.used_mb, false, lang)
+          text: $binary.round(datastore.capacity.used_mb || 0, false, lang)
         },
         {
           col: 'col6',

package/components/common/pages/backups/modals/createBackup/datastores/tableView/old/lib/config/table.ts

@@ -83,7 +83,7 @@ export const bodyItems = (
       },
       {
         key: 'col2',
-        text: $binary.round(datastore.capacity[tableKeys[2]], false, lang),
+        text: $binary.round(datastore.capacity[tableKeys[2]] || 0, false, lang),
         id: datastore.id,
         testId: `backup-datastore-table-item-${datastore.id}`,
         data: {
@@ -93,7 +93,7 @@ export const bodyItems = (
       {
         key: 'col3',
         text: $binary.round(
-          datastore.capacity[tableKeys[3]],
+          datastore.capacity[tableKeys[3]] || 0,
           false,
           lang
         ),
@@ -105,7 +105,7 @@ export const bodyItems = (
       },
       {
         key: 'col4',
-        text: $binary.round(datastore.capacity[tableKeys[4]], false, lang),
+        text: $binary.round(datastore.capacity[tableKeys[4]] || 0, false, lang),
         id: datastore.id,
         testId: `backup-datastore-table-item-${datastore.id}`,
         data: {
@@ -114,7 +114,7 @@ export const bodyItems = (
       },
       {
         key: 'col5',
-        text: $binary.round(datastore.capacity[tableKeys[5]], false, lang),
+        text: $binary.round(datastore.capacity[tableKeys[5]] || 0, false, lang),
         id: datastore.id,
         testId: `backup-datastore-table-item-${datastore.id}`,
         data: {

package/components/common/pages/backups/modals/createBackup/disks/tableView/new/TableView.vue

@@ -75,7 +75,6 @@ const data = computed<UI_I_DataTable>(() => ({
   id: 'vm-backup-disks-table',
   header: headItems.value,
   body: bodyItems.value,
-  title: ' ',
 }))
 
 const headItems = computed<UI_I_DataTableHeader[]>(() => {

package/components/common/pages/backups/modals/createBackup/disks/tableView/new/lib/config/table.ts

@@ -39,7 +39,7 @@ export const getHeaderDataFunc = (
     text: localization.common.bus,
     isSortable: true,
     sort: 'asc',
-    width: '160px',
+    width: '136px',
     show: true,
     filter: true
   },

package/components/common/pages/backups/modals/createBackup/general/General.vue

@@ -10,6 +10,7 @@
     v-model="model"
     :show="props.show"
     :alert-messages="props.alertMessages"
+    :messages-fields="props.messagesFields"
     @remove-validation-errors="emits('remove-validation-errors', $event)"
   />
 </template>

package/components/common/pages/backups/modals/createBackup/general/GeneralNew.vue

@@ -32,7 +32,7 @@
         v-model="model.description"
         :placeholder="localization.common.description"
         test-id="vm-backup-name-input"
-        height="72"
+        height="92"
       />
     </div>
   </div>