@tetherto/mdk-react-devkit 0.0.0-stage → 0.12.1

package/dist/domain/components/alerts/alerts-utils.js

@@ -0,0 +1,179 @@
+import _compact from 'lodash/compact';
+import _concat from 'lodash/concat';
+import _filter from 'lodash/filter';
+import _includes from 'lodash/includes';
+import _join from 'lodash/join';
+import _isEmpty from 'lodash/isEmpty';
+import _map from 'lodash/map';
+import _reduce from 'lodash/reduce';
+import _some from 'lodash/some';
+import _toLower from 'lodash/toLower';
+import _uniq from 'lodash/uniq';
+import { getContainerName } from '../../utils/container-utils';
+import { getDeviceData, getMinerShortCode } from '../../utils/device-utils';
+const parseAlertEntry = (alert, device, onAlertClick) => {
+    if (!device)
+        return null;
+    const [, deviceStats] = getDeviceData(device);
+    const type = (deviceStats?.type ?? '');
+    const info = deviceStats?.info ||
+        {
+            container: '',
+            pos: '',
+            macAddress: '',
+            serialNum: '',
+        };
+    const firmwareVersion = deviceStats?.snap?.config?.firmware_ver;
+    const id = deviceStats?.id ?? '';
+    const shortCode = getMinerShortCode(device.code, device?.tags || []);
+    const containerName = getContainerName(info?.container, type);
+    const positionLabel = [containerName, info?.pos]
+        .map((part) => (part == null ? '' : String(part)))
+        .filter((part) => part && !part.includes('undefined'))
+        .join(' ')
+        .trim();
+    return {
+        shortCode,
+        device: positionLabel,
+        tags: _compact([
+            ...(deviceStats?.tags || []),
+            deviceStats?.address && `ip-${deviceStats.address}`,
+            info.macAddress && `mac-${String(info.macAddress)}`,
+            info.serialNum && `sn-${String(info.serialNum)}`,
+            firmwareVersion && `firmware-${firmwareVersion}`,
+        ]),
+        alertName: alert.name,
+        alertCode: alert.code,
+        severity: alert.severity,
+        description: alert.description,
+        message: alert.message,
+        createdAt: alert.createdAt,
+        status: device.last?.snap?.stats?.status,
+        uuid: alert.uuid,
+        id,
+        type,
+        actions: { onAlertClick, id, uuid: alert.uuid },
+    };
+};
+const getDeviceAlertsData = (device, onAlertClick) => {
+    const [err, deviceStats] = getDeviceData(device);
+    if (err)
+        return [];
+    return _compact(_map(deviceStats?.alerts, (alert) => parseAlertEntry(alert, device, onAlertClick)));
+};
+export const applyAlertsLocalFilters = (allAlerts = [], localFilters = {}) => {
+    let filteredAlerts = [...allAlerts];
+    if (localFilters?.severity) {
+        filteredAlerts = _filter(filteredAlerts, (alert) => _includes(localFilters.severity, alert.severity));
+    }
+    if (localFilters?.status) {
+        filteredAlerts = _filter(filteredAlerts, (alert) => _includes(localFilters.status, alert.status));
+    }
+    if (localFilters?.type) {
+        filteredAlerts = _filter(filteredAlerts, (alert) => _some(localFilters.type, (searchLookup) => {
+            const lowerLookup = _toLower(searchLookup);
+            const fastAccessValues = _map([alert.type, alert.alertCode, alert.alertName, alert.uuid, alert.shortCode, alert.device], (value) => _toLower(value));
+            if (_some(fastAccessValues, (value) => _includes(value, lowerLookup))) {
+                return true;
+            }
+            return _some(alert.tags, (tag) => _includes(_toLower(tag), lowerLookup));
+        }));
+    }
+    if (localFilters?.id) {
+        filteredAlerts = _filter(filteredAlerts, (alert) => _includes(localFilters.id, alert.uuid));
+    }
+    return filteredAlerts;
+};
+/**
+ * For each search chip that matched the alert only through fields the table
+ * doesn't display (uuid, alert code, device type, or the derived ip-/mac-/
+ * sn-/firmware- tags), collect the hidden tokens it matched. Chips that
+ * match a visible column (code, position, alert name) produce no hint —
+ * those matches are self-explanatory.
+ */
+export const getAlertMatchHints = (alert, filterTags = []) => {
+    const hints = [];
+    for (const searchLookup of filterTags) {
+        const lowerLookup = _toLower(searchLookup);
+        if (!lowerLookup)
+            continue;
+        const visibleValues = [alert.shortCode, alert.device, alert.alertName];
+        if (_some(visibleValues, (value) => _includes(_toLower(value), lowerLookup)))
+            continue;
+        if (_includes(_toLower(alert.uuid), lowerLookup))
+            hints.push(`uuid ${alert.uuid}`);
+        if (_includes(_toLower(alert.alertCode), lowerLookup))
+            hints.push(`code ${alert.alertCode}`);
+        if (alert.type && _includes(_toLower(alert.type), lowerLookup)) {
+            hints.push(`type ${alert.type}`);
+        }
+        for (const tag of alert.tags ?? []) {
+            if (_includes(_toLower(tag), lowerLookup))
+                hints.push(tag);
+        }
+    }
+    return _uniq(hints);
+};
+const withMatchHints = (alerts, filterTags = []) => {
+    if (_isEmpty(filterTags))
+        return alerts;
+    return _map(alerts, (alert) => {
+        const matchedOn = getAlertMatchHints(alert, filterTags);
+        return matchedOn.length > 0 ? { ...alert, matchedOn } : alert;
+    });
+};
+const composeFilters = (localFilters, filterTags) => {
+    if (_isEmpty(filterTags)) {
+        return localFilters;
+    }
+    return {
+        ...localFilters,
+        type: [...(localFilters?.type || []), ...(filterTags || [])],
+    };
+};
+export const getHistoricalAlertsData = (alerts, { filterTags, localFilters, onAlertClick }) => {
+    const allAlerts = _compact(_map(alerts, (alert) => parseAlertEntry(alert, alert?.thing, onAlertClick)));
+    const filters = composeFilters(localFilters, filterTags);
+    return withMatchHints(applyAlertsLocalFilters(allAlerts, filters), filterTags);
+};
+/**
+ * Derive alert rows from a flat device list.
+ *
+ * Took `Device[][]` and `_head`-ed it until now — the mining Gateway's
+ * per-Kernel envelope reached this far into the devkit, so a consumer on another
+ * backend had to wrap their rows in an array, and rows from every node after the
+ * first were silently dropped. Unwrapping belongs in the data layer, not here.
+ */
+export const getAlertsForDevices = (data, localFilters, onAlertClick) => {
+    const allAlerts = _reduce(data, (alerts, device) => {
+        const deviceAlerts = getDeviceAlertsData(device, onAlertClick);
+        if (deviceAlerts) {
+            return _concat(alerts, deviceAlerts);
+        }
+        return alerts;
+    }, []);
+    return applyAlertsLocalFilters(allAlerts, localFilters);
+};
+export const onLogClicked = (navigate, id) => {
+    if (!navigate || !id)
+        return;
+    navigate(`/alerts/${id}`);
+};
+export const getCurrentAlerts = (data, { filterTags, localFilters, onAlertClick, id }) => {
+    const effectiveTags = id ? [] : filterTags;
+    const alertFilters = composeFilters(localFilters, effectiveTags);
+    const devicesAlerts = withMatchHints(getAlertsForDevices(data, alertFilters, onAlertClick), effectiveTags);
+    return id ? _filter(devicesAlerts, { uuid: id }) : devicesAlerts;
+};
+export const getAlertsString = (alerts, getFormattedDate) => {
+    const formattedMessages = _map(alerts, (alert) => `(${alert.severity}) ${getFormattedDate
+        ? getFormattedDate(new Date(alert.createdAt))
+        : new Date(alert.createdAt).toLocaleString()} : ${alert.name} Description: ${alert.description} ${alert.message ? alert.message : ''}`);
+    return _join(formattedMessages, ',\n\n');
+};
+export const getAlertsDescription = (alerts, getFormattedDate) => {
+    const formattedMessages = _map(alerts, (alert) => `${getFormattedDate
+        ? getFormattedDate(new Date(alert.createdAt))
+        : new Date(alert.createdAt).toLocaleString()} : ${alert.description}`);
+    return _join(formattedMessages, ',\n\n');
+};

package/dist/domain/components/alerts/current-alerts/alert-confirmation-modal/alert-confirmation-modal.d.ts

@@ -0,0 +1,17 @@
+import './alert-confirmation-modal.scss';
+import type { JSX } from 'react';
+export type AlertConfirmationModalProps = {
+    /** Controls dialog visibility */
+    isOpen: boolean;
+    /** Called when the user confirms the action */
+    onOk: VoidFunction;
+};
+/**
+ * Modal that confirms acknowledging or clearing one or more alerts before applying the change.
+ *
+ * @category tables
+ * @domain mining-operations
+ * @kernelCapability hashrate-monitoring
+ * @tier agent-ready
+ */
+export declare const AlertConfirmationModal: ({ isOpen, onOk, }: AlertConfirmationModalProps) => JSX.Element;

package/dist/domain/components/alerts/current-alerts/alert-confirmation-modal/alert-confirmation-modal.example.d.ts

@@ -0,0 +1 @@
+export declare const AlertConfirmationModalExample: () => import("react").JSX.Element;

package/dist/domain/components/alerts/current-alerts/alert-confirmation-modal/alert-confirmation-modal.example.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AlertConfirmationModal } from '@tetherto/mdk-react-devkit';
+export const AlertConfirmationModalExample = () => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs("div", { className: "mdk-example-row", children: [_jsx("button", { onClick: () => setOpen(true), children: "Clear All Alerts" }), _jsx(AlertConfirmationModal, { isOpen: open, onOk: () => {
+                    console.warn('confirmed');
+                    setOpen(false);
+                } })] }));
+};

package/dist/domain/components/alerts/current-alerts/alert-confirmation-modal/alert-confirmation-modal.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogFooter } from '../../../../../primitives/index.js';
+/**
+ * Modal that confirms acknowledging or clearing one or more alerts before applying the change.
+ *
+ * @category tables
+ * @domain mining-operations
+ * @kernelCapability hashrate-monitoring
+ * @tier agent-ready
+ */
+export const AlertConfirmationModal = ({ isOpen, onOk, }) => (_jsx(Dialog, { open: isOpen, children: _jsxs(DialogContent, { title: "Critical alert sound notifications", closeOnEscape: false, closeOnClickOutside: false, className: "mdk-alerts-confirmation-modal", "aria-describedby": undefined, children: [_jsx("div", { className: "mdk-alerts-confirmation-modal__body", children: _jsx("p", { children: "Sound notifications for Critical alerts are only triggered from the Alerts page. To enable them, please keep always a tab with this page open" }) }), _jsx(DialogFooter, { className: "mdk-alerts-confirmation-modal__footer", children: _jsx(Button, { variant: "primary", onClick: onOk, children: "Understood" }) })] }) }));

package/dist/domain/components/alerts/current-alerts/current-alerts.d.ts

@@ -0,0 +1,77 @@
+import type { JSX } from 'react';
+import type { Device } from '../../../types/device';
+import type { AlertLocalFilters } from '../alerts-types';
+import type { TagFilterBarProps } from '../tag-filter-bar/tag-filter-bar';
+import '../alerts-panel.scss';
+export type CurrentAlertsProps = {
+    /**
+     * Devices carrying alerts (`last.alerts`), as a flat list. Unwrapping any
+     * backend envelope is the data layer's job, not this component's.
+     */
+    devices?: Device[];
+    /**
+     * Show DataTable loading overlay
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Filters controlled outside (typically by URL severity param).
+     */
+    localFilters: AlertLocalFilters;
+    /** Setter for the filters above */
+    onLocalFiltersChange: (filters: AlertLocalFilters) => void;
+    /**
+     * Search tags (controlled).
+     */
+    filterTags: string[];
+    /** Setter for the tags above */
+    onFilterTagsChange: (tags: string[]) => void;
+    /**
+     * Optional id used to focus on a single alert (deep-link from URL).
+     */
+    selectedAlertId?: string;
+    /**
+     * Click handler when the user opens an alert (right arrow icon in the row).
+     */
+    onAlertClick?: (id?: string, uuid?: string) => void;
+    /**
+     * Whether sound notifications are enabled in user preferences (e.g. theme slice).
+     * @default false
+     */
+    isSoundEnabled?: boolean;
+    /**
+     * Skip sound entirely (e.g. in demo/preview environments), including the
+     * one-time "sound notifications" confirmation modal.
+     * @default false
+     */
+    isDemoMode?: boolean;
+    /**
+     * Optional site-specific overrides for the type filter.
+     */
+    typeFiltersForSite?: TagFilterBarProps['typeFiltersForSite'];
+    /** Additional class names */
+    className?: string;
+};
+/**
+ * Sortable, searchable data table of currently active alerts derived from a
+ * raw devices payload. Plays an audible beep when a critical alert is present
+ * (gated by `isSoundEnabled` + user confirmation modal).
+ *
+ * @category tables
+ * @kernelCapability incident-alerts
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <CurrentAlerts
+ *   devices={devices}
+ *   localFilters={localFilters}
+ *   onLocalFiltersChange={setLocalFilters}
+ *   filterTags={filterTags}
+ *   onFilterTagsChange={setFilterTags}
+ *   onAlertClick={(id) => router.push(`/alerts/${id}`)}
+ * />
+ * ```
+ * @tier agent-ready
+ */
+export declare const CurrentAlerts: ({ devices, isLoading, localFilters, onLocalFiltersChange, filterTags, onFilterTagsChange, selectedAlertId, onAlertClick, isSoundEnabled, isDemoMode, typeFiltersForSite, className, }: CurrentAlertsProps) => JSX.Element;

package/dist/domain/components/alerts/current-alerts/current-alerts.example.d.ts

@@ -0,0 +1 @@
+export declare const CurrentAlertsExample: () => import("react").JSX.Element;

package/dist/domain/components/alerts/current-alerts/current-alerts.example.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for CurrentAlerts.
+ */
+import { useState } from 'react';
+import { CurrentAlerts } from '@tetherto/mdk-react-devkit';
+// The component derives its rows from a raw `devices` payload (`device.last.alerts`).
+// We use `any` casts on the mock to avoid duplicating the long `Device` type here —
+// the production code expects a `Device[][]` from the Gateway API.
+const mockDevices = [
+    [
+        {
+            id: 'miner-A1',
+            last: {
+                alerts: [
+                    {
+                        id: '1',
+                        uuid: 'alrt-1',
+                        severity: 'critical',
+                        name: 'miner_offline',
+                        description: 'Miner 0xA1 has stopped reporting.',
+                        code: '001',
+                        createdAt: Date.now() - 2 * 60 * 1000,
+                    },
+                ],
+            },
+        },
+    ],
+];
+export const CurrentAlertsExample = () => {
+    const [filterTags, setFilterTags] = useState([]);
+    const [localFilters, setLocalFilters] = useState({});
+    return (_jsx(CurrentAlerts, { devices: mockDevices, isLoading: false, localFilters: localFilters, onLocalFiltersChange: setLocalFilters, filterTags: filterTags, onFilterTagsChange: setFilterTags, onAlertClick: (id) => {
+            // oxlint-disable-next-line no-console
+            console.log(`open alert ${id}`);
+        }, isDemoMode: true }));
+};

package/dist/domain/components/alerts/current-alerts/current-alerts.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { cn, DataTable } from '../../../../primitives/index.js';
+import _castArray from 'lodash/castArray';
+import _isEmpty from 'lodash/isEmpty';
+import { SEVERITY } from '../../../constants/alerts';
+import { useBeepSound, useTimezoneFormatter } from '@tetherto/mdk-react-adapter';
+import { getAlertsTableColumns } from '../alerts-table-columns';
+import { getCurrentAlerts } from '../alerts-utils';
+import { AlertsTableTitle } from '../alerts-table-title/alerts-table-title';
+import { TagFilterBar } from '../tag-filter-bar/tag-filter-bar';
+import { AlertConfirmationModal } from './alert-confirmation-modal/alert-confirmation-modal';
+const ALERT_CONFIRMATION_KEY = 'alertsPageAlertConfirmed';
+const DEFAULT_SORTING = [
+    { id: 'severity', desc: true },
+    { id: 'createdAt', desc: true },
+];
+/**
+ * Sortable, searchable data table of currently active alerts derived from a
+ * raw devices payload. Plays an audible beep when a critical alert is present
+ * (gated by `isSoundEnabled` + user confirmation modal).
+ *
+ * @category tables
+ * @kernelCapability incident-alerts
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <CurrentAlerts
+ *   devices={devices}
+ *   localFilters={localFilters}
+ *   onLocalFiltersChange={setLocalFilters}
+ *   filterTags={filterTags}
+ *   onFilterTagsChange={setFilterTags}
+ *   onAlertClick={(id) => router.push(`/alerts/${id}`)}
+ * />
+ * ```
+ * @tier agent-ready
+ */
+export const CurrentAlerts = ({ devices, isLoading = false, localFilters, onLocalFiltersChange, filterTags, onFilterTagsChange, selectedAlertId, onAlertClick, isSoundEnabled = false, isDemoMode = false, typeFiltersForSite, className, }) => {
+    const { getFormattedDate } = useTimezoneFormatter();
+    const [confirmed, setConfirmed] = useState(() => {
+        if (typeof window === 'undefined')
+            return false;
+        return window.sessionStorage.getItem(ALERT_CONFIRMATION_KEY) === 'true';
+    });
+    const handleConfirmed = () => {
+        setConfirmed(true);
+        if (typeof window !== 'undefined') {
+            window.sessionStorage.setItem(ALERT_CONFIRMATION_KEY, 'true');
+        }
+    };
+    const alerts = useMemo(() => getCurrentAlerts(devices ?? [], {
+        filterTags,
+        localFilters,
+        onAlertClick: (id, uuid) => onAlertClick?.(id, uuid),
+        id: selectedAlertId,
+    }), [devices, filterTags, localFilters, selectedAlertId, onAlertClick]);
+    const hasCriticalAlert = useMemo(() => alerts.some((alert) => alert.severity === SEVERITY.CRITICAL), [alerts]);
+    const isCriticalFilterActive = useMemo(() => _isEmpty(localFilters.severity) ||
+        _castArray(localFilters.severity ?? []).includes(SEVERITY.CRITICAL), [localFilters.severity]);
+    const shouldBeep = !isDemoMode && isSoundEnabled && hasCriticalAlert && isCriticalFilterActive;
+    useBeepSound({ isAllowed: confirmed && shouldBeep });
+    const handleSearchChange = (tags) => {
+        onFilterTagsChange(tags);
+    };
+    const columns = useMemo(() => getAlertsTableColumns({ getFormattedDate }), [getFormattedDate]);
+    // Changing this key remounts DataTable, resetting its internal sort to DEFAULT_SORTING.
+    // This replaces the old controlled-sorting + useEffect pattern that triggered a
+    // "state update before mount" warning via Radix useControllableState.
+    const tableKey = useMemo(() => `${filterTags.join('\0')}|${JSON.stringify(localFilters)}|${selectedAlertId ?? ''}`, [filterTags, localFilters, selectedAlertId]);
+    return (_jsxs("div", { className: cn('mdk-alerts-current', className), children: [_jsx(AlertConfirmationModal, { isOpen: !confirmed && !isDemoMode, onOk: handleConfirmed }), _jsx(AlertsTableTitle, { title: "Current Alerts", subtitle: _jsx(TagFilterBar, { filterTags: filterTags, localFilters: localFilters, onSearchTagsChange: handleSearchChange, onLocalFiltersChange: onLocalFiltersChange, typeFiltersForSite: typeFiltersForSite }) }), _jsx(DataTable, { data: alerts, columns: columns, loading: isLoading, defaultSorting: DEFAULT_SORTING, getRowId: (record) => record.uuid }, tableKey)] }));
+};

package/dist/domain/components/alerts/historical-alerts/historical-alerts.d.ts

@@ -0,0 +1,60 @@
+import type { JSX } from 'react';
+import type { AlertRecord } from '../../../types/alerts';
+import type { AlertLocalFilters } from '../alerts-types';
+import '../alerts-panel.scss';
+export type HistoricalAlertsRange = {
+    /** Range start, epoch ms; seeds the picker's `from` date */
+    start: number;
+    /** Range end, epoch ms; seeds the picker's `to` date */
+    end: number;
+};
+export type HistoricalAlertsProps = {
+    /**
+     * Pre-fetched historical alerts log entries (each with a `thing` device payload).
+     * @default []
+     */
+    alerts?: AlertRecord[];
+    /**
+     * Show DataTable loading overlay
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Filters and search tags coming from the parent (typically shared with `CurrentAlerts`).
+     */
+    localFilters: AlertLocalFilters;
+    /** Shared with `CurrentAlerts` */
+    filterTags: string[];
+    /**
+     * Selected date range for the historical query (controlled).
+     */
+    dateRange: HistoricalAlertsRange;
+    /** Setter for the date range */
+    onDateRangeChange: (range: HistoricalAlertsRange) => void;
+    /** Called when the user opens an alert */
+    onAlertClick?: (id?: string, uuid?: string) => void;
+    /** Additional class names */
+    className?: string;
+};
+/**
+ * Sortable data table of historical alerts within a controlled date range.
+ * Renders a header with title + `DateRangePicker`, then the table.
+ *
+ * @category tables
+ * @kernelCapability incident-alerts
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <HistoricalAlerts
+ *   alerts={alerts}
+ *   localFilters={localFilters}
+ *   filterTags={filterTags}
+ *   dateRange={{ start, end }}
+ *   onDateRangeChange={setRange}
+ *   onAlertClick={(id) => router.push(`/alerts/${id}`)}
+ * />
+ * ```
+ * @tier agent-ready
+ */
+export declare const HistoricalAlerts: ({ alerts, isLoading, localFilters, filterTags, dateRange, onDateRangeChange, onAlertClick, className, }: HistoricalAlertsProps) => JSX.Element;

package/dist/domain/components/alerts/historical-alerts/historical-alerts.example.d.ts

@@ -0,0 +1 @@
+export declare const HistoricalAlertsExample: () => import("react").JSX.Element;

package/dist/domain/components/alerts/historical-alerts/historical-alerts.example.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for HistoricalAlerts.
+ *
+ * Wrap the page in `<MdkProvider>` so the `useTimezoneFormatter` hook used by
+ * the table can read the timezone store.
+ */
+import { useState } from 'react';
+import { HistoricalAlerts } from '@tetherto/mdk-react-devkit';
+const NOW = Date.now();
+const DAY = 24 * 60 * 60 * 1000;
+const mockAlerts = [
+    {
+        id: '1',
+        uuid: 'alrt-1',
+        severity: 'critical',
+        name: 'miner_offline',
+        description: 'Miner 0xA1 has stopped reporting.',
+        code: '001',
+        createdAt: NOW - 2 * DAY,
+        thing: { id: 'miner-A1' },
+    },
+    {
+        id: '2',
+        uuid: 'alrt-2',
+        severity: 'warning',
+        name: 'temp_high',
+        description: 'Container 03 exceeded 78°C.',
+        code: '002',
+        createdAt: NOW - 5 * DAY,
+        thing: { id: 'container-03' },
+    },
+];
+export const HistoricalAlertsExample = () => {
+    const [range, setRange] = useState({ start: NOW - 7 * DAY, end: NOW });
+    return (_jsx(HistoricalAlerts, { alerts: mockAlerts, isLoading: false, localFilters: {}, filterTags: [], dateRange: range, onDateRangeChange: setRange, onAlertClick: (id) => {
+            // oxlint-disable-next-line no-console
+            console.log(`open alert ${id}`);
+        } }));
+};

package/dist/domain/components/alerts/historical-alerts/historical-alerts.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { cn, DataTable, DateRangePicker } from '../../../../primitives/index.js';
+import { useTimezoneFormatter } from '@tetherto/mdk-react-adapter';
+import { getAlertsTableColumns } from '../alerts-table-columns';
+import { getHistoricalAlertsData } from '../alerts-utils';
+import { AlertsTableTitle } from '../alerts-table-title/alerts-table-title';
+const DEFAULT_SORTING = [
+    { id: 'severity', desc: true },
+    { id: 'createdAt', desc: true },
+];
+/**
+ * Sortable data table of historical alerts within a controlled date range.
+ * Renders a header with title + `DateRangePicker`, then the table.
+ *
+ * @category tables
+ * @kernelCapability incident-alerts
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <HistoricalAlerts
+ *   alerts={alerts}
+ *   localFilters={localFilters}
+ *   filterTags={filterTags}
+ *   dateRange={{ start, end }}
+ *   onDateRangeChange={setRange}
+ *   onAlertClick={(id) => router.push(`/alerts/${id}`)}
+ * />
+ * ```
+ * @tier agent-ready
+ */
+export const HistoricalAlerts = ({ alerts = [], isLoading = false, localFilters, filterTags, dateRange, onDateRangeChange, onAlertClick, className, }) => {
+    const { getFormattedDate } = useTimezoneFormatter();
+    const [sorting, setSorting] = useState(DEFAULT_SORTING);
+    const data = useMemo(() => getHistoricalAlertsData(alerts, {
+        filterTags,
+        localFilters,
+        onAlertClick: (id, uuid) => onAlertClick?.(id, uuid),
+    }), [alerts, filterTags, localFilters, onAlertClick]);
+    const columns = useMemo(() => getAlertsTableColumns({ getFormattedDate }), [getFormattedDate]);
+    const selectedRange = useMemo(() => ({ from: new Date(dateRange.start), to: new Date(dateRange.end) }), [dateRange]);
+    const handleRangeChange = (range) => {
+        if (!range?.from || !range.to)
+            return;
+        onDateRangeChange({ start: range.from.getTime(), end: range.to.getTime() });
+    };
+    return (_jsxs("div", { className: cn('mdk-alerts-historical', className), children: [_jsx(AlertsTableTitle, { title: "Historical Alerts Log", subtitle: _jsx(DateRangePicker, { selected: selectedRange, onSelect: handleRangeChange }) }), _jsx(DataTable, { data: data, columns: columns, loading: isLoading, sorting: sorting, onSortingChange: setSorting, getRowId: (record) => record.uuid })] }));
+};

package/dist/domain/components/alerts/index.d.ts

@@ -0,0 +1,9 @@
+export * from './alerts-table-columns';
+export * from './alerts-table-title/alerts-table-title';
+export * from './alerts-types';
+export { applyAlertsLocalFilters, getAlertMatchHints, getAlertsForDevices, getCurrentAlerts, getHistoricalAlertsData, onLogClicked, } from './alerts-utils';
+export * from './current-alerts/alert-confirmation-modal/alert-confirmation-modal';
+export * from './current-alerts/current-alerts';
+export * from './historical-alerts/historical-alerts';
+export * from './tag-filter-bar/tag-filter-bar';
+export * from './tag-filter-bar/tag-filter-bar.const';

package/dist/domain/components/alerts/index.js

@@ -0,0 +1,9 @@
+export * from './alerts-table-columns';
+export * from './alerts-table-title/alerts-table-title';
+export * from './alerts-types';
+export { applyAlertsLocalFilters, getAlertMatchHints, getAlertsForDevices, getCurrentAlerts, getHistoricalAlertsData, onLogClicked, } from './alerts-utils';
+export * from './current-alerts/alert-confirmation-modal/alert-confirmation-modal';
+export * from './current-alerts/current-alerts';
+export * from './historical-alerts/historical-alerts';
+export * from './tag-filter-bar/tag-filter-bar';
+export * from './tag-filter-bar/tag-filter-bar.const';

package/dist/domain/components/alerts/tag-filter-bar/tag-filter-bar.const.d.ts

@@ -0,0 +1,6 @@
+import type { CascaderOption } from '../../../../primitives/index.js';
+export declare const FILTERABLE_MINER_STATUSES: Record<string, string>;
+export declare const ALERT_SEVERITY_OPTIONS: CascaderOption[];
+export declare const ALERT_STATUS_OPTIONS: CascaderOption[];
+export declare const ALERT_TYPE_DEFAULT_CHILDREN: CascaderOption[];
+export declare const ALERTS_FILTER_OPTIONS: CascaderOption[];

package/dist/domain/components/alerts/tag-filter-bar/tag-filter-bar.const.js

@@ -0,0 +1,43 @@
+import _capitalize from 'lodash/capitalize';
+import _map from 'lodash/map';
+import { MinerStatuses } from '../../../constants/device-constants';
+import { TYPE_FILTER_MAP } from './type-filter-map';
+export const FILTERABLE_MINER_STATUSES = {
+    Mining: MinerStatuses.MINING,
+    Offline: MinerStatuses.OFFLINE,
+    Sleeping: MinerStatuses.SLEEPING,
+    Error: MinerStatuses.ERROR,
+    'Not Mining': MinerStatuses.NOT_MINING,
+};
+export const ALERT_SEVERITY_OPTIONS = [
+    { label: 'Critical', value: 'critical' },
+    { label: 'High', value: 'high' },
+    { label: 'Medium', value: 'medium' },
+];
+export const ALERT_STATUS_OPTIONS = _map(FILTERABLE_MINER_STATUSES, (value, label) => ({
+    label: _capitalize(label),
+    value,
+}));
+export const ALERT_TYPE_DEFAULT_CHILDREN = [
+    TYPE_FILTER_MAP.CONTAINER,
+    TYPE_FILTER_MAP.MINER,
+    TYPE_FILTER_MAP.LV_CABINET,
+    TYPE_FILTER_MAP.POOL,
+];
+export const ALERTS_FILTER_OPTIONS = [
+    {
+        label: 'Status',
+        value: 'status',
+        children: ALERT_STATUS_OPTIONS,
+    },
+    {
+        label: 'Severity',
+        value: 'severity',
+        children: ALERT_SEVERITY_OPTIONS,
+    },
+    {
+        label: 'Type',
+        value: 'type',
+        children: ALERT_TYPE_DEFAULT_CHILDREN,
+    },
+];