bfg-common 1.6.95 → 1.6.97

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

@@ -1,80 +1,64 @@
 <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="chartTitleDate" class="chart-title uppercase">{{
-          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="onUpdateTools"
-        >
-          <option
-            v-for="(item, index) in 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="onShowChartOptions"
-        >{{ 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="onUpdateTools"
-        >
-          <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"
+  <common-pages-hardware-health-history-testimony-tools-new
+    v-if="isNewView"
+    v-model:selected-view="selectedView"
+    v-model:selected-period="selectedPeriod"
     :selected-chart-option-name="props.selectedChartOptionName"
+    :is-show-chart-modal="props.isShowChartModal"
+    :chart-title="props.chartTitle"
     :selected-metric="props.selectedMetric"
     :selected-chart-type="props.selectedChartType"
+    :selected-power-counters-keys="props.selectedPowerCountersKeys"
     :power-selected-rows-local="props.powerSelectedRowsLocal"
+    :selected-temperature-counters-keys="props.selectedTemperatureCountersKeys"
     :temperature-selected-rows-local="props.temperatureSelectedRowsLocal"
+    :units-count="props.unitsCount"
+    :power-counters-table-data="props.powerCountersTableData"
+    :temperature-counters-table-data="props.temperatureCountersTableData"
+    :language="props.language"
+    :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"
+    :chart-title-date="chartTitleDate"
+    :period-options="periodOptions"
+    :selected-timespan-type="props.selectedTimespanType"
+    :selected-host-name="props.selectedHostName"
+    :options-names="optionsNames"
+    :project="props.project"
+    @show-chart-modal="emits('show-chart-modal')"
+    @hide-chart-modal="emits('hide-chart-modal')"
+    @update-tools="onUpdateTools"
+    @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)"
+    @submit-options="emits('submit-options', $event)"
+    @save-option-name="onSaveOptionName"
+    @delete-option="onDeleteOption"
+  />
+  <common-pages-hardware-health-history-testimony-tools-old
+    v-else
+    v-model:selected-view="selectedView"
+    v-model:selected-period="selectedPeriod"
+    :selected-chart-option-name="props.selectedChartOptionName"
+    :is-show-chart-modal="props.isShowChartModal"
+    :chart-title="props.chartTitle"
+    :selected-metric="props.selectedMetric"
+    :selected-chart-type="props.selectedChartType"
     :selected-power-counters-keys="props.selectedPowerCountersKeys"
+    :power-selected-rows-local="props.powerSelectedRowsLocal"
     :selected-temperature-counters-keys="props.selectedTemperatureCountersKeys"
+    :temperature-selected-rows-local="props.temperatureSelectedRowsLocal"
     :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"
@@ -82,34 +66,43 @@
     :timespan-period-type="props.timespanPeriodType"
     :valid-date-end="props.validDateEnd"
     :format-date="props.formatDate"
-    @save-option-name="onSaveOptionName"
-    @delete-option="emits('delete-option')"
+    :chart-title-date="chartTitleDate"
+    :period-options="periodOptions"
+    :selected-timespan-type="props.selectedTimespanType"
+    :selected-host-name="props.selectedHostName"
+    :options-names="optionsNames"
+    :project="props.project"
+    @show-chart-modal="emits('show-chart-modal')"
+    @hide-chart-modal="emits('hide-chart-modal')"
+    @update-tools="onUpdateTools"
+    @select-metric-local="emits('select-metric-local', $event)"
     @power-selected-rows-local="emits('power-selected-rows-local', $event)"
-    @update-period-type="emits('update-period-type', $event)"
     @temperature-selected-rows-local="
       emits('temperature-selected-rows-local', $event)
     "
+    @update-period-type="emits('update-period-type', $event)"
     @submit-options="emits('submit-options', $event)"
-    @hide="onHideChartModal"
+    @save-option-name="onSaveOptionName"
+    @delete-option="onDeleteOption"
   />
 </template>
-
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
 import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
 import type { UI_I_SensorsGraphPayload } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/models/interfaces'
+import type { UI_I_OptionsForm } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/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 type { UI_T_Project } from '~/lib/models/types'
+import { periodFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
 import { getValidDateByOptionFunc } from '~/components/common/monitor/lib/config/getValidDateByOption'
 import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker'
-import {
-  getCurrentOptionsStorageFunc,
-  periodFunc,
-  viewFunc,
-} from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
+import { getCurrentOptionsStorageFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
+
+const selectedView = defineModel<string>('selectedView', { required: true })
 
 const props = defineProps<{
+  selectedTimespanType: string
   selectedChartOptionName: string
   isShowChartModal: boolean
   chartTitle: string
@@ -127,21 +120,18 @@ const props = defineProps<{
   customDateTo: string
   customTimeFrom: string
   customTimeTo: string
-  selectedTimespanType: string
   startDate: number
   endDate: number
   timespanPeriodType: string
   validDateEnd: number
   formatDate: string
+  selectedHostName: string
+  project: UI_T_Project
 }>()
-const selectedView = defineModel<string>('selectedView')
-
 const emits = defineEmits<{
   (event: 'show-chart-modal'): void
   (event: 'hide-chart-modal'): void
   (event: 'update-tools', value: UI_I_SensorsGraphPayload): void
-  (event: 'exporting', value: string): void
-  (event: 'open-advanced-page'): void
   (event: 'select-metric-local', value: string): void
   (
     event: 'power-selected-rows-local',
@@ -151,74 +141,42 @@ 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: '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
-  (event: 'update:selected-timespan-type', value: string): void
 }>()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
-
 const { $store, $formattedDatetime }: any = useNuxtApp()
 
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
 const updateTimeFormatAndInterfaceLang = computed<number>(
   () => $store.getters['main/getUpdateTimeFormatAndInterfaceLang']
 )
 
-const periodOptions = computed<UI_I_OptionItem[]>(() =>
-  periodFunc(localization.value, props.selectedTimespanType)
-)
-const selectedPeriod = computed<string>({
-  get() {
-    return props.selectedTimespanType || periodOptions.value[0].value
-  },
-  set(newValue) {
-    emits('update:selected-timespan-type', newValue)
-  },
-})
+const chartTitleDate = computed<string>(() => {
+  if (!props.startDate || !updateTimeFormatAndInterfaceLang.value) return ''
 
-const optionsNames = ref<string[]>([])
+  const start = $formattedDatetime(props.startDate, { hasSeconds: true })
+  const end = $formattedDatetime(props.endDate, { hasSeconds: true })
+  return `${start} - ${end}`
+})
 
-const viewOptions = computed<UI_I_OptionItem[]>(() =>
-  viewFunc(localization.value, optionsNames.value)
+const periodOptions = computed<UI_I_OptionItem[]>(() =>
+  periodFunc(localization.value, props.selectedTimespanType)
 )
-
-watch(
-  () => props.selectedChartOptionName,
-  (newValue) => {
-    let currentValue = ''
-
-    if (newValue) currentValue = newValue
-    else if (
-      selectedView.value &&
-      optionsNames.value.includes(selectedView.value)
-    )
-      currentValue = selectedView.value
-    else currentValue = selectedView.value || viewOptions.value[0]?.value
-
-    selectedView.value = currentValue
-  },
-  { immediate: true }
+const selectedPeriod = ref<string>(
+  props.selectedTimespanType || periodOptions.value[0].value
 )
 
-const onHideChartModal = (): void => {
-  emits('hide-chart-modal')
-}
-
 const onUpdateTools = (): void => {
   const periodValue = selectedPeriod.value
   const viewValue = selectedView.value
   const selectedValue = useLocalStorage(
-    viewValue + 'ChartOptionsSensors',
-    undefined
+    'ChartOptionsSensors' + viewValue,
+    undefined,
+    props.project === 'sphere'
   )
 
   const fields = selectedValue
@@ -263,132 +221,22 @@ const onUpdateTools = (): void => {
   }
   if (selectedValue.metric) tools.metricType = selectedValue.metric
 
-  emits('update-timespan-type', selectedPeriod.value)
   emits('update-tools', tools)
 }
 
-const chartTitleDate = computed<string>(() => {
-  if (!props.startDate || !updateTimeFormatAndInterfaceLang.value) return ''
-
-  const start = $formattedDatetime(props.startDate, { hasSeconds: true })
-  const end = $formattedDatetime(props.endDate, { hasSeconds: true })
-  return `${start} - ${end}`
-})
+const optionsNames = ref<string[]>([])
 
-const onShowChartOptions = (): void => {
-  emits('show-chart-modal')
+const onSaveOptionName = (): void => {
+  optionsNames.value = getCurrentOptionsStorageFunc(props.project)
 }
 
-const onSaveOptionName = (): void => {
-  optionsNames.value = getCurrentOptionsStorageFunc()
+const onDeleteOption = (): void => {
+  optionsNames.value = getCurrentOptionsStorageFunc(props.project)
 }
 
 onMounted(() => {
-  optionsNames.value = getCurrentOptionsStorageFunc()
+  optionsNames.value = getCurrentOptionsStorageFunc(props.project)
   onUpdateTools()
 })
 </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>
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,227 @@
+<template>
+  <div class="advanced-filters px-[6px] pb-4">
+    <div class="period-select-wrap">
+      <label for="period-select" class="label-select"
+        >{{ localization.inventoryMonitor.period }}:</label
+      >
+
+      <ui-select
+        v-model="selectedPeriod"
+        :items="props.periodOptions"
+        :margin-between-trigger="4"
+        test-id="period-select"
+        width="auto"
+        class="mr-3"
+        @change="emits('update-tools')"
+      />
+
+      <div class="flex items-center">
+        <span v-if="props.chartTitleDate" class="chart-text">
+          {{ props.chartTitleDate }}
+        </span>
+        <ui-skeleton-item v-else width="320" height="16" />
+        <div class="chart-options-button-content">
+          <div class="border-line"></div>
+          <span
+            class="chart-options-button"
+            data-id="show-chart-options-button"
+            @click="emits('show-chart-modal')"
+            >{{ localization.inventoryMonitor.chartOptions }}</span
+          >
+        </div>
+      </div>
+    </div>
+
+    <div class="view-select-wrap">
+      <label for="view-select" class="label-select"
+        >{{ localization.common.view }}:</label
+      >
+      <ui-select
+        v-model="selectedView"
+        :items="viewOptions"
+        :margin-between-trigger="4"
+        test-id="view-select"
+        width="auto"
+        left
+        @change="emits('update-tools')"
+      />
+    </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_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/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/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/interfaces'
+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
+  selectedMetric: UI_T_Chart
+  selectedChartType: string
+  chartTitle: string
+  unitsCount: number
+  timespanPeriodType: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  validDateEnd: number
+  formatDate: string
+  isShowChartModal: boolean
+  language: string
+  powerSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
+  selectedPowerCountersKeys: number[]
+  selectedTemperatureCountersKeys: number[]
+  temperatureSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  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">
+.advanced-filters {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  grid-column-gap: 32px;
+  grid-row-gap: 16px;
+
+  .period-select-wrap {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    grid-row-gap: 12px;
+
+    .chart-text {
+      font-size: 13px;
+      color: var(--overview-filter-text-color);
+    }
+
+    .chart-options-button-content {
+      display: flex;
+      align-items: center;
+      padding-left: 12px;
+
+      .border-line {
+        border: 1px;
+        width: 1px;
+        height: 24px;
+        background-color: var(--advanced-chart-options-border-color);
+      }
+
+      .chart-options-button {
+        font-weight: 500;
+        font-size: 13px;
+        padding-left: 12px;
+        color: var(--advanced-chart-options-text-color);
+        cursor: pointer;
+
+        &:hover {
+          color: var(--advanced-chart-options-text-hover-color);
+        }
+      }
+    }
+  }
+
+  .view-select-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  .label-select {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--overview-filter-text-color);
+    margin-right: 12px;
+  }
+}
+</style>