bfg-common 1.1.82 → 1.1.84

package/components/common/monitor/advanced/tools/chartOptionsModal/actions/saveOptionsModal/SaveOptionsModal.vue

@@ -1,76 +1,76 @@
-<template>
-  <atoms-modal
-    width="575px"
-    :show="true"
-    :title="localization.saveOptionsAs"
-    @hide="onHide"
-    @submit="onSave"
-  >
-    <template #modalBody>
-      <common-monitor-advanced-tools-chart-options-modal-notification
-        v-show="isShowAlerts"
-        :alerts="alerts"
-        @remove="onRemoveAlerts"
-      />
-      <div class="form-control">
-        <label class="save-option-name-label" for="chartOptionsName"
-          >{{ localization.chartOptionsName }}:</label
-        >
-        <input id="chartOptionsName" v-model="name" type="text" />
-      </div>
-    </template>
-  </atoms-modal>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'save', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const name = ref<string>('')
-const isShowAlerts = ref<boolean>(false)
-const alerts = ref<string[]>([])
-
-const onHide = (): void => {
-  emits('hide')
-}
-const onSave = (): void => {
-  if (!name.value) {
-    alerts.value = [localization.value.settingsNameErrorDesc]
-    isShowAlerts.value = true
-
-    return
-  }
-
-  emits('save', name.value)
-}
-
-const onRemoveAlerts = (): void => {
-  isShowAlerts.value = false
-  alerts.value = []
-}
-</script>
-
-<style scoped lang="scss">
-:deep(.modal-dialog) {
-  .alert {
-    margin-bottom: 20px;
-  }
-
-  .form-control {
-    display: flex;
-
-    .save-option-name-label {
-      white-space: nowrap;
-    }
-    #chartOptionsName {
-      width: 100%;
-    }
-  }
-}
-</style>
+<template>
+  <atoms-modal
+    width="575px"
+    :show="true"
+    :title="localization.saveOptionsAs"
+    @hide="onHide"
+    @submit="onSave"
+  >
+    <template #modalBody>
+      <common-monitor-advanced-tools-chart-options-modal-notification
+        v-show="isShowAlerts"
+        :alerts="alerts"
+        @remove="onRemoveAlerts"
+      />
+      <div class="form-control">
+        <label class="save-option-name-label" for="chartOptionsName"
+          >{{ localization.chartOptionsName }}:</label
+        >
+        <input id="chartOptionsName" v-model="name" type="text" />
+      </div>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'save', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const name = ref<string>('')
+const isShowAlerts = ref<boolean>(false)
+const alerts = ref<string[]>([])
+
+const onHide = (): void => {
+  emits('hide')
+}
+const onSave = (): void => {
+  if (!name.value) {
+    alerts.value = [localization.value.settingsNameErrorDesc]
+    isShowAlerts.value = true
+
+    return
+  }
+
+  emits('save', name.value)
+}
+
+const onRemoveAlerts = (): void => {
+  isShowAlerts.value = false
+  alerts.value = []
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.modal-dialog) {
+  .alert {
+    margin-bottom: 20px;
+  }
+
+  .form-control {
+    display: flex;
+
+    .save-option-name-label {
+      white-space: nowrap;
+    }
+    #chartOptionsName {
+      width: 100%;
+    }
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/actions/utils/optionsActions.ts

@@ -1,25 +1,25 @@
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-export const chartOptionItems = (
-  localization: UI_I_Localization,
-  names: string[]
-): UI_I_OptionItem[] => {
-  const mainOptionsNames = [
-    {
-      text: `--${localization.selectOption}--`,
-      value: 'select_options',
-    },
-    {
-      text: localization.default,
-      value: 'default',
-    },
-  ]
-  names.forEach((name) => {
-    mainOptionsNames.push({
-      text: name,
-      value: name,
-    })
-  })
-  return mainOptionsNames
-}
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const chartOptionItems = (
+  localization: UI_I_Localization,
+  names: string[]
+): UI_I_OptionItem[] => {
+  const mainOptionsNames = [
+    {
+      text: `--${localization.selectOption}--`,
+      value: 'select_options',
+    },
+    {
+      text: localization.default,
+      value: 'default',
+    },
+  ]
+  names.forEach((name) => {
+    mainOptionsNames.push({
+      text: name,
+      value: name,
+    })
+  })
+  return mainOptionsNames
+}

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

@@ -1,94 +1,94 @@
-<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"
-      @select-row="emits('select-row', $event)"
-      @total-items="totalMetricItems = $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="totalMetricItems"
-      :selected-objects="props.selectedObjects"
-      @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 {
-  T_ChartHost,
-  T_ChartVm,
-} from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
-import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
-import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
-
-const props = defineProps<{
-  language: string
-  chart: T_ChartHost | 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
-}>()
-
-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
-}>()
-
-const totalMetricItems = ref<number>(0)
-</script>
-
-<style scoped lang="scss">
-.chart-option-counters-container {
-  margin-top: 20px;
-  flex-basis: 80%;
-  padding-left: 15px;
-  max-width: 80%;
-}
-</style>
+<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"
+      @select-row="emits('select-row', $event)"
+      @total-items="totalMetricItems = $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="totalMetricItems"
+      :selected-objects="props.selectedObjects"
+      @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 {
+  T_ChartHost,
+  T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
+import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+
+const props = defineProps<{
+  language: string
+  chart: T_ChartHost | 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
+}>()
+
+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
+}>()
+
+const totalMetricItems = ref<number>(0)
+</script>
+
+<style scoped lang="scss">
+.chart-option-counters-container {
+  margin-top: 20px;
+  flex-basis: 80%;
+  padding-left: 15px;
+  max-width: 80%;
+}
+</style>

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

@@ -1,130 +1,130 @@
-<template>
-  <div class="vertical-flex-container chart-option-counters-vertical-split">
-    <span class="chart-options-grid-title">{{
-      localization.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"
-      :head-items="headItems"
-      :body-items="bodyItems"
-      :total-items="totalItems"
-      :total-pages="totalPages"
-      hide-footer
-      server-off
-      @change="onChangeRow"
-    />
-  </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 * as table from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/config/tableConfig'
-import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
-import {
-  T_ChartHost,
-  T_ChartVm,
-} from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
-import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
-import { countersItemsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/config/utils'
-
-const props = defineProps<{
-  chart: T_ChartHost | T_ChartVm
-  type: UI_T_AdvancedType
-  selectedKeys: number[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
-  (event: 'total-items', value: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const counters = computed<UI_I_AdvancedCounterItem[]>(() =>
-  countersItemsFunc(props.type, props.chart, localization.value)
-)
-
-const totalItems = computed<number>(() => counters.value.length)
-const totalPages = computed<number>(() => 1)
-
-watch(
-  totalItems,
-  (newValue) => {
-    emits('total-items', newValue)
-  },
-  { immediate: true }
-)
-
-const selectedCounters = ref<number[]>([])
-watch(
-  () => props.selectedKeys,
-  (newValue) => {
-    selectedCounters.value = newValue
-  },
-  { immediate: true, deep: true }
-)
-watch(
-  () => props.chart,
-  () => {
-    selectedCounters.value = []
-  }
-)
-const pagination = ref<any>({
-  page: 1,
-  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[] = []
-
-  counters.value.forEach((item) => {
-    if (val.includes(item.id)) result.push(item)
-  })
-
-  emits('select-row', result)
-}
-
-watch(
-  selectedCounters,
-  (newValue) => {
-    onChangeRow(newValue)
-  },
-  { immediate: true }
-)
-</script>
-
-<style scoped lang="scss">
-.chart-options-grid-title {
-  display: block;
-  margin-bottom: -20px;
-}
-</style>
+<template>
+  <div class="vertical-flex-container chart-option-counters-vertical-split">
+    <span class="chart-options-grid-title">{{
+      localization.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"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="totalItems"
+      :total-pages="totalPages"
+      hide-footer
+      server-off
+      @change="onChangeRow"
+    />
+  </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 * as table from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/config/tableConfig'
+import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+import {
+  T_ChartHost,
+  T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
+import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+import { countersItemsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/config/utils'
+
+const props = defineProps<{
+  chart: T_ChartHost | T_ChartVm
+  type: UI_T_AdvancedType
+  selectedKeys: number[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
+  (event: 'total-items', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const counters = computed<UI_I_AdvancedCounterItem[]>(() =>
+  countersItemsFunc(props.type, props.chart, localization.value)
+)
+
+const totalItems = computed<number>(() => counters.value.length)
+const totalPages = computed<number>(() => 1)
+
+watch(
+  totalItems,
+  (newValue) => {
+    emits('total-items', newValue)
+  },
+  { immediate: true }
+)
+
+const selectedCounters = ref<number[]>([])
+watch(
+  () => props.selectedKeys,
+  (newValue) => {
+    selectedCounters.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+watch(
+  () => props.chart,
+  () => {
+    selectedCounters.value = []
+  }
+)
+const pagination = ref<any>({
+  page: 1,
+  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[] = []
+
+  counters.value.forEach((item) => {
+    if (val.includes(item.id)) result.push(item)
+  })
+
+  emits('select-row', result)
+}
+
+watch(
+  selectedCounters,
+  (newValue) => {
+    onChangeRow(newValue)
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.chart-options-grid-title {
+  display: block;
+  margin-bottom: -20px;
+}
+</style>