Set up table

coder · presleyp · May 20, 2022 · May 18, 2022 · May 18, 2022 · May 18, 2022
commit 448070bcc25252edf53acb8d67efe95be72e469a
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -0,0 +1,60 @@
+import Table from "@material-ui/core/Table"
+import TableBody from "@material-ui/core/TableBody"
+import TableCell from "@material-ui/core/TableCell"
+import TableHead from "@material-ui/core/TableHead"
+import TableRow from "@material-ui/core/TableRow"
+import React from "react"
+import { WorkspaceResource } from "../../api/typesGenerated"
+import { TableHeaderRow } from "../TableHeaders/TableHeaders"
+import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
+
+const Language = {
+  resources: "Resources",
+  resourceLabel: "Resource",
+  agentsLabel: "Agents",
+  agentLabel: "Agent",
+  statusLabel: "Status",
+}
+
+interface ResourcesProps {
+  resources?: WorkspaceResource[]
+}
+
+export const Resources: React.FC<ResourcesProps> = ({ resources }) => {
+  return <WorkspaceSection title={Language.resources}>
+    <Table>
+      <TableHead>
+        <TableHeaderRow>
+          <TableCell size="small">{Language.resourceLabel}</TableCell>
+          <TableCell size="small">{Language.agentsLabel}</TableCell>
+        </TableHeaderRow>
+      </TableHead>
+      <TableBody>
+        {resources?.map((resource) => (
+          <TableRow key={resource.id}>
+            <TableCell size="small">{resource.name}</TableCell>
+            <TableCell>
+              <Table>
+                <TableHead>
+                  <TableHeaderRow>
+                    <TableCell size="small">{Language.agentLabel}</TableCell>
+                    <TableCell size="small">{Language.statusLabel}</TableCell>
+                  </TableHeaderRow>
+                </TableHead>
+                  <TableBody>
+                    {resource.agents?.map((agent) => (
+                      <TableRow key={agent.id}>
+                        <TableCell size="small">{agent.name}</TableCell>
+                        <TableCell size="small">{agent.status}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+              </Table>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+
+    </Table>
+  </WorkspaceSection>
+}
diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
@@ -1,7 +1,7 @@
 import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import React from "react"
-import { MockOrganization, MockOutdatedWorkspace, MockTemplate, MockWorkspace } from "../../testHelpers/renderHelpers"
+import { MockOrganization, MockOutdatedWorkspace, MockTemplate, MockWorkspace, MockWorkspaceResource } from "../../testHelpers/renderHelpers"
 import { Workspace, WorkspaceProps } from "./Workspace"
 
 export default {
@@ -21,6 +21,7 @@ Started.args = {
   handleStop: action("stop"),
   handleRetry: action("retry"),
   workspaceStatus: "started",
+  resources: [MockWorkspaceResource, MockWorkspaceResource]
 }
 
 export const Starting = Template.bind({})

diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -3,6 +3,7 @@ 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 { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 import { WorkspaceStatusBar } from "../WorkspaceStatusBar/WorkspaceStatusBar"
@@ -16,6 +17,7 @@ export interface WorkspaceProps {
   handleRetry: () => void
   handleUpdate: () => void
   workspaceStatus: WorkspaceStatus
+  resources?: TypesGen.WorkspaceResource[]
 }
 
 /**
@@ -30,6 +32,7 @@ export const Workspace: React.FC<WorkspaceProps> = ({
   handleRetry,
   handleUpdate,
   workspaceStatus,
+  resources
 }) => {
   const styles = useStyles()

@@ -46,6 +49,7 @@ export const Workspace: React.FC<WorkspaceProps> = ({
           handleUpdate={handleUpdate}
           workspaceStatus={workspaceStatus}
         />
+        <Resources resources={resources} />
         <div className={styles.horizontal}>
           <div className={styles.sidebarContainer}>
             <WorkspaceSection title="Applications">
@@ -55,9 +59,6 @@ export const Workspace: React.FC<WorkspaceProps> = ({
             <WorkspaceSection title="Dev URLs">
               <Placeholder />
             </WorkspaceSection>
-            <WorkspaceSection title="Resources">
-              <Placeholder />
-            </WorkspaceSection>
           </div>
           <div className={styles.timelineContainer}>
             <WorkspaceSection title="Timeline">

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -185,7 +185,7 @@ export const MockWorkspaceAgent: TypesGen.WorkspaceAgent = {
 }
 
 export const MockWorkspaceResource: TypesGen.WorkspaceResource = {
-  agents: [MockWorkspaceAgent],
+  agents: [MockWorkspaceAgent, MockWorkspaceAgent],
   created_at: "",
   id: "test-workspace-resource",
   job_id: "",