bfg-common 1.1.63 → 1.1.64

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

@@ -39,22 +39,12 @@
               :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>
@@ -74,7 +64,6 @@ 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
@@ -87,12 +76,6 @@ const props = defineProps<{
   periodType: string
   selectedCustomTime: string
   selectedChartOptionName: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: string
-  totalCores: number
-  hostId: string
 }>()
 
 const emits = defineEmits<{
@@ -107,35 +90,12 @@ 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)
 )
@@ -213,30 +173,17 @@ const selectedRows = ref<UI_I_AdvancedCounterItem[]>([])
 const selectedChartTypeLocal = ref<string>('')
 
 const checkValidations = (): boolean => {
-  const checkDateResult = checkDateFunc(
-    localization.value,
-    localCustomDateFrom.value,
-    localCustomDateTo.value,
-    localCustomTimeFrom.value,
-    localCustomTimeTo.value
-  )
+  if (selectedRows.value.length) {
+    alerts.value = []
+    isShowAlerts.value = false
 
-  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
+    return true
   }
 
-  return true
+  alerts.value = [localization.value.noCountersSelected]
+  isShowAlerts.value = true
+
+  return false
 }
 
 const localSelectedChartOptionName = ref<string>('')
@@ -250,8 +197,6 @@ watch(
 
 const selectedLocalOptionName = ref<string>('')
 
-const selectedObjects = ref<string>('')
-
 const onSubmit = (): void => {
   if (!checkValidations()) return
 
@@ -260,37 +205,14 @@ const onSubmit = (): void => {
 
   onSaveOptions(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)
+  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)
   onHide()
 }
 
@@ -329,13 +251,7 @@ const onSaveOptions = (name: string): void => {
 }
 
 const setSelectOptions = (): void => {
-  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
+  setDefaultOptions()
 }
 
 const setDefaultOptions = (): void => {

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

@@ -7,30 +7,18 @@
       @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>
@@ -41,7 +29,10 @@ 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 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+import {
+  UI_I_AdvancedCounterItem,
+  UI_I_AdvancedTargetObject,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
 
 const props = defineProps<{
   language: string
@@ -53,12 +44,6 @@ const props = defineProps<{
   unitsCount: number
   periodType: string
   selectedCustomTime: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: string
-  totalCores: number
-  hostId: string
 }>()
 
 const emits = defineEmits<{
@@ -68,12 +53,9 @@ 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,58 +631,3 @@ 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: string
+  id: number
   target_object: string
 }
 

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

@@ -7,52 +7,29 @@
       :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
-      :type="props.type"
-      :chart="props.chart"
-      :total-cores="props.totalCores"
-      :host-id="props.hostId"
-      @select-objects="emits('select-objects', $event)"
+      :selected="props.selected"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-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'
+import { UI_I_AdvancedTargetObject } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
 
 const props = defineProps<{
-  type: UI_T_AdvancedType
-  chart: T_ChartHost | T_ChartVm
+  selected: UI_I_AdvancedTargetObject[][]
   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<{
@@ -61,12 +38,6 @@ 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="localCurrentDateFrom"
+                        v-model.lazy="currentDateFrom"
                         type="text"
                         class="chart-option-setting-row custom-time-input first-from"
                       />
@@ -221,10 +221,6 @@ const props = defineProps<{
   unitsCount: number
   periodType: string
   selectedCustomTime: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: string
 }>()
 
 const emits = defineEmits<{
@@ -233,10 +229,6 @@ 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()
@@ -356,28 +348,26 @@ const yesterday = new Date().setDate(new Date().getDate() - 1)
 const dateFrom = ref<number>(yesterday)
 const dateTo = ref<number>(new Date().getTime())
 
-const localCurrentDateFrom = ref<string>('')
+const currentDateFrom = ref<string>('')
 const currentDateTo = ref<string>('')
 const currentTimeFrom = ref<string>('')
 const currentTimeTo = ref<string>('')
 
 const getCurrentTime = (): void => {
-  localCurrentDateFrom.value =
-    props.customDateFrom || $formattedDate(yesterday, '')
-  currentDateTo.value = props.customDateTo || $formattedDate(new Date(), '')
+  currentDateFrom.value = $formattedDate(yesterday, '')
+  currentDateTo.value = $formattedDate(new Date(), '')
 
   const currentTime = format(new Date(), $getTimeFormat(true))
-  currentTimeFrom.value = props.customTimeFrom || currentTime
-  currentTimeTo.value = props.customTimeTo || currentTime
+  currentTimeFrom.value = currentTime
+  currentTimeTo.value = currentTime
 }
 
 const onUpdateDateFrom = (val: number): void => {
   if (!val) return
 
-  localCurrentDateFrom.value = $formattedDate(new Date(val), '')
+  currentDateFrom.value = $formattedDate(new Date(val), '')
 }
-watch(localCurrentDateFrom, (newValue) => {
-  emits('update-custom-date-from', newValue)
+watch(currentDateFrom, (newValue) => {
   if (!newValue) return
 
   if ($isDate(newValue)) dateFrom.value = $getUnixByDate(newValue)
@@ -389,17 +379,10 @@ 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,21 +34,10 @@ 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_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
-import {
-  T_ChartHost,
-  T_ChartVm,
-} from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
+import { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/interfaces'
 
 const props = defineProps<{
-  type: UI_T_AdvancedType
-  chart: T_ChartHost | T_ChartVm
-  totalCores: number
-  hostId: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-objects', value: string): void
+  selected: UI_I_AdvancedTargetObject[][]
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -68,38 +57,28 @@ const columnItems = computed<UI_I_ColumnKey[]>(() =>
 
 const bodyItems = ref<UI_I_BodyItem[][]>([])
 
-const items: UI_I_AdvancedTargetObject[] = []
 watch(
-  () => [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: 'core' + i,
-          target_object: '' + i,
-        })
-      }
+  () => props.selected,
+  (val) => {
+    const items: UI_I_ObjectItem[] = []
+    if (!val.length) {
       bodyItems.value = table.bodyItems(items)
+      return
     }
-  },
-  { immediate: true }
-)
-
-watch(selectedRow, (newValue) => {
-  const selectedItems: number[] = []
 
-  newValue.forEach((key) => {
-    selectedItems.push(+items[key].id)
-  })
+    val.forEach((itemArr) => {
+      itemArr.forEach((item) =>
+        items.push({
+          id: item.id,
+          target_object: item.target_object,
+        })
+      )
+    })
 
-  const selectedNames =
-    items.length === newValue.length ? '*' : selectedItems.join(', ')
-  emits('select-objects', selectedNames)
-})
+    bodyItems.value = table.bodyItems(items)
+  },
+  { deep: true }
+)
 </script>
 
 <style scoped lang="scss">
@@ -112,7 +91,6 @@ watch(selectedRow, (newValue) => {
   }
   .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: string
+  id: number
   target_object: string
 }