bfg-common 1.6.95 → 1.6.97

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

@@ -0,0 +1,252 @@
+<template>
+  <div class="hardware-health flex flex-col h-full overflow-hidden">
+    <div class="flex flex-wrap justify-between gap-6 mb-5 px-[6px]">
+      <h3
+        v-if="!props.loading"
+        class="hardware-health-title text-[18px] font-[500]"
+      >
+        {{ localization.common.hardwareHealth }}
+      </h3>
+      <ui-skeleton-item v-else width="160" height="22" />
+
+      <common-pages-hardware-health-indicators
+        :status-counts="statusCounts"
+        :loading="props.loading"
+      />
+    </div>
+
+    <div class="tab-list px-[6px]">
+      <ui-tabs
+        v-if="!props.loading"
+        v-model="activeTab"
+        :tabs="props.hardwareHealthTabs"
+        type="outline"
+        test-id="hardware-health-tab-list"
+      />
+      <ui-skeleton-item v-else width="640" height="36" border-radius="8" />
+    </div>
+
+    <div v-if="activeTab === 'storage-sensor'" class="px-[6px]">
+      <ui-alert
+        v-if="!props.loading"
+        :messages="['content text']"
+        type="warning"
+        test-id="select-storage-sensor-alert"
+        size="lg"
+        hide-close-button
+      >
+        <template #content>
+          <p class="alert-text text-[14px]">
+            {{ props.generatedAlertText.before }}
+            <a
+              :href="props.generatedAlertText.link"
+              data-id="general-alert-text-link"
+              class="alert-text-link"
+            >
+              {{ props.generatedAlertText.linkText }}
+            </a>
+            {{ props.generatedAlertText.after }}
+          </p>
+        </template>
+      </ui-alert>
+
+      <div v-else class="alert-skeleton p-4 mt-4">
+        <ui-skeleton-item width="960" height="20" />
+      </div>
+    </div>
+
+    <div
+      :class="[
+        'h-full overflow-hidden',
+        { 'history-testimony': activeTab === 'history-testimony' },
+      ]"
+    >
+      <common-pages-hardware-health-history-testimony-graph
+        v-if="activeTab === 'history-testimony'"
+        v-model:selected-view="selectedGraphView"
+        :power-data="props.historyTestimonyPower"
+        :power-loading="props.loadingPowerData"
+        :valid-date-end="props.validDateEnd"
+        :format-date="props.formatDate"
+        :loading="props.loading"
+        :is-dark-mode="props.isDarkMode"
+        :formatted-datetime="props.formattedDatetime"
+        :language="props.language"
+        :get-date-format="props.getDateFormat"
+        :temperature-loading="props.loadingTemperatureData"
+        :temperature-data="props.historyTestimonyTemperature"
+        :main-selected-row="mainSelectedRow"
+        :counters-table-data="props.data"
+        :selected-host-name="props.selectedHostName"
+        :project="props.project"
+        @update-tools="emits('update-history-testimony-tools', $event)"
+      />
+
+      <div
+        :class="[
+          'table-content pt-4 h-full overflow-hidden px-[6px]',
+          activeTab,
+        ]"
+      >
+        <common-pages-hardware-health-table-view-new
+          :table-data="tableData || []"
+          :total-items="tableData?.length || 0"
+          :total-pages="1"
+          :loading="props.loading"
+          :selected-graph-view="selectedGraphView"
+          :table-mode="activeTab"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { I_SeriesLine } from '~/node_modules/bfg-nuxt-3-graph/graph/lib/models/interfaces'
+import type { UI_I_TabItem } from '~/node_modules/bfg-uikit/components/ui/tabs/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
+import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/old/lib/models/interfaces'
+import type { UI_I_StorageSensorsAlert } from '~/components/common/pages/hardwareHealth/lib/models/interfaces'
+import type { UI_I_HardwareHealthHistoryTestimonyTools } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_I_IndicatorAlerts } from '~/components/common/pages/hardwareHealth/indicators/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const activeTab = defineModel<UI_T_HardwareHealthTabMode>('activeTab', {
+  required: true,
+})
+const selectedGraphView = defineModel<string>('selectedGraphView', {
+  required: true,
+})
+const mainSelectedRow = defineModel<number[]>('mainSelectedRow', {
+  required: true,
+})
+
+const props = defineProps<{
+  data: UI_I_HardwareHealthSensors[]
+  loading: boolean
+  historyTestimonyPower: I_SeriesLine | null
+  historyTestimonyTemperature: I_SeriesLine | null
+  loadingPowerData: boolean
+  loadingTemperatureData: boolean
+  validDateEnd: number
+  formatDate: string
+  formattedDatetime: any
+  getDateFormat: any
+  language: string
+  isDarkMode: boolean
+  selectedHostName: string
+  hardwareHealthTabs: UI_I_TabItem[]
+  generatedAlertText: UI_I_StorageSensorsAlert
+  project: UI_T_Project
+}>()
+const emits = defineEmits<{
+  (
+    event: 'update-history-testimony-tools',
+    value: UI_I_HardwareHealthHistoryTestimonyTools
+  ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const tableData = computed<UI_I_HardwareHealthSensors[]>(() => {
+  if (
+    activeTab.value === 'storage-sensor' ||
+    activeTab.value === 'system-log'
+  ) {
+    return []
+  }
+  if (activeTab.value === 'alert-warning') {
+    return props.data.filter((sensor: UI_I_HardwareHealthSensors) =>
+      [2, 3].includes(sensor.status)
+    )
+  }
+  if (activeTab.value === 'history-testimony') {
+    return props.data.filter(
+      (sensor: UI_I_HardwareHealthSensors) =>
+        sensor.category?.toLowerCase() !== 'disk health'
+    )
+  }
+  return props.data
+})
+
+const statusCounts = computed<UI_I_IndicatorAlerts>(() => {
+  let alertStatus = 0
+  let warningStatus = 0
+  let length = props.data.length
+
+  props.data.forEach((item) => {
+    if (item.status === 3) alertStatus++
+    if (item.status === 2) warningStatus++
+  })
+
+  return {
+    alertStatus,
+    warningStatus,
+    length,
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.hardware-health {
+  padding-top: 16px;
+
+  &-title {
+    color: var(--title-form-first-color);
+  }
+
+  .tab-list {
+    overflow-x: auto;
+    min-height: max-content;
+
+    &::-webkit-scrollbar {
+      height: 0;
+    }
+  }
+
+  :deep(.ui-alert-item.lg) {
+    padding: 16px;
+    margin-top: 16px;
+  }
+
+  :deep(.alert-text) {
+    color: var(--title-form-first-color);
+    line-height: 20px;
+  }
+
+  .alert-text-link {
+    color: var(--btn-primary-fill-bg-color);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--btn-primary-fill-hover-bg-color);
+    }
+  }
+
+  .alert-skeleton {
+    background: #ffffff;
+    box-shadow: 0 1px 4px 0 #00000014;
+    border-radius: 8px;
+  }
+}
+
+.history-testimony {
+  overflow-y: auto;
+  margin-top: 24px;
+
+  .table-content {
+    margin-top: 0;
+    padding-top: 12px;
+  }
+}
+
+.table-content {
+  &.alert-warning,
+  &.history-testimony {
+    :deep(.data-table-header th:not(:last-child)) {
+      min-width: max-content !important;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,192 @@
+<template>
+  <div class="hardware-health">
+    <common-headline :headline="localization.common.hardwareHealth" />
+
+    <div class="hardware-health__description">
+      {{ hardwareHealthDescription }}
+    </div>
+
+    <atoms-tabs
+      v-model="activeTab"
+      :items="props.hardwareHealthTabs"
+      test-id="hardware-health-tabs"
+      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>
+          {{ props.generatedAlertText.before }}
+          <a
+            :href="props.generatedAlertText.link"
+            data-id="general-alert-text-link"
+          >
+            {{ props.generatedAlertText.linkText }}
+          </a>
+          {{ props.generatedAlertText.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="props.data"
+        :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="mainSelectedRow"
+        :valid-date-end="props.validDateEnd"
+        :format-date="props.formatDate"
+        :selected-host-name="props.selectedHostName"
+        :project="props.project"
+        @update-tools="emits('update-history-testimony-tools', $event)"
+      />
+
+      <common-pages-hardware-health-table-view-old
+        :key="uniqueKey"
+        v-model:selected-row="mainSelectedRow"
+        :selected-graph-view="selectedGraphView"
+        :data-table="props.data"
+        :total-items="props.data.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/old/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 type { UI_I_HardwareHealthHistoryTestimonyTools } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const activeTab = defineModel<UI_T_HardwareHealthTabMode>('activeTab', {
+  required: true,
+})
+const selectedGraphView = defineModel<string>('selectedGraphView', {
+  required: true,
+})
+const mainSelectedRow = defineModel<number[]>('mainSelectedRow', {
+  required: true,
+})
+
+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
+  selectedHostName: string
+  hardwareHealthTabs: UI_I_CollapseNavItem[]
+  generatedAlertText: UI_I_StorageSensorsAlert
+  project: UI_T_Project
+}>()
+
+const emits = defineEmits<{
+  (
+    event: 'update-history-testimony-tools',
+    value: UI_I_HardwareHealthHistoryTestimonyTools
+  ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const uniqueKey = ref<number>(0)
+
+watch(activeTab, () => {
+  uniqueKey.value++
+})
+
+const hardwareHealthDescription = computed<string>(() => {
+  const { thereIsAlertAndWarningOutOfSensors, noAlertsOrWarningsOutOfSensors } =
+    localization.value.common
+
+  let alertCount = 0
+  let warningCount = 0
+
+  props.data.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: props.data.length || 0,
+  }
+  const text = hasStatusTwoOrThree
+    ? thereIsAlertAndWarningOutOfSensors
+    : noAlertsOrWarningsOutOfSensors
+
+  return text?.replace(
+    /{(\w+)}/g,
+    (_, key: keyof Replacements) => replacements[key]
+  )
+})
+</script>
+
+<style lang="scss" scoped>
+@import 'bfg-common/assets/scss/common/global.scss';
+
+.hardware-health {
+  @extend %block-property;
+
+  &__tabs {
+    :deep(.nav) {
+      margin-top: 0;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    height: inherit;
+    overflow: hidden;
+
+    &.history-testimony {
+      overflow-y: auto;
+      display: block;
+    }
+  }
+}
+</style>