bfg-common 1.5.674 → 1.5.676

package/components/common/layout/bottomPanel/alarms/Alarms.vue

@@ -1,76 +0,0 @@
-<template>
-  <component
-    :is="currentComponent"
-    :data-table="props.dataTable?.items || []"
-    :total-items="props.dataTable?.items.length || 1"
-    :total-pages="1"
-    :pagination="pagination"
-    :loading="props.isLoading"
-    @pagination="onUpdatePagination"
-    @sort="onSortTable"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
-import type {
-  UI_I_Alarm,
-  UI_I_AlarmPayload,
-} from '~/components/common/layout/bottomPanel/alarms/lib/models/interfaces'
-
-const props = defineProps<{
-  dataTable: UI_I_Alarm | null
-  isLoading: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'pause-global-refresh'): void
-  (event: 'get-alarms', value: UI_I_AlarmPayload): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./new/New.vue'))
-    : defineAsyncComponent(() => import('./old/Old.vue'))
-)
-
-const sort = ref<string | null>(null)
-const pagination = ref<UI_I_Pagination>({
-  page: 1,
-  pageSize: 35,
-})
-
-const getAlarms = (): void => {
-  pauseGlobalRefresh()
-
-  const payload: UI_I_AlarmPayload = {
-    ...pagination.value,
-    sortBy: sort.value || '',
-  }
-  emits('get-alarms', payload)
-}
-const pauseGlobalRefresh = (): void => {
-  emits('pause-global-refresh')
-}
-getAlarms()
-
-const onUpdatePagination = (event: UI_I_Pagination): void => {
-  pagination.value = event
-  getAlarms()
-}
-
-const onSortTable = (event: string): void => {
-  sort.value = event
-  getAlarms()
-}
-
-onUnmounted(() => {
-  pauseGlobalRefresh()
-})
-</script>
-
-<style scoped lang="scss"></style>

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

@@ -1,23 +0,0 @@
-import type {
-  API_UI_I_DataTable,
-  UI_I_Pagination,
-} from '~/lib/models/table/interfaces'
-
-export interface UI_I_AlarmPayload extends UI_I_Pagination {
-  sortBy: string
-}
-
-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 {}
-
-export interface UI_I_Alarm extends API_UI_I_DataTable<UI_I_AlarmItem> {}

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

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

@@ -1,193 +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_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

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

@@ -1,12 +0,0 @@
-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 {}