bfg-common 1.4.860 → 1.4.861

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/CountersOld.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="vertical-flex-container chart-option-counters-container">
-    <common-monitor-advanced-tools-chart-options-modal-counters-table
-      :chart="props.chart"
-      :type="props.type"
-      :selected-keys="props.selectedKeys"
-      :total-cores="props.totalCores"
-      @select-row="emits('select-row', $event)"
-      @total-items="totalMetricItemsLocal = $event"
-    />
-    <common-monitor-advanced-tools-chart-options-modal-counters-timespan
-      :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="totalMetricItemsLocal"
-      :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)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_T_ChartHost,
-  UI_T_ChartVm,
-} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
-import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
-import type { UI_I_AdvancedCounterItem } 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'
-
-const totalMetricItemsLocal = defineModel<number>('totalMetricItems', {
-  required: true,
-})
-
-const props = defineProps<{
-  language: string
-  chart: UI_T_ChartHost | UI_T_ChartVm
-  type: UI_T_AdvancedType
-  selectedKeys: number[]
-  selectedChartType: string
-  selectedTimespanType: string
-  unitsCount: number
-  periodType: string
-  selectedCustomTime: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: string
-  totalCores: number
-  hostId: string
-  selectedMetricsKeys: number[]
-  selectedObjects: string
-  objectsLoading: boolean
-  objectsData: UI_I_ObjectItem[]
-  validDateEnd: number
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
-  (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
-}>()
-</script>
-
-<style scoped lang="scss">
-.chart-option-counters-container {
-  margin-top: 20px;
-  flex-basis: 80%;
-  padding-left: 15px;
-  max-width: 80%;
-}
-@media (max-width: 1024px) {
-  .chart-option-counters-container {
-    max-width: unset;
-    padding-left: 0;
-  }
-}
-</style>

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

@@ -1,46 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,85 +0,0 @@
-<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/timespan/TimespanNew.vue

@@ -1,150 +0,0 @@
-<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>

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

@@ -1,95 +0,0 @@
-<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>
-</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'
-
-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
-}>()
-</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>

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

@@ -1,56 +0,0 @@
-<template>
-  <div class="object-table-container">
-    <ui-data-table
-      test-id="object-table"
-      :data="dataLocal"
-      :options="optionsData"
-      :loading="props.loading"
-      size="sm"
-      @select-row="onSelectRow"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_DataTable,
-  UI_I_DataTableBody,
-  UI_I_DataTableOptions,
-} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_DataGridType } from '~/components/atoms/table/dataGrid/lib/models/types'
-import type { UI_I_BodyItem } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import { options } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/objectNew/lib/config/options'
-import { tableDataFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/objectNew/lib/config/tableData'
-
-const selectedRowLocal = defineModel<number[] | number>('selectedRow', {
-  required: true,
-})
-
-const props = defineProps<{
-  tableType: UI_T_DataGridType
-  loading: boolean
-  bodyItems: UI_I_BodyItem[][]
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const optionsData = computed<UI_I_DataTableOptions>(() =>
-  options(props.tableType)
-)
-const dataLocal = computed<UI_I_DataTable>(() =>
-  tableDataFunc(localization.value, props.bodyItems, selectedRowLocal.value)
-)
-
-const onSelectRow = (value: UI_I_DataTableBody[]): void => {
-  selectedRowLocal.value = value.map((item) => item.row)
-}
-</script>
-
-<style scoped lang="scss">
-.object-table-container {
-  :deep(.bottom-grid-content) {
-    height: 170px;
-  }
-}
-</style>