bfg-common 1.1.2 → 1.1.4

package/components/common/home/alertsTable/AlertsTable.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="most-alert">
+    <atoms-table-data-grid
+      v-model:selected-row="selectedRow"
+      v-model:page-size="pageSize"
+      v-model:page="page"
+      class="data-table"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="bodyItems.length"
+      :total-pages="1"
+      off-select-by-row
+      hide-page-size
+      show-page-info
+      server-off
+    >
+      <template #th="{ item }">
+        <atoms-the-icon
+          width="20px"
+          height="20px"
+          :name="item.iconName"
+          class="title-icon"
+        />
+        <span> {{ item.text }} </span>
+      </template>
+      <template #icon="{ item }">
+        <span :class="['datagrid-cell-icon', item.data.iconClassName]" />
+        <a
+          v-if="item.data.isLink"
+          href="javascript:void(0)"
+          class="text-ellipsis"
+          :title="item.text"
+          @click="selectNodeOfTree(item.data)"
+          >{{ item.text }}</a
+        >
+        <span v-else class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/models/types'
+import type { UI_I_Alert } from '~/components/common/home/models/interfaces'
+import type { UI_I_AlertData } from '~/components/common/home/alertsTable/models/interfaces'
+import * as table from '~/components/common/home/alertsTable/config/config'
+
+const props = defineProps<{
+  dataTable: UI_I_Alert[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-node-of-tree', value: UI_I_AlertData): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = ref<UI_T_SelectedRow>(null)
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+watch(
+  () => props.dataTable,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = table.bodyItems(newValue)
+  },
+  { deep: true, immediate: true }
+)
+const page = ref<number>(1)
+const pageSize = ref<number>(1)
+
+const selectNodeOfTree = (item: UI_I_AlertData): void => {
+  emits('select-node-of-tree', item)
+}
+</script>
+
+<style lang="scss" scoped>
+.most-alert {
+  margin: 0;
+  border: none;
+
+  :deep(.datagrid-outer-wrapper) {
+    padding: 0;
+
+    .datagrid {
+      margin: 0;
+      border: unset;
+      min-height: 200px;
+    }
+  }
+}
+</style>

package/components/common/home/alertsTable/config/config.ts

@@ -0,0 +1,61 @@
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_T_AlertColumnKeys } from '~/components/common/home/models/types'
+import type { UI_I_Alert } from '~/components/common/home/models/interfaces'
+import type { UI_I_AlertData } from '~/components/common/home/alertsTable/models/interfaces'
+import { UI_E_TabsByTypeEnum } from '~/components/common/home/alertsTable/models/enums'
+import { constructHeadItem } from '~/components/atoms/table/dataGrid/utils/constructDataTable'
+
+export const alertsTableKeys: UI_T_AlertColumnKeys[] = [
+  'item',
+  'alerts',
+  'warnings',
+]
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string, string][] => {
+  return [
+    [localization.item, true, '34%', alertsTableKeys[0], ''],
+    [localization.alerts, true, '33%', alertsTableKeys[1], 'error-outline'],
+    [localization.warnings, true, '33%', alertsTableKeys[2], 'warning-outline'],
+  ]
+}
+
+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 + 1}`
+    result.push(
+      constructHeadItem(col, item[0], item[3], true, item[2], item[4])
+    )
+  })
+  return result
+}
+
+export const bodyItems = (data: UI_I_Alert[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+  data.forEach((alert: UI_I_Alert, key) => {
+    const alertData: UI_I_AlertData = {
+      iconClassName: 'vsphere-icon-folder',
+      id: alert.id,
+      nav: UI_E_TabsByTypeEnum[alert.type],
+      type: alert.type,
+      isLink: true,
+    }
+    bodyItems.push([
+      {
+        key: 'icon',
+        text: alert[alertsTableKeys[0]].toString(),
+        data: alertData,
+        id: key,
+      },
+      { key: 'col2', text: alert[alertsTableKeys[1]].toString(), id: key },
+      { key: 'col3', text: alert[alertsTableKeys[2]].toString(), id: key },
+    ])
+  })
+  return bodyItems
+}

package/components/common/home/alertsTable/models/enums.ts

@@ -0,0 +1,11 @@
+export enum UI_E_TabsByTypeEnum {
+  'zone' = 'h',
+  'datacenter' = 'h',
+  'folder' = 'h',
+  'cluster' = 'h',
+  // для прокуратор
+  'host' = 'h',
+  'vm' = 'v',
+  'datastore' = 's',
+  'network' = 'n',
+}

package/components/common/home/alertsTable/models/interfaces.ts

@@ -0,0 +1,19 @@
+import type { UI_T_NavNodes } from '~/components/common/home/alertsTable/models/types'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/models/interfaces'
+import type { UI_T_InventoryAllTreeName } from '~/components/common/home/alertsTable/models/types'
+
+export interface UI_I_AlertData {
+  iconClassName: string
+  id: number
+  nav: UI_T_NavNodes
+  type: string
+  isLink: boolean
+}
+
+export interface UI_I_ShowNodePayload {
+  node: UI_I_TreeNode
+  treeName: UI_T_InventoryAllTreeName
+}
+export interface UI_I_SelectNodePayload extends UI_I_ShowNodePayload {
+  doSelect?: boolean
+}

package/components/common/home/alertsTable/models/types.ts

@@ -0,0 +1,18 @@
+export type UI_T_NavNodes =
+  | 'h'
+  // для прокуратор
+  | 'v'
+  | 's'
+  | 'n'
+
+export type UI_T_InventoryTreeName =
+  | 'hostsAndClustersTree'
+  // для прокуратор
+  | 'vmsTree'
+  | 'storagesTree'
+  | 'networksTree'
+
+export type UI_T_InventoryAllTreeName =
+  | UI_T_InventoryTreeName
+  | 'folderTree'
+  | 'computeResourceTree'

package/components/common/home/config/configResourceMeterBlock.ts

@@ -0,0 +1,25 @@
+import type {
+  UI_I_MeterBlockItem,
+  UI_I_ResourceMeter,
+} from '~/components/common/home/models/interfaces'
+
+export const optionsDefault: UI_I_ResourceMeter<UI_I_MeterBlockItem>[] = [
+  {
+    type: 'cpu',
+    free: { text: '0', value: 0 },
+    used: { text: '0', value: 0 },
+    capacity: { text: '0', value: 0 },
+  },
+  {
+    type: 'memory',
+    free: { text: '0', value: 0 },
+    used: { text: '0', value: 0 },
+    capacity: { text: '0', value: 0 },
+  },
+  {
+    type: 'storage',
+    free: { text: '0', value: 0 },
+    used: { text: '0', value: 0 },
+    capacity: { text: '0', value: 0 },
+  },
+]

package/components/common/home/models/interfaces.ts

@@ -0,0 +1,59 @@
+import type { UI_T_NodeType } from '~/components/common/home/models/types'
+
+export interface UI_I_ZoneList {
+  name: string
+  id: number
+}
+
+export interface UI_I_ResourceMeter<T> {
+  type: string
+  capacity?: T
+  free?: T
+  used?: T
+}
+
+export interface UI_I_MeterBlockItem {
+  value: number
+  text: string
+}
+
+export interface UI_I_Hosts {
+  connected: number
+  disconnected: number
+  maintenance: number
+}
+
+export interface UI_I_Vms {
+  powered_on: number
+  powered_off: number
+  suspended: number
+}
+
+export interface UI_I_Alert {
+  item: string
+  type: UI_T_NodeType
+  id: number
+  alerts: number
+  warnings: number
+}
+
+export interface UI_I_Service {
+  id: number
+  item: string
+  statusIcon: string
+  statusText: string
+  version: string
+}
+
+export interface UI_I_HomeInfo {
+  resource_meter: UI_I_ResourceMeter<UI_I_MeterBlockItem>[]
+  hosts: UI_I_Hosts
+  vms: UI_I_Vms
+  alerts: UI_I_Alert[]
+  services: UI_I_Service[]
+}
+
+export interface UI_I_Card {
+  text: string
+  value: number
+}

package/components/common/home/models/types.ts

@@ -0,0 +1,18 @@
+export type UI_T_NodeType =
+  | 'zone'
+  | 'folder'
+  | 'datacenter'
+  | 'cluster'
+  // для прокуратор
+  | 'host'
+  | 'vm'
+  | 'datastore'
+  | 'network'
+
+export type UI_T_AlertColumnKeys = 'item' | 'alerts' | 'warnings'
+
+export type UI_T_ServiceColumnKeys =
+  | 'item'
+  | 'statusText'
+  | 'statusIcon'
+  | 'version'

package/components/common/home/servicesTable/ServicesTable.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="most-alert">
+    <atoms-table-data-grid
+      v-model:selected-row="selectedRow"
+      v-model:page-size="pageSize"
+      v-model:page="page"
+      class="data-table"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="bodyItems.length"
+      :total-pages="1"
+      off-select-by-row
+      hide-page-size
+      show-page-info
+      server-off
+    >
+      <template #icon="{ item }">
+        <span :class="['datagrid-cell-icon', item.data.iconClassName]" />
+        <span class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/models/types'
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_I_Service } from '~/components/common/home/models/interfaces'
+import * as table from '~/components/common/home/servicesTable/config/config'
+
+const props = defineProps<{
+  dataTable: UI_I_Service[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = ref<UI_T_SelectedRow>(null)
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+watch(
+  () => props.dataTable,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = table.bodyItems(newValue)
+  },
+  { deep: true, immediate: true }
+)
+const page = ref<number>(1)
+const pageSize = ref<number>(1)
+</script>
+
+<style lang="scss" scoped>
+.most-alert {
+  margin: 0;
+  border: none;
+
+  :deep(.datagrid-outer-wrapper) {
+    padding: 0;
+
+    .datagrid {
+      margin: 0;
+      border: unset;
+      min-height: 200px;
+    }
+  }
+}
+</style>

package/components/common/home/servicesTable/config/config.ts

@@ -0,0 +1,62 @@
+import type {
+  UI_I_BodyItem,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import type { UI_I_Localization } from '~/models/interfaces'
+import { constructHeadItem } from '~/components/atoms/table/dataGrid/utils/constructDataTable'
+import type { UI_T_ServiceColumnKeys } from '~/components/common/home/models/types'
+import type { UI_I_Service } from '~/components/common/home/models/interfaces'
+
+export const servicesTableKeys: UI_T_ServiceColumnKeys[] = [
+  'item',
+  'statusText',
+  'statusIcon',
+  'version',
+]
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.item, true, '34%', servicesTableKeys[0]],
+    [localization.status, true, '33%', servicesTableKeys[1]],
+    [localization.version, true, '33%', servicesTableKeys[2]],
+  ]
+}
+
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = i === 1 ? 'icon' : `col${i + 1}`
+    result.push(constructHeadItem(col, item[0], item[3], true, item[2]))
+  })
+  return result
+}
+
+export const bodyItems = (data: UI_I_Service[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+  data.forEach((service: UI_I_Service, key) => {
+    const statusData = {
+      iconClassName: `vsphere-icon-status-${service.statusIcon}`,
+    }
+    bodyItems.push([
+      {
+        key: 'col1',
+        text: service[servicesTableKeys[0]].toString(),
+        id: key,
+      },
+      {
+        key: 'icon',
+        text: service[servicesTableKeys[1]].toString(),
+        data: statusData,
+        id: key,
+      },
+      {
+        key: 'col3',
+        text: service[servicesTableKeys[2]].toString(),
+        id: key,
+      },
+    ])
+  })
+  return bodyItems
+}