bfg-common 1.6.95 → 1.6.97

package/components/common/pages/hardwareHealth/historyTestimony/tools/ToolsOld.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="horizontal-flex-container">
+    <div class="chart-title-content">
+      <client-only>
+        <span v-if="props.chartTitle" class="chart-title"
+          >{{ props.chartTitle }},</span
+        >
+        <span v-if="props.chartTitleDate" class="chart-title uppercase">{{
+          props.chartTitleDate
+        }}</span>
+      </client-only>
+    </div>
+    <div class="horizontal-flex-container">
+      <label for="periodSelect" class="label-select"
+        >{{ localization.inventoryMonitor.period }}:</label
+      >
+      <div class="select">
+        <select
+          id="periodSelect"
+          v-model="selectedPeriod"
+          data-id="period-select"
+          @change="emits('update-tools')"
+        >
+          <option
+            v-for="(item, index) in props.periodOptions"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+      <a
+        id="chart-options-button"
+        class="chart-options-button"
+        data-id="show-chart-options-button"
+        @click="emits('show-chart-modal')"
+        >{{ localization.inventoryMonitor.chartOptions }}</a
+      >
+    </div>
+    <div class="view-select-label horizontal-flex-container">
+      <label for="viewSelect" class="label-select"
+        >{{ localization.common.view }}:</label
+      >
+      <div class="select">
+        <select
+          id="viewSelect"
+          v-model="selectedView"
+          data-id="view-select"
+          @change="emits('update-tools')"
+        >
+          <option
+            v-for="(item, index) in viewOptions"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal
+    v-if="props.isShowChartModal"
+    :selected-chart-option-name="props.selectedChartOptionName"
+    :selected-metric="props.selectedMetric"
+    :selected-chart-type="props.selectedChartType"
+    :power-selected-rows-local="props.powerSelectedRowsLocal"
+    :temperature-selected-rows-local="props.temperatureSelectedRowsLocal"
+    :selected-power-counters-keys="props.selectedPowerCountersKeys"
+    :selected-temperature-counters-keys="props.selectedTemperatureCountersKeys"
+    :units-count="props.unitsCount"
+    :power-counters-table-data="props.powerCountersTableData"
+    :temperature-counters-table-data="props.temperatureCountersTableData"
+    :language="props.language"
+    :selected-timespan-type="props.selectedTimespanType"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    :timespan-period-type="props.timespanPeriodType"
+    :valid-date-end="props.validDateEnd"
+    :format-date="props.formatDate"
+    :selected-host-name="props.selectedHostName"
+    :project="props.project"
+    @hide="emits('hide-chart-modal')"
+    @select-metric-local="emits('select-metric-local', $event)"
+    @power-selected-rows-local="emits('power-selected-rows-local', $event)"
+    @temperature-selected-rows-local="
+      emits('temperature-selected-rows-local', $event)
+    "
+    @update-period-type="emits('update-period-type', $event)"
+    @delete-option="emits('delete-option')"
+    @save-option-name="emits('save-option-name')"
+    @submit-options="emits('submit-options', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
+import { viewFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
+
+const selectedView = defineModel<string>('selectedView', { required: true })
+const selectedPeriod = defineModel<string>('selectedPeriod', { required: true })
+
+const props = defineProps<{
+  selectedTimespanType: string
+  selectedChartOptionName: string
+  isShowChartModal: boolean
+  chartTitle: string
+  selectedMetric: UI_T_Chart
+  selectedChartType: string
+  selectedPowerCountersKeys: number[]
+  powerSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
+  selectedTemperatureCountersKeys: number[]
+  temperatureSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
+  unitsCount: number
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  language: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  timespanPeriodType: string
+  validDateEnd: number
+  formatDate: string
+  chartTitleDate: string
+  periodOptions: UI_I_OptionItem[]
+  selectedHostName: string
+  optionsNames: string[]
+  project: UI_T_Project
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-chart-modal'): void
+  (event: 'hide-chart-modal'): void
+  (event: 'update-tools'): 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-period-type', value: string): void
+  (event: 'submit-options', value: UI_I_OptionsForm): void
+  (event: 'save-option-name'): void
+  (event: 'delete-option'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const viewOptions = computed<UI_I_OptionItem[]>(() =>
+  viewFunc(localization.value, props.optionsNames)
+)
+
+watch(
+  () => props.selectedChartOptionName,
+  (newValue) => {
+    let currentValue = ''
+    if (newValue) currentValue = newValue
+    else if (
+      selectedView.value &&
+      props.optionsNames.includes(selectedView.value)
+    )
+      currentValue = selectedView.value
+    else currentValue = selectedView.value || viewOptions.value[0]?.value
+
+    selectedView.value = currentValue
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.horizontal-flex-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 20px;
+  flex-shrink: 0;
+
+  .chart-title-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .select select {
+    height: 20px;
+    margin: 5px;
+    color: var(--global-font-color);
+  }
+
+  .single-option {
+    margin-left: 5px;
+  }
+
+  .chart-title {
+    color: var(--global-font-color);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 6px;
+    font-weight: 700;
+    text-transform: capitalize;
+
+    &.uppercase {
+      text-transform: uppercase;
+    }
+  }
+
+  .view-select-label {
+    margin-left: auto;
+    padding-right: 7px;
+    padding-left: 7px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    align-items: center;
+  }
+
+  .chart-options-button {
+    margin-left: 5px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-transform: capitalize;
+    color: var(--dropdown-item-color);
+    cursor: pointer;
+  }
+
+  .chart-action-bar {
+    white-space: nowrap;
+
+    .menu-item {
+      padding-right: 4px;
+      display: inline-block;
+      list-style: none;
+      vertical-align: middle;
+
+      &:last-child {
+        padding-right: 0;
+      }
+
+      .item-link {
+        padding: 4px;
+        line-height: 22px;
+        border: 1px solid transparent;
+        display: inline-block;
+
+        &:hover {
+          text-decoration: none;
+          background-color: #e9f6fd;
+          border: 1px solid #c7e9ff;
+        }
+
+        .icon {
+          width: 16px;
+          height: 16px;
+          display: block;
+          min-width: 16px;
+          min-height: 16px;
+          background-size: 100% auto;
+        }
+      }
+
+      :deep(.dropdown-menu) {
+        min-width: auto;
+        padding: 0;
+      }
+
+      :deep(.user-menu-large) {
+        padding: 0;
+      }
+
+      :deep(.angle-icon) {
+        display: none;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,75 +1,93 @@
 <template>
-  <div class="chart-options-modal">
-    <atoms-modal
-      :title="localization.inventoryMonitor.chartOptions"
-      :disabled-submit="isDisabledSubmit"
-      width="1150px"
-      show
-      @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="localTimespanPeriodType"
-              :selected-custom-time="localCustomTime"
-              :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"
-              @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="localTimespanPeriodType = $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>
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal-new
+    v-if="isNewView"
+    v-model:selected-metric="selectedMetric"
+    :selected-node-name="props.selectedHostName"
+    :current-selected-rows="currentSelectedRows"
+    :options-names="optionsNames"
+    :metrics-items="metricsItems"
+    :selected-power-counters-keys="localSelectedPowerCountersKeys"
+    :selected-temperature-counters-keys="localSelectedTemperatureCountersKeys"
+    :power-counters-table-data="props.powerCountersTableData"
+    :temperature-counters-table-data="props.temperatureCountersTableData"
+    :selected-chart-type="localSelectedChartType"
+    :selected-timespan-type="localSelectedTimespanType"
+    :units-count="localUnitsCount"
+    :timespan-period-type="localTimespanPeriodType"
+    :custom-time="localCustomTime"
+    :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"
+    @hide-main-modal="onHide"
+    @submit-main-modal="onSubmit"
+    @save-options="onSaveOptions"
+    @check-validations="checkValidations"
+    @select-local-option-name="onSelectLocalOptionName"
+    @delete-chart-name="onDeleteChartName"
+    @select-temperature-row="onSelectTemperatureRow"
+    @select-power-row="onSelectPowerRow"
+    @change-chart-type="selectedChartTypeLocal = $event"
+    @change-custom-time="localCustomTime = $event"
+    @change-timespan-type="timespanType = $event"
+    @change-unit-count="unitCount = $event"
+    @change-period-type="localTimespanPeriodType = $event"
+    @update-custom-date-from="onUpdateCustomDateFrom"
+    @update-custom-date-to="onUpdateCustomDateTo"
+    @update-custom-time-from="onUpdateCustomTimeFrom"
+    @update-custom-time-to="onUpdateCustomTimeTo"
+  />
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal-old
+    v-else
+    v-model:selected-metric="selectedMetric"
+    :selected-node-name="props.selectedHostName"
+    :is-disabled-submit="isDisabledSubmit"
+    :alerts="alerts"
+    :is-show-alerts="isShowAlerts"
+    :current-selected-rows="currentSelectedRows"
+    :options-names="optionsNames"
+    :selected-chart-option-name="localSelectedChartOptionName"
+    :metrics-items="metricsItems"
+    :selected-power-counters-keys="localSelectedPowerCountersKeys"
+    :selected-temperature-counters-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"
+    :timespan-period-type="localTimespanPeriodType"
+    :custom-time="localCustomTime"
+    :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"
+    @hide="onHide"
+    @submit="onSubmit"
+    @remove-alerts="onRemoveAlerts"
+    @save-options="onSaveOptions"
+    @check-validation="checkValidations"
+    @select-local-option-name="onSelectLocalOptionName"
+    @delete-chart-name="onDeleteChartName"
+    @select-temperature-row="onSelectTemperatureRow"
+    @select-power-row="onSelectPowerRow"
+    @change-chart-type="selectedChartTypeLocal = $event"
+    @change-custom-time="localCustomTime = $event"
+    @change-timespan-type="timespanType = $event"
+    @change-unit-count="unitCount = $event"
+    @change-period-type="localTimespanPeriodType = $event"
+    @change-custom-date-from="onUpdateCustomDateFrom"
+    @change-custom-date-to="onUpdateCustomDateTo"
+    @change-custom-time-from="onUpdateCustomTimeFrom"
+    @change-custom-time-to="onUpdateCustomTimeTo"
+  />
 </template>
 
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
 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'
@@ -77,7 +95,11 @@ import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/
 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'
+import {
+  getCurrentOptionsStorageFunc,
+  removeSelectedOptionsFromStorageFunc,
+  getSelectedOptionsValueFromStorageFunc,
+} from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
 
 const props = defineProps<{
   selectedChartOptionName: string
@@ -99,6 +121,8 @@ const props = defineProps<{
   timespanPeriodType: string
   validDateEnd: number
   formatDate: string
+  selectedHostName: string
+  project: UI_T_Project
 }>()
 
 const emits = defineEmits<{
@@ -112,21 +136,18 @@ const emits = defineEmits<{
     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 { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const routeType = '' + useRoute().params.type
+const routeId = '' + useRoute().params.id
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
@@ -375,6 +396,8 @@ const onSaveOptions = (name: string): void => {
     chartType,
     counters,
     metric: selectedMetric.value,
+    validShowName: name,
+    nodeId: routeId,
     timespan: {
       periodType: localTimespanPeriodType.value,
       units: localCustomTime.value,
@@ -382,8 +405,8 @@ const onSaveOptions = (name: string): void => {
       type: timespanType.value,
     },
   }
-  useLocalStorage(`${name}ChartOptionsSensors`, saveOptionsData)
-  optionsNames.value = getCurrentOptionsStorageFunc()
+  useLocalStorage(`ChartOptionsSensors${name}`, saveOptionsData)
+  optionsNames.value = getCurrentOptionsStorageFunc(props.project)
   localSelectedChartOptionName.value = name
   emits('save-option-name')
 }
@@ -393,7 +416,7 @@ const setSelectOptions = (): void => {
 }
 
 const setDefaultOptions = (): void => {
-  selectedMetric.value = metricsItems.value[0]?.value
+  selectedMetric.value = metricsItems.value[0]?.value as UI_T_Chart
   localSelectedPowerCountersKeys.value = []
   localSelectedTemperatureCountersKeys.value = []
   localSelectedChartType.value = 'spline'
@@ -404,7 +427,10 @@ const setDefaultOptions = (): void => {
 }
 
 const setCustomOptions = (name: string): void => {
-  const selectedValue = useLocalStorage(name + 'ChartOptionsSensors', undefined)
+  const selectedValue = getSelectedOptionsValueFromStorageFunc(
+    name,
+    props.project
+  )
 
   if (selectedValue.routeType !== routeType) return
 
@@ -448,8 +474,8 @@ watch(
 )
 
 const onDeleteChartName = (name: string): void => {
-  window.localStorage.removeItem(name + 'ChartOptionsSensors')
-  optionsNames.value = getCurrentOptionsStorageFunc()
+  removeSelectedOptionsFromStorageFunc(name, props.project)
+  optionsNames.value = getCurrentOptionsStorageFunc(props.project)
   setSelectOptions()
   emits('delete-option')
 }
@@ -467,36 +493,8 @@ watch(
 )
 
 onMounted(() => {
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+  optionsNames.value = getCurrentOptionsStorageFunc(props.project)
 })
 </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>
+<style scoped lang="scss"></style>