Using tanstack query for all lists in cloud (#3252)

* Using tanstack query for all lists in cloud

* PR comments

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

@@ -1,41 +1,28 @@
 <script lang="ts">
-  import { getDashboardsForProject } from "@rilldata/web-admin/features/projects/dashboards";
+  import { useDashboards } from "@rilldata/web-admin/features/projects/dashboards";
   import ProjectAccessControls from "@rilldata/web-admin/features/projects/ProjectAccessControls.svelte";
   import DashboardIcon from "@rilldata/web-common/components/icons/DashboardIcon.svelte";
   import { Tag } from "@rilldata/web-common/components/tag";
-  import type { V1Resource } from "@rilldata/web-common/runtime-client";
-  import {
-    createAdminServiceGetProject,
-    V1DeploymentStatus,
-    V1GetProjectResponse,
-  } from "../../client";
+  import { createAdminServiceGetProject } from "../../client";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
 
   export let organization: string;
   export let project: string;
 
-  let dashboards: V1Resource[];
+  let dashboards: ReturnType<typeof useDashboards>;
 
   $: proj = createAdminServiceGetProject(organization, project);
   $: if ($proj?.isSuccess && $proj.data?.prodDeployment) {
-    updateDashboardsForProject($proj.data);
-  }
-
-  // This method has to be here since we cannot have async-await in reactive statement to set dashboardListItems
-  async function updateDashboardsForProject(projectData: V1GetProjectResponse) {
-    const status = projectData.prodDeployment.status;
-    if (status === V1DeploymentStatus.DEPLOYMENT_STATUS_PENDING) return;
-
-    dashboards = await getDashboardsForProject(projectData);
+    dashboards = useDashboards($proj.data.prodDeployment.runtimeInstanceId);
   }
 </script>
 
-{#if dashboards?.length === 0}
+{#if $dashboards?.data?.length === 0}
   <p class="text-gray-500 text-xs">This project has no dashboards yet.</p>
-{:else if dashboards?.length > 0}
+{:else if $dashboards?.data?.length > 0}
   <ol class="flex flex-col gap-y-4 max-w-full 2xl:max-w-[1200px]">
-    {#each dashboards as dashboard}
+    {#each $dashboards.data as dashboard}
       <li class="w-full h-[52px] border rounded">
         <a
           href={`/${organization}/${project}/${dashboard.meta.name.name}`}

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

@@ -2,6 +2,7 @@
   import { listenAndInvalidateDashboards } from "@rilldata/web-admin/features/projects/dashboards";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { useQueryClient } from "@tanstack/svelte-query";
+  import { onDestroy } from "svelte";
   import type { Unsubscriber } from "svelte/store";
 
   const queryClient = useQueryClient();
@@ -14,6 +15,10 @@
       $runtime?.instanceId
     );
   }
+
+  onDestroy(() => {
+    unsubscribe?.();
+  });
 </script>
 
 <slot />

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

@@ -17,7 +17,7 @@
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
   import { getRuntimeServiceListResourcesQueryKey } from "@rilldata/web-common/runtime-client";
-  import { CreateQueryResult, useQueryClient } from "@tanstack/svelte-query";
+  import { useQueryClient } from "@tanstack/svelte-query";
   import type { SvelteComponent } from "svelte";
 
   export let organization: string;
@@ -34,12 +34,7 @@
 
   $: instanceId = $proj?.data?.prodDeployment?.runtimeInstanceId;
 
-  let deploymentStatusFromDashboards: CreateQueryResult<V1DeploymentStatus>;
-  $: if ($proj?.data)
-    deploymentStatusFromDashboards = useDashboardsStatus(
-      instanceId,
-      $proj?.data
-    );
+  $: deploymentStatusFromDashboards = useDashboardsStatus(instanceId);
 
   const queryClient = useQueryClient();
 

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

@@ -15,7 +15,6 @@ import {
   V1ReconcileStatus,
   createRuntimeServiceListResources,
 } from "@rilldata/web-common/runtime-client";
-import { fetchWrapper } from "@rilldata/web-common/runtime-client/fetchWrapper";
 import { invalidateMetricsViewData } from "@rilldata/web-common/runtime-client/invalidation";
 import type { QueryClient } from "@tanstack/svelte-query";
 import Axios from "axios";
@@ -64,10 +63,7 @@ export function useDashboards(instanceId: string) {
   return useFilteredResources(instanceId, ResourceKind.MetricsView);
 }
 
-export function useDashboardsStatus(
-  instanceId: string,
-  project?: V1GetProjectResponse
-) {
+export function useDashboardsStatus(instanceId: string) {
   return createRuntimeServiceListResources(
     instanceId,
     {
@@ -116,34 +112,6 @@ export function useDashboardsStatus(
               return PollTimeWhenProjectReady;
           }
         },
-
-        // Do a manual call for project chip. This could be placed where `runtime` is not populated
-        ...(project
-          ? {
-              queryFn: ({ signal }) => {
-                // Hack: in development, the runtime host is actually on port 8081
-                const host = project.prodDeployment.runtimeHost.replace(
-                  "localhost:9091",
-                  "localhost:8081"
-                );
-                const instanceId = project.prodDeployment.runtimeInstanceId;
-                const jwt = project.jwt;
-                return fetchWrapper({
-                  url: `${host}/v1/instances/${instanceId}/resources?kind=${ResourceKind.MetricsView}`,
-                  method: "GET",
-                  ...(jwt
-                    ? {
-                        headers: {
-                          Authorization: `Bearer ${project.jwt}`,
-                          "Content-Type": "application/json",
-                        },
-                      }
-                    : {}),
-                  signal,
-                });
-              },
-            }
-          : {}),
       },
     }
   );