feat(site): show metadata stale data (#8745)

site/src/components/Resources/AgentMetadata.stories.tsx

@@ -57,7 +57,7 @@ Example.args = {
     {
       result: {
         ...resultDefaults,
-        value: "cant see it",
+        value: "stale value",
         age: 300,
       },
       description: {
@@ -76,18 +76,7 @@ Example.args = {
       description: {
         ...descriptionDefaults,
         display_name: "Error",
-      },
-    },
-    {
-      result: {
-        ...resultDefaults,
-        value: "oops",
-        error: "fatal error",
-      },
-      description: {
-        ...descriptionDefaults,
-        display_name: "Error",
-        key: "stale",
+        key: "error",
       },
     },
     {

site/src/components/Resources/AgentMetadata.tsx

@@ -6,6 +6,8 @@ import dayjs from "dayjs"
 import { createContext, FC, useContext, useEffect, useState } from "react"
 import Skeleton from "@mui/material/Skeleton"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
+import { combineClasses } from "utils/combineClasses"
+import Tooltip from "@mui/material/Tooltip"
 
 type ItemStatus = "stale" | "valid" | "loading"
 
@@ -44,22 +46,33 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
   // users that what's shown is real. If times aren't correctly synced this
   // could be buggy. But, how common is that anyways?
   const value =
-    status === "stale" || status === "loading" ? (
+    status === "loading" ? (
       <Skeleton
         width={65}
         height={12}
         variant="text"
         className={styles.skeleton}
       />
+    ) : status === "stale" ? (
+      <Tooltip title="This data is stale and no longer up to date">
+        <div
+          className={combineClasses([
+            styles.metadataValue,
+            styles.metadataStale,
+          ])}
+        >
+          {item.result.value}
+        </div>
+      </Tooltip>
     ) : (
       <div
-        className={
-          styles.metadataValue +
-          " " +
-          (item.result.error.length === 0
+        className={combineClasses([
+          styles.metadataValue,
+
+          item.result.error.length === 0
             ? styles.metadataValueSuccess
-            : styles.metadataValueError)
-        }
+            : styles.metadataValueError,
+        ])}
       >
         {item.result.value}
       </div>
@@ -226,6 +239,11 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.error.main,
   },
 
+  metadataStale: {
+    color: theme.palette.text.disabled,
+    cursor: "pointer",
+  },
+
   skeleton: {
     marginTop: theme.spacing(0.5),
   },