bfg-common 1.1.82 → 1.1.83

package/components/common/monitor/advanced/table/config/performanceDatatable.ts

@@ -1,116 +1,116 @@
-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_PerformanceColumnKey } from '~/components/common/monitor/advanced/table/models/types'
-import { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/models/interfaces'
-
-export const performanceTableKey: UI_T_PerformanceColumnKey[] = [
-  'key',
-  'relatedDeviceName',
-  'measurement',
-  'rollupType',
-  'units',
-  'latest',
-  'maximum',
-  'minimum',
-  'average',
-]
-
-const getItems = (
-  localization: UI_I_Localization
-): [string, boolean, string, string][] => {
-  const widthCol = '113px'
-  return [
-    [localization.key, true, widthCol, performanceTableKey[0]],
-    [localization.object, true, widthCol, performanceTableKey[1]],
-    [localization.measurement, true, widthCol, performanceTableKey[2]],
-    [localization.rollup, true, widthCol, performanceTableKey[3]],
-    [localization.units, true, widthCol, performanceTableKey[4]],
-    [localization.latest, true, widthCol, performanceTableKey[5]],
-    [localization.maximum, true, widthCol, performanceTableKey[6]],
-    [localization.minimum, true, widthCol, performanceTableKey[7]],
-    [localization.average, true, widthCol, performanceTableKey[8]],
-  ]
-}
-
-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_PerformanceItem[]): UI_I_BodyItem[][] => {
-  const bodyItems: UI_I_BodyItem[][] = []
-
-  data.forEach((performance: UI_I_PerformanceItem, key: number) => {
-    bodyItems.push([
-      {
-        key: 'col1',
-        text: '',
-        data: { color: performance[performanceTableKey[0]] },
-        id: key,
-      },
-      {
-        key: 'col2',
-        text: performance[performanceTableKey[1]],
-        id: key,
-      },
-      {
-        key: 'col3',
-        text: performance[performanceTableKey[2]],
-        id: key,
-      },
-      {
-        key: 'col4',
-        text: performance[performanceTableKey[3]],
-        id: key,
-      },
-      {
-        key: 'col5',
-        text: performance[performanceTableKey[4]],
-        id: key,
-      },
-      {
-        key: 'col6',
-        text: performance[performanceTableKey[5]],
-        id: key,
-      },
-      {
-        key: 'col7',
-        text: performance[performanceTableKey[6]],
-        id: key,
-      },
-      {
-        key: 'col8',
-        text: performance[performanceTableKey[7]],
-        id: key,
-      },
-      {
-        key: 'col9',
-        text: performance[performanceTableKey[8]],
-        id: key,
-      },
-    ])
-  })
-  return bodyItems
-}
+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_PerformanceColumnKey } from '~/components/common/monitor/advanced/table/models/types'
+import { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/models/interfaces'
+
+export const performanceTableKey: UI_T_PerformanceColumnKey[] = [
+  'key',
+  'relatedDeviceName',
+  'measurement',
+  'rollupType',
+  'units',
+  'latest',
+  'maximum',
+  'minimum',
+  'average',
+]
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  const widthCol = '113px'
+  return [
+    [localization.key, true, widthCol, performanceTableKey[0]],
+    [localization.object, true, widthCol, performanceTableKey[1]],
+    [localization.measurement, true, widthCol, performanceTableKey[2]],
+    [localization.rollup, true, widthCol, performanceTableKey[3]],
+    [localization.units, true, widthCol, performanceTableKey[4]],
+    [localization.latest, true, widthCol, performanceTableKey[5]],
+    [localization.maximum, true, widthCol, performanceTableKey[6]],
+    [localization.minimum, true, widthCol, performanceTableKey[7]],
+    [localization.average, true, widthCol, performanceTableKey[8]],
+  ]
+}
+
+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_PerformanceItem[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+
+  data.forEach((performance: UI_I_PerformanceItem, key: number) => {
+    bodyItems.push([
+      {
+        key: 'col1',
+        text: '',
+        data: { color: performance[performanceTableKey[0]] },
+        id: key,
+      },
+      {
+        key: 'col2',
+        text: performance[performanceTableKey[1]],
+        id: key,
+      },
+      {
+        key: 'col3',
+        text: performance[performanceTableKey[2]],
+        id: key,
+      },
+      {
+        key: 'col4',
+        text: performance[performanceTableKey[3]],
+        id: key,
+      },
+      {
+        key: 'col5',
+        text: performance[performanceTableKey[4]],
+        id: key,
+      },
+      {
+        key: 'col6',
+        text: performance[performanceTableKey[5]],
+        id: key,
+      },
+      {
+        key: 'col7',
+        text: performance[performanceTableKey[6]],
+        id: key,
+      },
+      {
+        key: 'col8',
+        text: performance[performanceTableKey[7]],
+        id: key,
+      },
+      {
+        key: 'col9',
+        text: performance[performanceTableKey[8]],
+        id: key,
+      },
+    ])
+  })
+  return bodyItems
+}

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

@@ -1,12 +1,12 @@
-export interface UI_I_PerformanceItem {
-  id: number
-  key: string
-  measurement: string
-  units: string
-  latest: number
-  maximum: number
-  minimum: number
-  average: number
-  relatedDeviceName: string
-  rollupType: string
-}
+export interface UI_I_PerformanceItem {
+  id: number
+  key: string
+  measurement: string
+  units: string
+  latest: number
+  maximum: number
+  minimum: number
+  average: number
+  relatedDeviceName: string
+  rollupType: string
+}

package/components/common/monitor/advanced/table/models/types.ts

@@ -1,10 +1,10 @@
-export type UI_T_PerformanceColumnKey =
-  | 'key'
-  | 'relatedDeviceName'
-  | 'measurement'
-  | 'rollupType'
-  | 'units'
-  | 'latest'
-  | 'maximum'
-  | 'minimum'
-  | 'average'
+export type UI_T_PerformanceColumnKey =
+  | 'key'
+  | 'relatedDeviceName'
+  | 'measurement'
+  | 'rollupType'
+  | 'units'
+  | 'latest'
+  | 'maximum'
+  | 'minimum'
+  | 'average'

package/components/common/monitor/advanced/tools/Tools.vue

@@ -101,7 +101,6 @@
     :custom-time-to="props.customTimeTo"
     :total-cores="props.totalCores"
     :host-id="props.hostId"
-    :selected-objects="props.selectedObjects"
     @hide="isShowModal = false"
     @select-row="emits('select-row', $event)"
     @select-metric="emits('select-metric', $event)"
@@ -110,6 +109,7 @@
     @update-unit-count="emits('update-unit-count', $event)"
     @update-period-type="emits('update-period-type', $event)"
     @update-custom-time="emits('update-custom-time', $event)"
+    @select-chart-name="onSelectChartName"
     @delete-option="onDeleteOption"
     @save-option-name="onSaveOptionName"
     @update-custom-date-from="emits('update-custom-date-from', $event)"
@@ -126,12 +126,11 @@ import { UI_I_Localization } from '~/models/interfaces'
 import { UI_I_MonitorGraphPayload } from '~/components/common/monitor/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_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
 import {
   T_ChartHost,
   T_ChartVm,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
-import { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/models'
-import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
 import { getValidDateByOptionFunc } from '~/components/common/monitor/config/getValidDateByOption'
 import {
   periodFunc,
@@ -160,7 +159,6 @@ const props = defineProps<{
   customTimeTo: string
   totalCores: number
   hostId: string
-  selectedObjects: string
   disabledPeriod?: boolean
   disabledView?: boolean
 }>()
@@ -176,13 +174,13 @@ const emits = defineEmits<{
   (event: 'update-unit-count', value: number): void
   (event: 'update-period-type', value: string): void
   (event: 'update-custom-time', value: string): void
+  (event: 'select-chart-name', value: string): void
   (event: 'delete-option'): 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: UI_I_OptionsForm): void
-  (event: 'update:selected-timespan-type', value: string): void
+  (event: 'submit-options', value: string): void
 }>()
 
 const routeType = '' + useRoute().params.type
@@ -214,22 +212,36 @@ watch(
   { immediate: true }
 )
 
+const onSelectChartName = (name: string): void => {
+  emits('select-chart-name', name)
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+}
+
 const onDeleteOption = (): void => {
   emits('delete-option')
   optionsNames.value = getCurrentOptionsStorageFunc(routeType)
 }
 
+const selectedPeriod = ref<string>('')
 const periodOptions = computed<UI_I_OptionItem[]>(() =>
   periodFunc(localization.value, props.selectedTimespanType)
 )
-const selectedPeriod = computed<string>({
-  get() {
-    return props.selectedTimespanType || periodOptions.value[0].value
-  },
-  set(newValue) {
-    emits('update:selected-timespan-type', newValue)
+watch(
+  () => periodOptions.value,
+  (newValue: UI_I_OptionItem[]) => {
+    if (newValue) selectedPeriod.value = newValue[0].value
   },
-})
+  { immediate: true }
+)
+watch(
+  () => props.selectedTimespanType,
+  (newValue) => {
+    if (!newValue) return
+
+    selectedPeriod.value = newValue
+    updateTools()
+  }
+)
 
 const isShowModal = ref<boolean>(false)
 watch(isShowModal, (newValue) => {
@@ -237,6 +249,8 @@ watch(isShowModal, (newValue) => {
     selectedView.value = viewOptions.value[0].value
 })
 
+const selectedObjects = ref<string>('')
+
 const updateTools = (): void => {
   const periodValue = selectedPeriod.value
   const viewValue = selectedView.value
@@ -281,8 +295,6 @@ const updateTools = (): void => {
     periodType: periodValue,
     view: viewValue,
   }
-  if (selectedValue.metric) tools.metricType = selectedValue.metric
-
   emits('update-timespan-type', selectedPeriod.value)
   emits('update-tools', tools)
 }
@@ -409,6 +421,7 @@ onMounted(() => {
           min-width: 16px;
           min-height: 16px;
           background-size: 100% auto;
+          display: block;
         }
       }
 

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

@@ -4,7 +4,6 @@
       width="1150px"
       :show="true"
       :title="localization.chartOptions"
-      :disabled-submit="isDisabledSubmit"
       @hide="onHide"
       @submit="onSubmit"
     >
@@ -46,8 +45,6 @@
               :custom-time-to="props.customTimeTo"
               :total-cores="props.totalCores"
               :host-id="props.hostId"
-              :selected-metrics-keys="selectedMetricsKeys"
-              :selected-objects="props.selectedObjects"
               @select-row="selectedRows = $event"
               @update-chart-type="selectedChartTypeLocal = $event"
               @update-custom-time="localCustomTime = $event"
@@ -58,7 +55,6 @@
               @update-custom-date-to="onUpdateCustomDateTo"
               @update-custom-time-from="onUpdateCustomTimeFrom"
               @update-custom-time-to="onUpdateCustomTimeTo"
-              @select-objects="localSelectedObjects = $event"
             />
           </div>
         </div>
@@ -76,11 +72,9 @@ import {
   T_ChartHost,
   T_ChartVm,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
-import { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/models'
 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'
-import { getValidDateByOptionFunc } from '~/components/common/monitor/config/getValidDateByOption'
 
 const props = defineProps<{
   type: UI_T_AdvancedType
@@ -99,7 +93,6 @@ const props = defineProps<{
   customTimeTo: string
   totalCores: number
   hostId: string
-  selectedObjects: string
 }>()
 
 const emits = defineEmits<{
@@ -111,13 +104,14 @@ const emits = defineEmits<{
   (event: 'update-unit-count', value: number): void
   (event: 'update-period-type', value: string): void
   (event: 'update-custom-time', value: string): void
+  (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: UI_I_OptionsForm): void
+  (event: 'submit-options', value: string): void
   (event: 'select-objects', value: string): void
 }>()
 
@@ -216,9 +210,6 @@ const onHide = (): void => {
 }
 
 const selectedRows = ref<UI_I_AdvancedCounterItem[]>([])
-const selectedMetricsKeys = computed<number[]>(() =>
-  selectedRows.value.map((item) => item.id)
-)
 const selectedChartTypeLocal = ref<string>('')
 
 const checkValidations = (): boolean => {
@@ -259,15 +250,7 @@ watch(
 
 const selectedLocalOptionName = ref<string>('')
 
-const localSelectedObjects = ref<string>('')
-
-const currentFieldsByArray = (data: UI_I_AdvancedCounterItem[]): string => {
-  const result: string[] = []
-  data.forEach((item) => {
-    result.push(item.nameEn)
-  })
-  return result.join(',')
-}
+const selectedObjects = ref<string>('')
 
 const onSubmit = (): void => {
   if (!checkValidations()) return
@@ -277,6 +260,7 @@ 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) +
@@ -290,43 +274,7 @@ const onSubmit = (): void => {
   // emits('update-chart-type', selectedChartTypeLocal.value) +
   // emits('submit-options')
 
-  // const periodValue = getValidDateByOptionFunc(
-  //     periodValue,
-  //     selectedValue,
-  //     props.unitsCount,
-  //     props.selectedCustomTime
-  // )
-  //
-
-  const currentFields =
-    localSelectedObjects.value || currentFieldsByArray(selectedRows.value)
-
-  const validPeriod = getValidDateByOptionFunc(
-    timespanType.value,
-    null,
-    unitCount.value,
-    localCustomTime.value
-  ).map((item) => Math.round(item / 1000))
-
-  if (
-    timespanType.value === 'custom_interval' &&
-    localPeriodType.value === 'period'
-  ) {
-    const checkDateResult = checkDateFunc(
-      localization.value,
-      localCustomDateFrom.value,
-      localCustomDateTo.value,
-      localCustomTimeFrom.value,
-      localCustomTimeTo.value
-    )
-    if (Array.isArray(checkDateResult)) {
-      validPeriod[0] = Math.round(checkDateResult[0] / 1000)
-      validPeriod[1] = Math.round(checkDateResult[1] / 1000)
-    }
-  }
-
   const savedObject = {
-    fields: currentFields,
     optionName: selectedLocalOptionName.value,
     metric: selectedMetric.value,
     counters: selectedRows.value,
@@ -339,8 +287,7 @@ const onSubmit = (): void => {
     dateTo: localCustomDateTo.value,
     timeTo: localCustomTimeTo.value,
     chartType: selectedChartTypeLocal.value,
-    objects: localSelectedObjects.value,
-    periodValue: validPeriod,
+    objects: selectedObjects.value,
   }
 
   emits('submit-options', savedObject)
@@ -447,13 +394,6 @@ const onDeleteChartName = (name: string): void => {
   emits('delete-option')
 }
 
-const isDisabledSubmit = computed<boolean>(
-  () =>
-    props.type === 'host' &&
-    selectedMetric.value === 'cpu' &&
-    !localSelectedObjects.value
-)
-
 onMounted(() => {
   optionsNames.value = getCurrentOptionsStorageFunc(routeType)
 })

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

@@ -1,33 +1,33 @@
-<template>
-  <atoms-alert
-    v-show="props.alerts.length"
-    status="alert-danger"
-    :items="props.alerts"
-    class="notification"
-    @remove="onRemove"
-  >
-    <template #default="{ item }">
-      <div class="flex-space-between flex-1">
-        <div class="flex-align-center">
-          <span>{{ item }}</span>
-        </div>
-      </div>
-    </template>
-  </atoms-alert>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  alerts: string[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'remove'): void
-}>()
-
-const onRemove = (): void => {
-  emits('remove')
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <atoms-alert
+    v-show="props.alerts.length"
+    status="alert-danger"
+    :items="props.alerts"
+    class="notification"
+    @remove="onRemove"
+  >
+    <template #default="{ item }">
+      <div class="flex-space-between flex-1">
+        <div class="flex-align-center">
+          <span>{{ item }}</span>
+        </div>
+      </div>
+    </template>
+  </atoms-alert>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  alerts: string[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'remove'): void
+}>()
+
+const onRemove = (): void => {
+  emits('remove')
+}
+</script>
+
+<style scoped lang="scss"></style>