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 ( { /> + ); };