diff --git a/client/src/Components/v2/inputs/Dialog.tsx b/client/src/Components/v2/inputs/Dialog.tsx
index 373d95023..77c59f1e2 100644
--- a/client/src/Components/v2/inputs/Dialog.tsx
+++ b/client/src/Components/v2/inputs/Dialog.tsx
@@ -16,6 +16,8 @@ export const DialogInput = ({
confirmColor = "primary",
cancelColor = "error",
loading = false,
+ cancelText,
+ confirmText,
}: {
open: boolean;
title?: string;
@@ -25,6 +27,8 @@ export const DialogInput = ({
confirmColor?: "error" | "primary";
cancelColor?: "error" | "primary";
loading?: boolean;
+ cancelText?: string;
+ confirmText?: string;
}) => {
const { t } = useTranslation();
return (
@@ -40,7 +44,7 @@ export const DialogInput = ({
color={cancelColor}
onClick={onCancel}
>
- {t("common.buttons.cancel")}
+ {cancelText ?? t("common.buttons.cancel")}
diff --git a/client/src/Pages/Incidents/Components/IncidentTable.tsx b/client/src/Pages/Incidents/Components/IncidentTable.tsx
index f8346d2b9..6be0ecbbc 100644
--- a/client/src/Pages/Incidents/Components/IncidentTable.tsx
+++ b/client/src/Pages/Incidents/Components/IncidentTable.tsx
@@ -1,4 +1,5 @@
import { Table } from "@/Components/v2/design-elements";
+import { Pagination } from "@/Components/v2/design-elements/Table";
import type { Header } from "@/Components/v2/design-elements/Table";
import { StatusLabel, ValueLabel } from "@/Components/v2/design-elements";
import type { ValueType } from "@/Components/v2/design-elements/StatusLabel";
@@ -14,10 +15,16 @@ import { useSelector } from "react-redux";
import type { RootState } from "@/Types/state";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
interface IncidentsTableProps {
incidents?: Incident[];
monitors?: Monitor[];
+ incidentsCount: number;
+ page: number;
+ setPage: (page: number) => void;
+ rowsPerPage: number;
+ setRowsPerPage: (rowsPerPage: number) => void;
onOpenDetails?: (incidentId: string) => void;
onResolve?: (incidentId: string) => void;
}
@@ -25,6 +32,11 @@ interface IncidentsTableProps {
export const IncidentsTable = ({
incidents,
monitors,
+ incidentsCount,
+ page,
+ setPage,
+ rowsPerPage,
+ setRowsPerPage,
onOpenDetails,
onResolve,
}: IncidentsTableProps) => {
@@ -162,13 +174,41 @@ export const IncidentsTable = ({
];
};
+ const handlePageChange = (
+ _e: React.MouseEvent | null,
+ newPage: number
+ ) => {
+ setPage(newPage);
+ };
+
+ const handleRowsPerPageChange = (
+ e: React.ChangeEvent
+ ) => {
+ const value = Number(e.target.value);
+ setPage(0);
+ setRowsPerPage(value);
+ };
+
if (!incidents || !monitors) {
return null;
}
- void getHeaders;
- void Table;
-
- // Headers: Monitor name, status, start time, end time, resolution type, status code, message, actions
- return "Table here";
+ return (
+
+ onOpenDetails?.(row.id)}
+ emptyViewText={t("common.table.empty")}
+ />
+
+
+ );
};
diff --git a/client/src/Pages/Incidents/index.tsx b/client/src/Pages/Incidents/index.tsx
index 667af29e0..abf605e8d 100644
--- a/client/src/Pages/Incidents/index.tsx
+++ b/client/src/Pages/Incidents/index.tsx
@@ -5,6 +5,7 @@ import {
SummaryCardLatestIncidents,
SummaryCardStats,
} from "@/Pages/Incidents/Components/SummaryCard";
+import { IncidentsTable } from "@/Pages/Incidents/Components/IncidentTable";
import { useGet } from "@/Hooks/UseApi";
import { useState, useEffect, useMemo } from "react";
@@ -96,21 +97,23 @@ const IncidentsPage = () => {
void setFilter;
void dateRange;
void setDateRange;
- void page;
- void setPage;
- void rowsPerPage;
- void setRowsPerPage;
void isLoadingIncidents;
void isLoadingMonitors;
void isLoadingSummary;
void refetchIncidents;
void refetchSummary;
void monitorLookup;
- void incidents;
- void incidentsCount;
void summaryData;
void networkError;
+ const handleOpenDetails = (incidentId: string) => {
+ console.log("Open details for incident:", incidentId);
+ };
+
+ const handleResolve = (incidentId: string) => {
+ console.log("Resolve incident:", incidentId);
+ };
+
return (
{
/>
+
);
};