feat: add environment filtering across all APIs and UI
Some checks failed
CI / cleanup-branch (push) Has been skipped
CI / build (push) Successful in 1m8s
CI / deploy (push) Has been cancelled
CI / deploy-feature (push) Has been cancelled
CI / docker (push) Has been cancelled

Backend: Added optional `environment` query parameter to catalog,
search, stats, timeseries, punchcard, top-errors, logs, and agents
endpoints. ClickHouse queries filter by environment when specified
(literal SQL for AggregatingMergeTree, ? binds for raw tables).
StatsStore interface methods all accept environment parameter.

UI: Added EnvironmentSelector component (compact native select).
LayoutShell extracts distinct environments from agent data and
passes selected environment to catalog and agent queries via URL
search param (?env=). TopBar shows current environment label.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-04 15:42:26 +02:00
parent babdc1d7a4
commit 694d0eef59
25 changed files with 439 additions and 160 deletions

View File

@@ -39,12 +39,12 @@ export interface GroupedTimeseries {
[key: string]: { buckets: TimeseriesBucket[] };
}
export function useTimeseriesByApp(from?: string, to?: string) {
export function useTimeseriesByApp(from?: string, to?: string, environment?: string) {
const refetchInterval = useRefreshInterval(30_000);
return useQuery({
queryKey: ['dashboard', 'timeseries-by-app', from, to],
queryKey: ['dashboard', 'timeseries-by-app', from, to, environment],
queryFn: () => fetchJson<GroupedTimeseries>('/search/stats/timeseries/by-app', {
from, to, buckets: '24',
from, to, buckets: '24', environment,
}),
enabled: !!from,
placeholderData: (prev: GroupedTimeseries | undefined) => prev,
@@ -54,12 +54,12 @@ export function useTimeseriesByApp(from?: string, to?: string) {
// ── Timeseries by route (L2 charts) ───────────────────────────────────
export function useTimeseriesByRoute(from?: string, to?: string, application?: string) {
export function useTimeseriesByRoute(from?: string, to?: string, application?: string, environment?: string) {
const refetchInterval = useRefreshInterval(30_000);
return useQuery({
queryKey: ['dashboard', 'timeseries-by-route', from, to, application],
queryKey: ['dashboard', 'timeseries-by-route', from, to, application, environment],
queryFn: () => fetchJson<GroupedTimeseries>('/search/stats/timeseries/by-route', {
from, to, application, buckets: '24',
from, to, application, buckets: '24', environment,
}),
enabled: !!from && !!application,
placeholderData: (prev: GroupedTimeseries | undefined) => prev,
@@ -79,12 +79,12 @@ export interface TopError {
lastSeen: string;
}
export function useTopErrors(from?: string, to?: string, application?: string, routeId?: string) {
export function useTopErrors(from?: string, to?: string, application?: string, routeId?: string, environment?: string) {
const refetchInterval = useRefreshInterval(10_000);
return useQuery({
queryKey: ['dashboard', 'top-errors', from, to, application, routeId],
queryKey: ['dashboard', 'top-errors', from, to, application, routeId, environment],
queryFn: () => fetchJson<TopError[]>('/search/errors/top', {
from, to, application, routeId, limit: '5',
from, to, application, routeId, limit: '5', environment,
}),
enabled: !!from,
placeholderData: (prev: TopError[] | undefined) => prev,
@@ -101,11 +101,11 @@ export interface PunchcardCell {
failedCount: number;
}
export function usePunchcard(application?: string) {
export function usePunchcard(application?: string, environment?: string) {
const refetchInterval = useRefreshInterval(60_000);
return useQuery({
queryKey: ['dashboard', 'punchcard', application],
queryFn: () => fetchJson<PunchcardCell[]>('/search/stats/punchcard', { application }),
queryKey: ['dashboard', 'punchcard', application, environment],
queryFn: () => fetchJson<PunchcardCell[]>('/search/stats/punchcard', { application, environment }),
placeholderData: (prev: PunchcardCell[] | undefined) => prev ?? [],
refetchInterval,
});