bfg-common 1.1.76 → 1.1.78

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

@@ -1,73 +1,76 @@
-<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"
+      @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

@@ -1,129 +1,176 @@
-<template>
-  <div class="vertical-flex-container chart-option-objects-split">
-    <span class="chart-options-grid-title">
-      {{ localization.selectObjectForChart }}:
-    </span>
-    <div class="flex-to-absolute-positioning-container">
-      <div class="flex-to-absolute-positioning-container-inner">
-        <atoms-table-data-grid
-          v-model:selected-row="selectedRow"
-          v-model:column-keys="columnItems"
-          v-model:page-size="pagination.pageSize"
-          v-model:page="pagination.page"
-          type="checkbox"
-          class="data-table"
-          :head-items="headItems"
-          :body-items="bodyItems"
-          :total-items="bodyItems.length"
-          :total-pages="1"
-          hide-footer
-          server-off
-        >
-        </atoms-table-data-grid>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_HeadItem,
-  UI_I_BodyItem,
-  UI_I_ColumnKey,
-} from '~/components/atoms/table/dataGrid/models/interfaces'
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_AdvancedTargetObject } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
-import * as table from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/config/objectTable'
-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
-  totalCores: number
-  hostId: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-objects', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const selectedRow = ref<number[]>([])
-const pagination = ref<any>({
-  page: 1,
-  pageSize: 35,
-})
-
-const headItems = computed<UI_I_HeadItem[]>(() =>
-  table.headItems(localization.value)
-)
-const columnItems = computed<UI_I_ColumnKey[]>(() =>
-  table.columnKeys(localization.value)
-)
-
-const bodyItems = ref<UI_I_BodyItem[][]>([])
-
-const items: UI_I_AdvancedTargetObject[] = []
-watch(
-  () => [props.type, props.chart, props.totalCores, props.hostId],
-  (newValue) => {
-    if (newValue[0] === 'host' && newValue[1] === 'cpu') {
-      items.push({
-        id: 'total',
-        target_object: newValue[3],
-      })
-      for (let i = 0; i < newValue[2]; i++) {
-        items.push({
-          id: 'core' + i,
-          target_object: '' + i,
-        })
-      }
-      bodyItems.value = table.bodyItems(items)
-    }
-  },
-  { immediate: true }
-)
-
-watch(selectedRow, (newValue) => {
-  const selectedItems: number[] = []
-
-  newValue.forEach((key) => {
-    selectedItems.push(+items[key].id)
-  })
-
-  const selectedNames =
-    items.length === newValue.length ? '*' : selectedItems.join(', ')
-  emits('select-objects', selectedNames)
-})
-</script>
-
-<style scoped lang="scss">
-.chart-option-objects-split {
-  flex: 1;
-
-  .chart-options-grid-title {
-    display: block;
-    margin-bottom: -20px;
-  }
-  .flex-to-absolute-positioning-container {
-    height: 100%;
-    max-height: 204px;
-    .flex-to-absolute-positioning-container-inner {
-      height: inherit;
-
-      .data-table {
-        height: inherit;
-
-        :deep(.datagrid-outer-wrapper) {
-          height: inherit;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="vertical-flex-container chart-option-objects-split">
+    <span class="chart-options-grid-title">
+      {{ localization.selectObjectForChart }}:
+    </span>
+    <div class="flex-to-absolute-positioning-container">
+      <div class="flex-to-absolute-positioning-container-inner">
+        <atoms-table-data-grid
+          v-model:selected-row="selectedRow"
+          v-model:column-keys="columnItems"
+          v-model:page-size="pagination.pageSize"
+          v-model:page="pagination.page"
+          type="checkbox"
+          class="data-table"
+          :head-items="headItems"
+          :body-items="bodyItems"
+          :total-items="bodyItems.length"
+          :total-pages="1"
+          hide-footer
+          server-off
+        >
+        </atoms-table-data-grid>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_AdvancedTargetObject } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+import * as table from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/config/objectTable'
+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
+  totalCores: number
+  hostId: string
+  selectedMetricsKeys: number[]
+  totalMetricItems: number
+  selectedObjects: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-objects', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = ref<number[]>([])
+const pagination = ref<any>({
+  page: 1,
+  pageSize: 35,
+})
+
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+const columnItems = computed<UI_I_ColumnKey[]>(() =>
+  table.columnKeys(localization.value)
+)
+
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+
+let items: UI_I_AdvancedTargetObject[] = []
+watch(
+  () => [
+    props.type,
+    props.chart,
+    props.totalCores,
+    props.hostId,
+    props.selectedMetricsKeys,
+  ],
+  (newValue) => {
+    items = []
+    selectedRow.value = []
+
+    if (newValue[0] === 'host' && newValue[1] === 'cpu') {
+      if (newValue[4].includes(0)) {
+        items.push({
+          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: string[] = []
+
+    newValue.forEach((key) => {
+      selectedItems.push(items[key].id)
+    })
+
+    const selectedNames =
+      items.length === newValue.length &&
+      props.selectedMetricsKeys.length === props.totalMetricItems
+        ? '*'
+        : selectedItems.join(', ')
+
+    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">
+.chart-option-objects-split {
+  flex: 1;
+
+  .chart-options-grid-title {
+    display: block;
+    margin-bottom: -20px;
+  }
+  .flex-to-absolute-positioning-container {
+    height: 100%;
+    max-height: 204px;
+    .flex-to-absolute-positioning-container-inner {
+      height: inherit;
+
+      .data-table {
+        height: inherit;
+
+        :deep(.datagrid-outer-wrapper) {
+          height: inherit;
+        }
+      }
+    }
+  }
+}
+</style>

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/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>