Refactor agent row

coder · BrunoQuaresma · Apr 20, 2023 · Apr 18, 2023 · Apr 18, 2023 · Apr 18, 2023
commit e8fba43b9cd96bc003e7e80619d9e19d440dd285
diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
@@ -138,7 +138,7 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.background.default,
 
     "&:hover": {
-      backgroundColor: `${theme.palette.background.default} !important`,
+      backgroundColor: `${theme.palette.background.paper} !important`,
     },
   },
 

diff --git a/site/src/components/Logs/Logs.tsx b/site/src/components/Logs/Logs.tsx
@@ -41,7 +41,7 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
                     ? idx + 1
                     : dayjs(line.time).format(`HH:mm:ss.SSS`)}
                 </span>
-                <span className={styles.space}>&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                <span className={styles.space} />
               </>
             )}
             <span>{line.output}</span>
@@ -76,7 +76,7 @@ export const LogLine: FC<{
           <span className={styles.time}>
             {number ? number : dayjs(line.time).format(`HH:mm:ss.SSS`)}
           </span>
-          <span className={styles.space}>&nbsp;&nbsp;&nbsp;&nbsp;</span>
+          <span className={styles.space} />
         </>
       )}
       <span
@@ -96,7 +96,6 @@ const useStyles = makeStyles<
 >((theme) => ({
   root: {
     minHeight: 156,
-    fontSize: 13,
     padding: theme.spacing(2, 0),
     borderRadius: theme.shape.borderRadius,
     overflowX: "auto",
@@ -107,12 +106,14 @@ const useStyles = makeStyles<
   },
   line: {
     wordBreak: "break-all",
+    display: "flex",
+    fontSize: 14,
     color: theme.palette.text.primary,
     fontFamily: MONOSPACE_FONT_FAMILY,
     height: ({ lineNumbers }) => (lineNumbers ? logLineHeight : "auto"),
     // Whitespace is significant in terminal output for alignment
     whiteSpace: "pre",
-    padding: theme.spacing(0, 3),
+    padding: theme.spacing(0, 4),
 
     "&.error": {
       backgroundColor: theme.palette.error.dark,
@@ -128,6 +129,8 @@ const useStyles = makeStyles<
   },
   space: {
     userSelect: "none",
+    width: theme.spacing(1),
+    display: "block",
   },
   time: {
     userSelect: "none",

diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
@@ -202,25 +202,17 @@ export interface AgentMetadataViewProps {
 }
 
 export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
-  const styles = useStyles()
   if (metadata.length === 0) {
     return <></>
   }
   return (
-    <Stack
-      alignItems="flex-start"
-      direction="row"
-      spacing={5}
-      className={styles.metadataStack}
-    >
-      <div className={styles.metadataHeader}>
-        {metadata.map((m) => {
-          if (m.description === undefined) {
-            throw new Error("Metadata item description is undefined")
-          }
-          return <MetadataItem key={m.description.key} item={m} />
-        })}
-      </div>
+    <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>
   )
 }
@@ -289,31 +281,16 @@ export const AgentMetadata: FC<{
 // These are more or less copied from
 // site/src/components/Resources/ResourceCard.tsx
 const useStyles = makeStyles((theme) => ({
-  metadataStack: {
-    border: `2px dashed ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-    width: "100%",
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(2),
-  },
-  metadataHeader: {
-    padding: "8px",
-    display: "flex",
-    gap: theme.spacing(5),
-    rowGap: theme.spacing(3),
-  },
-
   metadata: {
-    fontSize: 16,
+    fontSize: 12,
   },
 
   metadataLabel: {
-    fontSize: 12,
     color: theme.palette.text.secondary,
     textOverflow: "ellipsis",
     overflow: "hidden",
     whiteSpace: "nowrap",
-    fontWeight: "bold",
+    fontWeight: 500,
   },
 
   metadataValue: {
@@ -324,8 +301,9 @@ const useStyles = makeStyles((theme) => ({
   },
 
   metadataValueSuccess: {
-    color: theme.palette.success.light,
+    color: theme.palette.text.primary,
   },
+
   metadataValueError: {
     color: theme.palette.error.main,
   },

diff --git a/site/src/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx
@@ -43,22 +43,71 @@ const defaultAgentMetadata = [
     result: {
       collected_at: "2021-05-05T00:00:00Z",
       error: "",
-      value: "defvalue",
+      value: "Master",
       age: 5,
     },
     description: {
-      display_name: "DisPlay",
-      key: "defkey",
+      display_name: "Branch",
+      key: "branch",
       interval: 10,
       timeout: 10,
-      script: "some command",
+      script: "git branch",
+    },
+  },
+  {
+    result: {
+      collected_at: "2021-05-05T00:00:00Z",
+      error: "",
+      value: "No changes",
+      age: 5,
+    },
+    description: {
+      display_name: "Changes",
+      key: "changes",
+      interval: 10,
+      timeout: 10,
+      script: "git diff",
+    },
+  },
+  {
+    result: {
+      collected_at: "2021-05-05T00:00:00Z",
+      error: "",
+      value: "2%",
+      age: 5,
+    },
+    description: {
+      display_name: "CPU Usage",
+      key: "cpuUsage",
+      interval: 10,
+      timeout: 10,
+      script: "cpu.sh",
+    },
+  },
+  {
+    result: {
+      collected_at: "2021-05-05T00:00:00Z",
+      error: "",
+      value: "3%",
+      age: 5,
+    },
+    description: {
+      display_name: "Disk Usage",
+      key: "diskUsage",
+      interval: 10,
+      timeout: 10,
+      script: "disk.sh",
     },
   },
 ]
 
 export const Example = Template.bind({})
 Example.args = {
-  agent: MockWorkspaceAgent,
+  agent: {
+    ...MockWorkspaceAgent,
+    startup_script:
+      'set -eux -o pipefail\n\n# install and start code-server\ncurl -fsSL https://code-server.dev/install.sh | sh -s -- --method=standalone --prefix=/tmp/code-server --version 4.8.3\n/tmp/code-server/bin/code-server --auth none --port 13337 >/tmp/code-server.log 2>&1 &\n\n\nif [ ! -d ~/coder ]; then\n  mkdir -p ~/coder\n\n  git clone https://github.com/coder/coder ~/coder\nfi\n\nsudo service docker start\nDOTFILES_URI=" "\nrm -f ~/.personalize.log\nif [ -n "${DOTFILES_URI// }" ]; then\n  coder dotfiles "$DOTFILES_URI" -y 2>&1 | tee -a ~/.personalize.log\nfi\nif [ -x ~/personalize ]; then\n  ~/personalize 2>&1 | tee -a ~/.personalize.log\nelif [ -f ~/personalize ]; then\n  echo "~/personalize is not executable, skipping..." | tee -a ~/.personalize.log\nfi\n',
+  },
   workspace: MockWorkspace,
   applicationsHost: "",
   showApps: true,