Alarm Developer Notes

This document is generated from alarm-related frontend and backend source files. It is intended to help developers understand the implemented behavior, available actions, and evidence captured during extraction.

Scan Summary

• Frontend files scanned: 46
• Backend files scanned: 16
• Total files scanned: 62

Pages

• Alarms alarms-list-page
• Alarm Details alarm-details-page

Tables

alarms-table

Columns:

• Alarm
• Severity
• Status
• Ack
• Device
• Key
• Value
• Created
• Updated
• Actions

Controls

• Refresh refresh-alarms
• Ack acknowledge-alarm
• Clear clear-alarm
• Open open-dashboard-from-alarm
• Details open-alarm-details
• Select Dashboard select-dashboard
• Select Dashboard State select-dashboard-state
• Export PDF export-alarm-pdf
• Print print-alarm

Behavior Flows

acknowledge-alarm-flow

1. Locate an active alarm that has not yet been acknowledged.
2. Click Acknowledge.
3. The system marks the alarm as acknowledged.
4. The alarm list refreshes to show the updated acknowledgement state.

clear-alarm-flow

1. Locate an active alarm.
2. Click Clear.
3. Confirm the clear action if confirmation is required by the UI.
4. The system clears the alarm.
5. The alarm list refreshes to reflect the updated status.

open-dashboard-from-alarm-flow

1. Select the destination dashboard and dashboard state if required by the current UI.
2. Click Open for the alarm row you want to investigate.
3. The dashboard opens in the configured state.
4. The device context from the alarm is applied so related widgets can focus on that device.

open-alarm-details-flow

1. Click Details for the alarm.
2. The alarm details page opens for the selected alarm.

export-pdf-flow

1. Open the alarm details page.
2. Click Export PDF.
3. The system prepares a PDF version of the visible alarm details.
4. The generated file is downloaded.

print-alarm-flow

1. Open the alarm details page.
2. Click Print.
3. The system opens the print flow for the current alarm details view.

Constraints

• An alarm can only be acknowledged when it is active and not already acknowledged.
• An alarm can only be cleared when its status is ACTIVE.
• A dashboard must be configured before the Open action can navigate to a dashboard.
• Available dashboard states depend on the selected dashboard.
• The alarm details page may show a not-found state when the requested alarm does not exist.
• PDF export depends on rendering the alarm details view before the file is generated.

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (page)

return "green"; case "CLEARED": return "gray"; default: return "blue"; } } export default function AlarmDetailsPage() { const { alarmId } = useParams(); const navigate = useNavigate(); const exportRef = useRef<HTMLDivElement | null>(null); const [loading, setLoading] = useState(true);

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (page)

return "green"; case "CLEARED": return "gray"; default: return "blue"; } } export default function AlarmDetailsPage() { const { alarmId } = useParams(); const navigate = useNavigate(); const exportRef = useRef<HTMLDivElement | null>(null); const [loading, setLoading] = useState(true);

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmListPage.tsx (table)

ntityName, source: "alarm", alarmId: record.alarm_id, }, }); } const columns = [ { title: "Alarm", dataIndex: "rule_name", render: (v: string) => v || "—", }, { title: "Severity", dataIndex: "severity", render: (v: string) => <Tag color={sev

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (control)

seParams, useNavigate } from "react-router-dom"; import { ArrowLeftOutlined, PrinterOutlined, ReloadOutlined, FilePdfOutlined, } from "@ant-design/icons"; import html2canvas from "html2canvas"; import jsPDF from "jspdf"; import { alarmsApi } from "../../api/alarms.api"; const { Title, Text } = Typography; fun

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (control)

13 }}> {alarm.status || "—"} </Tag> {alarm.acknowledged ? ( <Tag color="green" style={{ fontSize: 13 }}> ACKNOWLEDGED </Tag> ) : ( <Tag color="red" style={{ fontSi

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmListPage.tsx (control)

Modal, message, Card, Empty, Alert, Select, } from "antd"; import { CheckOutlined, StopOutlined, ReloadOutlined, ExportOutlined, EyeOutlined, } from "@ant-design/icons"; import { useNavigate } from "react-router-dom"; import api from "../../api/apiClient"; import { alarmsApi } from "../../api/al

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmListPage.tsx (control)

ty, Alert, Select, } from "antd"; import { CheckOutlined, StopOutlined, ReloadOutlined, ExportOutlined, EyeOutlined, } from "@ant-design/icons"; import { useNavigate } from "react-router-dom"; import api from "../../api/apiClient"; import { alarmsApi } from "../../api/alarms.api"; import { dashboardsApi

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (control)

LEARED": return "gray"; default: return "blue"; } } export default function AlarmDetailsPage() { const { alarmId } = useParams(); const navigate = useNavigate(); const exportRef = useRef<HTMLDivElement | null>(null); const [loading, setLoading] = useState(true); const [exportingPdf, setExp

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmListPage.tsx (control)

{ Table, Typography, Tag, Space, Button, Modal, message, Card, Empty, Alert, Select, } from "antd"; import { CheckOutlined, StopOutlined, ReloadOutlined, ExportOutlined, EyeOutlined, } from "@ant-design/icons"; import { useNavigate } from "react-router-dom"; import api from "../../api/

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmListPage.tsx (control)

const ATTR_TARGET_DASHBOARD_ID = "alarms.targetDashboardId"; const ATTR_TARGET_STATE_ID = "alarms.targetStateId"; const ATTR_DEVICE_TYPE = "alarms.deviceType"; type AlarmRecord = { alarm_id: string; device_id: string; device_name?: string; device_type?: string; rule_name?: string; severity?: string; st

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (control)

ate } from "react-router-dom"; import { ArrowLeftOutlined, PrinterOutlined, ReloadOutlined, FilePdfOutlined, } from "@ant-design/icons"; import html2canvas from "html2canvas"; import jsPDF from "jspdf"; import { alarmsApi } from "../../api/alarms.api"; const { Title, Text } = Typography; function formatDateTi

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (control)

"antd"; import { useParams, useNavigate } from "react-router-dom"; import { ArrowLeftOutlined, PrinterOutlined, ReloadOutlined, FilePdfOutlined, } from "@ant-design/icons"; import html2canvas from "html2canvas"; import jsPDF from "jspdf"; import { alarmsApi } from "../../api/alarms.api"; const { Title, Text }

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (acknowledge-alarm-flow)

13 }}> {alarm.status || "—"} </Tag> {alarm.acknowledged ? ( <Tag color="green" style={{ fontSize: 13 }}> ACKNOWLEDGED </Tag> ) : ( <Tag color="red" style={{ fontSi

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (clear-alarm-flow)

return "default"; } } function statusColor(status?: string) { switch (status) { case "ACTIVE": return "red"; case "CLEARED": return "green"; default: return "default"; } } function eventColor(type?: string) { switch (type) { case "CREATED": return "blue"; case

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (open-dashboard-from-alarm-flow)

<Space> <Button icon={<ArrowLeftOutlined />} onClick={() => navigate(-1)} > Back </Button> <Button icon={<ReloadOutlined />} onClick={load} > Refresh </Button> </Space>

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (open-alarm-details-flow)

se "CLEARED": return "gray"; default: return "blue"; } } export default function AlarmDetailsPage() { const { alarmId } = useParams(); const navigate = useNavigate(); const exportRef = useRef<HTMLDivElement | null>(null); const [loading, setLoading] = useState(true); const [exportingPdf, s

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (export-pdf-flow)

ate } from "react-router-dom"; import { ArrowLeftOutlined, PrinterOutlined, ReloadOutlined, FilePdfOutlined, } from "@ant-design/icons"; import html2canvas from "html2canvas"; import jsPDF from "jspdf"; import { alarmsApi } from "../../api/alarms.api"; const { Title, Text } = Typography; function formatDateTi

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (print-alarm-flow)

"antd"; import { useParams, useNavigate } from "react-router-dom"; import { ArrowLeftOutlined, PrinterOutlined, ReloadOutlined, FilePdfOutlined, } from "@ant-design/icons"; import html2canvas from "html2canvas"; import jsPDF from "jspdf"; import { alarmsApi } from "../../api/alarms.api"; const { Title, Text }

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (constraint)

t canvas = await html2canvas(exportRef.current, { scale: 2, useCORS: true, backgroundColor: "#ffffff", logging: false, }); const imgData = canvas.toDataURL("image/png"); const pdf = new jsPDF("p", "mm", "a4"); const pageWidth = pdf.internal.pageSize.getWidth();

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (constraint)

return "default"; } } function statusColor(status?: string) { switch (status) { case "ACTIVE": return "red"; case "CLEARED": return "green"; default: return "default"; } } function eventColor(type?: string) { switch (type) { case "CREATED": return "blue"; case

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmListPage.tsx (constraint)

ards/sdk/useAlarms"; const { Title, Text } = Typography; const ATTR_TARGET_DASHBOARD_ID = "alarms.targetDashboardId"; const ATTR_TARGET_STATE_ID = "alarms.targetStateId"; const ATTR_DEVICE_TYPE = "alarms.deviceType"; type AlarmRecord = { alarm_id: string; device_id: string; device_name?: string; device_type?

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmListPage.tsx (constraint)

const ATTR_TARGET_DASHBOARD_ID = "alarms.targetDashboardId"; const ATTR_TARGET_STATE_ID = "alarms.targetStateId"; const ATTR_DEVICE_TYPE = "alarms.deviceType"; type AlarmRecord = { alarm_id: string; device_id: string; device_name?: string; device_type?: string; rule_name?: string; severity?: string; st

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (constraint)

<Spin size="large" /> </div> ) : !alarm ? ( <Empty description="Alarm not found" /> ) : ( <Space direction="vertical" size={16} style={{ width: "100%" }}> <Card className="print-card"> <div style={{ display: "fle

/home/runner/work/autoconnecto-workspace/autoconnecto-workspace/frontend/src/features/alarms/AlarmDetailsPage.tsx (constraint)

dfOutlined, } from "@ant-design/icons"; import html2canvas from "html2canvas"; import jsPDF from "jspdf"; import { alarmsApi } from "../../api/alarms.api"; const { Title, Text } = Typography; function formatDateTime(ts?: number | null) { if (!ts) return "—"; const d = new Date(Number(ts)); if (Number.isNaN(d.ge