cameleer/cameleer-server
1
0
Fork 0
Code Issues 45 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui/alerts): tighter inbox action bar, history uses global time range

Browse Source 
Inbox: replace 4 parallel outlined buttons with 2 context-aware ones.
When nothing is selected → "Acknowledge all firing" (primary) + "Mark all
read" (secondary). When rows are selected → the same slots become
"Acknowledge N" + "Mark N read" with counts inlined. Primary variant
gives the foreground action proper visual weight; secondary is the
supporting action. No more visually-identical disabled buttons cluttering
the bar.

History: drop the local DateRangePicker. The page now reads
`timeRange` from `useGlobalFilters()` so the top-bar TimeRangeDropdown
(1h / 3h / 6h / Today / 24h / 7d / custom) is the single source of
truth, consistent with every other time-scoped page in the app.
This commit is contained in:
hsiegeln
2026-04-21 13:10:43 +02:00
parent e8de8d88ad
commit 23d02ba6a0
2 changed files with 46 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ui/src/pages/Alerts/HistoryPage.tsx
View File

@@ -1,8 +1,7 @@
import { useState } from 'react';
import { Link } from 'react-router';
import { History } from 'lucide-react';
import {
DataTable, EmptyState, DateRangePicker,
DataTable, EmptyState, useGlobalFilters,
} from '@cameleer/design-system';
import type { Column } from '@cameleer/design-system';
import { PageLoader } from '../../components/PageLoader';
@@ -29,18 +28,16 @@ function formatDuration(from?: string | null, to?: string | null): string {
}
export default function HistoryPage() {
const [dateRange, setDateRange] = useState({
start: new Date(Date.now() - 7 * 24 * 3600_000),
end: new Date(),
});
const { timeRange } = useGlobalFilters();
// useAlerts doesn't accept a time range today; filter client-side.
// useAlerts doesn't accept a time range today; filter client-side
// against the global TimeRangeDropdown in the top bar.
const { data, isLoading, error } = useAlerts({ state: 'RESOLVED', limit: 200 });
const filtered = (data ?? []).filter((a) => {
if (!a.firedAt) return false;
const t = new Date(a.firedAt).getTime();
return t >= dateRange.start.getTime() && t <= dateRange.end.getTime();
return t >= timeRange.start.getTime() && t <= timeRange.end.getTime();
});
const columns: Column<AlertDto>[] = [
@@ -95,9 +92,6 @@ export default function HistoryPage() {
: `${filtered.length} resolved alert${filtered.length === 1 ? '' : 's'} in range`}
</span>
</div>
<div className={css.pageActions}>
<DateRangePicker value={dateRange} onChange={setDateRange} />
</div>
</header>
{filtered.length === 0 ? (