bfg-common 1.5.676 → 1.5.678

package/components/common/layout/bottomPanel/recentTasks/old/Old.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="data-table-view">
+    <atoms-table-data-grid
+      v-model:selected-row="selectedRow"
+      v-model:column-keys="columnKeys"
+      v-model:page-size="paginationLocal.pageSize"
+      v-model:page="paginationLocal.page"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="props.totalItems"
+      :total-pages="props.totalPages"
+      :items-per-page="itemsPerPage"
+      :loading="props.loading"
+      test-id="bottom-panel-table"
+      class="data-table"
+      row-attribute-id-name="data-recent-tasks-id"
+      hide-pagination
+      server-off
+      @sorting="onSorting"
+    >
+      <template #icon="{ item }">
+        <div v-if="item.data.isIconSvg" class="data-table-view__col-icon">
+          <atoms-the-icon :name="item.data.iconClassName" />
+        </div>
+        <span v-else :class="['datagrid-cell-icon', item.data.iconClassName]" />
+        <a
+          v-if="item.data.isLink"
+          :id="item.data.id"
+          :data-id="`rtask-${item.data.testId}`"
+          :title="item.text"
+          href="javascript:void(0)"
+          class="text-ellipsis"
+          @click="onSelectNodeOfTree(item)"
+          >{{ item.text }}</a
+        >
+        <span
+          v-else
+          :data-id="`rtask-${item.data.testId}`"
+          :title="item.text"
+          class="text-ellipsis"
+        >
+          {{ item.text }}
+        </span>
+
+        <div v-if="item.data.operations?.length">
+          <div
+            :id="'status-details-help-icon' + item.id"
+            class="status-details-help-icon signpost-container relative"
+          >
+            <atoms-the-icon
+              :data-id="'toggle-status-details-help-icon' + item.id"
+              fill="#0072a3"
+              width="21px"
+              height="21px"
+              name="info-circle"
+              class="cursor-pointer"
+              @click.stop="
+                item.data.isShowStatusDetails = !item.data.isShowStatusDetails
+              "
+            />
+            <atoms-tooltip-signpost
+              v-if="item.data.isShowStatusDetails"
+              :elem-id="'status-details-help-icon' + item.id"
+              test-id="select-datastore-type"
+              @hide="item.data.isShowStatusDetails = false"
+            >
+              <ul class="status-details flex flex-col">
+                <li
+                  v-for="(item2, key2) in item.data.operations"
+                  :key="key2"
+                  :data-id="item2.testId"
+                  class="status-detail-item flex flex-align-baseline"
+                >
+                  <atoms-the-icon
+                    :name="item2.iconClassName"
+                    width="16px"
+                    height="16px"
+                  />
+                  <span>{{ item2.operation_type }}:</span>
+                  <span
+                    :title="item2.message"
+                    class="status-detail-item-message"
+                    >{{ item2.message || '--' }}</span
+                  >
+                </li>
+              </ul>
+            </atoms-tooltip-signpost>
+          </div>
+        </div>
+      </template>
+
+      <template #action>
+        <div class="flex-space-between flex-align-center">
+          <div class="flex-align-center">
+            <div class="select">
+              <select
+                id="bottom-panel-select-type"
+                v-model="statusFilter"
+                data-id="bottom-panel-select-type-select"
+                class="clr-select"
+              >
+                <option :value="-1">{{ localization.common.all }}</option>
+                <option :value="1">{{ localization.common.running }}</option>
+                <option :value="3">{{ localization.common.failed }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </template>
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type { UI_I_TreeNodeShort } from '~/components/common/recursionTree/lib/models/interfaces'
+import type { UI_I_RecentTaskItem } from '~/lib/models/store/tasks/interfaces'
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+import type { UI_T_SelectedStatus } from '~/components/common/layout/bottomPanel/recentTasks/old/lib/models/types'
+import type { UI_I_SelectNodePayload } from '~/components/common/pages/home/widgets/warnings/table/lib/models/interfaces'
+import type { UI_T_NodeType } from '~/components/common/pages/home/lib/models/types'
+import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
+import * as table from '~/components/common/layout/bottomPanel/recentTasks/old/lib/config/recentTaskTable'
+
+const statusFilter = defineModel<UI_T_SelectedStatus>('statusFilter', {
+  required: true,
+})
+
+const props = defineProps<{
+  dataTable: UI_I_RecentTaskItem<UI_T_NodeType>[]
+  pagination: UI_I_Pagination
+  totalItems: number
+  totalPages: number
+  loading: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'pagination', value: UI_I_Pagination | null): void
+  (event: 'sort', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = ref<number[]>([])
+
+const onSorting = (event: [number, boolean]): void => {
+  const [column, status] = event
+  const direction = status ? 'desc' : 'asc'
+
+  const sort = `${column}.${direction}`
+
+  emits('sort', sort)
+}
+
+const paginationLocal = ref<UI_I_Pagination | null>(null)
+watch(
+  () => props.pagination,
+  (newValue) => {
+    paginationLocal.value = newValue
+  },
+  { immediate: true }
+)
+watch(
+  paginationLocal,
+  (newValue) => {
+    emits('pagination', newValue)
+  },
+  { deep: true, immediate: true }
+)
+
+const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
+watch(localization, () => {
+  columnKeys.value = table.columnKeys(localization.value)
+})
+
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+
+const { $store }: any = useNuxtApp()
+const timeFormat = computed<UI_T_TimeValue>(
+  () => $store.getters['main/getTimeFormat']
+)
+
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+watch(
+  [
+    (): UI_I_RecentTaskItem<UI_T_NodeType>[] => props.dataTable,
+    statusFilter,
+    timeFormat,
+    localization,
+  ],
+  ([newValue1]) => {
+    if (!newValue1?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = table.bodyItems(newValue1, statusFilter.value)
+  },
+  { deep: true, immediate: true }
+)
+
+const onSelectNodeOfTree = (data: UI_I_BodyItem): void => {
+  const { type, id, nav } = data.data
+
+  const node: UI_I_TreeNodeShort = {
+    id,
+    type,
+  }
+
+  // useLocalStorage('sSpec', node)
+
+  const path = `/inventory/type=${type};nav=${nav};id=${id}/summary`
+
+  navigateTo(path)
+
+  const payload: UI_I_SelectNodePayload = {
+    node,
+    type,
+  }
+  $store.dispatch('inventory/A_SELECT_NODE', payload)
+}
+</script>
+
+<style lang="scss" scoped>
+.data-table-view {
+  height: inherit;
+  .data-table {
+    height: inherit;
+    :deep(.datagrid-outer-wrapper) {
+      height: inherit;
+
+      .datagrid-footer__action {
+        width: 100%;
+
+        .select {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+  &__col-icon {
+    min-width: 16px;
+    height: 16px;
+    margin-right: 2px;
+  }
+  &__action {
+    padding-left: 0.3rem;
+  }
+
+  .status-details-help-icon {
+    margin: 4px 0 0 2px;
+  }
+  .status-details {
+    gap: 4px;
+
+    .status-detail-item {
+      gap: 4px;
+
+      .status-detail-item-message {
+        max-width: 200px;
+        margin-left: 4px;
+      }
+
+      span {
+        color: var(--table-color) !important;
+      }
+    }
+  }
+}
+</style>

package/components/common/layout/bottomPanel/recentTasks/old/lib/config/recentTaskTable.ts

@@ -0,0 +1,240 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/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_NodeType } from '~/components/common/pages/home/lib/models/types'
+import type { UI_T_SelectedStatus } from '~/components/common/layout/bottomPanel/recentTasks/old/lib/models/types'
+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_LocatorByRecentTaskStatus } from '~/lib/models/store/tasks/enums'
+import { recentTaskTableKeys } from '~/components/common/layout/bottomPanel/recentTasks/old/lib/config/tableKeys'
+import {
+  constructColumnKey,
+  constructHeadItem,
+} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.tasks.taskName, true, '120px', recentTaskTableKeys[0]],
+    [localization.common.target, true, '180px', recentTaskTableKeys[1]],
+    [localization.common.status, true, '180px', recentTaskTableKeys[2]],
+    [localization.common.details, true, '180px', recentTaskTableKeys[3]],
+    [localization.common.initiator, true, '180px', recentTaskTableKeys[4]],
+    [localization.common.queuedFor, true, '180px', recentTaskTableKeys[5]],
+    [localization.common.startTime, true, '180px', recentTaskTableKeys[6]],
+    [localization.common.completionTime, true, '180px', recentTaskTableKeys[7]],
+    [localization.common.executionTime, true, '180px', recentTaskTableKeys[8]],
+    [localization.common.server, true, '180px', recentTaskTableKeys[9]],
+    [localization.common.zone, true, '180px', recentTaskTableKeys[10]],
+  ]
+}
+
+export const columnKeys = (
+  localization: UI_I_Localization
+): UI_I_ColumnKey[] => {
+  const result: UI_I_ColumnKey[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = i === 1 || i === 2 || i === 10 ? 'icon' : `col${i}`
+    result.push(constructColumnKey(col, item[0], item[1]))
+  })
+  return result
+}
+
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = i === 1 || i === 2 || i === 10 ? 'icon' : `col${i}`
+    result.push(
+      constructHeadItem(
+        col,
+        item[0],
+        item[3],
+        true,
+        item[2],
+        '',
+        `recent-task-${item[3]}`
+      )
+    )
+  })
+  return result
+}
+
+export const bodyItems = (
+  data: UI_I_RecentTaskItem<UI_T_NodeType>[],
+  status: UI_T_SelectedStatus
+): UI_I_BodyItem[][] => {
+  const localization = useLocal()
+  const { $formattedDatetime, $time }: any = useNuxtApp()
+
+  const currentLanguage:
+    | 'en_US'
+    | 'ru_RU'
+    | 'hy_AM'
+    | 'be_BY'
+    | 'kk_KZ'
+    | 'zh_CHS' = useLocalStorage('lang') || 'en_US'
+
+  const bodyItems: UI_I_BodyItem[][] = []
+
+  data.forEach((recent: UI_I_RecentTaskItem<UI_T_NodeType>, key) => {
+    if (status !== -1 && recent.status !== status) return
+
+    const iconClassName = UI_E_NodeIconsByState[`${recent.targetType}_Normal`]
+    const id = recent.extra?.created_id || recent.target
+    const name =
+      recent.extra?.created_name || recent.args?.cloned_name || recent.target
+    const targetData: UI_I_DataTargetForTable = {
+      iconClassName,
+      id,
+      // id: recent.target,
+      nav: UI_E_TabsByTypeEnum[recent.targetType],
+      type: recent.targetType,
+      isLink: !!iconClassName,
+      testId: `${recent.targetType}-item-${name}`,
+    }
+
+    const statusData = {
+      iconClassName: recent.statusIcon,
+      isIconSvg: true,
+      testId: `${recent.taskName}-${
+        UI_E_LocatorByRecentTaskStatus[recent.status]
+      }-progress`,
+      operations: recent.statusDetails,
+      isShowStatusDetails: false,
+    }
+
+    const zoneData: UI_I_DataTargetForTable = {
+      iconClassName: 'vsphere-icon-vcenter',
+      id: recent.zone,
+      nav: 'v', // неважно
+      type: 'vm', // неважно
+      isLink: false,
+      testId: `${recent.zone}-item-${name}`,
+    }
+
+    const startTime = recent[recentTaskTableKeys[6]]
+    const formattedStartTime =
+      startTime === '--'
+        ? '--'
+        : $formattedDatetime(+startTime * 1000, {
+            hasSeconds: true,
+          })
+
+    const completionTime = recent[recentTaskTableKeys[7]]
+    const formattedCompletionTime =
+      completionTime === '--'
+        ? '--'
+        : $formattedDatetime(+completionTime * 1000, {
+            hasSeconds: true,
+          })
+
+    // const queuedFor = `${recent[recentTaskTableKeys[5]]} ms`
+    // const executionTime =
+    //   recent[recentTaskTableKeys[8]] === '--'
+    //     ? '--'
+    //     : `${recent[recentTaskTableKeys[8]]} ms`
+    const queuedFor = $time.formatTime(
+      recent[recentTaskTableKeys[5]],
+      currentLanguage
+    )
+    const executionTime =
+      recent[recentTaskTableKeys[8]] === '--'
+        ? '--'
+        : $time.formatTime(recent[recentTaskTableKeys[8]], currentLanguage)
+
+    bodyItems.push([
+      {
+        key: 'col0',
+        text: recent[recentTaskTableKeys[0]],
+        id: key,
+        dataId: recent.id,
+        testId: `table-item-${recent.id}-${name}`,
+      },
+      {
+        key: 'icon',
+        text: recent[recentTaskTableKeys[1]],
+        data: targetData,
+        id: key,
+        testId: `table-item-${recent.id}-${name}`,
+      },
+      {
+        key: 'icon',
+        text:
+          localization.common[recent[recentTaskTableKeys[2]]] ||
+          recent[recentTaskTableKeys[2]],
+        data: statusData,
+        id: key,
+        testId: `table-item-${recent.id}-${name}`,
+      },
+      {
+        key: 'col3',
+        text: recent[recentTaskTableKeys[3]],
+        id: key,
+        testId: `table-item-${recent.id}-${name}`,
+      },
+      {
+        key: 'col4',
+        text: recent[recentTaskTableKeys[4]],
+        id: key,
+        testId: `table-item-${recent.id}-${name}`,
+      },
+      {
+        key: 'col5',
+        text: queuedFor,
+        id: key,
+        testId: `table-item-${recent.id}-${name}`,
+        data: {
+          sortValue: recent[recentTaskTableKeys[5]],
+        },
+      },
+      {
+        key: 'col6',
+        text: formattedStartTime,
+        id: key,
+        testId: `table-item-${recent.id}-${name}`,
+        data: {
+          sortValue: recent[recentTaskTableKeys[6]],
+        },
+      },
+      {
+        key: 'col7',
+        text: formattedCompletionTime,
+        id: key,
+        testId: `table-item-${recent.id}-${name}`,
+        data: {
+          sortValue: recent[recentTaskTableKeys[7]],
+        },
+      },
+      {
+        key: 'col8',
+        text: executionTime,
+        id: key,
+        testId: `table-item-${recent.id}-${name}`,
+        data: {
+          sortValue: recent[recentTaskTableKeys[8]],
+        },
+      },
+      {
+        key: 'col9',
+        text: recent[recentTaskTableKeys[9]],
+        id: key,
+        testId: `table-item-${recent.id}-${name}`,
+      },
+      {
+        key: 'icon',
+        text: recent[recentTaskTableKeys[10]],
+        data: zoneData,
+        id: key,
+        testId: `table-item-${recent.id}-${name}`,
+      },
+    ])
+  })
+
+  return bodyItems
+}

package/components/common/layout/bottomPanel/recentTasks/old/lib/config/tableKeys.ts

@@ -0,0 +1,15 @@
+import type { UI_T_RecentTaskTableKeys } from '~/components/common/layout/bottomPanel/recentTasks/old/lib/models/types'
+
+export const recentTaskTableKeys: UI_T_RecentTaskTableKeys[] = [
+  'taskName',
+  'target',
+  'statusText',
+  'details',
+  'initiator',
+  'queuedFor',
+  'startTime',
+  'completion',
+  'execution',
+  'server',
+  'zone',
+]

package/components/common/layout/bottomPanel/recentTasks/old/lib/models/types.ts

@@ -0,0 +1,14 @@
+export type UI_T_RecentTaskTableKeys =
+  | 'taskName'
+  | 'target'
+  | 'statusText'
+  | 'details'
+  | 'initiator'
+  | 'queuedFor'
+  | 'startTime'
+  | 'completion'
+  | 'execution'
+  | 'server'
+  | 'zone'
+
+export type UI_T_SelectedStatus = -1 | 1 | 3