bfg-common 1.5.774 → 1.5.775

package/components/atoms/table/dataGrid/DataGrid.vue

@@ -85,8 +85,8 @@
                         v-for="(item, key) in headItemsPresent"
                         :key="key"
                         :style="{
-                          width: columnsWidth?.[key]?.[0],
-                          minWidth: columnsWidth?.[key]?.[1],
+                          width: columnsWidth[key][0],
+                          minWidth: columnsWidth[key][1],
                         }"
                         class="datagrid-column datagrid-fixed-width"
                       >
@@ -108,7 +108,7 @@
                                 :title="item.text"
                                 :style="{
                                   width:
-                                    columnsWidth?.[key]?.[0]?.slice?.(0, -2) -
+                                    columnsWidth[key][0]?.slice(0, -2) -
                                     (item.hasFilter ? 65 : 40) +
                                     'px',
                                 }"
@@ -328,8 +328,8 @@
                             "
                             :key="key2"
                             :style="{
-                              width: columnsWidth?.[key2]?.[0],
-                              minWidth: columnsWidth?.[key2]?.[1],
+                              width: columnsWidth[key2][0],
+                              minWidth: columnsWidth[key2][1],
                             }"
                             :class="[
                               'datagrid-cell datagrid-fixed-width',
@@ -649,7 +649,7 @@ const changeAll = (event: UI_I_HTMLSelectElement): void => {
 const selectedRowLocal = ref<UI_T_SelectedRow>([])
 const isShowHiddenInfo = ref<boolean>(false)
 const tableWrapperId = `table-wrapper-${useUniqueId()}`
-const memoryWidth = ref<[string, string][]>([])
+let memoryWidth = '0'
 
 const showedInfoRow = ref<UI_I_BodyItem | null>(null)
 const showedInfoCol = ref<UI_I_BodyItem[] | null>(null)
@@ -926,7 +926,7 @@ let setColumnWidth = (): void => {
     columnsWidth.value = []
     headItemsPresent.value.forEach((item) => {
       columnsWidth.value.push([
-        Number(item.width.slice(0, -2)) + 8 + 'px', // width
+        item.width, // width
         item.width, // min-width
       ])
     })
@@ -950,7 +950,7 @@ let setColumnWidth = (): void => {
   headItemsPresent.value.forEach((item) => {
     columnsWidth.value.push([
       // `${columnWidth}px`, // width
-      Number(item.width.slice(0, -2)) + 8 + 'px', // width
+      item.width, // width
       item.width, // min-width
     ])
   })
@@ -965,7 +965,6 @@ watch(
       toggedItems.value.push(false)
     })
     setColumnWidth()
-    isShowHiddenInfo.value = false
   },
   {
     immediate: true,
@@ -992,7 +991,7 @@ const setGrab = (key: number, event: MouseEvent): void => {
 
   if (!isShowHiddenInfo.value) {
     grabColumn.value = key
-    const currentWidth = parseInt(columnsWidth.value?.[grabColumn.value]?.[0])
+    const currentWidth = parseInt(columnsWidth.value[grabColumn.value][0])
     grabStartX.value = event.clientX - currentWidth
     if (isRtl.value) {
       grabStartX.value = event.clientX + currentWidth
@@ -1019,7 +1018,7 @@ let mousemove = (event: MouseEvent): void => {
   isDrag.value = true
   resizeObserve.disconnect()
 
-  const minWidth = parseInt(columnsWidth.value?.[grabColumn.value]?.[1])
+  const minWidth = parseInt(columnsWidth.value[grabColumn.value][1])
   let changeX = Math.max(event.clientX - grabStartX.value, minWidth)
   if (isRtl.value) {
     changeX = Math.max(grabStartX.value - event.clientX, minWidth)
@@ -1045,10 +1044,10 @@ let resizeObserveWithInfo: ResizeObserver
 
 const setColumnWidthWithInfo = (ent: ResizeObserverEntry[]): void => {
   if (isShowHiddenInfo.value) {
-    memoryWidth.value = useDeepCopy(columnsWidth.value)
-    columnsWidth.value[1][0] = `${ent[0].contentBoxSize[0].inlineSize - 84}px`
+    memoryWidth = columnsWidth.value[1][0]
+    columnsWidth.value[1][0] = `${ent[0].contentBoxSize[0].inlineSize - 86}px`
   } else {
-    columnsWidth.value = useDeepCopy(memoryWidth.value)
+    columnsWidth.value[1][0] = memoryWidth
   }
 }
 
@@ -1337,33 +1336,21 @@ onUnmounted(() => {
             border-bottom: 1px solid var(--global-border-color);
 
             &.datagrid-selected {
-              color: var(--table-active-color);
-              //& :deep(*) {
-              //  color: var(--table-active-color);
-              //}
+              & :deep(*) {
+                color: var(--table-active-color);
+              }
 
               .datagrid-cell {
                 background-color: var(--row-selected-bg-color);
                 border-bottom: 1px solid var(--global-border-color);
                 position: relative;
                 line-height: 1rem;
-
-                .datagrid-expandable-caret-button {
-                  .datagrid-expandable-caret-icon {
-                    fill: #ffffff;
-                  }
-                }
               }
 
               .datagrid-row-detail {
                 background-color: var(--row-selected-bg-color);
                 border-bottom: 1px solid var(--global-border-color);
               }
-              .datagrid-row:not(.datagrid-selected) {
-                .datagrid-cell {
-                  background-color: unset;
-                }
-              }
             }
 
             .datagrid-cell {
@@ -1441,7 +1428,7 @@ onUnmounted(() => {
                   border-bottom: 15px solid transparent;
                   border-right: 15px solid var(--global-bg-color);
                   bottom: 26%;
-                  right: -5px;
+                  right: -16px;
                   z-index: calc(var(--z-sticky) + 1);
                 }
 
@@ -1452,7 +1439,7 @@ onUnmounted(() => {
                   border-bottom: 16px solid transparent;
                   border-right: 16px solid var(--global-border-color);
                   bottom: 23%;
-                  right: -6px;
+                  right: -17px;
                   z-index: calc(var(--z-sticky) + 1);
                 }
               }
@@ -1572,12 +1559,9 @@ onUnmounted(() => {
               .datagrid-fixed-column {
                 background-color: var(--table-hover-row-background-color);
               }
-              & .datagrid-row-sticky .datagrid-cell {
+              .datagrid-cell {
                 background-color: var(--table-hover-row-background-color);
               }
-              //.datagrid-cell {
-              //  background-color: var(--table-hover-row-background-color);
-              //}
             }
           }
         }
@@ -1690,7 +1674,7 @@ onUnmounted(() => {
   //    color: var(--global-font-color2) !important;
   //    line-height: 1.7rem;
   //  }
-  .close {
+  button {
     position: absolute;
     top: 24px;
     right: 24px;

package/components/atoms/wizard/Wizard.vue

@@ -21,7 +21,7 @@
             <slot name="contentHeading">
               <div class="modal-title-wrapper">
                 <h2 class="modal-title">
-                  <span class="modal-title-text" :data-id="`${props.testId}-modal-title`">
+                  <span class="modal-title-text">
                     {{ props.wizard.selectedStepCom.value.title }}
                   </span>
                 </h2>

package/components/common/backup/storage/actions/add/Old.vue

@@ -12,16 +12,6 @@
       @hide="onHideModal"
       @submit="onCreateDatastore"
     >
-      <template #description="{ selectedStep }">
-        <div class="add-datastore__wizard-description">
-          <h2>{{ selectedStep.subTitle }}</h2>
-
-          <common-backup-storage-actions-add-steps-type-mode-tooltip
-            v-if="selectedStep.id === dynamicSteps.type"
-          />
-        </div>
-      </template>
-
       <template #modalBody="{ selectedStep }">
         <common-backup-storage-actions-add-steps-type-mode
           v-if="selectedStep.id === dynamicSteps.type"
@@ -129,15 +119,4 @@ const onHideModal = (): void => emits('hide')
 const onCreateDatastore = (): void => emits('submit')
 </script>
 
-<style scoped lang="scss">
-.add-datastore {
-  &__wizard-description {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-  .storage-datatable {
-    margin-top: 5px;
-  }
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/backup/storage/actions/add/lib/config/createDatastore.ts

@@ -4,7 +4,7 @@ export const datastoreDefaultFormFunc = (): UI_I_CreateDatastoreForm => {
   return {
     name: 'BackupStorage',
     version: 4.1,
-    type_code: 4,
+    type_code: 2,
     readonly: false,
     server: '',
     folder: '',

package/components/common/backup/storage/actions/add/steps/typeMode/TypeModeOld.vue

@@ -1,5 +1,31 @@
 <template>
   <section class="datastore-types">
+    <div class="header-row">
+      <span class="datastore-types__subtitle">
+        {{ localization.common.specifyDatastoreType }}
+      </span>
+      <div id="type-select-help-icon" class="signpost-container relative">
+        <atoms-the-icon
+          data-id="toggle-type-select-help-icon"
+          fill="#0072a3"
+          width="24px"
+          height="24px"
+          name="info-circle"
+          @click="isShowTypeHelp = !isShowTypeHelp"
+        />
+        <atoms-tooltip-signpost
+          v-if="isShowTypeHelp"
+          elem-id="type-select-help-icon"
+          test-id="select-datastore-type"
+          @hide="isShowTypeHelp = false"
+        >
+          <p class="help-desc">
+            {{ localization.common.datastoreTypeHelpDesc }}
+          </p>
+        </atoms-tooltip-signpost>
+      </div>
+    </div>
+
     <common-select-radio-group
       v-model="datastoreTypeModeLocal"
       :options="props.options"
@@ -8,12 +34,33 @@
 </template>
 
 <script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
 
 const datastoreTypeModeLocal = defineModel<number>({ required: true })
 const props = defineProps<{
   options: UI_I_RadioOption[]
 }>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowTypeHelp = ref<boolean>(false)
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.datastore-types {
+  .signpost-container {
+    display: flex;
+    cursor: pointer;
+
+    .help-desc-container {
+      max-width: 350px;
+    }
+  }
+  .header-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+}
+</style>

package/components/common/backup/storage/actions/add/steps/typeMode/lib/config/typeOptions.ts

@@ -5,26 +5,26 @@ export const datastoreTypesFunc = (
   localization: UI_I_Localization
 ): UI_I_RadioOption[] => {
   return [
-    // {
-    //   id: 'datastore-type-nfs',
-    //   label: localization.common.nfs,
-    //   value: 2,
-    //   disabled: false,
-    //   description: localization.common.nfsDesc,
-    //   isTooltip: false,
-    //   tooltipContent: localization.common.nfsHelpDesc,
-    //   testId: 'datastore-type-nfs',
-    // },
-    // {
-    //   id: 'datastore-type-samba',
-    //   label: localization.common.samba,
-    //   value: 3,
-    //   disabled: false,
-    //   description: localization.common.sambaDesc,
-    //   isTooltip: false,
-    //   tooltipContent: localization.common.sambaHelpDesc,
-    //   testId: 'datastore-type-samba',
-    // },
+    {
+      id: 'datastore-type-nfs',
+      label: localization.common.nfs,
+      value: 2,
+      disabled: false,
+      description: localization.common.nfsDesc,
+      isTooltip: false,
+      tooltipContent: localization.common.nfsHelpDesc,
+      testId: 'datastore-type-nfs',
+    },
+    {
+      id: 'datastore-type-samba',
+      label: localization.common.samba,
+      value: 3,
+      disabled: false,
+      description: localization.common.sambaDesc,
+      isTooltip: false,
+      tooltipContent: localization.common.sambaHelpDesc,
+      testId: 'datastore-type-samba',
+    },
     {
       id: 'datastore-type-shared-storm',
       label: localization.common.stormSharedStorage,

package/components/common/backup/storage/actions/delete/Delete.vue

@@ -1,28 +1,29 @@
 <template>
   <common-modals-confirm-by-input
-    :title="localization.zabbix.deleteConfirmation"
+    :title="localization.common.confirmDeletionDatastoreTitle"
     :sub-title="props.datastore?.name || ''"
-    :modal-texts="modalTexts"
-    :placeholder="localization.backup.backupStorageName1"
-    test-id="backup-storage-delete"
-    width="480px"
+    test-id="datastore-delete"
+    width="576px"
     @hide="onHide"
     @confirm="onDelete"
   >
     <template #content>
       <p class="delete-group__text">
-        {{ modalDescription }}
+        {{ localization.common.confirmDeletionDatastoreBodyFirst }}
       </p>
 
-      <p v-if="isNewView" class="delete-group__text">
-        {{ modalConfirmText }}
+      <p class="delete-group__text">
+        {{ localization.common.confirmDeletionDatastoreBodySecond }}
+      </p>
+
+      <p class="delete-group__text">
+        {{ localization.common.confirmDeletionDatastoreBodyThird }}
       </p>
     </template>
   </common-modals-confirm-by-input>
 </template>
 
 <script setup lang="ts">
-import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_DeleteItem } from '~/components/common/backup/storage/actions/delete/lib/models/interfaces'
 import { getBackupTreeNodeIdByTypeFromRoute } from '~/components/common/pages/backups/lib/utils/getBackupOrBackupStorageId'
@@ -35,35 +36,11 @@ const emits = defineEmits<{
   (event: 'hide'): void
 }>()
 
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const modalTexts = ref<UI_I_ModalTexts>({
-  button1: localization.value.common.cancel,
-  button2: localization.value.common.delete,
-})
-
 const targetId = computed<string>(() =>
   getBackupTreeNodeIdByTypeFromRoute('last')
 )
-
-const modalDescription = computed<string>(() =>
-  localization.value.common.confirmDeleteBackupStorageDesc.replace(
-    '{0}',
-    props.datastore?.name || ''
-  )
-)
-
-const modalConfirmText = computed<string>(() =>
-  localization.value.common.toConfirmTypeFieldBelow.replace(
-    '{0}',
-    props.datastore?.name || ''
-  )
-)
-
 const onDelete = (): void => {
   emits('delete', targetId.value)
 }
@@ -74,13 +51,14 @@ const onHide = (): void => {
 
 <style lang="scss" scoped>
 @import '~/assets/scss/common/mixins.scss';
-
 .delete-group__text {
-  @include text($fs: 14px, $fw: 400, $lh: 18px, $c: #9da6ad, $align: center);
+  @include text($fs: 0.6rem);
+  font-size: 0.6rem;
   letter-spacing: normal;
+  line-height: 1rem;
 
-  &:last-of-type {
-    margin-top: 12px;
+  &:first-child {
+    margin-bottom: 1.2em;
   }
 }
 </style>

package/components/common/diagramMain/Header.vue

@@ -24,9 +24,6 @@
         <span class="vertical-separator"></span>
         <button
           id="add-networking-button"
-          v-permission="
-            'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch'
-          "
           :data-id="`${props.testId}-add-networking-button`"
           type="button"
           @click="onShowModal('add-networking', props.diagramName)"
@@ -44,7 +41,6 @@
         </button>
         <button
           id="switch-manage-physical-adapters-button"
-          v-permission="'Networks.UpdateSwitch'"
           :data-id="`${props.testId}-manage-physical-adapters-button`"
           type="button"
           @click="onShowModal('switch-manage-physical-adapters')"

package/components/common/diagramMain/lib/models/interfaces.ts

@@ -237,8 +237,6 @@ export interface UI_I_ViewSettingsFields {
   id: number
   type: number
   separator?: boolean
-  slot?: string
-  data?: any
   rows: {
     name: string
     value?: string | string[] | undefined

package/components/common/diagramMain/modals/viewSettings/info/Info.vue

@@ -17,11 +17,7 @@
     :full-mode="props.fullMode"
     :height="props.height"
     :with-collapse="props.withCollapse"
-  >
-    <template #dynamic="{ dynamicName, data }">
-      <slot :name="dynamicName" :data="data" />
-    </template>
-  </common-diagram-main-modals-view-settings-info-old>
+  />
 </template>
 
 <script setup lang="ts">

package/components/common/diagramMain/modals/viewSettings/info/InfoOld.vue

@@ -18,15 +18,7 @@
               v-for="viewSettingsField in viewSettingsTabContent(tab.value)"
               :key="viewSettingsField.id"
             >
-              <template v-if="viewSettingsField.slot">
-                <slot
-                  name="dynamic"
-                  :dynamic-name="viewSettingsField.slot"
-                  :data="viewSettingsField.data"
-                />
-              </template>
               <common-diagram-main-modals-view-settings-view-settings
-                v-else
                 :view-name="props.viewName"
                 :view-settings-field="viewSettingsField"
                 :with-collapse="props.withCollapse"
@@ -42,15 +34,7 @@
           v-for="viewSettingsField in props.viewSettingsFields"
           :key="viewSettingsField.id"
         >
-          <template v-if="viewSettingsField.slot">
-            <slot
-              name="dynamic"
-              :dynamic-name="viewSettingsField.slot"
-              :data="viewSettingsField.data"
-            />
-          </template>
           <common-diagram-main-modals-view-settings-view-settings
-            v-else
             :view-name="props.viewName"
             :view-settings-field="viewSettingsField"
           />

package/components/common/graph/graphNew/EmptyBlock.vue

@@ -36,12 +36,11 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   background-color: var(--metric-empty-block-bg);
   box-shadow: 0 1px 4px 0 #00000014;
   border-radius: 8px;
-  padding: 16px;
 
   .title {
     text-align: center;
     font-size: 14px;
-    font-weight: 400;
+    font-weight: 500;
     color: var(--metric-empty-block-title);
     margin-bottom: 6px;
     margin-top: 8px;

package/components/common/help/navbar/left/lib/utils/constructAccordion.ts

@@ -13,7 +13,7 @@ export const constructItems = (
         !parent || (item.title !== parent.title && item._path !== parent._path)
       )
     })
-    .map((item: UI_I_ContentNavigation, key: number): UI_I_AccordionRecursion => {
+    .map((item: UI_I_ContentNavigation): UI_I_AccordionRecursion => {
       const children = constructItems(item.children, item)
       return {
         children,
@@ -22,7 +22,6 @@ export const constructItems = (
         name: item.title,
         hasChild: !!children.length,
         isOpen: !parent,
-        testId: `nav-accordion-${key}`,
       }
     })
 }