Skip to content

Commit 8e04e17

Browse files
AgeManningAgeManning
authored
Fix Slider with Graphs (#417)
1 parent 4c69795 commit 8e04e17

File tree

5 files changed

+57
-38
lines changed

5 files changed

+57
-38
lines changed

‎app/dashboard/Main.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -247,11 +247,20 @@ const Main: FC<MainProps> = (props) => {
247247
}, [validatorHeightRatio, optimalHeightRatio, isDragging])
248248

249249
// Update stored ratio when optimal changes (but allow user overrides)
250+
// Only auto-adjust if user hasn't manually set a specific ratio
250251
useEffect(() => {
251-
if (validatorHeightRatio != null && Math.abs(validatorHeightRatio - optimalHeightRatio) < 0.1) {
252-
setValidatorHeightRatio(optimalHeightRatio)
252+
if (
253+
validatorHeightRatio != null &&
254+
Math.abs(validatorHeightRatio - optimalHeightRatio) < 0.1 &&
255+
!isDragging
256+
) {
257+
// Only auto-adjust if the current ratio is very close to the default (0.5)
258+
// This prevents overriding manual user adjustments to min/max positions
259+
if (Math.abs(validatorHeightRatio - 0.5) < 0.05) {
260+
setValidatorHeightRatio(optimalHeightRatio)
261+
}
253262
}
254-
}, [optimalHeightRatio, validatorHeightRatio, setValidatorHeightRatio])
263+
}, [optimalHeightRatio, validatorHeightRatio, setValidatorHeightRatio, isDragging])
255264

256265
useEffect(() => {
257266
setDuties((prev) => formatUniqueObjectArray([...prev, ...valDuties]))
@@ -502,6 +511,7 @@ const Main: FC<MainProps> = (props) => {
502511
bnSpec={beaconSpec}
503512
syncData={syncData}
504513
beanHealth={nodeHealth}
514+
isCompact={currentHeightRatio >= 0.55}
505515
/>
506516
</div>
507517
</div>

‎src/components/DiagnosticTable/DiagnosticTable.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,30 @@ import AlertInfo, { AlertInfoProps } from '../AlertInfo/AlertInfo'
33
import HardwareInfo, { HardwareInfoProps } from './HardwareInfo'
44
import LogsInfo, { LogsInfoProps } from './LogsInfo'
55

6-
export interface DiagnosticTableProps extends HardwareInfoProps, AlertInfoProps, LogsInfoProps {}
6+
export interface DiagnosticTableProps extends HardwareInfoProps, AlertInfoProps, LogsInfoProps {
7+
isCompact?: boolean
8+
}
79

810
const DiagnosticTable: FC<DiagnosticTableProps> = ({
911
syncData,
1012
beanHealth,
1113
logMetrics,
1214
bnSpec,
1315
priorityLogs,
16+
isCompact = false,
1417
}) => {
1518
return (
1619
<div className='h-full flex flex-col space-y-2 md:space-y-0 md:flex-row w-full min-h-0 pb-1'>
1720
<div className='flex-1 min-h-0'>
18-
<HardwareInfo syncData={syncData} beanHealth={beanHealth} bnSpec={bnSpec} />
21+
<HardwareInfo
22+
syncData={syncData}
23+
beanHealth={beanHealth}
24+
bnSpec={bnSpec}
25+
isCompact={isCompact}
26+
/>
1927
</div>
2028
<div className='flex-1 min-h-0'>
21-
<LogsInfo logMetrics={logMetrics} />
29+
<LogsInfo logMetrics={logMetrics} isCompact={isCompact} />
2230
</div>
2331
<div className='flex-1 min-h-0'>
2432
<AlertInfo bnSpec={bnSpec} priorityLogs={priorityLogs} syncData={syncData} />

‎src/components/DiagnosticTable/HardwareInfo.tsx‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { FC, useState } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import addSuffixString from '../../../utilities/addSuffixString'
44
import formatAtHeadSlotStatus from '../../../utilities/formatAtHeadSlotStatus'
5-
import secondsToShortHand from '../../../utilities/secondsToShortHand'
65
import { DiagnosticType } from '../../constants/enums'
76
import useMediaQuery from '../../hooks/useMediaQuery'
87
import useMetricHistory from '../../hooks/useMetricHistory'
@@ -16,19 +15,18 @@ export interface HardwareInfoProps {
1615
syncData: SyncData
1716
beanHealth: Diagnostics
1817
bnSpec: BeaconNodeSpecResults
18+
isCompact?: boolean
1919
}
2020

21-
const HardwareInfo: FC<HardwareInfoProps> = ({ syncData, beanHealth, bnSpec }) => {
21+
const HardwareInfo: FC<HardwareInfoProps> = ({
22+
syncData,
23+
beanHealth,
24+
bnSpec,
25+
isCompact = false,
26+
}) => {
2227
const { t } = useTranslation()
2328
const {
24-
beaconSync: {
25-
beaconSyncTime,
26-
beaconPercentage,
27-
isSyncing,
28-
headSlot,
29-
currentEpoch,
30-
syncDistance,
31-
},
29+
beaconSync: { beaconPercentage, isSyncing, headSlot, currentEpoch, syncDistance },
3230
} = syncData
3331
const [view, setView] = useState<DiagnosticType>(DiagnosticType.DEVICE)
3432
const {
@@ -56,7 +54,6 @@ const HardwareInfo: FC<HardwareInfoProps> = ({ syncData, beanHealth, bnSpec }) =
5654
)
5755

5856
const diskData = isSyncing ? diskStatus.syncing : diskStatus.synced
59-
const remainingBeaconTime = secondsToShortHand(Number(beaconSyncTime) || 0)
6057

6158
// Calculate slot information
6259
const { SLOTS_PER_EPOCH } = bnSpec
@@ -97,41 +94,41 @@ const HardwareInfo: FC<HardwareInfoProps> = ({ syncData, beanHealth, bnSpec }) =
9794
<div className='flex flex-col h-full'>
9895
<DiagnosticCard
9996
title={t('disk')}
100-
maxHeight='flex-1'
97+
maxHeight='max-h-full min-h-0 flex-1'
10198
size={size}
10299
border='border-t-0 border-style500 border-b border-b-style500'
103100
metric={addSuffixString(Math.round(totalDiskSpace), 'GB')}
104101
subTitle={t('utilization', { percent: diskUtilization })}
105102
status={diskData}
106-
chartData={diskHistory}
103+
chartData={isCompact ? undefined : diskHistory}
107104
chartColor='#5E41D5'
108-
chartLabel='Disk Usage'
105+
chartLabel={isCompact ? undefined : 'Disk Usage'}
109106
iconType='disk'
110107
/>
111108
<DiagnosticCard
112109
title={t('cpu')}
113-
maxHeight='flex-1'
110+
maxHeight='max-h-full min-h-0 flex-1'
114111
size={size}
115112
border='border-t-0 border-style500 border-b border-b-style500'
116113
metric={frequency ? addSuffixString(frequency, 'GHz') : ' '}
117114
subTitle={t('utilization', { percent: cpuUtilization })}
118115
status={cpuStatus}
119-
chartData={cpuHistory}
116+
chartData={isCompact ? undefined : cpuHistory}
120117
chartColor='#7C5FEB'
121-
chartLabel='CPU Usage'
118+
chartLabel={isCompact ? undefined : 'CPU Usage'}
122119
iconType='cpu'
123120
/>
124121
<DiagnosticCard
125122
title={t('ram')}
126-
maxHeight='flex-1'
123+
maxHeight='max-h-full min-h-0 flex-1'
127124
size={size}
128125
border='border-t-0 border-style500 border-b border-b-style500'
129126
metric={addSuffixString(Math.round(totalMemory), 'GB')}
130127
subTitle={t('utilization', { percent: memoryUtilization })}
131128
status={ramStatus}
132-
chartData={ramHistory}
129+
chartData={isCompact ? undefined : ramHistory}
133130
chartColor='#A841D5'
134-
chartLabel='RAM Usage'
131+
chartLabel={isCompact ? undefined : 'RAM Usage'}
135132
iconType='ram'
136133
/>
137134
</div>
@@ -141,7 +138,7 @@ const HardwareInfo: FC<HardwareInfoProps> = ({ syncData, beanHealth, bnSpec }) =
141138
<div className='flex flex-col h-full'>
142139
<DiagnosticCard
143140
size={size}
144-
maxHeight='flex-1'
141+
maxHeight='max-h-full min-h-0 flex-1'
145142
title={t('network')}
146143
isBackground={false}
147144
metricTextSize='text-caption2'
@@ -159,7 +156,7 @@ const HardwareInfo: FC<HardwareInfoProps> = ({ syncData, beanHealth, bnSpec }) =
159156
/>
160157
<DiagnosticCard
161158
size={size}
162-
maxHeight='flex-1'
159+
maxHeight='max-h-full min-h-0 flex-1'
163160
title='Beacon Node'
164161
metric={getSyncStatusText()}
165162
percent={Number(beaconPercentage)}

‎src/components/DiagnosticTable/LogsInfo.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ import Typography from '../Typography/Typography'
88

99
export interface LogsInfoProps {
1010
logMetrics: Metric
11+
isCompact?: boolean
1112
}
1213

13-
const LogsInfo: FC<LogsInfoProps> = ({ logMetrics }) => {
14+
const LogsInfo: FC<LogsInfoProps> = ({ logMetrics, isCompact = false }) => {
1415
const { t } = useTranslation()
1516
const isMobile = useMediaQuery('(max-width: 425px)')
1617
const size = isMobile ? 'health' : 'md'
@@ -40,6 +41,7 @@ const LogsInfo: FC<LogsInfoProps> = ({ logMetrics }) => {
4041
warnToolTip={t('logs.tooltips.combinedWarning')}
4142
size={size}
4243
logMetrics={logMetrics}
44+
isCompact={isCompact}
4345
/>
4446
</div>
4547
</div>

‎src/components/LogStats/LogStats.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export interface LogStatsProps {
1313
size?: CardSize
1414
maxHeight?: string
1515
maxWidth?: string
16+
isCompact?: boolean
1617
}
1718

1819
const LogStats: FC<LogStatsProps> = ({
@@ -23,6 +24,7 @@ const LogStats: FC<LogStatsProps> = ({
2324
warnToolTip,
2425
errorToolTip,
2526
logMetrics,
27+
isCompact = false,
2628
}) => {
2729
const { t } = useTranslation()
2830
const { errorCount, criticalCount, warningCount } = logMetrics
@@ -56,48 +58,48 @@ const LogStats: FC<LogStatsProps> = ({
5658
<DiagnosticCard
5759
title={t('logInfo.criticalLogs')}
5860
toolTipText={critToolTip}
59-
maxHeight={maxHeight}
61+
maxHeight={maxHeight === 'flex-1' ? 'max-h-full min-h-0 flex-1' : maxHeight}
6062
maxWidth={maxWidth}
6163
status={critStatus}
6264
size={size}
6365
border='border-t-0 md:border-l-0 border-style500 border-b border-b-style500'
6466
subTitle={t('critical')}
6567
metric={`${toFixedIfNecessary(criticalCount, 2)} / HR`}
66-
chartData={criticalLogsHistory}
68+
chartData={isCompact ? undefined : criticalLogsHistory}
6769
chartColor='#D541B8'
68-
chartLabel='Critical Logs'
70+
chartLabel={isCompact ? undefined : 'Critical Logs'}
6971
isChartPercentage={false}
7072
iconType='critical'
7173
/>
7274
<DiagnosticCard
7375
title={t('errors')}
7476
toolTipText={errorToolTip}
75-
maxHeight={maxHeight}
77+
maxHeight={maxHeight === 'flex-1' ? 'max-h-full min-h-0 flex-1' : maxHeight}
7678
maxWidth={maxWidth}
7779
status={errorStatus}
7880
size={size}
7981
border='border-t-0 md:border-l-0 border-style500 border-b border-b-style500'
8082
subTitle={t('logInfo.validatorLogs')}
8183
metric={`${toFixedIfNecessary(errorCount, 2)} / HR`}
82-
chartData={errorLogsHistory}
84+
chartData={isCompact ? undefined : errorLogsHistory}
8385
chartColor='#836FFF'
84-
chartLabel='Error Logs'
86+
chartLabel={isCompact ? undefined : 'Error Logs'}
8587
isChartPercentage={false}
8688
iconType='error'
8789
/>
8890
<DiagnosticCard
8991
title={t('logInfo.warnings')}
9092
toolTipText={warnToolTip}
91-
maxHeight={maxHeight}
93+
maxHeight={maxHeight === 'flex-1' ? 'max-h-full min-h-0 flex-1' : maxHeight}
9294
maxWidth={maxWidth}
9395
status={warnStatus}
9496
size={size}
9597
border='border-t-0 md:border-l-0 border-style500 border-b border-b-style500'
9698
subTitle={t('logInfo.validatorLogs')}
9799
metric={`${toFixedIfNecessary(warningCount, 2)} / HR`}
98-
chartData={warningLogsHistory}
100+
chartData={isCompact ? undefined : warningLogsHistory}
99101
chartColor='#5200FF'
100-
chartLabel='Warning Logs'
102+
chartLabel={isCompact ? undefined : 'Warning Logs'}
101103
isChartPercentage={false}
102104
iconType='warning'
103105
/>

0 commit comments

Comments
 (0)