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';
|
2026-03-25 10:01:14 +01:00
|
|
|
import { useLiveQuery } from './use-refresh-interval';
|
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
|
|
|
|
Fix route diagram open issues: bugs, visual polish, interactive features
Batch 1 — Bug fixes:
- #51: Pass group+routeId to stats/timeseries API for route-scoped data
- #55: Propagate processor FAILED status to diagram error node highlighting
Batch 2 — Visual polish:
- #56: Brighter canvas background with amber/cyan radial gradients
- #57: Stronger glow filters (stdDeviation 3→6, opacity 0.4→0.6)
- #58: Uniform 200×40px leaf nodes with label truncation at 22 chars
- #59: Diagram legend (node types, edge types, overlay indicators)
- #64: SVG <title> tooltips on all nodes showing type, status, duration
Batch 3 — Interactive features:
- #60: Draggable minimap viewport (click-to-center, drag-to-pan)
- #62: CSS View Transitions slide animation, back arrow, Backspace key
Batch 4 — Advanced features:
- #50: Execution picker dropdown scoped to group+routeId
- #49: Iteration count badge (×N) on compound nodes
- #63: Route header stats (Executions Today, Success Rate, Avg, P99)
Closes #49 #50 #51 #55 #56 #57 #58 #59 #60 #62 #63 #64
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-14 22:14:23 +01:00
|
|
|
export function useExecutionStats(
|
|
|
|
|
timeFrom: string | undefined,
|
|
|
|
|
timeTo: string | undefined,
|
|
|
|
|
routeId?: string,
|
refactor: rename group/groupName to application/applicationName
The execution-related "group" concept actually represents the
application name. Rename all Java fields, API parameters, and frontend
types from groupName→applicationName and group→application for clarity.
- Java records: ExecutionSummary, ExecutionDetail, ExecutionDocument,
ExecutionRecord, ProcessorRecord
- API params: SearchRequest.group→application, SearchController
@RequestParam group→application
- Services: IngestionService, DetailService, SearchIndexer, StatsStore
- Frontend: schema.d.ts, Dashboard, ExchangeDetail, RouteDetail,
executions query hooks
Database column names (group_name) and OpenSearch field names are
unchanged — only the API-facing Java/TS field names are renamed.
RBAC group references (groups table, GroupRepository, GroupsTab) are
a separate domain concept and are NOT affected by this change.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 21:21:38 +01:00
|
|
|
application?: string,
|
2026-04-04 15:42:26 +02:00
|
|
|
environment?: string,
|
Fix route diagram open issues: bugs, visual polish, interactive features
Batch 1 — Bug fixes:
- #51: Pass group+routeId to stats/timeseries API for route-scoped data
- #55: Propagate processor FAILED status to diagram error node highlighting
Batch 2 — Visual polish:
- #56: Brighter canvas background with amber/cyan radial gradients
- #57: Stronger glow filters (stdDeviation 3→6, opacity 0.4→0.6)
- #58: Uniform 200×40px leaf nodes with label truncation at 22 chars
- #59: Diagram legend (node types, edge types, overlay indicators)
- #64: SVG <title> tooltips on all nodes showing type, status, duration
Batch 3 — Interactive features:
- #60: Draggable minimap viewport (click-to-center, drag-to-pan)
- #62: CSS View Transitions slide animation, back arrow, Backspace key
Batch 4 — Advanced features:
- #50: Execution picker dropdown scoped to group+routeId
- #49: Iteration count badge (×N) on compound nodes
- #63: Route header stats (Executions Today, Success Rate, Avg, P99)
Closes #49 #50 #51 #55 #56 #57 #58 #59 #60 #62 #63 #64
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-14 22:14:23 +01:00
|
|
|
) {
|
2026-03-25 10:01:14 +01:00
|
|
|
const live = useLiveQuery(10_000);
|
2026-03-13 17:34:11 +01:00
|
|
|
return useQuery({
|
2026-04-04 15:42:26 +02:00
|
|
|
queryKey: ['executions', 'stats', timeFrom, timeTo, routeId, application, environment],
|
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,
|
Fix route diagram open issues: bugs, visual polish, interactive features
Batch 1 — Bug fixes:
- #51: Pass group+routeId to stats/timeseries API for route-scoped data
- #55: Propagate processor FAILED status to diagram error node highlighting
Batch 2 — Visual polish:
- #56: Brighter canvas background with amber/cyan radial gradients
- #57: Stronger glow filters (stdDeviation 3→6, opacity 0.4→0.6)
- #58: Uniform 200×40px leaf nodes with label truncation at 22 chars
- #59: Diagram legend (node types, edge types, overlay indicators)
- #64: SVG <title> tooltips on all nodes showing type, status, duration
Batch 3 — Interactive features:
- #60: Draggable minimap viewport (click-to-center, drag-to-pan)
- #62: CSS View Transitions slide animation, back arrow, Backspace key
Batch 4 — Advanced features:
- #50: Execution picker dropdown scoped to group+routeId
- #49: Iteration count badge (×N) on compound nodes
- #63: Route header stats (Executions Today, Success Rate, Avg, P99)
Closes #49 #50 #51 #55 #56 #57 #58 #59 #60 #62 #63 #64
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-14 22:14:23 +01:00
|
|
|
routeId: routeId || undefined,
|
refactor: rename group/groupName to application/applicationName
The execution-related "group" concept actually represents the
application name. Rename all Java fields, API parameters, and frontend
types from groupName→applicationName and group→application for clarity.
- Java records: ExecutionSummary, ExecutionDetail, ExecutionDocument,
ExecutionRecord, ProcessorRecord
- API params: SearchRequest.group→application, SearchController
@RequestParam group→application
- Services: IngestionService, DetailService, SearchIndexer, StatsStore
- Frontend: schema.d.ts, Dashboard, ExchangeDetail, RouteDetail,
executions query hooks
Database column names (group_name) and OpenSearch field names are
unchanged — only the API-facing Java/TS field names are renamed.
RBAC group references (groups table, GroupRepository, GroupsTab) are
a separate domain concept and are NOT affected by this change.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 21:21:38 +01:00
|
|
|
application: application || undefined,
|
2026-04-04 15:42:26 +02:00
|
|
|
environment: environment || undefined,
|
2026-03-13 22:19:59 +01:00
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
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-25 10:01:14 +01:00
|
|
|
enabled: !!timeFrom && live.enabled,
|
2026-03-13 22:19:59 +01:00
|
|
|
placeholderData: (prev) => prev,
|
2026-03-25 10:01:14 +01:00
|
|
|
refetchInterval: live.refetchInterval,
|
2026-03-13 17:34:11 +01:00
|
|
|
});
|
2026-04-01 21:39:27 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function useAttributeKeys() {
|
|
|
|
|
return useQuery({
|
|
|
|
|
queryKey: ['search', 'attribute-keys'],
|
|
|
|
|
queryFn: async () => {
|
|
|
|
|
const token = (await import('../../auth/auth-store')).useAuthStore.getState().accessToken;
|
|
|
|
|
const { config } = await import('../../config');
|
|
|
|
|
const res = await fetch(`${config.apiBaseUrl}/search/attributes/keys`, {
|
|
|
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
|
|
|
});
|
|
|
|
|
if (!res.ok) throw new Error('Failed to load attribute keys');
|
|
|
|
|
return res.json() as Promise<string[]>;
|
|
|
|
|
},
|
|
|
|
|
staleTime: 60_000,
|
|
|
|
|
});
|
2026-03-13 17:34:11 +01:00
|
|
|
}
|
|
|
|
|
|
2026-03-13 18:54:24 +01:00
|
|
|
export function useSearchExecutions(filters: SearchRequest, live = false) {
|
2026-03-25 10:01:14 +01:00
|
|
|
const liveQuery = useLiveQuery(5_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
|
|
|
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-25 10:01:14 +01:00
|
|
|
enabled: live ? liveQuery.enabled : true,
|
|
|
|
|
refetchInterval: live ? liveQuery.refetchInterval : 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
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
Fix route diagram open issues: bugs, visual polish, interactive features
Batch 1 — Bug fixes:
- #51: Pass group+routeId to stats/timeseries API for route-scoped data
- #55: Propagate processor FAILED status to diagram error node highlighting
Batch 2 — Visual polish:
- #56: Brighter canvas background with amber/cyan radial gradients
- #57: Stronger glow filters (stdDeviation 3→6, opacity 0.4→0.6)
- #58: Uniform 200×40px leaf nodes with label truncation at 22 chars
- #59: Diagram legend (node types, edge types, overlay indicators)
- #64: SVG <title> tooltips on all nodes showing type, status, duration
Batch 3 — Interactive features:
- #60: Draggable minimap viewport (click-to-center, drag-to-pan)
- #62: CSS View Transitions slide animation, back arrow, Backspace key
Batch 4 — Advanced features:
- #50: Execution picker dropdown scoped to group+routeId
- #49: Iteration count badge (×N) on compound nodes
- #63: Route header stats (Executions Today, Success Rate, Avg, P99)
Closes #49 #50 #51 #55 #56 #57 #58 #59 #60 #62 #63 #64
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-14 22:14:23 +01:00
|
|
|
export function useStatsTimeseries(
|
|
|
|
|
timeFrom: string | undefined,
|
|
|
|
|
timeTo: string | undefined,
|
|
|
|
|
routeId?: string,
|
refactor: rename group/groupName to application/applicationName
The execution-related "group" concept actually represents the
application name. Rename all Java fields, API parameters, and frontend
types from groupName→applicationName and group→application for clarity.
- Java records: ExecutionSummary, ExecutionDetail, ExecutionDocument,
ExecutionRecord, ProcessorRecord
- API params: SearchRequest.group→application, SearchController
@RequestParam group→application
- Services: IngestionService, DetailService, SearchIndexer, StatsStore
- Frontend: schema.d.ts, Dashboard, ExchangeDetail, RouteDetail,
executions query hooks
Database column names (group_name) and OpenSearch field names are
unchanged — only the API-facing Java/TS field names are renamed.
RBAC group references (groups table, GroupRepository, GroupsTab) are
a separate domain concept and are NOT affected by this change.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 21:21:38 +01:00
|
|
|
application?: string,
|
2026-04-04 15:42:26 +02:00
|
|
|
environment?: string,
|
Fix route diagram open issues: bugs, visual polish, interactive features
Batch 1 — Bug fixes:
- #51: Pass group+routeId to stats/timeseries API for route-scoped data
- #55: Propagate processor FAILED status to diagram error node highlighting
Batch 2 — Visual polish:
- #56: Brighter canvas background with amber/cyan radial gradients
- #57: Stronger glow filters (stdDeviation 3→6, opacity 0.4→0.6)
- #58: Uniform 200×40px leaf nodes with label truncation at 22 chars
- #59: Diagram legend (node types, edge types, overlay indicators)
- #64: SVG <title> tooltips on all nodes showing type, status, duration
Batch 3 — Interactive features:
- #60: Draggable minimap viewport (click-to-center, drag-to-pan)
- #62: CSS View Transitions slide animation, back arrow, Backspace key
Batch 4 — Advanced features:
- #50: Execution picker dropdown scoped to group+routeId
- #49: Iteration count badge (×N) on compound nodes
- #63: Route header stats (Executions Today, Success Rate, Avg, P99)
Closes #49 #50 #51 #55 #56 #57 #58 #59 #60 #62 #63 #64
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-14 22:14:23 +01:00
|
|
|
) {
|
2026-03-25 10:01:14 +01:00
|
|
|
const live = useLiveQuery(30_000);
|
2026-03-13 18:20:08 +01:00
|
|
|
return useQuery({
|
2026-04-04 15:42:26 +02:00
|
|
|
queryKey: ['executions', 'timeseries', timeFrom, timeTo, routeId, application, environment],
|
2026-03-13 18:20:08 +01:00
|
|
|
queryFn: async () => {
|
|
|
|
|
const { data, error } = await api.GET('/search/stats/timeseries', {
|
|
|
|
|
params: {
|
|
|
|
|
query: {
|
|
|
|
|
from: timeFrom!,
|
|
|
|
|
to: timeTo || undefined,
|
|
|
|
|
buckets: 24,
|
Fix route diagram open issues: bugs, visual polish, interactive features
Batch 1 — Bug fixes:
- #51: Pass group+routeId to stats/timeseries API for route-scoped data
- #55: Propagate processor FAILED status to diagram error node highlighting
Batch 2 — Visual polish:
- #56: Brighter canvas background with amber/cyan radial gradients
- #57: Stronger glow filters (stdDeviation 3→6, opacity 0.4→0.6)
- #58: Uniform 200×40px leaf nodes with label truncation at 22 chars
- #59: Diagram legend (node types, edge types, overlay indicators)
- #64: SVG <title> tooltips on all nodes showing type, status, duration
Batch 3 — Interactive features:
- #60: Draggable minimap viewport (click-to-center, drag-to-pan)
- #62: CSS View Transitions slide animation, back arrow, Backspace key
Batch 4 — Advanced features:
- #50: Execution picker dropdown scoped to group+routeId
- #49: Iteration count badge (×N) on compound nodes
- #63: Route header stats (Executions Today, Success Rate, Avg, P99)
Closes #49 #50 #51 #55 #56 #57 #58 #59 #60 #62 #63 #64
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-14 22:14:23 +01:00
|
|
|
routeId: routeId || undefined,
|
refactor: rename group/groupName to application/applicationName
The execution-related "group" concept actually represents the
application name. Rename all Java fields, API parameters, and frontend
types from groupName→applicationName and group→application for clarity.
- Java records: ExecutionSummary, ExecutionDetail, ExecutionDocument,
ExecutionRecord, ProcessorRecord
- API params: SearchRequest.group→application, SearchController
@RequestParam group→application
- Services: IngestionService, DetailService, SearchIndexer, StatsStore
- Frontend: schema.d.ts, Dashboard, ExchangeDetail, RouteDetail,
executions query hooks
Database column names (group_name) and OpenSearch field names are
unchanged — only the API-facing Java/TS field names are renamed.
RBAC group references (groups table, GroupRepository, GroupsTab) are
a separate domain concept and are NOT affected by this change.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 21:21:38 +01:00
|
|
|
application: application || undefined,
|
2026-04-04 15:42:26 +02:00
|
|
|
environment: environment || undefined,
|
2026-03-13 18:20:08 +01:00
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
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
|
|
|
},
|
2026-03-25 10:01:14 +01:00
|
|
|
enabled: !!timeFrom && live.enabled,
|
2026-03-13 22:00:44 +01:00
|
|
|
placeholderData: (prev) => prev,
|
2026-03-25 10:01:14 +01:00
|
|
|
refetchInterval: live.refetchInterval,
|
2026-03-13 18:20:08 +01:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
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,
|
|
|
|
|
});
|
|
|
|
|
}
|
2026-03-27 18:54:01 +01:00
|
|
|
|
|
|
|
|
export function useProcessorSnapshotById(
|
|
|
|
|
executionId: string | null,
|
|
|
|
|
processorId: string | null,
|
|
|
|
|
) {
|
|
|
|
|
return useQuery({
|
|
|
|
|
queryKey: ['executions', 'snapshot-by-id', executionId, processorId],
|
|
|
|
|
queryFn: async () => {
|
|
|
|
|
const { data, error } = await api.GET(
|
|
|
|
|
'/executions/{executionId}/processors/by-id/{processorId}/snapshot',
|
|
|
|
|
{
|
|
|
|
|
params: {
|
|
|
|
|
path: { executionId: executionId!, processorId: processorId! },
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
if (error) throw new Error('Failed to load snapshot');
|
|
|
|
|
return data!;
|
|
|
|
|
},
|
|
|
|
|
enabled: !!executionId && !!processorId,
|
|
|
|
|
});
|
|
|
|
|
}
|