Skip to content

Commit 1470437

Browse files
x0sinaImMohammad20000
x0sina
authored and
ImMohammad20000
committed
feat(logs): improve layout and styling for logs filter and terminal line components
1 parent f6b83dc commit 1470437

File tree

4 files changed

+30
-23
lines changed

4 files changed

+30
-23
lines changed

‎dashboard/src/components/nodes/since-logs-filter.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ export function SinceLogsFilter({ value, onValueChange, showTimestamp, onTimesta
2828
]
2929

3030
return (
31-
<div className="flex items-center gap-4">
31+
<div className="flex flex-wrap items-center gap-2 sm:gap-4">
3232
<div className="flex items-center gap-2">
33-
<span className="text-sm text-muted-foreground">{t('nodes.logs.sinceLabel')}</span>
33+
<span className="text-sm text-muted-foreground whitespace-nowrap">{t('nodes.logs.sinceLabel')}</span>
3434
<Select value={value} onValueChange={value => onValueChange(value as TimeFilter)}>
3535
<SelectTrigger className="h-9 w-32">
3636
<SelectValue />
@@ -45,9 +45,9 @@ export function SinceLogsFilter({ value, onValueChange, showTimestamp, onTimesta
4545
</Select>
4646
</div>
4747
<div className="flex items-center gap-2">
48-
<Clock size={14} className="text-muted-foreground" />
49-
<span className="text-sm text-muted-foreground">{t('nodes.logs.timestamps')}</span>
50-
<Switch checked={showTimestamp} onCheckedChange={onTimestampChange} className="scale-75" />
48+
<Clock size={14} className="text-muted-foreground flex-shrink-0" />
49+
<span className="text-sm text-muted-foreground whitespace-nowrap">{t('nodes.logs.timestamps')}</span>
50+
<Switch checked={showTimestamp} onCheckedChange={onTimestampChange} className="scale-75 flex-shrink-0" />
5151
</div>
5252
</div>
5353
)

‎dashboard/src/components/nodes/terminal-line.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
7272
return (
7373
<div
7474
className={cn(
75-
'group flex flex-row gap-2 py-1 font-mono text-[10px] sm:gap-3 sm:py-0.5 sm:text-xs',
75+
'group flex flex-col gap-1.5 px-2 py-2 font-mono text-xs sm:flex-row sm:gap-3 sm:px-3 sm:py-0.5 sm:text-xs',
7676
type === 'error'
7777
? 'bg-red-500/10 hover:bg-red-500/15'
7878
: type === 'warning'
@@ -82,17 +82,17 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
8282
: 'hover:bg-gray-200/50 dark:hover:bg-gray-800/50',
8383
)}
8484
>
85-
<div className="flex items-start gap-x-2">
85+
<div className="flex items-start gap-2 flex-shrink-0">
8686
{/* Icon to expand the log item maybe implement a colapsible later */}
8787
{/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
8888
{tooltip(color, rawTimestamp)}
89-
{!noTimestamp && <span className="w-16 flex-shrink-0 select-none pl-1 text-[9px] text-muted-foreground sm:w-20 sm:pl-2 sm:text-xs">{formattedTime}</span>}
89+
{!noTimestamp && <span className="w-14 flex-shrink-0 select-none text-[11px] text-muted-foreground sm:w-20 sm:text-xs">{formattedTime}</span>}
9090

91-
<Badge variant={variant} className={cn('w-14 justify-center px-1 py-0 text-[10px]', locale === 'fa' && 'font-body')}>
91+
<Badge variant={variant} className={cn('w-12 flex-shrink-0 justify-center px-1 py-0 text-[11px] sm:w-14 sm:text-[10px]', locale === 'fa' && 'font-body')}>
9292
{t(`nodes.logs.${type}`)}
9393
</Badge>
9494
</div>
95-
<span className="whitespace-pre-wrap break-all font-mono text-foreground dark:text-gray-200">{highlightMessage(message, searchTerm || '')}</span>
95+
<span className="whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-foreground dark:text-gray-200 sm:text-xs">{highlightMessage(message, searchTerm || '')}</span>
9696
</div>
9797
)
9898
}

‎dashboard/src/pages/_dashboard.nodes.logs.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -315,25 +315,25 @@ export default function NodeLogs() {
315315
</div>
316316

317317
<div className="flex flex-col gap-4">
318-
<div className="flex flex-wrap items-start justify-between gap-4 sm:items-center">
319-
<div className="flex flex-wrap gap-4">
318+
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
319+
<div className="flex flex-wrap items-center gap-2 sm:gap-4">
320320
<LineCountFilter value={lines} onValueChange={handleLines} />
321321

322322
<SinceLogsFilter value={since} onValueChange={handleSince} showTimestamp={showTimestamp} onTimestampChange={setShowTimestamp} />
323323

324324
<StatusLogsFilter value={typeFilter} setValue={setTypeFilter} title={t('nodes.logs.filter')} options={priorities} />
325325

326-
<Input type="search" placeholder={t('nodes.logs.search')} value={search} onChange={handleSearch} className="inline-flex h-9 w-full text-sm placeholder-gray-400 sm:w-auto" />
326+
<Input type="search" placeholder={t('nodes.logs.search')} value={search} onChange={handleSearch} className="inline-flex h-9 w-full min-w-[200px] text-sm placeholder-gray-400 sm:w-auto sm:min-w-0" />
327327
</div>
328328

329-
<div className={cn('flex gap-2', dir === 'rtl' && 'flex-row-reverse')}>
330-
<Button variant="outline" size="sm" className="h-9" onClick={handlePauseResume} title={isPaused ? t('nodes.logs.resume') : t('nodes.logs.pause')}>
331-
{isPaused ? <Play className={cn('mr-2 h-4 w-4', dir === 'rtl' && 'ml-2 mr-0')} /> : <Pause className={cn('mr-2 h-4 w-4', dir === 'rtl' && 'ml-2 mr-0')} />}
332-
{isPaused ? t('nodes.logs.resume') : t('nodes.logs.pause')}
329+
<div className={cn('flex gap-2 w-full sm:w-auto', dir === 'rtl' && 'flex-row-reverse')}>
330+
<Button variant="outline" size="sm" className="h-9 flex-1 sm:flex-initial" onClick={handlePauseResume} title={isPaused ? t('nodes.logs.resume') : t('nodes.logs.pause')}>
331+
{isPaused ? <Play className={cn('h-4 w-4 sm:mr-2', dir === 'rtl' && 'sm:ml-2 sm:mr-0')} /> : <Pause className={cn('h-4 w-4 sm:mr-2', dir === 'rtl' && 'sm:ml-2 sm:mr-0')} />}
332+
<span className="hidden sm:inline">{isPaused ? t('nodes.logs.resume') : t('nodes.logs.pause')}</span>
333333
</Button>
334-
<Button variant="outline" size="sm" className="h-9 w-full sm:w-auto" onClick={handleDownload} disabled={filteredLogs.length === 0}>
335-
<DownloadIcon className={cn('mr-2 h-4 w-4', dir === 'rtl' && 'ml-2 mr-0')} />
336-
{t('nodes.logs.download')}
334+
<Button variant="outline" size="sm" className="h-9 flex-1 sm:flex-initial" onClick={handleDownload} disabled={filteredLogs.length === 0}>
335+
<DownloadIcon className={cn('h-4 w-4 sm:mr-2', dir === 'rtl' && 'sm:ml-2 sm:mr-0')} />
336+
<span className="hidden sm:inline">{t('nodes.logs.download')}</span>
337337
</Button>
338338
</div>
339339
</div>
@@ -351,8 +351,8 @@ export default function NodeLogs() {
351351
</Alert>
352352
)}
353353
<Card className="bg-background">
354-
<CardContent className="p-2">
355-
<div ref={scrollRef} onScroll={handleScroll} dir="ltr" className="custom-logs-scrollbar h-[720px] space-y-0 overflow-y-auto rounded bg-background/75">
354+
<CardContent className="p-1 sm:p-2">
355+
<div ref={scrollRef} onScroll={handleScroll} dir="ltr" className="custom-logs-scrollbar h-[calc(100vh-280px)] min-h-[400px] max-h-[720px] space-y-0 overflow-y-auto overflow-x-hidden rounded bg-background/75 sm:h-[720px] sm:min-h-0">
356356
{filteredLogs.length > 0 ? (
357357
filteredLogs.map((filteredLog: LogLine, index: number) => <TerminalLine key={index} log={filteredLog} searchTerm={search} noTimestamp={!showTimestamp} />)
358358
) : isLoading ? (

‎dashboard/src/pages/_dashboard.nodes.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,14 @@ const Settings = () => {
8585
>
8686
<div className="flex items-center gap-1.5">
8787
<tab.icon className="h-4 w-4" />
88-
<span>{t(tab.label)}</span>
88+
{tab.id === 'core' ? (
89+
<>
90+
<span className="hidden sm:inline">{t(tab.label)}</span>
91+
<span className="sm:hidden">{t('settings.cores.title')}</span>
92+
</>
93+
) : (
94+
<span>{t(tab.label)}</span>
95+
)}
8996
</div>
9097
</button>
9198
))}

0 commit comments

Comments
 (0)