Add React UI with Execution Explorer, auth, and standalone deployment
- Scaffold Vite + React + TypeScript frontend in ui/ with full design
system (dark/light themes) matching the HTML mockups
- Implement Execution Explorer page: search filters, results table with
expandable processor tree and exchange detail sidebar, pagination
- Add UI authentication: UiAuthController (login/refresh endpoints),
JWT filter handles ui: subject prefix, CORS configuration
- Shared components: StatusPill, DurationBar, StatCard, AppBadge,
FilterChip, Pagination — all using CSS Modules with design tokens
- API client layer: openapi-fetch with auth middleware, TanStack Query
hooks for search/detail/snapshot queries, Zustand for state
- Standalone deployment: Nginx Dockerfile, K8s Deployment + ConfigMap +
NodePort (30080), runtime config.js for API base URL
- Embedded mode: maven-resources-plugin copies ui/dist into JAR static
resources, SPA forward controller for client-side routing
- CI/CD: UI build step, Docker build/push for server-ui image, K8s
deploy step for UI, UI credential secrets
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 13:59:22 +01:00
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
|
|
|
import { api } from '../client';
|
2026-03-14 15:33:37 +01:00
|
|
|
import type { SearchRequest } from '../types';
|
Add React UI with Execution Explorer, auth, and standalone deployment
- Scaffold Vite + React + TypeScript frontend in ui/ with full design
system (dark/light themes) matching the HTML mockups
- Implement Execution Explorer page: search filters, results table with
expandable processor tree and exchange detail sidebar, pagination
- Add UI authentication: UiAuthController (login/refresh endpoints),
JWT filter handles ui: subject prefix, CORS configuration
- Shared components: StatusPill, DurationBar, StatCard, AppBadge,
FilterChip, Pagination — all using CSS Modules with design tokens
- API client layer: openapi-fetch with auth middleware, TanStack Query
hooks for search/detail/snapshot queries, Zustand for state
- Standalone deployment: Nginx Dockerfile, K8s Deployment + ConfigMap +
NodePort (30080), runtime config.js for API base URL
- Embedded mode: maven-resources-plugin copies ui/dist into JAR static
resources, SPA forward controller for client-side routing
- CI/CD: UI build step, Docker build/push for server-ui image, K8s
deploy step for UI, UI credential secrets
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 13:59:22 +01:00
|
|
|
|
2026-03-13 22:19:59 +01:00
|
|
|
export function useExecutionStats(timeFrom: string | undefined, timeTo: string | undefined) {
|
2026-03-13 17:34:11 +01:00
|
|
|
return useQuery({
|
2026-03-13 22:19:59 +01:00
|
|
|
queryKey: ['executions', 'stats', timeFrom, timeTo],
|
2026-03-13 17:34:11 +01:00
|
|
|
queryFn: async () => {
|
2026-03-13 22:19:59 +01:00
|
|
|
const { data, error } = await api.GET('/search/stats', {
|
|
|
|
|
params: {
|
|
|
|
|
query: {
|
|
|
|
|
from: timeFrom!,
|
|
|
|
|
to: timeTo || undefined,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
2026-03-13 17:34:11 +01:00
|
|
|
if (error) throw new Error('Failed to load stats');
|
2026-03-14 15:33:37 +01:00
|
|
|
return data!;
|
2026-03-13 17:34:11 +01:00
|
|
|
},
|
2026-03-13 22:19:59 +01:00
|
|
|
enabled: !!timeFrom,
|
|
|
|
|
placeholderData: (prev) => prev,
|
2026-03-13 17:34:11 +01:00
|
|
|
refetchInterval: 10_000,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2026-03-13 18:54:24 +01:00
|
|
|
export function useSearchExecutions(filters: SearchRequest, live = false) {
|
Add React UI with Execution Explorer, auth, and standalone deployment
- Scaffold Vite + React + TypeScript frontend in ui/ with full design
system (dark/light themes) matching the HTML mockups
- Implement Execution Explorer page: search filters, results table with
expandable processor tree and exchange detail sidebar, pagination
- Add UI authentication: UiAuthController (login/refresh endpoints),
JWT filter handles ui: subject prefix, CORS configuration
- Shared components: StatusPill, DurationBar, StatCard, AppBadge,
FilterChip, Pagination — all using CSS Modules with design tokens
- API client layer: openapi-fetch with auth middleware, TanStack Query
hooks for search/detail/snapshot queries, Zustand for state
- Standalone deployment: Nginx Dockerfile, K8s Deployment + ConfigMap +
NodePort (30080), runtime config.js for API base URL
- Embedded mode: maven-resources-plugin copies ui/dist into JAR static
resources, SPA forward controller for client-side routing
- CI/CD: UI build step, Docker build/push for server-ui image, K8s
deploy step for UI, UI credential secrets
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 13:59:22 +01:00
|
|
|
return useQuery({
|
|
|
|
|
queryKey: ['executions', 'search', filters],
|
|
|
|
|
queryFn: async () => {
|
|
|
|
|
const { data, error } = await api.POST('/search/executions', {
|
|
|
|
|
body: filters,
|
|
|
|
|
});
|
|
|
|
|
if (error) throw new Error('Search failed');
|
2026-03-14 15:33:37 +01:00
|
|
|
return data!;
|
Add React UI with Execution Explorer, auth, and standalone deployment
- Scaffold Vite + React + TypeScript frontend in ui/ with full design
system (dark/light themes) matching the HTML mockups
- Implement Execution Explorer page: search filters, results table with
expandable processor tree and exchange detail sidebar, pagination
- Add UI authentication: UiAuthController (login/refresh endpoints),
JWT filter handles ui: subject prefix, CORS configuration
- Shared components: StatusPill, DurationBar, StatCard, AppBadge,
FilterChip, Pagination — all using CSS Modules with design tokens
- API client layer: openapi-fetch with auth middleware, TanStack Query
hooks for search/detail/snapshot queries, Zustand for state
- Standalone deployment: Nginx Dockerfile, K8s Deployment + ConfigMap +
NodePort (30080), runtime config.js for API base URL
- Embedded mode: maven-resources-plugin copies ui/dist into JAR static
resources, SPA forward controller for client-side routing
- CI/CD: UI build step, Docker build/push for server-ui image, K8s
deploy step for UI, UI credential secrets
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 13:59:22 +01:00
|
|
|
},
|
|
|
|
|
placeholderData: (prev) => prev,
|
2026-03-13 18:54:24 +01:00
|
|
|
refetchInterval: live ? 5_000 : false,
|
Add React UI with Execution Explorer, auth, and standalone deployment
- Scaffold Vite + React + TypeScript frontend in ui/ with full design
system (dark/light themes) matching the HTML mockups
- Implement Execution Explorer page: search filters, results table with
expandable processor tree and exchange detail sidebar, pagination
- Add UI authentication: UiAuthController (login/refresh endpoints),
JWT filter handles ui: subject prefix, CORS configuration
- Shared components: StatusPill, DurationBar, StatCard, AppBadge,
FilterChip, Pagination — all using CSS Modules with design tokens
- API client layer: openapi-fetch with auth middleware, TanStack Query
hooks for search/detail/snapshot queries, Zustand for state
- Standalone deployment: Nginx Dockerfile, K8s Deployment + ConfigMap +
NodePort (30080), runtime config.js for API base URL
- Embedded mode: maven-resources-plugin copies ui/dist into JAR static
resources, SPA forward controller for client-side routing
- CI/CD: UI build step, Docker build/push for server-ui image, K8s
deploy step for UI, UI credential secrets
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 13:59:22 +01:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2026-03-13 18:20:08 +01:00
|
|
|
export function useStatsTimeseries(timeFrom: string | undefined, timeTo: string | undefined) {
|
|
|
|
|
return useQuery({
|
|
|
|
|
queryKey: ['executions', 'timeseries', timeFrom, timeTo],
|
|
|
|
|
queryFn: async () => {
|
|
|
|
|
const { data, error } = await api.GET('/search/stats/timeseries', {
|
|
|
|
|
params: {
|
|
|
|
|
query: {
|
|
|
|
|
from: timeFrom!,
|
|
|
|
|
to: timeTo || undefined,
|
|
|
|
|
buckets: 24,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
if (error) throw new Error('Failed to load timeseries');
|
2026-03-14 15:33:37 +01:00
|
|
|
return data!;
|
2026-03-13 18:20:08 +01:00
|
|
|
},
|
|
|
|
|
enabled: !!timeFrom,
|
2026-03-13 22:00:44 +01:00
|
|
|
placeholderData: (prev) => prev,
|
2026-03-13 18:20:08 +01:00
|
|
|
refetchInterval: 30_000,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
Add React UI with Execution Explorer, auth, and standalone deployment
- Scaffold Vite + React + TypeScript frontend in ui/ with full design
system (dark/light themes) matching the HTML mockups
- Implement Execution Explorer page: search filters, results table with
expandable processor tree and exchange detail sidebar, pagination
- Add UI authentication: UiAuthController (login/refresh endpoints),
JWT filter handles ui: subject prefix, CORS configuration
- Shared components: StatusPill, DurationBar, StatCard, AppBadge,
FilterChip, Pagination — all using CSS Modules with design tokens
- API client layer: openapi-fetch with auth middleware, TanStack Query
hooks for search/detail/snapshot queries, Zustand for state
- Standalone deployment: Nginx Dockerfile, K8s Deployment + ConfigMap +
NodePort (30080), runtime config.js for API base URL
- Embedded mode: maven-resources-plugin copies ui/dist into JAR static
resources, SPA forward controller for client-side routing
- CI/CD: UI build step, Docker build/push for server-ui image, K8s
deploy step for UI, UI credential secrets
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 13:59:22 +01:00
|
|
|
export function useExecutionDetail(executionId: string | null) {
|
|
|
|
|
return useQuery({
|
|
|
|
|
queryKey: ['executions', 'detail', executionId],
|
|
|
|
|
queryFn: async () => {
|
|
|
|
|
const { data, error } = await api.GET('/executions/{executionId}', {
|
|
|
|
|
params: { path: { executionId: executionId! } },
|
|
|
|
|
});
|
|
|
|
|
if (error) throw new Error('Failed to load execution detail');
|
2026-03-14 15:33:37 +01:00
|
|
|
return data!;
|
Add React UI with Execution Explorer, auth, and standalone deployment
- Scaffold Vite + React + TypeScript frontend in ui/ with full design
system (dark/light themes) matching the HTML mockups
- Implement Execution Explorer page: search filters, results table with
expandable processor tree and exchange detail sidebar, pagination
- Add UI authentication: UiAuthController (login/refresh endpoints),
JWT filter handles ui: subject prefix, CORS configuration
- Shared components: StatusPill, DurationBar, StatCard, AppBadge,
FilterChip, Pagination — all using CSS Modules with design tokens
- API client layer: openapi-fetch with auth middleware, TanStack Query
hooks for search/detail/snapshot queries, Zustand for state
- Standalone deployment: Nginx Dockerfile, K8s Deployment + ConfigMap +
NodePort (30080), runtime config.js for API base URL
- Embedded mode: maven-resources-plugin copies ui/dist into JAR static
resources, SPA forward controller for client-side routing
- CI/CD: UI build step, Docker build/push for server-ui image, K8s
deploy step for UI, UI credential secrets
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 13:59:22 +01:00
|
|
|
},
|
|
|
|
|
enabled: !!executionId,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function useProcessorSnapshot(
|
|
|
|
|
executionId: string | null,
|
|
|
|
|
index: number | null,
|
|
|
|
|
) {
|
|
|
|
|
return useQuery({
|
|
|
|
|
queryKey: ['executions', 'snapshot', executionId, index],
|
|
|
|
|
queryFn: async () => {
|
|
|
|
|
const { data, error } = await api.GET(
|
|
|
|
|
'/executions/{executionId}/processors/{index}/snapshot',
|
|
|
|
|
{
|
|
|
|
|
params: {
|
|
|
|
|
path: { executionId: executionId!, index: index! },
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
if (error) throw new Error('Failed to load snapshot');
|
2026-03-14 15:33:37 +01:00
|
|
|
return data!;
|
Add React UI with Execution Explorer, auth, and standalone deployment
- Scaffold Vite + React + TypeScript frontend in ui/ with full design
system (dark/light themes) matching the HTML mockups
- Implement Execution Explorer page: search filters, results table with
expandable processor tree and exchange detail sidebar, pagination
- Add UI authentication: UiAuthController (login/refresh endpoints),
JWT filter handles ui: subject prefix, CORS configuration
- Shared components: StatusPill, DurationBar, StatCard, AppBadge,
FilterChip, Pagination — all using CSS Modules with design tokens
- API client layer: openapi-fetch with auth middleware, TanStack Query
hooks for search/detail/snapshot queries, Zustand for state
- Standalone deployment: Nginx Dockerfile, K8s Deployment + ConfigMap +
NodePort (30080), runtime config.js for API base URL
- Embedded mode: maven-resources-plugin copies ui/dist into JAR static
resources, SPA forward controller for client-side routing
- CI/CD: UI build step, Docker build/push for server-ui image, K8s
deploy step for UI, UI credential secrets
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 13:59:22 +01:00
|
|
|
},
|
|
|
|
|
enabled: !!executionId && index !== null,
|
|
|
|
|
});
|
|
|
|
|
}
|