:^)

coder · aslilac · Feb 13, 2024 · Feb 7, 2024 · Feb 7, 2024 · Feb 7, 2024
commit aa7adf8adc714ded2079e64e615b54e3748ed141
diff --git a/site/src/pages/WorkspacePage/ConnectionStatus.tsx b/site/src/pages/WorkspacePage/ConnectionStatus.tsx
@@ -0,0 +1,68 @@
+import { type FC } from "react";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { useTheme } from "@emotion/react";
+import { Stack } from "components/Stack/Stack";
+
+dayjs.extend(relativeTime);
+
+interface ConnectionStatusProps {
+  lastUsedAt: string;
+}
+
+export const ConnectionStatus: FC<ConnectionStatusProps> = ({ lastUsedAt }) => {
+  const theme = useTheme();
+  const t = dayjs(lastUsedAt);
+  const now = dayjs();
+  let message = t.fromNow();
+  let circle = (
+    <Circle color={theme.palette.text.secondary} variant="outlined" />
+  );
+
+  if (t.isAfter(now.subtract(1, "hour"))) {
+    circle = <Circle color={theme.roles.success.fill.solid} />;
+    // Since the agent reports on a 10m interval,
+    // the last_used_at can be inaccurate when recent.
+    message = "Now";
+  } else if (t.isAfter(now.subtract(3, "day"))) {
+    circle = <Circle color={theme.palette.text.secondary} />;
+  } else if (t.isAfter(now.subtract(1, "month"))) {
+    circle = <Circle color={theme.roles.warning.fill.solid} />;
+  } else if (t.isAfter(now.subtract(100, "year"))) {
+    circle = <Circle color={theme.roles.error.fill.solid} />;
+  } else {
+    message = "Never";
+  }
+
+  return (
+    <Stack
+      style={{ color: theme.palette.text.secondary }}
+      direction="row"
+      spacing={1}
+      alignItems="center"
+    >
+      {circle}
+      <span data-chromatic="ignore">{message}</span>
+    </Stack>
+  );
+};
+
+type CircleProps = {
+  color: string;
+  variant?: "solid" | "outlined";
+};
+
+const Circle: FC<CircleProps> = ({ color, variant = "solid" }) => {
+  return (
+    <div
+      aria-hidden
+      css={{
+        width: 8,
+        height: 8,
+        backgroundColor: variant === "solid" ? color : undefined,
+        border: variant === "outlined" ? `1px solid ${color}` : undefined,
+        borderRadius: 9999,
+      }}
+    />
+  );
+};
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -33,7 +33,7 @@ import {
   shouldDisplayScheduleControls,
 } from "./WorkspaceScheduleControls";
 import { WorkspacePermissions } from "./permissions";
-import { LastUsed } from "pages/WorkspacesPage/LastUsed";
+import { ConnectionStatus } from "./ConnectionStatus";
 
 export type WorkspaceError =
   | "getBuildsError"
@@ -201,6 +201,23 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
           </Popover>
         </TopbarData>
 
+        <ConnectionStatus lastUsedAt={workspace.last_used_at} />
+
+        {shouldDisplayScheduleControls(workspace) && (
+          <TopbarData>
+            <TopbarIcon>
+              <Tooltip title="Schedule">
+                <ScheduleOutlined aria-label="Schedule" />
+              </Tooltip>
+            </TopbarIcon>
+            <WorkspaceScheduleControls
+              workspace={workspace}
+              template={template}
+              canUpdateSchedule={canUpdateWorkspace}
+            />
+          </TopbarData>
+        )}
+
         {shouldDisplayDormantData && (
           <TopbarData>
             <TopbarIcon>
@@ -220,23 +237,6 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
           </TopbarData>
         )}
 
-        {shouldDisplayScheduleControls(workspace) && (
-          <TopbarData>
-            <TopbarIcon>
-              <Tooltip title="Schedule">
-                <ScheduleOutlined aria-label="Schedule" />
-              </Tooltip>
-            </TopbarIcon>
-            <WorkspaceScheduleControls
-              workspace={workspace}
-              template={template}
-              canUpdateSchedule={canUpdateWorkspace}
-            />
-          </TopbarData>
-        )}
-
-        <LastUsed lastUsedAt={workspace.last_used_at} />
-
         {quota && quota.budget > 0 && (
           <TopbarData>
             <TopbarIcon>