Skip to content

Commit 06c9bef

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor resource metadata
1 parent 5bfbf9f commit 06c9bef

File tree

3 files changed

+109
-27
lines changed

3 files changed

+109
-27
lines changed

‎.vscode/settings.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"bodyclose",
1111
"buildinfo",
1212
"buildname",
13+
"childrens",
1314
"circbuf",
1415
"cliflag",
1516
"cliui",

‎site/src/components/Resources/AgentRow.tsx

+19-20
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ export const AgentRow: FC<AgentRowProps> = ({
163163
styles[`agentRow-lifecycle-${agent.lifecycle_state}`],
164164
]}
165165
>
166-
<div css={styles.agentInfo}>
166+
<header css={styles.agentInfo}>
167167
<div css={styles.agentNameAndStatus}>
168168
<div css={styles.agentNameAndInfo}>
169169
<AgentStatus agent={agent} />
@@ -270,7 +270,7 @@ export const AgentRow: FC<AgentRowProps> = ({
270270
/>
271271
</div>
272272
)}
273-
</div>
273+
</header>
274274

275275
<AgentMetadata storybookMetadata={storybookAgentMetadata} agent={agent} />
276276

@@ -506,61 +506,59 @@ const useAgentLogs = (
506506
const styles = {
507507
agentRow: (theme) => ({
508508
fontSize: 16,
509-
borderLeft: `2px solid ${theme.palette.text.secondary}`,
510-
511-
"&:not(:first-of-type)": {
512-
borderTop: `2px solid ${theme.palette.divider}`,
513-
},
509+
border: `1px solid ${theme.palette.text.secondary}`,
510+
backgroundColor: theme.palette.background.default,
511+
borderRadius: 8,
514512
}),
515513

516514
"agentRow-connected": (theme) => ({
517-
borderLeftColor: theme.palette.success.light,
515+
borderColor: theme.palette.success.light,
518516
}),
519517

520518
"agentRow-disconnected": (theme) => ({
521-
borderLeftColor: theme.palette.text.secondary,
519+
borderColor: theme.palette.text.secondary,
522520
}),
523521

524522
"agentRow-connecting": (theme) => ({
525-
borderLeftColor: theme.palette.info.light,
523+
borderColor: theme.palette.info.light,
526524
}),
527525

528526
"agentRow-timeout": (theme) => ({
529-
borderLeftColor: theme.palette.warning.light,
527+
borderColor: theme.palette.warning.light,
530528
}),
531529

532530
"agentRow-lifecycle-created": {},
533531

534532
"agentRow-lifecycle-starting": (theme) => ({
535-
borderLeftColor: theme.palette.info.light,
533+
borderColor: theme.palette.info.light,
536534
}),
537535

538536
"agentRow-lifecycle-ready": (theme) => ({
539-
borderLeftColor: theme.palette.success.light,
537+
borderColor: theme.palette.success.light,
540538
}),
541539

542540
"agentRow-lifecycle-start_timeout": (theme) => ({
543-
borderLeftColor: theme.palette.warning.light,
541+
borderColor: theme.palette.warning.light,
544542
}),
545543

546544
"agentRow-lifecycle-start_error": (theme) => ({
547-
borderLeftColor: theme.palette.error.light,
545+
borderColor: theme.palette.error.light,
548546
}),
549547

550548
"agentRow-lifecycle-shutting_down": (theme) => ({
551-
borderLeftColor: theme.palette.info.light,
549+
borderColor: theme.palette.info.light,
552550
}),
553551

554552
"agentRow-lifecycle-shutdown_timeout": (theme) => ({
555-
borderLeftColor: theme.palette.warning.light,
553+
borderColor: theme.palette.warning.light,
556554
}),
557555

558556
"agentRow-lifecycle-shutdown_error": (theme) => ({
559-
borderLeftColor: theme.palette.error.light,
557+
borderColor: theme.palette.error.light,
560558
}),
561559

562560
"agentRow-lifecycle-off": (theme) => ({
563-
borderLeftColor: theme.palette.text.secondary,
561+
borderColor: theme.palette.text.secondary,
564562
}),
565563

566564
agentInfo: (theme) => ({
@@ -570,7 +568,6 @@ const styles = {
570568
alignItems: "center",
571569
justifyContent: "space-between",
572570
flexWrap: "wrap",
573-
backgroundColor: theme.palette.background.paper,
574571

575572
[theme.breakpoints.down("md")]: {
576573
gap: 16,
@@ -675,6 +672,8 @@ const styles = {
675672
gap: 8,
676673
whiteSpace: "nowrap",
677674
width: "100%",
675+
borderBottomLeftRadius: 8,
676+
borderBottomRightRadius: 8,
678677

679678
"&:hover": {
680679
color: theme.palette.text.primary,

‎site/src/pages/WorkspacePage/Workspace.tsx

+89-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { type Interpolation, type Theme } from "@emotion/react";
22
import Button from "@mui/material/Button";
33
import AlertTitle from "@mui/material/AlertTitle";
4-
import { type FC } from "react";
4+
import { PropsWithChildren, type FC, Children } from "react";
55
import { useNavigate } from "react-router-dom";
66
import type * as TypesGen from "api/typesGenerated";
77
import { Alert, AlertDetail } from "components/Alert/Alert";
@@ -19,9 +19,11 @@ import { useTheme } from "@mui/material/styles";
1919
import { SidebarIconButton } from "components/FullPageLayout/Sidebar";
2020
import HubOutlined from "@mui/icons-material/HubOutlined";
2121
import { ResourcesSidebar } from "./ResourcesSidebar";
22-
import { ResourceCard } from "components/Resources/ResourceCard";
2322
import { WorkspacePermissions } from "./permissions";
2423
import { resourceOptionValue, useResourcesNav } from "./useResourcesNav";
24+
import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
25+
import { SensitiveValue } from "components/Resources/SensitiveValue";
26+
import { CopyableValue } from "components/CopyableValue/CopyableValue";
2527

2628
export interface WorkspaceProps {
2729
handleStart: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
@@ -182,6 +184,9 @@ export const Workspace: FC<WorkspaceProps> = ({
182184

183185
<div css={styles.content}>
184186
<div css={styles.dotBackground}>
187+
{selectedResource && (
188+
<WorkspaceResourceData resource={selectedResource} />
189+
)}
185190
<div
186191
css={{
187192
display: "flex",
@@ -229,9 +234,10 @@ export const Workspace: FC<WorkspaceProps> = ({
229234
{buildLogs}
230235

231236
{selectedResource && (
232-
<ResourceCard
233-
resource={selectedResource}
234-
agentRow={(agent) => (
237+
<section
238+
css={{ display: "flex", flexDirection: "column", gap: 24 }}
239+
>
240+
{selectedResource.agents?.map((agent) => (
235241
<AgentRow
236242
key={agent.id}
237243
agent={agent}
@@ -245,8 +251,8 @@ export const Workspace: FC<WorkspaceProps> = ({
245251
serverAPIVersion={buildInfo?.agent_api_version || ""}
246252
onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
247253
/>
248-
)}
249-
/>
254+
))}
255+
</section>
250256
)}
251257
</div>
252258
</div>
@@ -255,6 +261,53 @@ export const Workspace: FC<WorkspaceProps> = ({
255261
);
256262
};
257263

264+
const WorkspaceResourceData: FC<{ resource: TypesGen.WorkspaceResource }> = ({
265+
resource,
266+
}) => {
267+
const metadata = resource.metadata ?? [];
268+
269+
if (resource.daily_cost > 0) {
270+
metadata.push({
271+
key: "Daily cost",
272+
value: resource.daily_cost.toString(),
273+
sensitive: false,
274+
});
275+
}
276+
277+
if (metadata.length === 0) {
278+
return null;
279+
}
280+
281+
return (
282+
<header css={styles.resourceData}>
283+
{resource.metadata?.map((meta) => {
284+
return (
285+
<div css={styles.resourceDataItem} key={meta.key}>
286+
<div css={styles.resourceDataItemValue}>
287+
{meta.sensitive ? (
288+
<SensitiveValue value={meta.value} />
289+
) : (
290+
<MemoizedInlineMarkdown components={{ p }}>
291+
{meta.value}
292+
</MemoizedInlineMarkdown>
293+
)}
294+
</div>
295+
<div css={styles.resourceDataItemLabel}>{meta.key}</div>
296+
</div>
297+
);
298+
})}
299+
</header>
300+
);
301+
};
302+
303+
const p = ({ children }: PropsWithChildren) => {
304+
const childrens = Children.toArray(children);
305+
if (childrens.every((child) => typeof child === "string")) {
306+
return <CopyableValue value={childrens.join("")}>{children}</CopyableValue>;
307+
}
308+
return <>{children}</>;
309+
};
310+
258311
const countAgents = (resource: TypesGen.WorkspaceResource) => {
259312
return resource.agents ? resource.agents.length : 0;
260313
};
@@ -264,6 +317,7 @@ const styles = {
264317
padding: 24,
265318
gridArea: "content",
266319
overflowY: "auto",
320+
position: "relative",
267321
},
268322

269323
dotBackground: (theme) => ({
@@ -288,4 +342,32 @@ const styles = {
288342
flexDirection: "column",
289343
},
290344
}),
345+
346+
resourceData: (theme) => ({
347+
padding: 24,
348+
margin: "-48px 0 0 -48px",
349+
display: "flex",
350+
gap: 48,
351+
marginBottom: 24,
352+
fontSize: 14,
353+
background: `linear-gradient(180deg, ${theme.palette.background.default} 0%, rgba(0, 0, 0, 0) 100%)`,
354+
}),
355+
356+
resourceDataItem: () => ({
357+
lineHeight: "1.5",
358+
}),
359+
360+
resourceDataItemLabel: (theme) => ({
361+
fontSize: 13,
362+
color: theme.palette.text.secondary,
363+
textOverflow: "ellipsis",
364+
overflow: "hidden",
365+
whiteSpace: "nowrap",
366+
}),
367+
368+
resourceDataItemValue: () => ({
369+
textOverflow: "ellipsis",
370+
overflow: "hidden",
371+
whiteSpace: "nowrap",
372+
}),
291373
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)