Openstatus
www.openstatus.dev
feat: add duration to incident data table (#706)
authored by
Maximilian Kaske
and committed by
GitHub
ac553a23
61a5610a
+22
+22
apps/web/src/components/data-table/incident/columns.tsx
+22
apps/web/src/components/data-table/incident/columns.tsx
···
2
2
3
3
import Link from "next/link";
4
4
import type { ColumnDef } from "@tanstack/react-table";
5
+
import { formatDistanceStrict } from "date-fns";
5
6
6
7
import type { Incident } from "@openstatus/db/src/schema";
7
8
···
70
71
);
71
72
},
72
73
},
74
+
{
75
+
header: "Duration",
76
+
cell: ({ row }) => {
77
+
const { startedAt, resolvedAt } = row.original;
73
78
79
+
if (!resolvedAt) {
80
+
return <span className="text-muted-foreground">-</span>;
81
+
}
82
+
83
+
const duration = formatDistanceStrict(
84
+
new Date(startedAt),
85
+
new Date(resolvedAt),
86
+
);
87
+
return (
88
+
<div className="flex">
89
+
<span className="text-muted-foreground max-w-[150px] truncate sm:max-w-[200px] lg:max-w-[250px] xl:max-w-[350px]">
90
+
{duration}
91
+
</span>
92
+
</div>
93
+
);
94
+
},
95
+
},
74
96
{
75
97
id: "actions",
76
98
cell: ({ row }) => {