bfg-common 1.4.16 → 1.4.17

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/actions/SaveOptionsModal.vue

@@ -0,0 +1,81 @@
+<template>
+  <atoms-modal
+    width="575px"
+    :show="true"
+    :title="localization.common.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.common.chartOptionsName }}:</label
+        >
+        <input
+          id="chartOptionsName"
+          v-model="name"
+          data-id="chart-options-name"
+          type="text"
+        />
+      </div>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/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/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/actions/lib/utils/optionsActions.ts

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

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/Counters.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="vertical-flex-container chart-option-counters-container">
+    <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-table
+      :chart="props.chart"
+      :selected-power-keys="props.selectedPowerKeys"
+      :selected-temperature-keys="props.selectedTemperatureKeys"
+      :power-counters-table-data="props.powerCountersTableData"
+      :temperature-counters-table-data="props.temperatureCountersTableData"
+      @select-power-row="emits('select-power-row', $event)"
+      @select-temperature-row="emits('select-temperature-row', $event)"
+      @total-items="totalMetricItems = $event"
+    />
+    <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-timespan
+      :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"
+      @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>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
+
+const props = defineProps<{
+  chart: UI_T_Chart
+  selectedPowerKeys: number[]
+  selectedTemperatureKeys: number[]
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-power-row', value: UI_I_HardwareHealthSensorsGraph[]): void
+  (event: 'select-temperature-row', value: UI_I_HardwareHealthSensorsGraph[]): 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
+}>()
+
+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%;
+}
+@media (max-width: 1024px) {
+  .chart-option-counters-container {
+    max-width: unset;
+    padding-left: 0;
+  }
+}
+</style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/Table.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="vertical-flex-container chart-option-counters-vertical-split">
+    <span class="chart-options-grid-title">{{
+      localization.common.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>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type {
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
+import * as table from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/lib/config/tableConfig'
+
+const props = defineProps<{
+  chart: UI_T_Chart
+  selectedPowerKeys: number[]
+  selectedTemperatureKeys: number[]
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-power-row', value: UI_I_HardwareHealthSensorsGraph[]): void
+  (
+    event: 'select-temperature-row',
+    value: UI_I_HardwareHealthSensorsGraph[]
+  ): void
+  (event: 'total-items', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const totalItems = computed<number>(() => props.powerCountersTableData.length)
+const totalPages = computed<number>(() => 1)
+
+watch(
+  totalItems,
+  (newValue) => {
+    emits('total-items', newValue)
+  },
+  { immediate: true }
+)
+
+const selectedCounters = ref<number[]>([])
+watch(
+  () => props.chart,
+  (newValue) => {
+    switch (newValue) {
+      case 'power':
+        selectedCounters.value = props.selectedPowerKeys
+        break
+      case 'temperature':
+        selectedCounters.value = props.selectedTemperatureKeys
+        break
+    }
+  }
+)
+watch(
+  () => props.selectedPowerKeys,
+  (newValue) => {
+    props.chart === 'power' && (selectedCounters.value = newValue)
+  },
+  { immediate: true, deep: true }
+)
+watch(
+  () => props.selectedTemperatureKeys,
+  (newValue) => {
+    props.chart === 'temperature' && (selectedCounters.value = newValue)
+  },
+  { immediate: true, deep: true }
+)
+const pagination = ref<UI_I_Pagination>({
+  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(
+  () => [
+    props.powerCountersTableData,
+    props.temperatureCountersTableData,
+    props.chart,
+  ],
+  (newValue) => {
+    if (
+      (!newValue[0].length && newValue[2] === 'power') ||
+      (!newValue[1].length && newValue[2] === 'temperature')
+    )
+      return
+
+    let currentBody: UI_I_HardwareHealthSensorsGraph[] = []
+    switch (newValue[2]) {
+      case 'power':
+        currentBody = newValue[0]
+        break
+      case 'temperature':
+        currentBody = newValue[1]
+        break
+    }
+
+    bodyItems.value = table.bodyItems(currentBody)
+  },
+  { deep: true, immediate: true }
+)
+
+const onChangeRow = (value: number[]): void => {
+  const result: UI_I_HardwareHealthSensorsGraph[] = []
+
+  const allData = [
+    ...props.powerCountersTableData,
+    ...props.temperatureCountersTableData,
+  ]
+
+  allData.forEach((item) => {
+    if (value.includes(item.id)) result.push(item)
+  })
+
+  if (props.chart === 'power') emits('select-power-row', result)
+  else if (props.chart === 'temperature')
+    emits('select-temperature-row', result)
+}
+
+watch(
+  selectedCounters,
+  (newValue) => {
+    onChangeRow(newValue)
+  },
+  { 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/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/lib/config/tableConfig.ts

@@ -0,0 +1,89 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_T_SensorsGraphCountersColumnKey } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/lib/models/types'
+import {
+  constructColumnKey,
+  constructHeadItem,
+} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+
+export const countersTableKey: UI_T_SensorsGraphCountersColumnKey[] = [
+  'name',
+  'description',
+  'measurement',
+  'units',
+]
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.common.name, true, '140px', countersTableKey[0]],
+    [localization.common.description, true, '140px', countersTableKey[1]],
+    [localization.common.measurement, true, '140px', countersTableKey[2]],
+    [localization.common.units, true, '140px', countersTableKey[3]],
+  ]
+}
+
+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], '', item[3])
+    )
+  })
+  return result
+}
+
+export const bodyItems = (
+  counter: UI_I_HardwareHealthSensorsGraph[]
+): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+
+  counter.forEach((counters: UI_I_HardwareHealthSensorsGraph) => {
+    bodyItems.push([
+      {
+        key: 'col1',
+        text: counters[countersTableKey[0]],
+        id: counters.id,
+        testId: `counters-item-${countersTableKey[0]}-${counters.id}`,
+      },
+      {
+        key: 'col2',
+        text: counters[countersTableKey[1]],
+        id: counters.id,
+        testId: `counters-item-${countersTableKey[1]}-${counters.id}`,
+      },
+      {
+        key: 'col3',
+        text: counters[countersTableKey[2]],
+        id: counters.id,
+        testId: `counters-item-${countersTableKey[2]}-${counters.id}`,
+      },
+      {
+        key: 'col4',
+        text: counters[countersTableKey[3]],
+        id: counters.id,
+        testId: `counters-item-${countersTableKey[3]}-${counters.id}`,
+      },
+    ])
+  })
+  return bodyItems
+}

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/lib/models/types.ts

@@ -0,0 +1,5 @@
+export type UI_T_SensorsGraphCountersColumnKey =
+  | 'name'
+  | 'description'
+  | 'measurement'
+  | 'units'

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/timespan/Timespan.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="timespan-objects-section-direction">
+    <common-pages-hardware-health-history-testimony-tools-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"
+      @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>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+}>()
+
+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
+}>()
+</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>