Skip to content

Commit 53eb08c

Browse files
hemanandrhemanandr
authored
fix: handle loading state for live status query in history page and code formatted
2 parents 0b3353b + ca3462c commit 53eb08c

25 files changed

+521
-515
lines changed

‎thingconnect.pulse.client/.claude/settings.local.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
{
22
"permissions": {
3-
"allow": [
4-
"Bash(git add:*)"
5-
],
3+
"allow": ["Bash(git add:*)"],
64
"deny": [],
75
"ask": []
86
}
9-
}
7+
}

‎thingconnect.pulse.client/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
<link rel="icon" type="image/png" href="/favicon.ico" />
99
<link rel="shortcut icon" href="/favicon.ico" />
1010
<style>
11-
html, body {
11+
html,
12+
body {
1213
margin: 0;
1314
padding: 0;
1415
height: 100vh;

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

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
import { useMemo } from 'react';
2-
import { SimpleGrid, Stat, HStack, Badge, Icon, Skeleton } from '@chakra-ui/react';
2+
import {
3+
SimpleGrid,
4+
Stat,
5+
HStack,
6+
Badge,
7+
Icon,
8+
Skeleton,
9+
Box,
10+
VStack,
11+
Text,
12+
} from '@chakra-ui/react';
313
import type { BucketType } from '@/types/bucket';
414
import { Database } from 'lucide-react';
515
import type { AvailabilityChartProps } from './AvailabilityChart';
@@ -93,7 +103,32 @@ export function AvailabilityStats({
93103
);
94104
}
95105

96-
if (!stats) return null;
106+
if (!stats) {
107+
return (
108+
<SimpleGrid columns={{ base: 1, sm: 2, md: 5 }} gap={2}>
109+
{Array.from({ length: 4 }).map((_, i) => (
110+
<Box
111+
key={i}
112+
w='100%'
113+
h='100px'
114+
borderWidth='1px'
115+
rounded='md'
116+
display='flex'
117+
alignItems='center'
118+
justifyContent='center'
119+
bg='gray.50'
120+
_dark={{ bg: 'gray.800' }}
121+
>
122+
<VStack gap={1}>
123+
<Text fontSize='sm' color='gray.600' _dark={{ color: 'gray.300' }}>
124+
No historical data available
125+
</Text>
126+
</VStack>
127+
</Box>
128+
))}
129+
</SimpleGrid>
130+
);
131+
}
97132

98133
return (
99134
<SimpleGrid columns={{ base: 1, sm: 2, md: 5 }} gap={2}>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,8 @@ export function HistoryTable({ data, bucket, pageSize = 20, isLoading }: History
126126
border='2px dashed'
127127
borderColor='gray.300'
128128
_dark={{ bg: 'gray.800', borderColor: 'gray.600' }}
129+
h='full'
130+
alignContent={'center'}
129131
>
130132
<VStack gap={3}>
131133
<Clock size={32} color='#9CA3AF' />

‎thingconnect.pulse.client/src/components/common/HelpButton.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ export function HelpButton({ helpUrl, tooltip = 'View Help', size = 'sm' }: Help
1818
<IconButton
1919
aria-label={tooltip}
2020
size={size}
21-
variant="ghost"
22-
colorPalette="blue"
21+
variant='ghost'
22+
colorPalette='blue'
2323
onClick={handleHelpClick}
2424
_hover={{ bg: 'blue.50', _dark: { bg: 'blue.900' } }}
2525
>
2626
<HelpCircle size={16} />
2727
</IconButton>
2828
</Tooltip>
2929
);
30-
}
30+
}

‎thingconnect.pulse.client/src/components/config/ConfigurationEditor.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -370,14 +370,14 @@ export function ConfigurationEditor({ onConfigurationApplied }: ConfigurationEdi
370370
/>
371371
)}
372372
{applyResult && (
373-
<Alert
374-
flex='1'
375-
status='success'
373+
<Alert
374+
flex='1'
375+
status='success'
376376
title={
377-
applyResult.warnings?.length ?
378-
applyResult.warnings[0] :
379-
`Configuration applied: ${applyResult.added} added, ${applyResult.updated} updated, ${applyResult.removed} removed`
380-
}
377+
applyResult.warnings?.length
378+
? applyResult.warnings[0]
379+
: `Configuration applied: ${applyResult.added} added, ${applyResult.updated} updated, ${applyResult.removed} removed`
380+
}
381381
/>
382382
)}
383383
</HStack>

‎thingconnect.pulse.client/src/components/form/FormField.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ interface FormFieldProps extends Omit<InputProps, 'type'> {
1212
export function FormField({ label, error, children, type = 'text', ...props }: FormFieldProps) {
1313
if (children) {
1414
return (
15-
<Box w="full">
15+
<Box w='full'>
1616
{label && (
17-
<Text mb={2} color="gray.700" fontWeight="medium" fontSize="sm">
17+
<Text mb={2} color='gray.700' fontWeight='medium' fontSize='sm'>
1818
{label}
1919
</Text>
2020
)}
2121
{children}
2222
{error && (
23-
<Text mt={1} color="red.500" fontSize="xs" fontWeight="medium">
23+
<Text mt={1} color='red.500' fontSize='xs' fontWeight='medium'>
2424
{error}
2525
</Text>
2626
)}
@@ -29,26 +29,26 @@ export function FormField({ label, error, children, type = 'text', ...props }: F
2929
}
3030

3131
return (
32-
<Box w="full">
32+
<Box w='full'>
3333
{label && (
34-
<Text mb={2} color="gray.700" fontWeight="medium" fontSize="sm">
34+
<Text mb={2} color='gray.700' fontWeight='medium' fontSize='sm'>
3535
{label}
3636
</Text>
3737
)}
3838
<Input
3939
type={type}
40-
size="md"
41-
borderColor="gray.400"
42-
color="gray.800"
43-
_placeholder={{ color: "gray.500", fontWeight: "medium" }}
44-
_focus={{ borderColor: "#076bb3", boxShadow: "0 0 0 1px #076bb3" }}
40+
size='md'
41+
borderColor='gray.400'
42+
color='gray.800'
43+
_placeholder={{ color: 'gray.500', fontWeight: 'medium' }}
44+
_focus={{ borderColor: '#076bb3', boxShadow: '0 0 0 1px #076bb3' }}
4545
{...props}
4646
/>
4747
{error && (
48-
<Text mt={1} color="red.500" fontSize="xs" fontWeight="medium">
48+
<Text mt={1} color='red.500' fontSize='xs' fontWeight='medium'>
4949
{error}
5050
</Text>
5151
)}
5252
</Box>
5353
);
54-
}
54+
}

‎thingconnect.pulse.client/src/components/form/LoadingButton.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,21 @@ export const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
1313
<Button
1414
ref={ref}
1515
disabled={disabled || isLoading}
16-
bg="#076bb3"
17-
color="white"
18-
_hover={{ bg: "#065a96" }}
19-
_active={{ bg: "#054d82" }}
16+
bg='#076bb3'
17+
color='white'
18+
_hover={{ bg: '#065a96' }}
19+
_active={{ bg: '#054d82' }}
2020
_disabled={{
21-
bg: "gray.400",
22-
color: "white",
23-
cursor: "not-allowed",
24-
_hover: { bg: "gray.400" }
21+
bg: 'gray.400',
22+
color: 'white',
23+
cursor: 'not-allowed',
24+
_hover: { bg: 'gray.400' },
2525
}}
2626
{...props}
2727
>
2828
{isLoading ? (
2929
<>
30-
<Spinner size="sm" mr={2} />
30+
<Spinner size='sm' mr={2} />
3131
{loadingText || children}
3232
</>
3333
) : (
@@ -38,4 +38,4 @@ export const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
3838
}
3939
);
4040

41-
LoadingButton.displayName = 'LoadingButton';
41+
LoadingButton.displayName = 'LoadingButton';

‎thingconnect.pulse.client/src/components/form/PasswordInput.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,29 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
1010
const [showPassword, setShowPassword] = useState(false);
1111

1212
return (
13-
<Box position="relative" w="full">
13+
<Box position='relative' w='full'>
1414
<Input
1515
ref={ref}
1616
type={showPassword ? 'text' : 'password'}
17-
pr="3rem"
18-
size="md"
19-
borderColor="gray.400"
20-
color="gray.800"
21-
_placeholder={{ color: "gray.500", fontWeight: "medium" }}
22-
_focus={{ borderColor: "#076bb3", boxShadow: "0 0 0 1px #076bb3" }}
17+
pr='3rem'
18+
size='md'
19+
borderColor='gray.400'
20+
color='gray.800'
21+
_placeholder={{ color: 'gray.500', fontWeight: 'medium' }}
22+
_focus={{ borderColor: '#076bb3', boxShadow: '0 0 0 1px #076bb3' }}
2323
{...props}
2424
/>
2525
<Button
26-
variant="ghost"
27-
size="sm"
28-
position="absolute"
29-
right="0.5rem"
30-
top="50%"
31-
transform="translateY(-50%)"
26+
variant='ghost'
27+
size='sm'
28+
position='absolute'
29+
right='0.5rem'
30+
top='50%'
31+
transform='translateY(-50%)'
3232
onClick={() => setShowPassword(!showPassword)}
3333
aria-label={showPassword ? 'Hide password' : 'Show password'}
34-
color="gray.600"
35-
_hover={{ color: "gray.800" }}
34+
color='gray.600'
35+
_hover={{ color: 'gray.800' }}
3636
>
3737
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
3838
</Button>
@@ -41,4 +41,4 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
4141
}
4242
);
4343

44-
PasswordInput.displayName = 'PasswordInput';
44+
PasswordInput.displayName = 'PasswordInput';

‎thingconnect.pulse.client/src/components/layout/AuthLayout.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,36 @@ interface AuthLayoutProps {
1010
export function AuthLayout({ children, showBenefits = true }: AuthLayoutProps) {
1111
if (!showBenefits) {
1212
return (
13-
<Box h="100vh" bg="white" w="full" fontFamily="'Open Sans', sans-serif" overflow="hidden">
14-
<Box p={{ base: 8, lg: 16 }} display="flex" flexDirection="column" justifyContent="center" h="100vh" overflow="auto">
13+
<Box h='100vh' bg='white' w='full' fontFamily="'Open Sans', sans-serif" overflow='hidden'>
14+
<Box
15+
p={{ base: 8, lg: 16 }}
16+
display='flex'
17+
flexDirection='column'
18+
justifyContent='center'
19+
h='100vh'
20+
overflow='auto'
21+
>
1522
{children}
1623
</Box>
1724
</Box>
1825
);
1926
}
2027

2128
return (
22-
<Box h="100vh" bg="white" w="full" fontFamily="'Open Sans', sans-serif" overflow="hidden">
23-
<Grid templateColumns={{ base: "1fr", lg: "1fr 1fr" }} h="100vh">
29+
<Box h='100vh' bg='white' w='full' fontFamily="'Open Sans', sans-serif" overflow='hidden'>
30+
<Grid templateColumns={{ base: '1fr', lg: '1fr 1fr' }} h='100vh'>
2431
<BenefitsSection />
25-
<Box p={{ base: 8, lg: 16 }} display="flex" flexDirection="column" justifyContent="center" bg="white" overflow="auto">
32+
<Box
33+
p={{ base: 8, lg: 16 }}
34+
display='flex'
35+
flexDirection='column'
36+
justifyContent='center'
37+
bg='white'
38+
overflow='auto'
39+
>
2640
{children}
2741
</Box>
2842
</Grid>
2943
</Box>
3044
);
31-
}
45+
}

0 commit comments

Comments
 (0)