Skip to content

Commit ba1147f

Browse files
gokulvijclaude
gokulvij
and
claude
committed
Update Status components and Dashboard implementation
- Update StatusController and StatusService - Modify status service API - Refactor StatusTable and Dashboard components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent d50a2fd commit ba1147f

File tree

5 files changed

+45
-82
lines changed

5 files changed

+45
-82
lines changed

‎ThingConnect.Pulse.Server/Controllers/StatusController.cs‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -22,36 +22,21 @@ public StatusController(IStatusService statusService, ILogger<StatusController>
2222
/// </summary>
2323
/// <param name="group">Optional group ID filter</param>
2424
/// <param name="search">Optional search string (matches name or host)</param>
25-
/// <param name="page">Page number (1-based)</param>
26-
/// <param name="pageSize">Number of items per page</param>
2725
/// <returns>Paged list of endpoint status with sparkline data</returns>
2826
[HttpGet("live")]
29-
public async Task<ActionResult<PagedLiveDto>> GetLiveStatusAsync(
27+
public async Task<ActionResult<LiveStatusItemDto>> GetLiveStatusAsync(
3028
[FromQuery] string? group = null,
31-
[FromQuery] string? search = null,
32-
[FromQuery] int page = 1,
33-
[FromQuery] int pageSize = 50)
29+
[FromQuery] string? search = null)
3430
{
3531
try
3632
{
37-
// Validate pagination parameters
38-
if (page < 1)
39-
{
40-
return BadRequest(new { message = "Page must be >= 1" });
41-
}
42-
43-
if (pageSize < 1 || pageSize > 500)
44-
{
45-
return BadRequest(new { message = "PageSize must be between 1 and 500" });
46-
}
47-
4833
_logger.LogInformation("Getting live status - group: {Group}, search: {Search}, page: {Page}, pageSize: {PageSize}",
49-
group, search, page, pageSize);
50-
51-
PagedLiveDto result = await _statusService.GetLiveStatusAsync(group, search, page, pageSize);
34+
group, search);
5235

53-
return Ok(result);
54-
}
36+
var result = await _statusService.GetLiveStatusAsync(group, search);
37+
38+
return Ok(new { items = result });
39+
}
5540
catch (Exception ex)
5641
{
5742
_logger.LogError(ex, "Error getting live status");

‎ThingConnect.Pulse.Server/Services/StatusService.cs‎

Lines changed: 10 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ namespace ThingConnect.Pulse.Server.Services;
88

99
public interface IStatusService
1010
{
11-
Task<PagedLiveDto> GetLiveStatusAsync(string? group, string? search, int page, int pageSize);
11+
Task<List<LiveStatusItemDto>> GetLiveStatusAsync(string? group, string? search);
1212
}
1313

1414
public sealed class StatusService : IStatusService
@@ -24,10 +24,9 @@ public StatusService(PulseDbContext context, ILogger<StatusService> logger, IMem
2424
_cache = cache;
2525
}
2626

27-
public async Task<PagedLiveDto> GetLiveStatusAsync(string? group, string? search, int page, int pageSize)
27+
public async Task<List<LiveStatusItemDto>> GetLiveStatusAsync(string? group, string? search)
2828
{
29-
_logger.LogDebug("Getting live status with filters: group={Group}, search={Search}, page={Page}, pageSize={PageSize}",
30-
group, search, page, pageSize);
29+
_logger.LogDebug("Getting live status with filters: group={Group}, search={Search}", group, search);
3130

3231
// Build base query for enabled endpoints
3332
IQueryable<Data.Endpoint> query = _context.Endpoints
@@ -56,11 +55,10 @@ public async Task<PagedLiveDto> GetLiveStatusAsync(string? group, string? search
5655

5756
// Apply pagination
5857
List<Data.Endpoint> endpoints = await query
59-
.OrderBy(e => e.GroupId)
60-
.ThenBy(e => e.Name)
61-
.Skip((page - 1) * pageSize)
62-
.Take(pageSize)
63-
.ToListAsync();
58+
.OrderBy(e => e.GroupId)
59+
.ThenBy(e => e.Name)
60+
.ToListAsync();
61+
6462

6563
// Get live status for each endpoint
6664
var items = new List<LiveStatusItemDto>();
@@ -100,16 +98,7 @@ public async Task<PagedLiveDto> GetLiveStatusAsync(string? group, string? search
10098
});
10199
}
102100

103-
return new PagedLiveDto
104-
{
105-
Meta = new PageMetaDto
106-
{
107-
Page = page,
108-
PageSize = pageSize,
109-
Total = totalCount
110-
},
111-
Items = items
112-
};
101+
return items;
113102
}
114103

115104
/// <summary>
@@ -118,7 +107,7 @@ public async Task<PagedLiveDto> GetLiveStatusAsync(string? group, string? search
118107
public async Task<List<Data.Group>> GetGroupsCachedAsync()
119108
{
120109
const string cacheKey = "all_groups";
121-
110+
122111
if (_cache.TryGetValue(cacheKey, out List<Data.Group>? cachedGroups) && cachedGroups != null)
123112
{
124113
return cachedGroups;
@@ -131,7 +120,7 @@ public async Task<PagedLiveDto> GetLiveStatusAsync(string? group, string? search
131120

132121
// Cache for 5 minutes since groups don't change frequently
133122
_cache.Set(cacheKey, groups, TimeSpan.FromMinutes(5));
134-
123+
135124
_logger.LogDebug("Cached {Count} groups", groups.Count);
136125
return groups;
137126
}

‎thingconnect.pulse.client/src/api/services/status.service.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,6 @@ export class StatusService {
1313
searchParams.append('search', params.search);
1414
}
1515

16-
if (params.page) {
17-
searchParams.append('page', params.page.toString());
18-
}
19-
20-
if (params.pageSize) {
21-
searchParams.append('pageSize', params.pageSize.toString());
22-
}
23-
2416
const queryString = searchParams.toString();
2517
const url = `/api/status/live${queryString ? `?${queryString}` : ''}`;
2618

‎thingconnect.pulse.client/src/components/status/StatusTable.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Text, Badge, HStack } from '@chakra-ui/react';
1+
import { Box, Text, Badge, HStack, Center, Spinner } from '@chakra-ui/react';
22
import { Table } from '@chakra-ui/react';
33
import { formatDistanceToNow } from 'date-fns';
44
import { useNavigate } from 'react-router-dom';
@@ -10,7 +10,7 @@ interface StatusTableProps {
1010
isLoading?: boolean;
1111
}
1212

13-
export function StatusTable({ items }: StatusTableProps) {
13+
export function StatusTable({ items , isLoading }: StatusTableProps) {
1414
const navigate = useNavigate();
1515

1616
const getStatusColor = (status: string) => {
@@ -42,9 +42,14 @@ export function StatusTable({ items }: StatusTableProps) {
4242
const handleRowClick = (id: string) => {
4343
void navigate(`/endpoints/${id}`);
4444
};
45-
45+
console.log("isLoading in StatusTable:",items);
4646
return (
4747
<Box borderRadius="md" overflow="hidden">
48+
{isLoading ? (
49+
<Center py={10}>
50+
<Spinner size="lg" color="blue.500"/>
51+
</Center>
52+
) : (
4853
<Table.Root size="md" borderWidth={0} width="full">
4954
<Table.Header>
5055
<Table.Row fontSize="12px" fontWeight="bold" textTransform="uppercase">
@@ -73,7 +78,7 @@ export function StatusTable({ items }: StatusTableProps) {
7378
</Table.Header>
7479

7580
<Table.Body>
76-
{items.map(item => (
81+
{items?.map(item => (
7782
<Table.Row
7883
key={item.endpoint.id}
7984
cursor="pointer"
@@ -133,6 +138,7 @@ export function StatusTable({ items }: StatusTableProps) {
133138
))}
134139
</Table.Body>
135140
</Table.Root>
141+
)}
136142
</Box>
137143
);
138144
}

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

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useState, useMemo } from 'react';
33
import { useStatusQuery } from '@/hooks/useStatusQuery';
44
import { StatusFilters } from '@/components/status/StatusFilters';
55
import { StatusTable } from '@/components/status/StatusTable';
6-
import { StatusPagination } from '@/components/status/StatusPagination';
76
import { Page } from '@/components/layout/Page';
87
import { PageSection } from '@/components/layout/PageSection';
98
import type { LiveStatusParams } from '@/api/types';
@@ -33,10 +32,7 @@ function isGroupedByStatusAndGroup(
3332
}
3433

3534
export default function Dashboard() {
36-
const [filters, setFilters] = useState<LiveStatusParams>({
37-
page: 1,
38-
pageSize: 50,
39-
});
35+
const [filters, setFilters] = useState<LiveStatusParams>({});
4036

4137
const [searchTerm, setSearchTerm] = useState('');
4238

@@ -45,6 +41,7 @@ export default function Dashboard() {
4541
search: searchTerm,
4642
});
4743

44+
console.log(data)
4845
// Grouping options state
4946
const [groupByOptions, setGroupByOptions] = useState<string[]>([]);
5047

@@ -169,18 +166,12 @@ export default function Dashboard() {
169166
setFilters(newFilters);
170167
};
171168

172-
const handlePageChange = (page: number) => {
173-
setFilters(prev => ({ ...prev, page }));
174-
};
175-
176-
const handlePageSizeChange = (pageSize: number) => {
177-
setFilters(prev => ({ ...prev, pageSize, page: 1 }));
178-
};
179-
180169
const handleToggleGroupBy = (option: string, isSelected: boolean) => {
181-
setGroupByOptions(prev =>
182-
isSelected
183-
? (prev.includes(option) ? prev : [...prev, option])
170+
setGroupByOptions(prev =>
171+
isSelected
172+
? prev.includes(option)
173+
? prev
174+
: [...prev, option]
184175
: prev.filter(o => o !== option)
185176
);
186177
};
@@ -295,7 +286,10 @@ export default function Dashboard() {
295286
as='span'
296287
bg={`${statusColorMap[status as 'up' | 'down' | 'flapping']}.200`}
297288
color={`${statusColorMap[status as 'up' | 'down' | 'flapping']}.600`}
298-
_dark={{ bg: `${statusColorMap[status as 'up' | 'down' | 'flapping']}.700`, color: `${statusColorMap[status as 'up' | 'down' | 'flapping']}.200` }}
289+
_dark={{
290+
bg: `${statusColorMap[status as 'up' | 'down' | 'flapping']}.700`,
291+
color: `${statusColorMap[status as 'up' | 'down' | 'flapping']}.200`,
292+
}}
299293
textTransform='uppercase'
300294
borderRadius='30px'
301295
px={4}
@@ -346,7 +340,7 @@ export default function Dashboard() {
346340
<Accordion.ItemContent borderLeftWidth={1} borderRadius={2} ml={5}>
347341
<Accordion.ItemBody pl={6} py={0}>
348342
{items && items.length > 0 ? (
349-
<StatusTable items={items} isLoading={isLoading} />
343+
<StatusTable items={items} isLoading={isLoading } />
350344
) : (
351345
<Box
352346
textAlign='center'
@@ -450,7 +444,10 @@ export default function Dashboard() {
450444
justifyContent='center'
451445
display='inline-flex'
452446
color={`${statusColorMap[status as 'up' | 'down' | 'flapping']}.600`}
453-
_dark={{ bg: `${statusColorMap[status as 'up' | 'down' | 'flapping']}.700`, color: `${statusColorMap[status as 'up' | 'down' | 'flapping']}.200` }}
447+
_dark={{
448+
bg: `${statusColorMap[status as 'up' | 'down' | 'flapping']}.700`,
449+
color: `${statusColorMap[status as 'up' | 'down' | 'flapping']}.200`,
450+
}}
454451
>
455452
{status}
456453
</Flex>
@@ -487,19 +484,13 @@ export default function Dashboard() {
487484
})}
488485
</Accordion.Root>
489486
) : (
490-
<StatusTable items={Object.values(groupedEndpoints).flat()} isLoading={isLoading} />
487+
<StatusTable items={Object.values(groupedEndpoints).flat()} isLoading={isLoading } />
491488
)
492489
) : (
493490
<StatusTable items={data.items} isLoading={isLoading} />
494491
)}
495-
496-
{/* <StatusPagination
497-
meta={data.meta}
498-
onPageChange={handlePageChange}
499-
onPageSizeChange={handlePageSizeChange}
500-
/> */}
501492
</PageSection>
502493
)}
503494
</Page>
504495
);
505-
}
496+
}

0 commit comments

Comments
 (0)