bfg-common 1.4.839 → 1.4.841

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

@@ -1,170 +1,196 @@
-<template>
-  <common-monitor-advanced-new
-    v-if="isNewView"
-    v-model:selected-timespan-type="localSelectedTimespanType"
-    :type="props.type"
-    :is-empty="props.isEmpty"
-    :advanced-loading="props.advancedLoading"
-    :data="props.data"
-    :table-data="props.tableData"
-    :language="props.language"
-    :dark-mode="props.darkMode"
-    :formatted-datetime="props.formattedDatetime"
-    :get-date-format="props.getDateFormat"
-    :selected-counters-keys="props.selectedCountersKeys"
-    :selected-metric="props.selectedMetric"
-    :selected-metric-local="props.selectedMetricLocal"
-    :selected-chart-type="props.selectedChartType"
-    :units-count="props.unitsCount"
-    :period-type="props.periodType"
-    :selected-custom-time="props.selectedCustomTime"
-    :selected-chart-option-name="props.selectedChartOptionName"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :host-id="props.hostId"
-    :selected-objects="props.selectedObjects"
-    :cpu-cores-data-data="props.cpuCoresDataData"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    :format-date="props.formatDate"
-    project="procurator"
-    @update-tools="emits('update-tools', $event)"
-    @open-advanced-page="emits('open-advanced-page')"
-    @select-row="emits('select-row', $event)"
-    @select-metric-local="emits('select-metric-local', $event)"
-    @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
-    @delete-option="emits('delete-option')"
-    @submit-options="emits('submit-options', $event)"
-  />
-  <common-monitor-advanced-old
-    v-else
-    v-model:selected-timespan-type="localSelectedTimespanType"
-    :type="props.type"
-    :is-empty="props.isEmpty"
-    :advanced-loading="props.advancedLoading"
-    :data="props.data"
-    :table-data="props.tableData"
-    :language="props.language"
-    :dark-mode="props.darkMode"
-    :formatted-datetime="props.formattedDatetime"
-    :get-date-format="props.getDateFormat"
-    :selected-counters-keys="props.selectedCountersKeys"
-    :selected-metric="props.selectedMetric"
-    :selected-metric-local="props.selectedMetricLocal"
-    :selected-chart-type="props.selectedChartType"
-    :units-count="props.unitsCount"
-    :period-type="props.periodType"
-    :selected-custom-time="props.selectedCustomTime"
-    :selected-chart-option-name="props.selectedChartOptionName"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :host-id="props.hostId"
-    :selected-objects="props.selectedObjects"
-    :cpu-cores-data-data="props.cpuCoresDataData"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    :format-date="props.formatDate"
-    project="procurator"
-    @update-tools="emits('update-tools', $event)"
-    @open-advanced-page="emits('open-advanced-page')"
-    @select-row="emits('select-row', $event)"
-    @select-metric-local="emits('select-metric-local', $event)"
-    @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
-    @delete-option="emits('delete-option')"
-    @submit-options="emits('submit-options', $event)"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
-import type { I_SeriesLine } from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
-import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
-import type {
-  UI_T_ChartHost,
-  UI_T_ChartVm,
-} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
-import type { UI_I_MonitorGraphPayload } from '~/components/common/monitor/lib/models/interfaces'
-import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
-import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
-
-const props = defineProps<{
-  type: UI_T_AdvancedType
-  advancedLoading: boolean
-  data: I_SeriesLine | null
-  cpuCoresDataData: I_SeriesLine | null
-  tableData: UI_I_PerformanceItem[] | []
-  language: string
-  darkMode: boolean
-  formattedDatetime: any
-  getDateFormat: any
-  selectedCountersKeys: number[]
-  selectedMetric: UI_T_ChartHost | UI_T_ChartVm
-  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
-  selectedChartType: string
-  selectedTimespanType: string
-  unitsCount: number
-  periodType: string
-  selectedCustomTime: string
-  selectedChartOptionName: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: string
-  hostId: string
-  selectedObjects: string
-  project: UI_T_Project
-  objectsLoading: boolean
-  objectsData: UI_I_ObjectItem[]
-  validDateEnd: number
-  formatDate: string
-  disabledPeriod?: boolean
-  disabledView?: boolean
-  isEmpty?: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'update:selected-timespan-type', value: string): void
-  (event: 'update-tools', value: UI_I_MonitorGraphPayload): void
-  (event: 'open-advanced-page'): void
-  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
-  (event: 'select-metric-local', value: string): void
-  (event: 'update-chart-type', value: string): void
-  (event: 'update-timespan-type', value: string): void
-  (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
-  (event: 'update-custom-time', value: string): void
-  (event: 'delete-option'): void
-  (event: 'submit-options', value: UI_I_OptionsForm): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const localSelectedTimespanType = computed<string>({
-  get() {
-    return props.selectedTimespanType
-  },
-  set(newValue) {
-    emits('update:selected-timespan-type', newValue)
-  },
-})
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-monitor-advanced-new
+    v-if="isNewView"
+    v-model:selected-timespan-type="localSelectedTimespanType"
+    :type="props.type"
+    :is-empty="props.isEmpty"
+    :advanced-loading="props.advancedLoading"
+    :data="props.data"
+    :export-graph-type="exportGraphType"
+    :table-data="props.tableData"
+    :language="props.language"
+    :dark-mode="props.darkMode"
+    :selected-counters-keys="props.selectedCountersKeys"
+    :selected-metric="props.selectedMetric"
+    :selected-metric-local="props.selectedMetricLocal"
+    :selected-chart-type="props.selectedChartType"
+    :units-count="props.unitsCount"
+    :period-type="props.periodType"
+    :selected-custom-time="props.selectedCustomTime"
+    :selected-chart-option-name="props.selectedChartOptionName"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    :total-cores="totalCores"
+    :host-id="props.hostId"
+    :selected-objects="props.selectedObjects"
+    :objects-loading="props.objectsLoading"
+    :objects-data="props.objectsData"
+    :valid-date-end="props.validDateEnd"
+    :format-date="props.formatDate"
+    :selected-table-row="selectedTableRow"
+    project="procurator"
+    @update-tools="emits('update-tools', $event)"
+    @export-graph="onExporting"
+    @open-advanced-page="emits('open-advanced-page')"
+    @select-row="emits('select-row', $event)"
+    @select-metric-local="emits('select-metric-local', $event)"
+    @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
+    @delete-option="emits('delete-option')"
+    @submit-options="emits('submit-options', $event)"
+    @selected-table-row="onSelectTableRow"
+  />
+  <common-monitor-advanced-old
+    v-else
+    v-model:selected-timespan-type="localSelectedTimespanType"
+    :type="props.type"
+    :is-empty="props.isEmpty"
+    :advanced-loading="props.advancedLoading"
+    :data="props.data"
+    :export-graph-type="exportGraphType"
+    :table-data="props.tableData"
+    :language="props.language"
+    :dark-mode="props.darkMode"
+    :selected-counters-keys="props.selectedCountersKeys"
+    :selected-metric="props.selectedMetric"
+    :selected-metric-local="props.selectedMetricLocal"
+    :selected-chart-type="props.selectedChartType"
+    :units-count="props.unitsCount"
+    :period-type="props.periodType"
+    :selected-custom-time="props.selectedCustomTime"
+    :selected-chart-option-name="props.selectedChartOptionName"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    :total-cores="totalCores"
+    :host-id="props.hostId"
+    :selected-objects="props.selectedObjects"
+    :objects-loading="props.objectsLoading"
+    :objects-data="props.objectsData"
+    :valid-date-end="props.validDateEnd"
+    :format-date="props.formatDate"
+    :selected-table-row="selectedTableRow"
+    project="procurator"
+    @update-tools="emits('update-tools', $event)"
+    @export-graph="onExporting"
+    @open-advanced-page="emits('open-advanced-page')"
+    @select-row="emits('select-row', $event)"
+    @select-metric-local="emits('select-metric-local', $event)"
+    @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
+    @delete-option="emits('delete-option')"
+    @submit-options="emits('submit-options', $event)"
+    @selected-table-row="onSelectTableRow"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
+import type { I_SeriesLine } from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+import type {
+  UI_T_ChartHost,
+  UI_T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
+import type { UI_I_MonitorGraphPayload } from '~/components/common/monitor/lib/models/interfaces'
+import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
+import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
+import { getCountCores } from '~/components/common/monitor/advanced/tools/lib/utils/countCores'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  advancedLoading: boolean
+  data: I_SeriesLine | null
+  cpuCoresDataData: I_SeriesLine | null
+  tableData: UI_I_PerformanceItem[] | []
+  language: string
+  darkMode: boolean
+  selectedCountersKeys: number[]
+  selectedMetric: UI_T_ChartHost | UI_T_ChartVm
+  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  selectedChartOptionName: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  hostId: string
+  selectedObjects: string
+  project: UI_T_Project
+  objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+  formatDate: string
+  disabledPeriod?: boolean
+  disabledView?: boolean
+  isEmpty?: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:selected-timespan-type', value: string): void
+  (event: 'update-tools', value: UI_I_MonitorGraphPayload): void
+  (event: 'open-advanced-page'): void
+  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
+  (event: 'select-metric-local', value: string): void
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-timespan-type', value: string): void
+  (event: 'update-unit-count', value: number): void
+  (event: 'update-period-type', value: string): void
+  (event: 'update-custom-time', value: string): void
+  (event: 'delete-option'): void
+  (event: 'submit-options', value: UI_I_OptionsForm): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+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.cpuCoresDataData,
+  (newValue) => {
+    if (!newValue || !isFirstUpdate) return
+
+    totalCores.value = getCountCores(newValue)
+    isFirstUpdate = false
+  },
+  { immediate: true }
+)
+
+const exportGraphType = ref<string>('')
+const onExporting = (key: string): void => {
+  exportGraphType.value = key
+}
+
+const selectedTableRow = ref<number[]>([])
+const onSelectTableRow = (data: number[]): void => {
+  selectedTableRow.value = data
+}
+</script>
+
+<style scoped lang="scss"></style>