coder · BrunoQuaresma · Jan 19, 2024 · Jan 16, 2024 · Jan 16, 2024 · Jan 16, 2024
diff --git a/site/src/components/Resources/AgentButton.tsx b/site/src/components/Resources/AgentButton.tsx
@@ -1,32 +1,28 @@
 import Button, { type ButtonProps } from "@mui/material/Button";
-import { useTheme } from "@emotion/react";
 import { forwardRef } from "react";
 
 // eslint-disable-next-line react/display-name -- Name is inferred from variable name
 export const AgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
     const { children, ...buttonProps } = props;
-    const theme = useTheme();
 
     return (
       <Button
-        color="neutral"
         {...buttonProps}
+        color="neutral"
+        size="xlarge"
+        variant="contained"
         ref={ref}
-        css={{
-          backgroundColor: theme.palette.background.default,
-
-          "&:hover": {
-            backgroundColor: theme.palette.background.paper,
-          },
-
+        css={(theme) => ({
+          padding: "12px 20px",
+          color: theme.palette.text.primary,
           // Making them smaller since those icons don't have a padding around them
-          "& .MuiButton-startIcon": {
-            width: 12,
-            height: 12,
+          "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+            width: 16,
+            height: 16,
             "& svg": { width: "100%", height: "100%" },
           },
-        }}
+        })}
       >
         {children}
       </Button>

diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
@@ -24,71 +24,6 @@ type ItemStatus = "stale" | "valid" | "loading";
 
 export const WatchAgentMetadataContext = createContext(watchAgentMetadata);
 
-interface MetadataItemProps {
-  item: WorkspaceAgentMetadata;
-}
-
-const MetadataItem: FC<MetadataItemProps> = ({ item }) => {
-  if (item.result === undefined) {
-    throw new Error("Metadata item result is undefined");
-  }
-  if (item.description === undefined) {
-    throw new Error("Metadata item description is undefined");
-  }
-
-  const staleThreshold = Math.max(
-    item.description.interval + item.description.timeout * 2,
-    // In case there is intense backpressure, we give a little bit of slack.
-    5,
-  );
-
-  const status: ItemStatus = (() => {
-    const year = dayjs(item.result.collected_at).year();
-    if (year <= 1970 || isNaN(year)) {
-      return "loading";
-    }
-    // There is a special circumstance for metadata with `interval: 0`. It is
-    // expected that they run once and never again, so never display them as
-    // stale.
-    if (item.result.age > staleThreshold && item.description.interval > 0) {
-      return "stale";
-    }
-    return "valid";
-  })();
-
-  // Stale data is as good as no data. Plus, we want to build confidence in our
-  // users that what's shown is real. If times aren't correctly synced this
-  // could be buggy. But, how common is that anyways?
-  const value =
-    status === "loading" ? (
-      <Skeleton width={65} height={12} variant="text" css={styles.skeleton} />
-    ) : status === "stale" ? (
-      <Tooltip title="This data is stale and no longer up to date">
-        <StaticWidth css={[styles.metadataValue, styles.metadataStale]}>
-          {item.result.value}
-        </StaticWidth>
-      </Tooltip>
-    ) : (
-      <StaticWidth
-        css={[
-          styles.metadataValue,
-          item.result.error.length === 0
-            ? styles.metadataValueSuccess
-            : styles.metadataValueError,
-        ]}
-      >
-        {item.result.value}
-      </StaticWidth>
-    );
-
-  return (
-    <div css={styles.metadata}>
-      <div css={styles.metadataLabel}>{item.description.display_name}</div>
-      <div>{value}</div>
-    </div>
-  );
-};
-
 export interface AgentMetadataViewProps {
   metadata: WorkspaceAgentMetadata[];
 }
@@ -98,16 +33,11 @@ export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
     return null;
   }
   return (
-    <div css={styles.root}>
-      <Stack alignItems="baseline" direction="row" spacing={6}>
-        {metadata.map((m) => {
-          if (m.description === undefined) {
-            throw new Error("Metadata item description is undefined");
-          }
-          return <MetadataItem key={m.description.key} item={m} />;
-        })}
-      </Stack>
-    </div>
+    <section css={styles.root}>
+      {metadata.map((m) => (
+        <MetadataItem key={m.description.key} item={m} />
+      ))}
+    </section>
   );
 };
 
@@ -162,13 +92,19 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({
 
   if (metadata === undefined) {
     return (
-      <div css={styles.root}>
+      <section css={styles.root}>
         <AgentMetadataSkeleton />
-      </div>
+      </section>
     );
   }
 
-  return <AgentMetadataView metadata={metadata} />;
+  return (
+    <AgentMetadataView
+      metadata={[...metadata].sort((a, b) =>
+        a.description.display_name.localeCompare(b.description.display_name),
+      )}
+    />
+  );
 };
 
 export const AgentMetadataSkeleton: FC = () => {
@@ -192,6 +128,64 @@ export const AgentMetadataSkeleton: FC = () => {
   );
 };
 
+interface MetadataItemProps {
+  item: WorkspaceAgentMetadata;
+}
+
+const MetadataItem: FC<MetadataItemProps> = ({ item }) => {
+  const staleThreshold = Math.max(
+    item.description.interval + item.description.timeout * 2,
+    // In case there is intense backpressure, we give a little bit of slack.
+    5,
+  );
+
+  const status: ItemStatus = (() => {
+    const year = dayjs(item.result.collected_at).year();
+    if (year <= 1970 || isNaN(year)) {
+      return "loading";
+    }
+    // There is a special circumstance for metadata with `interval: 0`. It is
+    // expected that they run once and never again, so never display them as
+    // stale.
+    if (item.result.age > staleThreshold && item.description.interval > 0) {
+      return "stale";
+    }
+    return "valid";
+  })();
+
+  // Stale data is as good as no data. Plus, we want to build confidence in our
+  // users that what's shown is real. If times aren't correctly synced this
+  // could be buggy. But, how common is that anyways?
+  const value =
+    status === "loading" ? (
+      <Skeleton width={65} height={12} variant="text" css={styles.skeleton} />
+    ) : status === "stale" ? (
+      <Tooltip title="This data is stale and no longer up to date">
+        <StaticWidth css={[styles.metadataValue, styles.metadataStale]}>
+          {item.result.value}
+        </StaticWidth>
+      </Tooltip>
+    ) : (
+      <StaticWidth
+        css={[
+          styles.metadataValue,
+          item.result.error.length === 0
+            ? styles.metadataValueSuccess
+            : styles.metadataValueError,
+        ]}
+      >
+        {item.result.value}
+      </StaticWidth>
+    );
+
+  return (
+    <div css={styles.metadata}>
+      <div css={styles.metadataLabel}>{item.description.display_name}</div>
+      <div>{value}</div>
+    </div>
+  );
+};
+
 const StaticWidth: FC<HTMLAttributes<HTMLDivElement>> = ({
   children,
   ...attrs
@@ -221,33 +215,28 @@ const StaticWidth: FC<HTMLAttributes<HTMLDivElement>> = ({
 // These are more or less copied from
 // site/src/components/Resources/ResourceCard.tsx
 const styles = {
-  root: (theme) => ({
-    padding: "20px 32px",
-    borderTop: `1px solid ${theme.palette.divider}`,
-    overflowX: "auto",
-    scrollPadding: "0 32px",
-  }),
+  root: {
+    display: "flex",
+    alignItems: "baseline",
+    flexWrap: "wrap",
+    gap: 32,
+    rowGap: 16,
+  },
 
   metadata: {
-    fontSize: 12,
-    lineHeight: "normal",
+    lineHeight: "1.6",
     display: "flex",
     flexDirection: "column",
-    gap: 4,
     overflow: "visible",
-
-    // Because of scrolling
-    "&:last-child": {
-      paddingRight: 32,
-    },
+    flexShrink: 0,
   },
 
   metadataLabel: (theme) => ({
     color: theme.palette.text.secondary,
     textOverflow: "ellipsis",
     overflow: "hidden",
     whiteSpace: "nowrap",
-    fontWeight: 500,
+    fontSize: 13,
   }),
 
   metadataValue: {
@@ -259,9 +248,7 @@ const styles = {
   },
 
   metadataValueSuccess: (theme) => ({
-    // color: theme.palette.success.light,
-    color: theme.experimental.roles.success.fill,
-    // color: theme.experimental.roles.success.text,
+    color: theme.experimental.roles.success.outline,
   }),
 
   metadataValueError: (theme) => ({

diff --git a/site/src/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx
@@ -20,6 +20,7 @@ import {
   MockWorkspaceAgentDeprecated,
   MockWorkspaceApp,
   MockProxyLatencies,
+  MockListeningPortsResponse,
 } from "testHelpers/entities";
 import { AgentRow, LineWithID } from "./AgentRow";
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
@@ -103,7 +104,15 @@ const storybookLogs: LineWithID[] = [
 
 const meta: Meta<typeof AgentRow> = {
   title: "components/AgentRow",
-  parameters: { chromatic },
+  parameters: {
+    chromatic,
+    queries: [
+      {
+        key: ["portForward", MockWorkspaceAgent.id],
+        data: MockListeningPortsResponse,
+      },
+    ],
+  },
   component: AgentRow,
   args: {
     storybookLogs,