Skip to content

Commit fc475b7

Browse files
abishekveabishekve
committed
outage UI updated
1 parent b32ff05 commit fc475b7

File tree

4 files changed

+66
-87
lines changed

4 files changed

+66
-87
lines changed

‎thingconnect.pulse.client/src/components/OutageList.tsx‎

Lines changed: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { Text, VStack, Badge, HStack, Card } from '@chakra-ui/react';
1+
import { Text, VStack, Badge, HStack, Card, Skeleton } from '@chakra-ui/react';
22
import { CloudOff } from 'lucide-react';
33
import { formatDistanceToNow } from 'date-fns';
44
import type { Outage } from '@/api/types';
55

66
interface OutagesListProps {
7-
outages: Outage[];
7+
outages: Outage[] | undefined;
8+
isLoading: boolean;
89
}
910

1011
function formatDuration(seconds?: number | null): string {
@@ -18,8 +19,8 @@ function formatDuration(seconds?: number | null): string {
1819
return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
1920
}
2021

21-
export function OutagesList({ outages }: OutagesListProps) {
22-
if (outages.length === 0) {
22+
export function OutagesList({ outages, isLoading }: OutagesListProps) {
23+
if (outages?.length === 0) {
2324
return (
2425
<VStack
2526
justify='center'
@@ -43,49 +44,54 @@ export function OutagesList({ outages }: OutagesListProps) {
4344
return text.charAt(0).toUpperCase() + text.slice(1);
4445
}
4546

47+
const sortedOutages = outages
48+
? [...outages].sort((a, b) => {
49+
if (!a.endedTs && b.endedTs) return -1;
50+
if (a.endedTs && !b.endedTs) return 1;
51+
return new Date(b.startedTs).getTime() - new Date(a.startedTs).getTime();
52+
})
53+
: [];
54+
4655
return (
4756
<VStack gap={4} align='stretch'>
48-
{outages.slice(0, 5).map((outage, index) => (
49-
<Card.Root key={`${outage.startedTs}-${index}`} size={'sm'}>
50-
<Card.Body p={3}>
51-
<VStack gap={2} align='stretch'>
52-
<HStack justify='space-between'>
53-
<Text fontSize='sm' fontWeight='medium'>
54-
{capitalizeFirstLetter(
55-
formatDistanceToNow(new Date(outage.startedTs), { addSuffix: true })
56-
)}
57-
</Text>
58-
<Badge colorPalette={outage.endedTs ? 'green' : 'red'} size='sm'>
59-
{outage.endedTs ? 'Resolved' : 'Ongoing'}
60-
</Badge>
61-
</HStack>
62-
<HStack justify='space-between'>
63-
<Text fontSize='sm' color='gray.600'>
64-
Duration: {formatDuration(outage.durationS)}
65-
</Text>
66-
<Text fontSize='sm' color='gray.600'>
67-
Ended:{' '}
68-
{outage.endedTs
69-
? capitalizeFirstLetter(
70-
formatDistanceToNow(new Date(outage.endedTs), { addSuffix: true })
71-
)
72-
: 'Unknown'}
73-
</Text>
74-
</HStack>
75-
{outage.lastError && (
76-
<Text fontSize='sm' color='red.600' _dark={{ color: 'red.400' }} lineClamp={2}>
77-
{outage.lastError}
78-
</Text>
79-
)}
80-
</VStack>
81-
</Card.Body>
82-
</Card.Root>
57+
{sortedOutages.map((outage, index) => (
58+
<Skeleton loading={isLoading}>
59+
<Card.Root key={`${outage.startedTs}-${index}`} size={'sm'}>
60+
<Card.Body p={3}>
61+
<VStack gap={2} align='stretch'>
62+
<HStack justify='space-between'>
63+
<Text fontSize='sm' fontWeight='medium'>
64+
{capitalizeFirstLetter(
65+
formatDistanceToNow(new Date(outage.startedTs), { addSuffix: true })
66+
)}
67+
</Text>
68+
<Badge colorPalette={outage.endedTs ? 'green' : 'red'} size='sm'>
69+
{outage.endedTs ? 'Resolved' : 'Ongoing'}
70+
</Badge>
71+
</HStack>
72+
<HStack justify='space-between'>
73+
<Text fontSize='sm' color='gray.600'>
74+
Duration: {formatDuration(outage.durationS)}
75+
</Text>
76+
<Text fontSize='sm' color='gray.600'>
77+
Ended:{' '}
78+
{outage.endedTs
79+
? capitalizeFirstLetter(
80+
formatDistanceToNow(new Date(outage.endedTs), { addSuffix: true })
81+
)
82+
: 'Unknown'}
83+
</Text>
84+
</HStack>
85+
{outage.lastError && (
86+
<Text fontSize='sm' color='red.600' _dark={{ color: 'red.400' }} lineClamp={2}>
87+
{outage.lastError}
88+
</Text>
89+
)}
90+
</VStack>
91+
</Card.Body>
92+
</Card.Root>
93+
</Skeleton>
8394
))}
84-
{outages.length > 5 && (
85-
<Text fontSize='sm' color='gray.500' textAlign='center'>
86-
Showing 5 of {outages.length} recent outages
87-
</Text>
88-
)}
8995
</VStack>
9096
);
9197
}

‎thingconnect.pulse.client/src/pages/EndpointDetail.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -390,7 +390,7 @@ export default function EndpointDetail() {
390390
</Text>
391391
</Card.Header>
392392
<Card.Body flex={1} minH={0} p={3} overflow='auto'>
393-
<OutagesList outages={outages} />
393+
<OutagesList outages={outages} isLoading={isLoading} />
394394
</Card.Body>
395395
</Card.Root>
396396
</SimpleGrid>

‎thingconnect.pulse.client/src/pages/History.tsx‎

Lines changed: 14 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,7 @@ import { HistoryService } from '@/api/services/history.service';
3232
import { StatusService } from '@/api/services/status.service';
3333
import { Tooltip } from '@/components/ui/tooltip';
3434
import { AvailabilityStats } from '@/components/history/AvailabilityStats';
35-
import { OutagesTimeline } from '@/components/history/OutageTimeline';
36-
import { OutagesTable } from '@/components/history/OutagesTable';
35+
import { OutagesList } from '@/components/OutageList';
3736

3837
export default function History() {
3938
const analytics = useAnalytics();
@@ -298,9 +297,8 @@ export default function History() {
298297
<Tabs.List display='flex' flexDirection='row' _dark={{ bg: 'gray.700' }}>
299298
<Tabs.Trigger value='chart'>Availability Chart</Tabs.Trigger>
300299
<Tabs.Trigger value='history'>Historical Data</Tabs.Trigger>
301-
<Tabs.Trigger value='outages'>Outages</Tabs.Trigger>
302300
</Tabs.List>
303-
<Tabs.Content value='chart' flex={1} display='flex' minH={0}>
301+
<Tabs.Content value='chart' flex={1} display='flex' minH={0} gap={2}>
304302
<Card.Root flex={1} display='flex' flexDirection='column' size={'sm'}>
305303
<Card.Header px={3} pt={3}>
306304
<HStack gap={2}>
@@ -321,31 +319,6 @@ export default function History() {
321319
/>
322320
</Card.Body>
323321
</Card.Root>
324-
</Tabs.Content>
325-
<Tabs.Content value='history' flex={1} display='flex' minH={0}>
326-
<Card.Root flex={1} display='flex' flexDirection='column' overflow='hidden' size={'sm'}>
327-
<Card.Header px={3} pt={3}>
328-
<HStack gap={2}>
329-
<AlertCircle size={20} />
330-
<Text fontWeight='medium' fontSize='sm'>
331-
Historical Data
332-
</Text>
333-
<Text fontSize='sm' color='gray.600' _dark={{ color: 'gray.400' }}>
334-
({selectedEndpointName})
335-
</Text>
336-
</HStack>
337-
</Card.Header>
338-
<Card.Body flex={1} display='flex' flexDirection='column' minH={0} p={3}>
339-
<HistoryTable
340-
data={historyData}
341-
bucket={bucket}
342-
pageSize={20}
343-
isLoading={isHistoryDataLoading || isLiveDataLoading}
344-
/>
345-
</Card.Body>
346-
</Card.Root>
347-
</Tabs.Content>
348-
<Tabs.Content value='outages' flex={1} display='flex' minH={0} gap={2}>
349322
<Card.Root flex={1} display='flex' flexDirection='column' overflow='hidden' size={'sm'}>
350323
<Card.Header px={3} pt={3}>
351324
<HStack gap={2}>
@@ -366,30 +339,30 @@ export default function History() {
366339
p={3}
367340
overflow={'auto'}
368341
>
369-
<OutagesTimeline outages={historyData?.outages} isLoading={isHistoryDataLoading} />
342+
<OutagesList outages={historyData?.outages} isLoading={isHistoryDataLoading} />
370343
</Card.Body>
371344
</Card.Root>
345+
</Tabs.Content>
346+
<Tabs.Content value='history' flex={1} display='flex' minH={0}>
372347
<Card.Root flex={1} display='flex' flexDirection='column' overflow='hidden' size={'sm'}>
373348
<Card.Header px={3} pt={3}>
374349
<HStack gap={2}>
375-
<Zap size={20} />
350+
<AlertCircle size={20} />
376351
<Text fontWeight='medium' fontSize='sm'>
377-
Outage History
352+
Historical Data
378353
</Text>
379354
<Text fontSize='sm' color='gray.600' _dark={{ color: 'gray.400' }}>
380355
({selectedEndpointName})
381356
</Text>
382357
</HStack>
383358
</Card.Header>
384-
<Card.Body
385-
flex={1}
386-
display='flex'
387-
flexDirection='column'
388-
minH={0}
389-
p={3}
390-
overflow={'auto'}
391-
>
392-
<OutagesTable outages={historyData?.outages} isLoading={isHistoryDataLoading} />
359+
<Card.Body flex={1} display='flex' flexDirection='column' minH={0} p={3}>
360+
<HistoryTable
361+
data={historyData}
362+
bucket={bucket}
363+
pageSize={20}
364+
isLoading={isHistoryDataLoading || isLiveDataLoading}
365+
/>
393366
</Card.Body>
394367
</Card.Root>
395368
</Tabs.Content>

‎thingconnect.pulse.client/src/providers/QueryProvider.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function QueryProvider({ children }: QueryProviderProps) {
1313
return (
1414
<QueryClientProvider client={queryClient}>
1515
{children}
16-
{!showDevtools && <ReactQueryDevtools initialIsOpen={false} />}
16+
{showDevtools && <ReactQueryDevtools initialIsOpen={false} />}
1717
</QueryClientProvider>
1818
);
1919
}

0 commit comments

Comments
 (0)