bfg-common 1.5.673 → 1.5.674

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

@@ -0,0 +1,212 @@
+<template>
+  <ui-data-table
+    :data="data"
+    :options="options"
+    :loading="props.loading"
+    test-id="bottom-alarms-table"
+    classes="alarms-table"
+    @sort="onSorting"
+  >
+    <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>
+    </template>
+
+    <template #default-actions="{ item }">
+      <div class="actions">
+        <ui-button
+          :test-id="`resent-task-item-${item.data.id}-action`"
+          variant="text"
+          is-without-height
+          is-without-sizes
+          @click.stop="onShowActions(item.data.id)"
+        >
+          <ui-icon
+            :class="['action-icon', { active: actionsIsShow[item.data.id] }]"
+            name="vertical-dotes"
+            width="24"
+          />
+        </ui-button>
+        <ui-dropdown
+          :show="actionsIsShow[item.data.id]"
+          :test-id="`resent-task-item-action-${item.data.id}`"
+          :items="actions"
+          :elem-id="`resent-task-item-${item.data.id}-action`"
+          width="max-content"
+          @select="onSelectAction(item.data.target, $event, item.data.id)"
+          @hide="onHideActionsDropdown(item.data.id)"
+          @click.stop
+        >
+          <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_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type { UI_I_DataTargetForTable } from '~/components/common/layout/bottomPanel/recentTasks/lib/models/interfaces'
+import type { UI_I_AlarmItem } from '~/components/common/layout/bottomPanel/alarms/new/lib/models/interfaces'
+import {
+  getAlarmRowQuickActionsFunc,
+  options,
+  getHeaderDataFunc,
+  getBodyDataFunc,
+} from '~/components/common/layout/bottomPanel/alarms/new/lib/config/config'
+
+const props = defineProps<{
+  dataTable: UI_I_AlarmItem[]
+  loading: boolean
+  pagination: UI_I_Pagination
+}>()
+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: 'bottom-alarms-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,
+  (newValue) => {
+    if (!newValue?.length) return
+
+    resentTaskBodyItems.value = getBodyDataFunc(newValue)
+  },
+  { deep: true, immediate: true }
+)
+const onSorting = (value: string): void => {
+  emits('sort', value)
+}
+
+const actions = computed<UI_I_Dropdown[]>(() =>
+  getAlarmRowQuickActionsFunc(localization.value)
+)
+const onShowActions = (id: number): void => {
+  actionsIsShow.value[id] = true
+}
+const onSelectAction = (
+  _data: UI_I_DataTargetForTable,
+  action: string,
+  actionId: number
+): void => {
+  switch (action) {
+    case 'view-object':
+      // onSelectNodeOfTree(data)
+      break
+    case 'alarm-details':
+      break
+    case 'event-details':
+      break
+  }
+  onHideActionsDropdown(actionId)
+}
+const onHideActionsDropdown = (id: number): void => {
+  actionsIsShow.value[id] = false
+}
+
+// const onSelectNodeOfTree = (data: UI_I_DataTargetForTable): void => {
+//   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 })
+// }
+</script>
+
+<style scoped lang="scss">
+.alarms-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: 4px;
+  }
+  .icon {
+    margin-right: 4px;
+  }
+
+  .action-icon {
+    width: 16px;
+    height: 16px;
+    fill: var(--summary-dropdown-notification-item-action-color);
+
+    &.active {
+      fill: var(--summary-dropdown-notification-item-hover-action-color);
+    }
+  }
+
+  .action-text {
+    margin-left: 8px;
+  }
+}
+</style>

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

@@ -0,0 +1,193 @@
+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_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_AlarmItem } from '~/components/common/layout/bottomPanel/alarms/new/lib/models/interfaces'
+import {
+  UI_E_RTaskChipColor,
+  UI_E_RTaskStatusIcon,
+} from '~/components/common/pages/tasks/table/lib/models/enums'
+import { UI_E_TaskTypeToCorrectType } from '~/components/common/layout/bottomPanel/alarms/new/lib/models/enums'
+import { UI_E_NodeIconsByState } from '~/lib/models/enums'
+
+export const getHeaderDataFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 0,
+    colName: 'object',
+    text: localization.common.object,
+    isSortable: true,
+    sort: 'asc',
+    sortColumn: true,
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 1,
+    colName: 'status',
+    text: localization.common.status,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 2,
+    colName: 'name',
+    text: localization.common.name,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 3,
+    colName: 'triggered',
+    text: localization.layout.triggered,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 4,
+    colName: 'acknowledged',
+    text: localization.layout.acknowledged,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 5,
+    colName: 'acknowledgedBy',
+    text: localization.layout.acknowledgedBy,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 6,
+    colName: 'triggeringEvent',
+    text: localization.layout.triggeringEvent,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 7,
+    colName: 'default-actions',
+    text: '',
+    show: true,
+  },
+]
+export const getAlarmRowQuickActionsFunc = (
+  localization: UI_I_Localization
+): UI_I_Dropdown[] => [
+  {
+    value: 'view-object',
+    text: localization.common.viewObject,
+    iconName: 'hide',
+    selected: false,
+  },
+  {
+    value: 'alarm-details',
+    text: localization.common.alarmDetails,
+    iconName: 'icon-policies-profiles',
+    selected: false,
+  },
+  {
+    value: 'event-details',
+    text: localization.common.eventDetails,
+    iconName: 'icon-policies-profiles',
+    selected: false,
+  },
+]
+
+export const options: UI_I_DataTableOptions = {
+  perPageOptions: [
+    { text: '10', value: 10 },
+    { 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_AlarmItem[]
+): UI_I_DataTableBody[] => {
+  return bodyData.map((alarm: UI_I_AlarmItem, index: number) => {
+    const correctType =
+      UI_E_TaskTypeToCorrectType[
+        alarm?.targetType as keyof typeof UI_E_TaskTypeToCorrectType
+      ]
+    const iconClassName = UI_E_NodeIconsByState[`${correctType}_Normal`]
+
+    const objectData = {
+      id: alarm.id,
+      icon: iconClassName,
+    }
+
+    const statusData = {
+      icon: UI_E_RTaskStatusIcon[alarm.statusIcon],
+      chipColor: UI_E_RTaskChipColor[alarm.status],
+      testId: `${alarm.name}-progress`,
+    }
+
+    return {
+      row: index,
+      collapse: false,
+      isHiddenCollapse: false,
+      collapseToggle: false,
+      data: [
+        {
+          key: 'icon',
+          col: 0,
+          text: alarm.object,
+          data: objectData,
+        },
+        {
+          key: 'status',
+          col: 1,
+          text: alarm.status,
+          data: statusData,
+        },
+        { key: 'icon', col: 2, text: alarm.name },
+        { col: 3, text: alarm.triggered },
+        { col: 4, text: alarm.acknowledged },
+        { col: 5, text: alarm.acknowledged_by },
+        { key: 'icon', col: 6, text: alarm.triggering_event },
+        {
+          key: 'default-actions',
+          col: 7,
+          text: '',
+          data: { id: index },
+        },
+      ],
+    }
+  })
+}

package/components/common/layout/bottomPanel/alarms/new/lib/models/enums.ts

@@ -0,0 +1,10 @@
+export enum UI_E_TaskTypeToCorrectType {
+  'Zones' = 'zone',
+  'Datacenters' = 'datacenter',
+  'Clusters' = 'cluster',
+  'Hosts' = 'host',
+  'VirtualMachines' = 'vm',
+  'Datastores' = 'datastore',
+  'Networks' = 'network',
+}
+

package/components/common/layout/bottomPanel/alarms/new/lib/models/interfaces.ts

@@ -0,0 +1,12 @@
+export interface UI_API_I_AlarmItem {
+  id: number
+  object: string
+  status: string
+  name: string
+  triggered: string
+  acknowledged: string
+  acknowledged_by: string
+  triggering_event: string
+  statusIcon: string
+}
+export interface UI_I_AlarmItem extends UI_API_I_AlarmItem {}

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

@@ -0,0 +1,191 @@
+<template>
+  <div class="data-table-view">
+    <atoms-table-data-grid
+      v-model:selected-row="selectedRow"
+      v-model:column-keys="columnKeys"
+      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"
+      :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.data)"
+          >{{ item.text }}</a
+        >
+        <span v-else :title="item.text" class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+
+      <template #action>
+        <div class="flex-space-between flex-align-center">
+          <div class="flex-align-center"></div>
+        </div>
+      </template>
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+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_DataTargetForTable } from '~/components/common/layout/bottomPanel/recentTasks/lib/models/interfaces'
+import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
+import type { UI_I_RecentTaskItem } from '~/lib/models/store/tasks/interfaces'
+import type { UI_T_LangValue } from '~/lib/models/types'
+import type { UI_T_NodeType } from '~/components/common/pages/home/lib/models/types'
+import { UI_E_TaskTypeToCorrectType } from '~/components/common/layout/bottomPanel/alarms/new/lib/models/enums'
+import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/itemsPerPage'
+import * as alarmTables from '~/components/common/layout/bottomPanel/alarms/old/lib/config/alarmTables'
+
+const props = defineProps<{
+  dataTable: UI_I_RecentTaskItem<UI_T_NodeType>[]
+  totalItems: number
+  totalPages: number
+  pagination: UI_I_Pagination
+  loading: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'pagination', value: UI_I_Pagination | null): void
+  (event: 'sort', value: string): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = ref<UI_T_SelectedRow>([])
+
+const onSorting = (event: [number, boolean]): void => {
+  const [column, status] = event
+  const direction = status ? 'desc' : 'asc'
+
+  const sort = `${column}.${direction}`
+
+  emits('sort', sort)
+}
+
+const pagination = ref<UI_I_Pagination | null>(null)
+watch(
+  () => props.pagination,
+  (newValue) => {
+    pagination.value = newValue
+  },
+  { immediate: true }
+)
+watch(
+  pagination,
+  (newValue) => {
+    emits('pagination', newValue)
+  },
+  { deep: true, immediate: true }
+)
+
+const columnKeys = ref<UI_I_ColumnKey[]>(
+  alarmTables.columnKeys(localization.value)
+)
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  alarmTables.headItems(localization.value)
+)
+const timeFormat = computed<UI_T_TimeValue>(
+  () => $store.getters['main/getTimeFormat']
+)
+
+const interfaceLang = computed<UI_T_LangValue>(
+  () => $store.getters['main/getInterfaceLang']
+)
+
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+watch(
+  [
+    (): UI_I_RecentTaskItem<UI_T_NodeType>[] => props.dataTable,
+    timeFormat,
+    interfaceLang,
+  ],
+  ([newValue1]) => {
+    if (!newValue1?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = alarmTables.bodyItems(newValue1)
+  },
+  { deep: true, immediate: true }
+)
+
+const onSelectNodeOfTree = (item: UI_I_DataTargetForTable): void => {
+  const id = item.id
+  const type = UI_E_TaskTypeToCorrectType[item.type]
+  let nav = item.nav
+  switch (type) {
+    case 'zone':
+    case 'datacenter':
+    case 'folder':
+      nav = useRoute().params.nav || nav
+      break
+  }
+
+  const params = `type=${type};nav=${nav};id=${id}`
+  const path = `/inventory/${params}`
+
+  // Переход в inventory
+  navigateTo({
+    path,
+  })
+}
+</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;
+  }
+}
+</style>

package/components/common/layout/bottomPanel/alarms/old/lib/config/alarmTables.ts

@@ -0,0 +1,89 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_AlarmItem } from '~/components/common/layout/bottomPanel/alarms/new/lib/models/interfaces'
+import {
+  constructColumnKey,
+  constructHeadItem,
+} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+import { alarmsTableKeys } from '~/components/common/layout/bottomPanel/alarms/old/lib/config/tableKeys'
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.common.object, true, '96px', alarmsTableKeys[0]],
+    [localization.common.status, true, '180px', alarmsTableKeys[1]],
+    [localization.common.name, true, '250px', alarmsTableKeys[2]],
+    [localization.layout.triggered, true, '180px', alarmsTableKeys[3]],
+    [localization.layout.acknowledged, true, '180px', alarmsTableKeys[4]],
+    [localization.layout.acknowledgedBy, true, '180px', alarmsTableKeys[5]],
+    [localization.layout.triggeringEvent, true, '180px', alarmsTableKeys[6]],
+  ]
+}
+
+export const columnKeys = (
+  localization: UI_I_Localization
+): UI_I_ColumnKey[] => {
+  const result: UI_I_ColumnKey[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = i === 0 ? '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 === 0 ? 'icon' : `col${i}`
+    result.push(constructHeadItem(col, item[0], item[3], true, item[2]))
+  })
+  return result
+}
+
+export const bodyItems = (data: UI_I_AlarmItem[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+  data.forEach((alarm: UI_I_AlarmItem, key) => {
+    const objectData = {
+      isLink: true,
+    }
+    const data = {
+      iconClassName: 'vsphere-icon-status-warning',
+    }
+    const nameData = {
+      isLink: true,
+    }
+    const triggeringData = {
+      isLink: true,
+    }
+    bodyItems.push([
+      {
+        key: 'icon',
+        text: alarm[alarmsTableKeys[0]],
+        data: objectData,
+        id: key,
+      },
+      { key: 'col1', text: alarm[alarmsTableKeys[1]], data, id: key },
+      {
+        key: 'col2',
+        text: alarm[alarmsTableKeys[2]],
+        data: nameData,
+        id: key,
+      },
+      { key: 'col3', text: alarm[alarmsTableKeys[3]], id: key },
+      { key: 'col4', text: alarm[alarmsTableKeys[4]], id: key },
+      { key: 'col5', text: alarm[alarmsTableKeys[5]], id: key },
+      {
+        key: 'col6',
+        text: alarm[alarmsTableKeys[6]],
+        data: triggeringData,
+        id: key,
+      },
+    ])
+  })
+  return bodyItems
+}