Skip to content

Commit ab79081

Browse files
atrakhConvex, Inc.
authored andcommitted
dashboard: address issues with UX of log page output messages (#41956)
- Allows selecting text within LogListItem and DeploymentEventListItem so multiple logs can be copied at once - If text is selected on the page, disable the copy override on the logs page so multiple logs can be copied - Adds a vertical resizable panel between the log message and metadata tabs in LogDrilldown - Various styling improvements - Filters out an event type for deployment events that we no longer want to display (build_indexes which overlaps with push_config) GitOrigin-RevId: c6bb33c235b2e17d68309e3b39325801bfe7a037
1 parent e5bc3f7 commit ab79081

File tree

4 files changed

+261
-164
lines changed

4 files changed

+261
-164
lines changed

npm-packages/dashboard-common/src/features/logs/components/DeploymentEventListItem.tsx

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,20 @@ import { DeploymentInfoContext } from "@common/lib/deploymentContext";
99

1010
export function DeploymentEventListItem({
1111
event,
12-
inline = false,
1312
focused = false,
1413
hitBoundary,
1514
setShownLog,
1615
logKey,
1716
}: {
1817
event: DeploymentAuditLogEvent;
19-
inline?: boolean;
2018
focused?: boolean;
2119
hitBoundary?: "top" | "bottom" | null;
22-
setShownLog?: () => void;
20+
setShownLog: () => void;
2321
logKey?: string;
2422
}) {
2523
const { TeamMemberLink } = useContext(DeploymentInfoContext);
2624
const timestamp = formatDateTime(new Date(event._creationTime));
2725

28-
const handleClick = () => {
29-
if (setShownLog) {
30-
setShownLog();
31-
}
32-
};
33-
3426
// Only show boundary animation on the focused item
3527
const showBoundary = focused && hitBoundary;
3628

@@ -47,21 +39,26 @@ export function DeploymentEventListItem({
4739
data-log-key={logKey}
4840
className={classNames(
4941
"animate-fadeInFromLoading",
50-
"group pl-3 flex items-center gap-3 w-full text-xs",
51-
inline ? "items-start" : "pl-1 items-center",
52-
setShownLog && "hover:bg-background-tertiary/70",
53-
setShownLog &&
54-
"focus:outline-none focus:border focus:border-border-selected",
42+
"group flex items-center gap-3 w-full text-xs items-center",
43+
"hover:bg-background-tertiary/70",
44+
"focus:outline-none focus:border-y focus:border-border-selected",
5545
focused && "bg-background-highlight",
46+
"select-text",
5647
)}
5748
style={{
5849
height: ITEM_SIZE,
5950
}}
60-
onClick={handleClick}
61-
onFocus={handleClick}
62-
tabIndex={setShownLog ? 0 : -1}
51+
onClick={setShownLog}
52+
onFocus={(e) => {
53+
// Only set shown log if focus is on the button itself,
54+
// not on child elements (like links)
55+
if (e.target === e.currentTarget) {
56+
setShownLog();
57+
}
58+
}}
59+
tabIndex={0}
6360
>
64-
<div className="min-w-[9.25rem] text-left font-mono whitespace-nowrap text-content-primary">
61+
<div className="min-w-[9.25rem] pl-3 text-left font-mono whitespace-nowrap text-content-primary">
6562
{timestamp}
6663
<span className="text-content-secondary">
6764
.
@@ -72,8 +69,7 @@ export function DeploymentEventListItem({
7269
</span>
7370
</div>
7471

75-
{/* Blank lines for when deployment event list items are displayed as items in the logs page */}
76-
{!inline && <hr className="min-w-[10.375rem] bg-background-tertiary" />}
72+
<hr className="min-w-[10.375rem] bg-background-tertiary" />
7773

7874
<div className="flex h-6 items-center gap-2 truncate">
7975
<GearIcon className="shrink-0" />

0 commit comments

Comments
 (0)