bfg-common 1.5.679 → 1.5.682

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

@@ -1,428 +0,0 @@
-<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

@@ -1,259 +0,0 @@
-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 },
-        },
-      ],
-    }
-  })
-}