make the UI stuff go

johnstcn · johnstcn · commit 80bc90be80bf · 2022-08-29T16:42:31.000Z
diff --git a/site/package.json b/site/package.json
@@ -53,6 +53,7 @@
     "react-i18next": "11.18.4",
     "react-markdown": "8.0.3",
     "react-router-dom": "6.3.0",
+    "semver": "^7.3.7",
     "sourcemapped-stacktrace": "1.1.11",
     "swr": "1.3.0",
     "tzdata": "1.0.30",
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -8,8 +8,13 @@ import TableRow from "@material-ui/core/TableRow"
 import useTheme from "@material-ui/styles/useTheme"
 import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { FC } from "react"
-import { getDisplayAgentStatus, getWorkspaceStatus, WorkspaceStateEnum } from "util/workspace"
-import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
+import {
+  getDisplayAgentStatus,
+  getDisplayVersionStatus,
+  getWorkspaceStatus,
+  WorkspaceStateEnum,
+} from "util/workspace"
+import { BuildInfoResponse, Workspace, WorkspaceResource } from "../../api/typesGenerated"
 import { AppLink } from "../AppLink/AppLink"
 import { SSHButton } from "../SSHButton/SSHButton"
 import { Stack } from "../Stack/Stack"
@@ -31,13 +36,15 @@ interface ResourcesProps {
   getResourcesError?: Error | unknown
   workspace: Workspace
   canUpdateWorkspace: boolean
+  buildInfo?: BuildInfoResponse | undefined
 }
 
 export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
   resources,
   getResourcesError,
   workspace,
   canUpdateWorkspace,
+  buildInfo,
 }) => {
   const styles = useStyles()
   const theme: Theme = useTheme()
@@ -91,6 +98,11 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
                     )
                   }
 
+                  const versionStatus = getDisplayVersionStatus(
+                    theme,
+                    agent.version,
+                    buildInfo?.version || "",
+                  )
                   const agentStatus = getDisplayAgentStatus(theme, agent)
                   return (
                     <TableRow key={`${resource.id}-${agent.id}`}>
@@ -105,7 +117,14 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
                       <TableCell className={styles.agentColumn}>
                         {agent.name}
                         <div className={styles.agentInfo}>
-                          <span className={styles.agentVersion}>{agent.version}</span>
+                          <span
+                            className={styles.agentVersion}
+                            style={{ color: versionStatus.color }}
+                          >
+                            {versionStatus.version}
+                          </span>
+                        </div>
+                        <div className={styles.agentInfo}>
                           <span className={styles.operatingSystem}>{agent.operating_system}</span>
                           {WorkspaceStateEnum[workspaceStatus] !==
                             WorkspaceStateEnum["stopped"] && (
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -1,8 +1,10 @@
 import { makeStyles } from "@material-ui/core/styles"
+import { useActor } from "@xstate/react"
 import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
-import { FC } from "react"
+import { FC, useContext } from "react"
 import { useNavigate } from "react-router-dom"
+import { XServiceContext } from "xServices/StateContext"
 import * as TypesGen from "../../api/typesGenerated"
 import { BuildsTable } from "../BuildsTable/BuildsTable"
 import { Margins } from "../Margins/Margins"
@@ -65,6 +67,8 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
 }) => {
   const styles = useStyles()
   const navigate = useNavigate()
+  const xServices = useContext(XServiceContext)
+  const [buildInfoState] = useActor(xServices.buildInfoXService)
 
   return (
     <Margins>
@@ -128,6 +132,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
               getResourcesError={workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]}
               workspace={workspace}
               canUpdateWorkspace={canUpdateWorkspace}
+              buildinfo={buildInfoState.context.buildInfo}
             />
           )}
 
diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts
@@ -5,6 +5,7 @@ import minMax from "dayjs/plugin/minMax"
 import utc from "dayjs/plugin/utc"
 import { WorkspaceBuildTransition } from "../api/types"
 import * as TypesGen from "../api/typesGenerated"
+import semver from "semver"
 
 dayjs.extend(duration)
 dayjs.extend(utc)
@@ -95,6 +96,10 @@ export const DisplayWorkspaceBuildStatusLanguage = {
   failed: "Failed",
 }
 
+export const DisplayAgentVersionLanguage = {
+  unknown: "(unknown)",
+}
+
 export const getDisplayWorkspaceBuildStatus = (
   theme: Theme,
   build: TypesGen.WorkspaceBuild,
@@ -211,6 +216,34 @@ export const getDisplayAgentStatus = (
   }
 }
 
+export const getDisplayVersionStatus = (
+  theme: Theme,
+  agentVersion: string,
+  serverVersion: string,
+): {
+    color: string,
+    version: string,
+  } => {
+  if (!semver.valid(serverVersion) || semver.valid(agentVersion)) {
+    return {
+      color: theme.palette.primary.main,
+      version: agentVersion || "(version unknown)",
+    }
+  }
+
+  if (semver.lt(agentVersion, serverVersion)) {
+    return {
+      color: theme.palette.text.secondary,
+      version: `${agentVersion} (outdated)`,
+    }
+  }
+
+  return {
+    color: theme.palette.success.main,
+    version: agentVersion,
+  }
+}
+
 export const isWorkspaceOn = (workspace: TypesGen.Workspace): boolean => {
   const transition = workspace.latest_build.transition
   const status = workspace.latest_build.job.status
