bfg-common 1.0.0

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/Object.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="vertical-flex-container chart-option-objects-split">
+    <span class="chart-options-grid-title">
+      {{ localization.selectObjectForChart }}:
+    </span>
+    <div class="flex-to-absolute-positioning-container">
+      <div class="flex-to-absolute-positioning-container-inner">
+        <atoms-table-data-grid
+          v-model:selected-row="selectedRow"
+          v-model:column-keys="columnItems"
+          v-model:page-size="pagination.pageSize"
+          v-model:page="pagination.page"
+          type="checkbox"
+          class="data-table"
+          :head-items="headItems"
+          :body-items="bodyItems"
+          :total-items="bodyItems.length"
+          :total-pages="1"
+          hide-footer
+          server-off
+        >
+        </atoms-table-data-grid>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_AdvancedTargetObject } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+import * as table from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/config/objectTable'
+import { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/interfaces'
+
+const props = defineProps<{
+  selected: UI_I_AdvancedTargetObject[][]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = ref<number[]>([])
+const pagination = ref<any>({
+  page: 1,
+  pageSize: 35,
+})
+
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+const columnItems = computed<UI_I_ColumnKey[]>(() =>
+  table.columnKeys(localization.value)
+)
+
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+
+watch(
+  () => props.selected,
+  (val) => {
+    const items: UI_I_ObjectItem[] = []
+    if (!val.length) {
+      bodyItems.value = table.bodyItems(items)
+      return
+    }
+
+    val.forEach((itemArr) => {
+      itemArr.forEach((item) =>
+        items.push({
+          id: item.id,
+          target_object: item.target_object,
+        })
+      )
+    })
+
+    bodyItems.value = table.bodyItems(items)
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+.chart-option-objects-split {
+  flex: 1;
+
+  .chart-options-grid-title {
+    display: block;
+    margin-bottom: -20px;
+  }
+  .flex-to-absolute-positioning-container {
+    height: 100%;
+    .flex-to-absolute-positioning-container-inner {
+      height: inherit;
+
+      .data-table {
+        height: inherit;
+
+        :deep(.datagrid-outer-wrapper) {
+          height: inherit;
+        }
+      }
+    }
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/config/objectTable.ts

@@ -0,0 +1,54 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import {
+  constructColumnKey,
+  constructHeadItem,
+} from '~/components/atoms/table/dataGrid/utils/constructDataTable'
+import { UI_T_ObjectColumnKey } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/types'
+import { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/interfaces'
+
+export const objectTableKey: UI_T_ObjectColumnKey[] = ['target_object']
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [[localization.targetObjects, true, '140px', objectTableKey[0]]]
+}
+
+export const columnKeys = (localization: UI_I_Localization): UI_I_ColumnKey[] => {
+  const result: UI_I_ColumnKey[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = `col${i + 1}`
+    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 = `col${i + 1}`
+    result.push(constructHeadItem(col, item[0], item[3], false, item[2]))
+  })
+  return result
+}
+
+export const bodyItems = (data: UI_I_ObjectItem[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+
+  data.forEach((object: UI_I_ObjectItem, key) => {
+    bodyItems.push([
+      {
+        key: 'col1',
+        text: object[objectTableKey[0]],
+        id: key,
+      },
+    ])
+  })
+  return bodyItems
+}

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/interfaces.ts

@@ -0,0 +1,4 @@
+export interface UI_I_ObjectItem {
+  id: number
+  target_object: string
+}

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_ObjectColumnKey = 'target_object'

package/components/common/monitor/advanced/tools/chartOptionsModal/metrics/Metrics.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="chart-option-groups-container">
+    <span>{{ localization.chartMetrics }}</span>
+    <atoms-tabs-vertical-tabs v-model="selectedMetric" :items="metricsItems" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_VerticalTabs } from '~/components/atoms/tabs/models/interfaces'
+import { metricsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/metrics/config/optionsMetrics'
+import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
+  metricsFunc(localization.value, props.type)
+)
+const selectedMetric = ref<string>(metricsItems.value[0].value)
+</script>
+
+<style scoped lang="scss">
+.chart-option-groups-container {
+  margin-top: 10px;
+  flex-basis: 20%;
+  min-width: 20%;
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/metrics/config/optionsMetrics.ts

@@ -0,0 +1,104 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_VerticalTabs } from '~/components/atoms/tabs/models/interfaces'
+import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+import { UI_I_OptionData } from '~/components/common/monitor/advanced/models/interfaces'
+
+export const metricsFunc = (
+  localization: UI_I_Localization,
+  type: UI_T_AdvancedType
+): UI_I_VerticalTabs[] => {
+  const metrics: UI_I_OptionData = {
+    host: [
+      {
+        text: localization.cpu,
+        value: 'cpu',
+      },
+      {
+        text: currentRegister(localization.clusterServices, 'first'),
+        value: 'cluster_services',
+      },
+      {
+        text: localization.datastore,
+        value: 'datastore',
+      },
+      {
+        text: localization.disk,
+        value: 'disk',
+      },
+      {
+        text: localization.memory,
+        value: 'memory',
+      },
+      {
+        text: localization.network,
+        value: 'network',
+      },
+      {
+        text: localization.power,
+        value: 'power',
+      },
+      {
+        text: currentRegister(localization.storageAdapter, 'first'),
+        value: 'storage_adapter',
+      },
+      {
+        text: localization.storagePath,
+        value: 'storage_path',
+      },
+      {
+        text: localization.system,
+        value: 'system',
+      },
+      {
+        text: currentRegister(localization.procuratorReplication, 'last'),
+        value: 'v_sphere_replication',
+      },
+    ],
+    vm: [
+      {
+        text: localization.cpu,
+        value: 'cpu',
+      },
+      {
+        text: localization.datastore,
+        value: 'datastore',
+      },
+      {
+        text: localization.disk,
+        value: 'disk',
+      },
+      {
+        text: localization.memory,
+        value: 'memory',
+      },
+      {
+        text: localization.network,
+        value: 'network',
+      },
+      {
+        text: localization.power,
+        value: 'power',
+      },
+      {
+        text: localization.system,
+        value: 'system',
+      },
+      { text: localization.virtualDisk, value: 'virtualDisk' },
+    ],
+  }
+
+  return metrics[type]
+}
+
+const currentRegister = (text: string, type: string): string => {
+  let result = ''
+  const { $text } = useNuxtApp()
+
+  if (type === 'first') {
+    result = $text.toCapitalize(text)
+  } else if (type === 'last') {
+    result = $text.toCapitalizeByIndex(text, [1])
+  }
+
+  return result
+}

package/components/common/monitor/advanced/tools/config/advancedToolbar.ts

@@ -0,0 +1,73 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { UI_I_DropMenu } from '~/components/common/monitor/advanced/tools/models/interfaces'
+import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+import { UI_I_OptionData } from '~/components/common/monitor/advanced/models/interfaces'
+
+export const periodFunc = (localization: UI_I_Localization): UI_I_OptionItem[] => [
+  {
+    text: localization.realTime,
+    value: 'real_time',
+  },
+  {
+    text: localization.lastDay,
+    value: 'last_day',
+  },
+  {
+    text: localization.lastWeek,
+    value: 'last_week',
+  },
+  {
+    text: localization.lastMonth,
+    value: 'last_month',
+  },
+  // {
+  //   text: localization.lastYear,
+  //   value: 'last_year',
+  // },
+]
+
+export const viewFunc = (
+  localization: UI_I_Localization,
+  type: UI_T_AdvancedType
+): UI_I_OptionItem[] => {
+  const viewData: UI_I_OptionData = {
+    host: [
+      { text: localization.cpuUsageInPercent, value: 'cpuUsageInPercent' },
+      { text: localization.datastore, value: 'datastore' },
+      { text: localization.memory, value: 'memory' },
+      { text: localization.disk, value: 'disk' },
+      { text: localization.network, value: 'network' },
+      { text: localization.power, value: 'power' },
+      { text: localization.storageAdapters, value: 'storageAdapters' },
+      { text: localization.storagePath, value: 'storagePath' },
+      { text: localization.system, value: 'system' },
+      {
+        text: localization.procuratorReplication,
+        value: 'procuratorReplication',
+      },
+    ],
+    vm: [
+      { text: localization.cpuUsageInPercent, value: 'cpuUsageInPercent' },
+      { text: localization.cpuUsageInMhz, value: 'cpuUsageInMhz' },
+      { text: localization.cpuReady, value: 'cpuReady' },
+      { text: localization.datastore, value: 'datastore' },
+      { text: localization.disk, value: 'disk' },
+      { text: localization.memory, value: 'memory' },
+      { text: localization.network, value: 'network' },
+      { text: localization.power, value: 'power' },
+      { text: localization.virtualDisk, value: 'virtualDisk' },
+    ],
+  }
+
+  return viewData[type]
+}
+
+export const exportFunc = (
+  localization: UI_I_Localization
+): UI_I_DropMenu<string>[] => [
+  { text: localization.toPng + '...', action: 'png' },
+  { text: localization.toJpeg + '...', action: 'jpeg' },
+  { text: localization.toSvg + '...', action: 'svg' },
+  { text: localization.toCsv + '...', action: 'csv' },
+]

package/components/common/monitor/advanced/tools/models/interfaces.ts

@@ -0,0 +1,4 @@
+export interface UI_I_DropMenu<T> {
+  text: string
+  action: T
+}

package/components/common/monitor/config/getValidDateByOption.ts

@@ -0,0 +1,14 @@
+import { subDays, subHours, subMonths, subWeeks, subYears } from 'date-fns'
+
+export const getValidDateByOptionFunc = (type: string): number[] => {
+  const newDate = new Date()
+  let startTime = 0
+
+  if (type === 'real_time') startTime = subHours(newDate, 1).getTime()
+  else if (type === 'last_day') startTime = subDays(newDate, 1).getTime()
+  else if (type === 'last_week') startTime = subWeeks(newDate, 1).getTime()
+  else if (type === 'last_month') startTime = subMonths(newDate, 1).getTime()
+  else if (type === 'last_year') startTime = subYears(newDate, 1).getTime()
+
+  return [startTime, newDate.getTime()]
+}

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

@@ -0,0 +1,16 @@
+import { I_SeriesLine } from 'bfg-nuxt-3-graph/graph/models/interfaces'
+import { UI_T_OverviewRequestType } from '~/components/common/monitor/overview/filters/models/types'
+
+export interface UI_I_GraphDataSettingItem {
+  title: string
+  loader: boolean
+  data: I_SeriesLine | null
+}
+
+export interface UI_I_MonitorGraphPayload {
+  period: number[]
+  view: string
+  id?: string
+  requestType?: UI_T_OverviewRequestType
+  storageId?: string
+}