Merge branch 'main' into resources/presleyp/1031

coder · presleyp · May 20, 2022 · May 18, 2022 · May 18, 2022 · May 18, 2022
commit 2a3897cadcae65c117268697111aac63d8cee266
@@ -2,9 +2,7 @@ import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import React from "react"
 import {
-  MockOrganization,
   MockOutdatedWorkspace,
-  MockTemplate,
   MockWorkspace,
   MockWorkspaceResource,
   MockWorkspaceResource2,

@@ -2,8 +2,9 @@ import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
 import * as TypesGen from "../../api/typesGenerated"
-import { WorkspaceStatus } from "../../pages/WorkspacePage/WorkspacePage"
 import { Resources } from "../Resources/Resources"
+import { WorkspaceStatus } from "../../util/workspace"
+import { BuildsTable } from "../BuildsTable/BuildsTable"
 import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 import { WorkspaceStatusBar } from "../WorkspaceStatusBar/WorkspaceStatusBar"
@@ -19,6 +20,7 @@ export interface WorkspaceProps {
   workspaceStatus: WorkspaceStatus
   resources?: TypesGen.WorkspaceResource[]
   getResourcesError?: Error
+  builds?: TypesGen.WorkspaceBuild[]
 }
 
 /**
@@ -33,6 +35,7 @@ export const Workspace: React.FC<WorkspaceProps> = ({
   workspaceStatus,
   resources,
   getResourcesError,
+  builds,
 }) => {
   const styles = useStyles()
 

@@ -65,75 +65,102 @@ describe("Workspace Page", () => {
     const workspaceName = screen.getByText(MockWorkspace.name)
     expect(workspaceName).toBeDefined()
   })
-  describe("WorkspaceStatusBar", () => {
+  describe("Status", () => {
     it("shows the status of the workspace", async () => {
-      renderWithAuth(<WorkspacePage />, { route: `/workspaces/${MockWorkspace.id}`, path: "/workspaces/:workspace" })
-      const status = await screen.findByRole("status")
+      await renderWorkspacePage()
+      const status = screen.getByRole("status")
       expect(status).toHaveTextContent("Running")
     })
     it("requests a stop job when the user presses Stop", async () => {
+      const stopWorkspaceMock = jest.spyOn(api, "stopWorkspace").mockResolvedValueOnce(MockWorkspaceBuild)
+      await testButton(Language.stop, stopWorkspaceMock)
+    })
+    it("requests a start job when the user presses Start", async () => {
+      server.use(
+        rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
+          return res(ctx.status(200), ctx.json(MockStoppedWorkspace))
+        }),
+      )
+      const startWorkspaceMock = jest
+        .spyOn(api, "startWorkspace")
+        .mockImplementation(() => Promise.resolve(MockWorkspaceBuild))
+      await testButton(Language.start, startWorkspaceMock)
+    })
+    it("requests a start job when the user presses Retry after trying to start", async () => {
+      // Use a workspace that failed during start
+      server.use(
+        rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
+          return res(
+            ctx.status(200),
+            ctx.json({
+              ...MockFailedWorkspace,
+              latest_build: {
+                ...MockFailedWorkspace.latest_build,
+                transition: "start",
+              },
+            }),
+          )
+        }),
+      )
+      const startWorkSpaceMock = jest.spyOn(api, "startWorkspace").mockResolvedValueOnce(MockWorkspaceBuild)
+      await testButton(Language.retry, startWorkSpaceMock)
+    })
+    it("requests a stop job when the user presses Retry after trying to stop", async () => {
+      // Use a workspace that failed during stop
+      server.use(
+        rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
+          return res(
+            ctx.status(200),
+            ctx.json({
+              ...MockFailedWorkspace,
+              latest_build: {
+                ...MockFailedWorkspace.latest_build,
+                transition: "stop",
+              },
+            }),
+          )
+        }),
+      )
       const stopWorkspaceMock = jest
         .spyOn(api, "stopWorkspace")
         .mockImplementation(() => Promise.resolve(MockWorkspaceBuild))
-      testButton(Language.start, stopWorkspaceMock)
-    }),
-      it("requests a start job when the user presses Start", async () => {
-        const startWorkspaceMock = jest
-          .spyOn(api, "startWorkspace")
-          .mockImplementation(() => Promise.resolve(MockWorkspaceBuild))
-        testButton(Language.start, startWorkspaceMock)
-      }),
-      it("requests a start job when the user presses Retry after trying to start", async () => {
-        const startWorkspaceMock = jest
-          .spyOn(api, "startWorkspace")
-          .mockImplementation(() => Promise.resolve(MockWorkspaceBuild))
-        testButton(Language.retry, startWorkspaceMock)
-      }),
-      it("requests a stop job when the user presses Retry after trying to stop", async () => {
-        const stopWorkspaceMock = jest
-          .spyOn(api, "stopWorkspace")
-          .mockImplementation(() => Promise.resolve(MockWorkspaceBuild))
-        server.use(
-          rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
-            return res(ctx.status(200), ctx.json(MockStoppedWorkspace))
-          }),
-        )
-        testButton(Language.start, stopWorkspaceMock)
-      }),
-      it("requests a template when the user presses Update", async () => {
-        const getTemplateMock = jest.spyOn(api, "getTemplate").mockImplementation(() => Promise.resolve(MockTemplate))
-        server.use(
-          rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
-            return res(ctx.status(200), ctx.json(MockOutdatedWorkspace))
-          }),
-        )
-        testButton(Language.update, getTemplateMock)
-      }),
-      it("shows the Stopping status when the workspace is stopping", async () => {
-        testStatus(MockStoppingWorkspace, Language.stopping)
-      })
+      await testButton(Language.retry, stopWorkspaceMock)
+    })
+    it("requests a template when the user presses Update", async () => {
+      const getTemplateMock = jest.spyOn(api, "getTemplate").mockResolvedValueOnce(MockTemplate)
+      server.use(
+        rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
+          return res(ctx.status(200), ctx.json(MockOutdatedWorkspace))
+        }),
+      )
+      await testButton(Language.update, getTemplateMock)
+    })
+    it("shows the Stopping status when the workspace is stopping", async () => {
+      await testStatus(MockStoppingWorkspace, Language.stopping)
+    })
     it("shows the Stopped status when the workspace is stopped", async () => {
-      testStatus(MockStoppedWorkspace, Language.stopped)
+      await testStatus(MockStoppedWorkspace, Language.stopped)
     })
     it("shows the Building status when the workspace is starting", async () => {
-      testStatus(MockStartingWorkspace, Language.starting)
+      await testStatus(MockStartingWorkspace, Language.starting)
     })
     it("shows the Running status when the workspace is started", async () => {
-      testStatus(MockWorkspace, Language.started)
+      await testStatus(MockWorkspace, Language.started)
     })
     it("shows the Error status when the workspace is failed or canceled", async () => {
-      testStatus(MockFailedWorkspace, Language.error)
+      await testStatus(MockFailedWorkspace, Language.error)
     })
     it("shows the Loading status when the workspace is canceling", async () => {
-      testStatus(MockCancelingWorkspace, Language.canceling)
+      await testStatus(MockCancelingWorkspace, Language.canceling)
     })
     it("shows the Deleting status when the workspace is deleting", async () => {
-      testStatus(MockDeletingWorkspace, Language.canceling)
+      await testStatus(MockDeletingWorkspace, Language.deleting)
     })
     it("shows the Deleted status when the workspace is deleted", async () => {
-      testStatus(MockDeletedWorkspace, Language.canceling)
+      await testStatus(MockDeletedWorkspace, Language.deleted)
     })
   })
+
   describe("Resources", () => {
     it("shows the status of each agent in each resource", async () => {
       renderWithAuth(<WorkspacePage />, { route: `/workspaces/${MockWorkspace.id}`, path: "/workspaces/:workspace" })
@@ -147,4 +174,14 @@ describe("Workspace Page", () => {
       expect(agent2Status.length).toEqual(2)
     })
   })
+
+  describe("Timeline", () => {
+    it("shows the timeline build", async () => {
+      await renderWorkspacePage()
+      const table = await screen.findByRole("table")
+      const rows = table.querySelectorAll("tbody > tr")
+      expect(rows).toHaveLength(MockBuilds.length)
+    })
+  })
+
 })
@@ -1,4 +1,4 @@
-import { useActor, useSelector } from "@xstate/react"
+import { useActor } from "@xstate/react"
 import React, { useContext, useEffect } from "react"
 import { useParams } from "react-router-dom"
 import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
@@ -16,8 +16,8 @@ export const WorkspacePage: React.FC = () => {
 
   const xServices = useContext(XServiceContext)
   const [workspaceState, workspaceSend] = useActor(xServices.workspaceXService)
-  const { workspace, template, organization, resources, getWorkspaceError, getResourcesError } = workspaceState.context
-  const workspaceStatus = useSelector(xServices.workspaceXService, selectWorkspaceStatus)
+  const { workspace, resources, getWorkspaceError, getResourcesError, builds } = workspaceState.context
+  const workspaceStatus = getWorkspaceStatus(workspace?.latest_build)
 
   /**
    * Get workspace, template, and organization on mount and whenever workspaceId changes.
@@ -44,6 +44,7 @@ export const WorkspacePage: React.FC = () => {
             workspaceStatus={workspaceStatus}
             resources={resources}
             getResourcesError={getResourcesError instanceof Error ? getResourcesError : undefined}
+            builds={builds}
           />
         </Stack>
       </Margins>

@@ -31,6 +31,10 @@ export interface WorkspaceContext {
   refreshWorkspaceError: Error | unknown
   refreshTemplateError: Error | unknown
   getResourcesError: Error | unknown
+  // Builds
+  builds?: TypesGen.WorkspaceBuild[]
+  getBuildsError?: Error | unknown
+  loadMoreBuildsError?: Error | unknown
 }
 
 export type WorkspaceEvent =
@@ -70,6 +74,12 @@ export const workspaceMachine = createMachine(
         getResources: {
           data: TypesGen.WorkspaceResource[]
         }
+        getBuilds: {
+          data: TypesGen.WorkspaceBuild[]
+        }
+        loadMoreBuilds: {
+          data: TypesGen.WorkspaceBuild[]
+        }
       },
     },
     id: "workspaceState",
@@ -234,6 +244,55 @@ export const workspaceMachine = createMachine(
               },
             },
           },
+
+          timeline: {
+            initial: "gettingBuilds",
+            states: {
+              idle: {},
+              gettingBuilds: {
+                entry: "clearGetBuildsError",
+                invoke: {
+                  src: "getBuilds",
+                  onDone: {
+                    actions: ["assignBuilds"],
+                    target: "loadedBuilds",
+                  },
+                  onError: {
+                    actions: ["assignGetBuildsError"],
+                    target: "idle",
+                  },
+                },
+              },
+              loadedBuilds: {
+                initial: "idle",
+                states: {
+                  idle: {
+                    on: {
+                      LOAD_MORE_BUILDS: {
+                        target: "loadingMoreBuilds",
+                        cond: "hasMoreBuilds",
+                      },
+                      REFRESH_TIMELINE: "#workspaceState.ready.timeline.gettingBuilds",
+                    },
+                  },
+                  loadingMoreBuilds: {
+                    entry: "clearLoadMoreBuildsError",
+                    invoke: {
+                      src: "loadMoreBuilds",
+                      onDone: {
+                        actions: ["assignNewBuilds"],
+                        target: "idle",
+                      },
+                      onError: {
+                        actions: ["assignLoadMoreBuildsError"],
+                        target: "idle",
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
         },
       },
       error: {
@@ -320,6 +379,50 @@ export const workspaceMachine = createMachine(
         assign({
           getResourcesError: undefined,
         }),
+      // Timeline
+      assignBuilds: assign({
+        builds: (_, event) => event.data,
+      }),
+      assignGetBuildsError: assign({
+        getBuildsError: (_, event) => event.data,
+      }),
+      clearGetBuildsError: assign({
+        getBuildsError: (_) => undefined,
+      }),
+      assignNewBuilds: assign({
+        builds: (context, event) => {
+          const oldBuilds = context.builds
+
+          if (!oldBuilds) {
+            throw new Error("Builds not loaded")
+          }
+
+          return [...oldBuilds, ...event.data]
+        },
+      }),
+      assignLoadMoreBuildsError: assign({
+        loadMoreBuildsError: (_, event) => event.data,
+      }),
+      clearLoadMoreBuildsError: assign({
+        loadMoreBuildsError: (_) => undefined,
+      }),
+      refreshTimeline: pure((context, event) => {
+        // No need to refresh the timeline if it is not loaded
+        if (!context.builds) {
+          return
+        }
+        // When it is a refresh workspace event, we want to check if the latest
+        // build was updated to not over fetch the builds
+        if (event.type === "done.invoke.refreshWorkspace") {
+          const latestBuildInTimeline = latestBuild(context.builds)
+          const isUpdated = event.data?.latest_build.updated_at !== latestBuildInTimeline.updated_at
+          if (isUpdated) {
+            return send({ type: "REFRESH_TIMELINE" })
+          }
+        } else {
+          return send({ type: "REFRESH_TIMELINE" })
+        }
+      }),
     },
     guards: {
       triedToStart: (context) => context.workspace?.latest_build.transition === "start",
@@ -371,6 +474,20 @@ export const workspaceMachine = createMachine(
           throw Error("Cannot fetch workspace resources without workspace")
         }
       },
+      getBuilds: async (context) => {
+        if (context.workspace) {
+          return await API.getWorkspaceBuilds(context.workspace.id)
+        } else {
+          throw Error("Cannot refresh workspace without id")
+        }
+      },
+      loadMoreBuilds: async (context) => {
+        if (context.workspace) {
+          return await API.getWorkspaceBuilds(context.workspace.id)
+        } else {
+          throw Error("Cannot refresh workspace without id")
+        }
+      },
     },
   },
 )