bfg-common 1.1.62 → 1.1.63

package/components/common/monitor/advanced/tools/chartOptionsModal/ChartOptionsModal.vue

@@ -39,12 +39,22 @@
               :units-count="localUnitsCount"
               :period-type="localPeriodType"
               :selected-custom-time="localCustomTime"
+              :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"
               @select-row="selectedRows = $event"
               @update-chart-type="selectedChartTypeLocal = $event"
               @update-custom-time="localCustomTime = $event"
               @update-timespan-type="timespanType = $event"
               @update-unit-count="unitCount = $event"
               @update-period-type="localPeriodType = $event"
+              @update-custom-date-from="onUpdateCustomDateFrom"
+              @update-custom-date-to="onUpdateCustomDateTo"
+              @update-custom-time-from="onUpdateCustomTimeFrom"
+              @update-custom-time-to="onUpdateCustomTimeTo"
             />
           </div>
         </div>
@@ -64,6 +74,7 @@ import {
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 import { metricsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/metrics/config/optionsMetrics'
 import { getCurrentOptionsStorageFunc } from '~/components/common/monitor/advanced/tools/config/advancedToolbar'
+import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/config/dateChecker'
 
 const props = defineProps<{
   type: UI_T_AdvancedType
@@ -76,6 +87,12 @@ const props = defineProps<{
   periodType: string
   selectedCustomTime: string
   selectedChartOptionName: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
 }>()
 
 const emits = defineEmits<{
@@ -90,12 +107,35 @@ const emits = defineEmits<{
   (event: 'select-chart-name', value: string): void
   (event: 'delete-option'): void
   (event: 'save-option-name'): 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: 'submit-options', value: string): void
+  (event: 'select-objects', value: string): void
 }>()
 
 const routeType = '' + useRoute().params.type
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+const localCustomDateFrom = ref<string>('')
+const onUpdateCustomDateFrom = (value: string): void => {
+  localCustomDateFrom.value = value
+}
+const localCustomDateTo = ref<string>('')
+const onUpdateCustomDateTo = (value: string): void => {
+  localCustomDateTo.value = value
+}
+const localCustomTimeFrom = ref<string>('')
+const onUpdateCustomTimeFrom = (value: string): void => {
+  localCustomTimeFrom.value = value
+}
+const localCustomTimeTo = ref<string>('')
+const onUpdateCustomTimeTo = (value: string): void => {
+  localCustomTimeTo.value = value
+}
+
 const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
   metricsFunc(localization.value, props.type)
 )
@@ -173,17 +213,30 @@ const selectedRows = ref<UI_I_AdvancedCounterItem[]>([])
 const selectedChartTypeLocal = ref<string>('')
 
 const checkValidations = (): boolean => {
-  if (selectedRows.value.length) {
-    alerts.value = []
-    isShowAlerts.value = false
+  const checkDateResult = checkDateFunc(
+    localization.value,
+    localCustomDateFrom.value,
+    localCustomDateTo.value,
+    localCustomTimeFrom.value,
+    localCustomTimeTo.value
+  )
 
-    return true
+  if (!selectedRows.value.length) {
+    alerts.value = [localization.value.noCountersSelected]
+    isShowAlerts.value = true
+    return false
+  } else if (
+    timespanType.value === 'custom_interval' &&
+    localPeriodType.value === 'period' &&
+    checkDateResult !== '' &&
+    typeof checkDateResult === 'string'
+  ) {
+    alerts.value = [checkDateResult]
+    isShowAlerts.value = true
+    return false
   }
 
-  alerts.value = [localization.value.noCountersSelected]
-  isShowAlerts.value = true
-
-  return false
+  return true
 }
 
 const localSelectedChartOptionName = ref<string>('')
@@ -197,6 +250,8 @@ watch(
 
 const selectedLocalOptionName = ref<string>('')
 
+const selectedObjects = ref<string>('')
+
 const onSubmit = (): void => {
   if (!checkValidations()) return
 
@@ -205,14 +260,37 @@ const onSubmit = (): void => {
 
   onSaveOptions(selectedLocalOptionName.value)
 
-  emits('select-metric', selectedMetric.value)
-  emits('select-row', selectedRows.value)
-  emits('update-chart-type', selectedChartTypeLocal.value)
-  emits('update-timespan-type', timespanType.value)
-  emits('update-unit-count', unitCount.value)
-  emits('update-period-type', localPeriodType.value)
-  emits('update-custom-time', localCustomTime.value)
-  emits('select-chart-name', selectedLocalOptionName.value)
+  // emits('select-chart-name', selectedLocalOptionName.value) +
+  // emits('select-metric', selectedMetric.value) +
+  // emits('select-row', selectedRows.value) +
+  // emits('update-timespan-type', timespanType.value) +
+  // emits('update-period-type', localPeriodType.value) +
+  // emits('update-unit-count', unitCount.value) +
+  // emits('update-custom-time', localCustomTime.value) +
+  // emits('update-custom-date-from', localCustomDateFrom.value) +
+  // emits('update-custom-date-to', localCustomDateTo.value) +
+  // emits('update-custom-time-from', localCustomTimeFrom.value) +
+  // emits('update-custom-time-to', localCustomTimeTo.value) +
+  // emits('update-chart-type', selectedChartTypeLocal.value) +
+  // emits('submit-options')
+
+  const savedObject = {
+    optionName: selectedLocalOptionName.value,
+    metric: selectedMetric.value,
+    counters: selectedRows.value,
+    timespanType: timespanType.value,
+    periodType: localPeriodType.value,
+    unitCount: unitCount.value,
+    localTimespanType: localCustomTime.value,
+    dateFrom: localCustomDateFrom.value,
+    timeFrom: localCustomTimeFrom.value,
+    dateTo: localCustomDateTo.value,
+    timeTo: localCustomTimeTo.value,
+    chartType: selectedChartTypeLocal.value,
+    objects: selectedObjects.value,
+  }
+
+  emits('submit-options', savedObject)
   onHide()
 }
 
@@ -251,7 +329,13 @@ const onSaveOptions = (name: string): void => {
 }
 
 const setSelectOptions = (): void => {
-  setDefaultOptions()
+  selectedMetric.value = props.selectedMetric || metricsItems.value[0]?.value
+  localSelectedCountersKeys.value = props.selectedCountersKeys
+  localSelectedChartType.value = props.selectedChartType
+  localSelectedTimespanType.value = props.selectedTimespanType
+  localUnitsCount.value = props.unitsCount
+  localPeriodType.value = props.periodType
+  localCustomTime.value = props.selectedCustomTime
 }
 
 const setDefaultOptions = (): void => {

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
 }