Cloud UI: Add "data [last] refreshed" timestamp to project status page (

#3687)

* Increase spacing

* Add "data last refreshed" copy to status page

* Move the Github last synced date into the Github status block

* Tweak spacing

* Remove hibernation message that'll never get hit

* Fix prettier

web-admin/src/features/projects/ProjectDeploymentStatus.svelte

@@ -1,41 +1,29 @@
 <script lang="ts">
-  import { useDashboardsLastUpdated } from "@rilldata/web-admin/features/dashboards/listing/selectors";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { createAdminServiceGetProject } from "../../client";
   import ProjectDeploymentStatusChip from "./ProjectDeploymentStatusChip.svelte";
+  import { useProjectDataLastRefreshed } from "./selectors";
 
   export let organization: string;
   export let project: string;
 
-  $: proj = createAdminServiceGetProject(organization, project);
-  $: isProjectDeployed = $proj?.data && $proj.data.prodDeployment;
-  $: lastUpdated = useDashboardsLastUpdated(
-    $runtime.instanceId,
-    organization,
-    project
-  );
+  $: dataLastRefreshed = useProjectDataLastRefreshed($runtime?.instanceId);
 </script>
 
-<div class="flex flex-col gap-y-2">
+<div class="flex flex-col gap-y-1">
+  <span class="uppercase text-gray-500 font-semibold text-[10px] leading-none"
+    >Project status</span
+  >
   <div>
-    <span class="uppercase text-gray-500 font-semibold text-[10px] leading-none"
-      >Project status</span
-    >
-    <div>
-      <ProjectDeploymentStatusChip {organization} {project} />
-    </div>
-    {#if $lastUpdated}
-      <span class="text-gray-500 text-[11px] leading-4">
-        Synced {$lastUpdated.toLocaleString(undefined, {
-          month: "short",
-          day: "numeric",
-          hour: "numeric",
-          minute: "numeric",
-        })}
-      </span>
-    {/if}
+    <ProjectDeploymentStatusChip {organization} {project} />
   </div>
-  {#if !isProjectDeployed}
-    <div>This project is not deployed.</div>
+  {#if $dataLastRefreshed?.data}
+    <span class="text-gray-500 text-[11px] leading-4">
+      Data refreshed {$dataLastRefreshed.data.toLocaleString(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+      })}
+    </span>
   {/if}
 </div>

web-admin/src/features/projects/ProjectGithubConnection.svelte

@@ -3,7 +3,9 @@
   import Github from "@rilldata/web-common/components/icons/Github.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { createAdminServiceGetProject } from "../../client";
+  import { useDashboardsLastUpdated } from "../dashboards/listing/selectors";
   import { getRepoNameFromGithubUrl } from "./github-utils";
 
   export let organization: string;
@@ -15,6 +17,11 @@
     $proj.data?.project?.githubUrl &&
     getRepoNameFromGithubUrl($proj.data.project.githubUrl);
   $: subpath = $proj.data?.project?.subpath;
+  $: githubLastSynced = useDashboardsLastUpdated(
+    $runtime.instanceId,
+    organization,
+    project
+  );
 </script>
 
 {#if $proj.data}
@@ -44,6 +51,16 @@
               </span>
             </div>
           {/if}
+          {#if $githubLastSynced}
+            <span class="text-gray-500 text-[11px] leading-4">
+              Synced {$githubLastSynced.toLocaleString(undefined, {
+                month: "short",
+                day: "numeric",
+                hour: "numeric",
+                minute: "numeric",
+              })}
+            </span>
+          {/if}
         </div>
       </div>
     {:else}

web-admin/src/features/projects/selectors.ts

@@ -3,6 +3,11 @@ import {
   createAdminServiceGetProject,
   createAdminServiceListProjectMembers,
 } from "@rilldata/web-admin/client";
+import {
+  V1ListResourcesResponse,
+  createRuntimeServiceListResources,
+} from "@rilldata/web-common/runtime-client";
+import type { CreateQueryResult } from "@tanstack/svelte-query";
 
 export function getProjectPermissions(orgName: string, projName: string) {
   return createAdminServiceGetProject(orgName, projName, {
@@ -88,3 +93,28 @@ export function useProjectMembersEmails(organization: string, project: string) {
     }
   );
 }
+
+// This function returns the most recent refreshedOn date of all the project's resources.
+// In the future, we really should display the refreshedOn date for all resources individually.
+export function useProjectDataLastRefreshed(
+  instanceId: string
+): CreateQueryResult<Date> {
+  return createRuntimeServiceListResources(instanceId, undefined, {
+    query: {
+      enabled: !!instanceId,
+      select: (data: V1ListResourcesResponse) => {
+        const refreshedOns = data.resources.map((res) => {
+          if (res.model?.state?.refreshedOn) {
+            return new Date(res.model.state.refreshedOn).getTime();
+          }
+          if (res.source?.state?.refreshedOn) {
+            return new Date(res.source.state.refreshedOn).getTime();
+          }
+          return 0;
+        });
+        const max = Math.max(...refreshedOns);
+        return new Date(max);
+      },
+    },
+  });
+}

web-admin/src/routes/[organization]/[project]/-/status/+page.svelte

@@ -11,7 +11,7 @@
 
 <VerticalScrollContainer>
   <div class="pt-4 flex flex-col gap-y-6">
-    <div class="px-12 flex gap-x-9 items-start">
+    <div class="px-12 flex gap-x-20 items-start">
       <ProjectDeploymentStatus {organization} {project} />
       <ProjectGithubConnection {organization} {project} />
     </div>