bfg-common 1.1.65 → 1.1.67

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/Counters.vue

@@ -7,18 +7,30 @@
       @select-row="emits('select-row', $event)"
     />
     <common-monitor-advanced-tools-chart-options-modal-counters-timespan
+      :type="props.type"
+      :chart="props.chart"
       :language="props.language"
-      :selected="selectedOptions"
       :selected-chart-type="props.selectedChartType"
       :selected-timespan-type="props.selectedTimespanType"
       :units-count="props.unitsCount"
       :period-type="props.periodType"
       :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :total-cores="props.totalCores"
+      :host-id="props.hostId"
       @update-chart-type="emits('update-chart-type', $event)"
       @update-custom-time="emits('update-custom-time', $event)"
       @update-timespan-type="emits('update-timespan-type', $event)"
       @update-unit-count="emits('update-unit-count', $event)"
       @update-period-type="emits('update-period-type', $event)"
+      @update-custom-date-from="emits('update-custom-date-from', $event)"
+      @update-custom-date-to="emits('update-custom-date-to', $event)"
+      @update-custom-time-from="emits('update-custom-time-from', $event)"
+      @update-custom-time-to="emits('update-custom-time-to', $event)"
+      @select-objects="emits('select-objects', $event)"
     />
   </div>
 </template>
@@ -29,10 +41,7 @@ import {
   T_ChartVm,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
-import {
-  UI_I_AdvancedCounterItem,
-  UI_I_AdvancedTargetObject,
-} from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
 
 const props = defineProps<{
   language: string
@@ -44,6 +53,12 @@ const props = defineProps<{
   unitsCount: number
   periodType: string
   selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
 }>()
 
 const emits = defineEmits<{
@@ -53,9 +68,12 @@ const emits = defineEmits<{
   (event: 'update-timespan-type', value: string): void
   (event: 'update-unit-count', value: number): void
   (event: 'update-period-type', value: string): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+  (event: 'select-objects', value: string): void
 }>()
-
-const selectedOptions = ref<UI_I_AdvancedTargetObject[][]>([])
 </script>
 
 <style scoped lang="scss">

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/config/utils.ts

@@ -631,3 +631,58 @@ export const countersItemsFunc = (
 
   return result
 }
+
+export const getDefaultMetricName = (type: string, view: string): string => {
+  if (type === 'datacenter') return 'cpu'
+  else if (type === 'host') {
+    if (view === 'cpuUsageInPercent') return 'cpu'
+    return view
+  }
+
+  return ''
+}
+
+export const getDefaultCounters = (
+  type: string,
+  view: string
+): UI_I_AdvancedCounterItem[] => {
+  switch (type) {
+    case 'datacenter':
+      return [hostItemsFunc('cpu', {})[0]]
+    case 'host':
+      switch (view) {
+        case 'cpuUsageInPercent':
+          return hostItemsFunc('cpu', {}).splice(0, 2)
+        case 'disk':
+          const allItems = hostItemsFunc('disk', {})
+          return allItems.filter((_, key) => [0, 14].includes(key))
+        case 'memory':
+          return hostItemsFunc('memory', {})
+        case 'network':
+          return hostItemsFunc('network', {}).splice(1, 3)
+      }
+      break
+    case 'vm':
+      switch (view) {
+        case 'cpuUsageInPercent':
+          return []
+      }
+  }
+
+  // if (type === 'datacenter') {
+  //   return [hostItemsFunc('cpu', {})[0]]
+  // } else if (type === 'host') {
+  //   if (view === 'cpuUsageInPercent')
+  //     return hostItemsFunc('cpu', {}).splice(0, 2)
+  //   else if (view === 'disk') {
+  //     const allItems = hostItemsFunc('disk', {})
+  //     return allItems.filter((_, key) => [0, 14].includes(key))
+  //   } else if (view === 'memory') return hostItemsFunc('memory', {})
+  //   else if (view === 'network')
+  //     return hostItemsFunc('network', {}).splice(1, 3)
+  // } else if (type === 'vm') {
+  //   if (view === 'cpuUsageInPercent') return []
+  // }
+
+  return []
+}

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

@@ -1,5 +1,5 @@
 export interface UI_I_AdvancedTargetObject {
-  id: number
+  id: string
   target_object: string
 }
 

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

@@ -7,29 +7,52 @@
       :units-count="props.unitsCount"
       :period-type="props.periodType"
       :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
       @update-chart-type="emits('update-chart-type', $event)"
       @update-custom-time="emits('update-custom-time', $event)"
       @update-timespan-type="emits('update-timespan-type', $event)"
       @update-unit-count="emits('update-unit-count', $event)"
       @update-period-type="emits('update-period-type', $event)"
+      @update-custom-date-from="emits('update-custom-date-from', $event)"
+      @update-custom-date-to="emits('update-custom-date-to', $event)"
+      @update-custom-time-from="emits('update-custom-time-from', $event)"
+      @update-custom-time-to="emits('update-custom-time-to', $event)"
     />
     <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object
-      :selected="props.selected"
+      :type="props.type"
+      :chart="props.chart"
+      :total-cores="props.totalCores"
+      :host-id="props.hostId"
+      @select-objects="emits('select-objects', $event)"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { UI_I_AdvancedTargetObject } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+import {
+  T_ChartHost,
+  T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 
 const props = defineProps<{
-  selected: UI_I_AdvancedTargetObject[][]
+  type: UI_T_AdvancedType
+  chart: T_ChartHost | T_ChartVm
   language: string
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number
   periodType: string
   selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
 }>()
 
 const emits = defineEmits<{
@@ -38,6 +61,12 @@ const emits = defineEmits<{
   (event: 'update-timespan-type', value: string): void
   (event: 'update-unit-count', value: number): void
   (event: 'update-period-type', value: string): void
+  (event: 'update-period-type', value: string): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+  (event: 'select-objects', value: string): void
 }>()
 </script>
 

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/form/Form.vue

@@ -111,7 +111,7 @@
                     >
                       <input
                         id="current-date-from"
-                        v-model.lazy="currentDateFrom"
+                        v-model.lazy="localCurrentDateFrom"
                         type="text"
                         class="chart-option-setting-row custom-time-input first-from"
                       />
@@ -221,6 +221,10 @@ const props = defineProps<{
   unitsCount: number
   periodType: string
   selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
 }>()
 
 const emits = defineEmits<{
@@ -229,6 +233,10 @@ const emits = defineEmits<{
   (event: 'update-timespan-type', value: string): void
   (event: 'update-unit-count', value: number): void
   (event: 'update-period-type', value: string): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
 }>()
 
 const { $formattedDate, $isDate, $getTimeFormat, $getUnixByDate } = useNuxtApp()
@@ -348,26 +356,28 @@ const yesterday = new Date().setDate(new Date().getDate() - 1)
 const dateFrom = ref<number>(yesterday)
 const dateTo = ref<number>(new Date().getTime())
 
-const currentDateFrom = ref<string>('')
+const localCurrentDateFrom = ref<string>('')
 const currentDateTo = ref<string>('')
 const currentTimeFrom = ref<string>('')
 const currentTimeTo = ref<string>('')
 
 const getCurrentTime = (): void => {
-  currentDateFrom.value = $formattedDate(yesterday, '')
-  currentDateTo.value = $formattedDate(new Date(), '')
+  localCurrentDateFrom.value =
+    props.customDateFrom || $formattedDate(yesterday, '')
+  currentDateTo.value = props.customDateTo || $formattedDate(new Date(), '')
 
   const currentTime = format(new Date(), $getTimeFormat(true))
-  currentTimeFrom.value = currentTime
-  currentTimeTo.value = currentTime
+  currentTimeFrom.value = props.customTimeFrom || currentTime
+  currentTimeTo.value = props.customTimeTo || currentTime
 }
 
 const onUpdateDateFrom = (val: number): void => {
   if (!val) return
 
-  currentDateFrom.value = $formattedDate(new Date(val), '')
+  localCurrentDateFrom.value = $formattedDate(new Date(val), '')
 }
-watch(currentDateFrom, (newValue) => {
+watch(localCurrentDateFrom, (newValue) => {
+  emits('update-custom-date-from', newValue)
   if (!newValue) return
 
   if ($isDate(newValue)) dateFrom.value = $getUnixByDate(newValue)
@@ -379,10 +389,17 @@ const onUpdateDateTo = (val: number): void => {
   currentDateTo.value = $formattedDate(new Date(val), '')
 }
 watch(currentDateTo, (newValue) => {
+  emits('update-custom-date-to', newValue)
   if (!newValue) return
 
   if ($isDate(newValue)) dateTo.value = $getUnixByDate(newValue)
 })
+watch(currentTimeFrom, (newValue) => {
+  emits('update-custom-time-from', newValue)
+})
+watch(currentTimeTo, (newValue) => {
+  emits('update-custom-time-to', newValue)
+})
 
 onMounted(() => {
   getCurrentTime()

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

@@ -34,10 +34,21 @@ import {
 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'
+import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+import {
+  T_ChartHost,
+  T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 
 const props = defineProps<{
-  selected: UI_I_AdvancedTargetObject[][]
+  type: UI_T_AdvancedType
+  chart: T_ChartHost | T_ChartVm
+  totalCores: number
+  hostId: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-objects', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -57,28 +68,38 @@ const columnItems = computed<UI_I_ColumnKey[]>(() =>
 
 const bodyItems = ref<UI_I_BodyItem[][]>([])
 
+const items: UI_I_AdvancedTargetObject[] = []
 watch(
-  () => props.selected,
-  (val) => {
-    const items: UI_I_ObjectItem[] = []
-    if (!val.length) {
-      bodyItems.value = table.bodyItems(items)
-      return
-    }
-
-    val.forEach((itemArr) => {
-      itemArr.forEach((item) =>
+  () => [props.type, props.chart, props.totalCores, props.hostId],
+  (newValue) => {
+    if (newValue[0] === 'host' && newValue[1] === 'cpu') {
+      items.push({
+        id: 'total',
+        target_object: newValue[3],
+      })
+      for (let i = 0; i < newValue[2]; i++) {
         items.push({
-          id: item.id,
-          target_object: item.target_object,
+          id: 'core' + i,
+          target_object: '' + i,
         })
-      )
-    })
-
-    bodyItems.value = table.bodyItems(items)
+      }
+      bodyItems.value = table.bodyItems(items)
+    }
   },
-  { deep: true }
+  { immediate: true }
 )
+
+watch(selectedRow, (newValue) => {
+  const selectedItems: number[] = []
+
+  newValue.forEach((key) => {
+    selectedItems.push(+items[key].id)
+  })
+
+  const selectedNames =
+    items.length === newValue.length ? '*' : selectedItems.join(', ')
+  emits('select-objects', selectedNames)
+})
 </script>
 
 <style scoped lang="scss">
@@ -91,6 +112,7 @@ watch(
   }
   .flex-to-absolute-positioning-container {
     height: 100%;
+    max-height: 204px;
     .flex-to-absolute-positioning-container-inner {
       height: inherit;
 

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

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

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

@@ -5,29 +5,41 @@ import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/t
 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',
-  // },
-]
+  localization: UI_I_Localization,
+  selectedTimespanType: string
+): UI_I_OptionItem[] => {
+  const result = [
+    {
+      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',
+    // },
+  ]
+
+  if (selectedTimespanType === 'custom_interval') {
+    result.push({
+      text: localization.customInterval,
+      value: 'custom_interval',
+    })
+  }
+
+  return result
+}
 
 export const viewFunc = (
   localization: UI_I_Localization,
@@ -43,29 +55,29 @@ export const viewFunc = (
     ],
     host: [
       { text: localization.cpuUsageInPercent, value: 'cpuUsageInPercent' },
-      { text: localization.datastore, value: 'datastore' },
+      // { 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',
-      },
+      // { 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.cpuUsageInMhz, value: 'cpuUsageInMhz' },
+      // { text: localization.cpuReady, value: 'cpuReady' },
+      // { 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.virtualDisk, value: 'virtualDisk' },
+      // { text: localization.power, value: 'power' },
+      // { text: localization.virtualDisk, value: 'virtualDisk' },
     ],
   }
   const currentOptions = viewData[type]

package/components/common/monitor/advanced/tools/utils/countCores.ts

@@ -0,0 +1,7 @@
+import { I_SeriesLine } from 'bfg-nuxt-3-graph/graph/models/interfaces'
+
+export const getCountCores = (data: I_SeriesLine | null): number => {
+  if (!data) return 0
+
+  return Math.max(...data.lines[0].data)
+}

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

@@ -1,14 +1,113 @@
 import { subDays, subHours, subMonths, subWeeks, subYears } from 'date-fns'
 
-export const getValidDateByOptionFunc = (type: string): number[] => {
+export const getValidDateByOptionFunc = (
+  type: string,
+  selectedOptions = null,
+  unitsCount: null | number = null,
+  timeType: null | 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()
+  switch (type) {
+    case 'real_time':
+      startTime = subHours(newDate, 1).getTime()
+      break
+    case 'last_day':
+      startTime = subDays(newDate, 1).getTime()
+      break
+    case 'last_week':
+      startTime = subWeeks(newDate, 1).getTime()
+      break
+    case 'last_month':
+      startTime = subMonths(newDate, 1).getTime()
+      break
+    case 'last_year':
+      startTime = subYears(newDate, 1).getTime()
+      break
+    case 'custom_interval':
+      if (selectedOptions) {
+        switch (selectedOptions.timespan.periodType) {
+          case 'last':
+            const currentUnits =
+              selectedOptions.timespan.unitsCount < 1
+                ? 1
+                : +selectedOptions.timespan.unitsCount
+
+            switch (selectedOptions.timespan.units) {
+              case 'hours':
+                startTime = subHours(newDate, currentUnits).getTime()
+                break
+              case 'days':
+                startTime = subDays(newDate, currentUnits).getTime()
+                break
+              case 'weeks':
+                startTime = subWeeks(newDate, currentUnits).getTime()
+                break
+              case 'months':
+                startTime = subMonths(newDate, currentUnits).getTime()
+                break
+            }
+        }
+      } else if (
+        !selectedOptions &&
+        typeof unitsCount === 'number' &&
+        typeof timeType === 'string'
+      ) {
+        switch (timeType) {
+          case 'hours':
+            startTime = subHours(newDate, unitsCount).getTime()
+            break
+          case 'days':
+            startTime = subDays(newDate, unitsCount).getTime()
+            break
+          case 'weeks':
+            startTime = subWeeks(newDate, unitsCount).getTime()
+            break
+          case 'months':
+            startTime = subMonths(newDate, unitsCount).getTime()
+            break
+        }
+      }
+      break
+  }
+
+  // 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()
+  // else if (type === 'custom_interval' && selectedOptions) {
+  //   if (selectedOptions.timespan.periodType === 'last') {
+  //     const currentUnits =
+  //       selectedOptions.timespan.unitsCount < 1
+  //         ? 1
+  //         : +selectedOptions.timespan.unitsCount
+  //
+  //     if (selectedOptions.timespan.units === 'hours')
+  //       startTime = subHours(newDate, currentUnits).getTime()
+  //     else if (selectedOptions.timespan.units === 'days')
+  //       startTime = subDays(newDate, currentUnits).getTime()
+  //     else if (selectedOptions.timespan.units === 'weeks')
+  //       startTime = subWeeks(newDate, currentUnits).getTime()
+  //     else if (selectedOptions.timespan.units === 'months')
+  //       startTime = subMonths(newDate, currentUnits).getTime()
+  //   }
+  // } else if (
+  //   type === 'custom_interval' &&
+  //   !selectedOptions &&
+  //   typeof unitsCount === 'number' &&
+  //   typeof timeType === 'string'
+  // ) {
+  //   if (timeType === 'hours')
+  //     startTime = subHours(newDate, unitsCount).getTime()
+  //   else if (timeType === 'days')
+  //     startTime = subDays(newDate, unitsCount).getTime()
+  //   else if (timeType === 'weeks')
+  //     startTime = subWeeks(newDate, unitsCount).getTime()
+  //   else if (timeType === 'months')
+  //     startTime = subMonths(newDate, unitsCount).getTime()
+  // }
 
   return [startTime, newDate.getTime()]
 }

package/components/common/monitor/overview/filters/Filters.vue

@@ -87,8 +87,8 @@ const periodOptions = computed<UI_I_OptionItem[]>(() =>
 )
 watch(
   () => periodOptions.value,
-  (val: UI_I_OptionItem[]) => {
-    if (val) selectedPeriod.value = val[0].value
+  (newValue: UI_I_OptionItem[]) => {
+    if (newValue) selectedPeriod.value = newValue[0].value
   },
   { immediate: true }
 )
@@ -142,8 +142,8 @@ const viewOptions = computed<UI_I_OptionItem[]>(() =>
 )
 watch(
   () => viewOptions.value,
-  (val: UI_I_OptionItem[]) => {
-    if (val) selectedView.value = val[0].value
+  (newValue: UI_I_OptionItem[]) => {
+    if (newValue) selectedView.value = newValue[0].value
   },
   { immediate: true }
 )
@@ -163,8 +163,8 @@ const sendUpdatedFilters = (): void => {
 }
 watch(
   () => [selectedPeriod.value, selectedView.value],
-  (value: string[]) => {
-    value[0] !== 'custom_interval' && sendUpdatedFilters()
+  (newValue: string[]) => {
+    newValue[0] !== 'custom_interval' && sendUpdatedFilters()
   },
   { immediate: true }
 )