add overall platform status

2023-10-09 13:05:52 +11:00 · 2023-10-09 13:05:52 +11:00 · 86664fb3eb
parent 053a4fb295
commit 86664fb3eb
9 changed files with 178 additions and 122 deletions
--- a/components/RpcPing.tsx
+++ b/components/RpcPing.tsx
@ -1,45 +1,8 @@
-import { Connection } from '@solana/web3.js'
-import mangoStore from '@store/mangoStore'
-import { useEffect, useState } from 'react'
-import useInterval from './shared/useInterval'
 import { formatNumericValue } from 'utils/numbers'
-import Tooltip from './shared/Tooltip'
-import { useTranslation } from 'react-i18next'
 import { StatusDot } from './Tps'
+import { rpcAlertThreshold, rpcWarningThreshold } from './StatusBar'

-const rpcAlertThreshold = 250
-const rpcWarningThreshold = 500
-
-const getPingTime = async (
-  connection: Connection,
-  setRpcPing: (x: number) => void,
-) => {
-  const startTime = Date.now()
-  try {
-    await connection.getSlot()
-
-    const endTime = Date.now()
-    const pingTime = endTime - startTime
-    setRpcPing(pingTime)
-  } catch (error) {
-    console.error('Error pinging the RPC:', error)
-    return null
-  }
-}
-
-const RpcPing = () => {
-  const { t } = useTranslation('common')
-  const connection = mangoStore((s) => s.connection)
-  const [rpcPing, setRpcPing] = useState(0)
-
-  useEffect(() => {
-    getPingTime(connection, setRpcPing)
-  }, [])
-
-  useInterval(() => {
-    getPingTime(connection, setRpcPing)
-  }, 30 * 1000)
-
+const RpcPing = ({ rpcPing }: { rpcPing: number }) => {
  return (
    <div>
      <div className="flex items-center">
@ -48,12 +11,10 @@ const RpcPing = () => {
          alert={rpcAlertThreshold}
          warning={rpcWarningThreshold}
        />
-        <Tooltip content={t('rpc-ping')}>
        <span className="font-mono text-xs text-th-fgd-2">
          <span className="mr-1">{formatNumericValue(rpcPing, 0)}</span>
          <span className="font-normal text-th-fgd-4">MS</span>
        </span>
-        </Tooltip>
      </div>
    </div>
  )
--- a/components/StatusBar.tsx
+++ b/components/StatusBar.tsx
@ -3,14 +3,22 @@ import Tps, { StatusDot } from './Tps'
 import DiscordIcon from './icons/DiscordIcon'
 import { TwitterIcon } from './icons/TwitterIcon'
 import { DocumentTextIcon } from '@heroicons/react/20/solid'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { IDL } from '@blockworks-foundation/mango-v4'
 import RpcPing from './RpcPing'
 import Tooltip from './shared/Tooltip'
 import { useRouter } from 'next/router'
 import useOffchainServicesHealth from 'hooks/useOffchainServicesHealth'
+import mangoStore from '@store/mangoStore'
+import { Connection } from '@solana/web3.js'
+import { sumBy } from 'lodash'
+import useInterval from './shared/useInterval'

 const DEFAULT_LATEST_COMMIT = { sha: '', url: '' }
+export const tpsAlertThreshold = 1300
+export const tpsWarningThreshold = 1000
+export const rpcAlertThreshold = 250
+export const rpcWarningThreshold = 500

 const getLatestCommit = async () => {
  try {
@ -33,14 +41,81 @@ const getLatestCommit = async () => {
  }
 }

+const getRecentPerformance = async (
+  connection: Connection,
+  setTps: (x: number) => void,
+) => {
+  try {
+    const samples = 2
+    const response = await connection.getRecentPerformanceSamples(samples)
+    const totalSecs = sumBy(response, 'samplePeriodSecs')
+    const totalTransactions = sumBy(response, 'numTransactions')
+    const tps = totalTransactions / totalSecs
+
+    setTps(tps)
+  } catch {
+    console.warn('Unable to fetch TPS')
+  }
+}
+
+const getPingTime = async (
+  connection: Connection,
+  setRpcPing: (x: number) => void,
+) => {
+  const startTime = Date.now()
+  try {
+    await connection.getSlot()
+
+    const endTime = Date.now()
+    const pingTime = endTime - startTime
+    setRpcPing(pingTime)
+  } catch (error) {
+    console.error('Error pinging the RPC:', error)
+    return null
+  }
+}
+
+const getOverallStatus = (
+  tps: number,
+  rpcPing: number,
+  offchainHealth: number,
+) => {
+  if (tps < tpsWarningThreshold) {
+    return 'severly-degraded'
+  } else if (
+    tps < tpsAlertThreshold ||
+    rpcPing > rpcWarningThreshold ||
+    offchainHealth !== 200
+  ) {
+    return 'degraded'
+  } else return 'operational'
+}
+
 const StatusBar = ({ collapsed }: { collapsed: boolean }) => {
  const { t } = useTranslation('common')
  const [latestCommit, setLatestCommit] = useState(DEFAULT_LATEST_COMMIT)
  const router = useRouter()
  const { offchainHealth, isLoading: loadingOffchainHealth } =
    useOffchainServicesHealth()
+  const connection = mangoStore((s) => s.connection)
+  const [tps, setTps] = useState(0)
+  const [rpcPing, setRpcPing] = useState(0)

-  console.log(offchainHealth)
+  useEffect(() => {
+    getPingTime(connection, setRpcPing)
+  }, [])
+
+  useInterval(() => {
+    getPingTime(connection, setRpcPing)
+  }, 30 * 1000)
+
+  useEffect(() => {
+    getRecentPerformance(connection, setTps)
+  }, [])
+
+  useInterval(() => {
+    getRecentPerformance(connection, setTps)
+  }, 60 * 1000)

  useEffect(() => {
    const { sha } = latestCommit
@ -49,26 +124,66 @@ const StatusBar = ({ collapsed }: { collapsed: boolean }) => {
    }
  }, [latestCommit])

+  const platformHealth = useMemo(() => {
+    return getOverallStatus(tps, rpcPing, offchainHealth)
+  }, [tps, rpcPing, offchainHealth])
+
+  const dotColor =
+    platformHealth === 'severly-degraded'
+      ? 'bg-th-error'
+      : platformHealth === 'degraded'
+      ? 'bg-th-warning'
+      : 'bg-th-success'
+
  return (
    <div
      className={`fixed hidden ${
        collapsed ? 'w-[calc(100vw-64px)]' : 'w-[calc(100vw-200px)]'
      } bottom-0 z-10 bg-th-input-bkg px-4 py-1 md:grid md:grid-cols-3 md:px-6`}
    >
-      <div className="col-span-1 flex items-center space-x-2">
-        <Tps />
-        <span className="text-th-fgd-4">|</span>
-        <RpcPing />
-        {!loadingOffchainHealth ? (
-          <>
-            <span className="text-th-fgd-4">|</span>
-            <div className="flex items-center">
-              <StatusDot status={offchainHealth} alert={201} warning={301} />
-              <span className="text-xs text-th-fgd-2">Offchain Services</span>
+      <div className="col-span-1 flex items-center">
+        <Tooltip
+          content={
+            <div className="space-y-2">
+              <div>
+                <p className="mb-0.5">{t('solana-tps')}</p>
+                <Tps tps={tps} />
+              </div>
+              <div>
+                <p className="mb-0.5">{t('rpc-ping')}</p>
+                <RpcPing rpcPing={rpcPing} />
+              </div>
+              {!loadingOffchainHealth ? (
+                <div className="flex items-center">
+                  <StatusDot
+                    status={offchainHealth}
+                    alert={201}
+                    warning={301}
+                  />
+                  <span className="text-xs text-th-fgd-2">
+                    {t('offchain-services')}
+                  </span>
                </div>
-          </>
              ) : null}
            </div>
+          }
+          placement="top-start"
+        >
+          <div className="flex items-center">
+            <div className="relative mr-1 h-3 w-3">
+              <div
+                className={`absolute left-0.5 top-0.5 h-2 w-2 rounded-full ${dotColor}`}
+              />
+              <div
+                className={`absolute h-3 w-3 rounded-full opacity-40 ${dotColor}`}
+              />
+            </div>
+            <p className="tooltip-underline text-xs leading-none">
+              {t(platformHealth)}
+            </p>
+          </div>
+        </Tooltip>
+      </div>
      <div className="col-span-1 flex items-center justify-center">
        <Tooltip content={t('program-version')}>
          <a
--- a/components/Tps.tsx
+++ b/components/Tps.tsx
@ -1,45 +1,8 @@
-import { useEffect, useState } from 'react'
-import sumBy from 'lodash/sumBy'
-import { Connection } from '@solana/web3.js'
-import mangoStore, { CLUSTER } from '@store/mangoStore'
-import useInterval from './shared/useInterval'
+import { CLUSTER } from '@store/mangoStore'
 import { formatNumericValue } from 'utils/numbers'
-import Tooltip from './shared/Tooltip'
-import { useTranslation } from 'react-i18next'
-
-const tpsAlertThreshold = 1000
-const tpsWarningThreshold = 1300
-
-const getRecentPerformance = async (
-  connection: Connection,
-  setTps: (x: number) => void,
-) => {
-  try {
-    const samples = 2
-    const response = await connection.getRecentPerformanceSamples(samples)
-    const totalSecs = sumBy(response, 'samplePeriodSecs')
-    const totalTransactions = sumBy(response, 'numTransactions')
-    const tps = totalTransactions / totalSecs
-
-    setTps(tps)
-  } catch {
-    console.warn('Unable to fetch TPS')
-  }
-}
-
-const Tps = () => {
-  const { t } = useTranslation('common')
-  const connection = mangoStore((s) => s.connection)
-  const [tps, setTps] = useState(0)
-
-  useEffect(() => {
-    getRecentPerformance(connection, setTps)
-  }, [])
-
-  useInterval(() => {
-    getRecentPerformance(connection, setTps)
-  }, 60 * 1000)
+import { tpsAlertThreshold, tpsWarningThreshold } from './StatusBar'

+const Tps = ({ tps }: { tps: number }) => {
  if (CLUSTER == 'mainnet-beta') {
    return (
      <div>
@ -50,12 +13,9 @@ const Tps = () => {
            warning={tpsWarningThreshold}
            isLessThan
          />
-          <Tooltip content={t('solana-tps-desc')}>
          <span className="font-mono text-xs text-th-fgd-2">
-              <span className="mr-1">{formatNumericValue(tps, 0)}</span>
-              <span className="font-normal text-th-fgd-4">TPS</span>
+            {formatNumericValue(tps, 0)}
          </span>
-          </Tooltip>
        </div>
      </div>
    )
--- a/hooks/useOffchainServicesHealth.ts
+++ b/hooks/useOffchainServicesHealth.ts
@ -1,3 +1,4 @@
+import useInterval from '@components/shared/useInterval'
 import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'

@ -22,15 +23,19 @@ const fetchOffchainHealth = async () => {
 }

 export default function useOffchainServicesHealth() {
-  const { data: offchainHealthData, isLoading } = useQuery(
-    ['offchain-health'],
-    () => fetchOffchainHealth(),
-    {
+  const {
+    data: offchainHealthData,
+    isLoading,
+    refetch,
+  } = useQuery(['offchain-health'], () => fetchOffchainHealth(), {
    cacheTime: 1000 * 60 * 10,
    staleTime: 1000 * 60,
    retry: 3,
-    },
-  )
+  })
+
+  useInterval(() => {
+    refetch()
+  }, 60 * 1000)

  const offchainHealth = useMemo(() => {
    if (!offchainHealthData) return 500
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -58,6 +58,7 @@
  "date": "Date",
  "date-from": "Date From",
  "date-to": "Date To",
+  "degraded": "Degraded",
  "delegate": "Delegate",
  "delegate-account": "Delegate Account",
  "delegate-account-info": "Account delegated to: {{delegate}}",
@ -121,6 +122,8 @@
  "new-account-success": "Your new account is ready 😎",
  "new-version": "New version available",
  "no": "No",
+  "offchain-services": "Offchain Services",
+  "operational": "Operational",
  "optional": "Optional",
  "outstanding-balance": "Outstanding Balance",
  "overview": "Overview",
@ -142,7 +145,7 @@
  "risks": "Risks",
  "rolling-change": "24h Change",
  "route": "Route",
-  "rpc-ping": "Ping time with the RPC node",
+  "rpc-ping": "RPC Ping",
  "save": "Save",
  "select": "Select",
  "select-borrow-token": "Select Borrow Token",
@ -152,9 +155,9 @@
  "select-withdraw-token": "Select Withdraw Token",
  "sell": "Sell",
  "settings": "Settings",
+  "severly-degraded": "Severly Degraded",
  "show-more": "Show More",
  "solana-tps": "Solana TPS",
-  "solana-tps-desc": "Solana Network – transactions per second",
  "soon": "Soon",
  "spot": "Spot",
  "spot-markets": "Spot Markets",
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@ -58,6 +58,7 @@
  "date": "Date",
  "date-from": "Date From",
  "date-to": "Date To",
+  "degraded": "Degraded",
  "delegate": "Delegate",
  "delegate-account": "Delegate Account",
  "delegate-account-info": "Account delegated to: {{delegate}}",
@ -121,6 +122,8 @@
  "new-account-success": "Your new account is ready 😎",
  "new-version": "New version available",
  "no": "No",
+  "offchain-services": "Offchain Services",
+  "operational": "Operational",
  "optional": "Optional",
  "outstanding-balance": "Outstanding Balance",
  "overview": "Overview",
@ -142,7 +145,7 @@
  "risks": "Risks",
  "rolling-change": "24h Change",
  "route": "Route",
-  "rpc-ping": "Ping time with the RPC node",
+  "rpc-ping": "RPC Ping",
  "save": "Save",
  "select": "Select",
  "select-borrow-token": "Select Borrow Token",
@ -152,9 +155,9 @@
  "select-withdraw-token": "Select Withdraw Token",
  "sell": "Sell",
  "settings": "Settings",
+  "severly-degraded": "Severly Degraded",
  "show-more": "Show More",
  "solana-tps": "Solana TPS",
-  "solana-tps-desc": "Solana Network – transactions per second",
  "soon": "Soon",
  "spot": "Spot",
  "spot-markets": "Spot Markets",
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@ -58,6 +58,7 @@
  "date": "Date",
  "date-from": "Date From",
  "date-to": "Date To",
+  "degraded": "Degraded",
  "delegate": "Delegate",
  "delegate-account": "Delegate Account",
  "delegate-account-info": "Account delegated to: {{delegate}}",
@ -121,6 +122,8 @@
  "new-account-success": "Your new account is ready 😎",
  "new-version": "New version available",
  "no": "No",
+  "offchain-services": "Offchain Services",
+  "operational": "Operational",
  "optional": "Optional",
  "outstanding-balance": "Outstanding Balance",
  "overview": "Overview",
@ -142,7 +145,7 @@
  "risks": "Risks",
  "rolling-change": "24h Change",
  "route": "Route",
-  "rpc-ping": "Ping time with the RPC node",
+  "rpc-ping": "RPC Ping",
  "save": "Save",
  "select": "Select",
  "select-borrow-token": "Select Borrow Token",
@ -152,9 +155,9 @@
  "select-withdraw-token": "Select Withdraw Token",
  "sell": "Sell",
  "settings": "Settings",
+  "severly-degraded": "Severly Degraded",
  "show-more": "Show More",
  "solana-tps": "Solana TPS",
-  "solana-tps-desc": "Solana Network – transactions per second",
  "soon": "Soon",
  "spot": "Spot",
  "spot-markets": "Spot Markets",
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@ -58,6 +58,7 @@
  "date": "日期",
  "date-from": "从",
  "date-to": "至",
+  "degraded": "Degraded",
  "delegate": "委托",
  "delegate-account": "委托帐户",
  "delegate-account-info": "帐户委托给: {{delegate}}",
@ -120,7 +121,9 @@
  "new-account-success": "您的新帐户准备好了😎",
  "new-version": "新版本出来了",
  "no": "不",
+  "offchain-services": "Offchain Services",
  "optional": "可选",
+  "operational": "Operational",
  "outstanding-balance": "未结余额",
  "overview": "摘要",
  "perp": "合约",
@ -151,9 +154,9 @@
  "select-withdraw-token": "选提出币种",
  "sell": "卖",
  "settings": "设置",
+  "severly-degraded": "Severly Degraded",
  "show-more": "显示更多",
  "solana-tps": "Solana TPS",
-  "solana-tps-desc": "Solana网络–每秒的交易量",
  "soon": "等一下",
  "spot": "现货",
  "spot-markets": "现货市场",
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@ -58,6 +58,7 @@
  "date": "日期",
  "date-from": "從",
  "date-to": "至",
+  "degraded": "Degraded",
  "delegate": "委託",
  "delegate-account": "委託帳戶",
  "delegate-account-info": "帳戶委託給: {{delegate}}",
@ -120,6 +121,8 @@
  "new-account-success": "您的新帳戶準備好了😎",
  "new-version": "新版本出來了",
  "no": "不",
+  "offchain-services": "Offchain Services",
+  "operational": "Operational",
  "optional": "可選",
  "outstanding-balance": "未結餘額",
  "overview": "摘要",
@ -151,9 +154,9 @@
  "select-withdraw-token": "選提出幣種",
  "sell": "賣",
  "settings": "設置",
+  "severly-degraded": "Severly Degraded",
  "show-more": "顯示更多",
  "solana-tps": "Solana TPS",
-  "solana-tps-desc": "Solana網絡–每秒的交易量",
  "soon": "等一下",
  "spot": "現貨",
  "spot-markets": "現貨市場",