bfg-common 1.5.11 → 1.5.12

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

@@ -1,294 +1,294 @@
-<template>
-  <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object-object-new
-    v-if="isNewView"
-    v-model:selected-row="selectedRow"
-    :table-type="tableType"
-    :loading="props.loading"
-    :body-items="bodyItems"
-  />
-  <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object-object-old
-    v-else
-    v-model:selected-row="selectedRow"
-    v-model:column-items="columnItems"
-    v-model:pagination="pagination"
-    :table-type="tableType"
-    :loading="props.loading"
-    :head-items="headItems"
-    :body-items="bodyItems"
-  />
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_HeadItem,
-  UI_I_BodyItem,
-  UI_I_ColumnKey,
-} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
-import type { UI_I_AdvancedTargetObject } 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_DataGridType } from '~/components/atoms/table/dataGrid/lib/models/types'
-import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
-import type {
-  UI_T_ChartHost,
-  UI_T_ChartVm,
-} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
-import * as table from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/config/objectTable'
-
-const props = defineProps<{
-  type: UI_T_AdvancedType
-  chart: UI_T_ChartHost | UI_T_ChartVm
-  totalCores: number
-  hostId: string
-  selectedMetricsKeys: number[]
-  totalMetricItems: number
-  selectedObjects: string
-  loading: boolean
-  currentItems: UI_I_ObjectItem[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-objects', value: string): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const tableType = computed<UI_T_DataGridType>(() => {
-  let result = 'checkbox'
-
-  if (props.type === 'host') {
-    result = ['disk', 'network'].includes(props.chart) ? 'radio' : 'checkbox'
-  }
-
-  return result
-})
-
-const selectedRow = ref<number[] | number>([])
-const pagination = ref<UI_I_Pagination>({
-  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[] = []
-let firstRequest = false
-const getTotalCores = (): void => {
-  if (
-    props.selectedMetricsKeys.includes(1) &&
-    !props.totalCores &&
-    !firstRequest
-  ) {
-    firstRequest = true
-  }
-}
-const updateSelectedRow = (): void => {
-  if (selectedRow.value.length) return
-
-  if (props.type === 'vm' && props.chart === 'network') {
-    selectedRow.value = []
-
-    if (props.currentItems.length === 1) selectedRow.value.push(0)
-    else if (props.currentItems.length > 1) {
-      const totalIndex = props.currentItems.findIndex(
-        (item) => item.target_object.toLowerCase() === 'total'
-      )
-
-      totalIndex >= 0 && selectedRow.value.push(totalIndex)
-    }
-  }
-}
-watch(
-  () => props.selectedMetricsKeys,
-  () => {
-    getTotalCores()
-  },
-  { deep: true }
-)
-watch(
-  () => [
-    props.type,
-    props.chart,
-    props.totalCores,
-    props.hostId,
-    props.selectedMetricsKeys,
-    props.currentItems,
-  ],
-  (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: 'core' + i,
-          })
-        }
-      }
-      if (newValue[4].includes(2)) {
-        for (let i = 0; i < newValue[2]; i++) {
-          items.push({
-            id: 'core' + i + 'MHz',
-            target_object: 'core' + i + 'MHz',
-          })
-        }
-      }
-      if (newValue[4].includes(3)) {
-        items.push({
-          id: 'totalMHz',
-          target_object: 'totalMHz',
-        })
-      }
-      if (newValue[4].includes(4)) {
-        items.push({
-          id: 'averageMHz',
-          target_object: 'averageMHz',
-        })
-      }
-    } else if (
-      newValue[0] === 'host' &&
-      ['disk', 'network'].includes(newValue[1])
-    ) {
-      let newItems = []
-
-      if (newValue[1] === 'network')
-        newItems.push({
-          id: 'total',
-          // target_object: localization.value.common.total.toLowerCase(),
-          target_object: 'total',
-        })
-
-      newItems = [...newItems, ...props.currentItems]
-
-      items = newItems
-    } else if (newValue[0] === 'vm' && newValue[1] === 'network') {
-      items = [...props.currentItems]
-    }
-
-    bodyItems.value = table.bodyItems(items)
-    updateSelectedRow()
-  },
-  { immediate: true, deep: true }
-)
-
-watch(
-  selectedRow,
-  (newValue) => {
-    const selectedItems: string[] = []
-
-    if (props.type === 'host' && ['disk', 'network'].includes(props.chart)) {
-      selectedItems.push(items[newValue]?.target_object)
-    } else if (props.type === 'vm' && ['network'].includes(props.chart)) {
-      newValue.forEach((key) => {
-        const newItem = items[key]?.target_object
-        newItem && selectedItems.push(newItem)
-      })
-    } else
-      newValue.forEach((key) => {
-        selectedItems.push(items[key].id)
-      })
-
-    let selectedNames = ''
-
-    if (
-      items.length === newValue.length &&
-      props.selectedMetricsKeys.length === props.totalMetricItems
-    ) {
-      selectedNames = '*'
-
-      if (props.type === 'vm') selectedNames = 'total'
-    } else selectedNames = selectedItems.join(', ')
-
-    /* if (props.type === 'vm' && ['network'].includes(props.chart)) {
-            if (
-              selectedItems.includes('total') ||
-              (!selectedItems.includes('total') &&
-                items.length === newValue.length + 1)
-            )
-              selectedNames = 'total'
-          } */
-
-    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.includes(0))
-            selectedKeys.push(0)
-          if (selectedNames.includes(item[0].text))
-            selectedKeys.push(item[0].id)
-        })
-        selectedRow.value = selectedKeys
-      }
-    } else if (
-      props.type === 'host' &&
-      ['disk', 'network'].includes(props.chart)
-    ) {
-      if (selected) {
-        const selectedId = all.find((item) => item[0].text === selected)?.[0]
-          ?.id
-        typeof selectedId === 'number' && (selectedRow.value = selectedId)
-      }
-    }
-  },
-  { 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>
+<template>
+  <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object-object-new
+    v-if="isNewView"
+    v-model:selected-row="selectedRow"
+    :table-type="tableType"
+    :loading="props.loading"
+    :body-items="bodyItems"
+  />
+  <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object-object-old
+    v-else
+    v-model:selected-row="selectedRow"
+    v-model:column-items="columnItems"
+    v-model:pagination="pagination"
+    :table-type="tableType"
+    :loading="props.loading"
+    :head-items="headItems"
+    :body-items="bodyItems"
+  />
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type { UI_I_AdvancedTargetObject } 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_DataGridType } from '~/components/atoms/table/dataGrid/lib/models/types'
+import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
+import type {
+  UI_T_ChartHost,
+  UI_T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
+import * as table from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/config/objectTable'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  chart: UI_T_ChartHost | UI_T_ChartVm
+  totalCores: number
+  hostId: string
+  selectedMetricsKeys: number[]
+  totalMetricItems: number
+  selectedObjects: string
+  loading: boolean
+  currentItems: UI_I_ObjectItem[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-objects', value: string): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const tableType = computed<UI_T_DataGridType>(() => {
+  let result = 'checkbox'
+
+  if (props.type === 'host') {
+    result = ['disk', 'network'].includes(props.chart) ? 'radio' : 'checkbox'
+  }
+
+  return result
+})
+
+const selectedRow = ref<number[] | number>([])
+const pagination = ref<UI_I_Pagination>({
+  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[] = []
+let firstRequest = false
+const getTotalCores = (): void => {
+  if (
+    props.selectedMetricsKeys.includes(1) &&
+    !props.totalCores &&
+    !firstRequest
+  ) {
+    firstRequest = true
+  }
+}
+const updateSelectedRow = (): void => {
+  if (selectedRow.value.length) return
+
+  if (props.type === 'vm' && props.chart === 'network') {
+    selectedRow.value = []
+
+    if (props.currentItems.length === 1) {
+      selectedRow.value.push(0)
+    } else if (props.currentItems.length > 1) {
+      const totalIndex = props.currentItems.findIndex(
+        (item) => item.target_object.toLowerCase() === 'total'
+      )
+
+      totalIndex >= 0 && selectedRow.value.push(totalIndex)
+    }
+  }
+}
+watch(
+  () => props.selectedMetricsKeys,
+  () => {
+    getTotalCores()
+  },
+  { deep: true }
+)
+watch(
+  () => [
+    props.type,
+    props.chart,
+    props.totalCores,
+    props.hostId,
+    props.selectedMetricsKeys,
+    props.currentItems,
+  ],
+  (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: 'core' + i,
+          })
+        }
+      }
+      if (newValue[4].includes(2)) {
+        for (let i = 0; i < newValue[2]; i++) {
+          items.push({
+            id: 'core' + i + 'MHz',
+            target_object: 'core' + i + 'MHz',
+          })
+        }
+      }
+      if (newValue[4].includes(3)) {
+        items.push({
+          id: 'totalMHz',
+          target_object: 'totalMHz',
+        })
+      }
+      if (newValue[4].includes(4)) {
+        items.push({
+          id: 'averageMHz',
+          target_object: 'averageMHz',
+        })
+      }
+    } else if (
+      newValue[0] === 'host' &&
+      ['disk', 'network'].includes(newValue[1])
+    ) {
+      let newItems = []
+
+      if (newValue[1] === 'network')
+        newItems.push({
+          id: 'total',
+          // target_object: localization.value.common.total.toLowerCase(),
+          target_object: 'total',
+        })
+
+      newItems = [...newItems, ...props.currentItems]
+
+      items = newItems
+    } else if (newValue[0] === 'vm' && newValue[1] === 'network') {
+      items = [...props.currentItems]
+    }
+
+    bodyItems.value = table.bodyItems(items)
+    updateSelectedRow()
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  selectedRow,
+  (newValue) => {
+    const selectedItems: string[] = []
+
+    if (props.type === 'host' && ['disk', 'network'].includes(props.chart)) {
+      selectedItems.push(items[newValue]?.target_object)
+    } else if (props.type === 'vm' && ['network'].includes(props.chart)) {
+      newValue.forEach((key) => {
+        const newItem = items[key]?.target_object
+        newItem && selectedItems.push(newItem)
+      })
+    } else
+      newValue.forEach((key) => {
+        selectedItems.push(items[key].id)
+      })
+
+    let selectedNames = ''
+
+    if (
+      items.length === newValue.length &&
+      props.selectedMetricsKeys.length === props.totalMetricItems
+    ) {
+      selectedNames = '*'
+
+      if (props.type === 'vm') selectedNames = 'total'
+    } else selectedNames = selectedItems.join(', ')
+
+    /* if (props.type === 'vm' && ['network'].includes(props.chart)) {
+        if (
+          selectedItems.includes('total') ||
+          (!selectedItems.includes('total') &&
+            items.length === newValue.length + 1)
+        )
+          selectedNames = 'total'
+      } */
+
+    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
+      }
+    } else if (
+      props.type === 'host' &&
+      ['disk', 'network'].includes(props.chart)
+    ) {
+      if (selected) {
+        const selectedId = all.find((item) => item[0].text === selected)?.[0]
+          ?.id
+        typeof selectedId === 'number' && (selectedRow.value = selectedId)
+      }
+    }
+  },
+  { 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>