filters with search autofill
This commit is contained in:
@@ -144,6 +144,10 @@ pub struct EventQueryParams {
|
||||
#[param(example = "core.webhook")]
|
||||
pub trigger_ref: Option<String>,
|
||||
|
||||
/// Filter by rule reference
|
||||
#[param(example = "core.on_webhook")]
|
||||
pub rule_ref: Option<String>,
|
||||
|
||||
/// Filter by source ID
|
||||
#[param(example = 1)]
|
||||
pub source: Option<Id>,
|
||||
|
||||
@@ -237,6 +237,16 @@ pub async fn list_events(
|
||||
filtered_events.retain(|e| e.source == Some(source_id));
|
||||
}
|
||||
|
||||
if let Some(rule_ref) = &query.rule_ref {
|
||||
let rule_ref_lower = rule_ref.to_lowercase();
|
||||
filtered_events.retain(|e| {
|
||||
e.rule_ref
|
||||
.as_ref()
|
||||
.map(|r| r.to_lowercase().contains(&rule_ref_lower))
|
||||
.unwrap_or(false)
|
||||
});
|
||||
}
|
||||
|
||||
// Calculate pagination
|
||||
let total = filtered_events.len() as u64;
|
||||
let start = query.offset() as usize;
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
/* istanbul ignore file */
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
import type { ApiResponse_EventResponse } from '../models/ApiResponse_EventResponse';
|
||||
import type { i64 } from '../models/i64';
|
||||
import type { PaginatedResponse_EventSummary } from '../models/PaginatedResponse_EventSummary';
|
||||
import type { CancelablePromise } from '../core/CancelablePromise';
|
||||
import { OpenAPI } from '../core/OpenAPI';
|
||||
import { request as __request } from '../core/request';
|
||||
import type { ApiResponse_EventResponse } from "../models/ApiResponse_EventResponse";
|
||||
import type { i64 } from "../models/i64";
|
||||
import type { PaginatedResponse_EventSummary } from "../models/PaginatedResponse_EventSummary";
|
||||
import type { CancelablePromise } from "../core/CancelablePromise";
|
||||
import { OpenAPI } from "../core/OpenAPI";
|
||||
import { request as __request } from "../core/request";
|
||||
export class EventsService {
|
||||
/**
|
||||
* List all events with pagination and optional filters
|
||||
@@ -17,6 +17,7 @@ export class EventsService {
|
||||
public static listEvents({
|
||||
trigger,
|
||||
triggerRef,
|
||||
ruleRef,
|
||||
source,
|
||||
page,
|
||||
perPage,
|
||||
@@ -24,33 +25,38 @@ export class EventsService {
|
||||
/**
|
||||
* Filter by trigger ID
|
||||
*/
|
||||
trigger?: (null | i64),
|
||||
trigger?: null | i64;
|
||||
/**
|
||||
* Filter by trigger reference
|
||||
*/
|
||||
triggerRef?: string | null,
|
||||
triggerRef?: string | null;
|
||||
/**
|
||||
* Filter by rule reference
|
||||
*/
|
||||
ruleRef?: string | null;
|
||||
/**
|
||||
* Filter by source ID
|
||||
*/
|
||||
source?: (null | i64),
|
||||
source?: null | i64;
|
||||
/**
|
||||
* Page number (1-indexed)
|
||||
*/
|
||||
page?: number,
|
||||
page?: number;
|
||||
/**
|
||||
* Items per page
|
||||
*/
|
||||
perPage?: number,
|
||||
perPage?: number;
|
||||
}): CancelablePromise<PaginatedResponse_EventSummary> {
|
||||
return __request(OpenAPI, {
|
||||
method: 'GET',
|
||||
url: '/api/v1/events',
|
||||
method: "GET",
|
||||
url: "/api/v1/events",
|
||||
query: {
|
||||
'trigger': trigger,
|
||||
'trigger_ref': triggerRef,
|
||||
'source': source,
|
||||
'page': page,
|
||||
'per_page': perPage,
|
||||
trigger: trigger,
|
||||
trigger_ref: triggerRef,
|
||||
rule_ref: ruleRef,
|
||||
source: source,
|
||||
page: page,
|
||||
per_page: perPage,
|
||||
},
|
||||
errors: {
|
||||
401: `Unauthorized`,
|
||||
@@ -69,13 +75,13 @@ export class EventsService {
|
||||
/**
|
||||
* Event ID
|
||||
*/
|
||||
id: number,
|
||||
id: number;
|
||||
}): CancelablePromise<ApiResponse_EventResponse> {
|
||||
return __request(OpenAPI, {
|
||||
method: 'GET',
|
||||
url: '/api/v1/events/{id}',
|
||||
method: "GET",
|
||||
url: "/api/v1/events/{id}",
|
||||
path: {
|
||||
'id': id,
|
||||
id: id,
|
||||
},
|
||||
errors: {
|
||||
401: `Unauthorized`,
|
||||
|
||||
216
web/src/components/common/AutocompleteInput.tsx
Normal file
216
web/src/components/common/AutocompleteInput.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
import { useState, useRef, useEffect, useCallback, memo } from "react";
|
||||
|
||||
interface AutocompleteInputProps {
|
||||
label: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
suggestions: string[];
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* A text input with dropdown autocomplete suggestions.
|
||||
* Allows free-text entry — selecting a suggestion simply fills the input.
|
||||
* Memoized so it only re-renders when its own props change, not when
|
||||
* sibling components (e.g. a results table) update.
|
||||
*/
|
||||
const AutocompleteInput = memo(
|
||||
({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
suggestions,
|
||||
placeholder = "",
|
||||
}: AutocompleteInputProps) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [highlightedIndex, setHighlightedIndex] = useState(-1);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const listRef = useRef<HTMLUListElement>(null);
|
||||
|
||||
// Filter suggestions based on current input value (case-insensitive substring)
|
||||
const filtered =
|
||||
value.length === 0
|
||||
? suggestions
|
||||
: suggestions.filter((s) =>
|
||||
s.toLowerCase().includes(value.toLowerCase()),
|
||||
);
|
||||
|
||||
// Clamp the highlighted index when the filtered list shrinks
|
||||
const safeIndex =
|
||||
highlightedIndex >= filtered.length ? -1 : highlightedIndex;
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (
|
||||
containerRef.current &&
|
||||
!containerRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () =>
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Scroll highlighted item into view
|
||||
useEffect(() => {
|
||||
if (safeIndex >= 0 && listRef.current) {
|
||||
const items = listRef.current.children;
|
||||
if (items[safeIndex]) {
|
||||
(items[safeIndex] as HTMLElement).scrollIntoView({
|
||||
block: "nearest",
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [safeIndex]);
|
||||
|
||||
const selectSuggestion = useCallback(
|
||||
(suggestion: string) => {
|
||||
onChange(suggestion);
|
||||
setIsOpen(false);
|
||||
setHighlightedIndex(-1);
|
||||
// Keep focus on input after selection
|
||||
inputRef.current?.focus();
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (!isOpen || filtered.length === 0) {
|
||||
// Open dropdown on arrow down even if closed
|
||||
if (e.key === "ArrowDown" && filtered.length > 0) {
|
||||
e.preventDefault();
|
||||
setIsOpen(true);
|
||||
setHighlightedIndex(0);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
switch (e.key) {
|
||||
case "ArrowDown":
|
||||
e.preventDefault();
|
||||
setHighlightedIndex((prev) =>
|
||||
prev < filtered.length - 1 ? prev + 1 : 0,
|
||||
);
|
||||
break;
|
||||
case "ArrowUp":
|
||||
e.preventDefault();
|
||||
setHighlightedIndex((prev) =>
|
||||
prev > 0 ? prev - 1 : filtered.length - 1,
|
||||
);
|
||||
break;
|
||||
case "Enter":
|
||||
e.preventDefault();
|
||||
if (safeIndex >= 0 && safeIndex < filtered.length) {
|
||||
selectSuggestion(filtered[safeIndex]);
|
||||
}
|
||||
break;
|
||||
case "Escape":
|
||||
e.preventDefault();
|
||||
setIsOpen(false);
|
||||
setHighlightedIndex(-1);
|
||||
break;
|
||||
case "Tab":
|
||||
setIsOpen(false);
|
||||
setHighlightedIndex(-1);
|
||||
break;
|
||||
}
|
||||
},
|
||||
[isOpen, filtered, safeIndex, selectSuggestion],
|
||||
);
|
||||
|
||||
const handleInputChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
onChange(e.target.value);
|
||||
setIsOpen(true);
|
||||
setHighlightedIndex(-1);
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
const handleFocus = useCallback(() => {
|
||||
if (suggestions.length > 0) {
|
||||
setIsOpen(true);
|
||||
}
|
||||
}, [suggestions.length]);
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="relative">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={handleInputChange}
|
||||
onFocus={handleFocus}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={placeholder}
|
||||
autoComplete="off"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
|
||||
{isOpen && filtered.length > 0 && (
|
||||
<ul
|
||||
ref={listRef}
|
||||
className="absolute z-50 mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg max-h-48 overflow-y-auto"
|
||||
>
|
||||
{filtered.map((suggestion, index) => {
|
||||
const isHighlighted = index === safeIndex;
|
||||
// Highlight the matching substring
|
||||
const matchIndex = suggestion
|
||||
.toLowerCase()
|
||||
.indexOf(value.toLowerCase());
|
||||
const before =
|
||||
matchIndex >= 0
|
||||
? suggestion.slice(0, matchIndex)
|
||||
: suggestion;
|
||||
const match =
|
||||
matchIndex >= 0
|
||||
? suggestion.slice(matchIndex, matchIndex + value.length)
|
||||
: "";
|
||||
const after =
|
||||
matchIndex >= 0
|
||||
? suggestion.slice(matchIndex + value.length)
|
||||
: "";
|
||||
|
||||
return (
|
||||
<li
|
||||
key={suggestion}
|
||||
onMouseDown={(e) => {
|
||||
// Use mousedown instead of click to fire before input blur
|
||||
e.preventDefault();
|
||||
selectSuggestion(suggestion);
|
||||
}}
|
||||
onMouseEnter={() => setHighlightedIndex(index)}
|
||||
className={`px-3 py-2 text-sm cursor-pointer ${
|
||||
isHighlighted ? "bg-blue-50 text-blue-900" : "text-gray-900"
|
||||
} hover:bg-blue-50`}
|
||||
>
|
||||
{value.length > 0 && matchIndex >= 0 ? (
|
||||
<>
|
||||
{before}
|
||||
<span className="font-semibold">{match}</span>
|
||||
{after}
|
||||
</>
|
||||
) : (
|
||||
suggestion
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
AutocompleteInput.displayName = "AutocompleteInput";
|
||||
|
||||
export default AutocompleteInput;
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useQuery, keepPreviousData } from "@tanstack/react-query";
|
||||
import { EventsService, EnforcementsService, EnforcementStatus } from "@/api";
|
||||
import type { i64 } from "@/api";
|
||||
|
||||
@@ -7,6 +7,7 @@ interface EventsQueryParams {
|
||||
pageSize?: number;
|
||||
trigger?: i64 | null;
|
||||
triggerRef?: string | null;
|
||||
ruleRef?: string | null;
|
||||
source?: i64 | null;
|
||||
}
|
||||
|
||||
@@ -29,10 +30,12 @@ export function useEvents(params?: EventsQueryParams) {
|
||||
perPage: params?.pageSize || 50,
|
||||
trigger: params?.trigger,
|
||||
triggerRef: params?.triggerRef,
|
||||
ruleRef: params?.ruleRef,
|
||||
source: params?.source,
|
||||
});
|
||||
},
|
||||
staleTime: 30000, // 30 seconds
|
||||
placeholderData: keepPreviousData,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -63,6 +66,7 @@ export function useEnforcements(params?: EnforcementsQueryParams) {
|
||||
});
|
||||
},
|
||||
staleTime: 30000,
|
||||
placeholderData: keepPreviousData,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useQuery, keepPreviousData } from "@tanstack/react-query";
|
||||
import { ExecutionsService } from "@/api";
|
||||
import type { ExecutionStatus } from "@/api";
|
||||
|
||||
@@ -43,6 +43,8 @@ export function useExecutions(params?: ExecutionsQueryParams) {
|
||||
staleTime: hasFilters ? 5000 : 30000,
|
||||
// Refetch in background when filters change to get latest data
|
||||
refetchOnMount: hasFilters ? "always" : true,
|
||||
// Keep previous results visible while new data loads (prevents flash of empty state)
|
||||
placeholderData: keepPreviousData,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
91
web/src/hooks/useFilterSuggestions.ts
Normal file
91
web/src/hooks/useFilterSuggestions.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
import { useMemo } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
PacksService,
|
||||
RulesService,
|
||||
ActionsService,
|
||||
TriggersService,
|
||||
} from "@/api";
|
||||
import type {
|
||||
PaginatedResponse_PackSummary,
|
||||
PaginatedResponse_RuleSummary,
|
||||
PaginatedResponse_ActionSummary,
|
||||
PaginatedResponse_TriggerSummary,
|
||||
} from "@/api";
|
||||
|
||||
/**
|
||||
* Fetches all packs, rules, actions, and triggers and returns sorted
|
||||
* arrays of their refs for use as autocomplete suggestions.
|
||||
*
|
||||
* Data is cached with a long staleTime (5 minutes) since entity definitions
|
||||
* change infrequently. Individual pages can augment these base suggestions
|
||||
* with refs discovered via WebSocket notifications.
|
||||
*/
|
||||
export function useFilterSuggestions() {
|
||||
const { data: packsData } = useQuery<PaginatedResponse_PackSummary>({
|
||||
queryKey: ["filter-suggestions", "packs"],
|
||||
queryFn: () => PacksService.listPacks({ page: 1, pageSize: 200 }),
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
|
||||
const { data: rulesData } = useQuery<PaginatedResponse_RuleSummary>({
|
||||
queryKey: ["filter-suggestions", "rules"],
|
||||
queryFn: () => RulesService.listRules({ page: 1, pageSize: 200 }),
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
|
||||
const { data: actionsData } = useQuery<PaginatedResponse_ActionSummary>({
|
||||
queryKey: ["filter-suggestions", "actions"],
|
||||
queryFn: () => ActionsService.listActions({ page: 1, pageSize: 200 }),
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
|
||||
const { data: triggersData } = useQuery<PaginatedResponse_TriggerSummary>({
|
||||
queryKey: ["filter-suggestions", "triggers"],
|
||||
queryFn: () => TriggersService.listTriggers({ page: 1, pageSize: 200 }),
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
|
||||
const packNames = useMemo(() => {
|
||||
const refs = packsData?.data?.map((p) => p.ref) || [];
|
||||
return [...new Set(refs)].sort();
|
||||
}, [packsData]);
|
||||
|
||||
const ruleRefs = useMemo(() => {
|
||||
const refs = rulesData?.data?.map((r) => r.ref) || [];
|
||||
return [...new Set(refs)].sort();
|
||||
}, [rulesData]);
|
||||
|
||||
const actionRefs = useMemo(() => {
|
||||
const refs = actionsData?.data?.map((a) => a.ref) || [];
|
||||
return [...new Set(refs)].sort();
|
||||
}, [actionsData]);
|
||||
|
||||
const triggerRefs = useMemo(() => {
|
||||
const refs = triggersData?.data?.map((t) => t.ref) || [];
|
||||
return [...new Set(refs)].sort();
|
||||
}, [triggersData]);
|
||||
|
||||
return { packNames, ruleRefs, actionRefs, triggerRefs };
|
||||
}
|
||||
|
||||
/**
|
||||
* Merge base suggestion arrays with additional refs discovered at runtime
|
||||
* (e.g. from WebSocket notifications or loaded page data).
|
||||
* Returns a new sorted, deduplicated array only when the inputs change.
|
||||
*/
|
||||
export function useMergedSuggestions(
|
||||
base: string[],
|
||||
...additionalSets: string[][]
|
||||
): string[] {
|
||||
return useMemo(() => {
|
||||
const hasAdditional = additionalSets.some((s) => s.length > 0);
|
||||
if (!hasAdditional) return base;
|
||||
const merged = new Set(base);
|
||||
for (const set of additionalSets) {
|
||||
for (const item of set) merged.add(item);
|
||||
}
|
||||
return [...merged].sort();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [base, ...additionalSets]);
|
||||
}
|
||||
@@ -5,8 +5,13 @@ import { EnforcementStatus } from "@/api";
|
||||
import { useState, useMemo, memo, useCallback, useEffect } from "react";
|
||||
import { Search, X } from "lucide-react";
|
||||
import MultiSelect from "@/components/common/MultiSelect";
|
||||
import AutocompleteInput from "@/components/common/AutocompleteInput";
|
||||
import {
|
||||
useFilterSuggestions,
|
||||
useMergedSuggestions,
|
||||
} from "@/hooks/useFilterSuggestions";
|
||||
|
||||
// Memoized filter input component to prevent re-render on WebSocket updates
|
||||
// Memoized filter input component for non-ref fields (e.g. Event ID)
|
||||
const FilterInput = memo(
|
||||
({
|
||||
label,
|
||||
@@ -43,135 +48,6 @@ const STATUS_OPTIONS = [
|
||||
{ value: EnforcementStatus.DISABLED, label: "Disabled" },
|
||||
];
|
||||
|
||||
export default function EnforcementsPage() {
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
// Initialize filters from URL query parameters
|
||||
const [page, setPage] = useState(1);
|
||||
const pageSize = 50;
|
||||
const [searchFilters, setSearchFilters] = useState({
|
||||
rule: searchParams.get("rule_ref") || "",
|
||||
trigger: searchParams.get("trigger_ref") || "",
|
||||
event: searchParams.get("event") || "",
|
||||
});
|
||||
const [selectedStatuses, setSelectedStatuses] = useState<string[]>(() => {
|
||||
const status = searchParams.get("status");
|
||||
return status ? [status] : [];
|
||||
});
|
||||
|
||||
// Debounced filter state for API calls
|
||||
const [debouncedFilters, setDebouncedFilters] = useState(searchFilters);
|
||||
const [debouncedStatuses, setDebouncedStatuses] = useState(selectedStatuses);
|
||||
|
||||
// Debounce filter changes (500ms delay)
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedFilters(searchFilters);
|
||||
}, 500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchFilters]);
|
||||
|
||||
// Debounce status changes (300ms delay - shorter since it's a selection)
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedStatuses(selectedStatuses);
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [selectedStatuses]);
|
||||
|
||||
const queryParams = useMemo(() => {
|
||||
const params: any = { page, pageSize };
|
||||
if (debouncedFilters.trigger) params.triggerRef = debouncedFilters.trigger;
|
||||
if (debouncedFilters.event) {
|
||||
const eventId = parseInt(debouncedFilters.event, 10);
|
||||
if (!isNaN(eventId)) {
|
||||
params.event = eventId;
|
||||
}
|
||||
}
|
||||
|
||||
// Include status filter if exactly one status is selected
|
||||
// API only supports single status, so we use the first one for filtering
|
||||
// and show all results if multiple are selected
|
||||
if (debouncedStatuses.length === 1) {
|
||||
params.status = debouncedStatuses[0] as EnforcementStatus;
|
||||
}
|
||||
|
||||
return params;
|
||||
}, [page, pageSize, debouncedFilters, debouncedStatuses]);
|
||||
|
||||
const { data, isLoading, error } = useEnforcements(queryParams);
|
||||
|
||||
// Subscribe to real-time updates for all enforcements
|
||||
const { isConnected } = useEnforcementStream({ enabled: true });
|
||||
|
||||
const enforcements = data?.data || [];
|
||||
const total = data?.pagination?.total_items || 0;
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
|
||||
// Client-side filtering for multiple status selection and rule_ref (when > 1 status selected)
|
||||
const filteredEnforcements = useMemo(() => {
|
||||
let filtered = enforcements;
|
||||
|
||||
// Filter by rule_ref (client-side since API doesn't support it)
|
||||
if (debouncedFilters.rule) {
|
||||
filtered = filtered.filter((enf: any) =>
|
||||
enf.rule_ref
|
||||
.toLowerCase()
|
||||
.includes(debouncedFilters.rule.toLowerCase()),
|
||||
);
|
||||
}
|
||||
|
||||
// If multiple statuses selected, filter client-side
|
||||
if (debouncedStatuses.length > 1) {
|
||||
filtered = filtered.filter((enf: any) =>
|
||||
debouncedStatuses.includes(enf.status),
|
||||
);
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}, [enforcements, debouncedFilters.rule, debouncedStatuses]);
|
||||
|
||||
const handleFilterChange = useCallback((field: string, value: string) => {
|
||||
setSearchFilters((prev) => ({ ...prev, [field]: value }));
|
||||
setPage(1); // Reset to first page on filter change
|
||||
}, []);
|
||||
|
||||
const clearFilters = useCallback(() => {
|
||||
setSearchFilters({
|
||||
rule: "",
|
||||
trigger: "",
|
||||
event: "",
|
||||
});
|
||||
setSelectedStatuses([]);
|
||||
setPage(1); // Reset to first page
|
||||
}, []);
|
||||
|
||||
const hasActiveFilters =
|
||||
Object.values(searchFilters).some((v) => v !== "") ||
|
||||
selectedStatuses.length > 0;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
||||
<p>Error: {(error as Error).message}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const getStatusColor = (status: EnforcementStatus) => {
|
||||
switch (status) {
|
||||
case EnforcementStatus.PROCESSED:
|
||||
@@ -186,13 +62,11 @@ export default function EnforcementsPage() {
|
||||
};
|
||||
|
||||
const getConditionBadge = (condition: string) => {
|
||||
const colors = {
|
||||
const colors: Record<string, string> = {
|
||||
all: "bg-purple-100 text-purple-800",
|
||||
any: "bg-indigo-100 text-indigo-800",
|
||||
};
|
||||
return (
|
||||
colors[condition as keyof typeof colors] || "bg-gray-100 text-gray-800"
|
||||
);
|
||||
return colors[condition] || "bg-gray-100 text-gray-800";
|
||||
};
|
||||
|
||||
const formatTime = (timestamp: string) => {
|
||||
@@ -210,81 +84,62 @@ export default function EnforcementsPage() {
|
||||
return new Date(dateString).toLocaleString();
|
||||
};
|
||||
|
||||
// Memoized results table component - only re-renders when query data changes,
|
||||
// NOT when the user types in filter inputs.
|
||||
const EnforcementsResultsTable = memo(
|
||||
({
|
||||
enforcements,
|
||||
isLoading,
|
||||
isFetching,
|
||||
error,
|
||||
hasActiveFilters,
|
||||
clearFilters,
|
||||
page,
|
||||
setPage,
|
||||
pageSize,
|
||||
total,
|
||||
}: {
|
||||
enforcements: any[];
|
||||
isLoading: boolean;
|
||||
isFetching: boolean;
|
||||
error: Error | null;
|
||||
hasActiveFilters: boolean;
|
||||
clearFilters: () => void;
|
||||
page: number;
|
||||
setPage: (page: number) => void;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
}) => {
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
|
||||
// Initial load (no cached data yet)
|
||||
if (isLoading && enforcements.length === 0) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Enforcements</h1>
|
||||
{isLoading && hasActiveFilters && (
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Searching enforcements...
|
||||
</p>
|
||||
)}
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
|
||||
</div>
|
||||
{isConnected && (
|
||||
<div className="flex items-center gap-2 text-sm text-green-600">
|
||||
<div className="h-2 w-2 rounded-full bg-green-600 animate-pulse" />
|
||||
<span>Live Updates</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{/* Search Filters */}
|
||||
<div className="bg-white shadow rounded-lg p-4 mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Search className="h-5 w-5 text-gray-400" />
|
||||
<h2 className="text-lg font-semibold">Filter Enforcements</h2>
|
||||
</div>
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
Clear Filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<FilterInput
|
||||
label="Rule"
|
||||
value={searchFilters.rule}
|
||||
onChange={(value) => handleFilterChange("rule", value)}
|
||||
placeholder="e.g., core.on_timer"
|
||||
/>
|
||||
<FilterInput
|
||||
label="Trigger"
|
||||
value={searchFilters.trigger}
|
||||
onChange={(value) => handleFilterChange("trigger", value)}
|
||||
placeholder="e.g., core.webhook"
|
||||
/>
|
||||
<FilterInput
|
||||
label="Event ID"
|
||||
value={searchFilters.event}
|
||||
onChange={(value) => handleFilterChange("event", value)}
|
||||
placeholder="e.g., 123"
|
||||
/>
|
||||
<div>
|
||||
<MultiSelect
|
||||
label="Status"
|
||||
options={STATUS_OPTIONS}
|
||||
value={selectedStatuses}
|
||||
onChange={setSelectedStatuses}
|
||||
placeholder="All Statuses"
|
||||
/>
|
||||
</div>
|
||||
// Error with no cached data to show
|
||||
if (error && enforcements.length === 0) {
|
||||
return (
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
||||
<p>Error: {error.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{filteredEnforcements.length === 0 ? (
|
||||
// Empty results
|
||||
if (enforcements.length === 0) {
|
||||
return (
|
||||
<div className="bg-white p-12 text-center rounded-lg shadow">
|
||||
<p>
|
||||
{enforcements.length === 0
|
||||
? "No enforcements found"
|
||||
: "No enforcements match the selected filters"}
|
||||
</p>
|
||||
{enforcements.length > 0 && hasActiveFilters && (
|
||||
<p>No enforcements found</p>
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="mt-3 text-sm text-blue-600 hover:text-blue-800"
|
||||
@@ -293,8 +148,25 @@ export default function EnforcementsPage() {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Inline loading overlay - shows on top of previous results while fetching */}
|
||||
{isFetching && (
|
||||
<div className="absolute inset-0 bg-white/60 z-10 flex items-center justify-center rounded-lg">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Non-fatal error banner (data still shown from cache) */}
|
||||
{error && (
|
||||
<div className="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
||||
<p>Error refreshing: {error.message}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||||
<table className="min-w-full">
|
||||
<thead className="bg-gray-50">
|
||||
@@ -323,7 +195,7 @@ export default function EnforcementsPage() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{filteredEnforcements.map((enforcement: any) => (
|
||||
{enforcements.map((enforcement: any) => (
|
||||
<tr key={enforcement.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 font-mono text-sm">
|
||||
<Link
|
||||
@@ -446,8 +318,219 @@ export default function EnforcementsPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
EnforcementsResultsTable.displayName = "EnforcementsResultsTable";
|
||||
|
||||
export default function EnforcementsPage() {
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
// --- Filter input state (updates immediately on keystroke) ---
|
||||
const [page, setPage] = useState(1);
|
||||
const pageSize = 50;
|
||||
const [searchFilters, setSearchFilters] = useState({
|
||||
rule: searchParams.get("rule_ref") || "",
|
||||
trigger: searchParams.get("trigger_ref") || "",
|
||||
event: searchParams.get("event") || "",
|
||||
});
|
||||
const [selectedStatuses, setSelectedStatuses] = useState<string[]>(() => {
|
||||
const status = searchParams.get("status");
|
||||
return status ? [status] : [];
|
||||
});
|
||||
|
||||
// --- Debounced filter state (drives API calls, updates after delay) ---
|
||||
const [debouncedFilters, setDebouncedFilters] = useState(searchFilters);
|
||||
const [debouncedStatuses, setDebouncedStatuses] = useState(selectedStatuses);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedFilters(searchFilters);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchFilters]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedStatuses(selectedStatuses);
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [selectedStatuses]);
|
||||
|
||||
// --- Autocomplete suggestions ---
|
||||
const baseSuggestions = useFilterSuggestions();
|
||||
|
||||
// --- Build query params from debounced state ---
|
||||
const queryParams = useMemo(() => {
|
||||
const params: any = { page, pageSize };
|
||||
if (debouncedFilters.trigger) params.triggerRef = debouncedFilters.trigger;
|
||||
if (debouncedFilters.event) {
|
||||
const eventId = parseInt(debouncedFilters.event, 10);
|
||||
if (!isNaN(eventId)) {
|
||||
params.event = eventId;
|
||||
}
|
||||
}
|
||||
if (debouncedStatuses.length === 1) {
|
||||
params.status = debouncedStatuses[0] as EnforcementStatus;
|
||||
}
|
||||
return params;
|
||||
}, [page, pageSize, debouncedFilters, debouncedStatuses]);
|
||||
|
||||
const { data, isLoading, isFetching, error } = useEnforcements(queryParams);
|
||||
const { isConnected } = useEnforcementStream({ enabled: true });
|
||||
|
||||
const enforcements = useMemo(() => data?.data || [], [data]);
|
||||
const total = data?.pagination?.total_items || 0;
|
||||
|
||||
// Derive refs from currently-loaded enforcement data (no setState needed)
|
||||
const loadedRefs = useMemo(() => {
|
||||
const rules = new Set<string>();
|
||||
const triggers = new Set<string>();
|
||||
|
||||
for (const enf of enforcements) {
|
||||
if (enf.rule_ref) rules.add(enf.rule_ref as string);
|
||||
if (enf.trigger_ref) triggers.add(enf.trigger_ref as string);
|
||||
}
|
||||
|
||||
return {
|
||||
rules: [...rules],
|
||||
triggers: [...triggers],
|
||||
};
|
||||
}, [enforcements]);
|
||||
|
||||
// Merge base entity suggestions + loaded data refs
|
||||
const ruleSuggestions = useMergedSuggestions(
|
||||
baseSuggestions.ruleRefs,
|
||||
loadedRefs.rules,
|
||||
);
|
||||
const triggerSuggestions = useMergedSuggestions(
|
||||
baseSuggestions.triggerRefs,
|
||||
loadedRefs.triggers,
|
||||
);
|
||||
|
||||
// Client-side filtering for rule_ref and multiple status selection
|
||||
const filteredEnforcements = useMemo(() => {
|
||||
let filtered = enforcements;
|
||||
|
||||
// Filter by rule_ref (client-side since API doesn't support it)
|
||||
if (debouncedFilters.rule) {
|
||||
filtered = filtered.filter((enf: any) =>
|
||||
enf.rule_ref
|
||||
.toLowerCase()
|
||||
.includes(debouncedFilters.rule.toLowerCase()),
|
||||
);
|
||||
}
|
||||
|
||||
// If multiple statuses selected, filter client-side
|
||||
if (debouncedStatuses.length > 1) {
|
||||
filtered = filtered.filter((enf: any) =>
|
||||
debouncedStatuses.includes(enf.status),
|
||||
);
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}, [enforcements, debouncedFilters.rule, debouncedStatuses]);
|
||||
|
||||
const handleFilterChange = useCallback((field: string, value: string) => {
|
||||
setSearchFilters((prev) => ({ ...prev, [field]: value }));
|
||||
setPage(1);
|
||||
}, []);
|
||||
|
||||
const clearFilters = useCallback(() => {
|
||||
setSearchFilters({ rule: "", trigger: "", event: "" });
|
||||
setSelectedStatuses([]);
|
||||
setPage(1);
|
||||
}, []);
|
||||
|
||||
const hasActiveFilters =
|
||||
Object.values(searchFilters).some((v) => v !== "") ||
|
||||
selectedStatuses.length > 0;
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header - always visible */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Enforcements</h1>
|
||||
{isFetching && hasActiveFilters && (
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Searching enforcements...
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{isConnected && (
|
||||
<div className="flex items-center gap-2 text-sm text-green-600">
|
||||
<div className="h-2 w-2 rounded-full bg-green-600 animate-pulse" />
|
||||
<span>Live Updates</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filter section - always mounted, never unmounts during loading */}
|
||||
<div className="bg-white shadow rounded-lg p-4 mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Search className="h-5 w-5 text-gray-400" />
|
||||
<h2 className="text-lg font-semibold">Filter Enforcements</h2>
|
||||
</div>
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
Clear Filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<AutocompleteInput
|
||||
label="Rule"
|
||||
value={searchFilters.rule}
|
||||
onChange={(value) => handleFilterChange("rule", value)}
|
||||
suggestions={ruleSuggestions}
|
||||
placeholder="e.g., core.on_timer"
|
||||
/>
|
||||
<AutocompleteInput
|
||||
label="Trigger"
|
||||
value={searchFilters.trigger}
|
||||
onChange={(value) => handleFilterChange("trigger", value)}
|
||||
suggestions={triggerSuggestions}
|
||||
placeholder="e.g., core.webhook"
|
||||
/>
|
||||
<FilterInput
|
||||
label="Event ID"
|
||||
value={searchFilters.event}
|
||||
onChange={(value) => handleFilterChange("event", value)}
|
||||
placeholder="e.g., 123"
|
||||
/>
|
||||
<div>
|
||||
<MultiSelect
|
||||
label="Status"
|
||||
options={STATUS_OPTIONS}
|
||||
value={selectedStatuses}
|
||||
onChange={setSelectedStatuses}
|
||||
placeholder="All Statuses"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results section - isolated from filter state, only depends on query results */}
|
||||
<EnforcementsResultsTable
|
||||
enforcements={filteredEnforcements}
|
||||
isLoading={isLoading}
|
||||
isFetching={isFetching}
|
||||
error={error as Error | null}
|
||||
hasActiveFilters={hasActiveFilters}
|
||||
clearFilters={clearFilters}
|
||||
page={page}
|
||||
setPage={setPage}
|
||||
pageSize={pageSize}
|
||||
total={total}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useCallback } from "react";
|
||||
import { useState, useCallback, useMemo, memo, useEffect } from "react";
|
||||
import { Link, useSearchParams } from "react-router-dom";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useEvents } from "@/hooks/useEvents";
|
||||
@@ -6,93 +6,14 @@ import {
|
||||
useEntityNotifications,
|
||||
Notification,
|
||||
} from "@/contexts/WebSocketContext";
|
||||
import { Search, X } from "lucide-react";
|
||||
import AutocompleteInput from "@/components/common/AutocompleteInput";
|
||||
import {
|
||||
useFilterSuggestions,
|
||||
useMergedSuggestions,
|
||||
} from "@/hooks/useFilterSuggestions";
|
||||
import type { EventSummary } from "@/api";
|
||||
|
||||
export default function EventsPage() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const queryClient = useQueryClient();
|
||||
const [page, setPage] = useState(1);
|
||||
const [triggerFilter, setTriggerFilter] = useState<string>(
|
||||
searchParams.get("trigger_ref") || "",
|
||||
);
|
||||
const pageSize = 50;
|
||||
|
||||
// Set up WebSocket for real-time event updates with stable callback
|
||||
const handleEventNotification = useCallback(
|
||||
(notification: Notification) => {
|
||||
// Extract event data from notification payload (flat structure)
|
||||
if (notification.notification_type === "event_created") {
|
||||
const payload = notification.payload as any;
|
||||
|
||||
// Create EventSummary from notification data
|
||||
const newEvent: EventSummary = {
|
||||
id: payload.id,
|
||||
trigger: payload.trigger,
|
||||
trigger_ref: payload.trigger_ref,
|
||||
rule: payload.rule,
|
||||
rule_ref: payload.rule_ref,
|
||||
source: payload.source,
|
||||
source_ref: payload.source_ref,
|
||||
has_payload:
|
||||
payload.payload !== null && payload.payload !== undefined,
|
||||
created: payload.created,
|
||||
};
|
||||
|
||||
// Update the query cache directly instead of invalidating
|
||||
queryClient.setQueryData(
|
||||
[
|
||||
"events",
|
||||
{ page, pageSize, triggerRef: triggerFilter || undefined },
|
||||
],
|
||||
(oldData: any) => {
|
||||
if (!oldData) return oldData;
|
||||
|
||||
// Check if filtering and event matches filter
|
||||
if (triggerFilter && newEvent.trigger_ref !== triggerFilter) {
|
||||
return oldData;
|
||||
}
|
||||
|
||||
// Add new event to the beginning of the list if on first page
|
||||
if (page === 1) {
|
||||
return {
|
||||
...oldData,
|
||||
data: [newEvent, ...oldData.data].slice(0, pageSize),
|
||||
pagination: {
|
||||
...oldData.pagination,
|
||||
total_items: (oldData.pagination?.total_items || 0) + 1,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// For other pages, just update the total count
|
||||
return {
|
||||
...oldData,
|
||||
pagination: {
|
||||
...oldData.pagination,
|
||||
total_items: (oldData.pagination?.total_items || 0) + 1,
|
||||
},
|
||||
};
|
||||
},
|
||||
);
|
||||
}
|
||||
},
|
||||
[queryClient, page, pageSize, triggerFilter],
|
||||
);
|
||||
|
||||
const { connected: wsConnected } = useEntityNotifications(
|
||||
"event",
|
||||
handleEventNotification,
|
||||
);
|
||||
|
||||
const { data, isLoading, error } = useEvents({
|
||||
page,
|
||||
pageSize,
|
||||
triggerRef: triggerFilter || undefined,
|
||||
});
|
||||
|
||||
const events = data?.data || [];
|
||||
const total = data?.pagination?.total_items || 0;
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString();
|
||||
};
|
||||
@@ -108,88 +29,60 @@ export default function EventsPage() {
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
// Memoized results table component - only re-renders when query data changes,
|
||||
// NOT when the user types in filter inputs.
|
||||
const EventsResultsTable = memo(
|
||||
({
|
||||
events,
|
||||
isLoading,
|
||||
isFetching,
|
||||
error,
|
||||
hasActiveFilters,
|
||||
clearFilters,
|
||||
page,
|
||||
setPage,
|
||||
pageSize,
|
||||
total,
|
||||
}: {
|
||||
events: EventSummary[];
|
||||
isLoading: boolean;
|
||||
isFetching: boolean;
|
||||
error: Error | null;
|
||||
hasActiveFilters: boolean;
|
||||
clearFilters: () => void;
|
||||
page: number;
|
||||
setPage: (page: number) => void;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
}) => {
|
||||
const totalPages = total ? Math.ceil(total / pageSize) : 0;
|
||||
|
||||
// Initial load (no cached data yet)
|
||||
if (isLoading && events.length === 0) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Events</h1>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Event instances generated by sensors and triggers
|
||||
</p>
|
||||
</div>
|
||||
{wsConnected && (
|
||||
<div className="flex items-center gap-2 text-sm text-green-600">
|
||||
<div className="w-2 h-2 bg-green-600 rounded-full animate-pulse"></div>
|
||||
<span>Live updates</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
|
||||
<p className="ml-4 text-gray-600">Loading events...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{/* Filters */}
|
||||
<div className="bg-white rounded-lg shadow mb-6 p-4">
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
|
||||
<div className="flex-1 max-w-md">
|
||||
<label
|
||||
htmlFor="trigger-filter"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Filter by Trigger
|
||||
</label>
|
||||
<input
|
||||
id="trigger-filter"
|
||||
type="text"
|
||||
value={triggerFilter}
|
||||
onChange={(e) => {
|
||||
setTriggerFilter(e.target.value);
|
||||
setPage(1); // Reset to first page on filter change
|
||||
}}
|
||||
placeholder="e.g., core.webhook"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{triggerFilter && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setTriggerFilter("");
|
||||
setPage(1);
|
||||
}}
|
||||
className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
Clear Filter
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{data && (
|
||||
<div className="mt-3 text-sm text-gray-600">
|
||||
Showing {events.length} of {total} events
|
||||
{triggerFilter && ` (filtered by "${triggerFilter}")`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Events List */}
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
{isLoading ? (
|
||||
<div className="p-12 text-center">
|
||||
<div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
<p className="mt-4 text-gray-600">Loading events...</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="p-12 text-center">
|
||||
// Error with no cached data to show
|
||||
if (error && events.length === 0) {
|
||||
return (
|
||||
<div className="bg-white shadow rounded-lg p-12 text-center">
|
||||
<p className="text-red-600">Failed to load events</p>
|
||||
<p className="text-sm text-gray-600 mt-2">
|
||||
{error instanceof Error ? error.message : "Unknown error"}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mt-2">{error.message}</p>
|
||||
</div>
|
||||
) : !events || events.length === 0 ? (
|
||||
<div className="p-12 text-center">
|
||||
);
|
||||
}
|
||||
|
||||
// Empty results
|
||||
if (events.length === 0) {
|
||||
return (
|
||||
<div className="bg-white shadow rounded-lg p-12 text-center">
|
||||
<svg
|
||||
className="mx-auto h-12 w-12 text-gray-400"
|
||||
fill="none"
|
||||
@@ -205,13 +98,39 @@ export default function EventsPage() {
|
||||
</svg>
|
||||
<p className="mt-4 text-gray-600">No events found</p>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
{triggerFilter
|
||||
? "Try adjusting your filter"
|
||||
{hasActiveFilters
|
||||
? "Try adjusting your filters"
|
||||
: "Events will appear here when triggers fire"}
|
||||
</p>
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="mt-3 text-sm text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Inline loading overlay - shows on top of previous results while fetching */}
|
||||
{isFetching && (
|
||||
<div className="absolute inset-0 bg-white/60 z-10 flex items-center justify-center rounded-lg">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Non-fatal error banner (data still shown from cache) */}
|
||||
{error && (
|
||||
<div className="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
||||
<p>Error refreshing: {error.message}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
@@ -231,18 +150,18 @@ export default function EventsPage() {
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Created
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{events.map((event) => (
|
||||
<tr key={event.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className="text-sm font-mono text-gray-900">
|
||||
{event.id}
|
||||
</span>
|
||||
<Link
|
||||
to={`/events/${event.id}`}
|
||||
className="text-sm font-mono text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
#{event.id}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="text-sm">
|
||||
@@ -297,19 +216,12 @@ export default function EventsPage() {
|
||||
{formatDate(event.created)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<Link
|
||||
to={`/events/${event.id}`}
|
||||
className="text-blue-600 hover:text-blue-900"
|
||||
>
|
||||
View Details
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
@@ -358,9 +270,263 @@ export default function EventsPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
EventsResultsTable.displayName = "EventsResultsTable";
|
||||
|
||||
export default function EventsPage() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// --- Filter input state (updates immediately on keystroke) ---
|
||||
const [page, setPage] = useState(1);
|
||||
const pageSize = 50;
|
||||
const [searchFilters, setSearchFilters] = useState({
|
||||
trigger: searchParams.get("trigger_ref") || "",
|
||||
rule: searchParams.get("rule_ref") || "",
|
||||
});
|
||||
|
||||
// --- Debounced filter state (drives API calls, updates after delay) ---
|
||||
const [debouncedFilters, setDebouncedFilters] = useState(searchFilters);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedFilters(searchFilters);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchFilters]);
|
||||
|
||||
// --- Autocomplete suggestions ---
|
||||
const baseSuggestions = useFilterSuggestions();
|
||||
|
||||
// Additional refs discovered via WebSocket notifications (accumulated over time)
|
||||
const [wsRefs, setWsRefs] = useState<{
|
||||
triggers: string[];
|
||||
rules: string[];
|
||||
}>({ triggers: [], rules: [] });
|
||||
|
||||
// --- Build query params from debounced state ---
|
||||
const queryParams = useMemo(() => {
|
||||
const params: any = { page, pageSize };
|
||||
if (debouncedFilters.trigger) params.triggerRef = debouncedFilters.trigger;
|
||||
if (debouncedFilters.rule) params.ruleRef = debouncedFilters.rule;
|
||||
return params;
|
||||
}, [page, pageSize, debouncedFilters]);
|
||||
|
||||
// Set up WebSocket for real-time event updates with stable callback
|
||||
const handleEventNotification = useCallback(
|
||||
(notification: Notification) => {
|
||||
if (notification.notification_type === "event_created") {
|
||||
const payload = notification.payload as any;
|
||||
|
||||
const newEvent: EventSummary = {
|
||||
id: payload.id,
|
||||
trigger: payload.trigger,
|
||||
trigger_ref: payload.trigger_ref,
|
||||
rule: payload.rule,
|
||||
rule_ref: payload.rule_ref,
|
||||
source: payload.source,
|
||||
source_ref: payload.source_ref,
|
||||
has_payload:
|
||||
payload.payload !== null && payload.payload !== undefined,
|
||||
created: payload.created,
|
||||
};
|
||||
|
||||
// Augment autocomplete suggestions with new refs from notification
|
||||
setWsRefs((prev) => {
|
||||
const newTriggers = new Set(prev.triggers);
|
||||
const newRules = new Set(prev.rules);
|
||||
let changed = false;
|
||||
|
||||
if (newEvent.trigger_ref && !newTriggers.has(newEvent.trigger_ref)) {
|
||||
newTriggers.add(newEvent.trigger_ref);
|
||||
changed = true;
|
||||
}
|
||||
if (newEvent.rule_ref && !newRules.has(newEvent.rule_ref)) {
|
||||
newRules.add(newEvent.rule_ref);
|
||||
changed = true;
|
||||
}
|
||||
|
||||
if (!changed) return prev;
|
||||
return {
|
||||
triggers: [...newTriggers],
|
||||
rules: [...newRules],
|
||||
};
|
||||
});
|
||||
|
||||
queryClient.setQueryData(["events", queryParams], (oldData: any) => {
|
||||
if (!oldData) return oldData;
|
||||
|
||||
// Check if filtering and event matches filter
|
||||
if (
|
||||
debouncedFilters.trigger &&
|
||||
newEvent.trigger_ref !== debouncedFilters.trigger
|
||||
) {
|
||||
return oldData;
|
||||
}
|
||||
if (
|
||||
debouncedFilters.rule &&
|
||||
newEvent.rule_ref !== debouncedFilters.rule
|
||||
) {
|
||||
return oldData;
|
||||
}
|
||||
|
||||
// Add new event to the beginning of the list if on first page
|
||||
if (page === 1) {
|
||||
return {
|
||||
...oldData,
|
||||
data: [newEvent, ...oldData.data].slice(0, pageSize),
|
||||
pagination: {
|
||||
...oldData.pagination,
|
||||
total_items: (oldData.pagination?.total_items || 0) + 1,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// For other pages, just update the total count
|
||||
return {
|
||||
...oldData,
|
||||
pagination: {
|
||||
...oldData.pagination,
|
||||
total_items: (oldData.pagination?.total_items || 0) + 1,
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
[queryClient, queryParams, page, pageSize, debouncedFilters],
|
||||
);
|
||||
|
||||
const { connected: wsConnected } = useEntityNotifications(
|
||||
"event",
|
||||
handleEventNotification,
|
||||
);
|
||||
|
||||
const { data, isLoading, isFetching, error } = useEvents(queryParams);
|
||||
|
||||
const events = useMemo(() => data?.data || [], [data]);
|
||||
const total = data?.pagination?.total_items || 0;
|
||||
|
||||
// Derive refs from currently-loaded event data (no setState needed)
|
||||
const loadedRefs = useMemo(() => {
|
||||
const triggers = new Set<string>();
|
||||
const rules = new Set<string>();
|
||||
|
||||
for (const event of events) {
|
||||
if (event.trigger_ref) triggers.add(event.trigger_ref);
|
||||
if (event.rule_ref) rules.add(event.rule_ref);
|
||||
}
|
||||
|
||||
return {
|
||||
triggers: [...triggers],
|
||||
rules: [...rules],
|
||||
};
|
||||
}, [events]);
|
||||
|
||||
// Merge base entity suggestions + loaded data refs + WebSocket refs
|
||||
const triggerSuggestions = useMergedSuggestions(
|
||||
baseSuggestions.triggerRefs,
|
||||
loadedRefs.triggers,
|
||||
wsRefs.triggers,
|
||||
);
|
||||
const ruleSuggestions = useMergedSuggestions(
|
||||
baseSuggestions.ruleRefs,
|
||||
loadedRefs.rules,
|
||||
wsRefs.rules,
|
||||
);
|
||||
|
||||
const handleFilterChange = useCallback((field: string, value: string) => {
|
||||
setSearchFilters((prev) => ({ ...prev, [field]: value }));
|
||||
setPage(1);
|
||||
}, []);
|
||||
|
||||
const clearFilters = useCallback(() => {
|
||||
setSearchFilters({ trigger: "", rule: "" });
|
||||
setPage(1);
|
||||
}, []);
|
||||
|
||||
const hasActiveFilters = Object.values(searchFilters).some((v) => v !== "");
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header - always visible */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Events</h1>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Event instances generated by sensors and triggers
|
||||
</p>
|
||||
{isFetching && hasActiveFilters && (
|
||||
<p className="text-sm text-gray-500 mt-1">Searching events...</p>
|
||||
)}
|
||||
</div>
|
||||
{wsConnected && (
|
||||
<div className="flex items-center gap-2 text-sm text-green-600">
|
||||
<div className="w-2 h-2 bg-green-600 rounded-full animate-pulse"></div>
|
||||
<span>Live updates</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter section - always mounted, never unmounts during loading */}
|
||||
<div className="bg-white shadow rounded-lg p-4 mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Search className="h-5 w-5 text-gray-400" />
|
||||
<h2 className="text-lg font-semibold">Filter Events</h2>
|
||||
</div>
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
Clear Filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<AutocompleteInput
|
||||
label="Trigger"
|
||||
value={searchFilters.trigger}
|
||||
onChange={(value) => handleFilterChange("trigger", value)}
|
||||
suggestions={triggerSuggestions}
|
||||
placeholder="e.g., core.webhook"
|
||||
/>
|
||||
<AutocompleteInput
|
||||
label="Rule"
|
||||
value={searchFilters.rule}
|
||||
onChange={(value) => handleFilterChange("rule", value)}
|
||||
suggestions={ruleSuggestions}
|
||||
placeholder="e.g., core.on_webhook"
|
||||
/>
|
||||
</div>
|
||||
{data && (
|
||||
<div className="mt-3 text-sm text-gray-600">
|
||||
Showing {events.length} of {total} events
|
||||
{hasActiveFilters && " (filtered)"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Results section - isolated from filter state, only depends on query results */}
|
||||
<EventsResultsTable
|
||||
events={events}
|
||||
isLoading={isLoading}
|
||||
isFetching={isFetching}
|
||||
error={error as Error | null}
|
||||
hasActiveFilters={hasActiveFilters}
|
||||
clearFilters={clearFilters}
|
||||
page={page}
|
||||
setPage={setPage}
|
||||
pageSize={pageSize}
|
||||
total={total}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,8 +5,13 @@ import { ExecutionStatus } from "@/api";
|
||||
import { useState, useMemo, memo, useCallback, useEffect } from "react";
|
||||
import { Search, X } from "lucide-react";
|
||||
import MultiSelect from "@/components/common/MultiSelect";
|
||||
import AutocompleteInput from "@/components/common/AutocompleteInput";
|
||||
import {
|
||||
useFilterSuggestions,
|
||||
useMergedSuggestions,
|
||||
} from "@/hooks/useFilterSuggestions";
|
||||
|
||||
// Memoized filter input component to prevent re-render on WebSocket updates
|
||||
// Memoized filter input component for non-ref fields (e.g. Executor ID)
|
||||
const FilterInput = memo(
|
||||
({
|
||||
label,
|
||||
@@ -50,127 +55,6 @@ const STATUS_OPTIONS = [
|
||||
{ value: ExecutionStatus.ABANDONED, label: "Abandoned" },
|
||||
];
|
||||
|
||||
export default function ExecutionsPage() {
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
// Initialize filters from URL query parameters
|
||||
const [page, setPage] = useState(1);
|
||||
const pageSize = 50;
|
||||
const [searchFilters, setSearchFilters] = useState({
|
||||
pack: searchParams.get("pack_name") || "",
|
||||
rule: searchParams.get("rule_ref") || "",
|
||||
action: searchParams.get("action_ref") || "",
|
||||
trigger: searchParams.get("trigger_ref") || "",
|
||||
executor: searchParams.get("executor") || "",
|
||||
});
|
||||
const [selectedStatuses, setSelectedStatuses] = useState<string[]>(() => {
|
||||
const status = searchParams.get("status");
|
||||
return status ? [status] : [];
|
||||
});
|
||||
|
||||
// Debounced filter state for API calls
|
||||
const [debouncedFilters, setDebouncedFilters] = useState(searchFilters);
|
||||
const [debouncedStatuses, setDebouncedStatuses] = useState(selectedStatuses);
|
||||
|
||||
// Debounce filter changes (500ms delay)
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedFilters(searchFilters);
|
||||
}, 500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchFilters]);
|
||||
|
||||
// Debounce status changes (300ms delay - shorter since it's a selection)
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedStatuses(selectedStatuses);
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [selectedStatuses]);
|
||||
|
||||
const queryParams = useMemo(() => {
|
||||
const params: any = { page, pageSize };
|
||||
if (debouncedFilters.pack) params.packName = debouncedFilters.pack;
|
||||
if (debouncedFilters.rule) params.ruleRef = debouncedFilters.rule;
|
||||
if (debouncedFilters.action) params.actionRef = debouncedFilters.action;
|
||||
if (debouncedFilters.trigger) params.triggerRef = debouncedFilters.trigger;
|
||||
if (debouncedFilters.executor)
|
||||
params.executor = parseInt(debouncedFilters.executor, 10);
|
||||
|
||||
// Include status filter if exactly one status is selected
|
||||
// API only supports single status, so we use the first one for filtering
|
||||
// and show all results if multiple are selected
|
||||
if (debouncedStatuses.length === 1) {
|
||||
params.status = debouncedStatuses[0] as ExecutionStatus;
|
||||
}
|
||||
|
||||
return params;
|
||||
}, [page, pageSize, debouncedFilters, debouncedStatuses]);
|
||||
|
||||
const { data, isLoading, error } = useExecutions(queryParams);
|
||||
|
||||
// Subscribe to real-time updates for all executions
|
||||
const { isConnected } = useExecutionStream({ enabled: true });
|
||||
|
||||
const executions = data?.data || [];
|
||||
const total = data?.pagination?.total_items || 0;
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
|
||||
// Client-side filtering for multiple status selection (when > 1 selected)
|
||||
const filteredExecutions = useMemo(() => {
|
||||
// If no statuses selected or only one (already filtered by API), show all
|
||||
if (debouncedStatuses.length <= 1) {
|
||||
return executions;
|
||||
}
|
||||
// If multiple statuses selected, filter client-side
|
||||
return executions.filter((exec: any) =>
|
||||
debouncedStatuses.includes(exec.status),
|
||||
);
|
||||
}, [executions, debouncedStatuses]);
|
||||
|
||||
const handleFilterChange = useCallback((field: string, value: string) => {
|
||||
setSearchFilters((prev) => ({ ...prev, [field]: value }));
|
||||
setPage(1); // Reset to first page on filter change
|
||||
}, []);
|
||||
|
||||
const clearFilters = useCallback(() => {
|
||||
setSearchFilters({
|
||||
pack: "",
|
||||
rule: "",
|
||||
action: "",
|
||||
trigger: "",
|
||||
executor: "",
|
||||
});
|
||||
setSelectedStatuses([]);
|
||||
setPage(1); // Reset to first page
|
||||
}, []);
|
||||
|
||||
const hasActiveFilters =
|
||||
Object.values(searchFilters).some((v) => v !== "") ||
|
||||
selectedStatuses.length > 0;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
||||
<p>Error: {(error as Error).message}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const getStatusColor = (status: ExecutionStatus) => {
|
||||
switch (status) {
|
||||
case ExecutionStatus.COMPLETED:
|
||||
@@ -189,93 +73,62 @@ export default function ExecutionsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// Memoized results table component - only re-renders when query data changes,
|
||||
// NOT when the user types in filter inputs.
|
||||
const ExecutionsResultsTable = memo(
|
||||
({
|
||||
executions,
|
||||
isLoading,
|
||||
isFetching,
|
||||
error,
|
||||
hasActiveFilters,
|
||||
clearFilters,
|
||||
page,
|
||||
setPage,
|
||||
pageSize,
|
||||
total,
|
||||
}: {
|
||||
executions: any[];
|
||||
isLoading: boolean;
|
||||
isFetching: boolean;
|
||||
error: Error | null;
|
||||
hasActiveFilters: boolean;
|
||||
clearFilters: () => void;
|
||||
page: number;
|
||||
setPage: (page: number) => void;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
}) => {
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
|
||||
// Initial load (no cached data yet)
|
||||
if (isLoading && executions.length === 0) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Executions</h1>
|
||||
{isLoading && hasActiveFilters && (
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Searching executions...
|
||||
</p>
|
||||
)}
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
|
||||
</div>
|
||||
{isConnected && (
|
||||
<div className="flex items-center gap-2 text-sm text-green-600">
|
||||
<div className="h-2 w-2 rounded-full bg-green-600 animate-pulse" />
|
||||
<span>Live Updates</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{/* Search Filters */}
|
||||
<div className="bg-white shadow rounded-lg p-4 mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Search className="h-5 w-5 text-gray-400" />
|
||||
<h2 className="text-lg font-semibold">Filter Executions</h2>
|
||||
</div>
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
Clear Filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
|
||||
<FilterInput
|
||||
label="Pack"
|
||||
value={searchFilters.pack}
|
||||
onChange={(value) => handleFilterChange("pack", value)}
|
||||
placeholder="e.g., core"
|
||||
/>
|
||||
<FilterInput
|
||||
label="Rule"
|
||||
value={searchFilters.rule}
|
||||
onChange={(value) => handleFilterChange("rule", value)}
|
||||
placeholder="e.g., core.on_timer"
|
||||
/>
|
||||
<FilterInput
|
||||
label="Action"
|
||||
value={searchFilters.action}
|
||||
onChange={(value) => handleFilterChange("action", value)}
|
||||
placeholder="e.g., core.echo"
|
||||
/>
|
||||
<FilterInput
|
||||
label="Trigger"
|
||||
value={searchFilters.trigger}
|
||||
onChange={(value) => handleFilterChange("trigger", value)}
|
||||
placeholder="e.g., core.timer"
|
||||
/>
|
||||
<FilterInput
|
||||
label="Executor ID"
|
||||
value={searchFilters.executor}
|
||||
onChange={(value) => handleFilterChange("executor", value)}
|
||||
placeholder="e.g., 1"
|
||||
/>
|
||||
<div>
|
||||
<MultiSelect
|
||||
label="Status"
|
||||
options={STATUS_OPTIONS}
|
||||
value={selectedStatuses}
|
||||
onChange={setSelectedStatuses}
|
||||
placeholder="All Statuses"
|
||||
/>
|
||||
</div>
|
||||
// Error with no cached data to show
|
||||
if (error && executions.length === 0) {
|
||||
return (
|
||||
<div className="bg-white shadow rounded-lg">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
||||
<p>Error: {error.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{filteredExecutions.length === 0 ? (
|
||||
// Empty results
|
||||
if (executions.length === 0) {
|
||||
return (
|
||||
<div className="bg-white p-12 text-center rounded-lg shadow">
|
||||
<p>
|
||||
{executions.length === 0
|
||||
? "No executions found"
|
||||
: "No executions match the selected filters"}
|
||||
</p>
|
||||
{executions.length > 0 && hasActiveFilters && (
|
||||
<p>No executions found</p>
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="mt-3 text-sm text-blue-600 hover:text-blue-800"
|
||||
@@ -284,8 +137,25 @@ export default function ExecutionsPage() {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Inline loading overlay - shows on top of previous results while fetching */}
|
||||
{isFetching && (
|
||||
<div className="absolute inset-0 bg-white/60 z-10 flex items-center justify-center rounded-lg">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Non-fatal error banner (data still shown from cache) */}
|
||||
{error && (
|
||||
<div className="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
||||
<p>Error refreshing: {error.message}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||||
<table className="min-w-full">
|
||||
<thead className="bg-gray-50">
|
||||
@@ -311,7 +181,7 @@ export default function ExecutionsPage() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{filteredExecutions.map((exec: any) => (
|
||||
{executions.map((exec: any) => (
|
||||
<tr key={exec.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 font-mono text-sm">
|
||||
<Link
|
||||
@@ -359,6 +229,8 @@ export default function ExecutionsPage() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="bg-gray-50 px-6 py-4 flex items-center justify-between border-t border-gray-200">
|
||||
<div className="flex-1 flex justify-between sm:hidden">
|
||||
@@ -384,12 +256,11 @@ export default function ExecutionsPage() {
|
||||
<span className="font-medium">
|
||||
{(page - 1) * pageSize + 1}
|
||||
</span>{" "}
|
||||
to
|
||||
to{" "}
|
||||
<span className="font-medium">
|
||||
{Math.min(page * pageSize, total)}
|
||||
</span>{" "}
|
||||
of
|
||||
<span className="font-medium">{total}</span> executions
|
||||
of <span className="font-medium">{total}</span> executions
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
@@ -413,8 +284,242 @@ export default function ExecutionsPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
ExecutionsResultsTable.displayName = "ExecutionsResultsTable";
|
||||
|
||||
export default function ExecutionsPage() {
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
// --- Filter input state (updates immediately on keystroke) ---
|
||||
const [page, setPage] = useState(1);
|
||||
const pageSize = 50;
|
||||
const [searchFilters, setSearchFilters] = useState({
|
||||
pack: searchParams.get("pack_name") || "",
|
||||
rule: searchParams.get("rule_ref") || "",
|
||||
action: searchParams.get("action_ref") || "",
|
||||
trigger: searchParams.get("trigger_ref") || "",
|
||||
executor: searchParams.get("executor") || "",
|
||||
});
|
||||
const [selectedStatuses, setSelectedStatuses] = useState<string[]>(() => {
|
||||
const status = searchParams.get("status");
|
||||
return status ? [status] : [];
|
||||
});
|
||||
|
||||
// --- Debounced filter state (drives API calls, updates after delay) ---
|
||||
const [debouncedFilters, setDebouncedFilters] = useState(searchFilters);
|
||||
const [debouncedStatuses, setDebouncedStatuses] = useState(selectedStatuses);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedFilters(searchFilters);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchFilters]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedStatuses(selectedStatuses);
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [selectedStatuses]);
|
||||
|
||||
// --- Autocomplete suggestions ---
|
||||
const baseSuggestions = useFilterSuggestions();
|
||||
|
||||
// --- Build query params from debounced state ---
|
||||
const queryParams = useMemo(() => {
|
||||
const params: any = { page, pageSize };
|
||||
if (debouncedFilters.pack) params.packName = debouncedFilters.pack;
|
||||
if (debouncedFilters.rule) params.ruleRef = debouncedFilters.rule;
|
||||
if (debouncedFilters.action) params.actionRef = debouncedFilters.action;
|
||||
if (debouncedFilters.trigger) params.triggerRef = debouncedFilters.trigger;
|
||||
if (debouncedFilters.executor)
|
||||
params.executor = parseInt(debouncedFilters.executor, 10);
|
||||
if (debouncedStatuses.length === 1) {
|
||||
params.status = debouncedStatuses[0] as ExecutionStatus;
|
||||
}
|
||||
return params;
|
||||
}, [page, pageSize, debouncedFilters, debouncedStatuses]);
|
||||
|
||||
const { data, isLoading, isFetching, error } = useExecutions(queryParams);
|
||||
const { isConnected } = useExecutionStream({ enabled: true });
|
||||
|
||||
const executions = useMemo(() => data?.data || [], [data]);
|
||||
const total = data?.pagination?.total_items || 0;
|
||||
|
||||
// Derive refs from currently-loaded execution data (no setState needed)
|
||||
const loadedRefs = useMemo(() => {
|
||||
const packs = new Set<string>();
|
||||
const rules = new Set<string>();
|
||||
const actions = new Set<string>();
|
||||
const triggers = new Set<string>();
|
||||
|
||||
for (const exec of executions) {
|
||||
if (exec.action_ref) {
|
||||
const pack = (exec.action_ref as string).split(".")[0];
|
||||
if (pack) packs.add(pack);
|
||||
actions.add(exec.action_ref as string);
|
||||
}
|
||||
if (exec.rule_ref) rules.add(exec.rule_ref as string);
|
||||
if (exec.trigger_ref) triggers.add(exec.trigger_ref as string);
|
||||
}
|
||||
|
||||
return {
|
||||
packs: [...packs],
|
||||
rules: [...rules],
|
||||
actions: [...actions],
|
||||
triggers: [...triggers],
|
||||
};
|
||||
}, [executions]);
|
||||
|
||||
// Merge base entity suggestions + loaded data refs
|
||||
const packSuggestions = useMergedSuggestions(
|
||||
baseSuggestions.packNames,
|
||||
loadedRefs.packs,
|
||||
);
|
||||
const ruleSuggestions = useMergedSuggestions(
|
||||
baseSuggestions.ruleRefs,
|
||||
loadedRefs.rules,
|
||||
);
|
||||
const actionSuggestions = useMergedSuggestions(
|
||||
baseSuggestions.actionRefs,
|
||||
loadedRefs.actions,
|
||||
);
|
||||
const triggerSuggestions = useMergedSuggestions(
|
||||
baseSuggestions.triggerRefs,
|
||||
loadedRefs.triggers,
|
||||
);
|
||||
|
||||
// Client-side filtering for multiple status selection (when > 1 selected)
|
||||
const filteredExecutions = useMemo(() => {
|
||||
if (debouncedStatuses.length <= 1) return executions;
|
||||
return executions.filter((exec: any) =>
|
||||
debouncedStatuses.includes(exec.status),
|
||||
);
|
||||
}, [executions, debouncedStatuses]);
|
||||
|
||||
const handleFilterChange = useCallback((field: string, value: string) => {
|
||||
setSearchFilters((prev) => ({ ...prev, [field]: value }));
|
||||
setPage(1);
|
||||
}, []);
|
||||
|
||||
const clearFilters = useCallback(() => {
|
||||
setSearchFilters({
|
||||
pack: "",
|
||||
rule: "",
|
||||
action: "",
|
||||
trigger: "",
|
||||
executor: "",
|
||||
});
|
||||
setSelectedStatuses([]);
|
||||
setPage(1);
|
||||
}, []);
|
||||
|
||||
const hasActiveFilters =
|
||||
Object.values(searchFilters).some((v) => v !== "") ||
|
||||
selectedStatuses.length > 0;
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header - always visible */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Executions</h1>
|
||||
{isFetching && hasActiveFilters && (
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Searching executions...
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{isConnected && (
|
||||
<div className="flex items-center gap-2 text-sm text-green-600">
|
||||
<div className="h-2 w-2 rounded-full bg-green-600 animate-pulse" />
|
||||
<span>Live Updates</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filter section - always mounted, never unmounts during loading */}
|
||||
<div className="bg-white shadow rounded-lg p-4 mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Search className="h-5 w-5 text-gray-400" />
|
||||
<h2 className="text-lg font-semibold">Filter Executions</h2>
|
||||
</div>
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
Clear Filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
|
||||
<AutocompleteInput
|
||||
label="Pack"
|
||||
value={searchFilters.pack}
|
||||
onChange={(value) => handleFilterChange("pack", value)}
|
||||
suggestions={packSuggestions}
|
||||
placeholder="e.g., core"
|
||||
/>
|
||||
<AutocompleteInput
|
||||
label="Rule"
|
||||
value={searchFilters.rule}
|
||||
onChange={(value) => handleFilterChange("rule", value)}
|
||||
suggestions={ruleSuggestions}
|
||||
placeholder="e.g., core.on_timer"
|
||||
/>
|
||||
<AutocompleteInput
|
||||
label="Action"
|
||||
value={searchFilters.action}
|
||||
onChange={(value) => handleFilterChange("action", value)}
|
||||
suggestions={actionSuggestions}
|
||||
placeholder="e.g., core.echo"
|
||||
/>
|
||||
<AutocompleteInput
|
||||
label="Trigger"
|
||||
value={searchFilters.trigger}
|
||||
onChange={(value) => handleFilterChange("trigger", value)}
|
||||
suggestions={triggerSuggestions}
|
||||
placeholder="e.g., core.timer"
|
||||
/>
|
||||
<FilterInput
|
||||
label="Executor ID"
|
||||
value={searchFilters.executor}
|
||||
onChange={(value) => handleFilterChange("executor", value)}
|
||||
placeholder="e.g., 1"
|
||||
/>
|
||||
<div>
|
||||
<MultiSelect
|
||||
label="Status"
|
||||
options={STATUS_OPTIONS}
|
||||
value={selectedStatuses}
|
||||
onChange={setSelectedStatuses}
|
||||
placeholder="All Statuses"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results section - isolated from filter state, only depends on query results */}
|
||||
<ExecutionsResultsTable
|
||||
executions={filteredExecutions}
|
||||
isLoading={isLoading}
|
||||
isFetching={isFetching}
|
||||
error={error as Error | null}
|
||||
hasActiveFilters={hasActiveFilters}
|
||||
clearFilters={clearFilters}
|
||||
page={page}
|
||||
setPage={setPage}
|
||||
pageSize={pageSize}
|
||||
total={total}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user