Skip to content

Commit 6f98d17

Browse files
alrocaralrocar
authored
design fixes (#37)
* design fixes * update loading spinner * add load more * update close button * fix date range * add error state * update datazoom * update datazoom * update button
1 parent e32d527 commit 6f98d17

File tree

10 files changed

+131
-42
lines changed

10 files changed

+131
-42
lines changed

‎dashboard/log-analyzer/src/app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
--background-hover: #E0EFFF;
1212
--text-primary: 232 18% 19%; /* #25283D */
1313
--text-secondary: 0 0% 14%; /* #232323 */
14+
--error: #DE1616;
1415
--button-text: #333B69;
1516
--text-table-header: #718EBF;
1617
--table-separator: #E6EFF5;
@@ -160,7 +161,6 @@
160161
font-family: inherit !important;
161162
font-size: inherit !important;
162163
font-weight: normal !important;
163-
color: var(--text-primary) !important;
164164
}
165165

166166
}

‎dashboard/log-analyzer/src/components/charts/TimeSeriesChart.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
import { useQuery } from '@tinybirdco/charts'
44
import ReactECharts from 'echarts-for-react';
55
import { format } from 'date-fns';
6-
6+
import { LoaderIcon } from '../icons';
7+
import { Info } from "lucide-react";
78
const formatNumber = (num: number) => {
89
if (num >= 1_000_000) {
910
return `${(num / 1_000_000).toFixed(1)}M`;
@@ -46,20 +47,30 @@ export function TimeSeriesChart(params: {
4647

4748
if (loading) {
4849
return (
49-
<div className="">
50-
<div className="h-[140px] bg-[#D9D9D9] rounded-[4px] animate-pulse" />
50+
<div className="h-[160px] flex items-center justify-center gap-2 bg-[#D9D9D9] rounded-[4px] animate-pulse">
51+
<LoaderIcon />
52+
<span className="text-sm text-[#25283D]">Loading data...</span>
53+
</div>
54+
);
55+
}
56+
if (error) {
57+
return (
58+
<div className="h-full p-6">
59+
<div className="h-full flex flex-col items-center justify-center gap-4 bg-white rounded-[4px]">
60+
<Info className="h-10 w-10 text-[var(--error)]" />
61+
<span className="text-[var(--error)] text-base font-semibold">{error}</span>
62+
</div>
5163
</div>
5264
);
5365
}
54-
if (error) return <div>Error: {error}</div>
5566

5667
// eslint-disable-next-line @typescript-eslint/no-explicit-any
5768
const dates = data?.map((item: any) => item.date) ?? [];
5869
const option = {
5970
grid: {
6071
left: '0',
6172
right: '0',
62-
bottom: '15%',
73+
bottom: 48,
6374
top: '8',
6475
containLabel: true,
6576
},
@@ -79,7 +90,7 @@ export function TimeSeriesChart(params: {
7990
},
8091
moveHandleSize: 0,
8192
showDetail: false,
82-
height: 20,
93+
height: 40,
8394
selectedDataBackground: {
8495
areaStyle: {
8596
color: '#E0EFFF',
@@ -200,7 +211,7 @@ export function TimeSeriesChart(params: {
200211
return (
201212
<ReactECharts
202213
option={option}
203-
style={{ height: '140px' }}
214+
style={{ height: '160px' }}
204215
onEvents={{
205216
// eslint-disable-next-line @typescript-eslint/no-explicit-any
206217
datazoom: (zoomParams: any) => {

‎dashboard/log-analyzer/src/components/charts/TimeSeriesChartWrapper.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export function TimeSeriesChartWrapper(props: TimeSeriesChartWrapperProps) {
4141
const params = new URLSearchParams(searchParams.toString());
4242
params.set('start_date', start);
4343
params.set('end_date', end);
44+
params.set('custom_range', 'custom');
4445
router.push(`?${params.toString()}`);
4546
}} />
4647
</div>

‎dashboard/log-analyzer/src/components/filters/DateRangeSelector.tsx‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,15 @@ function formatDate(date: Date) {
99
return date.toISOString().split('.')[0].replace('T', ' ').replace('Z', '');
1010
}
1111

12+
const timeRangeLabels: Record<string, string> = {
13+
'1h': 'Last 1 hour',
14+
'24h': 'Last 24 hours',
15+
'3d': 'Last 3 days',
16+
'7d': 'Last 7 days',
17+
'30d': 'Last 30 days',
18+
'6m': 'Last 6 months',
19+
};
20+
1221
export function DateRangeSelector() {
1322
const router = useRouter();
1423
const pathname = usePathname();
@@ -45,15 +54,26 @@ export function DateRangeSelector() {
4554

4655
params.set('start_date', formatDate(startDate));
4756
params.set('end_date', formatDate(now));
57+
params.set('time_range', value);
58+
params.delete('custom_range');
4859

4960
router.replace(`${pathname}?${params.toString()}`);
5061
window.dispatchEvent(new Event('refresh-filters'));
5162
}, [pathname, router, searchParams]);
5263

64+
const isCustomRange = searchParams.get('custom_range') === 'custom';
65+
const timeRange = searchParams.get('time_range') || "3d";
66+
const defaultValue = isCustomRange ? 'custom' : timeRange;
67+
5368
return (
54-
<Select defaultValue="3d" onValueChange={handleTimeRangeChange}>
69+
<Select
70+
value={defaultValue}
71+
onValueChange={handleTimeRangeChange}
72+
>
5573
<SelectTrigger className="w-[180px] h-10 bg-white border-[var(--border-gray)]">
56-
<SelectValue placeholder="Time Range" />
74+
<SelectValue>
75+
{isCustomRange ? "Custom Range" : timeRangeLabels[timeRange]}
76+
</SelectValue>
5777
</SelectTrigger>
5878
<SelectContent>
5979
<SelectItem value="1h" className="hover:bg-[var(--background-hover)]">Last 1 hour</SelectItem>

‎dashboard/log-analyzer/src/components/filters/SearchBar.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { Button } from "@/components/ui/button";
77
import { useState, useEffect } from "react";
88
import { getTotalRowCount } from "@/lib/utils";
99
import { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
10+
import { cn } from "@/lib/utils";
11+
1012
export function SearchBar() {
1113
const router = useRouter();
1214
const pathname = usePathname();
@@ -76,7 +78,10 @@ export function SearchBar() {
7678
<Search className="absolute left-3 top-3 h-4 w-4 text-[var(--button-text)]" />
7779
<Input
7880
placeholder={isDisabled ? "Narrow the filters to enable search" : "Search... "}
79-
className="h-10 pl-9 pr-9 border-[var(--border-gray)] font-semibold"
81+
className={cn(
82+
"h-10 pl-9 pr-9 border-[var(--border-gray)] font-semibold disabled:opacity-100",
83+
isDisabled && "placeholder:italic placeholder:text-[#8A8A8A]"
84+
)}
8085
value={inputValue}
8186
onChange={(e) => setInputValue(e.target.value)}
8287
onKeyDown={handleKeyDown}

‎dashboard/log-analyzer/src/components/icons/index.tsx‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,32 @@ export const ExpandIcon = () => (
1515
);
1616

1717
export const FileIcon = () => (
18-
<svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg">
19-
<path d="M8.92 14.745C8.89811 14.6813 8.86785 14.6207 8.83 14.565C8.79308 14.5126 8.75301 14.4625 8.71 14.415C8.56938 14.2762 8.3908 14.1822 8.19681 14.1449C8.00282 14.1075 7.80211 14.1284 7.62 14.205C7.49725 14.2526 7.3851 14.324 7.29 14.415C7.24699 14.4625 7.20692 14.5126 7.17 14.565C7.13215 14.6207 7.10189 14.6813 7.08 14.745C7.05117 14.8017 7.03095 14.8624 7.02 14.925C7.01555 14.9916 7.01555 15.0584 7.02 15.125C7.01662 15.2562 7.04402 15.3863 7.1 15.505C7.15064 15.6262 7.22167 15.7378 7.31 15.835C7.49379 16.0173 7.74113 16.1213 8 16.125C8.13118 16.1284 8.26132 16.101 8.38 16.045C8.5041 16.0001 8.6168 15.9284 8.71011 15.8351C8.80343 15.7418 8.87509 15.6291 8.92 15.505C8.97598 15.3863 9.00338 15.2562 9 15.125C9.00445 15.0584 9.00445 14.9916 9 14.925C8.98278 14.8612 8.9558 14.8005 8.92 14.745ZM16 7.065C15.9896 6.97313 15.9695 6.88263 15.94 6.795V6.705C15.8919 6.60218 15.8278 6.50767 15.75 6.425L9.75 0.425C9.66734 0.347216 9.57282 0.283081 9.47 0.235H9.38C9.27841 0.176741 9.16622 0.139344 9.05 0.125H3C2.20435 0.125 1.44129 0.441071 0.87868 1.00368C0.316071 1.56629 0 2.32935 0 3.125V17.125C0 17.9206 0.316071 18.6837 0.87868 19.2463C1.44129 19.8089 2.20435 20.125 3 20.125H13C13.7956 20.125 14.5587 19.8089 15.1213 19.2463C15.6839 18.6837 16 17.9206 16 17.125V7.125C16 7.125 16 7.125 16 7.065ZM10 3.535L12.59 6.125H11C10.7348 6.125 10.4804 6.01964 10.2929 5.83211C10.1054 5.64457 10 5.39022 10 5.125V3.535ZM14 17.125C14 17.3902 13.8946 17.6446 13.7071 17.8321C13.5196 18.0196 13.2652 18.125 13 18.125H3C2.73478 18.125 2.48043 18.0196 2.29289 17.8321C2.10536 17.6446 2 17.3902 2 17.125V3.125C2 2.85978 2.10536 2.60543 2.29289 2.41789C2.48043 2.23036 2.73478 2.125 3 2.125H8V5.125C8 5.92065 8.31607 6.68371 8.87868 7.24632C9.44129 7.80893 10.2044 8.125 11 8.125H14V17.125ZM8 9.125C7.73478 9.125 7.48043 9.23036 7.29289 9.41789C7.10536 9.60543 7 9.85978 7 10.125V12.125C7 12.3902 7.10536 12.6446 7.29289 12.8321C7.48043 13.0196 7.73478 13.125 8 13.125C8.26522 13.125 8.51957 13.0196 8.70711 12.8321C8.89464 12.6446 9 12.3902 9 12.125V10.125C9 9.85978 8.89464 9.60543 8.70711 9.41789C8.51957 9.23036 8.26522 9.125 8 9.125Z" fill="black"/>
18+
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
19+
<g opacity="0.5">
20+
<path d="M21.5337 28.2C21.4972 28.0938 21.4467 27.9929 21.3837 27.9C21.3221 27.8127 21.2553 27.7292 21.1837 27.65C20.9493 27.4187 20.6517 27.2621 20.3283 27.1998C20.005 27.1375 19.6705 27.1723 19.367 27.3C19.1624 27.3793 18.9755 27.4982 18.817 27.65C18.7453 27.7292 18.6785 27.8127 18.617 27.9C18.5539 27.9929 18.5035 28.0938 18.467 28.2C18.4189 28.2945 18.3852 28.3956 18.367 28.5C18.3596 28.611 18.3596 28.7223 18.367 28.8333C18.3614 29.0519 18.407 29.2688 18.5003 29.4666C18.5847 29.6686 18.7031 29.8546 18.8503 30.0166C19.1566 30.3205 19.5689 30.4938 20.0003 30.5C20.219 30.5056 20.4359 30.4599 20.6337 30.3666C20.8405 30.2918 21.0283 30.1724 21.1838 30.0168C21.3394 29.8613 21.4588 29.6735 21.5337 29.4666C21.627 29.2688 21.6726 29.0519 21.667 28.8333C21.6744 28.7223 21.6744 28.611 21.667 28.5C21.6383 28.3937 21.5933 28.2925 21.5337 28.2ZM33.3337 15.4C33.3163 15.2469 33.2828 15.096 33.2337 14.95V14.8C33.1535 14.6286 33.0466 14.4711 32.917 14.3333L22.917 4.33331C22.7792 4.20367 22.6217 4.09678 22.4503 4.01665H22.3003C22.131 3.91955 21.944 3.85722 21.7503 3.83331H11.667C10.3409 3.83331 9.06914 4.3601 8.13146 5.29778C7.19378 6.23546 6.66699 7.50723 6.66699 8.83331V32.1666C6.66699 33.4927 7.19378 34.7645 8.13146 35.7022C9.06914 36.6399 10.3409 37.1666 11.667 37.1666H28.3337C29.6597 37.1666 30.9315 36.6399 31.8692 35.7022C32.8069 34.7645 33.3337 33.4927 33.3337 32.1666V15.5C33.3337 15.5 33.3337 15.5 33.3337 15.4ZM23.3337 9.51665L27.6503 13.8333H25.0003C24.5583 13.8333 24.1344 13.6577 23.8218 13.3452C23.5093 13.0326 23.3337 12.6087 23.3337 12.1666V9.51665ZM30.0003 32.1666C30.0003 32.6087 29.8247 33.0326 29.5122 33.3452C29.1996 33.6577 28.7757 33.8333 28.3337 33.8333H11.667C11.225 33.8333 10.801 33.6577 10.4885 33.3452C10.1759 33.0326 10.0003 32.6087 10.0003 32.1666V8.83331C10.0003 8.39129 10.1759 7.96736 10.4885 7.6548C10.801 7.34224 11.225 7.16665 11.667 7.16665H20.0003V12.1666C20.0003 13.4927 20.5271 14.7645 21.4648 15.7022C22.4025 16.6399 23.6742 17.1666 25.0003 17.1666H30.0003V32.1666ZM20.0003 18.8333C19.5583 18.8333 19.1344 19.0089 18.8218 19.3215C18.5093 19.634 18.3337 20.058 18.3337 20.5V23.8333C18.3337 24.2753 18.5093 24.6993 18.8218 25.0118C19.1344 25.3244 19.5583 25.5 20.0003 25.5C20.4424 25.5 20.8663 25.3244 21.1788 25.0118C21.4914 24.6993 21.667 24.2753 21.667 23.8333V20.5C21.667 20.058 21.4914 19.634 21.1788 19.3215C20.8663 19.0089 20.4424 18.8333 20.0003 18.8333Z" fill="black"/>
21+
</g>
22+
</svg>
23+
);
24+
25+
interface IconProps extends React.SVGProps<SVGSVGElement> {
26+
className?: string;
27+
color?: string
28+
}
29+
30+
export const LoaderIcon = ({ className = '', color = '#232323', ...props }: IconProps) => (
31+
<svg className={`animate-spin ${className}`} width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
32+
<g clipPath="url(#paint0_angular_3097_434_clip_path)" data-figma-skip-parse="true">
33+
<g transform="matrix(0 0.0106667 -0.0106667 0 10.9999 10.9568)">
34+
<foreignObject x="-1150" y="-1150" width="2300" height="2300">
35+
<div style={{background: `conic-gradient(from 90deg,${color}00 0deg,${color}00 91.875deg,${color} 360deg)`, height: "100%", width: "100%", opacity: 1}} />
36+
</foreignObject>
37+
</g>
38+
</g>
39+
<path d="M10.9999 0.290161C8.89026 0.290161 6.82797 0.91575 5.07384 2.08782C3.31972 3.25989 1.95254 4.92579 1.14521 6.87487C0.337874 8.82395 0.126638 10.9687 0.538214 13.0378C0.949789 15.1069 1.96569 17.0075 3.45745 18.4993C4.94921 19.9911 6.84983 21.007 8.91896 21.4185C10.9881 21.8301 13.1328 21.6189 15.0819 20.8115C17.031 20.0042 18.6969 18.637 19.8689 16.8829C21.041 15.1288 21.6666 13.0665 21.6666 10.9568C21.6666 9.55606 21.3907 8.16901 20.8546 6.87487C20.3186 5.58073 19.5329 4.40485 18.5424 3.41436C17.5519 2.42386 16.376 1.63816 15.0819 1.10211C13.7877 0.566063 12.4007 0.290161 10.9999 0.290161ZM10.9999 19.4902C9.31219 19.4902 7.66236 18.9897 6.25906 18.052C4.85576 17.1144 3.76202 15.7817 3.11615 14.2224C2.47028 12.6631 2.3013 10.9474 2.63056 9.29206C2.95982 7.63675 3.77254 6.11626 4.96595 4.92285C6.15935 3.72944 7.67985 2.91672 9.33515 2.58746C10.9905 2.2582 12.7062 2.42719 14.2655 3.07306C15.8248 3.71892 17.1575 4.81266 18.0951 6.21596C19.0328 7.61926 19.5333 9.26909 19.5333 10.9568C19.5333 13.22 18.6342 15.3905 17.0339 16.9908C15.4336 18.5911 13.2631 19.4902 10.9999 19.4902Z" />
40+
<defs>
41+
<clipPath id="paint0_angular_3097_434_clip_path">
42+
<path d="M10.9999 0.290161C8.89026 0.290161 6.82797 0.91575 5.07384 2.08782C3.31972 3.25989 1.95254 4.92579 1.14521 6.87487C0.337874 8.82395 0.126638 10.9687 0.538214 13.0378C0.949789 15.1069 1.96569 17.0075 3.45745 18.4993C4.94921 19.9911 6.84983 21.007 8.91896 21.4185C10.9881 21.8301 13.1328 21.6189 15.0819 20.8115C17.031 20.0042 18.6969 18.637 19.8689 16.8829C21.041 15.1288 21.6666 13.0665 21.6666 10.9568C21.6666 9.55606 21.3907 8.16901 20.8546 6.87487C20.3186 5.58073 19.5329 4.40485 18.5424 3.41436C17.5519 2.42386 16.376 1.63816 15.0819 1.10211C13.7877 0.566063 12.4007 0.290161 10.9999 0.290161ZM10.9999 19.4902C9.31219 19.4902 7.66236 18.9897 6.25906 18.052C4.85576 17.1144 3.76202 15.7817 3.11615 14.2224C2.47028 12.6631 2.3013 10.9474 2.63056 9.29206C2.95982 7.63675 3.77254 6.11626 4.96595 4.92285C6.15935 3.72944 7.67985 2.91672 9.33515 2.58746C10.9905 2.2582 12.7062 2.42719 14.2655 3.07306C15.8248 3.71892 17.1575 4.81266 18.0951 6.21596C19.0328 7.61926 19.5333 9.26909 19.5333 10.9568C19.5333 13.22 18.6342 15.3905 17.0339 16.9908C15.4336 18.5911 13.2631 19.4902 10.9999 19.4902Z" />
43+
</clipPath>
44+
</defs>
2045
</svg>
2146
);

‎dashboard/log-analyzer/src/components/logs/LogDetailPanel.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,13 @@ export function LogDetailPanel({ log, onClose, isOpen }: LogDetailPanelProps) {
4040
<div className="pr-8 flex justify-end mb-6">
4141
<Button
4242
variant="ghost"
43-
size="icon"
44-
className="btn-icon"
43+
className="group relative h-10 w-10 flex items-center justify-center hover:w-auto hover:py-3 hover:px-3.5 hover:bg-[#357AF6] hover:rounded-lg rounded-lg bg-white border border-[var(--border-gray)] hover:border-white hover:bg-transparent"
4544
onClick={onClose}
4645
>
47-
<X className="h-4 w-4" />
46+
<span className="text-sm text-white opacity-0 group-hover:opacity-100 whitespace-nowrap">
47+
Close
48+
</span>
49+
<X className="h-4 w-4 text-gray-500 group-hover:text-white absolute group-hover:relative" />
4850
</Button>
4951
</div>
5052

‎dashboard/log-analyzer/src/components/logs/LogTable.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
} from "@/components/ui/table";
1111
import { type LogEntry } from "@/lib/types";
1212
import { useState } from 'react';
13-
import { Loader2 } from "lucide-react";
13+
import { LoaderIcon } from "@/components/icons";
1414
import { FileIcon } from "@/components/icons";
1515
import React from 'react';
1616
import { LogDetailPanel } from "./LogDetailPanel";
@@ -44,7 +44,7 @@ export function LogTable({ logs = [], onSort, sortColumn, sortOrder, observerRef
4444
};
4545

4646
return (
47-
<div className="flex flex-col h-full">
47+
<div className="flex flex-col h-full relative">
4848
{isLoading ? (
4949
<div className="h-full">
5050
<div className="space-y-[29px]">
@@ -87,7 +87,7 @@ export function LogTable({ logs = [], onSort, sortColumn, sortOrder, observerRef
8787
<div className="mb-[18px]">
8888
<FileIcon />
8989
</div>
90-
<span className="text-[#000000]">No data for the selected filter</span>
90+
<span className="text-[#000000] text-[16px]">No data for the selected filter</span>
9191
</div>
9292
) : (
9393
<div className="flex-1 overflow-auto min-h-0">
@@ -97,15 +97,7 @@ export function LogTable({ logs = [], onSort, sortColumn, sortOrder, observerRef
9797
{logs?.map((log, index) => (
9898
<React.Fragment key={log.request_id || index}>
9999
{hasMore && index === logs.length - 6 && (
100-
<tr ref={observerRef}>
101-
<td colSpan={8} className="p-0">
102-
{isLoadingMore && (
103-
<div className="w-full flex items-center justify-center py-4">
104-
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
105-
</div>
106-
)}
107-
</td>
108-
</tr>
100+
<tr ref={observerRef} />
109101
)}
110102
<TableRow
111103
className="table-row cursor-pointer hover:bg-muted/50"
@@ -166,6 +158,14 @@ export function LogTable({ logs = [], onSort, sortColumn, sortOrder, observerRef
166158
setSelectedLog(null);
167159
}}
168160
/>
161+
{isLoadingMore && (
162+
<div className="absolute bottom-16 left-1/2 transform -translate-x-1/2 bg-[#357AF6] rounded-xl p-4">
163+
<div className="flex items-center gap-2">
164+
<LoaderIcon color="#FFFFFF" />
165+
<span className="text-sm text-white">Loading more...</span>
166+
</div>
167+
</div>
168+
)}
169169
</div>
170170
);
171171
}

‎dashboard/log-analyzer/src/components/logs/LogTableWithPagination.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useSearchParams, useRouter } from 'next/navigation';
88
import { useInfiniteScroll } from '@/hooks/useInfiniteScroll';
99
import { useDefaultDateRange } from "@/hooks/useDefaultDateRange";
1010
import { getTotalRowCount } from "@/lib/utils";
11+
import { Info } from "lucide-react";
1112

1213
interface LogTableWithPaginationProps {
1314
pageSize: number;
@@ -19,6 +20,7 @@ export function LogTableWithPagination({ pageSize }: LogTableWithPaginationProps
1920
const [hasMore, setHasMore] = useState(true);
2021
const [isLoading, setIsLoading] = useState(false);
2122
const [isLoadingMore, setIsLoadingMore] = useState(false);
23+
const [error, setError] = useState<string | null>(null);
2224
const searchParams = useSearchParams();
2325
const router = useRouter();
2426

@@ -79,6 +81,7 @@ export function LogTableWithPagination({ pageSize }: LogTableWithPaginationProps
7981
const loadInitialData = async () => {
8082
try {
8183
setIsLoading(true);
84+
setError(null);
8285
const filters = getFilters();
8386
const useExplorer = await shouldUseExplorerApi(filters);
8487
const api = useExplorer ? logExplorerApi : logAnalysisApi;
@@ -94,10 +97,11 @@ export function LogTableWithPagination({ pageSize }: LogTableWithPaginationProps
9497
setLogs(response.data || []);
9598
setPage(0);
9699
setHasMore(true);
97-
setIsLoading(false);
98100
} catch (error) {
99-
console.error('Error loading logs:', error);
101+
setError(error instanceof Error ? error.message : 'An error occurred while loading logs');
100102
setHasMore(false);
103+
} finally {
104+
setIsLoading(false);
101105
}
102106
};
103107

@@ -110,7 +114,6 @@ export function LogTableWithPagination({ pageSize }: LogTableWithPaginationProps
110114
try {
111115
setIsLoadingMore(true);
112116
const nextPage = page + 1;
113-
console.log('Loading page:', nextPage);
114117

115118
const filters = getFilters();
116119
const useExplorer = await shouldUseExplorerApi(filters);
@@ -132,7 +135,7 @@ export function LogTableWithPagination({ pageSize }: LogTableWithPaginationProps
132135
setHasMore(true);
133136
}
134137
} catch (error) {
135-
console.error('Error loading more logs:', error);
138+
setError(error instanceof Error ? error.message : 'An error occurred while loading more logs');
136139
setHasMore(false);
137140
} finally {
138141
setIsLoadingMore(false);
@@ -143,6 +146,17 @@ export function LogTableWithPagination({ pageSize }: LogTableWithPaginationProps
143146

144147
useDefaultDateRange();
145148

149+
if (error) {
150+
return (
151+
<div className="h-full p-6">
152+
<div className="h-full flex flex-col items-center justify-center gap-4 bg-white rounded-[4px]">
153+
<Info className="h-10 w-10 text-[var(--error)]" />
154+
<span className="text-[var(--error)] text-base font-semibold">{error}</span>
155+
</div>
156+
</div>
157+
);
158+
}
159+
146160
return (
147161
<div className="h-full p-6">
148162
<LogTable

0 commit comments

Comments
 (0)