openstatus.dev
Openstatus
www.openstatus.dev
chore: small incremental improvements for dashboard (#1329)
* chore: increase sheet max width
* chore: add body to reponse data-table
* chore: incident visibility on overview
* fix: format
* fix: tsc
authored by
Maximilian Kaske
and committed by
GitHub
626fbabd
ab8c37c6
+42
-6
+4
-2
apps/dashboard/src/app/(dashboard)/overview/page.tsx
+4
-2
apps/dashboard/src/app/(dashboard)/overview/page.tsx
···
103
103
icon: List,
104
104
},
105
105
{
106
-
title: "Recent Incident",
106
+
title: lastIncident?.resolvedAt ? "Recent Incident" : "Active Incident",
107
107
value: incidentDistance,
108
108
disabled: !lastIncident?.monitorId,
109
109
href: `/monitors/${lastIncident?.monitorId}/incidents`,
110
-
variant: "default" as const,
110
+
variant: lastIncident?.resolvedAt
111
+
? ("default" as const)
112
+
: ("warning" as const),
111
113
icon: Search,
112
114
},
113
115
{
+16
-1
apps/dashboard/src/components/content/block-wrapper.tsx
+16
-1
apps/dashboard/src/components/content/block-wrapper.tsx
···
13
13
export function BlockWrapper({
14
14
className,
15
15
children,
16
+
autoOpen,
16
17
...props
17
-
}: React.HTMLAttributes<HTMLDivElement>) {
18
+
}: React.HTMLAttributes<HTMLDivElement> & {
19
+
autoOpen?: boolean;
20
+
}) {
21
+
const ref = React.useRef<HTMLDivElement>(null);
18
22
const [isOpened, setIsOpened] = React.useState(false);
19
23
24
+
React.useEffect(() => {
25
+
if (ref.current && autoOpen) {
26
+
const height = ref.current.scrollHeight;
27
+
// NOTE: max-h-48 in tw equals 192px (48 * 4px)
28
+
if (height <= 192) {
29
+
setIsOpened(true);
30
+
}
31
+
}
32
+
}, [autoOpen]);
33
+
20
34
return (
21
35
<Collapsible open={isOpened} onOpenChange={setIsOpened}>
22
36
<div className={cn("relative overflow-hidden", className)} {...props}>
23
37
<CollapsibleContent
24
38
forceMount
39
+
ref={ref}
25
40
className={cn("overflow-hidden", !isOpened && "max-h-48")}
26
41
>
27
42
{children}
+17
apps/dashboard/src/components/data-table/response-logs/data-table-basics.tsx
+17
apps/dashboard/src/components/data-table/response-logs/data-table-basics.tsx
···
1
1
"use client";
2
2
3
+
import { BlockWrapper } from "@/components/content/block-wrapper";
3
4
import { TableCellDate } from "@/components/data-table/table-cell-date";
4
5
import { TableCellNumber } from "@/components/data-table/table-cell-number";
5
6
import {
···
241
242
<pre className="max-w-full overflow-x-auto whitespace-pre-wrap rounded-none bg-muted/50 p-2 font-mono text-sm">
242
243
{data.message}
243
244
</pre>
245
+
</TableCell>
246
+
</TableRow>
247
+
</>
248
+
) : null}
249
+
{data.body ? (
250
+
<>
251
+
<TableRow>
252
+
<TableHead colSpan={2}>Body</TableHead>
253
+
</TableRow>
254
+
<TableRow>
255
+
<TableCell colSpan={2} className="p-0">
256
+
<BlockWrapper autoOpen>
257
+
<pre className="max-w-full overflow-x-auto whitespace-pre-wrap rounded-none bg-muted/50 p-2 font-mono text-sm">
258
+
{data.body}
259
+
</pre>
260
+
</BlockWrapper>
244
261
</TableCell>
245
262
</TableRow>
246
263
</>
+1
apps/dashboard/src/components/data-table/response-logs/data-table-sheet-test.tsx
+1
apps/dashboard/src/components/data-table/response-logs/data-table-sheet-test.tsx
+1
-1
apps/dashboard/src/components/forms/notifications/sheet.tsx
+1
-1
apps/dashboard/src/components/forms/notifications/sheet.tsx
+1
-1
apps/dashboard/src/components/forms/status-report-update/sheet.tsx
+1
-1
apps/dashboard/src/components/forms/status-report-update/sheet.tsx
···
29
29
return (
30
30
<FormSheet open={open} onOpenChange={setOpen}>
31
31
<FormSheetTrigger asChild>{children}</FormSheetTrigger>
32
-
<FormSheetContent>
32
+
<FormSheetContent className="sm:max-w-lg">
33
33
<FormSheetHeader>
34
34
<FormSheetTitle>Status Report Update</FormSheetTitle>
35
35
<FormSheetDescription>
+1
-1
apps/dashboard/src/components/forms/status-report/sheet.tsx
+1
-1
apps/dashboard/src/components/forms/status-report/sheet.tsx
···
35
35
return (
36
36
<FormSheet open={open} onOpenChange={setOpen}>
37
37
<FormSheetTrigger asChild>{children}</FormSheetTrigger>
38
-
<FormSheetContent>
38
+
<FormSheetContent className="sm:max-w-lg">
39
39
<FormSheetHeader>
40
40
<FormSheetTitle>Status Report</FormSheetTitle>
41
41
<FormSheetDescription>
+1
packages/tinybird/src/client.ts
+1
packages/tinybird/src/client.ts