bfg-common 1.1.80 → 1.1.82

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

@@ -1,73 +1,79 @@
-<template>
-  <div class="timespan-objects-section-direction flex horizontal">
-    <common-monitor-advanced-tools-chart-options-modal-counters-timespan-form
-      :language="props.language"
-      :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"
-      @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)"
-    />
-  </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'
-
-const props = defineProps<{
-  type: UI_T_AdvancedType
-  chart: T_ChartHost | T_ChartVm
-  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<{
-  (event: 'update-chart-type', value: string): void
-  (event: 'update-custom-time', 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-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>
-
-<style scoped lang="scss"></style>
+<template>
+  <div class="timespan-objects-section-direction flex horizontal">
+    <common-monitor-advanced-tools-chart-options-modal-counters-timespan-form
+      :language="props.language"
+      :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"
+      @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"
+      :selected-metrics-keys="props.selectedMetricsKeys"
+      :total-metric-items="props.totalMetricItems"
+      :selected-objects="props.selectedObjects"
+      @select-objects="emits('select-objects', $event)"
+    />
+  </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'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  chart: T_ChartHost | T_ChartVm
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
+  selectedMetricsKeys: number[]
+  totalMetricItems: number
+  selectedObjects: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-custom-time', 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-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>
+
+<style scoped lang="scss"></style>

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/components/common/perPage/PerPage.vue

@@ -1,51 +1,51 @@
-<template>
-  <div class="page-size">
-    {{ selectLabel }}
-
-    <div class="clr-select-wrapper">
-      <select
-        :id="`${props.testId}-page-size-select`"
-        :value="props.pageSize"
-        class="clr-page-size-select"
-        @change="change"
-      >
-        <option
-          v-for="(item, key) in props.options"
-          :key="key"
-          :value="item.value"
-        >
-          {{ item.text }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    testId: string
-    pageSize: number
-    options: UI_I_OptionItem[]
-    label?: string
-  }>(),
-  {
-    label: 'itemsPerPage',
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', num: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const selectLabel = computed<string>(() => localization.value[props.label])
-
-const change = (e: InputEvent): void => {
-  emits('change', +(e.target as HTMLInputElement).value)
-}
-</script>
-
-<style scoped></style>
+<template>
+  <div class="page-size">
+    {{ selectLabel }}
+
+    <div class="clr-select-wrapper">
+      <select
+        :id="`${props.testId}-page-size-select`"
+        :value="props.pageSize"
+        class="clr-page-size-select"
+        @change="change"
+      >
+        <option
+          v-for="(item, key) in props.options"
+          :key="key"
+          :value="item.value"
+        >
+          {{ item.text }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId: string
+    pageSize: number
+    options: UI_I_OptionItem[]
+    label?: string
+  }>(),
+  {
+    label: 'itemsPerPage',
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', num: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const selectLabel = computed<string>(() => localization.value[props.label])
+
+const change = (e: InputEvent): void => {
+  emits('change', +(e.target as HTMLInputElement).value)
+}
+</script>
+
+<style scoped></style>