bfg-common 1.5.244 → 1.5.245

package/components/common/pages/shortcuts/block/BlockOld.vue

@@ -1,68 +1,68 @@
-<template>
-  <div>
-    <nuxt-link
-      :class="['unit', { disabled: props.item.disabled }]"
-      :to="!props.item.disabled && navigate"
-      :title="
-        props.item.disabled
-          ? localization.common.inDevelopment
-          : props.item.navigateTo
-      "
-      :data-id="props.testId"
-      @click="emits('change-navigation')"
-      @contextmenu="emits('change-navigation')"
-    >
-      <span class="icon-2">
-        <ui-icon :name="props.item.iconName" width="34" height="34"></ui-icon>
-      </span>
-      <div class="unit-text" :title="props.item.text">
-        {{ props.item.text }}
-      </div>
-    </nuxt-link>
-  </div>
-</template>
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
-
-const props = defineProps<{
-  item: UI_I_BlockItem
-  testId?: string
-}>()
-const emits = defineEmits<{
-  (event: 'change-navigation'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const navigate = computed<string>(() => '/' + props.item.navigateTo)
-</script>
-<style lang="scss" scoped>
-.unit {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 95px;
-  margin: 21px 10px;
-  text-decoration-line: none;
-
-  &.disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .icon-2 {
-    margin: 0 10px 15px 10px;
-    color: var(--global-font-color3);
-  }
-  &-text {
-    color: var(--global-font-color3);
-    font-size: 13px;
-    line-height: 13px;
-    font-weight: 400;
-    padding-bottom: 2px;
-    text-align: center;
-  }
-}
-</style>
+<template>
+  <div>
+    <nuxt-link
+      :class="['unit', { disabled: props.item.disabled }]"
+      :to="!props.item.disabled && navigate"
+      :title="
+        props.item.disabled
+          ? localization.common.inDevelopment
+          : props.item.navigateTo
+      "
+      :data-id="props.testId"
+      @click="emits('change-navigation')"
+      @contextmenu="emits('change-navigation')"
+    >
+      <span class="icon-2">
+        <ui-icon :name="props.item.iconName" width="34" height="34"></ui-icon>
+      </span>
+      <div class="unit-text" :title="props.item.text">
+        {{ props.item.text }}
+      </div>
+    </nuxt-link>
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
+
+const props = defineProps<{
+  item: UI_I_BlockItem
+  testId?: string
+}>()
+const emits = defineEmits<{
+  (event: 'change-navigation'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const navigate = computed<string>(() => '/' + props.item.navigateTo)
+</script>
+<style lang="scss" scoped>
+.unit {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 95px;
+  margin: 21px 10px;
+  text-decoration-line: none;
+
+  &.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .icon-2 {
+    margin: 0 10px 15px 10px;
+    color: var(--global-font-color3);
+  }
+  &-text {
+    color: var(--global-font-color3);
+    font-size: 13px;
+    line-height: 13px;
+    font-weight: 400;
+    padding-bottom: 2px;
+    text-align: center;
+  }
+}
+</style>

package/components/common/pages/tasks/table/Table.vue

@@ -38,18 +38,13 @@
         {{ item.text }}
       </ui-chip>
 
-      <div v-if="item.data.error" class="task-table__tooltip">
-        <common-tooltip-help
-            :test-id="item.data.testId"
-            :help-id="item.data.testId + 'icon'"
-            :title="localization.common.failureReason"
-            :help-text="item.data.error"
-            status="error"
-            dropdown-width="232px"
-            dropdown-left
-            dropdown-top
-        />
-      </div>
+      <common-pages-tasks-table-error-info
+        v-if="item.data.error"
+        :id="item.data.testId"
+        :error="item.data.error"
+        :opened-error="openedError"
+        @toggle-error="onToggleError"
+      />
     </template>
 
     <template #default-actions="{ item }">
@@ -336,9 +331,6 @@ const onSelectNodeOfTree = (
       margin-left: 8px;
     }
   }
-  &__tooltip {
-    margin-left: 8px;
-  }
 }
 
 .skeleton-header {

package/components/common/pages/tasks/table/errorInfo/ErrorInfo.vue

@@ -0,0 +1,128 @@
+<template>
+  <div :class="['error-info', { 'error-info-small': props.isSmall }]">
+    <ui-icon
+      :id="`task-error-info-icon-${props.id}`"
+      name="info"
+      width="16px"
+      height="16px"
+      :class="[
+        'info-icon pointer',
+        { show: isShowInfo, 'in-collapse-content': props.inCollapseContent },
+      ]"
+      @click.stop="emits('toggle-error', props.id)"
+    />
+    <ui-popup-window
+      v-model="isShowInfo"
+      top
+      left
+      :elem-id="`task-error-info-icon-${props.id}`"
+    >
+      <div class="common-widget-info">
+        <div class="headline justify-between flex-align-center">
+          <div class="flex-align-center">
+            <ui-icon name="error" width="16px" height="16px" />
+            <span class="title">{{ localization.common.failureReason }}</span>
+          </div>
+          <ui-icon
+            name="close"
+            class="pointer hide-icon"
+            width="16px"
+            height="16px"
+            @click.stop="emits('toggle-error', '')"
+          />
+        </div>
+
+        <div class="common-widget-info-description">
+          {{ props.error }}
+        </div>
+      </div>
+    </ui-popup-window>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    error: string
+    openedError: string
+    inCollapseContent?: boolean
+    isSmall?: boolean
+  }>(),
+  {
+    inCollapseContent: false,
+    isSmall: false,
+  }
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const emits = defineEmits<{
+  (event: 'toggle-error', value: string): void
+}>()
+
+const isShowInfo = computed<boolean>({
+  get() {
+    return props.openedError === props.id
+  },
+  set() {
+    emits('toggle-error', '')
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.error-info {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 8px;
+
+  &.error-info-small {
+    margin-left: 6px;
+  }
+
+  .info-icon {
+    color: var(--form-icon-color);
+
+    &:hover {
+      color: var(--close-icon);
+    }
+    &.show {
+      color: var(--btn-primary-fill-bg-color);
+    }
+  }
+
+  .common-widget-info {
+    width: 232px;
+    padding: 16px;
+
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16px;
+      color: var(--zabbix-text-color);
+      margin-left: 8px;
+    }
+
+    .hide-icon {
+      color: var(--alert-icon);
+    }
+
+    .common-widget-info-description {
+      font-size: 13px;
+      line-height: 15.73px;
+      color: var(--zabbix-text-color);
+      margin-top: 12px;
+    }
+  }
+}
+
+:deep(.in-collapse-content) {
+  path,
+  circle {
+    stroke-width: 1.4 !important;
+  }
+}
+</style>

package/components/common/pages/tasks/table/expandDetails/ExpandDetails.vue

@@ -30,18 +30,15 @@
           {{ normalizedTaskDetails[2].text }}
         </ui-chip>
 
-         <div v-if="normalizedTaskDetails[2].data.error" class="expand-details__tooltip">
-          <common-tooltip-help
-              :test-id="normalizedTaskDetails[2].data.testId"
-              :help-id="`${normalizedTaskDetails[2].data.testId}-expand-icon`"
-              :title="localization.common.failureReason"
-              :help-text="normalizedTaskDetails[2].data.error"
-              status="error"
-              dropdown-width="232px"
-              dropdown-left
-              dropdown-top
-          />
-        </div>
+        <common-pages-tasks-table-error-info
+          v-if="normalizedTaskDetails[2].data.error"
+          :id="`${normalizedTaskDetails[2].data.testId}-expand-details`"
+          :error="normalizedTaskDetails[2].data.error"
+          :opened-error="openedError"
+          in-collapse-content
+          is-small
+          @toggle-error="onToggleError"
+        />
       </span>
     </div>
 
@@ -185,8 +182,5 @@ const onSelectNodeOfTree = (data: any): void => {
       width: max-content;
     }
   }
-  &__tooltip {
-    margin-left: 6px;
-  }
 }
 </style>

package/components/common/readyToComplete/ReadyToComplete.vue

@@ -1,17 +1,17 @@
-<template>
-  <common-ready-to-complete-new v-if="isNewView" :data="props.data" />
-  <common-ready-to-complete-old v-else :data="props.data" />
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
-
-const props = defineProps<{
-  data: UI_I_TableInfoItem[]
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <common-ready-to-complete-new v-if="isNewView" :data="props.data" />
+  <common-ready-to-complete-old v-else :data="props.data" />
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
+
+const props = defineProps<{
+  data: UI_I_TableInfoItem[]
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style lang="scss" scoped></style>