refactor: migrate runtime client from Orval to ConnectRPC with scoped RuntimeClient

Makefile

@@ -56,6 +56,7 @@ proto.generate:
 	cd proto && buf generate --exclude-path rill/ui
 	cd proto && buf generate --template buf.gen.openapi-admin.yaml --path rill/admin
 	cd proto && buf generate --template buf.gen.openapi-runtime.yaml --path rill/runtime
+	cd proto && buf generate --template buf.gen.runtime.yaml --path rill/runtime
 	cd proto && buf generate --template buf.gen.local.yaml --path rill/local
 	cd proto && buf generate --template buf.gen.ui.yaml
 	go run -ldflags="-X main.Version=$(shell git describe --tags $(shell git rev-list --tags --max-count=1))" \

proto/buf.gen.runtime.yaml

@@ -0,0 +1,16 @@
+version: v2
+managed:
+  enabled: true
+  override:
+    - file_option: go_package_prefix
+      value: github.com/rilldata/rill/proto/gen
+  disable:
+    - module: buf.build/googleapis/googleapis
+      file_option: go_package_prefix
+    - module: buf.build/envoyproxy/protoc-gen-validate
+      file_option: go_package_prefix
+plugins:
+  - remote: buf.build/connectrpc/es:v1.4.0
+    out: ../web-common/src/proto/gen
+    opt:
+      - target=ts

web-admin/src/features/alerts/CreateAlert.svelte

@@ -10,7 +10,7 @@
   import AlertForm from "@rilldata/web-common/features/alerts/AlertForm.svelte";
   import { useMetricsViewValidSpec } from "@rilldata/web-common/features/dashboards/selectors";
   import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import { BellPlusIcon } from "lucide-svelte";
 
   const {
@@ -22,9 +22,9 @@
     dashboardStore,
   } = getStateManagers();
 
-  $: ({ instanceId } = $runtime);
+  const runtimeClient = useRuntimeClient();
 
-  $: metricsView = useMetricsViewValidSpec(instanceId, $metricsViewName);
+  $: metricsView = useMetricsViewValidSpec(runtimeClient, $metricsViewName);
   $: hasTimeDimension = !!$metricsView?.data?.timeDimension;
 
   let open = false;

web-admin/src/features/alerts/history/AlertHistoryTable.svelte

@@ -4,15 +4,15 @@
   import { useAlert } from "@rilldata/web-admin/features/alerts/selectors";
   import ResourceList from "@rilldata/web-admin/features/resources/ResourceList.svelte";
   import type { V1AlertExecution } from "@rilldata/web-common/runtime-client/gen/index.schemas";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import type { ColumnDef } from "@tanstack/svelte-table";
   import { flexRender } from "@tanstack/svelte-table";
 
   export let alert: string;
 
-  $: ({ instanceId } = $runtime);
+  const runtimeClient = useRuntimeClient();
 
-  $: alertQuery = useAlert(instanceId, alert);
+  $: alertQuery = useAlert(runtimeClient, alert);
 
   /**
    * Table column definitions.

web-admin/src/features/alerts/metadata/AlertFilters.svelte

@@ -13,7 +13,7 @@
     V1Expression,
     V1TimeRange,
   } from "@rilldata/web-common/runtime-client";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import { flip } from "svelte/animate";
   import { fly } from "svelte/transition";
 
@@ -36,9 +36,9 @@
     whereFilter = dimensionFilters;
     havingFilter = dimensionThresholdFilters;
   }
-  $: ({ instanceId } = $runtime);
+  const runtimeClient = useRuntimeClient();
 
-  $: metricsView = useMetricsView(instanceId, metricsViewName);
+  $: metricsView = useMetricsView(runtimeClient, metricsViewName);
   $: dimensionIdMap = getMapFromArray(
     $metricsView.data?.metricsView?.state?.validSpec?.dimensions ?? [],
     (dimension) => dimension.name,

web-admin/src/features/alerts/metadata/AlertMetadata.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
+  import { isNotFoundError } from "@rilldata/web-common/lib/errors";
   import { createAdminServiceDeleteAlert } from "@rilldata/web-admin/client";
   import EditAlert from "@rilldata/web-admin/features/alerts/EditAlert.svelte";
   import AlertFilterCriteria from "@rilldata/web-admin/features/alerts/metadata/AlertFilterCriteria.svelte";
@@ -31,28 +32,29 @@
     getRuntimeServiceListResourcesQueryKey,
     type V1MetricsViewAggregationRequest,
   } from "@rilldata/web-common/runtime-client";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import { useQueryClient } from "@tanstack/svelte-query";
 
   export let organization: string;
   export let project: string;
   export let alert: string;
 
-  $: ({ instanceId } = $runtime);
+  const runtimeClient = useRuntimeClient();
 
-  $: alertQuery = useAlert(instanceId, alert);
-  $: isAlertCreatedByCode = useIsAlertCreatedByCode(instanceId, alert);
+  $: alertQuery = useAlert(runtimeClient, alert);
+  $: isAlertCreatedByCode = useIsAlertCreatedByCode(runtimeClient, alert);
 
   // Get dashboard
-  $: exploreName = useAlertDashboardName(instanceId, alert);
-  $: validSpecResp = useExploreValidSpec(instanceId, $exploreName.data);
+  $: exploreName = useAlertDashboardName(runtimeClient, alert);
+  $: validSpecResp = useExploreValidSpec(runtimeClient, $exploreName.data);
   $: exploreSpec = $validSpecResp.data?.explore;
   $: metricsViewName = exploreSpec?.metricsView;
   $: dashboardTitle = exploreSpec?.displayName || $exploreName.data;
-  $: dashboardDoesNotExist = $validSpecResp.error?.response?.status === 404;
+  $: dashboardDoesNotExist =
+    $validSpecResp.isError && isNotFoundError($validSpecResp.error);
 
   $: exploreIsValid = hasValidMetricsViewTimeRange(
-    instanceId,
+    runtimeClient,
     $exploreName.data,
   );
 
@@ -74,7 +76,7 @@
     queryArgsJson,
   ) as V1MetricsViewAggregationRequest;
 
-  $: dashboardState = useAlertDashboardState(instanceId, alertSpec);
+  $: dashboardState = useAlertDashboardState(runtimeClient, alertSpec);
 
   $: snoozeLabel = humaniseAlertSnoozeOption(alertSpec);
 
@@ -91,7 +93,7 @@
       exploreProtoState: alertSpec?.annotations?.web_open_state,
     },
     {
-      instanceId,
+      client: runtimeClient,
       organization,
       project,
     },
@@ -108,7 +110,9 @@
       name: $alertQuery.data.resource.meta.name.name,
     });
     await queryClient.invalidateQueries({
-      queryKey: getRuntimeServiceListResourcesQueryKey(instanceId),
+      queryKey: getRuntimeServiceListResourcesQueryKey(
+        runtimeClient.instanceId,
+      ),
     });
     // goto only after invalidate is complete
     goto(`/${organization}/${project}/-/alerts`);

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

@@ -8,39 +8,41 @@ import {
   createRuntimeServiceGetResource,
   createRuntimeServiceListResources,
 } from "@rilldata/web-common/runtime-client";
-import type { V1AlertSpec } from "@rilldata/web-common/runtime-client/gen/index.schemas";
+import type {
+  V1AlertSpec,
+  V1ExploreSpec,
+} from "@rilldata/web-common/runtime-client/gen/index.schemas";
+import type { RuntimeClient } from "@rilldata/web-common/runtime-client/v2";
 import { smartRefetchIntervalFunc } from "@rilldata/web-admin/lib/refetch-interval-store";
 import { derived, type Readable, readable } from "svelte/store";
 
-export function useAlerts(instanceId: string, enabled = true) {
+export function useAlerts(client: RuntimeClient, enabled = true) {
   return createRuntimeServiceListResources(
-    instanceId,
+    client,
     {
       kind: ResourceKind.Alert,
     },
     {
       query: {
-        enabled: enabled && !!instanceId,
+        enabled: enabled && !!client.instanceId,
         refetchOnMount: true,
         refetchInterval: smartRefetchIntervalFunc,
       },
     },
   );
 }
 
-export function useAlert(instanceId: string, name: string) {
-  return createRuntimeServiceGetResource(instanceId, {
-    "name.name": name,
-    "name.kind": ResourceKind.Alert,
+export function useAlert(client: RuntimeClient, name: string) {
+  return createRuntimeServiceGetResource(client, {
+    name: { name, kind: ResourceKind.Alert },
   });
 }
 
-export function useAlertDashboardName(instanceId: string, name: string) {
+export function useAlertDashboardName(client: RuntimeClient, name: string) {
   return createRuntimeServiceGetResource(
-    instanceId,
+    client,
     {
-      "name.name": name,
-      "name.kind": ResourceKind.Alert,
+      name: { name, kind: ResourceKind.Alert },
     },
     {
       query: {
@@ -93,12 +95,11 @@ export function useAlertOwnerName(
   );
 }
 
-export function useIsAlertCreatedByCode(instanceId: string, name: string) {
+export function useIsAlertCreatedByCode(client: RuntimeClient, name: string) {
   return createRuntimeServiceGetResource(
-    instanceId,
+    client,
     {
-      "name.name": name,
-      "name.kind": ResourceKind.Alert,
+      name: { name, kind: ResourceKind.Alert },
     },
     {
       query: {
@@ -110,7 +111,7 @@ export function useIsAlertCreatedByCode(instanceId: string, name: string) {
 }
 
 export function useAlertDashboardState(
-  instanceId: string,
+  client: RuntimeClient,
   alertSpec: V1AlertSpec | undefined,
 ) {
   if (!alertSpec) {
@@ -130,15 +131,15 @@ export function useAlertDashboardState(
   }
 
   return createRuntimeServiceGetExplore(
-    instanceId,
+    client,
     { name: exploreName },
     {
       query: {
         select: (data) =>
           getDashboardStateFromUrl(
             webState,
             data.metricsView?.metricsView?.state?.validSpec ?? {},
-            data.explore?.explore?.state?.validSpec,
+            data.explore?.explore?.state?.validSpec as V1ExploreSpec,
           ),
       },
     },

web-admin/src/features/billing/plans/selectors.ts

@@ -8,7 +8,6 @@ import {
 } from "@rilldata/web-admin/client";
 import { isTeamPlan } from "@rilldata/web-admin/features/billing/plans/utils";
 import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
-import { fetchWrapper } from "@rilldata/web-common/runtime-client/fetchWrapper";
 import type { Page } from "@sveltejs/kit";
 import type { CreateQueryResult } from "@tanstack/svelte-query";
 import { DateTime } from "luxon";
@@ -91,14 +90,13 @@ function usageMetrics(
 ): Promise<UsageMetricsResponse> {
   const url = new URL(runtimeHost);
   url.pathname = `/v1/instances/${instanceId}/api/usage-meter`;
-  return fetchWrapper({
-    url: url.toString(),
+  return fetch(url.toString(), {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
       Authorization: `Bearer ${accessToken}`,
     },
-  });
+  }).then((r) => r.json());
 }
 export function getUsageMetrics(
   runtimeHost: string,

web-admin/src/features/bookmarks/BookmarksFormDialog.svelte

@@ -33,7 +33,7 @@
   } from "@rilldata/web-common/runtime-client";
   import { InfoIcon } from "lucide-svelte";
   import type { Interval } from "luxon";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import { getCanvasStore } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
   import CanvasFilterChipsReadOnly from "@rilldata/web-common/features/dashboards/filters/CanvasFilterChipsReadOnly.svelte";
   import { defaults, superForm } from "sveltekit-superforms";
@@ -51,11 +51,11 @@
   export let metricsViewNames: string[];
   export let onClose = () => {};
 
+  const runtimeClient = useRuntimeClient();
+
   let filterState: undefined | Awaited<ReturnType<typeof processUrl>> =
     undefined;
 
-  $: ({ instanceId } = $runtime);
-
   $: ({ name: resourceName, kind: resourceKind } = resource);
 
   $: ({ url } = $page);
@@ -83,7 +83,12 @@
 
     try {
       const promises = metricsViewNames.map((mvName) =>
-        deriveInterval(timeRange.expression || "", mvName, timeZone),
+        deriveInterval(
+          timeRange.expression || "",
+          runtimeClient,
+          mvName,
+          timeZone,
+        ),
       );
 
       const intervals = await Promise.all(promises);
@@ -118,7 +123,7 @@
       if (resource.kind === ResourceKind.Canvas) {
         const uiFilters = getCanvasStore(
           resourceName,
-          instanceId,
+          runtimeClient.instanceId,
         ).canvasEntity.filterManager.getUIFiltersFromString(searchParams);
 
         return {

web-admin/src/features/bookmarks/CanvasBookmarks.svelte

@@ -3,14 +3,14 @@
   import { getCanvasCategorisedBookmarks } from "@rilldata/web-admin/features/bookmarks/selectors.ts";
   import { useCanvas } from "@rilldata/web-common/features/canvas/selector";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors.ts";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store.ts";
+  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import { writable } from "svelte/store";
 
   export let organization: string;
   export let project: string;
   export let canvasName: string;
 
-  $: ({ instanceId } = $runtime);
+  const runtimeClient = useRuntimeClient();
 
   const orgAndProjectNameStore = writable({ organization, project });
   $: orgAndProjectNameStore.set({ organization, project });
@@ -23,7 +23,7 @@
     canvasNameStore,
   );
 
-  $: canvasResponse = useCanvas(instanceId, canvasName);
+  $: canvasResponse = useCanvas(runtimeClient, canvasName);
 
   $: metricsViews = $canvasResponse.data?.metricsViews || {};