bfg-common 1.6.95 → 1.6.97

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/metrics/MetricsNew.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="metrics-container">
+    <p class="title">
+      {{ localization.zabbix.metrics }} ({{ props.metricsItems?.length }})
+    </p>
+    <div class="metrics-items-block">
+      <div
+        v-for="item in props.metricsItems"
+        :key="item.value"
+        :class="[
+          'metric-item',
+          { selected: selectedMetric === item.value },
+        ]"
+      >
+        <ui-tooltip
+          :id="`tooltip-metric-${item.value}`"
+          :test-id="`tooltip-metric-${item.value}`"
+          size="md"
+          position="right"
+          position-by-tooltip="bottom"
+          show-type="variant-1"
+        >
+          <template #target>
+            <div
+              :id="`tooltip-metric-${item.value}`"
+              class="popped tooltip w-full"
+            >
+              <div
+                :data-id="item.value"
+                :title="item.text"
+                class="metric-name"
+                @click="selectedMetric = String(item.value)"
+              >
+                {{ item.text }}
+              </div>
+            </div>
+          </template>
+          <template #content>
+            <div>
+              {{ item.text }}
+            </div>
+          </template>
+        </ui-tooltip>
+
+        <div class="metric-name-border-line"></div>
+      </div>
+    </div>
+  </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";
+
+const selectedMetric = defineModel<string>('selectedMetric', { required: true })
+
+const props = defineProps<{
+  metricsItems: UI_I_VerticalTabs[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+</script>
+
+<style scoped lang="scss">
+.metrics-container {
+  margin-top: 6px;
+  margin-bottom: 5px;
+  display: flex;
+  flex-direction: column;
+  height: inherit;
+  padding: 12px;
+  border-radius: 8px;
+  background-color: var(--metrics-container-bg-color);
+  box-shadow: 0 1px 4px 0 #00000014;
+
+  .title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--metrics-container-title-color);
+    margin-bottom: 16px;
+  }
+  .metrics-items-block {
+    overflow-y: auto;
+    height: inherit;
+
+    .metric-item {
+      &.selected {
+        .metric-name {
+          background-color: var(--metrics-container-selected-item-bg-color);
+          color: var(--metrics-container-selected-item-color);
+        }
+      }
+      &:not(.selected) {
+        .metric-name {
+          cursor: pointer;
+
+          &:hover {
+            background-color: var(--metrics-container-item-hover-bg-color);
+            color: var(--metrics-container-item-hover-color);
+          }
+        }
+      }
+      .metric-name {
+        border-radius: 6px;
+        padding: 8px 12px;
+        font-size: 13px;
+        color: var(--metrics-container-item-color);
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .metric-name-border-line {
+        margin-top: 8px;
+        margin-bottom: 8px;
+        height: 1px;
+        background-color: var(--metrics-container-item-border-line-color);
+      }
+    }
+  }
+}
+</style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/metrics/MetricsOld.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="chart-option-groups-container">
+    <span>{{ localization.inventoryMonitor.chartMetrics }}</span>
+    <atoms-tabs-vertical-tabs
+      v-model="selectedMetric"
+      :items="props.metricsItems"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+
+const selectedMetric = defineModel<string>('selectedMetric', { required: true })
+const props = defineProps<{
+  metricsItems: UI_I_OptionItem[]
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar.ts

@@ -1,4 +1,5 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 
 export const periodFunc = (
@@ -69,14 +70,76 @@ export const viewFunc = (
   return result
 }
 
-export const getCurrentOptionsStorageFunc = (): string[] => {
+export const getCurrentOptionsStorageFunc = (
+  project: UI_T_Project
+): string[] => {
+  const routeId = useRoute().params.id
+  const routeType = useRoute().params.type
+  const localStoragePrefix = project === 'sphere' ? getLocalStoragePrefix() : ''
+
   const optionsNames = []
   for (const key of Object.entries(localStorage)) {
-    if (key[0].includes('ChartOptionsSensors')) {
-      if (key[0].includes('ChartOptionsSensors')) {
-        optionsNames.push(key[0].replace('ChartOptionsSensors', ''))
-      }
+    if (
+      key[0].includes('ChartOptionsSensors') &&
+      key[0].includes(localStoragePrefix)
+    ) {
+      const values = JSON.parse(key[1])
+
+      if (
+        values.value.routeType === routeType &&
+        values.value.nodeId === routeId
+      )
+        optionsNames.push(values.value.validShowName)
     }
   }
   return optionsNames
 }
+
+export const removeSelectedOptionsFromStorageFunc = (
+  selectedName: string,
+  project: UI_T_Project
+): void => {
+  const routeId = useRoute().params.id
+  const localStoragePrefix = project === 'sphere' ? getLocalStoragePrefix() : ''
+
+  for (const key of Object.entries(localStorage)) {
+    if (
+      key[0].includes('ChartOptionsSensors') &&
+      key[0].includes(localStoragePrefix)
+    ) {
+      let values = JSON.parse(key[1])
+
+      if (
+        values.value.validShowName === selectedName &&
+        values.value.nodeId === routeId
+      )
+        window.localStorage.removeItem(key[0])
+    }
+  }
+}
+
+export const getSelectedOptionsValueFromStorageFunc = (
+  selectedName: string,
+  project: UI_T_Project
+): any => {
+  const routeId = useRoute().params.id
+  const localStoragePrefix = project === 'sphere' ? getLocalStoragePrefix() : ''
+
+  let result = null
+
+  for (const key of Object.entries(localStorage)) {
+    if (
+      key[0].includes('ChartOptionsSensors') &&
+      key[0].includes(localStoragePrefix)
+    ) {
+      let values = JSON.parse(key[1])
+
+      if (
+        values.value.validShowName === selectedName &&
+        values.value.nodeId === routeId
+      )
+        result = values.value
+    }
+  }
+  return result
+}

package/components/common/pages/hardwareHealth/indicators/Indicators.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="flex">
+    <div class="chip-item flex items-center pr-4">
+      <span v-if="!props.loading" class="chip-label mr-3"
+        >{{ localization.common.sensors }}:
+      </span>
+      <ui-skeleton-item v-else width="80" height="24" class="mr-3" />
+      <ui-chip
+        v-if="!props.loading"
+        size="lg"
+        :color="props.statusCounts.length > 0 ? 'primary' : 'default'"
+        class="mb-2"
+        test-id="hardware-health-sensor-chip"
+        rounded
+      >
+        {{ props.statusCounts.length }}
+      </ui-chip>
+      <ui-skeleton-item v-else width="32" height="24" />
+    </div>
+    <div class="chip-item flex items-center pr-4">
+      <span v-if="!props.loading" class="chip-label mr-3"
+        >{{ localization.common.alerts }}:
+      </span>
+      <ui-skeleton-item v-else width="80" height="24" class="mr-3" />
+      <ui-chip
+        v-if="!props.loading"
+        size="lg"
+        :color="props.statusCounts.alertStatus > 0 ? 'red' : 'default'"
+        class="mb-2"
+        test-id="hardware-health-sensor-chip"
+        rounded
+      >
+        {{ props.statusCounts.alertStatus }}
+      </ui-chip>
+      <ui-skeleton-item v-else width="32" height="24" />
+    </div>
+    <div class="chip-item flex items-center pr-4">
+      <span v-if="!props.loading" class="chip-label mr-3"
+        >{{ localization.common.warnings }}:
+      </span>
+      <ui-skeleton-item v-else width="80" height="24" class="mr-3" />
+      <ui-chip
+        v-if="!props.loading"
+        size="lg"
+        :color="props.statusCounts.warningStatus > 0 ? 'yellow' : 'default'"
+        class="mb-2"
+        test-id="hardware-health-sensor-chip"
+        rounded
+      >
+        {{ props.statusCounts.warningStatus }}
+      </ui-chip>
+      <ui-skeleton-item v-else width="32" height="24" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_IndicatorAlerts } from '~/components/common/pages/hardwareHealth/indicators/lib/models/interfaces'
+
+const props = defineProps<{
+  statusCounts: UI_I_IndicatorAlerts
+  loading: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style>
+:root {
+  --chip-line-bg: #e9ebeda3;
+}
+:root.dark-theme {
+  --chip-line-bg: #e9ebed1f;
+}
+</style>
+<style scoped lang="scss">
+.chip-item {
+  &:not(:first-child)::before {
+    content: '';
+    width: 1px;
+    height: 20px;
+    background: var(--chip-line-bg);
+    margin-right: 16px;
+  }
+
+  :deep(.ui-chip) {
+    margin-bottom: 0;
+  }
+}
+
+.chip-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--title-form-first-color);
+}
+</style>

package/components/common/pages/hardwareHealth/indicators/lib/models/interfaces.ts

@@ -0,0 +1,5 @@
+export interface UI_I_IndicatorAlerts {
+  alertStatus: number
+  warningStatus: number
+  length: number
+}

package/components/common/pages/hardwareHealth/lib/config/status.ts

@@ -11,3 +11,17 @@ export const sensorsIconByStatus = [
   'warning-outline',
   'error-outline',
 ]
+
+export const sensorsNewIconByStatus = [
+  '',
+  'status-check',
+  'warning-outline',
+  'error-outline'
+]
+
+export const sensorsChipColorByStatus = [
+  'default',
+  'green',
+  'yellow',
+  'red',
+]

package/components/common/pages/hardwareHealth/lib/config/tabsPannel.ts

@@ -1,3 +1,4 @@
+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_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
 
@@ -37,3 +38,40 @@ export const hardwareHealthTabsFunc = (
     },
   ]
 }
+
+export const hardwareHealthTabsNewFunc = (
+    localization: UI_I_Localization
+): UI_I_TabItem[] => {
+  return [
+    {
+      name: localization.common.sensors,
+      value: 'sensor',
+      disabled: false,
+      testId: 'hardware-health-sensors',
+    },
+    {
+      name: localization.common.storageSensors,
+      value: 'storage-sensor',
+      disabled: false,
+      testId: 'hardware-health-storage-sensor',
+    },
+    {
+      name: localization.common.alertsAndWarnings,
+      value: 'alert-warning',
+      disabled: false,
+      testId: 'hardware-health-alert-warning',
+    },
+    {
+      name: localization.common.systemEventLog,
+      value: 'system-log',
+      disabled: false,
+      testId: 'hardware-health-system-log',
+    },
+    {
+      name: localization.common.historyTestimony,
+      value: 'history-testimony',
+      disabled: false,
+      testId: 'hardware-health-history-testimony',
+    },
+  ]
+}

package/components/common/pages/hardwareHealth/lib/models/enums.ts

@@ -1,5 +1,5 @@
 export enum UI_E_SensorsCategoryIcon {
-  power = 'vx-icon-power',
+  power = 'icon-power',
   temperature = 'vx-icon-temp',
   battery = 'vx-icon-battery',
   storage = 'vx-icon-storage',

package/components/common/pages/hardwareHealth/tableView/new/New.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="hardware-health-table h-full pb-4">
+    <ui-data-table
+      :data="data"
+      :options="table[props.tableMode].options"
+      :loading="props.loading"
+      :total-pages="props.totalPages"
+      :total-items="props.totalItems"
+      :texts="texts"
+      :skeleton="tableSkeleton"
+      size="md"
+      test-id="hardware-health-table"
+    >
+      <template #skeleton-header>
+        <div class="flex gap-4 justify-between items-center">
+          <ui-skeleton-item width="80" height="20" />
+          <ui-skeleton-item width="112" height="36" border-radius="8" />
+        </div>
+      </template>
+      <template v-if="props.tableMode !== 'history-testimony'" #insteadOfTitleActions>
+        <ui-button
+          test-id="vm-migrate-configure-button"
+          type="primary"
+          size="md"
+          @click="onUpdateTable"
+        >
+          <ui-icon name="reset" width="20" height="20" />
+          <span class="text-[14px] font-[500] ml-2">
+            {{ localization.common.refresh }}
+          </span>
+        </ui-button>
+      </template>
+      <template #icon="{ item, row }">
+        <div v-if="item.col === 'col1'" class="flex items-center">
+          <ui-chip
+            :label="item.data.statusText"
+            :color="item.data.statusColor"
+            rounded
+            size="md"
+          >
+            <ui-icon :name="item.data.statusIcon" width="14" height="14" />
+            <span class="font-[500] text-[12px]">{{
+                item.data.statusText
+              }}</span>
+          </ui-chip>
+          <div v-if="item.data.warning" class="ml-2 hardware-health-tooltip">
+            <common-pages-hardware-health-tooltip
+              :id="row"
+              :text="item.data.warning"
+              :title="localization.common.warning"
+            />
+          </div>
+        </div>
+        <div v-else class="flex gap-1 items-center">
+          <span :class="item.data.iconClassName" />
+          <span class="text-ellipsis">{{ item.text }}</span>
+        </div>
+      </template>
+      <template #default-actions>
+        <span></span>
+      </template>
+    </ui-data-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableBody,
+  UI_I_DataTableHeader,
+  UI_I_TableTexts
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_DataTableSkeleton } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import * as sensorTable from '~/components/common/pages/hardwareHealth/tableView/new/lib/config/sensorTable'
+import * as storageSensorsTable
+  from '~/components/common/pages/hardwareHealth/tableView/new/lib/config/storageSensorsTable'
+import * as alertWarningTable from '~/components/common/pages/hardwareHealth/tableView/new/lib/config/alertWarningTable'
+import * as systemLogTable from '~/components/common/pages/hardwareHealth/tableView/new/lib/config/systemLogTable'
+import * as historyTestimonyTable from '~/components/common/pages/hardwareHealth/tableView/new/lib/config/historyTestimonyTable'
+import type {
+  UI_I_HardwareHealthSensors
+} from '~/components/common/pages/hardwareHealth/tableView/old/lib/models/interfaces'
+import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
+
+const props = defineProps<{
+  tableData: UI_I_HardwareHealthSensors[]
+  totalItems: number
+  totalPages: number
+  loading: boolean
+  tableMode: UI_T_HardwareHealthTabMode
+  selectedGraphView: string
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const table: any = {
+  sensor: sensorTable,
+  'storage-sensor': storageSensorsTable,
+  'alert-warning': alertWarningTable,
+  'system-log': systemLogTable,
+  'history-testimony': historyTestimonyTable,
+}
+
+const tableTitle = computed<string>(() => {
+  switch (props.tableMode) {
+    case 'sensor':
+      return localization.value.common.sensors
+    case 'history-testimony':
+      return localization.value.common.sensors
+    case 'storage-sensor':
+      return localization.value.common.storageSensors
+    case 'alert-warning':
+      return localization.value.common.alertsAndWarnings
+    case 'system-log':
+      return localization.value.common.systemEvents
+    default:
+      return ''
+  }
+})
+watch(() => props.tableMode, (newValue) => {
+  switch (newValue) {
+    case 'sensor':
+      tableSkeleton.value.columnsCount = 6
+      break
+    case 'history-testimony':
+      tableSkeleton.value.columnsCount = 4
+      break
+    case 'storage-sensor':
+      tableSkeleton.value.columnsCount = 3
+      break
+    case 'alert-warning':
+      tableSkeleton.value.columnsCount = 3
+      break
+    case 'system-log':
+      tableSkeleton.value.columnsCount = 2
+      break
+  }
+})
+
+const texts = computed<UI_I_TableTexts>(() => ({
+  searchHere: localization.value.common.searchHere,
+  rowsPerPage: localization.value.common.rowsPerPage,
+  of: localization.value.common.of,
+  selected: localization.value.common.selected,
+  columns: localization.value.common.columns,
+  previous: localization.value.common.previous,
+  next: localization.value.common.next,
+  noItemsFound: localization.value.common.noItemsFound,
+  exportAll: localization.value.common.exportAll,
+  exportSelected: localization.value.common.exportSelected,
+  all: localization.value.common.all,
+  filter: localization.value.common.filter
+}))
+
+const tableSkeleton = ref<UI_I_DataTableSkeleton>({
+  withoutPagination: false,
+  columnsCount: 6
+})
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'hardware-health-table',
+  header: tableHeadItems.value,
+  body: tableBodyItems.value,
+  title: `${tableTitle.value} (${props.totalItems})`
+}))
+
+const tableHeadItems = computed<UI_I_DataTableHeader[]>(() =>
+  table[props.tableMode].getHeaderDataFunc(localization.value)
+)
+
+const tableBodyItems = ref<UI_I_DataTableBody[]>([])
+watch(
+  [() => props.tableData, localization],
+  ([newValue]) => {
+    if (!newValue?.length) {
+      tableBodyItems.value = []
+      return
+    }
+
+    tableBodyItems.value = table[props.tableMode].getBodyDataFunc(
+        newValue,
+        localization.value
+    )
+  },
+  { deep: true, immediate: true }
+)
+
+
+const onUpdateTable = () => {
+  $store.dispatch('main/A_GLOBAL_REFRESH', ['hardwareHealth'])
+}
+</script>
+
+<style lang="scss" scoped>
+.hardware-health-table {
+  .hardware-health-tooltip {
+    margin-top: 2px;
+  }
+  :deep(.table-title-actions-container) {
+    grid-column-gap: 16px;
+  }
+  :deep(.table-container) {
+    grid-template-rows: auto 1fr;
+  }
+  :deep(.row-size-md .ui-main-no-items-found) {
+    top: 50%;
+  }
+  :deep(.data-table-skeleton) {
+    height: 100%;
+    overflow: hidden;
+  }
+  :deep(.body.with-actions) {
+    height: calc(100% - 86px);
+  }
+  :deep(.body-row > .body-col:last-child) {
+    display: none !important;
+  }
+  :deep(.default-header > div:last-child) {
+    width: 112px !important;
+    height: 36px !important;
+  }
+  :deep(.default-header > div:first-child .skeleton-item) {
+    width: 80px !important;
+    height: 20px !important;
+  }
+}
+</style>