Refactor resource metadata

coder · BrunoQuaresma · Jan 19, 2024 · Jan 16, 2024 · Jan 16, 2024 · Jan 16, 2024
commit 06c9bef632e204da918a5ea548e8de11e9513918
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -10,6 +10,7 @@
     "bodyclose",
     "buildinfo",
     "buildname",
+    "childrens",
     "circbuf",
     "cliflag",
     "cliui",

diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
@@ -163,7 +163,7 @@ export const AgentRow: FC<AgentRowProps> = ({
         styles[`agentRow-lifecycle-${agent.lifecycle_state}`],
       ]}
     >
-      <div css={styles.agentInfo}>
+      <header css={styles.agentInfo}>
         <div css={styles.agentNameAndStatus}>
           <div css={styles.agentNameAndInfo}>
             <AgentStatus agent={agent} />
@@ -270,7 +270,7 @@ export const AgentRow: FC<AgentRowProps> = ({
             />
           </div>
         )}
-      </div>
+      </header>
 
       <AgentMetadata storybookMetadata={storybookAgentMetadata} agent={agent} />
 
@@ -506,61 +506,59 @@ const useAgentLogs = (
 const styles = {
   agentRow: (theme) => ({
     fontSize: 16,
-    borderLeft: `2px solid ${theme.palette.text.secondary}`,
-
-    "&:not(:first-of-type)": {
-      borderTop: `2px solid ${theme.palette.divider}`,
-    },
+    border: `1px solid ${theme.palette.text.secondary}`,
+    backgroundColor: theme.palette.background.default,
+    borderRadius: 8,
   }),
 
   "agentRow-connected": (theme) => ({
-    borderLeftColor: theme.palette.success.light,
+    borderColor: theme.palette.success.light,
   }),
 
   "agentRow-disconnected": (theme) => ({
-    borderLeftColor: theme.palette.text.secondary,
+    borderColor: theme.palette.text.secondary,
   }),
 
   "agentRow-connecting": (theme) => ({
-    borderLeftColor: theme.palette.info.light,
+    borderColor: theme.palette.info.light,
   }),
 
   "agentRow-timeout": (theme) => ({
-    borderLeftColor: theme.palette.warning.light,
+    borderColor: theme.palette.warning.light,
   }),
 
   "agentRow-lifecycle-created": {},
 
   "agentRow-lifecycle-starting": (theme) => ({
-    borderLeftColor: theme.palette.info.light,
+    borderColor: theme.palette.info.light,
   }),
 
   "agentRow-lifecycle-ready": (theme) => ({
-    borderLeftColor: theme.palette.success.light,
+    borderColor: theme.palette.success.light,
   }),
 
   "agentRow-lifecycle-start_timeout": (theme) => ({
-    borderLeftColor: theme.palette.warning.light,
+    borderColor: theme.palette.warning.light,
   }),
 
   "agentRow-lifecycle-start_error": (theme) => ({
-    borderLeftColor: theme.palette.error.light,
+    borderColor: theme.palette.error.light,
   }),
 
   "agentRow-lifecycle-shutting_down": (theme) => ({
-    borderLeftColor: theme.palette.info.light,
+    borderColor: theme.palette.info.light,
   }),
 
   "agentRow-lifecycle-shutdown_timeout": (theme) => ({
-    borderLeftColor: theme.palette.warning.light,
+    borderColor: theme.palette.warning.light,
   }),
 
   "agentRow-lifecycle-shutdown_error": (theme) => ({
-    borderLeftColor: theme.palette.error.light,
+    borderColor: theme.palette.error.light,
   }),
 
   "agentRow-lifecycle-off": (theme) => ({
-    borderLeftColor: theme.palette.text.secondary,
+    borderColor: theme.palette.text.secondary,
   }),
 
   agentInfo: (theme) => ({
@@ -570,7 +568,6 @@ const styles = {
     alignItems: "center",
     justifyContent: "space-between",
     flexWrap: "wrap",
-    backgroundColor: theme.palette.background.paper,
 
     [theme.breakpoints.down("md")]: {
       gap: 16,
@@ -675,6 +672,8 @@ const styles = {
     gap: 8,
     whiteSpace: "nowrap",
     width: "100%",
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
 
     "&:hover": {
       color: theme.palette.text.primary,

diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -1,7 +1,7 @@
 import { type Interpolation, type Theme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import AlertTitle from "@mui/material/AlertTitle";
-import { type FC } from "react";
+import { PropsWithChildren, type FC, Children } from "react";
 import { useNavigate } from "react-router-dom";
 import type * as TypesGen from "api/typesGenerated";
 import { Alert, AlertDetail } from "components/Alert/Alert";
@@ -19,9 +19,11 @@ import { useTheme } from "@mui/material/styles";
 import { SidebarIconButton } from "components/FullPageLayout/Sidebar";
 import HubOutlined from "@mui/icons-material/HubOutlined";
 import { ResourcesSidebar } from "./ResourcesSidebar";
-import { ResourceCard } from "components/Resources/ResourceCard";
 import { WorkspacePermissions } from "./permissions";
 import { resourceOptionValue, useResourcesNav } from "./useResourcesNav";
+import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
+import { SensitiveValue } from "components/Resources/SensitiveValue";
+import { CopyableValue } from "components/CopyableValue/CopyableValue";
 
 export interface WorkspaceProps {
   handleStart: (buildParameters?: TypesGen.WorkspaceBuildParameter[]) => void;
@@ -182,6 +184,9 @@ export const Workspace: FC<WorkspaceProps> = ({
 
       <div css={styles.content}>
         <div css={styles.dotBackground}>
+          {selectedResource && (
+            <WorkspaceResourceData resource={selectedResource} />
+          )}
           <div
             css={{
               display: "flex",
@@ -229,9 +234,10 @@ export const Workspace: FC<WorkspaceProps> = ({
             {buildLogs}
 
             {selectedResource && (
-              <ResourceCard
-                resource={selectedResource}
-                agentRow={(agent) => (
+              <section
+                css={{ display: "flex", flexDirection: "column", gap: 24 }}
+              >
+                {selectedResource.agents?.map((agent) => (
                   <AgentRow
                     key={agent.id}
                     agent={agent}
@@ -245,8 +251,8 @@ export const Workspace: FC<WorkspaceProps> = ({
                     serverAPIVersion={buildInfo?.agent_api_version || ""}
                     onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
                   />
-                )}
-              />
+                ))}
+              </section>
             )}
           </div>
         </div>
@@ -255,6 +261,53 @@ export const Workspace: FC<WorkspaceProps> = ({
   );
 };
 
+const WorkspaceResourceData: FC<{ resource: TypesGen.WorkspaceResource }> = ({
+  resource,
+}) => {
+  const metadata = resource.metadata ?? [];
+
+  if (resource.daily_cost > 0) {
+    metadata.push({
+      key: "Daily cost",
+      value: resource.daily_cost.toString(),
+      sensitive: false,
+    });
+  }
+
+  if (metadata.length === 0) {
+    return null;
+  }
+
+  return (
+    <header css={styles.resourceData}>
+      {resource.metadata?.map((meta) => {
+        return (
+          <div css={styles.resourceDataItem} key={meta.key}>
+            <div css={styles.resourceDataItemValue}>
+              {meta.sensitive ? (
+                <SensitiveValue value={meta.value} />
+              ) : (
+                <MemoizedInlineMarkdown components={{ p }}>
+                  {meta.value}
+                </MemoizedInlineMarkdown>
+              )}
+            </div>
+            <div css={styles.resourceDataItemLabel}>{meta.key}</div>
+          </div>
+        );
+      })}
+    </header>
+  );
+};
+
+const p = ({ children }: PropsWithChildren) => {
+  const childrens = Children.toArray(children);
+  if (childrens.every((child) => typeof child === "string")) {
+    return <CopyableValue value={childrens.join("")}>{children}</CopyableValue>;
+  }
+  return <>{children}</>;
+};
+
 const countAgents = (resource: TypesGen.WorkspaceResource) => {
   return resource.agents ? resource.agents.length : 0;
 };
@@ -264,6 +317,7 @@ const styles = {
     padding: 24,
     gridArea: "content",
     overflowY: "auto",
+    position: "relative",
   },
 
   dotBackground: (theme) => ({
@@ -288,4 +342,32 @@ const styles = {
       flexDirection: "column",
     },
   }),
+
+  resourceData: (theme) => ({
+    padding: 24,
+    margin: "-48px 0 0 -48px",
+    display: "flex",
+    gap: 48,
+    marginBottom: 24,
+    fontSize: 14,
+    background: `linear-gradient(180deg, ${theme.palette.background.default} 0%, rgba(0, 0, 0, 0) 100%)`,
+  }),
+
+  resourceDataItem: () => ({
+    lineHeight: "1.5",
+  }),
+
+  resourceDataItemLabel: (theme) => ({
+    fontSize: 13,
+    color: theme.palette.text.secondary,
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+  }),
+
+  resourceDataItemValue: () => ({
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+  }),
 } satisfies Record<string, Interpolation<Theme>>;