bfg-common 1.1.83 → 1.1.84

package/assets/localization/local_ru.json

@@ -320,7 +320,7 @@
   "createHardDisk": "Создать жесткий диск",
   "createNewFolder": "Создать новую папку",
   "createNewVirtualMachine": "Создать новую виртуальную машину",
-  "createStandardSwitch": "Создание стандартного коммутатор",
+  "createStandardSwitch": "Создание стандартного коммутатора",
   "createTag": "Создание Тега",
   "creationDate": "Дата создания",
   "currentDisplayLimited": "Текущий дисплей ограничен 200 записями.",

package/components/common/monitor/advanced/Advanced.vue

@@ -12,6 +12,7 @@
       <div class="fill-parent flex-column">
         <div class="vertical-flex-container fill-parent">
           <common-monitor-advanced-tools
+            v-model:selected-timespan-type="localSelectedTimespanType"
             :type="props.type"
             :start-date="props.data?.pointStart || 0"
             :chart-title="props.data?.groupName || ''"
@@ -21,7 +22,6 @@
             :disabled-period="props.disabledPeriod"
             :disabled-view="props.disabledView"
             :selected-chart-type="props.selectedChartType"
-            :selected-timespan-type="props.selectedTimespanType"
             :units-count="props.unitsCount"
             :period-type="props.periodType"
             :selected-custom-time="props.selectedCustomTime"
@@ -32,6 +32,7 @@
             :custom-time-to="props.customTimeTo"
             :total-cores="totalCores"
             :host-id="props.hostId"
+            :selected-objects="props.selectedObjects"
             @update-tools="emits('update-tools', $event)"
             @exporting="onExporting"
             @open-advanced-page="onGetEmptyPage"
@@ -42,7 +43,6 @@
             @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="emits('select-chart-name', $event)"
             @delete-option="emits('delete-option')"
             @update-custom-date-from="emits('update-custom-date-from', $event)"
             @update-custom-date-to="emits('update-custom-date-to', $event)"
@@ -91,11 +91,12 @@ import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/t
 import { I_SeriesLine } from 'bfg-nuxt-3-graph/graph/models/interfaces'
 import { UI_I_MonitorGraphPayload } from '~/components/common/monitor/models/interfaces'
 import { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/models/interfaces'
-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 { getCountCores } from '~/components/common/monitor/advanced/tools/utils/countCores'
 
 const props = defineProps<{
@@ -120,6 +121,7 @@ const props = defineProps<{
   customTimeFrom: string
   customTimeTo: string
   hostId: string
+  selectedObjects: string
   disabledPeriod?: boolean
   disabledView?: boolean
 }>()
@@ -135,24 +137,35 @@ 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: string): void
+  (event: 'submit-options', value: UI_I_OptionsForm): void
+  (event: 'update:selected-timespan-type', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+const localSelectedTimespanType = computed<string>({
+  get() {
+    return props.selectedTimespanType
+  },
+  set(newValue) {
+    emits('update:selected-timespan-type', newValue)
+  },
+})
+
 const totalCores = ref<number>(0)
+let isFirstUpdate = true
 watch(
   () => props.data,
   (newValue) => {
-    if (!newValue) return
+    if (!newValue || !isFirstUpdate) return
 
     totalCores.value = getCountCores(newValue)
+    isFirstUpdate = false
   },
   { immediate: true }
 )

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

@@ -101,6 +101,7 @@
     :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)"
@@ -109,7 +110,6 @@
     @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,11 +126,12 @@ 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,
@@ -159,6 +160,7 @@ const props = defineProps<{
   customTimeTo: string
   totalCores: number
   hostId: string
+  selectedObjects: string
   disabledPeriod?: boolean
   disabledView?: boolean
 }>()
@@ -174,13 +176,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: string): void
+  (event: 'submit-options', value: UI_I_OptionsForm): void
+  (event: 'update:selected-timespan-type', value: string): void
 }>()
 
 const routeType = '' + useRoute().params.type
@@ -212,36 +214,22 @@ 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)
 )
-watch(
-  () => periodOptions.value,
-  (newValue: UI_I_OptionItem[]) => {
-    if (newValue) selectedPeriod.value = newValue[0].value
+const selectedPeriod = computed<string>({
+  get() {
+    return props.selectedTimespanType || periodOptions.value[0].value
   },
-  { immediate: true }
-)
-watch(
-  () => props.selectedTimespanType,
-  (newValue) => {
-    if (!newValue) return
-
-    selectedPeriod.value = newValue
-    updateTools()
-  }
-)
+  set(newValue) {
+    emits('update:selected-timespan-type', newValue)
+  },
+})
 
 const isShowModal = ref<boolean>(false)
 watch(isShowModal, (newValue) => {
@@ -249,8 +237,6 @@ watch(isShowModal, (newValue) => {
     selectedView.value = viewOptions.value[0].value
 })
 
-const selectedObjects = ref<string>('')
-
 const updateTools = (): void => {
   const periodValue = selectedPeriod.value
   const viewValue = selectedView.value
@@ -295,6 +281,8 @@ const updateTools = (): void => {
     periodType: periodValue,
     view: viewValue,
   }
+  if (selectedValue.metric) tools.metricType = selectedValue.metric
+
   emits('update-timespan-type', selectedPeriod.value)
   emits('update-tools', tools)
 }
@@ -421,7 +409,6 @@ onMounted(() => {
           min-width: 16px;
           min-height: 16px;
           background-size: 100% auto;
-          display: block;
         }
       }
 

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

@@ -4,6 +4,7 @@
       width="1150px"
       :show="true"
       :title="localization.chartOptions"
+      :disabled-submit="isDisabledSubmit"
       @hide="onHide"
       @submit="onSubmit"
     >
@@ -45,6 +46,8 @@
               :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"
@@ -55,6 +58,7 @@
               @update-custom-date-to="onUpdateCustomDateTo"
               @update-custom-time-from="onUpdateCustomTimeFrom"
               @update-custom-time-to="onUpdateCustomTimeTo"
+              @select-objects="localSelectedObjects = $event"
             />
           </div>
         </div>
@@ -72,9 +76,11 @@ 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
@@ -93,6 +99,7 @@ const props = defineProps<{
   customTimeTo: string
   totalCores: number
   hostId: string
+  selectedObjects: string
 }>()
 
 const emits = defineEmits<{
@@ -104,14 +111,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: '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: 'submit-options', value: UI_I_OptionsForm): void
   (event: 'select-objects', value: string): void
 }>()
 
@@ -210,6 +216,9 @@ 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 => {
@@ -250,7 +259,15 @@ watch(
 
 const selectedLocalOptionName = ref<string>('')
 
-const selectedObjects = 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 onSubmit = (): void => {
   if (!checkValidations()) return
@@ -260,7 +277,6 @@ 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) +
@@ -274,7 +290,43 @@ 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,
@@ -287,7 +339,8 @@ const onSubmit = (): void => {
     dateTo: localCustomDateTo.value,
     timeTo: localCustomTimeTo.value,
     chartType: selectedChartTypeLocal.value,
-    objects: selectedObjects.value,
+    objects: localSelectedObjects.value,
+    periodValue: validPeriod,
   }
 
   emits('submit-options', savedObject)
@@ -394,6 +447,13 @@ 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/counters/Counters.vue

@@ -5,6 +5,7 @@
       :type="props.type"
       :selected-keys="props.selectedKeys"
       @select-row="emits('select-row', $event)"
+      @total-items="totalMetricItems = $event"
     />
     <common-monitor-advanced-tools-chart-options-modal-counters-timespan
       :type="props.type"
@@ -21,6 +22,9 @@
       :custom-time-to="props.customTimeTo"
       :total-cores="props.totalCores"
       :host-id="props.hostId"
+      :selected-metrics-keys="props.selectedMetricsKeys"
+      :total-metric-items="totalMetricItems"
+      :selected-objects="props.selectedObjects"
       @update-chart-type="emits('update-chart-type', $event)"
       @update-custom-time="emits('update-custom-time', $event)"
       @update-timespan-type="emits('update-timespan-type', $event)"
@@ -59,6 +63,8 @@ const props = defineProps<{
   customTimeTo: string
   totalCores: number
   hostId: string
+  selectedMetricsKeys: number[]
+  selectedObjects: string
 }>()
 
 const emits = defineEmits<{
@@ -74,6 +80,8 @@ const emits = defineEmits<{
   (event: 'update-custom-time-to', value: string): void
   (event: 'select-objects', value: string): void
 }>()
+
+const totalMetricItems = ref<number>(0)
 </script>
 
 <style scoped lang="scss">

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/Table.vue

@@ -46,6 +46,7 @@ const props = defineProps<{
 
 const emits = defineEmits<{
   (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
+  (event: 'total-items', value: number): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -57,6 +58,14 @@ const counters = computed<UI_I_AdvancedCounterItem[]>(() =>
 const totalItems = computed<number>(() => counters.value.length)
 const totalPages = computed<number>(() => 1)
 
+watch(
+  totalItems,
+  (newValue) => {
+    emits('total-items', newValue)
+  },
+  { immediate: true }
+)
+
 const selectedCounters = ref<number[]>([])
 watch(
   () => props.selectedKeys,

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

@@ -654,8 +654,9 @@ export const getDefaultCounters = (
         case 'cpuUsageInPercent':
           return hostItemsFunc('cpu', {}).splice(0, 2)
         case 'disk':
-          const allItems = hostItemsFunc('disk', {})
-          return allItems.filter((_, key) => [0, 14].includes(key))
+          return hostItemsFunc('disk', {}).filter((_, key) =>
+            [0, 14].includes(key)
+          )
         case 'memory':
           return hostItemsFunc('memory', {})
         case 'network':

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

@@ -26,6 +26,9 @@
       :chart="props.chart"
       :total-cores="props.totalCores"
       :host-id="props.hostId"
+      :selected-metrics-keys="props.selectedMetricsKeys"
+      :total-metric-items="props.totalMetricItems"
+      :selected-objects="props.selectedObjects"
       @select-objects="emits('select-objects', $event)"
     />
   </div>
@@ -53,6 +56,9 @@ const props = defineProps<{
   customTimeTo: string
   totalCores: number
   hostId: string
+  selectedMetricsKeys: number[]
+  totalMetricItems: number
+  selectedObjects: string
 }>()
 
 const emits = defineEmits<{

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

@@ -45,6 +45,9 @@ const props = defineProps<{
   chart: T_ChartHost | T_ChartVm
   totalCores: number
   hostId: string
+  selectedMetricsKeys: number[]
+  totalMetricItems: number
+  selectedObjects: string
 }>()
 
 const emits = defineEmits<{
@@ -68,38 +71,82 @@ const columnItems = computed<UI_I_ColumnKey[]>(() =>
 
 const bodyItems = ref<UI_I_BodyItem[][]>([])
 
-const items: UI_I_AdvancedTargetObject[] = []
+let items: UI_I_AdvancedTargetObject[] = []
 watch(
-  () => [props.type, props.chart, props.totalCores, props.hostId],
+  () => [
+    props.type,
+    props.chart,
+    props.totalCores,
+    props.hostId,
+    props.selectedMetricsKeys,
+  ],
   (newValue) => {
+    items = []
+    selectedRow.value = []
+
     if (newValue[0] === 'host' && newValue[1] === 'cpu') {
-      items.push({
-        id: 'total',
-        target_object: newValue[3],
-      })
-      for (let i = 0; i < newValue[2]; i++) {
+      if (newValue[4].includes(0)) {
         items.push({
-          id: 'core' + i,
-          target_object: '' + i,
+          id: 'total',
+          target_object: newValue[3],
         })
       }
+      if (newValue[4].includes(1)) {
+        for (let i = 0; i < newValue[2]; i++) {
+          items.push({
+            id: 'core' + i,
+            target_object: '' + i,
+          })
+        }
+      }
       bodyItems.value = table.bodyItems(items)
-    }
+    } else bodyItems.value = []
   },
   { immediate: true }
 )
 
-watch(selectedRow, (newValue) => {
-  const selectedItems: number[] = []
+watch(
+  selectedRow,
+  (newValue) => {
+    const selectedItems: string[] = []
+
+    newValue.forEach((key) => {
+      selectedItems.push(items[key].id)
+    })
 
-  newValue.forEach((key) => {
-    selectedItems.push(+items[key].id)
-  })
+    const selectedNames =
+      items.length === newValue.length &&
+      props.selectedMetricsKeys.length === props.totalMetricItems
+        ? '*'
+        : selectedItems.join(', ')
 
-  const selectedNames =
-    items.length === newValue.length ? '*' : selectedItems.join(', ')
-  emits('select-objects', selectedNames)
-})
+    emits('select-objects', selectedNames)
+  },
+  { deep: true }
+)
+
+watch(
+  () => [props.selectedObjects, bodyItems.value],
+  ([selected, all]) => {
+    if (!all.length) return
+
+    if (props.type === 'host' && props.chart === 'cpu') {
+      if (selected === '*') {
+        selectedRow.value = all.map((item) => item[0].id)
+      } else {
+        const selectedNames = selected.split(', ')
+        const selectedKeys: number[] = []
+        all.forEach((item) => {
+          if (selectedNames.includes('total')) selectedKeys.push(0)
+          if (selectedNames.includes(`core${item[0].text}`))
+            selectedKeys.push(item[0].id)
+        })
+        selectedRow.value = selectedKeys
+      }
+    }
+  },
+  { immediate: true }
+)
 </script>
 
 <style scoped lang="scss">

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

@@ -0,0 +1,19 @@
+import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+
+export interface UI_I_OptionsForm {
+  fields: string
+  optionName: string
+  metric: string
+  counters: UI_I_AdvancedCounterItem[]
+  timespanType: string
+  periodType: string
+  unitCount: number
+  localTimespanType: string
+  dateFrom: string
+  timeFrom: string
+  dateTo: string
+  timeTo: string
+  chartType: string
+  objects: string
+  periodValue: number[]
+}

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

@@ -16,4 +16,5 @@ export interface UI_I_MonitorGraphPayload {
   storageId?: string
   hostName?: string
   fields?: string
+  metricType?: string
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.1.83",
+  "version": "1.1.84",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",