bfg-common 1.5.676 → 1.5.678

package/components/common/layout/bottomPanel/recentTasks/new/New.vue

@@ -0,0 +1,428 @@
+<template>
+  <ui-data-table
+    :data="data"
+    :options="options"
+    :loading="props.loading"
+    test-id="resent-task-table"
+    @sort="onSort"
+  >
+    <template #icon="{ item }">
+      <span class="flex-align-center">
+        <span :class="['icon', item.data.icon]" />
+
+        <span
+          :data-id="`rtask-${item.data.testId}`"
+          :class="item.data.isLink && 'target-link'"
+          @click="onSelectNodeOfTree(item.data)"
+        >
+          {{ item.text }}
+        </span>
+      </span>
+    </template>
+
+    <template #status="{ item }">
+      <ui-chip :test-id="item.data.testId" :color="item.data.chipColor" rounded>
+        <ui-icon
+          :name="item.data.icon"
+          width="14px"
+          height="14px"
+          class="chip-icon"
+        ></ui-icon>
+        {{ item.text }}
+      </ui-chip>
+
+      <div v-if="item.data.operations.length" class="ml-2">
+        <common-tooltip-help
+          :test-id="item.data.index + '-operations'"
+          :help-id="item.data.index + '-operations-icon'"
+          :title="localization.tasks.vmUpdateSteps"
+          :help-text="item.data.error"
+          status="info"
+          @toggle-show="onToggleOperationsTooltip"
+        >
+          <template #default>
+            <div class="operations-container">
+              <div
+                v-for="(item2, key2) in item.data.operations"
+                :key="key2"
+                :data-id="item2.testId"
+                class="status-detail-item flex flex-align-center"
+              >
+                <div class="left-block">
+                  <ui-icon
+                    :name="item2.iconClassName"
+                    class="status-detail-item__icon"
+                    width="16"
+                    height="16"
+                  />
+                  <span class="text-ellipsis">{{ item2.operation_type }}:</span>
+                </div>
+                <div class="right-block text-ellipsis">
+                  <span
+                    :title="item2.message"
+                    class="status-detail-item-message text-ellipsis text-3 font-[500]"
+                    >{{ item2.message || '--' }}</span
+                  >
+                  <ui-icon
+                    name="arrow"
+                    width="16"
+                    height="16"
+                    class="toggle-text-icon pointer"
+                    :data-id="`toggle-text-icon-${key2}`"
+                    @click="onToggleLongText(key2)"
+                  />
+                </div>
+              </div>
+              <div class="bottom-info-block">
+                <span class="completed-text"
+                  >{{
+                    item.data.operations.length -
+                    item.data.failedOperationsCount
+                  }}
+                  {{ localization.common.of }}
+                  {{ item.data.operations.length }}
+                  {{ localization.common.completed }}</span
+                >
+                <span
+                  :class="[
+                    'failed-text',
+                    { error: item.data.failedOperationsCount },
+                  ]"
+                  >{{ item.data.failedOperationsCount }}
+                  {{ localization.common.failed }}</span
+                >
+              </div>
+            </div>
+          </template>
+        </common-tooltip-help>
+      </div>
+
+      <div v-if="item.data.error" class="ml-2">
+        <common-tooltip-help
+          :test-id="`${item.data.index}`"
+          :help-id="item.data.index + 'icon'"
+          :title="localization.common.failureReason"
+          :help-text="item.data.error"
+          dropdown-width="max-content"
+          dropdown-max-width="480px"
+          dropdown-max-height="200px"
+          status="error"
+          dropdown-top
+          dropdown-left
+        />
+      </div>
+    </template>
+
+    <template #default-actions="{ item }">
+      <div class="actions w-full">
+        <ui-button
+          :test-id="`resent-task-item-${item.data.id}-action`"
+          variant="text"
+          is-without-height
+          is-without-sizes
+          @click="onToggleActions(item.data.id)"
+        >
+          <span
+            :class="['action-icon', { active: actionsIsShow[item.data.id] }]"
+          >
+            <ui-icon name="vertical-dotes" width="20" height="20" />
+          </span>
+        </ui-button>
+        <ui-dropdown
+          :show="actionsIsShow[item.data.id] || false"
+          :test-id="`resent-task-item-action-${item.data.id}`"
+          :items="actions"
+          :elem-id="`resent-task-item-${item.data.id}-action`"
+          width="max-content"
+          left
+          @select="onSelectAction(item.data.target, $event, item.data.id)"
+          @hide="onHideActionsDropdown(item.data.id)"
+        >
+          <template #row="{ item: dropMenu }">
+            <ui-icon
+              v-if="dropMenu.iconName === 'hide'"
+              name="password-hide"
+              width="16"
+              height="16"
+            />
+            <span class="action-text">
+              {{ dropMenu.text }}
+            </span>
+          </template>
+        </ui-dropdown>
+      </div>
+    </template>
+  </ui-data-table>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableHeader,
+  UI_I_DataTableBody,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_RecentTaskItem } from '~/lib/models/store/tasks/interfaces'
+import type { UI_I_DataTargetForTable } from '~/components/common/layout/bottomPanel/recentTasks/lib/models/interfaces'
+import type { UI_T_SelectedStatus } from '~/components/common/layout/bottomPanel/recentTasks/old/lib/models/types'
+import type { UI_T_NodeType } from '~/components/common/pages/home/lib/models/types'
+import {
+  options,
+  getHeaderDataFunc,
+  getBodyDataFunc,
+} from '~/components/common/layout/bottomPanel/recentTasks/new/lib/config/config'
+
+const statusFilter = defineModel<UI_T_SelectedStatus>('statusFilter', {
+  required: true,
+})
+
+const props = defineProps<{
+  dataTable: UI_I_RecentTaskItem<UI_T_NodeType>[]
+  loading: boolean
+  pagination: UI_I_Pagination // Для Warning props
+}>()
+const emits = defineEmits<{
+  (event: 'sort', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+const actionsIsShow = ref<boolean[]>([])
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'resent-task-table',
+  header: resentTaskHeadItems.value,
+  body: resentTaskBodyItems.value,
+}))
+
+const resentTaskHeadItems = computed<UI_I_DataTableHeader[]>(() =>
+  getHeaderDataFunc(localization.value)
+)
+
+const resentTaskBodyItems = ref<UI_I_DataTableBody[]>([])
+watch(
+  () => [props.dataTable, statusFilter.value],
+  (newValue) => {
+    if (!newValue[0]?.length) {
+      resentTaskBodyItems.value = []
+      return
+    }
+
+    if (newValue[1] !== -1) {
+      newValue[0] = newValue[0].filter((task: UI_I_RecentTaskItem<UI_T_NodeType>) => task.status === newValue[1])
+    }
+
+    resentTaskBodyItems.value = getBodyDataFunc(newValue[0], localization.value)
+  },
+  { deep: true, immediate: true }
+)
+const onSort = (value: string): void => {
+  emits('sort', value)
+}
+
+const actions = computed<UI_I_Dropdown[]>(() => [
+  {
+    value: 'view',
+    text: localization.value.common.viewTarget,
+    iconName: 'hide',
+    selected: false,
+  },
+])
+const onToggleActions = (id: number): void => {
+  actionsIsShow.value[id] = !actionsIsShow.value[id]
+}
+const onSelectAction = (
+  data: UI_I_DataTargetForTable,
+  action: 'view',
+  actionId: number
+): void => {
+  switch (action) {
+    case 'view':
+      onSelectNodeOfTree(data)
+      break
+  }
+  onHideActionsDropdown(actionId)
+}
+const onHideActionsDropdown = (id: number): void => {
+  actionsIsShow.value[id] = false
+}
+
+const onSelectNodeOfTree = (data: UI_I_DataTargetForTable): void => {
+  if (!data.isLink) return
+
+  const { type, id, nav } = data
+
+  const node = {
+    id,
+    type,
+  }
+
+  const path = `/inventory/type=${type};nav=${nav};id=${id}/summary`
+  navigateTo(path)
+
+  $store.dispatch('inventory/A_SELECT_NODE', { node, type })
+}
+
+const onToggleOperationsTooltip = (): void => {
+  setTimeout(() => {
+    document.querySelectorAll('.status-detail-item').forEach((item) => {
+      const messageItem = item.querySelector('.status-detail-item-message')
+
+      if (!messageItem) return
+
+      const isEllipsisActive = messageItem.scrollWidth > messageItem.clientWidth
+
+      isEllipsisActive &&
+        item.querySelector('.right-block')?.classList.toggle('active')
+    })
+  }, 0)
+}
+const onToggleLongText = (index: number): void => {
+  document
+    .querySelectorAll('.status-detail-item')
+    [index].querySelectorAll('.right-block')[0]
+    .classList.toggle('show-full')
+}
+</script>
+
+<style>
+/*TODO move up*/
+:root {
+  --actions-icon-color: #4d5d69;
+  --actions-icon-hover-color: #213444;
+  --actions-icon-icative-color: #008fd6;
+  --status-operations-container-border: #e9ebeda3;
+  --status-operations-container-completed-info-text: #4d5d69;
+  --status-operations-container-failed-error-text: #ea3223;
+}
+:root.dark-theme {
+  --actions-icon-color: #e9eaec;
+  --actions-icon-hover-color: #ffffff;
+  --actions-icon-icative-color: #2ba2de;
+  --status-operations-container-border: #e9ebed1f;
+  --status-operations-container-completed-info-text: #e9eaec;
+  --status-operations-container-failed-error-text: #ec4235;
+}
+</style>
+<style scoped lang="scss">
+.resent-task-table {
+  height: inherit;
+
+  .target-link {
+    font-family: 'Inter', sans-serif;
+    font-size: 13px;
+    color: var(--bottom-pannel-rtask-link-text);
+    font-weight: 400;
+    line-height: 15.73px;
+    cursor: pointer;
+    &:hover {
+      color: var(--bottom-pannel-rtask-link-hover-text);
+    }
+  }
+  .chip-icon {
+    min-width: 14px;
+    //margin-right: 6px;
+  }
+  .icon {
+    margin-right: 4px;
+  }
+
+  .actions {
+    .action-icon {
+      width: 16px;
+      height: 16px;
+      color: var(--actions-icon-color);
+
+      &:hover {
+        color: var(--actions-icon-hover-color);
+      }
+      &.active {
+        color: var(--actions-icon-icative-color);
+      }
+    }
+
+    .action-text {
+      margin-left: 8px;
+    }
+  }
+
+  .operations-container {
+    max-width: 448px;
+    min-width: 288px;
+    padding-top: 16px;
+    border-top: 1px solid var(--status-operations-container-border);
+    display: grid;
+    grid-row-gap: 20px;
+
+    .status-detail-item {
+      display: grid;
+      grid-template-columns: 50% 50%;
+
+      .left-block {
+        display: flex;
+        align-items: center;
+        grid-gap: 8px;
+        padding-right: 24px;
+      }
+      .right-block {
+        display: grid;
+        align-items: flex-start;
+
+        &.active {
+          grid-template-columns: 1fr max-content;
+          grid-column-gap: 8px;
+
+          .toggle-text-icon {
+            display: unset;
+          }
+        }
+        &.show-full {
+          .status-detail-item-message {
+            white-space: break-spaces;
+          }
+          .toggle-text-icon {
+            transform: rotate(0deg);
+          }
+        }
+
+        .status-detail-item-message {
+          color: #9da6ad;
+        }
+        .toggle-text-icon {
+          transform: rotate(180deg);
+          display: none;
+        }
+      }
+
+      &__icon {
+        min-width: 16px;
+        color: #ea3223;
+        :deep(path) {
+          fill-opacity: 1;
+        }
+      }
+    }
+    .bottom-info-block {
+      display: flex;
+      justify-content: space-between;
+      padding-top: 16px;
+      border-top: 1px solid var(--status-operations-container-border);
+
+      .completed-text {
+        font-weight: 500;
+        color: var(--status-operations-container-completed-info-text);
+      }
+      .failed-text {
+        color: #9da6ad;
+
+        &.error {
+          color: var(--status-operations-container-failed-error-text);
+        }
+      }
+    }
+  }
+}
+</style>

package/components/common/layout/bottomPanel/recentTasks/new/lib/config/config.ts

@@ -0,0 +1,259 @@
+import type {
+  UI_I_DataTableBody,
+  UI_I_DataTableOptions,
+  UI_I_DataTableHeader,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_RecentTaskItem } from '~/lib/models/store/tasks/interfaces'
+import type { UI_T_NodeType } from '~/components/common/pages/home/lib/models/types'
+import { UI_E_RecentTaskStatus } from '~/lib/models/store/tasks/enums'
+import { UI_E_NodeIconsByState } from '~/lib/models/enums'
+import { UI_E_TabsByTypeEnum } from '~/components/common/pages/home/widgets/warnings/table/lib/models/enums'
+import {
+  UI_E_RTaskChipColor,
+  UI_E_RTaskStatusIcon,
+} from '~/components/common/pages/tasks/table/lib/models/enums'
+
+export const getHeaderDataFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 0,
+    colName: 'taskName',
+    text: localization.tasks.taskName,
+    isSortable: true,
+    sort: 'asc',
+    sortColumn: true,
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 1,
+    colName: 'target',
+    text: localization.common.target,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 2,
+    colName: 'status',
+    text: localization.common.status,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 3,
+    colName: 'details',
+    text: localization.common.details,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 4,
+    colName: 'initiator',
+    text: localization.common.initiator,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 5,
+    colName: 'queuedFor',
+    text: localization.common.queuedFor,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 6,
+    colName: 'startTime',
+    text: localization.common.startTime,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 7,
+    colName: 'completionTime',
+    text: localization.common.completionTime,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 8,
+    colName: 'executionTime',
+    text: localization.common.executionTime,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 9,
+    colName: 'server',
+    text: localization.common.server,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 10,
+    colName: 'zone',
+    text: localization.common.zone,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 11,
+    colName: 'default-actions',
+    text: '',
+    show: true,
+  },
+]
+
+export const options: UI_I_DataTableOptions = {
+  perPageOptions: [
+    { text: '10', value: 10 },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100 },
+  ],
+  isSelectable: false,
+  isFocusable: false,
+  showPagination: true,
+  showPageInfo: true,
+  isSortable: true,
+  server: false,
+  isResizable: true,
+  showSearch: false,
+  showColumnManager: true,
+  withActions: true,
+  inBlock: true,
+  inBlockOnlyLightMode: true,
+}
+
+export const getBodyDataFunc = (
+  bodyData: UI_I_RecentTaskItem<UI_T_NodeType>[],
+  localization: UI_I_Localization
+): UI_I_DataTableBody[] => {
+  const { $store, $text, $formattedDatetime }: any = useNuxtApp()
+
+  return bodyData.map((task, index: number) => {
+    const iconClassName = UI_E_NodeIconsByState[`${task.targetType}_Normal`]
+    const id = task.extra?.created_id || task.target
+    const targetData = {
+      id,
+      icon: iconClassName,
+      nav: UI_E_TabsByTypeEnum[task.targetType],
+      type: task.targetType,
+      isLink: true,
+      testId: `${task.targetType}-item`,
+    }
+
+    const lang = $store.getters['main/getInterfaceLang']
+    const currentOperations = task.statusDetails.map((item) => {
+      return {
+        ...item,
+        operation_type:
+          lang === 'en_US'
+            ? $text.toCapitalizeEveryWord(item.operation_type)
+            : item.operation_type,
+      }
+    })
+    const statusData = {
+      icon: UI_E_RTaskStatusIcon[task.status],
+      chipColor: UI_E_RTaskChipColor[task.status],
+      error: task.error,
+      operations: currentOperations,
+      failedOperationsCount: task.statusDetails?.filter(
+        (item) => item.status !== 4
+      ).length,
+      testId: `${task.taskName}-progress`,
+      index,
+    }
+
+    const formattedStartTime =
+      task.startTime === '--'
+        ? '--'
+        : $formattedDatetime(+task.startTime * 1000, {
+            hasSeconds: true,
+          })
+
+    const formattedCompletionTime =
+      task.completion === '--'
+        ? '--'
+        : $formattedDatetime(+task.completion * 1000, {
+            hasSeconds: true,
+          })
+
+    return {
+      row: index,
+      collapse: false,
+      isHiddenCollapse: false,
+      collapseToggle: false,
+      data: [
+        { col: 0, text: task.taskName },
+        {
+          key: 'icon',
+          col: 1,
+          text: task.target,
+          data: targetData,
+        },
+        {
+          key: 'status',
+          col: 2,
+          text: localization.common[UI_E_RecentTaskStatus[task.status]],
+          data: statusData,
+        },
+        { col: 3, text: task.details || '--' },
+        { col: 4, text: task.initiator },
+        { col: 5, text: `${task.queuedFor} ms` },
+        { col: 6, text: formattedStartTime },
+        { col: 7, text: formattedCompletionTime },
+        { col: 8, text: `${task.execution} ms` },
+        { col: 9, text: task.server },
+        {
+          key: 'icon',
+          col: 10,
+          text: task.zone,
+          data: {
+            icon: 'vsphere-icon-vcenter',
+            isLink: false,
+            testId: 'zone-item',
+          },
+        },
+        {
+          key: 'default-actions',
+          col: 'default-actions',
+          text: '',
+          data: { id: index, target: targetData },
+        },
+      ],
+    }
+  })
+}