bfg-common 1.0.24 → 1.0.26

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/form/config/dateForm.ts

@@ -1,59 +1,59 @@
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-export const timespanFunc = (localization: UI_I_Localization): UI_I_OptionItem[] => [
-  {
-    text: localization.realTime,
-    value: 'real_time',
-  },
-  {
-    text: localization.lastDay,
-    value: 'last_day',
-  },
-  {
-    text: localization.lastWeek,
-    value: 'last_week',
-  },
-  {
-    text: localization.lastMonth,
-    value: 'last_month',
-  },
-  // {
-  //   text: localization.lastYear,
-  //   value: 'last_year',
-  // },
-  {
-    text: localization.customInterval,
-    value: 'custom_interval',
-  },
-]
-
-export const customTimeFunc = (localization: UI_I_Localization): UI_I_OptionItem[] => [
-  {
-    text: localization.hours2,
-    value: 'hours',
-  },
-  {
-    text: localization.days2,
-    value: 'days',
-  },
-  {
-    text: localization.weeks2,
-    value: 'weeks',
-  },
-  {
-    text: localization.months2,
-    value: 'months',
-  },
-]
-
-export const chartTypeFunc = (localization: UI_I_Localization): UI_I_OptionItem[] => [
-  {
-    text: localization.lineGraph,
-    value: 'line_graph',
-  },
-  {
-    text: localization.stackedGraph,
-    value: 'stacked_graph',
-  },
-]
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const timespanFunc = (localization: UI_I_Localization): UI_I_OptionItem[] => [
+  {
+    text: localization.realTime,
+    value: 'real_time',
+  },
+  {
+    text: localization.lastDay,
+    value: 'last_day',
+  },
+  {
+    text: localization.lastWeek,
+    value: 'last_week',
+  },
+  {
+    text: localization.lastMonth,
+    value: 'last_month',
+  },
+  // {
+  //   text: localization.lastYear,
+  //   value: 'last_year',
+  // },
+  {
+    text: localization.customInterval,
+    value: 'custom_interval',
+  },
+]
+
+export const customTimeFunc = (localization: UI_I_Localization): UI_I_OptionItem[] => [
+  {
+    text: localization.hours2,
+    value: 'hours',
+  },
+  {
+    text: localization.days2,
+    value: 'days',
+  },
+  {
+    text: localization.weeks2,
+    value: 'weeks',
+  },
+  {
+    text: localization.months2,
+    value: 'months',
+  },
+]
+
+export const chartTypeFunc = (localization: UI_I_Localization): UI_I_OptionItem[] => [
+  {
+    text: localization.lineGraph,
+    value: 'line_graph',
+  },
+  {
+    text: localization.stackedGraph,
+    value: 'stacked_graph',
+  },
+]

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

@@ -1,107 +1,107 @@
-<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_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/interfaces'
-
-const props = defineProps<{
-  selected: UI_I_AdvancedTargetObject[][]
-}>()
-
-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[][]>([])
-
-watch(
-  () => props.selected,
-  (val) => {
-    const items: UI_I_ObjectItem[] = []
-    if (!val.length) {
-      bodyItems.value = table.bodyItems(items)
-      return
-    }
-
-    val.forEach((itemArr) => {
-      itemArr.forEach((item) =>
-        items.push({
-          id: item.id,
-          target_object: item.target_object,
-        })
-      )
-    })
-
-    bodyItems.value = table.bodyItems(items)
-  },
-  { deep: 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%;
-    .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_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/interfaces'
+
+const props = defineProps<{
+  selected: UI_I_AdvancedTargetObject[][]
+}>()
+
+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[][]>([])
+
+watch(
+  () => props.selected,
+  (val) => {
+    const items: UI_I_ObjectItem[] = []
+    if (!val.length) {
+      bodyItems.value = table.bodyItems(items)
+      return
+    }
+
+    val.forEach((itemArr) => {
+      itemArr.forEach((item) =>
+        items.push({
+          id: item.id,
+          target_object: item.target_object,
+        })
+      )
+    })
+
+    bodyItems.value = table.bodyItems(items)
+  },
+  { deep: 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%;
+    .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/counters/timespan/object/config/objectTable.ts

@@ -1,54 +1,54 @@
-import { UI_I_Localization } from '~/models/interfaces'
-import {
-  UI_I_HeadItem,
-  UI_I_BodyItem,
-  UI_I_ColumnKey,
-} from '~/components/atoms/table/dataGrid/models/interfaces'
-import {
-  constructColumnKey,
-  constructHeadItem,
-} from '~/components/atoms/table/dataGrid/utils/constructDataTable'
-import { UI_T_ObjectColumnKey } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/types'
-import { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/interfaces'
-
-export const objectTableKey: UI_T_ObjectColumnKey[] = ['target_object']
-
-const getItems = (
-  localization: UI_I_Localization
-): [string, boolean, string, string][] => {
-  return [[localization.targetObjects, true, '140px', objectTableKey[0]]]
-}
-
-export const columnKeys = (localization: UI_I_Localization): UI_I_ColumnKey[] => {
-  const result: UI_I_ColumnKey[] = []
-  getItems(localization).forEach((item, i) => {
-    const col = `col${i + 1}`
-    result.push(constructColumnKey(col, item[0], item[1]))
-  })
-
-  return result
-}
-
-export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
-  const result: UI_I_HeadItem[] = []
-  getItems(localization).forEach((item, i) => {
-    const col = `col${i + 1}`
-    result.push(constructHeadItem(col, item[0], item[3], false, item[2]))
-  })
-  return result
-}
-
-export const bodyItems = (data: UI_I_ObjectItem[]): UI_I_BodyItem[][] => {
-  const bodyItems: UI_I_BodyItem[][] = []
-
-  data.forEach((object: UI_I_ObjectItem, key) => {
-    bodyItems.push([
-      {
-        key: 'col1',
-        text: object[objectTableKey[0]],
-        id: key,
-      },
-    ])
-  })
-  return bodyItems
-}
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import {
+  constructColumnKey,
+  constructHeadItem,
+} from '~/components/atoms/table/dataGrid/utils/constructDataTable'
+import { UI_T_ObjectColumnKey } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/types'
+import { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/interfaces'
+
+export const objectTableKey: UI_T_ObjectColumnKey[] = ['target_object']
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [[localization.targetObjects, true, '140px', objectTableKey[0]]]
+}
+
+export const columnKeys = (localization: UI_I_Localization): UI_I_ColumnKey[] => {
+  const result: UI_I_ColumnKey[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = `col${i + 1}`
+    result.push(constructColumnKey(col, item[0], item[1]))
+  })
+
+  return result
+}
+
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = `col${i + 1}`
+    result.push(constructHeadItem(col, item[0], item[3], false, item[2]))
+  })
+  return result
+}
+
+export const bodyItems = (data: UI_I_ObjectItem[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+
+  data.forEach((object: UI_I_ObjectItem, key) => {
+    bodyItems.push([
+      {
+        key: 'col1',
+        text: object[objectTableKey[0]],
+        id: key,
+      },
+    ])
+  })
+  return bodyItems
+}

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/interfaces.ts

@@ -1,4 +1,4 @@
-export interface UI_I_ObjectItem {
-  id: number
-  target_object: string
-}
+export interface UI_I_ObjectItem {
+  id: number
+  target_object: string
+}

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/models/types.ts

@@ -1 +1 @@
-export type UI_T_ObjectColumnKey = 'target_object'
+export type UI_T_ObjectColumnKey = 'target_object'

package/components/common/monitor/advanced/tools/chartOptionsModal/metrics/Metrics.vue

@@ -1,32 +1,42 @@
-<template>
-  <div class="chart-option-groups-container">
-    <span>{{ localization.chartMetrics }}</span>
-    <atoms-tabs-vertical-tabs v-model="selectedMetric" :items="metricsItems" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_VerticalTabs } from '~/components/atoms/tabs/models/interfaces'
-import { metricsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/metrics/config/optionsMetrics'
-import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
-
-const props = defineProps<{
-  type: UI_T_AdvancedType
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
-  metricsFunc(localization.value, props.type)
-)
-const selectedMetric = ref<string>(metricsItems.value[0].value)
-</script>
-
-<style scoped lang="scss">
-.chart-option-groups-container {
-  margin-top: 10px;
-  flex-basis: 20%;
-  min-width: 20%;
-}
-</style>
+<template>
+  <div class="chart-option-groups-container">
+    <span>{{ localization.chartMetrics }}</span>
+    <atoms-tabs-vertical-tabs
+      v-model="selectedMetricLocal"
+      :items="props.metricsItems"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_VerticalTabs } from '~/components/atoms/tabs/models/interfaces'
+
+const props = defineProps<{
+  metricsItems: UI_I_VerticalTabs[]
+  selectedMetric: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:selected-metric', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedMetricLocal = computed<string>({
+  get() {
+    return props.selectedMetric
+  },
+  set(newValue) {
+    emits('update:selected-metric', newValue)
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.chart-option-groups-container {
+  margin-top: 10px;
+  flex-basis: 20%;
+  min-width: 20%;
+}
+</style>