feat(site): display build logs on workspace transitioning statuses (coder#8397)

Author: BrunoQuaresma

coderd/apidoc/docs.go

@@ -1763,6 +1763,7 @@ const (
 	// oidc.
 	ExperimentConvertToOIDC Experiment = "convert-to-oidc"
 
+	ExperimentWorkspaceBuildLogsUI Experiment = "workspace_build_logs_ui"
 	// Add new experiments here!
 	// ExperimentExample Experiment = "example"
 )
@@ -1771,7 +1772,9 @@ const (
 // users to opt-in to via --experimental='*'.
 // Experiments that are not ready for consumption by all users should
 // not be included here and will be essentially hidden.
-var ExperimentsAll = Experiments{}
+var ExperimentsAll = Experiments{
+	ExperimentWorkspaceBuildLogsUI,
+}
 
 // Experiments is a list of experiments that are enabled for the deployment.
 // Multiple experiments may be enabled at the same time.

coderd/apidoc/swagger.json

@@ -2531,12 +2531,13 @@ AuthorizationObject can represent a "set" of objects, such as: all workspaces in
 
 #### Enumerated Values
 
-| Value                    |
-| ------------------------ |
-| `moons`                  |
-| `workspace_actions`      |
-| `tailnet_pg_coordinator` |
-| `convert-to-oidc`        |
+| Value                     |
+| ------------------------- |
+| `moons`                   |
+| `workspace_actions`       |
+| `tailnet_pg_coordinator`  |
+| `convert-to-oidc`         |
+| `workspace_build_logs_ui` |
 
 ## codersdk.Feature
 

codersdk/deployment.go

@@ -5,6 +5,7 @@ import { HelmetProvider } from "react-helmet-async"
 import { dark } from "../src/theme"
 import "../src/theme/globalFonts"
 import "../src/i18n"
+import { LocalPreferencesProvider } from "../src/contexts/LocalPreferencesContext"
 
 export const decorators = [
   (Story) => (
@@ -23,6 +24,13 @@ export const decorators = [
       </HelmetProvider>
     )
   },
+  (Story) => {
+    return (
+      <LocalPreferencesProvider>
+        <Story />
+      </LocalPreferencesProvider>
+    )
+  },
 ]
 
 export const parameters = {

docs/api/schemas.md

@@ -1431,11 +1431,13 @@ export type Experiment =
   | "moons"
   | "tailnet_pg_coordinator"
   | "workspace_actions"
+  | "workspace_build_logs_ui"
 export const Experiments: Experiment[] = [
   "convert-to-oidc",
   "moons",
   "tailnet_pg_coordinator",
   "workspace_actions",
+  "workspace_build_logs_ui",
 ]
 
 // From codersdk/deployment.go

site/.storybook/preview.jsx

@@ -9,6 +9,7 @@ import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"
 import { dark } from "./theme"
 import "./theme/globalFonts"
 import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles"
+import { LocalPreferencesProvider } from "contexts/LocalPreferencesContext"
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -25,17 +26,19 @@ export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
   return (
     <HelmetProvider>
       <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={dark}>
-          <CssBaseline enableColorScheme />
-          <ErrorBoundary>
-            <QueryClientProvider client={queryClient}>
-              <AuthProvider>
-                {children}
-                <GlobalSnackbar />
-              </AuthProvider>
-            </QueryClientProvider>
-          </ErrorBoundary>
-        </ThemeProvider>
+        <LocalPreferencesProvider>
+          <ThemeProvider theme={dark}>
+            <CssBaseline enableColorScheme />
+            <ErrorBoundary>
+              <QueryClientProvider client={queryClient}>
+                <AuthProvider>
+                  {children}
+                  <GlobalSnackbar />
+                </AuthProvider>
+              </QueryClientProvider>
+            </ErrorBoundary>
+          </ThemeProvider>
+        </LocalPreferencesProvider>
       </StyledEngineProvider>
     </HelmetProvider>
   )

site/src/api/typesGenerated.ts

@@ -97,10 +97,11 @@ const useStyles = makeStyles<
 >((theme) => ({
   root: {
     minHeight: 156,
-    padding: theme.spacing(2, 0),
+    padding: theme.spacing(1, 0),
     borderRadius: theme.shape.borderRadius,
     overflowX: "auto",
     background: theme.palette.background.default,
+    borderBottom: `1px solid ${theme.palette.divider}`,
   },
   scrollWrapper: {
     minWidth: "fit-content",

site/src/app.tsx

@@ -379,7 +379,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 
                 {buildLogs && buildLogs.length > 0 && (
                   <WorkspaceBuildLogs
-                    templateEditorPane
+                    sx={{ borderRadius: 0 }}
                     hideTimestamps
                     logs={buildLogs}
                   />

site/src/components/Logs/Logs.tsx

@@ -8,6 +8,7 @@ import { withReactContext } from "storybook-react-context"
 import EventSource from "eventsourcemock"
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext"
 import { DashboardProviderContext } from "components/Dashboard/DashboardProvider"
+import { WorkspaceBuildLogsSection } from "pages/WorkspacePage/WorkspaceBuildLogsSection"
 
 const MockedAppearance = {
   config: Mocks.MockAppearance,
@@ -152,7 +153,7 @@ export const FailedWithLogs: Story = {
         },
       },
     },
-    failedBuildLogs: makeFailedBuildLogs(),
+    buildLogs: <WorkspaceBuildLogsSection logs={makeFailedBuildLogs()} />,
   },
 }
 
@@ -170,8 +171,8 @@ export const FailedWithRetry: Story = {
         },
       },
     },
-    failedBuildLogs: makeFailedBuildLogs(),
     canRetryDebugMode: true,
+    buildLogs: <WorkspaceBuildLogsSection logs={makeFailedBuildLogs()} />,
   },
 }
 
@@ -229,6 +230,7 @@ export const CancellationError: Story = {
         message: "Job could not be canceled.",
       }),
     },
+    buildLogs: <WorkspaceBuildLogsSection logs={makeFailedBuildLogs()} />,
   },
 }
 

site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx

@@ -2,7 +2,6 @@ import Button from "@mui/material/Button"
 import { makeStyles } from "@mui/styles"
 import { Avatar } from "components/Avatar/Avatar"
 import { AgentRow } from "components/Resources/AgentRow"
-import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
 import {
   ActiveTransition,
   WorkspaceBuildProgress,
@@ -70,8 +69,10 @@ export interface WorkspaceProps {
   sshPrefix?: string
   template?: TypesGen.Template
   quota_budget?: number
-  failedBuildLogs: TypesGen.ProvisionerJobLog[] | undefined
   handleBuildRetry: () => void
+  buildLogs?: React.ReactNode
+  canChangeBuildLogsVisibility: boolean
+  isWorkspaceBuildLogsUIActive: boolean
 }
 
 /**
@@ -102,9 +103,11 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   sshPrefix,
   template,
   quota_budget,
-  failedBuildLogs,
   handleBuildRetry,
   templateWarnings,
+  buildLogs,
+  canChangeBuildLogsVisibility,
+  isWorkspaceBuildLogsUIActive,
 }) => {
   const styles = useStyles()
   const navigate = useNavigate()
@@ -208,6 +211,8 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
             canChangeVersions={canChangeVersions}
             isUpdating={isUpdating}
             isRestarting={isRestarting}
+            canChangeBuildLogsVisibility={canChangeBuildLogsVisibility}
+            isWorkspaceBuildLogsUIActive={isWorkspaceBuildLogsUIActive}
           />
         </PageHeaderActions>
       </FullWidthPageHeader>
@@ -259,28 +264,25 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
             </Alert>
           </Maybe>
 
-          {failedBuildLogs && (
-            <Stack>
-              <Alert
-                severity="error"
-                actions={
-                  canRetryDebugMode && (
-                    <Button
-                      key={0}
-                      onClick={handleBuildRetry}
-                      variant="text"
-                      size="small"
-                    >
-                      {t("actionButton.retryDebugMode")}
-                    </Button>
-                  )
-                }
-              >
-                <AlertTitle>Workspace build failed</AlertTitle>
-                <AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
-              </Alert>
-              <WorkspaceBuildLogs logs={failedBuildLogs} />
-            </Stack>
+          {workspace.latest_build.job.error && (
+            <Alert
+              severity="error"
+              actions={
+                canRetryDebugMode && (
+                  <Button
+                    key={0}
+                    onClick={handleBuildRetry}
+                    variant="text"
+                    size="small"
+                  >
+                    {t("actionButton.retryDebugMode")}
+                  </Button>
+                )
+              }
+            >
+              <AlertTitle>Workspace build failed</AlertTitle>
+              <AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
+            </Alert>
           )}
 
           {transitionStats !== undefined && (
@@ -290,6 +292,8 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
             />
           )}
 
+          {buildLogs}
+
           {typeof resources !== "undefined" && resources.length > 0 && (
             <Resources
               resources={resources}

site/src/components/Workspace/Workspace.stories.tsx

@@ -22,6 +22,10 @@ import SettingsOutlined from "@mui/icons-material/SettingsOutlined"
 import HistoryOutlined from "@mui/icons-material/HistoryOutlined"
 import DeleteOutlined from "@mui/icons-material/DeleteOutlined"
 import IconButton from "@mui/material/IconButton"
+import Divider from "@mui/material/Divider"
+import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined"
+import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined"
+import { useLocalPreferences } from "contexts/LocalPreferencesContext"
 
 export interface WorkspaceActionsProps {
   workspaceStatus: WorkspaceStatus
@@ -38,6 +42,8 @@ export interface WorkspaceActionsProps {
   isRestarting: boolean
   children?: ReactNode
   canChangeVersions: boolean
+  canChangeBuildLogsVisibility: boolean
+  isWorkspaceBuildLogsUIActive: boolean
 }
 
 export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
@@ -54,6 +60,8 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   isUpdating,
   isRestarting,
   canChangeVersions,
+  canChangeBuildLogsVisibility,
+  isWorkspaceBuildLogsUIActive,
 }) => {
   const styles = useStyles()
   const {
@@ -64,6 +72,9 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   const canBeUpdated = isOutdated && canAcceptJobs
   const menuTriggerRef = useRef<HTMLButtonElement>(null)
   const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const localPreferences = useLocalPreferences()
+  const isBuildLogsVisible =
+    localPreferences.getPreference("buildLogsVisibility") === "visible"
 
   // A mapping of button type to the corresponding React component
   const buttonMapping: ButtonMapping = {
@@ -140,6 +151,39 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
             <DeleteOutlined />
             Delete
           </MenuItem>
+
+          {isWorkspaceBuildLogsUIActive && (
+            <>
+              <Divider sx={{ borderColor: (theme) => theme.palette.divider }} />
+              {isBuildLogsVisible ? (
+                <MenuItem
+                  disabled={!canChangeBuildLogsVisibility}
+                  onClick={onMenuItemClick(() => {
+                    localPreferences.setPreference(
+                      "buildLogsVisibility",
+                      "hide",
+                    )
+                  })}
+                >
+                  <VisibilityOffOutlined />
+                  Hide build logs
+                </MenuItem>
+              ) : (
+                <MenuItem
+                  disabled={!canChangeBuildLogsVisibility}
+                  onClick={onMenuItemClick(() => {
+                    localPreferences.setPreference(
+                      "buildLogsVisibility",
+                      "visible",
+                    )
+                  })}
+                >
+                  <VisibilityOutlined />
+                  Show build logs
+                </MenuItem>
+              )}
+            </>
+          )}
         </Menu>
       </div>
     </div>