From f101c4c98ff323d56b2dfcebc56b95ddbf630a4a Mon Sep 17 00:00:00 2001 From: Ricki Moore Date: Fri, 14 Feb 2025 00:02:05 +0100 Subject: [PATCH] Fix: release docker build (#308) --- app/Main.tsx | 1 - app/Providers.tsx | 4 +- app/Wrapper.tsx | 10 +- app/api/beacon.ts | 3 + app/api/fork-version/route.ts | 14 + app/api/log-metrics/route.ts | 6 +- app/api/logs.ts | 11 +- app/dashboard/logs/Main.tsx | 25 +- app/dashboard/logs/page.tsx | 7 +- app/dashboard/validators/Main.tsx | 24 +- app/dashboard/validators/Wrapper.tsx | 10 +- app/dashboard/validators/page.tsx | 3 + backend/src/beacon/beacon.controller.ts | 5 + backend/src/beacon/beacon.service.ts | 20 + backend/src/logs/logs.controller.ts | 4 +- backend/src/logs/logs.service.ts | 6 +- backend/src/tasks/tasks.service.ts | 4 - package.json | 17 +- .../AlertInfo/PriorityLogAlerts.tsx | 4 +- src/components/CheckBox/CheckBox.tsx | 6 +- .../ConsolidateValidator/Consolidate.tsx | 15 +- .../HorizontalStepper/HorizontalStepper.tsx | 7 +- .../InvestRewards/InvestRewards.tsx | 12 +- src/components/LogDisplay/LogDisplay.tsx | 8 +- .../RangeSliderInput/RangeSliderInput.tsx | 8 +- .../ResolvedTransactionStatus.tsx | 6 +- src/components/RodalModal/RodalModal.tsx | 2 +- .../ValidatorCandidateRow.tsx | 4 +- .../ConsolidateView/ConsolidateView.tsx | 30 +- .../SelectSourceStep/SelectSourceRow.tsx | 6 +- .../SelectSourceStep/SelectSourceStep.tsx | 45 +- .../Steps/SelectSourceStep/SelectedChip.tsx | 6 +- .../SelectSourceStep/SelectionDisplay.tsx | 22 +- .../SelectTargetStep/SelectTargetRow.tsx | 18 +- .../SelectTargetStep/SelectTargetStep.tsx | 17 +- .../ConsolidationQueueStatus.tsx | 6 +- .../ConsolidationRequest.tsx | 14 +- .../SubmitConsolidationStep.tsx | 88 +- .../CreateValidatorView.tsx | 5 +- .../KeystoreAuthentication.tsx | 7 +- .../SignDepositValidators/AcceptRisks.tsx | 10 +- .../SignDepositValidators/MultiDeposits.tsx | 10 +- .../DepositSteps/DepositStep.tsx | 2 +- .../SingleDeposit/SingleDeposit.tsx | 6 +- .../Steps/ValidatorSetup/ValSetupTable.tsx | 8 +- .../ValidatorManagement/MainView.tsx | 4 +- src/constants/constants.ts | 2 + src/hooks/useDivDimensions.ts | 2 +- src/hooks/useElectraStatus.ts | 37 +- src/hooks/useSSEData.ts | 16 +- src/recoil/atoms.ts | 7 +- src/types/beacon.ts | 10 + src/types/index.ts | 4 +- yarn.lock | 2744 ++++++++--------- 54 files changed, 1653 insertions(+), 1719 deletions(-) create mode 100644 app/api/fork-version/route.ts diff --git a/app/Main.tsx b/app/Main.tsx index 466a0b85..d57c140d 100644 --- a/app/Main.tsx +++ b/app/Main.tsx @@ -102,7 +102,6 @@ const Main = () => { )} = ({ children }) => { return ( - + {children} diff --git a/app/Wrapper.tsx b/app/Wrapper.tsx index fd6226fb..93471c32 100644 --- a/app/Wrapper.tsx +++ b/app/Wrapper.tsx @@ -1,15 +1,17 @@ 'use client' -import React from 'react' +import React, { Suspense } from 'react' import Main from './Main' import Providers from './Providers' import '../src/i18n' const Wrapper = () => { return ( - -
- + + +
+ + ) } diff --git a/app/api/beacon.ts b/app/api/beacon.ts index dd4295ef..da76f960 100644 --- a/app/api/beacon.ts +++ b/app/api/beacon.ts @@ -29,3 +29,6 @@ export const submitSignedExit = async (data: any, token: string) => export const fetchValidatorStatus = async (token: string, pubKey: string) => await fetchFromApi(`${backendUrl}/beacon/validator-status/${pubKey}`, token) + +export const fetchForkVersion = async (token: string) => + await fetchFromApi(`${backendUrl}/beacon/fork-version`, token) diff --git a/app/api/fork-version/route.ts b/app/api/fork-version/route.ts new file mode 100644 index 00000000..8cd8c235 --- /dev/null +++ b/app/api/fork-version/route.ts @@ -0,0 +1,14 @@ +import { NextResponse } from 'next/server' +import getReqAuthToken from '../../../utilities/getReqAuthToken' +import { fetchForkVersion } from '../beacon' + +export async function GET(req: Request) { + try { + const token = getReqAuthToken(req) + const data = await fetchForkVersion(token) + return NextResponse.json(data) + } catch (e) { + console.error(e) + return NextResponse.json({ error: 'Failed to fetch fork version data' }, { status: 500 }) + } +} diff --git a/app/api/log-metrics/route.ts b/app/api/log-metrics/route.ts index ed9dab54..3d83f3b9 100644 --- a/app/api/log-metrics/route.ts +++ b/app/api/log-metrics/route.ts @@ -1,11 +1,15 @@ import { NextResponse } from 'next/server' +import { LogType } from '../../../src/types' import getReqAuthToken from '../../../utilities/getReqAuthToken' import { fetchMetrics } from '../logs' export async function GET(req: Request) { try { + const { searchParams } = new URL(req.url) + const type = searchParams.get('type') || undefined + const token = getReqAuthToken(req) - const data = await fetchMetrics(token) + const data = await fetchMetrics(token, type as LogType) return NextResponse.json(data) } catch (error) { return NextResponse.json({ error: 'Failed to fetch logs metrics' }, { status: 500 }) diff --git a/app/api/logs.ts b/app/api/logs.ts index 9c1c2701..6b35507e 100644 --- a/app/api/logs.ts +++ b/app/api/logs.ts @@ -1,3 +1,4 @@ +import { LogType } from '../../src/types' import fetchFromApi from '../../utilities/fetchFromApi' const backendUrl = process.env.BACKEND_URL @@ -5,8 +6,14 @@ export const fetchLogMetrics = async (token: string) => fetchFromApi(`${backendUrl}/logs/metrics`, token) export const dismissLogAlert = async (token: string, index: string) => fetchFromApi(`${backendUrl}/logs/dismiss/${index}`, token) -export const fetchMetrics = async (token: string) => - fetchFromApi(`${backendUrl}/logs/log-metrics`, token) +export const fetchMetrics = async (token: string, type?: LogType) => { + const params = new URLSearchParams() + + if (type) { + params.append('type', type) + } + return await fetchFromApi(`${backendUrl}/logs/log-metrics?${params.toString()}`, token) +} export interface fetchPriorityProps { token: string diff --git a/app/dashboard/logs/Main.tsx b/app/dashboard/logs/Main.tsx index 05ab4b26..f0aed524 100644 --- a/app/dashboard/logs/Main.tsx +++ b/app/dashboard/logs/Main.tsx @@ -1,11 +1,11 @@ -import { FC, useEffect, useMemo, useState } from 'react' +import { FC, useEffect, useState } from 'react' import DashboardWrapper from '../../../src/components/DashboardWrapper/DashboardWrapper' import LogControls from '../../../src/components/LogControls/LogControls' import LogDisplay from '../../../src/components/LogDisplay/LogDisplay' import { OptionType } from '../../../src/components/SelectDropDown/SelectDropDown' import useNetworkMonitor from '../../../src/hooks/useNetworkMonitor' import useSWRPolling from '../../../src/hooks/useSWRPolling' -import { ActivityResponse, LogMetric, LogType } from '../../../src/types' +import { ActivityResponse, LogMetric, LogType, Metric } from '../../../src/types' import { BeaconNodeSpecResults, SyncData } from '../../../src/types/beacon' import { Diagnostics } from '../../../src/types/diagnostic' @@ -14,22 +14,25 @@ export interface MainProps { beaconSpec: BeaconNodeSpecResults initSyncData: SyncData initLogMetrics: LogMetric + initMetrics: Metric initActivityData: ActivityResponse + defaultLogType: LogType } const Main: FC = ({ initSyncData, beaconSpec, initNodeHealth, - initLogMetrics, initActivityData, + initMetrics, + defaultLogType, }) => { const { SECONDS_PER_SLOT } = beaconSpec const { isValidatorError, isBeaconError } = useNetworkMonitor() const networkError = isValidatorError || isBeaconError const slotInterval = SECONDS_PER_SLOT * 1000 - const [logType, selectType] = useState(LogType.VALIDATOR) + const [logType, selectType] = useState(defaultLogType) const [isLoading, setLoading] = useState(true) useEffect(() => { @@ -49,20 +52,12 @@ const Main: FC = ({ networkError, }) - const { data: logMetrics } = useSWRPolling('/api/priority-logs', { + const { data: logMetrics } = useSWRPolling(`/api/log-metrics?type=${logType}`, { refreshInterval: slotInterval / 2, - fallbackData: initLogMetrics, + fallbackData: initMetrics, networkError, }) - const filteredLogs = useMemo(() => { - return { - warningLogs: logMetrics.warningLogs.filter(({ type }) => type === logType), - errorLogs: logMetrics.errorLogs.filter(({ type }) => type === logType), - criticalLogs: logMetrics.criticalLogs.filter(({ type }) => type === logType), - } - }, [logMetrics, logType]) - const toggleLogType = (selection: OptionType) => { if (selection === logType) return @@ -87,7 +82,7 @@ const Main: FC = ({ >
- +
) diff --git a/app/dashboard/logs/page.tsx b/app/dashboard/logs/page.tsx index 878f611f..8235bff6 100644 --- a/app/dashboard/logs/page.tsx +++ b/app/dashboard/logs/page.tsx @@ -1,23 +1,28 @@ import '../../../src/global.css' import { redirect } from 'next/navigation' +import { LogType } from '../../../src/types' import getSessionCookie from '../../../utilities/getSessionCookie' import { fetchActivities } from '../../api/activities' import { fetchBeaconSpec, fetchNodeHealth, fetchSyncData } from '../../api/beacon' -import { fetchLogMetrics } from '../../api/logs' +import { fetchLogMetrics, fetchMetrics } from '../../api/logs' import Wrapper from './Wrapper' export default async function Page() { try { const token = getSessionCookie() + const defaultLogType = LogType.VALIDATOR const logMetrics = await fetchLogMetrics(token) const beaconSpec = await fetchBeaconSpec(token) const syncData = await fetchSyncData(token) const nodeHealth = await fetchNodeHealth(token) const activities = await fetchActivities({ token }) + const metrics = await fetchMetrics(token, defaultLogType) return ( = (props) => { @@ -51,6 +58,7 @@ const Main: FC = (props) => { initValCaches, initValMetrics, initActivityData, + initForkVersionData, } = props const [scrollPercentage, setPercentage] = useState(0) @@ -74,6 +82,7 @@ const Main: FC = (props) => { const [activeValId, setValidatorId] = useRecoilState(activeValidatorId) const [isEditVal, setIsEditValidator] = useRecoilState(isEditValidator) const setValDetail = useSetRecoilState(isValidatorDetail) + const setForkVersion = useSetRecoilState(forkVersion) const [isValDetail] = useRecoilState(isValidatorDetail) const [isRendered, setRender] = useState(false) @@ -123,6 +132,16 @@ const Main: FC = (props) => { { refreshInterval: epochInterval / 2, fallbackData: initValMetrics, networkError }, ) + const { data: forkVersionData } = useSWRPolling('/api/fork-version', { + refreshInterval: epochInterval / 2, + fallbackData: initForkVersionData, + networkError, + }) + + useEffect(() => { + setForkVersion(forkVersionData) + }, [forkVersionData]) + const filteredValidators = useMemo(() => { return validatorStates.filter((validator) => { const query = search.toLowerCase() @@ -213,7 +232,6 @@ const Main: FC = (props) => { = (props) => { isBeaconError={isBeaconError} isValidatorError={isValidatorError} nodeHealth={nodeHealth} - className='w-full flex flex-1 flex-col p-4 max-w-[96vw]' + className='w-full flex flex-1 flex-col p-4 max-w-[100vw] md:max-w-[93vw] lg:max-w-[95vw]' > <>
diff --git a/app/dashboard/validators/Wrapper.tsx b/app/dashboard/validators/Wrapper.tsx index 8384e94b..9b5d5c86 100644 --- a/app/dashboard/validators/Wrapper.tsx +++ b/app/dashboard/validators/Wrapper.tsx @@ -1,15 +1,17 @@ 'use client' -import React, { FC } from 'react' +import React, { FC, Suspense } from 'react' import Providers from '../../Providers' import Main, { MainProps } from './Main' import '../../../src/i18n' const Wrapper: FC = (props) => { return ( - -
- + + +
+ + ) } diff --git a/app/dashboard/validators/page.tsx b/app/dashboard/validators/page.tsx index 645ee378..0a7018e8 100644 --- a/app/dashboard/validators/page.tsx +++ b/app/dashboard/validators/page.tsx @@ -4,6 +4,7 @@ import getSessionCookie from '../../../utilities/getSessionCookie' import { fetchActivities } from '../../api/activities' import { fetchBeaconSpec, + fetchForkVersion, fetchNodeHealth, fetchSyncData, fetchValidatorCountData, @@ -23,9 +24,11 @@ export default async function Page() { const caches = await fetchValCaches(token) const metrics = await fetchValMetrics(token) const activities = await fetchActivities({ token }) + const forkVersion = await fetchForkVersion(token) return ( { + const { data } = await this.utilsService.sendHttpRequest({ + url: `${this.beaconUrl}/eth/v1/beacon/states/head/fork`, + }); + + return data; + }, + ); + } catch (e) { + console.log(e); + throwServerError('Unable to fetch fork version data'); + } + } } diff --git a/backend/src/logs/logs.controller.ts b/backend/src/logs/logs.controller.ts index 334a8499..9a1b61ec 100644 --- a/backend/src/logs/logs.controller.ts +++ b/backend/src/logs/logs.controller.ts @@ -46,8 +46,8 @@ export class LogsController { } @Get('log-metrics') - getMetrics() { - return this.logsService.readMetrics(); + getMetrics(@Query('type') type?: LogType) { + return this.logsService.readMetrics(type); } @Get('priority-log-stream') diff --git a/backend/src/logs/logs.service.ts b/backend/src/logs/logs.service.ts index 45c7ed84..b3d5c279 100644 --- a/backend/src/logs/logs.service.ts +++ b/backend/src/logs/logs.service.ts @@ -110,9 +110,9 @@ export class LogsService { throw new Error('Invalid log type'); } - let warnOptions = { where: { level: LogLevels.WARN } } as any; - let errorOptions = { where: { level: LogLevels.ERRO } } as any; - let critOptions = { where: { level: LogLevels.CRIT } } as any; + const warnOptions = { where: { level: LogLevels.WARN } } as any; + const errorOptions = { where: { level: LogLevels.ERRO } } as any; + const critOptions = { where: { level: LogLevels.CRIT } } as any; if (type) { warnOptions.where.type = { [Op.eq]: type }; diff --git a/backend/src/tasks/tasks.service.ts b/backend/src/tasks/tasks.service.ts index 615a644c..b9db8876 100644 --- a/backend/src/tasks/tasks.service.ts +++ b/backend/src/tasks/tasks.service.ts @@ -60,10 +60,6 @@ export class TasksService implements OnApplicationBootstrap { throw new CustomError('No api token found...', 'NO_API_TOKEN'); } - await this.logRepository.destroy({ - truncate: true, - }); - await this.syncBeaconSpecs(); await this.initValidatorDataScheduler(); await this.initMetricDataScheduler(); diff --git a/package.json b/package.json index 0b251bf9..83426c02 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@types/jest": "^29.5.12", "@types/js-cookie": "^3.0.6", "@types/jsonwebtoken": "^9.0.6", - "@types/react": "19.0.2", + "@types/react": "19.0.8", "@uiw/react-textarea-code-editor": "^2.1.1", "autoprefixer": "^10.4.19", "axios": "^0.27.2", @@ -32,7 +32,7 @@ "dotenv": "^16.4.5", "ethers": "^6.13.2", "eventsource": "^2.0.2", - "express": "^4.18.3", + "express": "^4.21.2", "framer-motion": "^11.2.10", "fs": "^0.0.1-security", "i18next": "^21.9.2", @@ -40,11 +40,11 @@ "jsonwebtoken": "^9.0.2", "lodash": "^4.17.21", "moment": "^2.29.4", - "next": "13", + "next": "^14.2.24", "nuka-carousel": "^6.0.1", - "react": "^18.2.0", + "react": "18", "react-d3-speedometer": "^1.0.2", - "react-dom": "^18.2.0", + "react-dom": "18", "react-hook-form": "^7.35.0", "react-i18next": "^11.18.6", "react-toastify": "^9.0.8", @@ -56,7 +56,7 @@ "tailwind-scrollbar-hide": "^1.1.7", "tailwindcss": "^3.1.8", "tailwindcss-scoped-groups": "^2.0.0", - "typescript": "5.7.2", + "typescript": "5.7.3", "uuid": "^11.0.1", "viem": "2.x", "wagmi": "^2.10.10", @@ -85,10 +85,11 @@ ] }, "devDependencies": { - "@types/node": "22.10.2", + "@types/node": "22.13.3", "@typescript-eslint/eslint-plugin": "^7.1.0", + "cross-spawn": "^7.0.6", "eslint": "8.57.0", - "eslint-config-next": "^15.0.3", + "eslint-config-next": "^14.2.24", "eslint-plugin-import": "^2.29.1", "eslint-plugin-unused-imports": "^3.2.0", "husky": "^9.0.11", diff --git a/src/components/AlertInfo/PriorityLogAlerts.tsx b/src/components/AlertInfo/PriorityLogAlerts.tsx index 517fae14..889b7a3d 100644 --- a/src/components/AlertInfo/PriorityLogAlerts.tsx +++ b/src/components/AlertInfo/PriorityLogAlerts.tsx @@ -20,7 +20,7 @@ const PriorityLogAlerts: FC = ({ alerts }) => { const [hasMoreLogs, setHasMoreLogs] = useState(alerts.length >= FETCH_LOG_LIMIT) const [isLoading, setIsLoading] = useState(false) - const { data: streamedData } = useSSEData({ + const { data: streamedData } = useSSEData({ url: '/priority-log-stream', isReady: true, isStateStore: true, @@ -29,7 +29,7 @@ const PriorityLogAlerts: FC = ({ alerts }) => { useEffect(() => { if (!streamedData?.length) return - setData((prev) => { + setData((prev: LogData[]) => { const combined = [...prev, ...streamedData] return Array.from(new Map(combined.map((item) => [item.id, item])).values()) }) diff --git a/src/components/CheckBox/CheckBox.tsx b/src/components/CheckBox/CheckBox.tsx index c2f299c7..fab86eb9 100644 --- a/src/components/CheckBox/CheckBox.tsx +++ b/src/components/CheckBox/CheckBox.tsx @@ -16,12 +16,12 @@ const CheckBox: FC = ({ inputClassName, ...inputProps }) => { - const containerClasses = addClassString('flex items-center', [containerClassName]) + const containerClasses = addClassString('flex items-center cursor-pointer', [containerClassName]) const inputClasses = addClassString( - 'w-5 h-5 border border-gray-300 accent-primary bg-transparent border-style500 rounded focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 dark:border-gray-600', + 'w-5 h-5 border border-gray-300 cursor-pointer accent-primary bg-transparent border-style500 rounded focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 dark:border-gray-600', [inputClassName], ) - const labelClasses = addClassString('ml-2 text-gray-900 dark:text-gray-300', [ + const labelClasses = addClassString('ml-2 cursor-pointer text-gray-900 dark:text-gray-300', [ labelStyle || 'text-sm font-medium', ]) diff --git a/src/components/ConsolidateValidator/Consolidate.tsx b/src/components/ConsolidateValidator/Consolidate.tsx index 607ca311..76c41958 100644 --- a/src/components/ConsolidateValidator/Consolidate.tsx +++ b/src/components/ConsolidateValidator/Consolidate.tsx @@ -5,7 +5,7 @@ import { useAccount, useSendTransaction, useEstimateGas, useGasPrice } from 'wag import displayToast from '../../../utilities/displayToast' import { CONSOLIDATION_CONTRACT } from '../../constants/constants' import useHasSufficientBalance from '../../hooks/useHasSufficientBalance' -import { Address, ConsolidationTx, ToastType } from '../../types' +import { Address, ConsolidationTx, ToastType, TxHash } from '../../types' import { ValidatorInfo } from '../../types/validator' import Button, { ButtonFace } from '../Button/Button' import WalletActionGuard from '../WalletActionGuard/WalletActionGuard' @@ -13,7 +13,7 @@ import WalletActionGuard from '../WalletActionGuard/WalletActionGuard' export interface ConsolidateViewProps { targetPubKey: string sourceValidator: ValidatorInfo - queueLength?: BigInt | undefined + queueLength?: bigint | undefined chainId: number bufferPercentage: bigint onSubmitRequest: (request: ConsolidationTx) => void @@ -29,7 +29,7 @@ const Consolidate: FC = ({ }) => { const { t } = useTranslation() const { index, pubKey: sourcePubKey, withdrawalAddress } = sourceValidator - const txData = '0x' + sourcePubKey.substring(2) + targetPubKey.substring(2) + const txData = ('0x' + sourcePubKey.substring(2) + targetPubKey.substring(2)) as TxHash const { address } = useAccount() const [isLoading, setIsLoading] = useState(false) const submitRequest = useSendTransaction() @@ -66,7 +66,7 @@ const Consolidate: FC = ({ const estimatedGasLimit = estimatedGasData ? (BigInt(estimatedGasData.toString()) * 110n) / 100n : null - const gasFee = estimatedGasLimit ? estimatedGasLimit * gasPrice : 0n + const gasFee = estimatedGasLimit && gasPrice ? estimatedGasLimit * gasPrice : 0n const totalRequiredFunds = requestFee + gasFee const { isSufficient } = useHasSufficientBalance(totalRequiredFunds) @@ -113,7 +113,12 @@ const Consolidate: FC = ({ isSufficientBalance={isSufficient} targetAddress={formattedWithdrawalAddress} > - diff --git a/src/components/HorizontalStepper/HorizontalStepper.tsx b/src/components/HorizontalStepper/HorizontalStepper.tsx index 7ce7ea3e..672fc510 100644 --- a/src/components/HorizontalStepper/HorizontalStepper.tsx +++ b/src/components/HorizontalStepper/HorizontalStepper.tsx @@ -48,7 +48,8 @@ const HorizontalStepper: FC = ({ children, steps }) => { const slides = useMemo(() => { return Children.toArray(children(stepperProps)).flatMap((child) => { if (isValidElement(child) && child.type === Fragment) { - return Children.toArray(child.props.children) + const fragmentChild = child as ReactElement<{ children?: React.ReactNode }> + return Children.toArray(fragmentChild.props.children) } return child }) @@ -78,10 +79,10 @@ const HorizontalStepper: FC = ({ children, steps }) => {
-
+
{slides.map((child, index) => ( -
+
{child}
))} diff --git a/src/components/InvestRewards/InvestRewards.tsx b/src/components/InvestRewards/InvestRewards.tsx index ad102d08..fd9a36c9 100644 --- a/src/components/InvestRewards/InvestRewards.tsx +++ b/src/components/InvestRewards/InvestRewards.tsx @@ -63,7 +63,11 @@ const InvestRewards: FC = ({ candidateCount, rewardEstimate transition={{ delay: 0.2 }} className='w-full md:max-w-md border-style flex flex-col justify-around p-4' > - +
{t('validatorManagement.investmentRewards.investment')} @@ -107,7 +111,11 @@ const InvestRewards: FC = ({ candidateCount, rewardEstimate transition={{ delay: 0.2 }} className='mx-auto h-px w-full border-style' /> - +
{t('validatorManagement.investmentRewards.rewards')} diff --git a/src/components/LogDisplay/LogDisplay.tsx b/src/components/LogDisplay/LogDisplay.tsx index 9432c12e..0c0d2511 100644 --- a/src/components/LogDisplay/LogDisplay.tsx +++ b/src/components/LogDisplay/LogDisplay.tsx @@ -1,7 +1,7 @@ import React, { FC, useContext, useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import { debounce } from '../../../utilities/debounce' -import { LogMetric, LogType } from '../../types' +import { LogType, Metric } from '../../types' import Input from '../Input/Input' import LogStats from '../LogStats/LogStats' import Spinner from '../Spinner/Spinner' @@ -12,10 +12,10 @@ import LogRow from './LogRow' export interface LogDisplayProps { type: LogType isLoading?: boolean - priorityLogs: LogMetric + metrics: Metric } -const LogDisplay: FC = React.memo(function ({ type, isLoading, priorityLogs }) { +const LogDisplay: FC = React.memo(function ({ type, isLoading, metrics }) { const { t } = useTranslation() const [searchText, setText] = useState('') const scrollableRef = useRef(null) @@ -127,7 +127,7 @@ const LogDisplay: FC = React.memo(function ({ type, isLoading, size='lg' maxHeight='h-32 md:flex-1' maxWidth='w-full' - metrics={priorityLogs} + logMetrics={metrics} />
diff --git a/src/components/RangeSliderInput/RangeSliderInput.tsx b/src/components/RangeSliderInput/RangeSliderInput.tsx index f4d0cded..3944bc24 100644 --- a/src/components/RangeSliderInput/RangeSliderInput.tsx +++ b/src/components/RangeSliderInput/RangeSliderInput.tsx @@ -3,13 +3,14 @@ import { FC, InputHTMLAttributes } from 'react' export interface RangeSliderInputProps extends InputHTMLAttributes { id: string className?: string | undefined + label?: string | undefined } const RangeSliderInput: FC = ({ id, className, label, ...props }) => { return (
{label && ( -