bfg-common 1.4.722 → 1.4.723

package/components/common/pages/hardwareHealth/HardwareHealth.vue

@@ -1,206 +1,213 @@
-<template>
-  <div class="hardware-health">
-    <common-headline :headline="localization.common.hardwareHealth" />
-
-    <div class="hardware-health__description">
-      {{ hardwareHealthDescription }}
-    </div>
-
-    <atoms-tabs
-      v-model="activeTab"
-      test-id="hardware-health-tabs"
-      :items="hardwareHealthTabs"
-      size="small"
-      class="hardware-health__tabs"
-    />
-
-    <atoms-alert
-      v-if="activeTab === 'storage-sensor'"
-      :items="['content text']"
-      status="alert-warning"
-      test-id="select-storage-sensor-alert"
-      hide-close-icon
-    >
-      <template #default="">
-        <p>
-          {{ generateAlertTextWithLink.before }}
-          <a
-            :href="generateAlertTextWithLink.link"
-            data-id="general-alert-text-link"
-          >
-            {{ generateAlertTextWithLink.linkText }}
-          </a>
-          {{ generateAlertTextWithLink.after }}
-        </p>
-      </template>
-    </atoms-alert>
-
-    <common-pages-hardware-health-tools-panel :selected-tab="activeTab" />
-
-    <div :class="['hardware-health__content', activeTab]">
-      <common-pages-hardware-health-history-testimony-graph
-        v-if="activeTab === 'history-testimony'"
-        v-model:selected-view="selectedGraphView"
-        :power-data="props.historyTestimonyPower"
-        :temperature-data="props.historyTestimonyTemperature"
-        :counters-table-data="hardwareHealth"
-        :language="props.language"
-        :power-loading="props.loadingPowerData"
-        :temperature-loading="props.loadingTemperatureData"
-        :formatted-datetime="props.formattedDatetime"
-        :is-dark-mode="props.isDarkMode"
-        :get-date-format="props.getDateFormat"
-        :main-selected-row="selectedRow"
-        @update-tools="onUpdateHistoryTestimonyTools"
-      />
-
-      <common-pages-hardware-health-table-view
-        :key="uniqueKey"
-        v-model:selected-row="selectedRow"
-        :selected-graph-view="selectedGraphView"
-        :data-table="hardwareHealth"
-        :total-items="hardwareHealth.length"
-        :total-pages="1"
-        :table-mode="activeTab"
-        :loading="props.loading"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { I_SeriesLine } from '~/node_modules/bfg-nuxt-3-graph/graph/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/lib/models/interfaces'
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-import type { UI_I_StorageSensorsAlert } from '~/components/common/pages/hardwareHealth/lib/models/interfaces'
-import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
-import { hardwareHealthTabsFunc } from '~/components/common/pages/hardwareHealth/lib/config/tabsPannel'
-import type {
-  UI_I_HardwareHealthHistoryTestimonyTools
-} from "~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces";
-
-const emits = defineEmits<{
-  (event: 'update-history-testimony-tools', value: UI_I_HardwareHealthHistoryTestimonyTools): void
-}>()
-const props = defineProps<{
-  data: UI_I_HardwareHealthSensors[]
-  loading: boolean
-  historyTestimonyPower: I_SeriesLine | null
-  historyTestimonyTemperature: I_SeriesLine | null
-  loadingPowerData: boolean
-  loadingTemperatureData: boolean
-  isDarkMode: boolean
-  formattedDatetime: any
-  getDateFormat: any
-  language: string
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $store }: any = useNuxtApp()
-
-const activeTab = ref<UI_T_HardwareHealthTabMode>('sensor')
-const selectedGraphView = ref<string>('all')
-const uniqueKey = ref<number>(0)
-
-const selectedRow = ref<number[]>([])
-
-const hardwareHealthTabs = computed<UI_I_CollapseNavItem[]>(() =>
-  hardwareHealthTabsFunc(localization.value)
-)
-
-const hardwareHealth = computed<UI_I_HardwareHealthSensors[]>(
-  () => props.data || []
-)
-
-const hardwareHealthDescription = computed<string>(() => {
-  const { thereIsAlertAndWarningOutOfSensors, noAlertsOrWarningsOutOfSensors } =
-    localization.value.common
-
-  let alertCount = 0
-  let warningCount = 0
-
-  hardwareHealth.value.forEach((sensor: UI_I_HardwareHealthSensors) => {
-    if (sensor.status === 3) alertCount++
-    if (sensor.status === 2) warningCount++
-  })
-
-  // const hasStatusTwoOrThree = hardwareHealth.value.some((sensor) =>
-  //   ['warning', 'alert'].includes(sensor.status)
-  // )
-
-  type Replacements = {
-    alert: number
-    warning: number
-    sensors: number
-  }
-
-  const hasStatusTwoOrThree = alertCount > 0 || warningCount > 0
-  const replacements: Replacements = {
-    alert: alertCount,
-    warning: warningCount,
-    sensors: hardwareHealth.value.length || 0,
-  }
-  const text = hasStatusTwoOrThree
-    ? thereIsAlertAndWarningOutOfSensors
-    : noAlertsOrWarningsOutOfSensors
-
-  return text?.replace(
-    /{(\w+)}/g,
-    (_, key: keyof Replacements) => replacements[key]
-  )
-})
-
-const generateAlertTextWithLink = computed<UI_I_StorageSensorsAlert>(() => {
-  const { storageSensorsAlert, thisKbArticle } = localization.value.common
-
-  const [before, after] = storageSensorsAlert.split('{ link }')
-
-  return {
-    before,
-    after,
-    link: 'javascript:void(0)',
-    linkText: thisKbArticle,
-  }
-})
-
-watch(activeTab, () => {
-  uniqueKey.value++
-})
-
-const onUpdateHistoryTestimonyTools = (tools: UI_I_HardwareHealthHistoryTestimonyTools): void => {
-  emits('update-history-testimony-tools', tools)
-}
-
-onMounted(() => {
-  $store.dispatch('main/A_CONTINUE_GLOBAL_REFRESH', 'hardwareHealth')
-})
-onUnmounted(() => {
-  $store.dispatch('main/A_PAUSE_GLOBAL_REFRESH', 'hardwareHealth')
-})
-</script>
-
-<style lang="scss" scoped>
-@import 'bfg-common/assets/scss/common/global.scss';
-.hardware-health {
-  @extend %block-property;
-  &__description {
-  }
-  &__tabs {
-    :deep(.nav) {
-      margin-top: 0;
-    }
-  }
-  &__content {
-    display: flex;
-    flex-direction: column;
-    height: inherit;
-    overflow: hidden;
-
-    &.history-testimony {
-      overflow-y: auto;
-      display: block;
-    }
-  }
-}
-</style>
+<template>
+  <div class="hardware-health">
+    <common-headline :headline="localization.common.hardwareHealth" />
+
+    <div class="hardware-health__description">
+      {{ hardwareHealthDescription }}
+    </div>
+
+    <atoms-tabs
+      v-model="activeTab"
+      test-id="hardware-health-tabs"
+      :items="hardwareHealthTabs"
+      size="small"
+      class="hardware-health__tabs"
+    />
+
+    <atoms-alert
+      v-if="activeTab === 'storage-sensor'"
+      :items="['content text']"
+      status="alert-warning"
+      test-id="select-storage-sensor-alert"
+      hide-close-icon
+    >
+      <template #default="">
+        <p>
+          {{ generateAlertTextWithLink.before }}
+          <a
+            :href="generateAlertTextWithLink.link"
+            data-id="general-alert-text-link"
+          >
+            {{ generateAlertTextWithLink.linkText }}
+          </a>
+          {{ generateAlertTextWithLink.after }}
+        </p>
+      </template>
+    </atoms-alert>
+
+    <common-pages-hardware-health-tools-panel :selected-tab="activeTab" />
+
+    <div :class="['hardware-health__content', activeTab]">
+      <common-pages-hardware-health-history-testimony-graph
+        v-if="activeTab === 'history-testimony'"
+        v-model:selected-view="selectedGraphView"
+        :power-data="props.historyTestimonyPower"
+        :temperature-data="props.historyTestimonyTemperature"
+        :counters-table-data="hardwareHealth"
+        :language="props.language"
+        :power-loading="props.loadingPowerData"
+        :temperature-loading="props.loadingTemperatureData"
+        :formatted-datetime="props.formattedDatetime"
+        :is-dark-mode="props.isDarkMode"
+        :get-date-format="props.getDateFormat"
+        :main-selected-row="selectedRow"
+        :valid-date-end="props.validDateEnd"
+        :format-date="props.formatDate"
+        @update-tools="onUpdateHistoryTestimonyTools"
+      />
+
+      <common-pages-hardware-health-table-view
+        :key="uniqueKey"
+        v-model:selected-row="selectedRow"
+        :selected-graph-view="selectedGraphView"
+        :data-table="hardwareHealth"
+        :total-items="hardwareHealth.length"
+        :total-pages="1"
+        :table-mode="activeTab"
+        :loading="props.loading"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { I_SeriesLine } from '~/node_modules/bfg-nuxt-3-graph/graph/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_I_StorageSensorsAlert } from '~/components/common/pages/hardwareHealth/lib/models/interfaces'
+import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
+import { hardwareHealthTabsFunc } from '~/components/common/pages/hardwareHealth/lib/config/tabsPannel'
+import type { UI_I_HardwareHealthHistoryTestimonyTools } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+
+const emits = defineEmits<{
+  (
+    event: 'update-history-testimony-tools',
+    value: UI_I_HardwareHealthHistoryTestimonyTools
+  ): void
+}>()
+const props = defineProps<{
+  data: UI_I_HardwareHealthSensors[]
+  loading: boolean
+  historyTestimonyPower: I_SeriesLine | null
+  historyTestimonyTemperature: I_SeriesLine | null
+  loadingPowerData: boolean
+  loadingTemperatureData: boolean
+  isDarkMode: boolean
+  formattedDatetime: any
+  getDateFormat: any
+  language: string
+  validDateEnd: number
+  formatDate: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+const activeTab = ref<UI_T_HardwareHealthTabMode>('sensor')
+const selectedGraphView = ref<string>('all')
+const uniqueKey = ref<number>(0)
+
+const selectedRow = ref<number[]>([])
+
+const hardwareHealthTabs = computed<UI_I_CollapseNavItem[]>(() =>
+  hardwareHealthTabsFunc(localization.value)
+)
+
+const hardwareHealth = computed<UI_I_HardwareHealthSensors[]>(
+  () => props.data || []
+)
+
+const hardwareHealthDescription = computed<string>(() => {
+  const { thereIsAlertAndWarningOutOfSensors, noAlertsOrWarningsOutOfSensors } =
+    localization.value.common
+
+  let alertCount = 0
+  let warningCount = 0
+
+  hardwareHealth.value.forEach((sensor: UI_I_HardwareHealthSensors) => {
+    if (sensor.status === 3) alertCount++
+    if (sensor.status === 2) warningCount++
+  })
+
+  // const hasStatusTwoOrThree = hardwareHealth.value.some((sensor) =>
+  //   ['warning', 'alert'].includes(sensor.status)
+  // )
+
+  type Replacements = {
+    alert: number
+    warning: number
+    sensors: number
+  }
+
+  const hasStatusTwoOrThree = alertCount > 0 || warningCount > 0
+  const replacements: Replacements = {
+    alert: alertCount,
+    warning: warningCount,
+    sensors: hardwareHealth.value.length || 0,
+  }
+  const text = hasStatusTwoOrThree
+    ? thereIsAlertAndWarningOutOfSensors
+    : noAlertsOrWarningsOutOfSensors
+
+  return text?.replace(
+    /{(\w+)}/g,
+    (_, key: keyof Replacements) => replacements[key]
+  )
+})
+
+const generateAlertTextWithLink = computed<UI_I_StorageSensorsAlert>(() => {
+  const { storageSensorsAlert, thisKbArticle } = localization.value.common
+
+  const [before, after] = storageSensorsAlert.split('{ link }')
+
+  return {
+    before,
+    after,
+    link: 'javascript:void(0)',
+    linkText: thisKbArticle,
+  }
+})
+
+watch(activeTab, () => {
+  uniqueKey.value++
+})
+
+const onUpdateHistoryTestimonyTools = (
+  tools: UI_I_HardwareHealthHistoryTestimonyTools
+): void => {
+  emits('update-history-testimony-tools', tools)
+}
+
+onMounted(() => {
+  $store.dispatch('main/A_CONTINUE_GLOBAL_REFRESH', 'hardwareHealth')
+})
+onUnmounted(() => {
+  $store.dispatch('main/A_PAUSE_GLOBAL_REFRESH', 'hardwareHealth')
+})
+</script>
+
+<style lang="scss" scoped>
+@import 'bfg-common/assets/scss/common/global.scss';
+.hardware-health {
+  @extend %block-property;
+  &__description {
+  }
+  &__tabs {
+    :deep(.nav) {
+      margin-top: 0;
+    }
+  }
+  &__content {
+    display: flex;
+    flex-direction: column;
+    height: inherit;
+    overflow: hidden;
+
+    &.history-testimony {
+      overflow-y: auto;
+      display: block;
+    }
+  }
+}
+</style>