fix(striker-ui): replace stale ss label with time-ago

striker-ui/components/Display/Preview.tsx

@@ -21,10 +21,11 @@ import IconButton, { IconButtonProps } from '../IconButton';
 import { InnerPanel, InnerPanelHeader, Panel, PanelHeader } from '../Panels';
 import Spinner from '../Spinner';
 import { BodyText, HeaderText } from '../Text';
-import { last } from '../../lib/time';
+import { elapsed, last, now } from '../../lib/time';
 
 type PreviewOptionalProps = {
   externalPreview?: string;
+  externalTimestamp?: number;
   headerEndAdornment?: ReactNode;
   isExternalLoading?: boolean;
   isExternalPreviewStale?: boolean;
@@ -46,6 +47,7 @@ const PREVIEW_DEFAULT_PROPS: Required<
 > &
   Pick<PreviewOptionalProps, 'onClickConnectButton' | 'onClickPreview'> = {
   externalPreview: '',
+  externalTimestamp: 0,
   headerEndAdornment: null,
   isExternalLoading: false,
   isExternalPreviewStale: false,
@@ -86,6 +88,7 @@ const PreviewPanelHeader: FC<{
 
 const Preview: FC<PreviewProps> = ({
   externalPreview = PREVIEW_DEFAULT_PROPS.externalPreview,
+  externalTimestamp = PREVIEW_DEFAULT_PROPS.externalTimestamp,
   headerEndAdornment,
   isExternalLoading = PREVIEW_DEFAULT_PROPS.isExternalLoading,
   isExternalPreviewStale = PREVIEW_DEFAULT_PROPS.isExternalPreviewStale,
@@ -101,6 +104,7 @@ const Preview: FC<PreviewProps> = ({
   const [isPreviewLoading, setIsPreviewLoading] = useState<boolean>(true);
   const [isPreviewStale, setIsPreviewStale] = useState<boolean>(false);
   const [preview, setPreview] = useState<string>('');
+  const [previewTimstamp, setPreviewTimestamp] = useState<number>(0);
 
   const previewButtonContent = useMemo(
     () =>
@@ -117,9 +121,16 @@ const Preview: FC<PreviewProps> = ({
               width: '100%',
             }}
           />
-          {isPreviewStale && (
-            <BodyText sx={{ position: 'absolute' }}>Outdated</BodyText>
-          )}
+          {isPreviewStale &&
+            ((sst: number) => {
+              const { unit, value } = elapsed(now() - sst);
+
+              return (
+                <BodyText position="absolute">
+                  Lost ~{value} {unit} ago
+                </BodyText>
+              );
+            })(previewTimstamp)}
         </>
       ) : (
         <PowerSettingsNewOutlinedIcon
@@ -130,7 +141,7 @@ const Preview: FC<PreviewProps> = ({
           }}
         />
       ),
-    [isPreviewStale, isUseInnerPanel, preview, serverState],
+    [isPreviewStale, isUseInnerPanel, preview, previewTimstamp, serverState],
   );
 
   useEffect(() => {
@@ -145,6 +156,7 @@ const Preview: FC<PreviewProps> = ({
           const { screenshot, timestamp } = data;
 
           setPreview(screenshot);
+          setPreviewTimestamp(timestamp);
           setIsPreviewStale(!last(timestamp, 300));
         } catch {
           setIsPreviewStale(true);
@@ -154,11 +166,13 @@ const Preview: FC<PreviewProps> = ({
       })();
     } else if (!isExternalLoading) {
       setPreview(externalPreview);
+      setPreviewTimestamp(externalTimestamp);
       setIsPreviewStale(isExternalPreviewStale);
       setIsPreviewLoading(false);
     }
   }, [
     externalPreview,
+    externalTimestamp,
     isExternalLoading,
     isExternalPreviewStale,
     isFetchPreview,

striker-ui/pages/index.tsx

@@ -23,6 +23,7 @@ type ServerListItem = ServerOverviewMetadata & {
   isScreenshotStale?: boolean;
   loading?: boolean;
   screenshot: string;
+  timestamp: number;
 };
 
 const createServerPreviewContainer = (
@@ -54,9 +55,11 @@ const createServerPreviewContainer = (
         serverName,
         serverState,
         serverUUID,
+        timestamp,
       }) => (
         <Preview
           externalPreview={screenshot}
+          externalTimestamp={timestamp}
           headerEndAdornment={[
             <Link
               href={`/server?uuid=${serverUUID}&server_name=${serverName}&server_state=${serverState}`}
@@ -158,6 +161,7 @@ const Dashboard: FC = () => {
             ...serverOverview,
             loading: true,
             screenshot: previousScreenshot,
+            timestamp: 0,
           };
 
           fetchJSON<{ screenshot: string; timestamp: number }>(
@@ -169,6 +173,7 @@ const Dashboard: FC = () => {
               item.isScreenshotStale = !last(timestamp, 300);
               item.loading = false;
               item.screenshot = screenshot;
+              item.timestamp = timestamp;
 
               const allServersWithScreenshots = [...serverListItems];