Merge pull request #1569 from oasisprotocol/mz/uptime

Prepare components to render validator uptime

.changelog/1569.trivial.md

@@ -0,0 +1 @@
+Prepare components to render validator uptime

src/app/components/PercentageValue/index.tsx

@@ -3,11 +3,15 @@ import { useTranslation } from 'react-i18next'
 
 type PercentageValueProps = {
   adaptMaximumFractionDigits?: boolean
-  total: number | undefined
+  total?: number
   value: number | undefined
 }
 
-export const PercentageValue: FC<PercentageValueProps> = ({ adaptMaximumFractionDigits, value, total }) => {
+export const PercentageValue: FC<PercentageValueProps> = ({
+  adaptMaximumFractionDigits,
+  value,
+  total = 100,
+}) => {
   const { t } = useTranslation()
 
   if (typeof value !== 'number' || typeof total !== 'number' || total <= 0) {

src/app/components/UptimeStatus/__tests__/index.test.tsx

@@ -0,0 +1,49 @@
+import { ensureTwelveElements } from '..'
+
+describe('ensureTwelveElements', () => {
+  test('fills an array with undefined values when arary has less than 12 elements', () => {
+    const input = [1, 2, 3]
+    const result = ensureTwelveElements(input)
+    expect(result.length).toBe(12)
+    expect(result).toStrictEqual([
+      1,
+      2,
+      3,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+    ])
+  })
+
+  test('returns an array with the same 12 elements', () => {
+    const input = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    const result = ensureTwelveElements(input)
+    expect(result.length).toBe(12)
+    expect(result).toStrictEqual(input)
+  })
+
+  test('truncates the array if it has more than 12 elements', () => {
+    const input = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
+    const result = ensureTwelveElements(input)
+    expect(result.length).toBe(12)
+    expect(result).toStrictEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
+  })
+
+  test('returns an array with 12 undefined values when array is empty', () => {
+    const result = ensureTwelveElements([])
+    expect(result.length).toBe(12)
+    expect(result).toStrictEqual(new Array(12).fill(undefined))
+  })
+
+  test('returns an array with 12 undefined values when array is not provided', () => {
+    const result = ensureTwelveElements()
+    expect(result.length).toBe(12)
+    expect(result).toStrictEqual(new Array(12).fill(undefined))
+  })
+})

src/app/components/UptimeStatus/index.tsx

@@ -0,0 +1,61 @@
+import { FC } from 'react'
+import Box from '@mui/material/Box'
+import { styled } from '@mui/material/styles'
+import { COLORS } from '../../../styles/theme/colors'
+import { PercentageValue } from '../PercentageValue'
+
+const getUptimeItemColor = (value: number | undefined) => {
+  if (!value) {
+    return COLORS.grayMediumLight
+  }
+
+  if (value > 90) {
+    return COLORS.eucalyptus
+  }
+
+  return COLORS.errorIndicatorBackground
+}
+
+type UptimeItem = {
+  small?: boolean
+  value?: number
+}
+
+const StyledBox = styled(Box)<UptimeItem>(({ small, value }) => ({
+  background: getUptimeItemColor(value),
+  width: small ? '3px' : '7px',
+  minWidth: small ? '3px' : '7px',
+  height: small ? '15px' : '45px',
+  borderRadius: small ? '2px' : '4px',
+  color: COLORS.white,
+  marginRight: small ? 1 : 2,
+}))
+
+export const ensureTwelveElements = (inputArray: number[] = []) => {
+  return [...inputArray, ...new Array(12).fill(undefined)].slice(0, 12)
+}
+
+type UptimeStatusProps = {
+  percentage?: number
+  small?: boolean
+  status?: number[]
+}
+
+export const UptimeStatus: FC<UptimeStatusProps> = ({ percentage, status, small }) => {
+  const adjustedStatus = ensureTwelveElements(status)
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: small ? 4 : 5 }}>
+      <Box sx={{ display: 'flex' }}>
+        {adjustedStatus?.map((value, index) => (
+          <StyledBox small={small} key={`${value}-${index}`} value={value} />
+        ))}
+      </Box>
+      {percentage && (
+        <Box>
+          <PercentageValue value={percentage} />
+        </Box>
+      )}
+    </Box>
+  )
+}

src/app/components/Validators/index.tsx

@@ -13,6 +13,7 @@ import { ValidatorLink } from './ValidatorLink'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { BalancesDiff } from '../BalancesDiff'
 import { PercentageValue } from '../PercentageValue'
+import { UptimeStatus } from '../UptimeStatus'
 
 type ValidatorsProps = {
   validators?: Validator[]
@@ -129,7 +130,7 @@ export const Validators: FC<ValidatorsProps> = ({ isLoading, limit, pagination,
       {
         // TODO: provide uptime when it is implemented in the API
         align: TableCellAlign.Right,
-        content: <>-</>,
+        content: <UptimeStatus small percentage={94} status={[100, 100, 100, 50]} />,
         key: 'uptime',
       },
     ],

src/app/pages/ValidatorDetailsPage/UptimeCard.tsx

@@ -1,13 +1,24 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import Typography from '@mui/material/Typography'
+import { COLORS } from '../../../styles/theme/colors'
 import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
+import { UptimeStatus } from '../../components/UptimeStatus'
 
 export const UptimeCard: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <SnapshotTextCard title={t('validator.uptime')}>
-      {/* TODO: provide uptime stats when API is ready */}-
+    <SnapshotTextCard
+      title={t('validator.uptime')}
+      label={
+        <Typography sx={{ fontSize: 12, color: COLORS.grayMedium }}>
+          {t('validator.signedBlocksPercentage')}
+        </Typography>
+      }
+    >
+      {/* TODO: provide data when API is ready  */}
+      <UptimeStatus percentage={94} status={[100, 100, 100, 50]} />
     </SnapshotTextCard>
   )
 }

src/locales/en/translation.json

@@ -671,6 +671,7 @@
     "signed": "Signed",
     "signedBlocks": "Signed Blocks",
     "signedBlocksDescription": "Last 100 blocks",
+    "signedBlocksPercentage": "Percentage of blocks signed in the past 24h",
     "proposedBlocks": "Proposed Blocks",
     "snapshot": "Validator Snapshot",
     "self": "Self",