Files
cameleer-server/ui/src/api/queries/catalog.ts
hsiegeln 51a4317440
All checks were successful
CI / cleanup-branch (push) Has been skipped
CI / build (push) Successful in 1m26s
CI / docker (push) Successful in 1m14s
CI / deploy-feature (push) Has been skipped
CI / deploy (push) Successful in 38s
fix: optimistically remove dismissed app from sidebar cache
Sets query cache immediately on dismiss success so the sidebar updates
without waiting for the catalog refetch to complete.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-12 17:05:04 +02:00

113 lines
3.5 KiB
TypeScript

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { config } from '../../config';
import { useAuthStore } from '../../auth/auth-store';
import { useRefreshInterval } from './use-refresh-interval';
export interface CatalogRoute {
routeId: string;
exchangeCount: number;
lastSeen: string | null;
fromEndpointUri: string | null;
routeState: string | null;
}
export interface CatalogAgent {
instanceId: string;
displayName: string;
state: string;
tps: number;
}
export interface DeploymentSummary {
status: string;
replicas: string;
version: number;
}
export interface CatalogApp {
slug: string;
displayName: string;
managed: boolean;
environmentSlug: string;
health: 'live' | 'stale' | 'dead' | 'offline' | 'running' | 'error';
healthTooltip: string;
agentCount: number;
routes: CatalogRoute[];
agents: CatalogAgent[];
exchangeCount: number;
deployment: DeploymentSummary | null;
}
export function useCatalog(environment?: string) {
const refetchInterval = useRefreshInterval(15_000);
return useQuery({
queryKey: ['catalog', environment],
queryFn: async () => {
const token = useAuthStore.getState().accessToken;
const params = new URLSearchParams();
if (environment) params.set('environment', environment);
const qs = params.toString();
const res = await fetch(`${config.apiBaseUrl}/catalog${qs ? `?${qs}` : ''}`, {
headers: {
Authorization: `Bearer ${token}`,
'X-Cameleer-Protocol-Version': '1',
},
});
if (!res.ok) throw new Error('Failed to load catalog');
return res.json() as Promise<CatalogApp[]>;
},
placeholderData: (prev) => prev,
refetchInterval,
});
}
export function useDismissApp() {
const qc = useQueryClient();
return useMutation({
mutationFn: async (applicationId: string) => {
const token = useAuthStore.getState().accessToken;
const res = await fetch(`${config.apiBaseUrl}/catalog/${applicationId}`, {
method: 'DELETE',
headers: {
Authorization: `Bearer ${token}`,
'X-Cameleer-Protocol-Version': '1',
},
});
if (res.status === 409) throw new Error('Cannot dismiss — live agents are still connected');
if (!res.ok) throw new Error(`Failed to dismiss: ${res.status}`);
},
onSuccess: (_data, applicationId) => {
// Optimistically remove from cache before refetch
qc.setQueriesData<CatalogApp[]>({ queryKey: ['catalog'] }, (old) =>
old ? old.filter((a) => a.slug !== applicationId) : old
);
qc.invalidateQueries({ queryKey: ['catalog'] });
},
});
}
export function useRouteMetrics(from?: string, to?: string, appId?: string, environment?: string) {
const refetchInterval = useRefreshInterval(30_000);
return useQuery({
queryKey: ['routes', 'metrics', from, to, appId, environment],
queryFn: async () => {
const token = useAuthStore.getState().accessToken;
const params = new URLSearchParams();
if (from) params.set('from', from);
if (to) params.set('to', to);
if (appId) params.set('appId', appId);
if (environment) params.set('environment', environment);
const res = await fetch(`${config.apiBaseUrl}/routes/metrics?${params}`, {
headers: {
Authorization: `Bearer ${token}`,
'X-Cameleer-Protocol-Version': '1',
},
});
if (!res.ok) throw new Error('Failed to load route metrics');
return res.json();
},
placeholderData: (prev: unknown) => prev,
refetchInterval,
});
}