diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 4c328a364..d150b11ad 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -42,6 +42,7 @@ const Incidents = () => { const theme = useTheme(); const navigate = useNavigate(); const authState = useSelector((state) => state.auth); + const [monitors, setMonitors] = useState({}); const [selectedMonitor, setSelectedMonitor] = useState("0"); const [loading, setLoading] = useState(false); @@ -49,21 +50,11 @@ const Incidents = () => { // TODO do something with these filters const [filter, setFilter] = useState("all"); - let data = { - cols: [ - { id: 1, name: "Status" }, - { id: 2, name: "Timestamp" }, - { id: 3, name: "Monitor" }, - { id: 4, name: "Message" }, - ], - rows: [], - }; - useEffect(() => { - const fetchIncidents = async () => { + const fetchMonitors = async () => { setLoading(true); const res = await axiosInstance.get( - `/monitors/user/${authState.user._id}?status=false`, + `/monitors/user/${authState.user._id}?status=false&limit=1`, { headers: { Authorization: `Bearer ${authState.authToken}`, @@ -82,58 +73,19 @@ const Incidents = () => { setLoading(false); }; - fetchIncidents(); + fetchMonitors(); }, [authState]); const handleSelect = (event) => { setSelectedMonitor(event.target.value); }; - let incidents = []; - let hasAnyIncidents = false; - let hasSpecificIncidents = false; - if (selectedMonitor === "0") { - Object.values(monitors).forEach((monitor) => { - incidents = incidents.concat(monitor.checks); - }); - if (incidents.length !== 0) hasAnyIncidents = true; - hasSpecificIncidents = hasAnyIncidents; - } else { - const monitor = monitors[selectedMonitor]; - incidents = monitor.checks; - if (incidents.length !== 0) hasSpecificIncidents = true; - hasAnyIncidents = true; - } - incidents = incidents - .sort((a, b) => { - return new Date(b.createdAt) - new Date(a.createdAt); - }) - .filter((incident) => { - if (filter === "all") return true; - else if (filter === "resolve") return incident.statusCode === 5000; - else if (filter === "down") return incident.status === false; - }) - .map((incident, idx) => { - return { - id: idx, - data: [ - { - id: idx + 0, - data: , - }, - { id: idx + 1, data: new Date(incident.createdAt).toLocaleString() }, - { id: idx + 2, data: monitors[incident.monitorId].name }, - { id: idx + 3, data: incident.statusCode }, - ], - }; - }); - data.rows = incidents; return ( <> {loading ? ( - ) : hasAnyIncidents ? ( + ) : false ? ( <> Incident history for: @@ -178,7 +130,7 @@ const Incidents = () => { )} {hasAnyIncidents && hasSpecificIncidents ? ( - +
thing
) : ( The monitor you have selected, has no recorded incidents yet.