Improve navigation

web-admin/src/features/billing/plans/PlanQuotas.svelte

@@ -39,20 +39,26 @@
   </div>
 
   {#if $usageMetrics?.data}
-    {#if singleProjectLimit && storageLimitBytesPerDeployment && storageLimitBytesPerDeployment !== "-1"}
-      <div class="quota-entry">
-        <div class="quota-entry-title">Data Size</div>
+    <div class="quota-entry">
+      <div class="quota-entry-title">Data Size</div>
+      {#if singleProjectLimit && storageLimitBytesPerDeployment && storageLimitBytesPerDeployment !== "-1"}
         <div>
           <Progress
             value={totalOrgUsage}
             max={Number(storageLimitBytesPerDeployment)}
           />
           {formatUsageVsQuota(totalOrgUsage, storageLimitBytesPerDeployment)}
         </div>
-      </div>
-    {:else}
-      <!-- TODO: once we have the dashboard support link to it -->
-    {/if}
+      {:else}
+        <a
+          href={`/${organization}/-/projects-breakdown`}
+          class="text-primary-600 text-xs"
+          data-sveltekit-preload-data="off"
+        >
+          See project size breakdown
+        </a>
+      {/if}
+    </div>
   {/if}
 </div>
 

web-admin/src/features/navigation/nav-utils.ts

@@ -27,6 +27,10 @@ export function isProjectPage(page: Page): boolean {
   );
 }
 
+export function isProjectsBreakdownPage(page: Page): boolean {
+  return page.route.id === "/[organization]/-/projects-breakdown";
+}
+
 export function withinProject(page: Page): boolean {
   return !!page.route?.id?.startsWith("/[organization]/[project]");
 }

web-admin/src/routes/[organization]/-/projects-breakdown/+page.ts

@@ -0,0 +1,41 @@
+import {
+  adminServiceGetBillingProjectCredentials,
+  getAdminServiceGetBillingProjectCredentialsQueryKey,
+} from "@rilldata/web-admin/client";
+import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+import { fixLocalhostRuntimePort } from "@rilldata/web-common/runtime-client/fix-localhost-runtime-port";
+import type { Runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+import { error } from "@sveltejs/kit";
+
+export const load = async ({ params, parent }) => {
+  const { organizationPermissions } = await parent();
+  if (!organizationPermissions.manageProjects) {
+    throw error(404, "Page not found");
+  }
+
+  try {
+    const { organization } = params;
+    const billingProjectCredsResp = await queryClient.fetchQuery({
+      queryKey: getAdminServiceGetBillingProjectCredentialsQueryKey({
+        organization,
+      }),
+      queryFn: () => adminServiceGetBillingProjectCredentials({ organization }),
+    });
+    const runtime: Runtime = {
+      host: fixLocalhostRuntimePort(billingProjectCredsResp.runtimeHost),
+      instanceId: billingProjectCredsResp.instanceId,
+      jwt: {
+        token: billingProjectCredsResp.accessToken,
+        authContext: "embed",
+        receivedAt: Date.now(),
+      },
+    };
+
+    return {
+      runtime,
+    };
+  } catch (err) {
+    const statusCode = err?.response?.status || 500;
+    throw error(statusCode, "Failed to fetch project breakdown");
+  }
+};