bfg-common 1.6.96 → 1.6.97

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

@@ -9,15 +9,37 @@
     />
 
     <form @submit.prevent>
-      <div class="field flex pt-4">
-        <label for="general-name">{{ localization.common.name }}:</label>
-        <input
-          id="general-name"
-          v-model.trim="model.name"
-          data-id="general-name-input"
-          type="text"
-        />
+      <div class="field clr-form-control flex flex-row pt-4 mt-0">
+        <label for="general-name">
+          {{ localization.common.name }}
+        </label>
+
+        <div
+            :class="[
+          'clr-control-container',
+            nameErrorText &&
+            'clr-error',
+        ]"
+        >
+          <div class="flex-align-center w-full">
+            <input
+                id="general-name"
+                v-model.trim="model.name"
+                data-id="general-name-input"
+                type="text"
+                class="clr-input w-full"
+            />
+            <atoms-the-icon class="error-icon" name="info-circle" />
+          </div>
+          <div
+              v-if="nameErrorText"
+              class="clr-subtext ng-star-inserted"
+          >
+            {{ nameErrorText }}
+          </div>
+        </div>
       </div>
+
       <div class="field flex pt-4">
         <label for="general-description"
         >{{ localization.common.description }} ({{
@@ -35,6 +57,8 @@
 </template>
 
 <script lang="ts" setup>
+import type {UI_I_ArbitraryObject} from "~/node_modules/bfg-uikit/models/interfaces";
+import type {UI_I_ErrorFields} from "~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces";
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
 import { dynamicSteps } from '~/components/common/pages/backups/modals/createBackup/lib/config/steps'
@@ -44,6 +68,7 @@ const model = defineModel<UI_I_CreateBackupForm>({ required: true })
 const props = defineProps<{
   show: boolean
   alertMessages: string[]
+  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
 }>()
 const emits = defineEmits<{
   (event: 'remove-validation-errors', value: number): void
@@ -51,6 +76,8 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+const nameErrorText = computed<string>(() => props.messagesFields?.name?.field || '')
+
 watch(
   () => props.show,
   (newValue) => {
@@ -75,9 +102,32 @@ const onRemoveErrors = (): void => {
   label {
     width: 216px;
   }
-  input,
   textarea {
     width: 345px;
   }
 }
+.clr-form-control {
+  display: flex;
+  flex-direction: row;
+
+  .clr-control-container {
+    min-height: 48px;
+    width: 345px;
+    &.clr-error {
+      .clr-subtext,
+      .error-icon {
+        display: block;
+      }
+    }
+    .clr-subtext,
+    .error-icon {
+      display: none;
+    }
+    .error-icon {
+      fill: #db2100;
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
 </style>

package/components/common/pages/backups/modals/lib/config/restore.ts

@@ -4,6 +4,7 @@ export const restoreDefaultFormFunc = (): UI_I_RestoreForm => {
   return {
     restore_code: 2,
     backup_storage: '',
+    vm: '',
     bucket: '',
     backup: '',
     copy_disks: [],

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

@@ -163,6 +163,7 @@ export interface UI_I_CreateBackupForm {
 export interface UI_I_RestoreForm {
   restore_code: 1 | 2 | 3 // 1 - disk only, 2 - existing, 3 - as New
   backup_storage: string
+  vm: string
   bucket: string
   backup: string
   copy_disks: UI_I_Pvm['disk_devices']

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

@@ -49,47 +49,48 @@
             <common-pages-backups-modals-restore-name
               v-model="model"
               :show="selectedStep.id === dynamicSteps.selectName"
-              :message-error-field="props.alertMessages[dynamicSteps.selectName][0]"
+              :message-error-field="
+                props.alertMessages[dynamicSteps.selectName][0]
+              "
               :is-loading="isLoading"
             />
           </div>
         </template>
       </ui-wizard-block>
 
-      <ui-wizard-block
-        v-if="selectedStep.id === dynamicSteps.selectStorage"
-        :sub-title-height="height2"
-      >
-        <template #subTitle>
-          <div ref="subTitleBlock2">
-            <ui-alert
-              v-if="props.alertMessages[dynamicSteps.selectStorage].length"
-              :messages="props.alertMessages[dynamicSteps.selectStorage]"
-              test-id="backup-restore-datastores-error-alert"
-              type="error"
-              size="md"
-              class="mb-4"
-            />
-
-            <div class="subtitle-block flex-row w-full items-start">
-              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+      <div v-show="selectedStep.id === dynamicSteps.selectStorage">
+        <ui-wizard-block :sub-title-height="height2">
+          <template #subTitle>
+            <div ref="subTitleBlock2">
+              <ui-alert
+                v-if="props.alertMessages[dynamicSteps.selectStorage].length"
+                :messages="props.alertMessages[dynamicSteps.selectStorage]"
+                test-id="backup-restore-datastores-error-alert"
+                type="error"
+                size="md"
+                class="mb-4"
+              />
+
+              <div class="subtitle-block flex-row w-full items-start">
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+              </div>
             </div>
-          </div>
-        </template>
-        <template #content>
-          <div class="restore-select-storage mb-4">
-            <common-vm-actions-common-select-storage
-              :storage-submit="props.storageSubmit"
-              :is-datastore-loading="props.datastoreLoading"
-              :get-datastore-table-func="getDatastoreTableFunc"
-              :datastore="props.datastore"
-              :storage="props.selectedStorage"
-              hide-alert
-              @change-storage="onChangeStorage"
-            />
-          </div>
-        </template>
-      </ui-wizard-block>
+          </template>
+          <template #content>
+            <div class="restore-select-storage mb-4">
+              <common-vm-actions-common-select-storage
+                :storage-submit="props.storageSubmit"
+                :is-datastore-loading="props.datastoreLoading"
+                :get-datastore-table-func="getDatastoreTableFunc"
+                :datastore="props.datastore"
+                :storage="model.pvm.storage"
+                hide-alert
+                @change-storage="onChangeStorage"
+              />
+            </div>
+          </template>
+        </ui-wizard-block>
+      </div>
 
       <ui-wizard-block
         v-if="selectedStep.id === dynamicSteps.selectDisks"
@@ -228,7 +229,6 @@ const props = defineProps<{
   alertMessages: string[][]
   readyCompleteData: UI_I_TableInfoItem[]
   storageSubmit: null | Function
-  selectedStorage: UI_I_DatastoreTableItem | null
   datastore: UI_I_DatastoreTableItem[]
   datastoreLoading: boolean
   networks: UI_I_NetworkTableItem[]
@@ -345,10 +345,15 @@ const onHideModal = (): void => emits('hide')
     }
     .details-item-value {
       white-space: unset;
+      overflow-wrap: anywhere;
     }
     .sprite-icon {
       min-width: 20px;
     }
   }
 }
+:deep(.column-manager-button.sm span) {
+  font-size: 12px;
+  font-weight: 500;
+}
 </style>

package/components/common/pages/backups/modals/restore/Restore.vue

@@ -11,7 +11,6 @@
     :datastore-loading="props.datastoreLoading"
     :networks="props.networks"
     :ready-complete-data="readyToCompleteInfo"
-    :selected-storage="selectedStorage"
     :is-loading="isLoading"
     :errors="errors"
     @change-storage="onChangeStorage"
@@ -242,12 +241,10 @@ const getDatastoreTableFunc = async (): Promise<void> => {
 }
 
 const selectedStorageName = ref<string>('')
-const selectedStorage = ref<UI_I_DatastoreTableItem | null>(null)
 const onChangeStorage = (storage: UI_I_DatastoreTableItem | null): void => {
   if (!storage) return
 
   selectedStorageName.value = storage.name
-  selectedStorage.value = storage
   model.value.pvm.storage = {
     id: storage.id,
     folder: model.value.pvm.storage.folder || '',
@@ -261,7 +258,8 @@ const getPvm = async (): Promise<void> => {
   loadingCount.value++
   await $store.dispatch('backup/A_GET_PVM', {
     target: model.value.backup_storage,
-    bucketId: model.value.bucket, // TODO bucket поменять на vm так как это сейчас vm
+    vmId: model.value.vm,
+    bucketId: model.value.bucket,
     backupId: model.value.backup,
   })
 
@@ -276,7 +274,8 @@ const getBackupDisks = async (): Promise<void> => {
   loadingCount.value++
   await $store.dispatch('backup/A_GET_BACKUP_DISKS', {
     target: model.value.backup_storage,
-    bucketId: model.value.bucket, // TODO bucket поменять на vm так как это сейчас vm
+    vmId: model.value.vm,
+    bucketId: model.value.bucket,
     backupId: model.value.backup,
   })
 

package/components/common/pages/backups/modals/restore/disks/tableView/new/Table.vue

@@ -105,9 +105,14 @@ watch(
 const onSelectRow = (value: UI_I_DataTableBody[]): void => {
   const allNotDisks =
     model.value.filter((row) => row.device_type !== 'disk') || []
+
+  const selectedSources = value.map(
+    (item) => item.data[0]?.data?.data?.source || ''
+  )
+
   model.value = [
     ...allNotDisks,
-    ...value.map((item) => item.data[0]?.data?.data),
+    ...(props.disks.filter((item) => selectedSources.includes(item.source)) || []),
   ]
 }
 </script>

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

@@ -138,6 +138,7 @@ export const getBodyDataFunc = (
               source: disk.source,
               location: disk.source,
               target: disk.target,
+              device_type: disk.device_type,
             },
           },
         },

package/components/common/pages/backups/modals/restore/lib/config/steps.ts

@@ -75,7 +75,7 @@ export const stepsFunc = (
       id: dynamicSteps.selectDisksForCopy,
       stepName: '',
       title: localization.common.selectDisksForCopy,
-      subTitle: localization.common.selectDisksInvolvedBackup,
+      subTitle: localization.common.selectDisksInvolvedBackupNotRequired,
       status: UI_E_WIZARD_STATUS.INACTIVE,
       isValid: true,
       fields: {

package/components/common/pages/backups/modals/restore/name/NameNew.vue

@@ -119,6 +119,9 @@ const localization = computed<UI_I_Localization>(() => useLocal())
         .tooltip {
           background-color: var(--restore-backup-new-name-tooltip-bg);
         }
+        .content-container {
+          color: #e9eaec;
+        }
       }
     }
   }

package/components/common/pages/backups/modals/restore/networks/table/new/Table.vue

@@ -236,6 +236,13 @@ const findNetwork = (net_bridge: string): any => {
     min-height: auto;
   }
 
+  :deep(.data-table-header.sm th) {
+    min-width: max-content !important;
+  }
+  :deep(tr:last-child td:last-child) {
+    max-width: 220px;
+  }
+
   :deep(.title-container-top-info h6.title-container-top-selected-rows) {
     font-size: 12px;
   }

package/components/common/pages/hardwareHealth/HardwareHealth.vue

@@ -1,84 +1,70 @@
 <template>
-  <div class="hardware-health">
-    <common-headline :headline="localization.common.hardwareHealth" />
-
-    <div class="hardware-health__description">
-      {{ hardwareHealthDescription }}
-    </div>
-
-    <atoms-tabs
-      v-model="activeTab"
-      :items="hardwareHealthTabs"
-      test-id="hardware-health-tabs"
-      size="small"
-      class="hardware-health__tabs"
-    />
-
-    <atoms-alert
-      v-if="activeTab === 'storage-sensor'"
-      :items="['content text']"
-      status="alert-warning"
-      test-id="select-storage-sensor-alert"
-      hide-close-icon
-    >
-      <template #default="">
-        <p>
-          {{ generateAlertTextWithLink.before }}
-          <a
-            :href="generateAlertTextWithLink.link"
-            data-id="general-alert-text-link"
-          >
-            {{ generateAlertTextWithLink.linkText }}
-          </a>
-          {{ generateAlertTextWithLink.after }}
-        </p>
-      </template>
-    </atoms-alert>
-
-    <common-pages-hardware-health-tools-panel :selected-tab="activeTab" />
-
-    <div :class="['hardware-health__content', activeTab]">
-      <common-pages-hardware-health-history-testimony-graph
-        v-if="activeTab === 'history-testimony'"
-        v-model:selected-view="selectedGraphView"
-        :power-data="props.historyTestimonyPower"
-        :temperature-data="props.historyTestimonyTemperature"
-        :counters-table-data="hardwareHealth"
-        :language="props.language"
-        :power-loading="props.loadingPowerData"
-        :temperature-loading="props.loadingTemperatureData"
-        :formatted-datetime="props.formattedDatetime"
-        :is-dark-mode="props.isDarkMode"
-        :get-date-format="props.getDateFormat"
-        :main-selected-row="selectedRow"
-        :valid-date-end="props.validDateEnd"
-        :format-date="props.formatDate"
-        @update-tools="onUpdateHistoryTestimonyTools"
-      />
-
-      <common-pages-hardware-health-table-view
-        :key="uniqueKey"
-        v-model:selected-row="selectedRow"
-        :selected-graph-view="selectedGraphView"
-        :data-table="hardwareHealth"
-        :total-items="hardwareHealth.length"
-        :total-pages="1"
-        :table-mode="activeTab"
-        :loading="props.loading"
-      />
-    </div>
-  </div>
+  <common-pages-hardware-health-new
+    v-if="isNewView"
+    v-model:active-tab="activeTab"
+    v-model:selected-graph-view="selectedGraphView"
+    v-model:main-selected-row="selectedRow"
+    :data="hardwareHealth"
+    :history-testimony-power="props.historyTestimonyPower"
+    :history-testimony-temperature="props.historyTestimonyTemperature"
+    :loading="props.loading"
+    :loading-power-data="props.loadingPowerData"
+    :loading-temperature-data="props.loadingTemperatureData"
+    :is-dark-mode="props.isDarkMode"
+    :formatted-datetime="props.formattedDatetime"
+    :get-date-format="props.getDateFormat"
+    :language="props.language"
+    :valid-date-end="props.validDateEnd"
+    :format-date="props.formatDate"
+    :selected-host-name="props.selectedHostName"
+    :hardware-health-tabs="tabItems"
+    :generated-alert-text="generateAlertTextWithLink"
+    :project="props.project"
+    @update-history-testimony-tools="
+      emits('update-history-testimony-tools', $event)
+    "
+  />
+  <common-pages-hardware-health-old
+    v-else
+    v-model:active-tab="activeTab"
+    v-model:selected-graph-view="selectedGraphView"
+    v-model:main-selected-row="selectedRow"
+    :data="hardwareHealth"
+    :history-testimony-power="props.historyTestimonyPower"
+    :history-testimony-temperature="props.historyTestimonyTemperature"
+    :loading="props.loading"
+    :loading-power-data="props.loadingPowerData"
+    :loading-temperature-data="props.loadingTemperatureData"
+    :is-dark-mode="props.isDarkMode"
+    :formatted-datetime="props.formattedDatetime"
+    :get-date-format="props.getDateFormat"
+    :language="props.language"
+    :valid-date-end="props.validDateEnd"
+    :format-date="props.formatDate"
+    :selected-host-name="props.selectedHostName"
+    :hardware-health-tabs="hardwareHealthTabs"
+    :generated-alert-text="generateAlertTextWithLink"
+    :project="props.project"
+    @update-history-testimony-tools="
+      emits('update-history-testimony-tools', $event)
+    "
+  />
 </template>
 
 <script lang="ts" setup>
 import type { I_SeriesLine } from '~/node_modules/bfg-nuxt-3-graph/graph/lib/models/interfaces'
+import type { UI_I_TabItem } from '~/node_modules/bfg-uikit/components/ui/tabs/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/lib/models/interfaces'
+import type { UI_I_HardwareHealthHistoryTestimonyTools } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/old/lib/models/interfaces'
+import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
 import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
 import type { UI_I_StorageSensorsAlert } from '~/components/common/pages/hardwareHealth/lib/models/interfaces'
-import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
-import type { UI_I_HardwareHealthHistoryTestimonyTools } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
-import { hardwareHealthTabsFunc } from '~/components/common/pages/hardwareHealth/lib/config/tabsPannel'
+import type { UI_T_Project } from '~/lib/models/types'
+import {
+  hardwareHealthTabsFunc,
+  hardwareHealthTabsNewFunc,
+} from '~/components/common/pages/hardwareHealth/lib/config/tabsPannel'
 
 const props = defineProps<{
   data: UI_I_HardwareHealthSensors[]
@@ -93,6 +79,8 @@ const props = defineProps<{
   language: string
   validDateEnd: number
   formatDate: string
+  selectedHostName: string
+  project: UI_T_Project
 }>()
 
 const emits = defineEmits<{
@@ -102,61 +90,27 @@ const emits = defineEmits<{
   ): void
 }>()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
 const { $store }: any = useNuxtApp()
 
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
 const activeTab = ref<UI_T_HardwareHealthTabMode>('sensor')
 const selectedGraphView = ref<string>('all')
-const uniqueKey = ref<number>(0)
-
 const selectedRow = ref<number[]>([])
 
 const hardwareHealthTabs = computed<UI_I_CollapseNavItem[]>(() =>
   hardwareHealthTabsFunc(localization.value)
 )
+const tabItems = computed<UI_I_TabItem[]>(() =>
+  hardwareHealthTabsNewFunc(localization.value)
+)
 
 const hardwareHealth = computed<UI_I_HardwareHealthSensors[]>(
   () => props.data || []
 )
 
-const hardwareHealthDescription = computed<string>(() => {
-  const { thereIsAlertAndWarningOutOfSensors, noAlertsOrWarningsOutOfSensors } =
-    localization.value.common
-
-  let alertCount = 0
-  let warningCount = 0
-
-  hardwareHealth.value.forEach((sensor: UI_I_HardwareHealthSensors) => {
-    if (sensor.status === 3) alertCount++
-    if (sensor.status === 2) warningCount++
-  })
-
-  // const hasStatusTwoOrThree = hardwareHealth.value.some((sensor) =>
-  //   ['warning', 'alert'].includes(sensor.status)
-  // )
-
-  type Replacements = {
-    alert: number
-    warning: number
-    sensors: number
-  }
-
-  const hasStatusTwoOrThree = alertCount > 0 || warningCount > 0
-  const replacements: Replacements = {
-    alert: alertCount,
-    warning: warningCount,
-    sensors: hardwareHealth.value.length || 0,
-  }
-  const text = hasStatusTwoOrThree
-    ? thereIsAlertAndWarningOutOfSensors
-    : noAlertsOrWarningsOutOfSensors
-
-  return text?.replace(
-    /{(\w+)}/g,
-    (_, key: keyof Replacements) => replacements[key]
-  )
-})
-
 const generateAlertTextWithLink = computed<UI_I_StorageSensorsAlert>(() => {
   const { storageSensorsAlert, thisKbArticle } = localization.value.common
 
@@ -170,16 +124,6 @@ const generateAlertTextWithLink = computed<UI_I_StorageSensorsAlert>(() => {
   }
 })
 
-watch(activeTab, () => {
-  uniqueKey.value++
-})
-
-const onUpdateHistoryTestimonyTools = (
-  tools: UI_I_HardwareHealthHistoryTestimonyTools
-): void => {
-  emits('update-history-testimony-tools', tools)
-}
-
 onMounted(() => {
   $store.dispatch('main/A_CONTINUE_GLOBAL_REFRESH', 'hardwareHealth')
 })
@@ -188,27 +132,4 @@ onUnmounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-@import 'bfg-common/assets/scss/common/global.scss';
-.hardware-health {
-  @extend %block-property;
-  &__description {
-  }
-  &__tabs {
-    :deep(.nav) {
-      margin-top: 0;
-    }
-  }
-  &__content {
-    display: flex;
-    flex-direction: column;
-    height: inherit;
-    overflow: hidden;
-
-    &.history-testimony {
-      overflow-y: auto;
-      display: block;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>