Display tabs for agent logs

BrunoQuaresma · BrunoQuaresma · commit 5436b15c97fa · 2024-02-20T17:58:03.000Z
diff --git a/site/src/components/Tabs/Tabs.tsx b/site/src/components/Tabs/Tabs.tsx
@@ -70,6 +70,8 @@ const styles = {
     fontSize: 14,
     display: "block",
     padding: `${TAB_PADDING_Y}px 16px`,
+    fontWeight: 500,
+    lineHeight: "1",
 
     "&:hover": {
       color: theme.palette.text.primary,
diff --git a/site/src/modules/workspaces/WorkspaceBuildLogs/Logs.tsx b/site/src/modules/workspaces/WorkspaceBuildLogs/Logs.tsx
@@ -5,6 +5,8 @@ import { type FC, type ReactNode, useMemo } from "react";
 import AnsiToHTML from "ansi-to-html";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 
+export const DEFAULT_LOG_LINE_SIDE_PADDING = 24;
+
 const convert = new AnsiToHTML();
 
 export interface Line {
@@ -127,7 +129,7 @@ const styles = {
     height: "auto",
     // Whitespace is significant in terminal output for alignment
     whiteSpace: "pre",
-    padding: "0 32px",
+    padding: `0 ${DEFAULT_LOG_LINE_SIDE_PADDING}px`,
 
     "&.error": {
       backgroundColor: theme.roles.error.background,
diff --git a/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
@@ -2,7 +2,7 @@ import dayjs from "dayjs";
 import { type FC, Fragment, type HTMLAttributes } from "react";
 import type { ProvisionerJobLog } from "api/typesGenerated";
 import { BODY_FONT_FAMILY, MONOSPACE_FONT_FAMILY } from "theme/constants";
-import { Logs } from "./Logs";
+import { DEFAULT_LOG_LINE_SIDE_PADDING, Logs } from "./Logs";
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 
 const Language = {
@@ -99,7 +99,7 @@ const styles = {
   header: (theme) => ({
     fontSize: 13,
     fontWeight: 600,
-    padding: "4px 24px",
+    padding: `4px ${DEFAULT_LOG_LINE_SIDE_PADDING}px`,
     display: "flex",
     alignItems: "center",
     fontFamily: BODY_FONT_FAMILY,
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
@@ -155,7 +155,7 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
                   value={a.id}
                   key={a.id}
                 >
-                  {a.name}
+                  coder_agent.{a.name}
                 </TabLink>
               ))}
             </TabsList>

Original file line number	Diff line number	Diff line change
`@@ -155,7 +155,7 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({`
`155`	`155`	`value={a.id}`
`156`	`156`	`key={a.id}`
`157`	`157`	`>`
`158`		`- {a.name}`
	`158`	`+ coder_agent.{a.name}`
`159`	`159`	`</TabLink>`
`160`	`160`	`))}`
`161`	`161`	`</TabsList>`