bfg-common 1.5.246 → 1.5.248

package/components/atoms/stack/StackBlock.vue

@@ -1,185 +1,185 @@
-<template>
-  <div
-    :class="[
-      'stack-block',
-      open ? 'stack-block-expanded' : 'stack-block-expandable',
-      { 'not-children': !props.hasChildren },
-    ]"
-  >
-    <div
-      :id="`${props.testId}-toggle`"
-      :data-id="`${props.testId}-toggle`"
-      class="stack-block-label"
-      @click="onToggle"
-    >
-      <atoms-the-icon name="angle" class="angle-icon" fill="#565656" />
-
-      <div class="stack-view-key">
-        <slot name="stackBlockKey" />
-      </div>
-      <div class="stack-block-content">
-        <slot name="stackBlockContent" />
-      </div>
-
-      <span
-        v-if="props.removable && props.isRollBack"
-        :data-id="`${props.testId}-roll-back`"
-        class="icon-roll-back"
-        @mousedown="onRollBack"
-        @click.stop
-      />
-      <atoms-the-icon
-        v-else-if="props.removable"
-        :data-id="`${props.testId}-remove`"
-        class="remove-icon"
-        name="close-circle"
-        @mousedown="onRemove"
-        @click.stop
-      />
-      <span v-else class="empty-icon"></span>
-    </div>
-
-    <div v-show="open" class="stack-children">
-      <div style="height: auto">
-        <slot name="stackChildren" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    hasChildren: boolean
-    removable?: boolean
-    testId?: string
-    openByDefault?: boolean
-    isRollBack?: boolean
-  }>(),
-  { testId: 'ui-stack-block', openByDefault: false }
-)
-const emits = defineEmits<{
-  (event: 'toggle', value: boolean): void
-  (event: 'remove'): void
-  (event: 'roll-back'): void
-}>()
-
-const open = ref<boolean>(props.openByDefault || false)
-const onToggle = (): void => {
-  if (!props.hasChildren) return
-  setTimeout(() => {
-    open.value = !open.value
-    emits('toggle', open.value)
-  }, 0)
-}
-
-const onRemove = (): void => {
-  emits('remove')
-}
-const onRollBack = (): void => {
-  emits('roll-back')
-}
-</script>
-
-<style scoped lang="scss">
-.stack-block {
-  cursor: pointer;
-  background-color: var(--block-view-bg-color);
-  border-color: var(--global-border-color);
-
-  &.stack-block-expandable:hover {
-    border-bottom: 1px solid #666;
-
-    .stack-block-label {
-      background-color: var(--block-view-bg-color);
-      border-color: var(--global-border-color);
-    }
-  }
-
-  .stack-block-label {
-    padding: 6px 12px;
-    flex: 1 1 auto;
-    max-width: unset;
-    display: flex;
-    background-color: var(--block-view-bg-color);
-    border-color: var(--global-border-color);
-
-    &:hover {
-      .remove-icon {
-        opacity: 1;
-      }
-    }
-
-    &::before {
-      display: none;
-    }
-
-    .angle-icon {
-      width: 14px;
-      height: 14px;
-      margin-right: 4px;
-      transform: rotate(90deg);
-      align-self: center;
-    }
-
-    .remove-icon {
-      width: 18px;
-      height: 18px;
-      opacity: 0;
-      cursor: pointer;
-    }
-
-    .stack-view-key {
-      flex: 0 0 40%;
-      max-width: 40%;
-    }
-
-    .stack-block-content {
-      padding: 0;
-      flex: 1 1 auto;
-      width: 60%;
-      background-color: transparent;
-      word-break: break-all;
-    }
-
-    .empty-icon {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  &.stack-block-expanded {
-    .stack-block-label {
-      color: #ffffff;
-      background-color: #29414e;
-
-      .angle-icon {
-        fill: #ffffff;
-        transform: rotate(180deg);
-      }
-
-      .remove-icon {
-        fill: #ffffff;
-      }
-    }
-  }
-
-  &.not-children {
-    cursor: default;
-    .stack-block-label {
-      background-color: transparent;
-      color: #333333;
-
-      &:hover {
-        cursor: default;
-        background-color: transparent;
-        border-bottom: none;
-      }
-
-      .angle-icon {
-        opacity: 0;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div
+    :class="[
+      'stack-block',
+      open ? 'stack-block-expanded' : 'stack-block-expandable',
+      { 'not-children': !props.hasChildren },
+    ]"
+  >
+    <div
+      :id="`${props.testId}-toggle`"
+      :data-id="`${props.testId}-toggle`"
+      class="stack-block-label"
+      @click="onToggle"
+    >
+      <atoms-the-icon name="angle" class="angle-icon" fill="#565656" />
+
+      <div class="stack-view-key">
+        <slot name="stackBlockKey" />
+      </div>
+      <div class="stack-block-content">
+        <slot name="stackBlockContent" />
+      </div>
+
+      <span
+        v-if="props.removable && props.isRollBack"
+        :data-id="`${props.testId}-roll-back`"
+        class="icon-roll-back"
+        @mousedown="onRollBack"
+        @click.stop
+      />
+      <atoms-the-icon
+        v-else-if="props.removable"
+        :data-id="`${props.testId}-remove`"
+        class="remove-icon"
+        name="close-circle"
+        @mousedown="onRemove"
+        @click.stop
+      />
+      <span v-else class="empty-icon"></span>
+    </div>
+
+    <div v-show="open" class="stack-children">
+      <div style="height: auto">
+        <slot name="stackChildren" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    hasChildren: boolean
+    removable?: boolean
+    testId?: string
+    openByDefault?: boolean
+    isRollBack?: boolean
+  }>(),
+  { testId: 'ui-stack-block', openByDefault: false }
+)
+const emits = defineEmits<{
+  (event: 'toggle', value: boolean): void
+  (event: 'remove'): void
+  (event: 'roll-back'): void
+}>()
+
+const open = ref<boolean>(props.openByDefault || false)
+const onToggle = (): void => {
+  if (!props.hasChildren) return
+  setTimeout(() => {
+    open.value = !open.value
+    emits('toggle', open.value)
+  }, 0)
+}
+
+const onRemove = (): void => {
+  emits('remove')
+}
+const onRollBack = (): void => {
+  emits('roll-back')
+}
+</script>
+
+<style scoped lang="scss">
+.stack-block {
+  cursor: pointer;
+  background-color: var(--block-view-bg-color);
+  border-color: var(--global-border-color);
+
+  &.stack-block-expandable:hover {
+    border-bottom: 1px solid #666;
+
+    .stack-block-label {
+      background-color: var(--block-view-bg-color);
+      border-color: var(--global-border-color);
+    }
+  }
+
+  .stack-block-label {
+    padding: 6px 12px;
+    flex: 1 1 auto;
+    max-width: unset;
+    display: flex;
+    background-color: var(--block-view-bg-color);
+    border-color: var(--global-border-color);
+
+    &:hover {
+      .remove-icon {
+        opacity: 1;
+      }
+    }
+
+    &::before {
+      display: none;
+    }
+
+    .angle-icon {
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+      transform: rotate(90deg);
+      align-self: center;
+    }
+
+    .remove-icon {
+      width: 18px;
+      height: 18px;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    .stack-view-key {
+      flex: 0 0 40%;
+      max-width: 40%;
+    }
+
+    .stack-block-content {
+      padding: 0;
+      flex: 1 1 auto;
+      width: 60%;
+      background-color: transparent;
+      word-break: break-all;
+    }
+
+    .empty-icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &.stack-block-expanded {
+    .stack-block-label {
+      color: #ffffff;
+      background-color: #29414e;
+
+      .angle-icon {
+        fill: #ffffff;
+        transform: rotate(180deg);
+      }
+
+      .remove-icon {
+        fill: #ffffff;
+      }
+    }
+  }
+
+  &.not-children {
+    cursor: default;
+    .stack-block-label {
+      background-color: transparent;
+      color: #333333;
+
+      &:hover {
+        cursor: default;
+        background-color: transparent;
+        border-bottom: none;
+      }
+
+      .angle-icon {
+        opacity: 0;
+      }
+    }
+  }
+}
+</style>

package/components/atoms/table/info/lib/models/interfaces.ts

@@ -1,10 +1,10 @@
-export interface UI_I_TableInfoItem {
-  label: string
-  value: any
-  isProperty?: boolean
-  key?: string
-  localization?: string
-  localizationTemplate?: string
-  isCapital?: boolean
-  iconName?: string
-}
+export interface UI_I_TableInfoItem {
+  label: string
+  value: any
+  isProperty?: boolean
+  key?: string
+  localization?: string
+  localizationTemplate?: string
+  isCapital?: boolean
+  iconName?: string
+}

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

@@ -21,14 +21,10 @@
             <div class="subtitle-block flex-row">
               <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
 
-              <common-tooltip-help
-                  test-id="datastore-type-subtitle"
-                  help-id="datastore-type-subtitle-icon"
-                  :title="localization.common.information"
-                  :help-text="localization.common.datastoreTypeHelpDesc"
-                  dropdown-width="272px"
-                  dropdown-left
-                  dropdown-top
+              <common-wizards-datastore-add-steps-common-tooltip-info
+                id="datastore-type-subtitle-tooltip"
+                class="ml-2"
+                :description="localization.common.datastoreTypeHelpDesc"
               />
             </div>
           </div>
@@ -66,6 +62,7 @@
             v-if="selectedStep.id === dynamicSteps.name"
             v-model="formModelLocal"
             :project="props.project"
+            :alert-messages="props.alertMessages[dynamicSteps.name]"
             :messages-fields="selectedStep.fields"
           />
         </template>
@@ -96,6 +93,7 @@
             v-if="selectedStep.id === dynamicSteps.nameAndConfigure"
             v-model="formModelLocal"
             :project="props.project"
+            :alert-messages="props.alertMessages"
             :messages-fields="selectedStep.fields"
           />
         </template>

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

@@ -3,7 +3,7 @@ import type { UI_I_CreateDatastoreForm } from '~/components/common/backup/storag
 export const datastoreDefaultFormFunc = (
 ): UI_I_CreateDatastoreForm => {
   return {
-    name: 'Datastore',
+    name: 'BackupStorage',
     version: 4.1,
     type_code: 1,
     readonly: false,

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

@@ -20,7 +20,7 @@ export const stepsFunc = (
   {
     id: dynamicSteps.type,
     title: localization.common.type,
-    subTitle: localization.common.specifyBackupStorageType,
+    subTitle: localization.backup.specifyBackupStorageType,
     status: UI_E_WIZARD_STATUS.SELECTED,
     fields: {},
     isValid: true,
@@ -29,7 +29,7 @@ export const stepsFunc = (
   {
     id: dynamicSteps.name,
     title: localization.backup.selectName,
-    subTitle: localization.common.specifyBackupStorageName,
+    subTitle: localization.backup.specifyBackupStorageName,
     status: UI_E_WIZARD_STATUS.INACTIVE,
     fields: {
       name: {
@@ -101,7 +101,7 @@ export const stepsFunc = (
   {
     id: dynamicSteps.readyComplete,
     title: localization.common.readyComplete,
-    subTitle: localization.common.readyCompleteDesc,
+    subTitle: localization.backup.storageReview,
     status: UI_E_WIZARD_STATUS.INACTIVE,
     fields: {},
     isValid: true,

package/components/common/backup/storage/actions/add/steps/common/tooltipInfo/TooltipInfo.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="tooltip-info">
+    <ui-icon
+      :id="`${props.id}-info-trigger`"
+      name="info"
+      width="16"
+      height="16"
+      :class="['tooltip-info__icon pointer', { active: isShowInfo }]"
+      @click.stop="isShowInfo = !isShowInfo"
+    />
+    <ui-popup-window
+      v-model="isShowInfo"
+      top
+      left
+      width="272px"
+      :elem-id="`${props.id}-info-trigger`"
+    >
+      <div class="common-widget-info">
+        <div class="flex justify-between">
+          <div class="flex">
+            <ui-icon name="info-2" width="16px" height="16px" />
+            <span class="title"> {{ localization.common.information }}</span>
+          </div>
+          <ui-icon
+            name="close"
+            class="pointer hide-icon"
+            width="16px"
+            height="16px"
+            @click.stop="isShowInfo = false"
+          />
+        </div>
+
+        <div class="common-widget-info-description">
+          {{ props.description }}
+        </div>
+      </div>
+    </ui-popup-window>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// TODO move to global
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  id: string
+  description: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowInfo = ref<boolean>(false)
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.tooltip-info {
+  @include flex($align: center);
+  &__icon {
+    color: var(--form-icon-color);
+    &:hover {
+      color: var(--close-icon);
+    }
+    &.active {
+      color: var(--btn-primary-fill-bg-color);
+    }
+  }
+
+  .common-widget-info {
+    padding: 16px;
+
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16px;
+      color: var(--zabbix-text-color);
+      margin-left: 8px;
+    }
+
+    .common-widget-info-description {
+      font-size: 13px;
+      line-height: 15.73px;
+      color: var(--zabbix-text-color);
+      margin-top: 12px;
+      white-space: pre-line;
+    }
+
+    svg {
+      color: var(--alert-icon);
+      min-width: 16px;
+    }
+  }
+}
+</style>

package/components/common/backup/storage/actions/add/steps/hostAccessibility/HostAccessibility.vue

@@ -1,22 +1,20 @@
 <template>
-  <div class="host-accessibility">
-    <common-backup-storage-actions-add-steps-host-accessibility-new
-      v-if="isNewView"
-      v-model="modelHostsLocal"
-      v-model:active-tab="activeTab"
-      :hosts="dataTable"
-      :tab-options="tabs"
-    />
-    <common-backup-storage-actions-add-steps-host-accessibility-old
-      v-else
-      v-model="modelHostsLocal"
-      v-model:active-tab="activeTab"
-      :hosts="dataTable"
-      :tab-options="tabs"
-      :alert-messages="props.alertMessages"
-      @hide-alert="(e) => emits('hide-alert', e)"
-    />
-  </div>
+  <common-backup-storage-actions-add-steps-host-accessibility-new
+    v-if="isNewView"
+    v-model="modelHostsLocal"
+    v-model:active-tab="activeTab"
+    :hosts="dataTable"
+    :tab-options="tabs"
+  />
+  <common-backup-storage-actions-add-steps-host-accessibility-old
+    v-else
+    v-model="modelHostsLocal"
+    v-model:active-tab="activeTab"
+    :hosts="dataTable"
+    :tab-options="tabs"
+    :alert-messages="props.alertMessages"
+    @hide-alert="(e) => emits('hide-alert', e)"
+  />
 </template>
 
 <script lang="ts" setup>

package/components/common/backup/storage/actions/add/steps/hostAccessibility/HostAccessibilityNew.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="host-accessibility">
+  <div class="host-accessibility pb-4">
     <ui-tabs
       v-model="activeTabModel"
       test-id="accessibility"
       :tabs="tabsLocal"
       type="outline"
-      class="host-accessibility__tab"
+      class="host-accessibility__tab py-4"
     >
     </ui-tabs>
 
@@ -40,9 +40,4 @@ const tabsLocal = computed<UI_I_CollapseNavItem[]>(() =>
 </script>
 
 <style lang="scss" scoped>
-.host-accessibility {
-  &__tab {
-    padding: 16px 0;
-  }
-}
 </style>

package/components/common/backup/storage/actions/add/steps/hostAccessibility/table/new/lib/config/compatibleTable.ts

@@ -19,7 +19,7 @@ export const getHeaderDataFunc = (
     text: localization.common.host,
     isSortable: true,
     sort: 'asc',
-    width: '250px',
+    width: '50%',
     show: true,
     filter: false,
   },
@@ -29,7 +29,7 @@ export const getHeaderDataFunc = (
     text: localization.common.cluster,
     isSortable: true,
     sort: 'asc',
-    width: '250px',
+    width: '50%',
     show: true,
     filter: false,
   },
@@ -45,6 +45,7 @@ export const options: UI_I_DataTableOptions = {
   isResizable: true,
   showSelectedRows: true,
   showColumnManager: false,
+  inBlock: true
 }
 
 export const getBodyDataFunc = (

package/components/common/backup/storage/actions/add/steps/name/Name.vue

@@ -2,6 +2,7 @@
   <common-backup-storage-actions-add-steps-name-new
     v-if="isNewView"
     v-model="formModel"
+    :alert-messages="props.alertMessages"
     :messages-fields="props.messagesFields"
   />