From 42a2e560c1f7dfb3d36b6d733617fc9e6706f01a Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Thu, 19 Dec 2024 17:31:15 +0530
Subject: [PATCH 1/3] Add project breakdown page

---
 .../ProjectBreakdownDashboard.svelte          | 13 +++++++
 .../-/project-breakdown/+page.svelte          | 22 ++++++++++++
 .../-/project-breakdown/+page.ts              | 34 +++++++++++++++++++
 3 files changed, 69 insertions(+)
 create mode 100644 web-admin/src/features/organizations/project-breakdown/ProjectBreakdownDashboard.svelte
 create mode 100644 web-admin/src/routes/[organization]/-/project-breakdown/+page.svelte
 create mode 100644 web-admin/src/routes/[organization]/-/project-breakdown/+page.ts

diff --git a/web-admin/src/features/organizations/project-breakdown/ProjectBreakdownDashboard.svelte b/web-admin/src/features/organizations/project-breakdown/ProjectBreakdownDashboard.svelte
new file mode 100644
index 00000000000..4bb4fe01413
--- /dev/null
+++ b/web-admin/src/features/organizations/project-breakdown/ProjectBreakdownDashboard.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import ExploreEmbed from "@rilldata/web-admin/features/embeds/ExploreEmbed.svelte";
+  import { useValidExplores } from "@rilldata/web-common/features/dashboards/selectors";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+
+  $: instanceId = $runtime.instanceId;
+  $: explores = useValidExplores(instanceId);
+  $: exploreName = $explores.data?.[0]?.meta?.name?.name;
+</script>
+
+{#if exploreName}
+  <ExploreEmbed {instanceId} {exploreName} />
+{/if}
diff --git a/web-admin/src/routes/[organization]/-/project-breakdown/+page.svelte b/web-admin/src/routes/[organization]/-/project-breakdown/+page.svelte
new file mode 100644
index 00000000000..d1348da61c8
--- /dev/null
+++ b/web-admin/src/routes/[organization]/-/project-breakdown/+page.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import ProjectBreakdownDashboard from "@rilldata/web-admin/features/organizations/project-breakdown/ProjectBreakdownDashboard.svelte";
+  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+  import { invalidateRuntimeQueries } from "@rilldata/web-common/runtime-client/invalidation";
+  import RuntimeProvider from "@rilldata/web-common/runtime-client/RuntimeProvider.svelte";
+  import type { PageData } from "./$types";
+
+  export let data: PageData;
+  $: ({ runtime } = data);
+  // Seeing the data using the same project but with different jwt will not get automatically invalidated.
+  // Since we do not have jwt as part of the query key we need to invalidate the queries for this instanceId
+  $: invalidateRuntimeQueries(queryClient, runtime.instanceId);
+</script>
+
+<RuntimeProvider
+  instanceId={runtime.instanceId}
+  host={runtime.host}
+  jwt={runtime.jwt.token}
+  authContext={runtime.jwt.authContext}
+>
+  <ProjectBreakdownDashboard />
+</RuntimeProvider>
diff --git a/web-admin/src/routes/[organization]/-/project-breakdown/+page.ts b/web-admin/src/routes/[organization]/-/project-breakdown/+page.ts
new file mode 100644
index 00000000000..0593053512a
--- /dev/null
+++ b/web-admin/src/routes/[organization]/-/project-breakdown/+page.ts
@@ -0,0 +1,34 @@
+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";
+
+export const load = async ({ params, parent }) => {
+  const { organizationPermissions } = await parent();
+  if (!organizationPermissions.manageProjects) {
+    // TODO
+  }
+  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,
+  };
+};

From b5c93d0e4741158b71e2883c905ac57a9158a560 Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Thu, 19 Dec 2024 18:32:51 +0530
Subject: [PATCH 2/3] Improve navigation

---
 .../features/billing/plans/PlanQuotas.svelte  | 20 +++++----
 .../src/features/navigation/nav-utils.ts      |  4 ++
 .../-/project-breakdown/+page.ts              | 34 ---------------
 .../+page.svelte                              |  0
 .../-/projects-breakdown/+page.ts             | 41 +++++++++++++++++++
 5 files changed, 58 insertions(+), 41 deletions(-)
 delete mode 100644 web-admin/src/routes/[organization]/-/project-breakdown/+page.ts
 rename web-admin/src/routes/[organization]/-/{project-breakdown => projects-breakdown}/+page.svelte (100%)
 create mode 100644 web-admin/src/routes/[organization]/-/projects-breakdown/+page.ts

diff --git a/web-admin/src/features/billing/plans/PlanQuotas.svelte b/web-admin/src/features/billing/plans/PlanQuotas.svelte
index 49578daac40..4f00c4e8f70 100644
--- a/web-admin/src/features/billing/plans/PlanQuotas.svelte
+++ b/web-admin/src/features/billing/plans/PlanQuotas.svelte
@@ -39,9 +39,9 @@
   </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}
@@ -49,10 +49,16 @@
           />
           {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>
 
diff --git a/web-admin/src/features/navigation/nav-utils.ts b/web-admin/src/features/navigation/nav-utils.ts
index c7752ad9676..787c31bda13 100644
--- a/web-admin/src/features/navigation/nav-utils.ts
+++ b/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]");
 }
diff --git a/web-admin/src/routes/[organization]/-/project-breakdown/+page.ts b/web-admin/src/routes/[organization]/-/project-breakdown/+page.ts
deleted file mode 100644
index 0593053512a..00000000000
--- a/web-admin/src/routes/[organization]/-/project-breakdown/+page.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-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";
-
-export const load = async ({ params, parent }) => {
-  const { organizationPermissions } = await parent();
-  if (!organizationPermissions.manageProjects) {
-    // TODO
-  }
-  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,
-  };
-};
diff --git a/web-admin/src/routes/[organization]/-/project-breakdown/+page.svelte b/web-admin/src/routes/[organization]/-/projects-breakdown/+page.svelte
similarity index 100%
rename from web-admin/src/routes/[organization]/-/project-breakdown/+page.svelte
rename to web-admin/src/routes/[organization]/-/projects-breakdown/+page.svelte
diff --git a/web-admin/src/routes/[organization]/-/projects-breakdown/+page.ts b/web-admin/src/routes/[organization]/-/projects-breakdown/+page.ts
new file mode 100644
index 00000000000..470df896805
--- /dev/null
+++ b/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");
+  }
+};

From 44d12f28f16eeefead5c74b4c1293ddb7f9ab38a Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Fri, 20 Dec 2024 16:43:59 +0530
Subject: [PATCH 3/3] Fix lint

---
 .../src/routes/[organization]/-/projects-breakdown/+page.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-admin/src/routes/[organization]/-/projects-breakdown/+page.ts b/web-admin/src/routes/[organization]/-/projects-breakdown/+page.ts
index 470df896805..88fac296f4e 100644
--- a/web-admin/src/routes/[organization]/-/projects-breakdown/+page.ts
+++ b/web-admin/src/routes/[organization]/-/projects-breakdown/+page.ts
@@ -22,10 +22,10 @@ export const load = async ({ params, parent }) => {
       queryFn: () => adminServiceGetBillingProjectCredentials({ organization }),
     });
     const runtime: Runtime = {
-      host: fixLocalhostRuntimePort(billingProjectCredsResp.runtimeHost),
-      instanceId: billingProjectCredsResp.instanceId,
+      host: fixLocalhostRuntimePort(billingProjectCredsResp.runtimeHost ?? ""),
+      instanceId: billingProjectCredsResp.instanceId ?? "",
       jwt: {
-        token: billingProjectCredsResp.accessToken,
+        token: billingProjectCredsResp.accessToken ?? "",
         authContext: "embed",
         receivedAt: Date.now(),
       },