bfg-common 1.4.861 → 1.4.862

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/Table.vue

@@ -1,37 +1,23 @@
 <template>
-  <div class="vertical-flex-container chart-option-counters-vertical-split">
-    <span class="chart-options-grid-title">{{
-      localization.inventoryMonitor.selectCountersForThisChart
-    }}</span>
-
-    <atoms-table-data-grid
-      v-model:selected-row="selectedCounters"
-      v-model:column-keys="columnItems"
-      v-model:page-size="pagination.pageSize"
-      v-model:page="pagination.page"
-      type="checkbox"
-      class="data-table"
-      test-id="chart-options-table"
-      :head-items="headItems"
-      :body-items="bodyItems"
-      :total-items="totalItems"
-      :total-pages="totalPages"
-      hide-footer
-      server-off
-      @change="onChangeRow"
-    />
-  </div>
+  <common-monitor-advanced-tools-chart-options-modal-counters-table-table-new
+    v-if="isNewView"
+    v-model:selected-counters="selectedCounters"
+    :counters="counters"
+  />
+  <common-monitor-advanced-tools-chart-options-modal-counters-table-table-old
+    v-else
+    v-model:selected-counters="selectedCounters"
+    v-model:pagination="pagination"
+    :counters="counters"
+    :total-items="totalItems"
+    :total-pages="totalPages"
+    @change-row="onChangeRow"
+  />
 </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 * as table from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/config/tableConfig'
 import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
 import type {
   UI_T_ChartHost,
@@ -52,6 +38,10 @@ const emits = defineEmits<{
   (event: 'total-items', value: number): void
 }>()
 
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const counters = computed<UI_I_AdvancedCounterItem[]>(() =>
@@ -93,24 +83,6 @@ const pagination = ref<UI_I_Pagination>({
   pageSize: 35,
 })
 
-const columnItems = computed<UI_I_ColumnKey[]>(() =>
-  table.columnKeys(localization.value)
-)
-const headItems = computed<UI_I_HeadItem[]>(() =>
-  table.headItems(localization.value)
-)
-const bodyItems = ref<UI_I_BodyItem[][]>([])
-
-watch(
-  counters,
-  (newValue) => {
-    if (!newValue.length) return
-
-    bodyItems.value = table.bodyItems(newValue)
-  },
-  { deep: true, immediate: true }
-)
-
 const onChangeRow = (val: number[]): void => {
   const result: UI_I_AdvancedCounterItem[] = []
 
@@ -130,15 +102,4 @@ watch(
 )
 </script>
 
-<style scoped lang="scss">
-.chart-option-counters-vertical-split {
-  .chart-options-grid-title {
-    display: block;
-    margin-bottom: -20px;
-  }
-
-  :deep(.datagrid-table-wrapper) {
-    max-height: 176px;
-  }
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableNew/TableNew.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="chart-options-table-container">
+    <ui-data-table
+      test-id="chart-options-table"
+      :data="dataLocal"
+      :options="options"
+      size="sm"
+      @select-row="onSelectRow"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_DataTable } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_DataTableBody } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
+import { options } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableNew/config/options'
+import { tableDataFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableNew/config/tableData'
+
+const selectedCountersLocal = defineModel<number[]>('selectedCounters', {
+  required: true,
+})
+
+const props = defineProps<{
+  counters: UI_I_AdvancedCounterItem[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const dataLocal = computed<UI_I_DataTable>(() =>
+  tableDataFunc(localization.value, props.counters, selectedCountersLocal.value)
+)
+
+const onSelectRow = (value: UI_I_DataTableBody[]): void => {
+  selectedCountersLocal.value = value.map((item) => item.row)
+}
+</script>
+
+<style scoped lang="scss">
+.chart-options-table-container {
+  :deep(.bottom-grid-content) {
+    max-height: 235px;
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableNew/config/options.ts

@@ -0,0 +1,19 @@
+import type { UI_I_DataTableOptions } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+
+export const options: UI_I_DataTableOptions = {
+  perPageOptions: [
+    { text: '10', value: 10 },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100 },
+  ],
+  isSelectable: true,
+  showPagination: false,
+  showPageInfo: false,
+  isSortable: true,
+  server: false,
+  isResizable: true,
+  showSearch: false,
+  showColumnManager: false,
+  inBlock: true,
+}

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableNew/config/tableData.ts

@@ -0,0 +1,71 @@
+import type { UI_I_DataTable } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
+import { constructTable } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableNew/utils/constructTable'
+
+export const tableDataFunc = (
+  localization: UI_I_Localization,
+  items: UI_I_AdvancedCounterItem[],
+  selectedKeys: number[]
+): UI_I_DataTable => {
+  const currentBody = constructTable(items)
+  const selectedRows: number[] = []
+
+  currentBody.forEach((item) => {
+    if (selectedKeys.includes(item.row)) {
+      selectedRows.push(item.row)
+    }
+  })
+
+  return {
+    id: 'chart-options-table',
+    selectedRows,
+    isAllSelected: false,
+    title: `${localization.common.counters} (${items.length})`,
+    subTitle: '',
+    header: [
+      {
+        col: 'col0',
+        colName: 'name',
+        text: localization.common.name,
+        isSortable: true,
+        sort: 'asc',
+        width: '20%',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col1',
+        colName: 'description',
+        text: localization.common.description,
+        isSortable: true,
+        sort: 'asc',
+        width: '50%',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col2',
+        colName: 'measurement',
+        text: localization.common.measurement,
+        isSortable: true,
+        sort: 'asc',
+        width: '20%',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col3',
+        colName: 'units',
+        text: localization.common.units,
+        isSortable: true,
+        sort: 'asc',
+        width: '10%',
+        show: true,
+        filter: true,
+      },
+    ],
+
+    body: currentBody,
+  }
+}

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableNew/utils/constructTable.ts

@@ -0,0 +1,29 @@
+import type { UI_I_DataTableBody } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
+
+export const constructTable = (
+  items: UI_I_AdvancedCounterItem[]
+): UI_I_DataTableBody[] =>
+  items.map((item, key) => {
+    return {
+      row: key,
+      data: [
+        {
+          col: 'col0',
+          text: item.name,
+        },
+        {
+          col: 'col1',
+          text: item.description,
+        },
+        {
+          col: 'col2',
+          text: item.measurement,
+        },
+        {
+          col: 'col3',
+          text: item.units,
+        },
+      ],
+    }
+  })

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableOld/TableOld.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="vertical-flex-container chart-option-counters-vertical-split">
+    <span class="chart-options-grid-title">{{
+      localization.inventoryMonitor.selectCountersForThisChart
+    }}</span>
+
+    <atoms-table-data-grid
+      v-model:selected-row="selectedCountersLocal"
+      v-model:column-keys="columnItems"
+      v-model:page-size="paginationLocal.pageSize"
+      v-model:page="paginationLocal.page"
+      type="checkbox"
+      class="data-table"
+      test-id="chart-options-table"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="props.totalItems"
+      :total-pages="props.totalPages"
+      hide-footer
+      server-off
+      @change="emits('change-row', $event)"
+    />
+  </div>
+</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_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
+import * as table from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableOld/lib/config/tableConfig'
+
+const selectedCountersLocal = defineModel<number[]>('selectedCounters', {
+  required: true,
+})
+const paginationLocal = defineModel<UI_I_Pagination>('pagination', {
+  required: true,
+})
+
+const props = defineProps<{
+  counters: UI_I_AdvancedCounterItem[]
+  totalItems: number
+  totalPages: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'change-row', value: number[]): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const columnItems = computed<UI_I_ColumnKey[]>(() =>
+  table.columnKeys(localization.value)
+)
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+watch(
+  () => props.counters,
+  (newValue) => {
+    if (!newValue.length) return
+
+    bodyItems.value = table.bodyItems(newValue)
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.chart-option-counters-vertical-split {
+  .chart-options-grid-title {
+    display: block;
+    margin-bottom: -20px;
+  }
+
+  :deep(.datagrid-table-wrapper) {
+    max-height: 176px;
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/{lib → tableOld/lib}/config/tableConfig.ts

@@ -8,7 +8,7 @@ import {
   constructColumnKey,
   constructHeadItem,
 } from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
-import type { UI_T_AdvancedCountersColumnKey } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/types'
+import type { UI_T_AdvancedCountersColumnKey } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableOld/lib/models/types'
 import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
 
 export const countersTableKey: UI_T_AdvancedCountersColumnKey[] = [

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

@@ -1,40 +1,70 @@
 <template>
-  <div class="timespan-objects-section-direction">
-    <common-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"
-      :valid-date-end="props.validDateEnd"
-      @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"
-      :loading="props.objectsLoading"
-      :current-items="props.objectsData"
-      @select-objects="emits('select-objects', $event)"
-    />
-  </div>
+  <common-monitor-advanced-tools-chart-options-modal-counters-timespan-new
+    v-if="isNewView"
+    :type="props.type"
+    :chart="props.chart"
+    :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"
+    :total-cores="props.totalCores"
+    :host-id="props.hostId"
+    :selected-metrics-keys="props.selectedMetricsKeys"
+    :total-metric-items="props.totalMetricItems"
+    :selected-objects="props.selectedObjects"
+    :objects-loading="props.objectsLoading"
+    :objects-data="props.objectsData"
+    :valid-date-end="props.validDateEnd"
+    @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)"
+    @select-objects="emits('select-objects', $event)"
+  />
+  <common-monitor-advanced-tools-chart-options-modal-counters-timespan-old
+    v-else
+    :type="props.type"
+    :chart="props.chart"
+    :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"
+    :total-cores="props.totalCores"
+    :host-id="props.hostId"
+    :selected-metrics-keys="props.selectedMetricsKeys"
+    :total-metric-items="props.totalMetricItems"
+    :selected-objects="props.selectedObjects"
+    :objects-loading="props.objectsLoading"
+    :objects-data="props.objectsData"
+    :valid-date-end="props.validDateEnd"
+    @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)"
+    @select-objects="emits('select-objects', $event)"
+  />
 </template>
 
 <script setup lang="ts">
@@ -80,16 +110,10 @@ const emits = defineEmits<{
   (event: 'update-custom-time-to', value: string): void
   (event: 'select-objects', value: string): void
 }>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 </script>
 
-<style scoped lang="scss">
-.timespan-objects-section-direction {
-  display: flex;
-  flex-direction: row;
-}
-@media (max-width: 1024px) {
-  .timespan-objects-section-direction {
-    flex-direction: column;
-  }
-}
-</style>
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,150 @@
+<template>
+  <div class="timespan-container">
+    <common-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"
+      :valid-date-end="props.validDateEnd"
+      @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)"
+    />
+    <div class="timespan-object-container">
+      <div class="chart-type-container">
+        <p class="title-block">{{ localization.inventoryMonitor.chartType }}</p>
+        <div class="radio-buttons-container">
+          <ui-radio
+            v-model="chartTypeLocal"
+            :label="localization.inventoryMonitor.lineGraph"
+            test-id="line-graph"
+            value="spline"
+            size="sm"
+          />
+          <ui-radio
+            v-model="chartTypeLocal"
+            :label="localization.inventoryMonitor.stackedGraph"
+            test-id="stacked-graph"
+            value="area"
+            size="sm"
+          />
+        </div>
+      </div>
+      <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"
+        :loading="props.objectsLoading"
+        :current-items="props.objectsData"
+        @select-objects="emits('select-objects', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  chart: UI_T_ChartHost | UI_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
+  objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+}>()
+
+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-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
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const chartTypeLocal = computed<string>({
+  get() {
+    return props.selectedChartType
+  },
+  set(newValue) {
+    emits('update-chart-type', newValue)
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.timespan-container {
+  display: grid;
+  grid-template-columns: 55% 45%;
+  grid-gap: 12px;
+  margin-top: 12px;
+
+  .timespan-object-container {
+    display: grid;
+    grid-template-rows: max-content 1fr;
+    grid-gap: 12px;
+
+    .chart-type-container {
+      padding: 12px;
+      background: var(--chart-options-timespan-blocks-bg);
+      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.0784313725);
+      border-radius: 8px;
+
+      .title-block {
+        color: var(--chart-options-timespan-blocks-title-color);
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 16px;
+      }
+      .radio-buttons-container {
+        display: flex;
+        flex-direction: column;
+        grid-gap: 12px;
+      }
+    }
+  }
+}
+</style>