bfg-common 1.4.16 → 1.4.17

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/ChartOptionsModal.vue

@@ -0,0 +1,469 @@
+<template>
+  <div class="chart-options-modal">
+    <atoms-modal
+      width="1150px"
+      :show="true"
+      :title="localization.common.chartOptions"
+      :disabled-submit="isDisabledSubmit"
+      @hide="onHide"
+      @submit="onSubmit"
+    >
+      <template #modalBody>
+        <common-monitor-advanced-tools-chart-options-modal-notification
+          v-show="isShowAlerts"
+          :alerts="alerts"
+          @remove="onRemoveAlerts"
+        />
+        <div>
+          <common-pages-hardware-health-history-testimony-tools-chart-options-modal-actions
+            :is-disabled-save="!currentSelectedRows.length"
+            :options-names="optionsNames"
+            :selected-chart-option-name="localSelectedChartOptionName"
+            @save="onSaveOptions"
+            @check-validation="checkValidations"
+            @select-local-option-name="onSelectLocalOptionName"
+            @delete-chart-name="onDeleteChartName"
+          />
+
+          <div class="horizontal-flex-container chart-options-content">
+            <common-pages-hardware-health-history-testimony-tools-chart-options-modal-metrics
+              v-model:selected-metric="selectedMetric"
+              :metrics-items="metricsItems"
+            />
+            <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters
+              :chart="selectedMetric"
+              :selected-power-keys="localSelectedPowerCountersKeys"
+              :selected-temperature-keys="localSelectedTemperatureCountersKeys"
+              :power-counters-table-data="props.powerCountersTableData"
+              :temperature-counters-table-data="
+                props.temperatureCountersTableData
+              "
+              :language="props.language"
+              :selected-chart-type="localSelectedChartType"
+              :selected-timespan-type="localSelectedTimespanType"
+              :units-count="localUnitsCount"
+              :period-type="localPeriodType"
+              :selected-custom-time="localCustomTime"
+              :custom-date-from="props.customDateFrom"
+              :custom-date-to="props.customDateTo"
+              :custom-time-from="props.customTimeFrom"
+              :custom-time-to="props.customTimeTo"
+              @select-power-row="onSelectPowerRow"
+              @select-temperature-row="onSelectTemperatureRow"
+              @update-chart-type="selectedChartTypeLocal = $event"
+              @update-custom-time="localCustomTime = $event"
+              @update-timespan-type="timespanType = $event"
+              @update-unit-count="unitCount = $event"
+              @update-period-type="localPeriodType = $event"
+              @update-custom-date-from="onUpdateCustomDateFrom"
+              @update-custom-date-to="onUpdateCustomDateTo"
+              @update-custom-time-from="onUpdateCustomTimeFrom"
+              @update-custom-time-to="onUpdateCustomTimeTo"
+            />
+          </div>
+        </div>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_OptionsForm } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/interfaces'
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import { metricsFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/config/optionsMetrics'
+import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker'
+import { getValidDateByOptionFunc } from '~/components/common/monitor/lib/config/getValidDateByOption'
+import { getCurrentOptionsStorageFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
+
+const props = defineProps<{
+  selectedChartOptionName: string
+  selectedMetric: UI_T_Chart
+  selectedPowerCountersKeys: number[]
+  powerSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
+  selectedTemperatureCountersKeys: number[]
+  temperatureSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
+  unitsCount: number
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  language: string
+  selectedTimespanType: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'select-metric-local', value: string): void
+  (
+    event: 'power-selected-rows-local',
+    value: UI_I_HardwareHealthSensorsGraph[]
+  ): void
+  (
+    event: 'temperature-selected-rows-local',
+    value: UI_I_HardwareHealthSensorsGraph[]
+  ): void
+  (event: 'update-chart-type', 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-time', value: string): void
+  (event: 'delete-option'): void
+  (event: 'save-option-name'): 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: 'submit-options', value: UI_I_OptionsForm): void
+}>()
+
+const routeType = '' + useRoute().params.type
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const localCustomDateFrom = ref<string>('')
+const onUpdateCustomDateFrom = (value: string): void => {
+  localCustomDateFrom.value = value
+}
+const localCustomDateTo = ref<string>('')
+const onUpdateCustomDateTo = (value: string): void => {
+  localCustomDateTo.value = value
+}
+const localCustomTimeFrom = ref<string>('')
+const onUpdateCustomTimeFrom = (value: string): void => {
+  localCustomTimeFrom.value = value
+}
+const localCustomTimeTo = ref<string>('')
+const onUpdateCustomTimeTo = (value: string): void => {
+  localCustomTimeTo.value = value
+}
+
+const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
+  metricsFunc(localization.value)
+)
+const selectedMetric = ref<UI_T_Chart>(
+  props.selectedMetric || '' + metricsItems.value[0]?.value
+)
+
+const localSelectedPowerCountersKeys = ref<number[]>([])
+watch(
+  () => props.selectedPowerCountersKeys,
+  (newValue) => {
+    localSelectedPowerCountersKeys.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+
+const localSelectedTemperatureCountersKeys = ref<number[]>([])
+watch(
+  () => props.selectedTemperatureCountersKeys,
+  (newValue) => {
+    localSelectedTemperatureCountersKeys.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+
+const localSelectedChartType = ref<string>('')
+
+const localSelectedTimespanType = ref<string>('')
+watch(
+  () => props.selectedTimespanType,
+  (newValue) => {
+    localSelectedTimespanType.value = newValue
+  },
+  { immediate: true }
+)
+
+const localUnitsCount = ref<number>(0)
+watch(
+  () => props.unitsCount,
+  (newValue) => {
+    localUnitsCount.value = newValue
+  },
+  { immediate: true }
+)
+
+const localPeriodType = ref<string>('')
+watch(
+  () => props.periodType,
+  (newValue) => {
+    localPeriodType.value = newValue
+  },
+  { immediate: true }
+)
+
+const localCustomTime = ref<string>('')
+
+const isShowAlerts = ref<boolean>(false)
+const alerts = ref<string[]>([])
+
+const onRemoveAlerts = (): void => {
+  isShowAlerts.value = false
+  alerts.value = []
+}
+
+const onHide = (): void => {
+  emits('hide')
+}
+
+const onSelectPowerRow = (data: UI_I_HardwareHealthSensorsGraph[]): void => {
+  emits('power-selected-rows-local', data)
+}
+const onSelectTemperatureRow = (
+  data: UI_I_HardwareHealthSensorsGraph[]
+): void => {
+  emits('temperature-selected-rows-local', data)
+}
+
+const currentSelectedRows = computed<UI_I_HardwareHealthSensorsGraph[]>(() => {
+  let result: UI_I_HardwareHealthSensorsGraph[] = []
+
+  switch (selectedMetric.value) {
+    case 'power':
+      result = props.powerSelectedRowsLocal
+      break
+    case 'temperature':
+      result = props.temperatureSelectedRowsLocal
+      break
+  }
+
+  return result
+})
+
+const selectedChartTypeLocal = ref<string>('')
+
+const checkValidations = (): boolean => {
+  const checkDateResult = checkDateFunc(
+    localization.value,
+    localCustomDateFrom.value,
+    localCustomDateTo.value,
+    localCustomTimeFrom.value,
+    localCustomTimeTo.value
+  )
+
+  if (isDisabledSubmit.value) {
+    alerts.value = [localization.value.noCountersSelected]
+    isShowAlerts.value = true
+    return false
+  } else if (
+    timespanType.value === 'custom_interval' &&
+    localPeriodType.value === 'period' &&
+    checkDateResult !== '' &&
+    typeof checkDateResult === 'string'
+  ) {
+    alerts.value = [checkDateResult]
+    isShowAlerts.value = true
+    return false
+  }
+
+  return true
+}
+
+const localSelectedChartOptionName = ref<string>('')
+watch(
+  () => props.selectedChartOptionName,
+  (newValue) => {
+    localSelectedChartOptionName.value = newValue
+  },
+  { immediate: true }
+)
+
+const selectedLocalOptionName = ref<string>('')
+
+const currentFieldsByArray = (
+  data: UI_I_HardwareHealthSensorsGraph[]
+): string => {
+  const result: string[] = []
+  data.forEach((item) => {
+    result.push(item.nameEn)
+  })
+  return result.join('>>')
+}
+
+const onSubmit = (): void => {
+  if (!checkValidations()) return
+
+  if (['select_options', 'default'].includes(selectedLocalOptionName.value))
+    selectedLocalOptionName.value = 'custom'
+
+  onSaveOptions(selectedLocalOptionName.value)
+
+  const currentFields = currentFieldsByArray(currentSelectedRows.value)
+
+  const validPeriod = getValidDateByOptionFunc(
+    timespanType.value,
+    null,
+    unitCount.value,
+    localCustomTime.value
+  )
+
+  const savedObject = {
+    fields: currentFields,
+    optionName: selectedLocalOptionName.value,
+    metric: selectedMetric.value,
+    periodName: timespanType.value,
+    periodType: localPeriodType.value,
+    unitCount: unitCount.value,
+    localTimespanType: localCustomTime.value,
+    dateFrom: localCustomDateFrom.value,
+    timeFrom: localCustomTimeFrom.value,
+    dateTo: localCustomDateTo.value,
+    timeTo: localCustomTimeTo.value,
+    chartType: selectedChartTypeLocal.value,
+    period: validPeriod,
+  }
+
+  emits('submit-options', savedObject)
+  onHide()
+}
+
+const timespanType = ref<string>('')
+const unitCount = ref<number>(1)
+
+const optionsNames = ref<string[]>([])
+
+const onSaveOptions = (name: string): void => {
+  const counters = currentSelectedRows.value.map((item) => {
+    return {
+      id: item.id,
+      name: item.nameEn,
+    }
+  })
+  let chartType = 'line_graph'
+  if (selectedChartTypeLocal.value === 'spline') chartType = 'line_graph'
+  else if (selectedChartTypeLocal.value === 'area') chartType = 'stacked_graph'
+
+  const saveOptionsData = {
+    routeType,
+    chartType,
+    counters,
+    metric: selectedMetric.value,
+    timespan: {
+      periodType: localPeriodType.value,
+      units: localCustomTime.value,
+      unitsCount: unitCount.value,
+      type: timespanType.value,
+    },
+  }
+  useLocalStorage(`${name}ChartOptionsSensors`, saveOptionsData)
+  optionsNames.value = getCurrentOptionsStorageFunc()
+  localSelectedChartOptionName.value = name
+  emits('save-option-name')
+}
+
+const setSelectOptions = (): void => {
+  selectedMetric.value = props.selectedMetric || metricsItems.value[0]?.value
+}
+
+const setDefaultOptions = (): void => {
+  selectedMetric.value = metricsItems.value[0]?.value
+  localSelectedPowerCountersKeys.value = []
+  localSelectedTemperatureCountersKeys.value = []
+  localSelectedChartType.value = 'spline'
+  localSelectedTimespanType.value = ''
+  localUnitsCount.value = 0
+  localPeriodType.value = ''
+  localCustomTime.value = ''
+}
+
+const setCustomOptions = (name: string): void => {
+  const selectedValue = useLocalStorage(name + 'ChartOptionsSensors', undefined)
+
+  if (selectedValue.routeType !== routeType) return
+
+  let currentChartType = ''
+  if (selectedValue.chartType === 'line_graph') currentChartType = 'spline'
+  else if (selectedValue.chartType === 'stacked_graph')
+    currentChartType = 'area'
+
+  selectedMetric.value = selectedValue.metric
+  if (selectedMetric.value === 'power')
+    localSelectedPowerCountersKeys.value = selectedValue.counters.map(
+      (item) => item.id
+    )
+  if (selectedMetric.value === 'temperature')
+    localSelectedTemperatureCountersKeys.value = selectedValue.counters.map(
+      (item) => item.id
+    )
+  localSelectedChartType.value = currentChartType
+  localSelectedTimespanType.value = selectedValue.timespan.type
+  localUnitsCount.value = selectedValue.timespan.unitsCount
+  localPeriodType.value = selectedValue.timespan.periodType
+  localCustomTime.value = selectedValue.timespan.units
+}
+
+const onSelectLocalOptionName = (name: string): void => {
+  selectedLocalOptionName.value = name
+
+  if (optionsNames.value.includes(name)) setCustomOptions(name)
+  else if (name === 'default') setDefaultOptions()
+  else if (name === 'select_options') setSelectOptions()
+}
+
+watch(
+  localSelectedChartOptionName,
+  (newValue) => {
+    if (!newValue) return
+
+    setCustomOptions(newValue)
+  },
+  { immediate: true }
+)
+
+const onDeleteChartName = (name: string): void => {
+  window.localStorage.removeItem(name + 'ChartOptionsSensors')
+  optionsNames.value = getCurrentOptionsStorageFunc()
+  setSelectOptions()
+  emits('delete-option')
+}
+
+const isDisabledSubmit = computed<boolean>(
+  () => !currentSelectedRows.value.length
+)
+
+watch(
+  selectedMetric,
+  (newValue) => {
+    emits('select-metric-local', newValue)
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+})
+</script>
+
+<style scoped lang="scss">
+.chart-options-modal {
+  .loader-on :deep(.modal-body) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  :deep(.modal-title) {
+    text-transform: capitalize;
+  }
+
+  #loader {
+    min-height: 90px;
+    text-align: center;
+  }
+
+  .chart-options-content {
+    display: flex;
+    flex-direction: row;
+    flex-basis: 90%;
+    overflow-y: hidden;
+  }
+}
+@media (max-width: 1024px) {
+  .chart-options-content {
+    flex-direction: column !important;
+  }
+}
+</style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/Notification.vue

@@ -0,0 +1,30 @@
+<template>
+  <atoms-alert
+    v-show="props.alerts.length"
+    status="alert-danger"
+    :items="props.alerts"
+    class="notification"
+    test-id="notification-alert"
+    @remove="emits('remove')"
+  >
+    <template #default="{ item }">
+      <div class="flex-space-between flex-1">
+        <div class="flex-align-center">
+          <span>{{ item }}</span>
+        </div>
+      </div>
+    </template>
+  </atoms-alert>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  alerts: string[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'remove'): void
+}>()
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,157 @@
+<template>
+  <div class="horizontal-flex-container">
+    <div class="horizontal-flex-container">
+      <label for="chartOptionsSelect" class="label-select"
+        >{{ localization.common.chartOptions }}:</label
+      >
+      <div class="select">
+        <select
+          id="chartOptionsSelect"
+          v-model="localSelectedChartOption"
+          data-id="chart-options-select"
+        >
+          <option
+            v-for="item in chartOptions"
+            :key="item.value"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+    </div>
+    <div>
+      <button
+        class="btn chart-options-save-button"
+        data-id="chart-options-save-button"
+        @click="onShowSaveOptionsModal"
+      >
+        {{ localization.common.saveOptionsAs }}...
+      </button>
+      <common-pages-hardware-health-history-testimony-tools-chart-options-modal-actions-save-options-modal
+        v-if="isShowSaveOptionsModal"
+        @hide="onHideSaveOptionsModal"
+        @save="onSaveOptions"
+      />
+      <button
+        class="btn chart-options-delete-button"
+        :disabled="!disabledDeleteAction"
+        data-id="chart-options-delete-button"
+        @click="onDeleteAction"
+      >
+        {{ localization.common.deleteOptions }}
+      </button>
+    </div>
+  </div>
+
+  <common-modals-confirmation
+    v-if="isConfirmModal"
+    headline="localization.common.deletingSavedSettings"
+    :description="confirmModalDesc"
+    @hide-modal="isConfirmModal = false"
+    @confirm="onApplyDelete"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import { chartOptionItems } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/actions/lib/utils/optionsActions'
+
+const props = defineProps<{
+  isDisabledSave: boolean
+  optionsNames: string[]
+  selectedChartOptionName: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'save', value: string): void
+  (event: 'check-validation'): void
+  (event: 'select-local-option-name', value: string): void
+  (event: 'delete-chart-name', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const localSelectedChartOption = ref<string>('select_options')
+const disabledDeleteAction = computed<boolean>(() => {
+  const chartOptionName = localSelectedChartOption.value
+  let result = false
+
+  if (chartOptionName !== 'select_options' && chartOptionName !== 'default')
+    result = true
+
+  return result
+})
+const chartOptions = computed<UI_I_OptionItem[]>(() =>
+  chartOptionItems(localization.value, props.optionsNames)
+)
+watch(
+  () => props.selectedChartOptionName,
+  (newValue) => {
+    localSelectedChartOption.value =
+      newValue || localSelectedChartOption.value || 'select_options'
+  },
+  { immediate: true }
+)
+watch(
+  localSelectedChartOption,
+  (newValue) => {
+    emits('select-local-option-name', newValue)
+  },
+  { immediate: true }
+)
+
+const isShowSaveOptionsModal = ref<boolean>(false)
+const onShowSaveOptionsModal = (): void => {
+  if (!props.isDisabledSave) isShowSaveOptionsModal.value = true
+
+  emits('check-validation')
+}
+const onHideSaveOptionsModal = (): boolean =>
+  (isShowSaveOptionsModal.value = false)
+const onSaveOptions = (name: string): void => {
+  onHideSaveOptionsModal()
+  emits('save', name)
+}
+
+const isConfirmModal = ref<boolean>(false)
+const confirmModalDesc = ref<string>('')
+
+const onDeleteAction = (): void => {
+  confirmModalDesc.value =
+    localization.value.common.deletingSavedSettingsDesc.replace(
+      '{0}',
+      localSelectedChartOption.value
+    )
+  isConfirmModal.value = true
+}
+
+const onApplyDelete = (): void => {
+  isConfirmModal.value = false
+  emits('delete-chart-name', localSelectedChartOption.value)
+  localSelectedChartOption.value = 'select_options'
+}
+</script>
+
+<style scoped lang="scss">
+.horizontal-flex-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .chart-options-save-button,
+  .chart-options-delete-button {
+    border: none;
+    background: unset;
+    margin: 0;
+    font-size: 11px;
+    color: var(--action-icon-color);
+    box-shadow: unset;
+  }
+
+  .chart-options-delete-button {
+    text-transform: uppercase;
+  }
+}
+</style>