feat: use sse for workspace page (#4122)

Kira-Pilot · web-flow · commit 5698b9d70654 · 2022-09-21T14:32:00.000-04:00
* added error handling

* workspace machine cleanup

* renaming callback

* general cleanup

* fixed tests

* PR comments
diff --git a/site/package.json b/site/package.json
@@ -43,6 +43,7 @@
     "cronstrue": "2.11.0",
     "dayjs": "1.11.4",
     "emoji-mart": "^5.2.1",
+    "eventsourcemock": "^2.0.0",
     "formik": "^2.2.9",
     "front-matter": "4.0.2",
     "history": "5.3.0",
diff --git a/site/src/@types/eventsourcemock.d.ts b/site/src/@types/eventsourcemock.d.ts
@@ -0,0 +1 @@
+declare module "eventsourcemock"
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -219,6 +219,18 @@ export const getWorkspace = async (
   return response.data
 }
 
+/**
+ *
+ * @param workspaceId
+ * @returns An EventSource that emits workspace event objects (ServerSentEvent)
+ */
+export const watchWorkspace = (workspaceId: string): EventSource => {
+  return new EventSource(
+    `${location.protocol}//${location.host}/api/v2/workspaces/${workspaceId}/watch`,
+    { withCredentials: true },
+  )
+}
+
 export const getURLWithSearchParams = (
   basePath: string,
   filter?: TypesGen.WorkspaceFilter | TypesGen.UsersRequest,
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-floating-promises */
 import { fireEvent, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import EventSource from "eventsourcemock"
 import i18next from "i18next"
 import { rest } from "msw"
 import * as api from "../../api/api"
@@ -23,6 +24,7 @@ import {
   MockWorkspaceAgentConnecting,
   MockWorkspaceAgentDisconnected,
   MockWorkspaceBuild,
+  MockWorkspaceResource2,
   renderWithAuth,
 } from "../../testHelpers/renderHelpers"
 import { server } from "../../testHelpers/server"
@@ -71,6 +73,11 @@ const testStatus = async (ws: Workspace, label: string) => {
 
 beforeEach(() => {
   jest.resetAllMocks()
+
+  // mocking out EventSource for SSE
+  Object.defineProperty(window, "EventSource", {
+    value: EventSource,
+  })
 })
 
 describe("WorkspacePage", () => {
@@ -196,18 +203,43 @@ describe("WorkspacePage", () => {
   describe("Resources", () => {
     it("shows the status of each agent in each resource", async () => {
       const getTemplateMock = jest.spyOn(api, "getTemplate").mockResolvedValueOnce(MockTemplate)
+
+      const workspaceWithResources = {
+        ...MockWorkspace,
+        latest_build: {
+          ...MockWorkspaceBuild,
+          resources: [
+            {
+              ...MockWorkspaceResource2,
+              agents: [
+                MockWorkspaceAgent,
+                MockWorkspaceAgentDisconnected,
+                MockWorkspaceAgentConnecting,
+              ],
+            },
+          ],
+        },
+      }
+
+      server.use(
+        rest.get(`/api/v2/users/:username/workspace/:workspaceName`, (req, res, ctx) => {
+          return res(ctx.status(200), ctx.json(workspaceWithResources))
+        }),
+      )
+
       renderWithAuth(<WorkspacePage />, {
         route: `/@${MockWorkspace.owner_name}/${MockWorkspace.name}`,
         path: "/@:username/:workspace",
       })
+
       const agent1Names = await screen.findAllByText(MockWorkspaceAgent.name)
-      expect(agent1Names.length).toEqual(2)
+      expect(agent1Names.length).toEqual(1)
       const agent2Names = await screen.findAllByText(MockWorkspaceAgentDisconnected.name)
       expect(agent2Names.length).toEqual(2)
       const agent1Status = await screen.findAllByText(
         DisplayAgentStatusLanguage[MockWorkspaceAgent.status],
       )
-      expect(agent1Status.length).toEqual(4)
+      expect(agent1Status.length).toEqual(1)
       const agentDisconnected = await screen.findAllByText(
         DisplayAgentStatusLanguage[MockWorkspaceAgentDisconnected.status],
       )
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -40,9 +40,8 @@ export const WorkspacePage: FC = () => {
     workspace,
     getWorkspaceError,
     template,
-    refreshTemplateError,
-    resources,
-    getResourcesError,
+    refreshTemplateWarning,
+    refreshWorkspaceWarning,
     builds,
     getBuildsError,
     permissions,
@@ -70,7 +69,7 @@ export const WorkspacePage: FC = () => {
     return (
       <div className={styles.error}>
         {Boolean(getWorkspaceError) && <ErrorSummary error={getWorkspaceError} />}
-        {Boolean(refreshTemplateError) && <ErrorSummary error={refreshTemplateError} />}
+        {Boolean(refreshTemplateWarning) && <ErrorSummary error={refreshTemplateWarning} />}
         {Boolean(checkPermissionsError) && <ErrorSummary error={checkPermissionsError} />}
       </div>
     )
@@ -128,11 +127,11 @@ export const WorkspacePage: FC = () => {
           handleDelete={() => workspaceSend("ASK_DELETE")}
           handleUpdate={() => workspaceSend("UPDATE")}
           handleCancel={() => workspaceSend("CANCEL")}
-          resources={resources}
+          resources={workspace.latest_build.resources}
           builds={builds}
           canUpdateWorkspace={canUpdateWorkspace}
           workspaceErrors={{
-            [WorkspaceErrors.GET_RESOURCES_ERROR]: getResourcesError,
+            [WorkspaceErrors.GET_RESOURCES_ERROR]: refreshWorkspaceWarning,
             [WorkspaceErrors.GET_BUILDS_ERROR]: getBuildsError,
             [WorkspaceErrors.BUILD_ERROR]: buildError,
             [WorkspaceErrors.CANCELLATION_ERROR]: cancellationError,
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -380,7 +380,7 @@ export const MockWorkspaceAgentOutdated: TypesGen.WorkspaceAgent = {
 
 export const MockWorkspaceAgentConnecting: TypesGen.WorkspaceAgent = {
   ...MockWorkspaceAgent,
-  id: "test-workspace-agent-2",
+  id: "test-workspace-agent-connecting",
   name: "another-workspace-agent",
   status: "connecting",
   version: "",
diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts
diff --git a/site/webpack.dev.ts b/site/webpack.dev.ts
diff --git a/site/yarn.lock b/site/yarn.lock
