From e808e6be1ef517c470bdd5c2d417182ffa96b13b Mon Sep 17 00:00:00 2001
From: Ricki Moore <mrricki.m.usmc@gmail.com>
Date: Fri, 14 Jul 2023 11:59:12 +0200
Subject: [PATCH] Feat: Alert Management (#186)

---
 src/components/AlertCard/AlertCard.tsx        | 11 ++-
 .../AlertFilterSettings.tsx                   | 53 +++++++++++
 src/components/DiagnosticTable/AlertInfo.tsx  | 88 ++++++++++++++-----
 src/components/DropDown/DropDown.tsx          |  6 +-
 .../NetworkPeerSpeedometer.tsx                | 27 ++++++
 src/components/TopBar/BeaconMetric.tsx        | 22 ++++-
 src/components/TopBar/ValidatorMetric.tsx     | 18 ++++
 src/constants/constants.ts                    |  8 ++
 .../__tests__/useDeviceDiagnostics.spec.ts    | 12 ++-
 .../__tests__/useDiagnosticAlerts.spec.ts     | 68 --------------
 src/hooks/__tests__/useValidatorCount.spec.ts |  4 +-
 src/hooks/useAtomCleanup.ts                   |  3 +
 src/hooks/useDeviceDiagnostics.ts             | 21 ++++-
 src/hooks/useDiagnosticAlerts.ts              | 88 +++++++++++--------
 src/hooks/useDivDimensions.ts                 | 34 +++++++
 src/hooks/useTrackLogs.ts                     | 55 +++++++++++-
 src/hooks/useValidatorCount.ts                |  4 +-
 src/locales/translations/en-US.json           | 11 +++
 src/recoil/atoms.ts                           |  7 +-
 src/types/index.ts                            |  8 ++
 src/utilities/sortAlerts.ts                   | 18 ++++
 21 files changed, 419 insertions(+), 147 deletions(-)
 create mode 100644 src/components/AlertFilterSettings/AlertFilterSettings.tsx
 delete mode 100644 src/hooks/__tests__/useDiagnosticAlerts.spec.ts
 create mode 100644 src/hooks/useDivDimensions.ts
 create mode 100644 src/utilities/sortAlerts.ts

diff --git a/src/components/AlertCard/AlertCard.tsx b/src/components/AlertCard/AlertCard.tsx
index c81b3bfa..bbcd9c43 100644
--- a/src/components/AlertCard/AlertCard.tsx
+++ b/src/components/AlertCard/AlertCard.tsx
@@ -1,14 +1,16 @@
 import StatusBar, { StatusBarProps } from '../StatusBar/StatusBar'
 import Typography from '../Typography/Typography'
 import { FC } from 'react'
+
 export interface AlertCardProps extends StatusBarProps {
   text: string
   subText: string
+  onClick?: () => void
 }
 
-const AlertCard: FC<AlertCardProps> = ({ text, subText, ...props }) => {
+const AlertCard: FC<AlertCardProps> = ({ text, subText, onClick, ...props }) => {
   return (
-    <div className='w-full h-14 border-t-0 md:border-l-0 border-style500 flex justify-between items-center space-x-2 p-2'>
+    <div className='w-full h-14 group border-b-style500 flex justify-between items-center space-x-2 p-2'>
       <StatusBar {...props} />
       <div className='w-full max-w-tiny'>
         <Typography type='text-caption2'>{text}</Typography>
@@ -16,7 +18,10 @@ const AlertCard: FC<AlertCardProps> = ({ text, subText, ...props }) => {
           {subText}
         </Typography>
       </div>
-      <i className='bi-info-circle-fill text-dark200 dark:text-dark300' />
+      <i
+        onClick={onClick}
+        className='bi-trash-fill cursor-pointer opacity-0 group-hover:opacity-100 text-dark200 dark:text-dark300'
+      />
     </div>
   )
 }
diff --git a/src/components/AlertFilterSettings/AlertFilterSettings.tsx b/src/components/AlertFilterSettings/AlertFilterSettings.tsx
new file mode 100644
index 00000000..d137cfb0
--- /dev/null
+++ b/src/components/AlertFilterSettings/AlertFilterSettings.tsx
@@ -0,0 +1,53 @@
+import DropDown from '../DropDown/DropDown'
+import { FC, useState } from 'react'
+import useClickOutside from '../../hooks/useClickOutside'
+import { StatusColor } from '../../types'
+import { useTranslation } from 'react-i18next'
+
+export type FilterValue = StatusColor | 'all'
+
+export interface AlertFilterSettingsProps {
+  onChange: (value: FilterValue) => void
+  value: FilterValue
+}
+
+const AlertFilterSettings: FC<AlertFilterSettingsProps> = ({ onChange, value }) => {
+  const { t } = useTranslation()
+  const [isOpen, toggle] = useState(false)
+
+  const openDrop = () => toggle(true)
+  const closeDrop = () => toggle(false)
+
+  const { ref } = useClickOutside<HTMLDivElement>(closeDrop)
+
+  const selectOption = (value: FilterValue) => {
+    onChange(value)
+    closeDrop()
+  }
+  const filterOptions = [
+    { text: t('alertMessages.all'), value: 'all' },
+    { text: t('alertMessages.severe'), value: StatusColor.ERROR },
+    { text: t('alertMessages.warning'), value: StatusColor.WARNING },
+    { text: t('alertMessages.fair'), value: StatusColor.SUCCESS },
+  ]
+
+  return (
+    <div ref={ref} className='relative'>
+      <i onClick={openDrop} className='bi-sliders2 text-dark400 cursor-pointer' />
+      <DropDown width='w-42' position='right-0' isOpen={isOpen}>
+        {filterOptions.map((option, index) => (
+          <li
+            key={index}
+            className='block cursor-pointer flex justify-between py-2 px-4 hover:bg-gray-100 dark:hover:bg-dark750 dark:hover:text-white'
+            onClick={() => selectOption(option.value as FilterValue)}
+          >
+            {option.text}
+            {option.value === value && <i className='bi-check-circle' />}
+          </li>
+        ))}
+      </DropDown>
+    </div>
+  )
+}
+
+export default AlertFilterSettings
diff --git a/src/components/DiagnosticTable/AlertInfo.tsx b/src/components/DiagnosticTable/AlertInfo.tsx
index 5fa975c1..fb07b51b 100644
--- a/src/components/DiagnosticTable/AlertInfo.tsx
+++ b/src/components/DiagnosticTable/AlertInfo.tsx
@@ -2,39 +2,79 @@ import Typography from '../Typography/Typography'
 import AlertCard from '../AlertCard/AlertCard'
 import { useTranslation } from 'react-i18next'
 import useDiagnosticAlerts from '../../hooks/useDiagnosticAlerts'
+import useDivDimensions from '../../hooks/useDivDimensions'
+import { useEffect, useMemo, useState } from 'react'
+import sortAlertMessagesBySeverity from '../../utilities/sortAlerts'
+import { StatusColor } from '../../types'
+import AlertFilterSettings, { FilterValue } from '../AlertFilterSettings/AlertFilterSettings'
 
 const AlertInfo = () => {
   const { t } = useTranslation()
-  const { natAlert, peerCountAlert } = useDiagnosticAlerts()
+  const { alerts, dismissAlert, resetDismissed } = useDiagnosticAlerts()
+  const { ref, dimensions } = useDivDimensions()
+  const [filter, setFilter] = useState('all')
+
+  const setFilterValue = (value: FilterValue) => setFilter(value)
+
+  const formattedAlerts = useMemo(() => {
+    let baseAlerts = alerts
+
+    if (filter !== 'all') {
+      baseAlerts = baseAlerts.filter(({ severity }) => severity === filter)
+    }
+
+    return sortAlertMessagesBySeverity(baseAlerts)
+  }, [alerts, filter])
+
+  const isFiller = formattedAlerts.length < 6
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      resetDismissed()
+    }, 60000)
+
+    return () => clearInterval(intervalId)
+  }, [])
+
   return (
-    <div className='h-full w-full flex flex-col'>
-      <div className='w-full h-12 flex items-center justify-between px-4 md:border-l-0 border-style500'>
+    <div ref={ref} className='h-full w-full flex flex-col border-l-0 border-t-0 border-style500'>
+      <div className='w-full h-12 flex items-center justify-between px-4 md:border-l-0 border-r-0 border-style500'>
         <Typography type='text-caption1' color='text-primary' darkMode='dark:text-white' isBold>
           {t('alertInfo.alerts')}
         </Typography>
-        <Typography type='text-tiny' className='uppercase' color='text-dark400'>
-          {t('viewAll')}
-        </Typography>
+        <AlertFilterSettings value={filter as FilterValue} onChange={setFilterValue} />
       </div>
-      {natAlert && (
-        <AlertCard
-          status={natAlert.severity}
-          count={3}
-          subText={natAlert.subText}
-          text={natAlert.message}
-        />
+      {dimensions && (
+        <div
+          style={{ maxHeight: `${dimensions.height - 48}px` }}
+          className='h-full w-full flex flex-col'
+        >
+          {formattedAlerts.length > 0 && (
+            <div className={`overflow-scroll scrollbar-hide ${!isFiller ? 'flex-1' : ''}`}>
+              {formattedAlerts.map((alert) => {
+                const { severity, subText, message, id } = alert
+                const count =
+                  severity === StatusColor.SUCCESS ? 1 : severity === StatusColor.WARNING ? 2 : 3
+                return (
+                  <AlertCard
+                    key={id}
+                    status={severity}
+                    count={count}
+                    onClick={() => dismissAlert(alert)}
+                    subText={subText}
+                    text={message}
+                  />
+                )
+              })}
+            </div>
+          )}
+          {isFiller && (
+            <div className='flex-1 flex items-center justify-center'>
+              <i className='bi bi-lightning-fill text-primary text-h3 opacity-20' />
+            </div>
+          )}
+        </div>
       )}
-      {peerCountAlert && (
-        <AlertCard
-          status={peerCountAlert.severity}
-          count={2}
-          subText={peerCountAlert.subText}
-          text={peerCountAlert.message}
-        />
-      )}
-      <div className='flex-1 md:border-l-0 border-t-0 border-style500 flex items-center justify-center'>
-        <i className='bi bi-lightning-fill text-primary text-h3 opacity-20' />
-      </div>
     </div>
   )
 }
diff --git a/src/components/DropDown/DropDown.tsx b/src/components/DropDown/DropDown.tsx
index 41edbd3c..8e50080a 100644
--- a/src/components/DropDown/DropDown.tsx
+++ b/src/components/DropDown/DropDown.tsx
@@ -15,8 +15,6 @@ const DropDown: FC<DropDownProps> = ({
   className = '',
   position = 'top-full left-0 z-50',
 }) => {
-  const isChildrenArray = Array.isArray(children)
-
   return (
     <div
       id='dropdown'
@@ -25,9 +23,7 @@ const DropDown: FC<DropDownProps> = ({
       } ${className} ${position} animate-fadeSlideIn bg-white rounded divide-y divide-gray-100 shadow dark:bg-black`}
     >
       <ul
-        className={`text-sm max-h-32 overflow-scroll relative text-gray-700 dark:text-gray-200 ${
-          isChildrenArray && children.length >= 4 ? 'pb-6' : ''
-        }`}
+        className='text-sm max-h-32 overflow-scroll relative text-gray-700 dark:text-gray-200'
         aria-labelledby='dropdownDefault'
       >
         {children}
diff --git a/src/components/NetworkPeerSpeedometer/NetworkPeerSpeedometer.tsx b/src/components/NetworkPeerSpeedometer/NetworkPeerSpeedometer.tsx
index bfe94707..42a37c67 100644
--- a/src/components/NetworkPeerSpeedometer/NetworkPeerSpeedometer.tsx
+++ b/src/components/NetworkPeerSpeedometer/NetworkPeerSpeedometer.tsx
@@ -5,11 +5,38 @@ import { uiMode, validatorPeerCount } from '../../recoil/atoms'
 import Typography from '../Typography/Typography'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '../ToolTip/Tooltip'
+import { StatusColor } from '../../types'
+import useDiagnosticAlerts from '../../hooks/useDiagnosticAlerts'
+import { useEffect } from 'react'
+import { ALERT_ID } from '../../constants/constants'
 
 const NetworkPeerSpeedometer = () => {
   const { t } = useTranslation()
   const mode = useRecoilValue(uiMode)
   const peers = useRecoilValue(validatorPeerCount)
+  const { updateAlert } = useDiagnosticAlerts()
+
+  useEffect(() => {
+    if (!peers) return
+
+    if (peers <= 50) {
+      if (peers <= 20) {
+        updateAlert({
+          message: t('alert.peerCountLow', { type: t('alert.type.nodeValidator') }),
+          subText: t('poor'),
+          severity: StatusColor.ERROR,
+          id: ALERT_ID.PEER_COUNT,
+        })
+        return
+      }
+      updateAlert({
+        message: t('alert.peerCountMedium', { type: t('alert.type.nodeValidator') }),
+        subText: t('fair'),
+        severity: StatusColor.WARNING,
+        id: ALERT_ID.PEER_COUNT,
+      })
+    }
+  }, [peers])
 
   return (
     <Tooltip
diff --git a/src/components/TopBar/BeaconMetric.tsx b/src/components/TopBar/BeaconMetric.tsx
index abe22918..6fd96e34 100644
--- a/src/components/TopBar/BeaconMetric.tsx
+++ b/src/components/TopBar/BeaconMetric.tsx
@@ -2,11 +2,31 @@ import SyncMetric from '../SyncMetric/SyncMetric'
 import { useTranslation } from 'react-i18next'
 import { useRecoilValue } from 'recoil'
 import { selectBeaconSyncInfo } from '../../recoil/selectors/selectBeaconSyncInfo'
+import { useEffect } from 'react'
+import useDiagnosticAlerts from '../../hooks/useDiagnosticAlerts'
+import { StatusColor } from '../../types'
+import { ALERT_ID } from '../../constants/constants'
 
 const BeaconMetric = () => {
   const { t } = useTranslation()
-  const { headSlot, slotDistance, isSyncing, beaconPercentage } =
+  const { headSlot, slotDistance, isSyncing, beaconPercentage, beaconSyncTime } =
     useRecoilValue(selectBeaconSyncInfo)
+  const { storeAlert, removeAlert } = useDiagnosticAlerts()
+
+  useEffect(() => {
+    if (beaconSyncTime <= 0) {
+      removeAlert(ALERT_ID.BEACON_SYNC)
+    }
+
+    if (beaconSyncTime > 0) {
+      storeAlert({
+        id: ALERT_ID.BEACON_SYNC,
+        severity: StatusColor.WARNING,
+        subText: t('fair'),
+        message: t('alertMessages.beaconNotSync'),
+      })
+    }
+  }, [beaconSyncTime])
 
   return (
     <SyncMetric
diff --git a/src/components/TopBar/ValidatorMetric.tsx b/src/components/TopBar/ValidatorMetric.tsx
index eee34feb..3d302931 100644
--- a/src/components/TopBar/ValidatorMetric.tsx
+++ b/src/components/TopBar/ValidatorMetric.tsx
@@ -2,12 +2,30 @@ import SyncMetric from '../SyncMetric/SyncMetric'
 import { useRecoilValue } from 'recoil'
 import { useTranslation } from 'react-i18next'
 import { selectValidatorSyncInfo } from '../../recoil/selectors/selectValidatorSyncInfo'
+import { useEffect } from 'react'
+import { StatusColor } from '../../types'
+import useDiagnosticAlerts from '../../hooks/useDiagnosticAlerts'
+import { ALERT_ID } from '../../constants/constants'
 
 const ValidatorMetric = () => {
   const { t } = useTranslation()
   const syncInfo = useRecoilValue(selectValidatorSyncInfo)
+  const { storeAlert, removeAlert } = useDiagnosticAlerts()
   const { headSlot, cachedHeadSlot, syncPercentage, isReady } = syncInfo
 
+  useEffect(() => {
+    if (isReady) {
+      removeAlert(ALERT_ID.VALIDATOR_SYNC)
+    }
+
+    storeAlert({
+      id: ALERT_ID.VALIDATOR_SYNC,
+      severity: StatusColor.WARNING,
+      subText: t('fair'),
+      message: t('alertMessages.ethClientNotSync'),
+    })
+  }, [isReady])
+
   return (
     <SyncMetric
       id='ethMain'
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 77b8050e..c6f7b00d 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -190,3 +190,11 @@ export const LogTypeOptions = [
   { title: 'Validator', value: LogType.VALIDATOR },
   { title: 'Beacon', value: LogType.BEACON },
 ]
+
+export const ALERT_ID = {
+  VALIDATOR_SYNC: 'VALIDATOR_SYNC',
+  BEACON_SYNC: 'BEACON_SYNC',
+  NAT: 'NAT',
+  WARNING_LOG: 'WARNING_LOG',
+  PEER_COUNT: 'PEER_COUNT',
+}
diff --git a/src/hooks/__tests__/useDeviceDiagnostics.spec.ts b/src/hooks/__tests__/useDeviceDiagnostics.spec.ts
index 5adf52f9..fc33627f 100644
--- a/src/hooks/__tests__/useDeviceDiagnostics.spec.ts
+++ b/src/hooks/__tests__/useDeviceDiagnostics.spec.ts
@@ -6,9 +6,19 @@ import { mockedRecoilValue } from '../../../test.helpers'
 import { mockBeaconSyncResult } from '../../mocks/beaconSyncResults'
 import clearAllMocks = jest.clearAllMocks
 import { StatusColor } from '../../types'
-
 jest.mock('../../utilities/formatGigBytes', () => jest.fn())
 
+jest.mock('../useDiagnosticAlerts', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    alerts: [],
+    storeAlert: jest.fn(),
+    updateAlert: jest.fn(),
+    dismissAlert: jest.fn(),
+    removeAlert: jest.fn(),
+  })),
+}))
+
 const mockedFormatGigBytes = formatGigBytes as jest.MockedFn<typeof formatGigBytes>
 
 describe('useDeviceDiagnostics', () => {
diff --git a/src/hooks/__tests__/useDiagnosticAlerts.spec.ts b/src/hooks/__tests__/useDiagnosticAlerts.spec.ts
deleted file mode 100644
index 0a906d72..00000000
--- a/src/hooks/__tests__/useDiagnosticAlerts.spec.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks'
-import useDiagnosticAlerts from '../useDiagnosticAlerts'
-import { Diagnostics } from '../../types/diagnostic'
-import useDeviceDiagnostics from '../useDeviceDiagnostics'
-import { mockedRecoilValue } from '../../../test.helpers'
-import { StatusColor } from '../../types'
-
-jest.mock('../useDeviceDiagnostics', () => jest.fn())
-
-export const mockedUseDeviceDiagnostics = useDeviceDiagnostics as jest.MockedFn<
-  typeof useDeviceDiagnostics
->
-
-describe('useDiagnosticAlerts', () => {
-  beforeEach(() => {
-    mockedUseDeviceDiagnostics.mockReturnValue({ natOpen: false } as Diagnostics)
-  })
-
-  it('should not return peer count alert', () => {
-    mockedRecoilValue.mockReturnValue(69)
-    const { result } = renderHook(() => useDiagnosticAlerts())
-
-    expect(result.current.peerCountAlert).toBe(undefined)
-  })
-
-  it('should return undefined peer count alert', () => {
-    mockedRecoilValue.mockReturnValue(undefined)
-    const { result } = renderHook(() => useDiagnosticAlerts())
-
-    expect(result.current.peerCountAlert).toBe(undefined)
-  })
-  it('should return peer count low alert', () => {
-    mockedRecoilValue.mockReturnValue(0)
-    const { result } = renderHook(() => useDiagnosticAlerts())
-
-    expect(result.current.peerCountAlert).toStrictEqual({
-      message: 'alert.peerCountLow',
-      subText: 'poor',
-      severity: StatusColor.ERROR,
-    })
-  })
-  it('should return peer count medium alert', () => {
-    mockedRecoilValue.mockReturnValue(35)
-    const { result } = renderHook(() => useDiagnosticAlerts())
-
-    expect(result.current.peerCountAlert).toStrictEqual({
-      message: 'alert.peerCountMedium',
-      subText: 'fair',
-      severity: StatusColor.WARNING,
-    })
-  })
-  it('should return nat closed alert', () => {
-    mockedUseDeviceDiagnostics.mockReturnValue({ natOpen: false } as Diagnostics)
-    const { result } = renderHook(() => useDiagnosticAlerts())
-
-    expect(result.current.natAlert).toStrictEqual({
-      message: 'alert.natClosedStatus',
-      severity: StatusColor.ERROR,
-      subText: 'poor',
-    })
-  })
-  it('should not return nat closed alert', () => {
-    mockedUseDeviceDiagnostics.mockReturnValue({ natOpen: true } as Diagnostics)
-    const { result } = renderHook(() => useDiagnosticAlerts())
-
-    expect(result.current.natAlert).toBe(undefined)
-  })
-})
diff --git a/src/hooks/__tests__/useValidatorCount.spec.ts b/src/hooks/__tests__/useValidatorCount.spec.ts
index 35af5be5..dc954710 100644
--- a/src/hooks/__tests__/useValidatorCount.spec.ts
+++ b/src/hooks/__tests__/useValidatorCount.spec.ts
@@ -31,12 +31,12 @@ const mockFetchValidatorCount = fetchValidatorCount as jest.MockedFn<typeof fetc
 
 describe('useValidatorCount', () => {
   it('should return default count info', () => {
-    mockedRecoilValue.mockReturnValueOnce('mocked-url')
+    mockedRecoilValue.mockReturnValueOnce({})
     const { result } = renderHook(() => useValidatorCount())
     expect(result.current).toStrictEqual(DEFAULT_VALIDATOR_COUNT)
   })
   it('should call fetchCount when beacon node available', async () => {
-    mockedRecoilValue.mockReturnValueOnce('mocked-url')
+    mockedRecoilValue.mockReturnValueOnce({ beaconUrl: 'mocked-url' })
     mockedRecoilValue.mockReturnValue({
       protocol: Protocol.HTTP,
       address: 'mockAddress',
diff --git a/src/hooks/useAtomCleanup.ts b/src/hooks/useAtomCleanup.ts
index 57d92798..cc248fc1 100644
--- a/src/hooks/useAtomCleanup.ts
+++ b/src/hooks/useAtomCleanup.ts
@@ -1,6 +1,7 @@
 import { useSetRecoilState } from 'recoil'
 import {
   activeDevice,
+  alertLogs,
   beaconHealthResult,
   beaconNetworkError,
   beaconSyncInfo,
@@ -36,6 +37,7 @@ const useAtomCleanup = () => {
   const isBeaconNetworkError = useSetRecoilState(beaconNetworkError)
   const isValidatorNetworkError = useSetRecoilState(validatorNetworkError)
   const setSessionAuthErrorCount = useSetRecoilState(sessionAuthErrorCount)
+  const setAlert = useSetRecoilState(alertLogs)
 
   const resetDashboardAtoms = () => {
     setDashView(ContentView.MAIN)
@@ -54,6 +56,7 @@ const useAtomCleanup = () => {
     setValSyncInfo(undefined as any)
     setBeaconSyncInfo(undefined as any)
     setValStateInfo(undefined as any)
+    setAlert([])
   }
 
   return {
diff --git a/src/hooks/useDeviceDiagnostics.ts b/src/hooks/useDeviceDiagnostics.ts
index aa05d670..9217a258 100644
--- a/src/hooks/useDeviceDiagnostics.ts
+++ b/src/hooks/useDeviceDiagnostics.ts
@@ -1,5 +1,5 @@
 import { useRecoilValue } from 'recoil'
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import getPercentage from '../utilities/getPercentage'
 import formatGigBytes from '../utilities/formatGigBytes'
 import { StatusColor } from '../types'
@@ -8,10 +8,15 @@ import { DiagnosticRate } from '../constants/enums'
 import secondsToShortHand from '../utilities/secondsToShortHand'
 import { beaconHealthResult } from '../recoil/atoms'
 import { selectBeaconSyncInfo } from '../recoil/selectors/selectBeaconSyncInfo'
+import useDiagnosticAlerts from './useDiagnosticAlerts'
+import { useTranslation } from 'react-i18next'
+import { ALERT_ID } from '../constants/constants'
 
 const useDeviceDiagnostics = (): Diagnostics => {
+  const { t } = useTranslation()
   const result = useRecoilValue(beaconHealthResult)
   const { isSyncing } = useRecoilValue(selectBeaconSyncInfo)
+  const { storeAlert, removeAlert } = useDiagnosticAlerts()
 
   const {
     disk_bytes_free = 0,
@@ -25,6 +30,20 @@ const useDeviceDiagnostics = (): Diagnostics => {
     global_cpu_frequency,
   } = result || {}
 
+  useEffect(() => {
+    if (result?.nat_open) {
+      removeAlert(ALERT_ID.NAT)
+      return
+    }
+
+    storeAlert({
+      id: ALERT_ID.NAT,
+      message: t('alert.natClosedStatus', { type: t('alert.type.network') }),
+      subText: t('poor'),
+      severity: StatusColor.ERROR,
+    })
+  }, [result?.nat_open])
+
   const diskUtilization = useMemo(() => {
     if (!disk_bytes_total || !disk_bytes_free) {
       return 0
diff --git a/src/hooks/useDiagnosticAlerts.ts b/src/hooks/useDiagnosticAlerts.ts
index 698e8ec3..369fa955 100644
--- a/src/hooks/useDiagnosticAlerts.ts
+++ b/src/hooks/useDiagnosticAlerts.ts
@@ -1,49 +1,63 @@
-import useDeviceDiagnostics from './useDeviceDiagnostics'
-import { useRecoilValue } from 'recoil'
-import { validatorPeerCount } from '../recoil/atoms'
+import { useRecoilState } from 'recoil'
+import { alertLogs } from '../recoil/atoms'
+import { AlertMessage } from '../types'
 import { useMemo } from 'react'
-import { Alert, StatusColor } from '../types'
-import { useTranslation } from 'react-i18next'
 
 const useDiagnosticAlerts = () => {
-  const { t } = useTranslation()
-  const { natOpen } = useDeviceDiagnostics()
-  const peers = useRecoilValue(validatorPeerCount)
+  const [alerts, setAlerts] = useRecoilState(alertLogs)
 
-  const natAlert = useMemo<Alert | undefined>(() => {
-    if (natOpen) return
+  const storeAlert = (alert: AlertMessage) => {
+    if (alerts.filter(({ id }) => id === alert.id).length <= 0) {
+      setAlerts((prev) => {
+        const list = prev.filter(({ id }) => id !== alert.id)
 
-    return {
-      message: t('alert.natClosedStatus', { type: t('alert.type.network') }),
-      subText: t('poor'),
-      severity: StatusColor.ERROR,
+        return [...list, alert]
+      })
     }
-  }, [natOpen])
-
-  const peerCountAlert = useMemo<Alert | undefined>(() => {
-    if (!peers && peers !== 0) return undefined
-
-    switch (true) {
-      case peers < 20:
-        return {
-          message: t('alert.peerCountLow', { type: t('alert.type.nodeValidator') }),
-          subText: t('poor'),
-          severity: StatusColor.ERROR,
-        }
-      case peers > 20 && peers < 50:
-        return {
-          message: t('alert.peerCountMedium', { type: t('alert.type.nodeValidator') }),
-          subText: t('fair'),
-          severity: StatusColor.WARNING,
-        }
-      default:
-        return undefined
+  }
+
+  const updateAlert = (alert: AlertMessage) => {
+    if (alerts.filter(({ id, isDismissed }) => id === alert.id && isDismissed).length <= 0) {
+      removeAlert(alert.id)
+      storeAlert(alert)
+    }
+  }
+
+  const dismissAlert = (alert: AlertMessage) => {
+    const loggedAlert = alerts.find(({ id }) => id === alert.id)
+
+    if (loggedAlert) {
+      setAlerts((prev) => {
+        const list = prev.filter(({ id }) => id !== loggedAlert.id)
+
+        return [...list, { ...loggedAlert, isDismissed: true }]
+      })
     }
-  }, [peers])
+  }
+
+  const removeAlert = (id: string) => {
+    setAlerts((prev) => prev.filter((alert) => id !== alert.id))
+  }
+
+  const resetDismissed = () => {
+    alerts.forEach(({ isDismissed, id }) => {
+      if (isDismissed) {
+        removeAlert(id)
+      }
+    })
+  }
+
+  const formattedList = useMemo(() => {
+    return alerts.filter(({ isDismissed }) => isDismissed !== true)
+  }, [alerts])
 
   return {
-    natAlert,
-    peerCountAlert,
+    alerts: formattedList,
+    storeAlert,
+    updateAlert,
+    dismissAlert,
+    removeAlert,
+    resetDismissed,
   }
 }
 
diff --git a/src/hooks/useDivDimensions.ts b/src/hooks/useDivDimensions.ts
new file mode 100644
index 00000000..1f7bb64d
--- /dev/null
+++ b/src/hooks/useDivDimensions.ts
@@ -0,0 +1,34 @@
+import { useEffect, useState, useRef, RefObject } from 'react'
+
+type Dimensions = {
+  width: number
+  height: number
+}
+
+const useDivDimensions = (): { ref: RefObject<HTMLDivElement>; dimensions?: Dimensions } => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [dimensions, setDimensions] = useState<Dimensions | undefined>(undefined)
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (ref.current) {
+        const { width, height } = ref.current.getBoundingClientRect()
+        setDimensions({ width, height })
+      }
+    }
+
+    handleResize()
+
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return {
+    ref,
+    dimensions,
+  }
+}
+
+export default useDivDimensions
diff --git a/src/hooks/useTrackLogs.ts b/src/hooks/useTrackLogs.ts
index 6202ce83..5424d902 100644
--- a/src/hooks/useTrackLogs.ts
+++ b/src/hooks/useTrackLogs.ts
@@ -1,8 +1,10 @@
 import useSSE from './useSSE'
-import { LogLevels, SSELog } from '../types'
-import { MutableRefObject, useRef } from 'react'
+import { LogLevels, SSELog, StatusColor } from '../types'
+import { MutableRefObject, useEffect, useMemo, useRef } from 'react'
 import moment from 'moment'
-import { MAX_PERSISTED_LOGS } from '../constants/constants'
+import { ALERT_ID, MAX_PERSISTED_LOGS } from '../constants/constants'
+import useDiagnosticAlerts from './useDiagnosticAlerts'
+import { useTranslation } from 'react-i18next'
 
 export type trackedLogData = {
   data: SSELog[]
@@ -23,11 +25,13 @@ export const defaultLogData = {
 }
 
 const useTrackLogs = (url?: string, onError?: () => void): trackedLogData => {
+  const { t } = useTranslation()
   const dataRef = useRef<SSELog[]>([])
   const infoPerHour = useRef<number[]>([])
   const criticalPerHour = useRef<number[]>([])
   const warningsPerHour = useRef<number[]>([])
   const errorsPerHour = useRef<number[]>([])
+  const { storeAlert, removeAlert } = useDiagnosticAlerts()
 
   const incrementCounts = (log: SSELog) => {
     const { level } = log
@@ -100,6 +104,51 @@ const useTrackLogs = (url?: string, onError?: () => void): trackedLogData => {
 
   const totalLogsPerHour = criticalCount + warningCount + errorCount + infoCount
 
+  const parsedCrit = useMemo(() => {
+    return dataRef.current.filter((data) => data.level === LogLevels.CRIT)
+  }, [dataRef, totalLogsPerHour])
+
+  useEffect(() => {
+    parsedCrit.forEach((crit) => {
+      storeAlert({
+        severity: StatusColor.ERROR,
+        message: t('alertMessages.critLog', { message: crit.msg }),
+        subText: t('poor'),
+        id: crit.msg.replace(' ', ''),
+      })
+    })
+  }, [parsedCrit])
+
+  const parsedErrors = useMemo(() => {
+    return dataRef.current.filter((data) => data.level === LogLevels.ERRO)
+  }, [dataRef, totalLogsPerHour])
+
+  useEffect(() => {
+    parsedErrors.forEach((error) => {
+      storeAlert({
+        severity: StatusColor.ERROR,
+        message: t('alertMessages.errorLog', { message: error.msg }),
+        subText: t('poor'),
+        id: error.msg.replace(' ', ''),
+      })
+    })
+  }, [parsedErrors])
+
+  useEffect(() => {
+    if (warningCount > 5) {
+      storeAlert({
+        id: ALERT_ID.WARNING_LOG,
+        message: t('alertMessages.excessiveWarningLogs'),
+        severity: StatusColor.WARNING,
+        subText: t('fair'),
+      })
+
+      return
+    }
+
+    removeAlert(ALERT_ID.WARNING_LOG)
+  }, [warningCount])
+
   return {
     data: dataRef.current,
     totalLogsPerHour,
diff --git a/src/hooks/useValidatorCount.ts b/src/hooks/useValidatorCount.ts
index 6b26f200..2a99887b 100644
--- a/src/hooks/useValidatorCount.ts
+++ b/src/hooks/useValidatorCount.ts
@@ -20,7 +20,9 @@ const useValidatorCount = (): ValidatorCountResult => {
   }
 
   useEffect(() => {
-    void fetchCount()
+    if (beaconUrl) {
+      void fetchCount()
+    }
   }, [beaconUrl])
 
   return data
diff --git a/src/locales/translations/en-US.json b/src/locales/translations/en-US.json
index 8c031214..b32452bd 100644
--- a/src/locales/translations/en-US.json
+++ b/src/locales/translations/en-US.json
@@ -429,5 +429,16 @@
     "confirmCta": "Remove Device",
     "addDevice": "Add Device",
     "selectDevice": "Select stored device"
+  },
+  "alertMessages": {
+    "all": "All",
+    "severe": "Severe",
+    "warning": "Warning",
+    "fair": "Fair",
+    "beaconNotSync": "Beacon Node is not in sync",
+    "ethClientNotSync": "Ethereum Client is not in sync",
+    "excessiveWarningLogs": "Unusual amount of warning logs detected",
+    "critLog": "CRITICAL ERROR: {{message}}",
+    "errorLog": "ERROR: {{message}}"
   }
 }
\ No newline at end of file
diff --git a/src/recoil/atoms.ts b/src/recoil/atoms.ts
index 1c4e0278..a1f622fd 100644
--- a/src/recoil/atoms.ts
+++ b/src/recoil/atoms.ts
@@ -1,6 +1,6 @@
 import { atom } from 'recoil'
 import { AppView, ContentView, OnboardView, SetupSteps, UiMode } from '../constants/enums'
-import { ActiveDevice, DeviceList, ValAliases } from '../types'
+import { ActiveDevice, AlertMessage, DeviceList, ValAliases } from '../types'
 import { BeaconSyncResult, HealthDiagnosticResult, ValidatorSyncResult } from '../types/diagnostic'
 import { BeaconValidatorResult, ValidatorCache } from '../types/validator'
 import { BeaconValidatorMetricResults } from '../types/beacon'
@@ -144,3 +144,8 @@ export const activeDevice = atom<ActiveDevice>({
   key: 'activeDevice',
   default: undefined,
 })
+
+export const alertLogs = atom<AlertMessage[]>({
+  key: 'alertLogs',
+  default: [],
+})
diff --git a/src/types/index.ts b/src/types/index.ts
index d21391aa..f9f951a3 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -97,3 +97,11 @@ export interface ActiveDevice {
 export interface ValAliases {
   [key: string]: string
 }
+
+export interface AlertMessage {
+  severity: StatusColor
+  message: string
+  subText: string
+  id: string
+  isDismissed?: boolean
+}
diff --git a/src/utilities/sortAlerts.ts b/src/utilities/sortAlerts.ts
new file mode 100644
index 00000000..d7c3a9ff
--- /dev/null
+++ b/src/utilities/sortAlerts.ts
@@ -0,0 +1,18 @@
+import { AlertMessage, StatusColor } from '../types'
+
+const sortAlertMessagesBySeverity = (alertMessages: AlertMessage[]): AlertMessage[] => {
+  const severityOrder: StatusColor[] = [
+    StatusColor.ERROR,
+    StatusColor.WARNING,
+    StatusColor.SUCCESS,
+    StatusColor.DARK,
+  ]
+
+  return alertMessages.sort((a, b) => {
+    const aSeverityIndex = severityOrder.indexOf(a.severity)
+    const bSeverityIndex = severityOrder.indexOf(b.severity)
+    return aSeverityIndex - bSeverityIndex
+  })
+}
+
+export default sortAlertMessagesBySeverity