fix: auto-compute environment slug + respect environment filter globally

Part A: Environment creation slug is now auto-derived from display name and shown read-only (matching app creation pattern). Removes manual slug input. Part B: All data queries now pass the selected environment to backend: - Exchanges search, Dashboard L1/L2/L3 stats, Routes metrics, Route detail, correlation chains, and processor metrics all filter by selected environment. - Backend RouteMetricsController now accepts environment parameter for both route and processor metrics endpoints. Closes #XYZ Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-09 16:01:50 +02:00
parent f95a78a380
commit cb36d7936f
11 changed files with 81 additions and 43 deletions
--- a/ui/src/api/queries/catalog.ts
+++ b/ui/src/api/queries/catalog.ts
@@ -61,16 +61,17 @@ export function useCatalog(environment?: string) {
  });
 }

-export function useRouteMetrics(from?: string, to?: string, appId?: string) {
+export function useRouteMetrics(from?: string, to?: string, appId?: string, environment?: string) {
  const refetchInterval = useRefreshInterval(30_000);
  return useQuery({
-    queryKey: ['routes', 'metrics', from, to, appId],
+    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}`,
--- a/ui/src/api/queries/correlation.ts
+++ b/ui/src/api/queries/correlation.ts
@@ -1,13 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
 import { api } from '../client';

-export function useCorrelationChain(correlationId: string | null) {
+export function useCorrelationChain(correlationId: string | null, environment?: string) {
  return useQuery({
-    queryKey: ['correlation-chain', correlationId],
+    queryKey: ['correlation-chain', correlationId, environment],
    queryFn: async () => {
      const { data } = await api.POST('/search/executions', {
        body: {
          correlationId: correlationId!,
+          environment,
          limit: 20,
          sortField: 'startTime',
          sortDir: 'asc',
--- a/ui/src/api/queries/processor-metrics.ts
+++ b/ui/src/api/queries/processor-metrics.ts
@@ -3,15 +3,16 @@ import { config } from '../../config';
 import { useAuthStore } from '../../auth/auth-store';
 import { useRefreshInterval } from './use-refresh-interval';

-export function useProcessorMetrics(routeId: string | null, appId?: string) {
+export function useProcessorMetrics(routeId: string | null, appId?: string, environment?: string) {
  const refetchInterval = useRefreshInterval(30_000);
  return useQuery({
-    queryKey: ['processor-metrics', routeId, appId],
+    queryKey: ['processor-metrics', routeId, appId, environment],
    queryFn: async () => {
      const token = useAuthStore.getState().accessToken;
      const params = new URLSearchParams();
      if (routeId) params.set('routeId', routeId);
      if (appId) params.set('appId', appId);
+      if (environment) params.set('environment', environment);
      const res = await fetch(`${config.apiBaseUrl}/routes/metrics/processors?${params}`, {
        headers: {
          Authorization: `Bearer ${token}`,
--- a/ui/src/pages/Admin/EnvironmentsPage.tsx
+++ b/ui/src/pages/Admin/EnvironmentsPage.tsx
@@ -26,6 +26,14 @@ import {
 import type { Environment } from '../../api/queries/admin/environments';
 import styles from './UserManagement.module.css';

+function slugify(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .substring(0, 100);
+}
+
 export default function EnvironmentsPage() {
  const { toast } = useToast();
  const { data: environments = [], isLoading } = useEnvironments();
@@ -40,6 +48,10 @@ export default function EnvironmentsPage() {
  const [newDisplayName, setNewDisplayName] = useState('');
  const [newProduction, setNewProduction] = useState(false);

+  useEffect(() => {
+    setNewSlug(slugify(newDisplayName));
+  }, [newDisplayName]);
+
  // Mutations
  const createEnv = useCreateEnvironment();
  const updateEnv = useUpdateEnvironment();
@@ -153,19 +165,15 @@ export default function EnvironmentsPage() {
          <>
            {creating && (
              <div className={styles.createForm}>
-                <Input
-                  placeholder="Slug (e.g. staging) *"
-                  value={newSlug}
-                  onChange={(e) => setNewSlug(e.target.value)}
-                />
-                {duplicateSlug && (
-                  <span className={styles.errorText}>Slug already exists</span>
-                )}
                <Input
                  placeholder="Display name *"
                  value={newDisplayName}
                  onChange={(e) => setNewDisplayName(e.target.value)}
                />
+                <MonoText size="sm">{newSlug || '...'}</MonoText>
+                {duplicateSlug && (
+                  <span className={styles.errorText}>Slug already exists</span>
+                )}
                <label className={styles.securityRow}>
                  <Toggle checked={newProduction} onChange={() => setNewProduction(!newProduction)} />
                  Production environment
--- a/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/ui/src/pages/Dashboard/Dashboard.tsx
@@ -12,6 +12,7 @@ import type { Column } from '@cameleer/design-system'
 import {
  useSearchExecutions,
 } from '../../api/queries/executions'
+import { useEnvironmentStore } from '../../api/environment-store'
 import type { ExecutionSummary } from '../../api/types'
 import { attributeBadgeColor } from '../../utils/attribute-color'
 import { formatDuration, statusLabel } from '../../utils/format-utils'
@@ -172,6 +173,7 @@ export default function Dashboard({ onExchangeSelect, activeExchangeId }: Dashbo
    if (activeExchangeId !== undefined) setSelectedId(activeExchangeId);
  }, [activeExchangeId]);

+  const selectedEnv = useEnvironmentStore((s) => s.environment);
  const { timeRange, statusFilters } = useGlobalFilters()
  const timeFrom = timeRange.start.toISOString()
  const timeTo = timeRange.end.toISOString()
@@ -192,6 +194,7 @@ export default function Dashboard({ onExchangeSelect, activeExchangeId }: Dashbo
      timeTo,
      routeId: routeId || undefined,
      applicationId: appId || undefined,
+      environment: selectedEnv,
      status: statusParam,
      text: textFilter,
      sortField,
--- a/ui/src/pages/DashboardTab/DashboardL1.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL1.tsx
@@ -16,6 +16,7 @@ import { useGlobalFilters } from '@cameleer/design-system';
 import { useRouteMetrics } from '../../api/queries/catalog';
 import { useExecutionStats, useStatsTimeseries } from '../../api/queries/executions';
 import { useTimeseriesByApp, useTopErrors, useAllAppSettings, usePunchcard } from '../../api/queries/dashboard';
+import { useEnvironmentStore } from '../../api/environment-store';
 import type { AppSettings } from '../../api/queries/dashboard';
 import { Treemap } from './Treemap';
 import type { TreemapItem } from './Treemap';
@@ -290,17 +291,18 @@ function buildKpiItems(

 export default function DashboardL1() {
  const navigate = useNavigate();
+  const selectedEnv = useEnvironmentStore((s) => s.environment);
  const { timeRange } = useGlobalFilters();
  const timeFrom = timeRange.start.toISOString();
  const timeTo = timeRange.end.toISOString();
  const windowSeconds = (timeRange.end.getTime() - timeRange.start.getTime()) / 1000;

-  const { data: metrics } = useRouteMetrics(timeFrom, timeTo);
-  const { data: stats } = useExecutionStats(timeFrom, timeTo);
-  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo);
-  const { data: timeseriesByApp } = useTimeseriesByApp(timeFrom, timeTo);
-  const { data: topErrors } = useTopErrors(timeFrom, timeTo);
-  const { data: punchcardData } = usePunchcard();
+  const { data: metrics } = useRouteMetrics(timeFrom, timeTo, undefined, selectedEnv);
+  const { data: stats } = useExecutionStats(timeFrom, timeTo, undefined, undefined, selectedEnv);
+  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, undefined, undefined, selectedEnv);
+  const { data: timeseriesByApp } = useTimeseriesByApp(timeFrom, timeTo, selectedEnv);
+  const { data: topErrors } = useTopErrors(timeFrom, timeTo, undefined, undefined, selectedEnv);
+  const { data: punchcardData } = usePunchcard(undefined, selectedEnv);
  const { data: allAppSettings } = useAllAppSettings();

  // Build settings lookup map
--- a/ui/src/pages/DashboardTab/DashboardL2.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL2.tsx
@@ -20,6 +20,7 @@ import {
  useAppSettings,
  usePunchcard,
 } from '../../api/queries/dashboard';
+import { useEnvironmentStore } from '../../api/environment-store';
 import type { TopError } from '../../api/queries/dashboard';
 import { Treemap } from './Treemap';
 import type { TreemapItem } from './Treemap';
@@ -270,18 +271,19 @@ function buildKpiItems(
 export default function DashboardL2() {
  const { appId } = useParams<{ appId: string }>();
  const navigate = useNavigate();
+  const selectedEnv = useEnvironmentStore((s) => s.environment);
  const { timeRange } = useGlobalFilters();
  const timeFrom = timeRange.start.toISOString();
  const timeTo = timeRange.end.toISOString();
  const windowSeconds = (timeRange.end.getTime() - timeRange.start.getTime()) / 1000;

  // Data hooks
-  const { data: stats } = useExecutionStats(timeFrom, timeTo, undefined, appId);
-  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, undefined, appId);
-  const { data: metrics } = useRouteMetrics(timeFrom, timeTo, appId);
-  const { data: timeseriesByRoute } = useTimeseriesByRoute(timeFrom, timeTo, appId);
-  const { data: errors } = useTopErrors(timeFrom, timeTo, appId);
-  const { data: punchcardData } = usePunchcard(appId);
+  const { data: stats } = useExecutionStats(timeFrom, timeTo, undefined, appId, selectedEnv);
+  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, undefined, appId, selectedEnv);
+  const { data: metrics } = useRouteMetrics(timeFrom, timeTo, appId, selectedEnv);
+  const { data: timeseriesByRoute } = useTimeseriesByRoute(timeFrom, timeTo, appId, selectedEnv);
+  const { data: errors } = useTopErrors(timeFrom, timeTo, appId, undefined, selectedEnv);
+  const { data: punchcardData } = usePunchcard(appId, selectedEnv);
  const { data: appSettings } = useAppSettings(appId);

  const slaThresholdMs = appSettings?.slaThresholdMs ?? 300;
--- a/ui/src/pages/DashboardTab/DashboardL3.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL3.tsx
@@ -14,6 +14,7 @@ import { useGlobalFilters } from '@cameleer/design-system';
 import { useExecutionStats, useStatsTimeseries } from '../../api/queries/executions';
 import { useProcessorMetrics } from '../../api/queries/processor-metrics';
 import { useTopErrors, useAppSettings } from '../../api/queries/dashboard';
+import { useEnvironmentStore } from '../../api/environment-store';
 import type { TopError } from '../../api/queries/dashboard';
 import { useDiagramByRoute } from '../../api/queries/diagrams';
 import { ProcessDiagram } from '../../components/ProcessDiagram';
@@ -244,16 +245,17 @@ function buildKpiItems(

 export default function DashboardL3() {
  const { appId, routeId } = useParams<{ appId: string; routeId: string }>();
+  const selectedEnv = useEnvironmentStore((s) => s.environment);
  const { timeRange } = useGlobalFilters();
  const timeFrom = timeRange.start.toISOString();
  const timeTo = timeRange.end.toISOString();
  const windowSeconds = (timeRange.end.getTime() - timeRange.start.getTime()) / 1000;

  // ── Data hooks ──────────────────────────────────────────────────────────
-  const { data: stats } = useExecutionStats(timeFrom, timeTo, routeId, appId);
-  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, routeId, appId);
-  const { data: processorMetrics } = useProcessorMetrics(routeId ?? null, appId);
-  const { data: topErrors } = useTopErrors(timeFrom, timeTo, appId, routeId);
+  const { data: stats } = useExecutionStats(timeFrom, timeTo, routeId, appId, selectedEnv);
+  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, routeId, appId, selectedEnv);
+  const { data: processorMetrics } = useProcessorMetrics(routeId ?? null, appId, selectedEnv);
+  const { data: topErrors } = useTopErrors(timeFrom, timeTo, appId, routeId, selectedEnv);
  const { data: diagramLayout } = useDiagramByRoute(appId, routeId);
  const { data: appSettings } = useAppSettings(appId);

--- a/ui/src/pages/Routes/RouteDetail.tsx
+++ b/ui/src/pages/Routes/RouteDetail.tsx
@@ -31,6 +31,7 @@ import { useDiagramByRoute } from '../../api/queries/diagrams';
 import { useProcessorMetrics } from '../../api/queries/processor-metrics';
 import { useStatsTimeseries, useSearchExecutions, useExecutionStats } from '../../api/queries/executions';
 import { useApplicationConfig, useUpdateApplicationConfig, useTestExpression } from '../../api/queries/commands';
+import { useEnvironmentStore } from '../../api/environment-store';
 import type { TapDefinition } from '../../api/queries/commands';
 import type { ExecutionSummary } from '../../api/types';
 import type { CatalogApp, CatalogRoute } from '../../api/queries/catalog';
@@ -272,6 +273,7 @@ function buildDetailKpiItems(
 export default function RouteDetail() {
  const { appId, routeId } = useParams();
  const navigate = useNavigate();
+  const selectedEnv = useEnvironmentStore((s) => s.environment);
  const { timeRange } = useGlobalFilters();
  const timeFrom = timeRange.start.toISOString();
  const timeTo = timeRange.end.toISOString();
@@ -305,16 +307,17 @@ export default function RouteDetail() {
  }, []);

  // ── API queries ────────────────────────────────────────────────────────────
-  const { data: catalog } = useCatalog();
+  const { data: catalog } = useCatalog(selectedEnv);
  const { data: diagram } = useDiagramByRoute(appId, routeId);
-  const { data: processorMetrics, isLoading: processorLoading } = useProcessorMetrics(routeId ?? null, appId);
-  const { data: stats } = useExecutionStats(timeFrom, timeTo, routeId, appId);
-  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, routeId, appId);
+  const { data: processorMetrics, isLoading: processorLoading } = useProcessorMetrics(routeId ?? null, appId, selectedEnv);
+  const { data: stats } = useExecutionStats(timeFrom, timeTo, routeId, appId, selectedEnv);
+  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, routeId, appId, selectedEnv);
  const { data: recentResult, isLoading: recentLoading } = useSearchExecutions({
    timeFrom,
    timeTo,
    routeId: routeId || undefined,
    applicationId: appId || undefined,
+    environment: selectedEnv,
    sortField: recentSortField,
    sortDir: recentSortDir,
    offset: 0,
@@ -325,6 +328,7 @@ export default function RouteDetail() {
    timeTo,
    routeId: routeId || undefined,
    applicationId: appId || undefined,
+    environment: selectedEnv,
    status: 'FAILED',
    offset: 0,
    limit: 200,
--- a/ui/src/pages/Routes/RoutesMetrics.tsx
+++ b/ui/src/pages/Routes/RoutesMetrics.tsx
@@ -15,6 +15,7 @@ import type { KpiItem, Column } from '@cameleer/design-system';
 import { useGlobalFilters } from '@cameleer/design-system';
 import { useRouteMetrics } from '../../api/queries/catalog';
 import { useExecutionStats, useStatsTimeseries } from '../../api/queries/executions';
+import { useEnvironmentStore } from '../../api/environment-store';
 import type { RouteMetrics } from '../../api/types';
 import styles from './RoutesMetrics.module.css';
 import tableStyles from '../../styles/table-section.module.css';
@@ -206,13 +207,14 @@ function buildKpiItems(
 export default function RoutesMetrics() {
  const { appId } = useParams();
  const navigate = useNavigate();
+  const selectedEnv = useEnvironmentStore((s) => s.environment);
  const { timeRange } = useGlobalFilters();
  const timeFrom = timeRange.start.toISOString();
  const timeTo = timeRange.end.toISOString();

-  const { data: metrics } = useRouteMetrics(timeFrom, timeTo, appId);
-  const { data: stats } = useExecutionStats(timeFrom, timeTo, undefined, appId);
-  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, undefined, appId);
+  const { data: metrics } = useRouteMetrics(timeFrom, timeTo, appId, selectedEnv);
+  const { data: stats } = useExecutionStats(timeFrom, timeTo, undefined, appId, selectedEnv);
+  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, undefined, appId, selectedEnv);

  // Map backend RouteMetrics[] to table rows
  const rows: RouteRow[] = useMemo(() =>