bfg-common 1.6.96 → 1.6.97

package/components/common/pages/scheduledTasks/table/new/New.vue

@@ -0,0 +1,318 @@
+<template>
+  <div :class="`table-view-scheduled-tasks table-container-${data.id}`">
+    <ui-data-table
+      :data="data"
+      :options="options"
+      :loading="props.isLoading"
+      :total-pages="props.totalPages"
+      :total-items="props.totalItems"
+      :texts="texts"
+      :skeleton="skeletonData"
+      test-id="task-table"
+      @sort="onSorting"
+      @pagination="onPagination"
+      @column-filter="onColumnFilter"
+      @select-row="onSelectRow"
+    >
+      <template #insteadOfTitleActions>
+        <templates-inventory-vm-configure-scheduled-tasks-tools-panel
+          ref="schedulerToolsPanelRef"
+          :selected-task="selectedScheduledTaskLocal"
+          :selected-task-from-table="props.selectedScheduler"
+        />
+      </template>
+
+      <template #icon="{ item }">
+        <span class="flex-align-center">
+          <ui-icon
+            :name="item.data.iconClassName"
+            width="18"
+            height="18"
+            class="mr-1"
+          />
+          {{ item.text }}
+        </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>
+
+        <common-tooltip-help
+          v-if="item.data.chipColor === 'red'"
+          :title="localization.common.failureReason"
+          :help-text="item.data.runResult"
+          :test-id="`${item.data.testId}`"
+          :help-id="`${item.data.testId}-tooltip`"
+          status="error"
+          dropdown-width="320px"
+          dropdown-left
+          dropdown-top
+          class="ml-2"
+        />
+      </template>
+
+      <template #default-actions="{ item }">
+        <div class="scheduler-drop-action">
+          <ui-button
+            :id="`event-table-action-${item.data.id}`"
+            :test-id="`event-table-action-${item.data.id}`"
+            variant="text"
+            is-without-height
+            is-without-sizes
+            @click="onToggleActions(item.data.id)"
+          >
+            <span
+              :class="[
+                'scheduler-drop-action__icon',
+                { active: actionsShowId === item.data.id },
+              ]"
+            >
+              <ui-icon name="vertical-dotes" width="20" height="20" />
+            </span>
+          </ui-button>
+          <Teleport to="body">
+            <ui-dropdown
+              :show="actionsShowId === item.data.id"
+              :test-id="`event-table-action-dropdown-${item.data.id}`"
+              :items="schedulerDropActions"
+              :elem-id="`event-table-action-${item.data.id}`"
+              width="max-content"
+              left
+              @select="onSelectAction"
+              @hide="onHideActionsDropdown"
+            />
+          </Teleport>
+        </div>
+      </template>
+
+      <template #expand="{ item }">
+        <common-pages-scheduled-tasks-table-expand-details
+          :data="item.data[0]?.data.expandData"
+        />
+      </template>
+
+      <template #skeleton-header>
+        <div class="skeleton-header">
+          <div class="left-skeleton">
+            <ui-skeleton-item width="70" height="16" />
+            <div class="vertical-line"></div>
+            <ui-skeleton-item width="70" height="16" />
+            <ui-skeleton-item width="70" height="16" />
+          </div>
+          <div class="right-skeleton">
+            <ui-skeleton-item width="128" height="36" border-radius="8" />
+          </div>
+        </div>
+      </template>
+    </ui-data-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+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,
+  UI_I_DataTableSkeleton,
+  UI_I_Pagination,
+  UI_I_TableTexts,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_T_ArbitraryObject } from '~/node_modules/bfg-uikit/models/types'
+import type { UI_I_Button } from '~/components/common/tools/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ScheduledTasks } from '~/components/common/pages/scheduledTasks/lib/models/interfaces'
+import {
+  options,
+  getHeaderDataFunc,
+  getBodyDataFunc,
+} from '~/components/common/pages/scheduledTasks/table/new/lib/config/scheduledTasksTable'
+import { scheduledTasksActionsFunc } from '~/components/templates/inventory/vm/configure/scheduledTasks/toolsPanel/lib/config/actionsPanel'
+
+const selectedScheduledTaskLocal = defineModel<string | null>({
+  required: true,
+})
+const props = defineProps<{
+  tableItems: UI_I_ScheduledTasks['items']
+  totalItems: number
+  totalPages: number
+  selectedScheduler: UI_I_ScheduledTasks['items'][number]
+  isLoading: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'sort', value: string): void
+  (event: 'pagination', value: UI_I_Pagination): void
+  (event: 'col-search', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const texts = computed<UI_I_TableTexts>(() => ({
+  searchHere: localization.value.common.searchHere,
+  rowsPerPage: localization.value.common.rowsPerPage,
+  of: localization.value.common.of,
+  selected: localization.value.common.selected,
+  columns: localization.value.common.columns,
+  previous: localization.value.common.previous,
+  next: localization.value.common.next,
+  noItemsFound: localization.value.common.noItemsFound,
+  exportAll: localization.value.common.exportAll,
+  exportSelected: localization.value.common.exportSelected,
+  all: localization.value.common.all,
+  filter: localization.value.common.filter,
+}))
+const skeletonData = ref<UI_I_DataTableSkeleton>({
+  columnsCount: 6,
+  headColumns: [],
+  bodyColumns: [],
+})
+
+const schedulerToolsPanelRef = useTemplateRef<string>('schedulerToolsPanelRef')
+const actionsShowId = ref<number>(-1)
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'scheduled-tasks-table',
+  header: taskHeadItems.value,
+  body: taskBodyItems.value,
+}))
+
+const taskHeadItems = computed<UI_I_DataTableHeader[]>(() =>
+  getHeaderDataFunc(localization.value)
+)
+const taskBodyItems = computed<UI_I_DataTableBody[]>(() => {
+  return getBodyDataFunc(props.tableItems || [], localization.value)
+})
+
+const onSorting = (value: string): void => {
+  emits('sort', value)
+}
+const onPagination = (value: UI_I_Pagination): void => {
+  emits('pagination', value)
+}
+const sendFilter = useDebounceFn((searchText: string) => {
+  emits('col-search', searchText)
+}, 1000)
+const onColumnFilter = (obj: UI_T_ArbitraryObject<string>): void => {
+  let searchText = ''
+
+  for (const [key, value] of Object.entries(obj)) {
+    const currentFilter = searchText
+      ? ',' + key + '.' + value
+      : key + '.' + value
+
+    searchText = searchText + (value ? currentFilter : '')
+  }
+  sendFilter(searchText)
+}
+
+const schedulerDropActions = computed<UI_I_Dropdown[]>(() =>
+  scheduledTasksActionsFunc(
+    localization.value,
+    selectedScheduledTaskLocal.value
+  ).map((action: UI_I_Button) => {
+    const isDelete = action.type === 'remove'
+    const color = action.disabled ? '#bdc3c7' : '#ea3223'
+
+    return {
+      ...action,
+      value: action.type,
+      ...(isDelete && {
+        iconColor: color,
+        textColor: color,
+      }),
+    }
+  })
+)
+const onToggleActions = (id: number): void => {
+  if (actionsShowId.value === id) {
+    actionsShowId.value = -1
+  } else {
+    actionsShowId.value = id
+  }
+}
+const onSelectAction = (action: 'edit' | 'run' | 'remove'): void => {
+  if (!schedulerToolsPanelRef.value) return
+
+  schedulerToolsPanelRef.value.modalType = action
+  onHideActionsDropdown()
+}
+const onHideActionsDropdown = (): void => {
+  actionsShowId.value = -1
+}
+
+const onSelectRow = (value: UI_I_DataTableBody[]): void => {
+  selectedScheduledTaskLocal.value = value[0]?.row
+}
+</script>
+
+<style scoped lang="scss">
+.table-view-scheduled-tasks {
+  height: inherit;
+
+  :deep(.table-container) {
+    grid-template-rows: min-content auto min-content;
+  }
+
+  .chip-icon {
+    min-width: 14px;
+  }
+  .icon {
+    margin-right: 4px;
+  }
+
+  .scheduler-drop-action {
+    width: 100%;
+    &__icon {
+      width: 20px;
+      height: 20px;
+      color: var(--tasks-actions-icon-color);
+
+      &:hover {
+        color: var(--tasks-actions-icon-hover-color);
+      }
+      &.active {
+        color: var(--tasks-actions-icon-icative-color);
+      }
+    }
+    &__text {
+      margin-left: 8px;
+    }
+  }
+
+  .skeleton-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left-skeleton {
+      display: flex;
+      align-items: center;
+      column-gap: 16px;
+      .vertical-line {
+        height: 24px;
+        border-right: 1px solid var(--table-line);
+      }
+    }
+
+    .right-skeleton {
+      display: flex;
+      align-items: center;
+      column-gap: 16px;
+    }
+  }
+}
+</style>

package/components/common/pages/scheduledTasks/table/new/lib/config/scheduledTasksTable.ts

@@ -0,0 +1,192 @@
+import type {
+  UI_I_DataTableBody,
+  UI_I_DataTableHeader,
+  UI_I_DataTableOptions,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ScheduledTasksTableItem } from '~/components/common/pages/scheduledTasks/lib/models/interfaces'
+import { UI_E_SchedulerRunStatus } from '~/components/common/pages/scheduledTasks/table/lib/models/enums'
+import {
+  UI_E_SchedulerStatus,
+  UI_E_SchedulerChipColor,
+  UI_E_SchedulerChipIcon,
+} from '~/components/common/pages/scheduledTasks/table/new/lib/models/enums'
+
+// Маппинг для статусов
+const STATUS_MAPPING = {
+  [UI_E_SchedulerStatus.Completed]: {
+    textKey: 'completed',
+    icon: UI_E_SchedulerChipIcon.StatusCheck,
+    chipColor: UI_E_SchedulerChipColor.Green,
+  },
+  [UI_E_SchedulerStatus.Running]: {
+    textKey: 'running',
+    icon: UI_E_SchedulerChipIcon.StatusCheck,
+    chipColor: UI_E_SchedulerChipColor.Green,
+  },
+  [UI_E_SchedulerStatus.Failed]: {
+    textKey: 'failed',
+    icon: UI_E_SchedulerChipIcon.Information,
+    chipColor: UI_E_SchedulerChipColor.Red,
+  },
+}
+
+export const getHeaderDataFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 'col0',
+    colName: 'name',
+    text: localization.common.scheduledTask,
+    isSortable: true,
+    sort: 'asc',
+    width: '240px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col1',
+    colName: 'sheduler',
+    text: localization.common.schedule,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col2',
+    colName: 'last_modified',
+    text: localization.common.lastRun,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col3',
+    colName: 'last_run_result',
+    text: localization.common.lastRunResult,
+    isSortable: true,
+    sort: 'asc',
+    width: '110px',
+    show: true,
+    filter: true,
+  },
+
+  {
+    col: 'col4',
+    colName: 'next_run',
+    text: localization.common.nextRun,
+    isSortable: true,
+    sort: 'asc',
+    width: '160px',
+    show: true,
+    filter: true,
+  },
+]
+
+export const options: UI_I_DataTableOptions = {
+  perPageOptions: [
+    { text: '10', value: 10 },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100, default: true },
+  ],
+  selectType: 'radio',
+  isSelectable: true,
+  isFocusable: false,
+  showPagination: true,
+  showPaginationOnTop: false,
+  showPageInfo: true,
+  isSortable: true,
+  server: true,
+  isResizable: true,
+  showSearch: false,
+  showSelectedRows: false,
+  showColumnManager: true,
+  withActions: true,
+  inBlock: true,
+  showExport: false,
+  withCollapse: true,
+}
+
+export const getBodyDataFunc = (
+  bodyData: UI_I_ScheduledTasksTableItem[],
+  localization: UI_I_Localization
+): UI_I_DataTableBody[] => {
+  const { $formattedDatetime }: any = useNuxtApp()
+  return bodyData.map((scheduler, index: number) => {
+    const historyLastRun = scheduler?.last_5_run?.at(-1)
+
+    const lastRun = historyLastRun?.start
+    const formattedLastRun =
+      lastRun && $formattedDatetime(+lastRun * 1000, { hasSeconds: true })
+
+    const nextRun = scheduler.next_run
+    const formattedNextRun =
+      nextRun && $formattedDatetime(+nextRun * 1000, { hasSeconds: true })
+
+    const statusKey =
+      historyLastRun?.result.toLowerCase() === UI_E_SchedulerRunStatus.SUCCESS
+        ? UI_E_SchedulerStatus.Completed
+        : historyLastRun?.result === UI_E_SchedulerRunStatus.RUNNING
+        ? UI_E_SchedulerStatus.Running
+        : UI_E_SchedulerStatus.Failed
+    const statusData = {
+      ...STATUS_MAPPING[statusKey],
+      runResult: historyLastRun?.result,
+      testId: `${scheduler.rid}-${index}-status`,
+    }
+
+    return {
+      row: scheduler.rid,
+      collapse: true,
+      isHiddenCollapse: false,
+      collapseToggle: false,
+      data: [
+        {
+          key: 'icon',
+          col: 'col0',
+          text: scheduler.name,
+          data: {
+            iconClassName: 'shortcuts-tasks',
+            expandData: scheduler,
+          },
+          testId: `table-item-${scheduler.rid}`,
+        },
+        {
+          col: 'col1',
+          text: scheduler.sheduler || '--',
+          testId: `table-item-${scheduler.rid}`,
+        },
+        {
+          col: 'col2',
+          text: formattedLastRun,
+          testId: `table-item-${scheduler.rid}`,
+        },
+        {
+          key: 'status',
+          col: 'col3',
+          text: localization.common[statusData.textKey],
+          data: statusData,
+          testId: `table-item-${scheduler.rid}`,
+        },
+        {
+          key: 'icon',
+          col: 'col4',
+          text: formattedNextRun,
+          data: 'dataTarget',
+          testId: `table-item-${scheduler.rid}`,
+        },
+        {
+          key: 'default-actions',
+          col: 'default-actions',
+          text: '',
+          data: { id: index, target: 'dataTarget', scheduler },
+        },
+      ],
+    }
+  })
+}

package/components/common/pages/scheduledTasks/table/new/lib/models/enums.ts

@@ -0,0 +1,14 @@
+export enum UI_E_SchedulerStatus {
+  Completed = 'completed',
+  Running = 'running',
+  Failed = 'failed',
+}
+
+export enum UI_E_SchedulerChipColor {
+  Green = 'green',
+  Red = 'red',
+}
+export enum UI_E_SchedulerChipIcon {
+  StatusCheck = 'status-check',
+  Information = 'info-stroke',
+}

package/components/common/pages/scheduledTasks/table/old/Old.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="data-table-view">
+    <atoms-table-data-grid
+      v-model:selected-row="selectedScheduledTaskLocal"
+      v-model:page-size="pagination.pageSize"
+      v-model:page="pagination.page"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="props.totalItems"
+      :total-pages="props.totalPages"
+      :items-per-page="itemsPerPage"
+      :z-index-header-shift="2"
+      :loading="props.isLoading"
+      type="radio"
+      class="data-table"
+      test-id="scheduled-tasks-table"
+      hide-pagination
+      hide-page-size
+      off-select-by-row
+      server-off
+    >
+      <template #icon="{ item }">
+        <atoms-the-icon :name="item.data.iconClassName" class="icon" />
+        <span :title="item.text" class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+
+      <template #toggleBlock="{ item }">
+        <common-pages-scheduled-tasks-table-expand-details
+          :data="item[0].data.expandData"
+        />
+      </template>
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type { UI_I_ScheduledTasksTableItem } from '~/components/common/pages/scheduledTasks/lib/models/interfaces'
+import * as scheduledTaskTable from '~/components/common/pages/scheduledTasks/table/old/lib/config/scheduledTasksTable'
+
+const selectedScheduledTaskLocal = defineModel<string | null>()
+const props = defineProps<{
+  tableItems: UI_I_ScheduledTasksTableItem[]
+  totalItems: number
+  totalPages: number
+  isLoading: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const pagination = ref<UI_I_Pagination>({
+  page: 1,
+  pageSize: 100,
+})
+
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  scheduledTaskTable.headItems(localization.value)
+)
+const bodyItems = computed<UI_I_BodyItem[][]>(() => {
+  return scheduledTaskTable.bodyItems(props.tableItems || [])
+})
+</script>
+
+<style lang="scss" scoped>
+.data-table-view {
+  overflow: hidden;
+  height: inherit;
+  margin-bottom: 10px;
+  :deep(.data-table) {
+    height: inherit;
+    .datagrid-outer-wrapper {
+      height: inherit;
+      padding-top: 0;
+      //.datagrid {
+      //  margin-top: 0;
+      //}
+    }
+  }
+  .icon {
+    width: 18px;
+    min-width: 18px;
+    margin-right: 3px;
+  }
+}
+</style>

package/components/common/pages/scheduledTasks/table/{lib → old/lib}/config/scheduledTasksTable.ts

@@ -9,8 +9,8 @@ import {
 } from '~/lib/models/store/tasks/enums'
 import * as defaultSettings from '~/components/atoms/table/dataGrid/lib/config/settingsTable'
 import type { UI_I_ScheduledTasksTableItem } from '~/components/common/pages/scheduledTasks/lib/models/interfaces'
-import { scheduledTaskTableItemsKeys } from '~/components/common/pages/scheduledTasks/table/lib/config/tableKeys'
-import { schedulerRunStatus } from '~/components/common/pages/scheduledTasks/table/lib/config/schedulerStatus'
+import { UI_E_SchedulerRunStatus } from '~/components/common/pages/scheduledTasks/table/lib/models/enums'
+import { scheduledTaskTableItemsKeys } from '~/components/common/pages/scheduledTasks/table/old/lib/config/tableKeys'
 
 const getItems = (
   localization: UI_I_Localization
@@ -67,16 +67,20 @@ export const bodyItems = (
     const statusText =
       historyLastRun &&
       UI_E_RecentTaskStatus[
-        historyLastRun?.result?.toLowerCase() === 'success' ? 2 : -1
+        historyLastRun?.result?.toLowerCase() ===
+        UI_E_SchedulerRunStatus.SUCCESS
+          ? 2
+          : -1
       ]
 
     const statusData = {
       iconClassName:
         historyLastRun &&
         UI_E_IconNameByRecentTaskStatus[
-          historyLastRun?.result.toLowerCase() === schedulerRunStatus.SUCCESS
+          historyLastRun?.result.toLowerCase() ===
+          UI_E_SchedulerRunStatus.SUCCESS
             ? 2
-            : historyLastRun?.result === schedulerRunStatus.RUNNING
+            : historyLastRun?.result === UI_E_SchedulerRunStatus.RUNNING
             ? 1
             : 3
         ],
@@ -113,8 +117,8 @@ export const bodyItems = (
         id: task.rid,
         testId: `adapter-table-${key}-row-item`,
         data: {
-          sortValue: lastRun || 0
-        }
+          sortValue: lastRun || 0,
+        },
       },
       {
         key: 'icon',
@@ -129,8 +133,8 @@ export const bodyItems = (
         id: task.rid,
         testId: `adapter-table-${key}-row-item`,
         data: {
-          sortValue: task[scheduledTaskTableItemsKeys[4]]
-        }
+          sortValue: task[scheduledTaskTableItemsKeys[4]],
+        },
       },
     ])
   })

package/components/common/pages/scheduledTasks/table/{lib → old/lib}/config/tableKeys.ts

@@ -1,4 +1,4 @@
-import type { UI_T_ScheduledTaskTableItemsTuple } from '~/components/common/pages/scheduledTasks/table/lib/models/types'
+import type { UI_T_ScheduledTaskTableItemsTuple } from '~/components/common/pages/scheduledTasks/table/old/lib/models/types'
 
 export const scheduledTaskTableItemsKeys: UI_T_ScheduledTaskTableItemsTuple = [
   'name',

package/components/common/pages/shortcuts/Shortcuts.vue

@@ -2,7 +2,7 @@
   <div :class="['shortcut', isNewView && 'new']">
     <h1>{{ localization.mainNavigation.shortcuts }}</h1>
     <template v-for="item in props.shortcutsItems">
-      <div class="shortcut-category">
+      <div v-permission="item.permission" class="shortcut-category">
         <common-pages-shortcuts-category
           :title="item.title"
           :block-items="item.blockItems"

package/components/common/pages/shortcuts/category/CategoryNew.vue

@@ -7,6 +7,7 @@
       <common-pages-shortcuts-block
         v-for="(item, key) in props.blockItems"
         :key="key"
+        v-permission="item.permission"
         :item="item"
         :test-id="item.testId"
       />