bfg-common 1.4.839 → 1.4.841

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

@@ -1,206 +1,181 @@
-<template>
-  <div class="advanced">
-    <h3 class="title">
-      {{ localization.inventoryMonitor.advancedPerformance }}
-    </h3>
-    <div v-if="props.isEmpty" class="empty-data">
-      <ui-not-found text="">
-        <span class="no-items-found-title">{{
-          localization.common.noItemsFound
-        }}</span>
-        <span class="no-items-found-description">{{
-          localization.inventoryMonitor.emptyAdvancedGraphText
-        }}</span>
-      </ui-not-found>
-    </div>
-    <template v-else>
-      <common-monitor-advanced-tools
-        v-model:selected-timespan-type="localSelectedTimespanType"
-        :type="props.type"
-        :start-date="props.data?.pointStart || 0"
-        :end-date="props.data?.pointEnd || 0"
-        :chart-title="props.data?.groupName || ''"
-        :language="props.language"
-        :selected-counters-keys="props.selectedCountersKeys"
-        :selected-metric="props.selectedMetric"
-        :selected-metric-local="props.selectedMetricLocal"
-        :disabled-period="props.disabledPeriod"
-        :disabled-view="props.disabledView"
-        :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"
-        :project="props.project"
-        :objects-loading="props.objectsLoading"
-        :objects-data="props.objectsData"
-        :valid-date-end="props.validDateEnd"
-        :format-date="props.formatDate"
-        @update-tools="emits('update-tools', $event)"
-        @exporting="onExporting"
-        @open-advanced-page="onGetEmptyPage"
-        @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)"
-      />
-      <div class="graph-container">
-        <common-monitor-advanced-graph-view
-          :loading="props.advancedLoading"
-          :data="props.data"
-          :export="exportGraph"
-          :selected-row="selectedRow"
-          :dark-mode="props.darkMode"
-          :formatted-datetime="props.formattedDatetime"
-          :get-date-format="props.getDateFormat"
-          :language="props.language"
-          :selected-chart-type="props.selectedChartType"
-        />
-      </div>
-      <common-monitor-advanced-table
-        :loading="props.advancedLoading"
-        :data="props.tableData"
-        @select="onCheckSelectedRow"
-      />
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-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_MonitorGraphPayload } from '~/components/common/monitor/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_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
-import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
-import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-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
-  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-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
-  (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.cpuCoresDataData,
-  (newValue) => {
-    if (!newValue || !isFirstUpdate) return
-
-    totalCores.value = getCountCores(newValue)
-    isFirstUpdate = false
-  },
-  { immediate: true }
-)
-
-const exportGraph = ref<string>('')
-const onExporting = (key: string): void => {
-  exportGraph.value = key
-}
-
-const onGetEmptyPage = (): void => emits('open-advanced-page')
-
-const selectedRow = ref<number[]>([])
-const onCheckSelectedRow = (data: number[]): void => {
-  selectedRow.value = data
-}
-</script>
-
-<style>
-:root {
-  --advanced-text-color: #4d5d69;
-}
-:root.dark-theme {
-  --advanced-text-color: #e9eaec;
-}
-</style>
-<style scoped lang="scss">
-.advanced {
-  overflow: hidden;
-
-  .title {
-    font-size: 18px;
-    font-weight: 500;
-    padding: 16px 6px 12px 6px;
-    color: var(--advanced-text-color);
-  }
-  .graph-container {
-    margin: 0 6px 0 6px;
-  }
-}
-</style>
+<template>
+  <div class="advanced">
+    <h3 class="title">
+      {{ localization.inventoryMonitor.advancedPerformance }}
+    </h3>
+    <div v-if="props.isEmpty" class="empty-data">
+      <ui-not-found text="">
+        <span class="no-items-found-title">{{
+          localization.common.noItemsFound
+        }}</span>
+        <span class="no-items-found-description">{{
+          localization.inventoryMonitor.emptyAdvancedGraphText
+        }}</span>
+      </ui-not-found>
+    </div>
+    <template v-else>
+      <common-monitor-advanced-tools
+        v-model:selected-timespan-type="localSelectedTimespanType"
+        :type="props.type"
+        :start-date="props.data?.pointStart || 0"
+        :end-date="props.data?.pointEnd || 0"
+        :chart-title="props.data?.groupName || ''"
+        :language="props.language"
+        :selected-counters-keys="props.selectedCountersKeys"
+        :selected-metric="props.selectedMetric"
+        :selected-metric-local="props.selectedMetricLocal"
+        :disabled-period="props.disabledPeriod"
+        :disabled-view="props.disabledView"
+        :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="props.totalCores"
+        :host-id="props.hostId"
+        :selected-objects="props.selectedObjects"
+        :project="props.project"
+        :objects-loading="props.objectsLoading"
+        :objects-data="props.objectsData"
+        :valid-date-end="props.validDateEnd"
+        :format-date="props.formatDate"
+        @update-tools="emits('update-tools', $event)"
+        @exporting="emits('export-graph', $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)"
+      />
+      <div class="graph-container">
+        <common-monitor-advanced-graph-view
+          :loading="props.advancedLoading"
+          :data="props.data"
+          :export="props.exportGraphType"
+          :selected-row="props.selectedTableRow"
+          :dark-mode="props.darkMode"
+          :language="props.language"
+          :selected-chart-type="props.selectedChartType"
+          @open-advanced-page="emits('open-advanced-page')"
+        />
+      </div>
+      <common-monitor-advanced-table
+        :loading="props.advancedLoading"
+        :data="props.tableData"
+        @select="emits('selected-table-row', $event)"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+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_MonitorGraphPayload } from '~/components/common/monitor/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_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
+import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
+import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  advancedLoading: boolean
+  data: I_SeriesLine | null
+  exportGraphType: string
+  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
+  totalCores: number
+  hostId: string
+  selectedObjects: string
+  project: UI_T_Project
+  objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+  formatDate: string
+  selectedTableRow: number[]
+  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: 'export-graph', value: string): 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
+  (event: 'selected-table-row', value: number[]): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const localSelectedTimespanType = computed<string>({
+  get() {
+    return props.selectedTimespanType
+  },
+  set(newValue) {
+    emits('update:selected-timespan-type', newValue)
+  },
+})
+</script>
+
+<style>
+:root {
+  --advanced-text-color: #4d5d69;
+}
+:root.dark-theme {
+  --advanced-text-color: #e9eaec;
+}
+</style>
+<style scoped lang="scss">
+.advanced {
+  overflow: hidden;
+
+  .title {
+    font-size: 18px;
+    font-weight: 500;
+    padding: 16px 6px 12px 6px;
+    color: var(--advanced-text-color);
+  }
+  .graph-container {
+    margin: 0 6px 0 6px;
+  }
+}
+</style>

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

@@ -32,7 +32,7 @@
             :custom-date-to="props.customDateTo"
             :custom-time-from="props.customTimeFrom"
             :custom-time-to="props.customTimeTo"
-            :total-cores="totalCores"
+            :total-cores="props.totalCores"
             :host-id="props.hostId"
             :selected-objects="props.selectedObjects"
             :project="props.project"
@@ -41,8 +41,8 @@
             :valid-date-end="props.validDateEnd"
             :format-date="props.formatDate"
             @update-tools="emits('update-tools', $event)"
-            @exporting="onExporting"
-            @open-advanced-page="onGetEmptyPage"
+            @exporting="emits('export-graph', $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)"
@@ -66,19 +66,17 @@
               <common-monitor-advanced-graph-view
                 :loading="props.advancedLoading"
                 :data="props.data"
-                :update="update"
-                :export="exportGraph"
-                :selected-row="selectedRow"
+                :export="props.exportGraphType"
+                :selected-row="props.selectedTableRow"
                 :dark-mode="props.darkMode"
-                :formatted-datetime="props.formattedDatetime"
-                :get-date-format="props.getDateFormat"
                 :language="props.language"
                 :selected-chart-type="props.selectedChartType"
               />
               <div class="datatable">
                 <common-monitor-advanced-table
+                  :loading="props.advancedLoading"
                   :data="props.tableData"
-                  @select="onCheckSelectedRow"
+                  @select="emits('selected-table-row', $event)"
                 />
               </div>
             </div>
@@ -103,18 +101,15 @@ import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tool
 import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
 import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
 import type { UI_T_Project } from '~/lib/models/types'
-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
+  exportGraphType: string
   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
@@ -128,6 +123,7 @@ const props = defineProps<{
   customDateTo: string
   customTimeFrom: string
   customTimeTo: string
+  totalCores: number
   hostId: string
   selectedObjects: string
   project: UI_T_Project
@@ -135,6 +131,7 @@ const props = defineProps<{
   objectsData: UI_I_ObjectItem[]
   validDateEnd: number
   formatDate: string
+  selectedTableRow: number[]
   disabledPeriod?: boolean
   disabledView?: boolean
   isEmpty?: boolean
@@ -143,6 +140,7 @@ const props = defineProps<{
 const emits = defineEmits<{
   (event: 'update:selected-timespan-type', value: string): void
   (event: 'update-tools', value: UI_I_MonitorGraphPayload): void
+  (event: 'export-graph', value: string): void
   (event: 'open-advanced-page'): void
   (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
   (event: 'select-metric-local', value: string): void
@@ -153,6 +151,7 @@ const emits = defineEmits<{
   (event: 'update-custom-time', value: string): void
   (event: 'delete-option'): void
   (event: 'submit-options', value: UI_I_OptionsForm): void
+  (event: 'selected-table-row', value: number[]): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -165,33 +164,6 @@ const localSelectedTimespanType = computed<string>({
     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 exportGraph = ref<string>('')
-const onExporting = (key: string): void => {
-  exportGraph.value = key
-}
-
-const onGetEmptyPage = (): void => emits('open-advanced-page')
-
-const update = ref<number>(0)
-
-const selectedRow = ref<number[]>([])
-const onCheckSelectedRow = (data: number[]): void => {
-  selectedRow.value = data
-}
 </script>
 
 <style scoped lang="scss">