From a033e89b7a2a622d9646b4c67016f5658b662516 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Fri, 20 Mar 2026 10:04:17 -0400 Subject: [PATCH 01/31] Add Rill Slots UI to project status overview - Add ManageSlotsModal for viewing and adjusting project slot allocation - Add slots-utils with pricing constants and slot calculation helpers - Update DeploymentSection to show current slot count with link to details - Add olapInfo utility for OLAP engine display info - Update status layout with Deployments nav tab - Add display-utils for deployment status labels and styling Co-Authored-By: Claude Opus 4.6 --- .../features/projects/status/display-utils.ts | 25 +- .../status/overview/DeploymentSection.svelte | 86 +++++- .../status/overview/ManageSlotsModal.svelte | 267 ++++++++++++++++++ .../projects/status/overview/olapInfo.ts | 98 +++++++ .../status/overview/slots-utils.test.ts | 38 +++ .../projects/status/overview/slots-utils.ts | 28 ++ .../[project]/-/status/+layout.svelte | 5 + 7 files changed, 533 insertions(+), 14 deletions(-) create mode 100644 web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte create mode 100644 web-admin/src/features/projects/status/overview/olapInfo.ts create mode 100644 web-admin/src/features/projects/status/overview/slots-utils.test.ts create mode 100644 web-admin/src/features/projects/status/overview/slots-utils.ts diff --git a/web-admin/src/features/projects/status/display-utils.ts b/web-admin/src/features/projects/status/display-utils.ts index 7b4bd133f07..a88ee5b9643 100644 --- a/web-admin/src/features/projects/status/display-utils.ts +++ b/web-admin/src/features/projects/status/display-utils.ts @@ -107,16 +107,31 @@ export function getOlapEngineLabel(connector: V1Connector | undefined): string { isDuckDB && (String(connector.config?.path ?? "").startsWith("md:") || !!connector.config?.token); + const chcHostFields = ["host", "resolved_host", "dsn"]; + const isClickHouseCloud = + connector.type === "clickhouse" && + chcHostFields.some((field) => + String((connector.config as Record)?.[field] ?? "") + .toLowerCase() + .includes(".clickhouse.cloud"), + ); - const name = formatConnectorName( - isMotherDuck ? "motherduck" : connector.type, - ); + let connectorTypeName = connector.type; + if (isMotherDuck) connectorTypeName = "motherduck"; + const name = formatConnectorName(connectorTypeName); // Show management suffix for non-default-DuckDB connectors - const showSuffix = connector.provision || isMotherDuck || !isDuckDB; + const showSuffix = connector.provision || isMotherDuck || isClickHouseCloud || !isDuckDB; if (!showSuffix) return name; - const suffix = connector.provision ? "Rill-managed" : "Self-managed"; + let suffix: string; + if (connector.provision) { + suffix = "Rill-managed"; + } else if (isClickHouseCloud) { + suffix = "Cloud"; + } else { + suffix = "Self-managed"; + } return `${name} (${suffix})`; } diff --git a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte index 92d67e9535f..485d5ec8911 100644 --- a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte +++ b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte @@ -1,8 +1,14 @@ - +
+ {#if canManage && isFree && !$subscriptionQuery?.isLoading} + + Upgrade to Growth + + {/if} + +
@@ -140,7 +172,9 @@
OLAP Engine - {olapEngineLabel} + + {olapEngineLabel} +
@@ -155,9 +189,25 @@ {/if}
+ + {#if !$subscriptionQuery?.isLoading && !isEnterprise} +
+ Rill Slots + + + {currentSlots} + View details + + +
+ {/if}
+ diff --git a/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte b/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte new file mode 100644 index 00000000000..270faf3fae3 --- /dev/null +++ b/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte @@ -0,0 +1,267 @@ + + + { + open = isOpen; + }} +> + + + Manage Slots + + {#if viewOnly} + Based on your current plan, we recommend the following slot + configuration. Upgrade to Growth to customize your slot allocation. + {:else} + All deployments are billed at ${SLOT_RATE_PER_HR}/slot/hr. + Monthly estimates assume ~{HOURS_PER_MONTH} hours/month. + {#if isRillManaged} + Minimum {DEFAULT_MANAGED_SLOTS} slots for Rill-managed deployments. + {:else} + Minimum {DEFAULT_SELF_MANAGED_SLOTS} slots for self-managed OLAP deployments. + {/if} + {/if} + + + + +
+
+ Cluster Size + Slots + Est. $/mo +
+
+ {#each visibleTiers as tier} + + {/each} +
+
+ {#if !viewOnly} + + {/if} + + +

+ Want to stop billing entirely? + (open = false)} + > + Hibernate this project + + from the project settings page. +

+ +
+ + +
+ + + + diff --git a/web-admin/src/features/projects/status/overview/olapInfo.ts b/web-admin/src/features/projects/status/overview/olapInfo.ts new file mode 100644 index 00000000000..6ca5244f446 --- /dev/null +++ b/web-admin/src/features/projects/status/overview/olapInfo.ts @@ -0,0 +1,98 @@ +import type { V1Connector } from "@rilldata/web-common/runtime-client"; +import type { RuntimeClient } from "@rilldata/web-common/runtime-client/v2"; +import { queryServiceQuery } from "@rilldata/web-common/runtime-client/v2/gen/query-service"; +import { createQuery } from "@tanstack/svelte-query"; + +export interface OlapInfo { + replicas: number; + vcpus: number; + memory: string; +} + +// Standardized columns: replicas, vcpus, memory +const MOTHERDUCK_SQL = ` +SELECT + 1 AS replicas, + MAX(CASE WHEN name = 'threads' THEN CAST(value AS INT) END) AS vcpus, + MAX(CASE WHEN name = 'memory_limit' THEN value END) AS memory +FROM duckdb_settings() +WHERE name IN ('threads', 'memory_limit') +`.trim(); + +// Self-managed ClickHouse +const SELF_MANAGED_CLICKHOUSE_SQL = ` +SELECT + replicas, + if(cgroup_cpu > 0, cgroup_cpu, os_cpu) AS vcpus, + formatReadableSize(if(server_mem > 0, server_mem, os_mem)) AS memory +FROM ( + SELECT + (SELECT value FROM system.asynchronous_metrics WHERE metric = 'CGroupMaxCPU') AS cgroup_cpu, + (SELECT value FROM system.asynchronous_metrics WHERE metric = 'OSProcessorCount') AS os_cpu, + (SELECT toUInt64(value) FROM system.server_settings WHERE name = 'max_server_memory_usage') AS server_mem, + (SELECT toUInt64(value) FROM system.asynchronous_metrics WHERE metric = 'OSPhysicalMemoryTotal') AS os_mem +) AS hw +CROSS JOIN (SELECT count() AS replicas FROM system.clusters WHERE cluster = 'default') AS cl +`.trim(); + +// ClickHouse Cloud — same query for now; update when CHC-specific SQL is confirmed +const CLICKHOUSE_CLOUD_SQL = SELF_MANAGED_CLICKHOUSE_SQL; + +export function isMotherDuck(connector: V1Connector): boolean { + return ( + connector.type === "duckdb" && + (String(connector.config?.path ?? "").startsWith("md:") || + !!connector.config?.token) + ); +} + +export function isClickHouseCloud(connector: V1Connector): boolean { + if (connector.type !== "clickhouse") return false; + const cfg = connector.config as Record | undefined; + return ["host", "resolved_host", "dsn"].some((field) => + String(cfg?.[field] ?? "") + .toLowerCase() + .includes(".clickhouse.cloud"), + ); +} + +function getOlapInfoSQL(connector: V1Connector | undefined): string | null { + if (!connector) return null; + if (isMotherDuck(connector)) return MOTHERDUCK_SQL; + if (connector.type === "clickhouse") { + return isClickHouseCloud(connector) + ? CLICKHOUSE_CLOUD_SQL + : SELF_MANAGED_CLICKHOUSE_SQL; + } + return null; +} + +export function useOlapInfo( + client: RuntimeClient, + connector: V1Connector | undefined, +) { + const sql = getOlapInfoSQL(connector); + const connectorName = connector?.name; + + return createQuery({ + queryKey: ["olap-info", client.instanceId, connectorName], + queryFn: async ({ signal }) => { + if (!sql || !connectorName) return null; + const res = await queryServiceQuery( + client, + { connector: connectorName, sql, priority: -1, limit: 0 }, + { signal }, + ); + const row = res.data?.[0]; + if (!row) return null; + return { + replicas: Number(row["replicas"] ?? 1), + vcpus: Number(row["vcpus"] ?? 0), + memory: String(row["memory"] ?? ""), + } as OlapInfo; + }, + enabled: !!sql && !!client.instanceId, + staleTime: Infinity, + refetchOnWindowFocus: false, + }); +} diff --git a/web-admin/src/features/projects/status/overview/slots-utils.test.ts b/web-admin/src/features/projects/status/overview/slots-utils.test.ts new file mode 100644 index 00000000000..ab47d78b807 --- /dev/null +++ b/web-admin/src/features/projects/status/overview/slots-utils.test.ts @@ -0,0 +1,38 @@ +import { describe, it, expect } from "vitest"; +import { + SLOT_TIERS, + POPULAR_SLOTS, + ALL_SLOTS, + DEFAULT_MANAGED_SLOTS, + DEFAULT_SELF_MANAGED_SLOTS, +} from "./slots-utils"; + +describe("slots-utils", () => { + it("all tiers list has expected entries", () => { + expect(SLOT_TIERS).toHaveLength(ALL_SLOTS.length); + }); + + it("popular slots list has expected entries", () => { + expect(POPULAR_SLOTS).toHaveLength(6); + }); + + it("managed default is 2 slots", () => { + expect(DEFAULT_MANAGED_SLOTS).toBe(2); + }); + + it("self-managed default is 4 slots", () => { + expect(DEFAULT_SELF_MANAGED_SLOTS).toBe(4); + }); + + it("all slot values are at least managed minimum", () => { + for (const s of ALL_SLOTS) { + expect(s).toBeGreaterThanOrEqual(DEFAULT_MANAGED_SLOTS); + } + }); + + it("tiers have correct bill calculations", () => { + const tier = SLOT_TIERS[0]; // 2 slots + expect(tier.slots).toBe(2); + expect(tier.rillBill).toBe(Math.round(2 * 0.15 * 730)); + }); +}); diff --git a/web-admin/src/features/projects/status/overview/slots-utils.ts b/web-admin/src/features/projects/status/overview/slots-utils.ts new file mode 100644 index 00000000000..d8cc8b90c3d --- /dev/null +++ b/web-admin/src/features/projects/status/overview/slots-utils.ts @@ -0,0 +1,28 @@ +export const SLOT_RATE_PER_HR = 0.15; +export const HOURS_PER_MONTH = 730; + +// Default slots by deployment type +export const DEFAULT_MANAGED_SLOTS = 2; // Rill-managed (DuckDB) +export const DEFAULT_SELF_MANAGED_SLOTS = 4; // Self-managed (MotherDuck, ClickHouse, Druid, Pinot, StarRocks) + +export interface SlotTier { + slots: number; + instance: string; + rillBill: number; +} + +function tier(slots: number, rate = SLOT_RATE_PER_HR): SlotTier { + return { + slots, + instance: `${slots * 4}GiB / ${slots}vCPU`, + rillBill: Math.round(slots * rate * HOURS_PER_MONTH), + }; +} + +// Popular slot values shown by default +export const POPULAR_SLOTS = [2, 3, 4, 8, 16, 30]; + +// All available slot values including intermediate sizes +export const ALL_SLOTS = [2, 3, 4, 5, 6, 7, 8, 10, 12, 14, 16, 20, 24, 28, 30]; + +export const SLOT_TIERS: SlotTier[] = ALL_SLOTS.map((s) => tier(s)); diff --git a/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte b/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte index 2167242ec2d..fa0e8bd3f51 100644 --- a/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte +++ b/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte @@ -13,6 +13,11 @@ route: "", hasPermission: true, }, + { + label: "Deployments", + route: "/deployments", + hasPermission: true, + }, { label: "Resources", route: "/resources", From 1b7bb223f693fd5eb3b9c945fc30ac6ad8b21457 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Fri, 20 Mar 2026 10:16:41 -0400 Subject: [PATCH 02/31] View only; remove CTA --- .../features/projects/status/display-utils.ts | 3 ++- .../status/overview/DeploymentSection.svelte | 24 +++++-------------- .../status/overview/ManageSlotsModal.svelte | 14 +++++++---- .../[project]/-/status/+layout.svelte | 5 ---- 4 files changed, 18 insertions(+), 28 deletions(-) diff --git a/web-admin/src/features/projects/status/display-utils.ts b/web-admin/src/features/projects/status/display-utils.ts index a88ee5b9643..0f87db2e733 100644 --- a/web-admin/src/features/projects/status/display-utils.ts +++ b/web-admin/src/features/projects/status/display-utils.ts @@ -121,7 +121,8 @@ export function getOlapEngineLabel(connector: V1Connector | undefined): string { const name = formatConnectorName(connectorTypeName); // Show management suffix for non-default-DuckDB connectors - const showSuffix = connector.provision || isMotherDuck || isClickHouseCloud || !isDuckDB; + const showSuffix = + connector.provision || isMotherDuck || isClickHouseCloud || !isDuckDB; if (!showSuffix) return name; let suffix: string; diff --git a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte index 485d5ec8911..49db1cde1d3 100644 --- a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte +++ b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte @@ -5,8 +5,8 @@ V1DeploymentStatus, } from "@rilldata/web-admin/client"; import { - isFreePlan, - isGrowthPlan, + isTrialPlan, + // isGrowthPlan, isEnterprisePlan, } from "@rilldata/web-admin/features/billing/plans/utils"; import { useDashboardsLastUpdated } from "@rilldata/web-admin/features/dashboards/listing/selectors"; @@ -87,18 +87,15 @@ // Billing plan detection $: subscriptionQuery = createAdminServiceGetBillingSubscription(organization); $: planName = $subscriptionQuery?.data?.subscription?.plan?.name ?? ""; - $: isFree = isFreePlan(planName); + $: isFree = isTrialPlan(planName); $: isEnterprise = planName !== "" && isEnterprisePlan(planName);
{#if canManage && isFree && !$subscriptionQuery?.isLoading} - - Upgrade to Growth + + Upgrade to Teams {/if} Rill Slots - - - {currentSlots} - View details - - + {currentSlots}
{/if}
- diff --git a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte index cd437f6106a..adc9bcdba2e 100644 --- a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte +++ b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte @@ -1,4 +1,5 @@ + + From fc1daee2c79425d7fa735e0fdca8c5c427233dcd Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Fri, 27 Mar 2026 13:30:02 -0400 Subject: [PATCH 05/31] deployments fill in page; wait for DES --- .../status/deployments/DeploymentsPage.svelte | 285 +++++++++++++++--- .../status/overview/DeploymentSection.svelte | 13 +- .../status/overview/ManageSlotsModal.svelte | 28 +- 3 files changed, 267 insertions(+), 59 deletions(-) diff --git a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte index 018ee1992a7..93ca94e7ea5 100644 --- a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte +++ b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte @@ -16,6 +16,7 @@ import { SLOT_RATE_PER_HR, HOURS_PER_MONTH, + SLOT_TIERS, } from "../overview/slots-utils"; import ManageSlotsModal from "../overview/ManageSlotsModal.svelte"; @@ -38,7 +39,8 @@ // Self-managed: any non-DuckDB OLAP connector (ClickHouse, MotherDuck, Druid, Pinot, StarRocks) $: olapType = (projectData as any)?.olapConnector ?? ""; $: isRillManaged = olapType === "" || olapType === "duckdb"; - let slotsModalOpen = false; + let prodModalOpen = false; + let devModalOpen = false; // Billing $: subscriptionQuery = createAdminServiceGetBillingSubscription(organization); @@ -46,13 +48,27 @@ $: isTrial = isTrialPlan(planName); $: isEnterprise = planName !== "" && isEnterprisePlan(planName); - // Estimated costs - $: rillMonthlyCost = Math.round(currentSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH); + // Slot types + $: prodSlots = currentSlots; + $: devSlots = 2; // TODO: wire to project data when dev slots are available + $: totalSlots = prodSlots + devSlots; + + // Cluster info + $: prodTier = SLOT_TIERS.find((t) => t.slots === prodSlots); + $: prodClusterLabel = prodTier?.instance ?? `${prodSlots * 4}GiB / ${prodSlots}vCPU`; + $: devClusterLabel = devSlots > 0 ? `${devSlots * 4}GiB / ${devSlots}vCPU` : "—"; + $: prodMonthlyCost = Math.round(prodSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH); + $: devMonthlyCost = Math.round(devSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH); + $: totalMonthlyCost = Math.round(totalSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH); + + // Bar percentages + $: prodPct = totalSlots > 0 ? (prodSlots / totalSlots) * 100 : 50; + $: devPct = totalSlots > 0 ? (devSlots / totalSlots) * 100 : 50; {#if !isEnterprise}
- +

Deployments

@@ -60,37 +76,129 @@ {getStatusLabel(deploymentStatus)}
- {#if canManage && !$subscriptionQuery?.isLoading} - - {/if} -
- - -
-
- Rill Slots - {currentSlots} - - @ ${SLOT_RATE_PER_HR}/slot/hr - (~${rillMonthlyCost.toLocaleString()}/mo) +
+ + {totalSlots} {totalSlots === 1 ? "slot" : "slots"} total + · ~${totalMonthlyCost.toLocaleString()}/mo - + See price breakdown
+ + +
+
+ {#if prodSlots > 0} +
+ + Prod · {prodSlots} + +
+ {/if} + {#if devSlots > 0} +
+ + Dev · {devSlots} + +
+ {:else} +
+ + Dev · 0 + +
+ {/if} +
+
+ + +
+ +
+
+
+ +

Production

+
+ {#if canManage && !$subscriptionQuery?.isLoading} + + {/if} +
+
+
+ {prodClusterLabel} + Cluster Size +
+
+
+ Slots + {prodSlots} +
+
+ Est. cost + ~${prodMonthlyCost.toLocaleString()}/mo +
+
+ Rate + ${SLOT_RATE_PER_HR}/slot/hr +
+
+
+
+ + +
+
+
+ +

Development

+
+ {#if canManage && !$subscriptionQuery?.isLoading} + + {/if} +
+
+
+ {devClusterLabel} + Cluster Size +
+
+
+ Slots + {devSlots} +
+
+ Est. cost + + {devSlots > 0 ? `~$${devMonthlyCost.toLocaleString()}/mo` : "—"} + +
+
+ Rate + ${SLOT_RATE_PER_HR}/slot/hr +
+
+
+
+
diff --git a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte index adc9bcdba2e..44025a2d23d 100644 --- a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte +++ b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte @@ -22,6 +22,7 @@ getStatusDotClass, getStatusLabel, } from "../display-utils"; + import { SLOT_TIERS } from "./slots-utils"; import { getGitUrlFromRemote } from "@rilldata/web-common/features/project/deploy/github-utils"; import ProjectClone from "./ProjectClone.svelte"; import OverviewCard from "./OverviewCard.svelte"; @@ -81,8 +82,10 @@ (c) => c.name === instance?.aiConnector, ); - // Slots + // Slots / Cluster size $: currentSlots = Number(projectData?.prodSlots) || 0; + $: currentTier = SLOT_TIERS.find((t) => t.slots === currentSlots); + $: clusterLabel = currentTier?.instance ?? `${currentSlots * 4}GiB / ${currentSlots}vCPU`; $: canManage = $proj.data?.projectPermissions?.manageProject ?? false; // Billing plan detection @@ -194,13 +197,14 @@ {#if !$subscriptionQuery?.isLoading && !isEnterprise}
- Rill Slots + Cluster Size - {currentSlots} + {clusterLabel} + ({currentSlots} {currentSlots === 1 ? "slot" : "slots"}) View details @@ -244,6 +248,9 @@ .slots-count { @apply text-sm text-fg-primary font-medium tabular-nums; } + .slots-secondary { + @apply text-xs text-fg-tertiary; + } .slots-detail { @apply text-xs text-primary-500; } diff --git a/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte b/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte index 7d0ee26e0a2..46c4bac3fbf 100644 --- a/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte +++ b/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte @@ -16,8 +16,13 @@ HOURS_PER_MONTH, DEFAULT_MANAGED_SLOTS, DEFAULT_SELF_MANAGED_SLOTS, + type SlotTier, } from "./slots-utils"; + function tierForSlots(slots: number): SlotTier | undefined { + return SLOT_TIERS.find((t) => t.slots === slots); + } + export let open = false; export let organization: string; export let project: string; @@ -74,8 +79,11 @@ await queryClient.refetchQueries({ queryKey: getAdminServiceGetProjectQueryKey(organization, project), }); + const newTier = tierForSlots(selectedSlots); eventBus.emit("notification", { - message: `Slots updated to ${selectedSlots}`, + message: newTier + ? `Cluster size updated to ${newTier.instance}` + : `Cluster size updated to ${selectedSlots} slots`, }); open = false; } catch (err) { @@ -96,15 +104,15 @@ > - Manage Slots + Manage Cluster Size - All deployments are billed at ${SLOT_RATE_PER_HR}/slot/hr. Monthly - estimates assume ~{HOURS_PER_MONTH} hours/month. + Choose the vCPU and memory allocation for your deployment. + Monthly estimates assume ~{HOURS_PER_MONTH} hours at ${SLOT_RATE_PER_HR}/slot/hr. {#if !isTrial} {#if isRillManaged} - Minimum {DEFAULT_MANAGED_SLOTS} slots for Rill-managed deployments. + Minimum {DEFAULT_MANAGED_SLOTS * 4}GiB / {DEFAULT_MANAGED_SLOTS}vCPU for Rill-managed deployments. {:else} - Minimum {DEFAULT_SELF_MANAGED_SLOTS} slots for self-managed OLAP deployments. + Minimum {DEFAULT_SELF_MANAGED_SLOTS * 4}GiB / {DEFAULT_SELF_MANAGED_SLOTS}vCPU for self-managed OLAP deployments. {/if} {/if} @@ -114,7 +122,6 @@
Cluster Size - Slots Est. $/mo
@@ -130,9 +137,7 @@ > {tier.instance} - - - {tier.slots} + ({tier.slots} {tier.slots === 1 ? "slot" : "slots"}) {#if tier.slots === currentSlots} current {/if} @@ -218,6 +223,9 @@ .tier-cell-wide { @apply flex-[2]; } + .slot-label { + @apply text-xs text-fg-tertiary font-normal; + } .current-badge { @apply text-[10px] text-primary-600 bg-primary-100 px-1.5 py-0.5 rounded-full leading-none font-medium; } From df0bc92c854192d0597922650a6996a2d90905d0 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Fri, 27 Mar 2026 13:50:47 -0400 Subject: [PATCH 06/31] code qual --- .../features/projects/status/deployments/DeploymentsPage.svelte | 1 - .../features/projects/status/overview/DeploymentSection.svelte | 1 - 2 files changed, 2 deletions(-) diff --git a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte index 93ca94e7ea5..c117bf4ce75 100644 --- a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte +++ b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte @@ -40,7 +40,6 @@ $: olapType = (projectData as any)?.olapConnector ?? ""; $: isRillManaged = olapType === "" || olapType === "duckdb"; let prodModalOpen = false; - let devModalOpen = false; // Billing $: subscriptionQuery = createAdminServiceGetBillingSubscription(organization); diff --git a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte index 44025a2d23d..f91272d4aa3 100644 --- a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte +++ b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte @@ -1,5 +1,4 @@ {#if !isEnterprise} @@ -133,7 +155,7 @@ {#if canManage && !$subscriptionQuery?.isLoading} diff --git a/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte b/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte index b676ab45c4c..3a494bc2ce4 100644 --- a/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte +++ b/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte @@ -23,36 +23,50 @@ return SLOT_TIERS.find((t) => t.slots === slots); } - export let open = false; - export let organization: string; - export let project: string; - export let currentSlots: number; - export let isRillManaged = true; - export let isTrial = false; + let { + open = $bindable(false), + organization, + project, + currentSlots, + isRillManaged = true, + isTrial = false, + }: { + open?: boolean; + organization: string; + project: string; + currentSlots: number; + isRillManaged?: boolean; + isTrial?: boolean; + } = $props(); // Free trials have no minimum; Growth+: 2 for Rill-managed, 4 for self-managed - $: minSlots = + let minSlots = $derived( isTrial && isRillManaged ? 1 : isRillManaged ? DEFAULT_MANAGED_SLOTS - : DEFAULT_SELF_MANAGED_SLOTS; + : DEFAULT_SELF_MANAGED_SLOTS, + ); - let selectedSlots = currentSlots; - $: if (open) { - selectedSlots = currentSlots; - showAllSizes = false; - } + let selectedSlots = $state(currentSlots); + let showAllSizes = $state(false); - let showAllSizes = false; + $effect(() => { + if (open) { + selectedSlots = currentSlots; + showAllSizes = false; + } + }); const updateProject = createAdminServiceUpdateProject(); // Filter tiers to only show slots >= minimum - $: availableTiers = SLOT_TIERS.filter((t) => t.slots >= minSlots); + let availableTiers = $derived( + SLOT_TIERS.filter((t) => t.slots >= minSlots), + ); // Ensure the current slot count always appears in the popular list - $: popularSlotsWithExtras = (() => { + let popularSlotsWithExtras = $derived((() => { let slots = POPULAR_SLOTS.filter((s) => s >= minSlots); if ( currentSlots >= minSlots && @@ -62,13 +76,17 @@ slots.push(currentSlots); } return slots.sort((a, b) => a - b); - })(); + })()); - $: visibleTiers = showAllSizes - ? availableTiers - : availableTiers.filter((t) => popularSlotsWithExtras.includes(t.slots)); + let visibleTiers = $derived( + showAllSizes + ? availableTiers + : availableTiers.filter((t) => + popularSlotsWithExtras.includes(t.slots), + ), + ); - $: hasChanged = selectedSlots !== currentSlots; + let hasChanged = $derived(selectedSlots !== currentSlots); async function applySlotChange() { try { @@ -134,7 +152,7 @@ class:tier-active={tier.slots === currentSlots} class:tier-selected={tier.slots === selectedSlots && tier.slots !== currentSlots} - on:click={() => { + onclick={() => { selectedSlots = tier.slots; }} > @@ -157,7 +175,7 @@
@@ -168,7 +186,7 @@ (open = false)} + onclick={() => (open = false)} > Hibernate this project @@ -176,13 +194,13 @@

-
- From c15fc87b61a4e39d2781721225e9d27bb760f3d3 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Tue, 7 Apr 2026 10:12:46 -0400 Subject: [PATCH 10/31] local code review --- .../status/deployments/DeploymentsPage.svelte | 533 +++++++++++------- .../status/overview/DeploymentSection.svelte | 40 +- .../status/overview/ManageSlotsModal.svelte | 28 +- 3 files changed, 341 insertions(+), 260 deletions(-) diff --git a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte index 99ab8017ea9..5173e0ea84b 100644 --- a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte +++ b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte @@ -2,19 +2,12 @@ import { createAdminServiceGetProject, createAdminServiceGetBillingSubscription, + createAdminServiceListDeployments, V1DeploymentStatus, } from "@rilldata/web-admin/client"; - import { - isTrialPlan, - isEnterprisePlan, - } from "@rilldata/web-admin/features/billing/plans/utils"; - import { useProjectDeployment } from "../selectors"; + import { isEnterprisePlan } from "@rilldata/web-admin/features/billing/plans/utils"; import { getStatusDotClass, getStatusLabel } from "../display-utils"; - import { - SLOT_RATE_PER_HR, - HOURS_PER_MONTH, - SLOT_TIERS, - } from "../overview/slots-utils"; + import { SLOT_RATE_PER_HR, HOURS_PER_MONTH } from "../overview/slots-utils"; import ManageSlotsModal from "../overview/ManageSlotsModal.svelte"; let { @@ -25,13 +18,6 @@ project: string; } = $props(); - // Deployment - let projectDeployment = $derived(useProjectDeployment(organization, project)); - let deployment = $derived($projectDeployment.data); - let deploymentStatus = $derived( - deployment?.status ?? V1DeploymentStatus.DEPLOYMENT_STATUS_UNSPECIFIED, - ); - // Project let proj = $derived(createAdminServiceGetProject(organization, project)); let projectData = $derived($proj.data?.project); @@ -41,10 +27,8 @@ let canManage = $derived( $proj.data?.projectPermissions?.manageProject ?? false, ); - // Self-managed: any non-DuckDB OLAP connector (ClickHouse, MotherDuck, Druid, Pinot, StarRocks) - let olapType = $derived((projectData as any)?.olapConnector ?? ""); - let isRillManaged = $derived(olapType === "" || olapType === "duckdb"); let prodModalOpen = $state(false); + let devModalOpen = $state(false); // Billing let subscriptionQuery = $derived( @@ -53,185 +37,282 @@ let planName = $derived( $subscriptionQuery?.data?.subscription?.plan?.name ?? "", ); - let isTrial = $derived(isTrialPlan(planName)); let isEnterprise = $derived(planName !== "" && isEnterprisePlan(planName)); + // Billing cycle dates + let cycleStart = $derived( + $subscriptionQuery?.data?.subscription?.currentBillingCycleStartDate, + ); + let cycleEnd = $derived( + $subscriptionQuery?.data?.subscription?.currentBillingCycleEndDate, + ); + + function formatCycleDate(dateStr: string | undefined): string { + if (!dateStr) return ""; + const d = new Date(dateStr); + return d.toLocaleDateString(undefined, { month: "short", day: "numeric" }); + } + // Slot types let prodSlots = $derived(currentSlots); let devSlots = $derived(2); // TODO: wire to project data when dev slots are available let totalSlots = $derived(prodSlots + devSlots); - // Cluster info - let prodTier = $derived(SLOT_TIERS.find((t) => t.slots === prodSlots)); - let prodClusterLabel = $derived( - prodTier?.instance ?? `${prodSlots * 4}GiB / ${prodSlots}vCPU`, - ); - let devClusterLabel = $derived( - devSlots > 0 ? `${devSlots * 4}GiB / ${devSlots}vCPU` : "\u2014", - ); + // Cluster info (split into number + unit for display) + let prodMemory = $derived(prodSlots * 4); + let prodCpu = $derived(prodSlots); + let devMemory = $derived(devSlots * 4); + let devCpu = $derived(devSlots); + + // Cost calculations (with decimals) let prodMonthlyCost = $derived( - Math.round(prodSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH), + (prodSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH).toFixed(2), ); let devMonthlyCost = $derived( - Math.round(devSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH), + (devSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH).toFixed(2), ); let totalMonthlyCost = $derived( - Math.round(totalSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH), + (totalSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH).toFixed(2), ); // Bar percentages let prodPct = $derived(totalSlots > 0 ? (prodSlots / totalSlots) * 100 : 50); let devPct = $derived(totalSlots > 0 ? (devSlots / totalSlots) * 100 : 50); + + // Dev deployments table + let deploymentsQuery = $derived( + createAdminServiceListDeployments(organization, project), + ); + let primaryBranch = $derived(projectData?.primaryBranch ?? "main"); + let devDeployments = $derived( + ($deploymentsQuery.data?.deployments ?? []).filter( + (d) => d.branch && d.branch !== primaryBranch, + ), + ); {#if !isEnterprise}
-
-
-

Deployments

- - {getStatusLabel(deploymentStatus)} +

Usage & Slots

+ + +
+
+ TOTAL SLOTS + {totalSlots} + + {prodSlots} production + · + {devSlots} development + +
+ {#if prodSlots > 0} +
+ {/if} + {#if devSlots > 0} +
+ {/if} +
-
- - {totalSlots} - {totalSlots === 1 ? "slot" : "slots"} total · ~${totalMonthlyCost.toLocaleString()}/mo + +
+ +
+ EST. MONTHLY COST + ${totalMonthlyCost} + + ${prodMonthlyCost} prod + ${devMonthlyCost} dev - - See price breakdown - + {#if cycleStart || cycleEnd} + + Billing cycle: {formatCycleDate(cycleStart)} – {formatCycleDate( + cycleEnd, + )} + + {/if}
- -
-
- {#if prodSlots > 0} -
- - Prod · {prodSlots} - -
- {/if} - {#if devSlots > 0} -
- - Dev · {devSlots} - -
- {:else} -
- - Dev · 0 - -
- {/if} -
+ +
+

SLOTS BREAKDOWN

-
- -
-
-
- -

Production

+ +
+
+
+

Production

{#if canManage && !$subscriptionQuery?.isLoading} - {/if}
-
-
- {prodClusterLabel} - Cluster Size +
+
+ + {prodMemory}GiB + / + {prodCpu}vCPU + + Cluster size
-
+
Slots - {prodSlots} + {prodSlots}
Est. cost - ~${prodMonthlyCost.toLocaleString()}/mo + ~${prodMonthlyCost}/mo
Rate - ${SLOT_RATE_PER_HR}/slot/hr + ${SLOT_RATE_PER_HR}/slot/hr
- -
-
-
- -

Development

+ +
+
+
+

Development

{#if canManage && !$subscriptionQuery?.isLoading} - - {/if}
-
-
- {devClusterLabel} +
+ - Cluster Size + {#if devSlots > 0} + {devMemory}GiB + / + {devCpu}vCPU + {:else} + — + {/if} + + Cluster size
-
+
Slots - {devSlots} + {devSlots}
Est. cost - - {devSlots > 0 ? `~$${devMonthlyCost.toLocaleString()}/mo` : "—"} + + {devSlots > 0 ? `~$${devMonthlyCost}/mo` : "—"}
Rate - ${SLOT_RATE_PER_HR}/slot/hr + ${SLOT_RATE_PER_HR}/slot/hr
+ + +
+

DEVELOPMENT DETAILS

+
+ +
+ + + + + + + + + + + + {#if $deploymentsQuery.isLoading} + + + + {:else if devDeployments.length === 0} + + + + {:else} + {#each devDeployments as dep (dep.id)} + + + + + + + + {/each} + {/if} + +
BranchAuthorStatusSlotsLast updated
Loading...
No development deployments
+ {dep.branch ?? "—"} + {dep.ownerUserId ?? "—"} + + {getStatusLabel( + dep.status ?? + V1DeploymentStatus.DEPLOYMENT_STATUS_UNSPECIFIED, + )} + + {devSlots} + {#if dep.updatedOn} + {new Date(dep.updatedOn).toLocaleDateString(undefined, { + month: "short", + day: "numeric", + hour: "numeric", + minute: "numeric", + })} + {:else} + — + {/if} +
+
+ {/if} @@ -241,138 +322,194 @@ } /* Page header */ - .page-header { - @apply flex items-center justify-between; - } .page-title { @apply text-lg font-semibold text-fg-primary; } - .page-header-right { - @apply flex items-center gap-3; + + /* Summary bar */ + .summary-bar { + @apply flex rounded-xl overflow-hidden bg-surface-subtle border border-border; } - .total-cost { - @apply text-sm text-fg-secondary tabular-nums; + .summary-panel { + @apply flex-1 flex flex-col gap-2 p-5; } - .status-badge { - @apply text-xs px-2 py-0.5 rounded-full font-medium; + .summary-divider { + @apply w-px bg-border my-4; } - .status-badge.bg-green-500 { - @apply bg-green-100 text-green-700; + .summary-label { + @apply text-[11px] font-semibold tracking-widest text-fg-tertiary uppercase; } - .status-badge.bg-yellow-500 { - @apply bg-yellow-100 text-yellow-700; + .summary-value { + @apply text-3xl font-bold text-fg-primary tabular-nums tracking-tight; } - .status-badge.bg-red-500 { - @apply bg-red-100 text-red-700; + .summary-breakdown { + @apply text-sm flex items-center gap-1.5; } - .status-badge.bg-gray-400 { - @apply bg-gray-100 text-gray-600; + .summary-breakdown-plain { + @apply text-sm text-fg-secondary; } - .pricing-link { - @apply text-xs text-primary-500 no-underline; + .summary-cycle { + @apply text-xs text-fg-tertiary; } - .pricing-link:hover { - @apply text-primary-600 underline; + .text-prod { + color: #8b5cf6; } - - /* Allocation bar */ - .alloc-bar-container { - @apply flex flex-col gap-2.5; + .text-dev { + color: #65a30d; } - .alloc-bar { - @apply flex w-full h-10 rounded-lg overflow-hidden gap-0.5; + + /* Mini bar */ + .mini-bar { + @apply flex w-full h-1.5 rounded-full overflow-hidden gap-0.5 mt-1; + @apply bg-surface-subtle; } - .alloc-segment { - @apply flex items-center justify-center transition-all duration-300; - min-width: 48px; + .mini-segment { + @apply h-full transition-all duration-300; + min-width: 8px; } - .alloc-segment-prod { - @apply bg-primary-500 rounded-l-lg; + .mini-segment-prod { + background: #8b5cf6; + border-radius: 9999px 0 0 9999px; } - .alloc-segment-dev { - @apply bg-amber-400 rounded-r-lg; + .mini-segment-dev { + background: #65a30d; + border-radius: 0 9999px 9999px 0; } - .alloc-segment-dev-empty { - @apply rounded-r-lg border border-dashed border-border bg-surface-subtle; + + /* Section headings */ + .section-heading { + @apply mt-2; } - .alloc-segment-text { - @apply text-xs font-semibold text-white whitespace-nowrap; - } - .alloc-segment-text-muted { - @apply text-fg-tertiary; + .section-heading-text { + @apply text-[11px] font-semibold tracking-widest text-fg-tertiary uppercase; } - /* Section grid */ + /* Breakdown cards */ .section-grid { @apply grid gap-5; grid-template-columns: repeat(2, 1fr); } - .section-card { - @apply border border-border rounded-xl p-5 flex flex-col gap-4; - } - .section-card-dev { - @apply opacity-75; - } - .section-header { - @apply flex items-center justify-between; + .breakdown-card { + @apply border border-border rounded-xl bg-surface-subtle flex flex-col; + padding-top: 24px; + padding-bottom: 24px; + gap: 12px; } - .section-title-row { - @apply flex items-center gap-2.5; + .breakdown-header { + @apply flex items-center justify-between px-6; } - .section-dot { - @apply w-3 h-3 rounded-full shrink-0; + .breakdown-title-row { + @apply flex items-center; + gap: 6px; } - .section-dot-prod { - @apply bg-primary-500; + + .breakdown-title { + @apply font-semibold; + font-size: 16px; + line-height: 16px; } - .section-dot-dev { - @apply bg-amber-400; + .breakdown-card-prod .breakdown-title { + color: #8b5cf6; } - .section-title { - @apply text-sm font-semibold text-fg-primary uppercase tracking-wide; + .breakdown-card-dev .breakdown-title { + color: #65a30d; } - .section-manage-btn { + .manage-btn { @apply text-xs font-medium text-primary-500 bg-transparent border border-primary-300 rounded-md px-3 py-1 cursor-pointer; } - .section-manage-btn:hover { + .manage-btn:hover { @apply bg-primary-50 text-primary-600 border-primary-400; } - .section-manage-btn:disabled { - @apply opacity-40 cursor-not-allowed; - } - .section-manage-btn:disabled:hover { - @apply bg-transparent text-primary-500 border-primary-300; - } - /* Section body */ - .section-body { + /* Breakdown body */ + .breakdown-body { @apply flex flex-col gap-4; } - .section-metric { - @apply flex flex-col gap-1; + .breakdown-metric { + @apply flex flex-col gap-1 px-6; } .metric-value { @apply text-2xl font-semibold text-fg-primary tabular-nums tracking-tight; } + .metric-unit { + @apply text-sm font-medium text-fg-tertiary; + vertical-align: baseline; + margin-left: 2px; + } + .metric-slash { + @apply text-fg-tertiary mx-1; + } .metric-value-empty { @apply text-fg-tertiary; } .metric-label { - @apply text-xs text-fg-tertiary uppercase tracking-wide; + @apply text-xs text-fg-tertiary; } - .section-details { + .breakdown-details { @apply flex flex-col gap-1.5 border-t border-border pt-3; + min-width: 356px; + padding-left: 24px; + padding-right: 24px; } .detail-row { - @apply flex items-center justify-between; + @apply flex items-center justify-between border-b border-border p-2; + min-width: 85px; + gap: 8px; + } + .detail-row:last-child { + @apply border-b-0; } .detail-label { - @apply text-xs text-fg-tertiary; + @apply text-sm font-medium text-fg-tertiary; } .detail-value { - @apply text-sm text-fg-primary tabular-nums; + @apply text-xl font-extrabold text-fg-primary tabular-nums text-right; + line-height: 100%; + } + .detail-value-sm { + @apply text-sm font-semibold text-fg-primary tabular-nums text-right; } - .detail-value-muted { - @apply text-fg-tertiary italic; + + /* Dev deployments table */ + .dev-table-container { + @apply border border-border rounded-xl overflow-hidden bg-surface-subtle; + } + .dev-table { + @apply w-full text-sm; + } + .dev-table thead { + @apply bg-surface-subtle; + } + .dev-table th { + @apply text-left text-xs font-semibold text-fg-secondary uppercase tracking-wide px-4 py-2.5; + } + .dev-table td { + @apply px-4 py-3 text-sm text-fg-primary border-t border-border; + } + .table-empty { + @apply text-center text-fg-tertiary py-8; + } + .branch-cell { + @apply font-medium; + } + .branch-name { + @apply font-mono text-xs; + } + + /* Status badges */ + .status-badge { + @apply text-xs px-2 py-0.5 rounded-full font-medium; + } + .status-badge.bg-green-500 { + @apply bg-green-100 text-green-700; + } + .status-badge.bg-yellow-500 { + @apply bg-yellow-100 text-yellow-700; + } + .status-badge.bg-red-500 { + @apply bg-red-100 text-red-700; + } + .status-badge.bg-gray-400 { + @apply bg-gray-100 text-gray-600; } diff --git a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte index 69af7b15611..1bb8a38aa99 100644 --- a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte +++ b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte @@ -21,7 +21,6 @@ getStatusDotClass, getStatusLabel, } from "../display-utils"; - import { SLOT_TIERS } from "./slots-utils"; import { getGitUrlFromRemote } from "@rilldata/web-common/features/project/deploy/github-utils"; import ProjectClone from "./ProjectClone.svelte"; import OverviewCard from "@rilldata/web-common/features/projects/status/overview/OverviewCard.svelte"; @@ -81,11 +80,6 @@ (c) => c.name === instance?.aiConnector, ); - // Slots / Cluster size - $: currentSlots = Number(projectData?.prodSlots) || 0; - $: currentTier = SLOT_TIERS.find((t) => t.slots === currentSlots); - $: clusterLabel = - currentTier?.instance ?? `${currentSlots * 4}GiB / ${currentSlots}vCPU`; $: canManage = $proj.data?.projectPermissions?.manageProject ?? false; // Billing plan detection @@ -197,24 +191,6 @@ {/if}
- - {#if !$subscriptionQuery?.isLoading && !isEnterprise} -
- Cluster Size - - - {clusterLabel} - ({currentSlots} {currentSlots === 1 ? "slot" : "slots"}) - View details - - -
- {/if}
@@ -243,21 +219,7 @@ .repo-link:hover { @apply underline; } - .slots-link { - @apply flex items-center gap-2 no-underline; - } - .slots-link:hover .slots-detail { - @apply text-primary-600; - } - .slots-count { - @apply text-sm text-fg-primary font-medium tabular-nums; - } - .slots-secondary { - @apply text-xs text-fg-tertiary; - } - .slots-detail { - @apply text-xs text-primary-500; - } + .upgrade-link { @apply text-xs text-primary-500 no-underline; } diff --git a/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte b/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte index c698446b915..d5eed2c5952 100644 --- a/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte +++ b/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte @@ -15,7 +15,6 @@ SLOT_RATE_PER_HR, HOURS_PER_MONTH, DEFAULT_MANAGED_SLOTS, - DEFAULT_SELF_MANAGED_SLOTS, type SlotTier, } from "./slots-utils"; @@ -28,25 +27,16 @@ organization, project, currentSlots, - isRillManaged = true, - isTrial = false, + title = "Manage Cluster Size", }: { open?: boolean; organization: string; project: string; currentSlots: number; - isRillManaged?: boolean; - isTrial?: boolean; + title?: string; } = $props(); - // Free trials have no minimum; Growth+: 2 for Rill-managed, 4 for self-managed - let minSlots = $derived( - isTrial && isRillManaged - ? 1 - : isRillManaged - ? DEFAULT_MANAGED_SLOTS - : DEFAULT_SELF_MANAGED_SLOTS, - ); + let minSlots = DEFAULT_MANAGED_SLOTS; let selectedSlots = $state(currentSlots); let showAllSizes = $state(false); @@ -121,19 +111,11 @@ > - Manage Cluster Size + {title} Choose the vCPU and memory allocation for your deployment. Monthly estimates assume ~{HOURS_PER_MONTH} hours at ${SLOT_RATE_PER_HR}/slot/hr. - {#if !isTrial} - {#if isRillManaged} - Minimum {DEFAULT_MANAGED_SLOTS * 4}GiB / {DEFAULT_MANAGED_SLOTS}vCPU - for Rill-managed deployments. - {:else} - Minimum {DEFAULT_SELF_MANAGED_SLOTS * 4}GiB / {DEFAULT_SELF_MANAGED_SLOTS}vCPU - for self-managed OLAP deployments. - {/if} - {/if} + Minimum {DEFAULT_MANAGED_SLOTS * 4}GiB / {DEFAULT_MANAGED_SLOTS}vCPU. From 78848ea5f30702cd9edf667089726334f04a7bf8 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Tue, 7 Apr 2026 10:20:05 -0400 Subject: [PATCH 11/31] further clean up --- .../components/layout/ContentContainer.svelte | 23 ------------------- .../status/overview/DeploymentSection.svelte | 6 +---- .../status/overview/slots-utils.test.ts | 9 ++------ .../projects/status/overview/slots-utils.ts | 5 ++-- .../[project]/-/status/+layout.svelte | 2 +- 5 files changed, 6 insertions(+), 39 deletions(-) delete mode 100644 web-admin/src/components/layout/ContentContainer.svelte diff --git a/web-admin/src/components/layout/ContentContainer.svelte b/web-admin/src/components/layout/ContentContainer.svelte deleted file mode 100644 index ecc1cfbcba7..00000000000 --- a/web-admin/src/components/layout/ContentContainer.svelte +++ /dev/null @@ -1,23 +0,0 @@ - - -
-
- {#if title && showTitle} -

- {title} -

- {/if} - - -
-
diff --git a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte index 1bb8a38aa99..6689dfcaf7f 100644 --- a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte +++ b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte @@ -4,10 +4,7 @@ createAdminServiceGetBillingSubscription, V1DeploymentStatus, } from "@rilldata/web-admin/client"; - import { - isTrialPlan, - isEnterprisePlan, - } from "@rilldata/web-admin/features/billing/plans/utils"; + import { isTrialPlan } from "@rilldata/web-admin/features/billing/plans/utils"; import { useDashboardsLastUpdated } from "@rilldata/web-admin/features/dashboards/listing/selectors"; import { useGithubLastSynced } from "@rilldata/web-admin/features/projects/selectors"; import { createRuntimeServiceGetInstance } from "@rilldata/web-common/runtime-client"; @@ -86,7 +83,6 @@ $: subscriptionQuery = createAdminServiceGetBillingSubscription(organization); $: planName = $subscriptionQuery?.data?.subscription?.plan?.name ?? ""; $: isFree = isTrialPlan(planName); - $: isEnterprise = planName !== "" && isEnterprisePlan(planName); diff --git a/web-admin/src/features/projects/status/overview/slots-utils.test.ts b/web-admin/src/features/projects/status/overview/slots-utils.test.ts index ab47d78b807..8fc7eb39b56 100644 --- a/web-admin/src/features/projects/status/overview/slots-utils.test.ts +++ b/web-admin/src/features/projects/status/overview/slots-utils.test.ts @@ -4,7 +4,6 @@ import { POPULAR_SLOTS, ALL_SLOTS, DEFAULT_MANAGED_SLOTS, - DEFAULT_SELF_MANAGED_SLOTS, } from "./slots-utils"; describe("slots-utils", () => { @@ -16,15 +15,11 @@ describe("slots-utils", () => { expect(POPULAR_SLOTS).toHaveLength(6); }); - it("managed default is 2 slots", () => { + it("default minimum is 2 slots", () => { expect(DEFAULT_MANAGED_SLOTS).toBe(2); }); - it("self-managed default is 4 slots", () => { - expect(DEFAULT_SELF_MANAGED_SLOTS).toBe(4); - }); - - it("all slot values are at least managed minimum", () => { + it("all slot values are at least minimum", () => { for (const s of ALL_SLOTS) { expect(s).toBeGreaterThanOrEqual(DEFAULT_MANAGED_SLOTS); } diff --git a/web-admin/src/features/projects/status/overview/slots-utils.ts b/web-admin/src/features/projects/status/overview/slots-utils.ts index 5106034051d..d9525e32261 100644 --- a/web-admin/src/features/projects/status/overview/slots-utils.ts +++ b/web-admin/src/features/projects/status/overview/slots-utils.ts @@ -1,9 +1,8 @@ export const SLOT_RATE_PER_HR = 0.15; export const HOURS_PER_MONTH = 730; -// Default slots by deployment type -export const DEFAULT_MANAGED_SLOTS = 2; // Rill-managed (DuckDB) -export const DEFAULT_SELF_MANAGED_SLOTS = 4; // Self-managed (MotherDuck, ClickHouse, Druid, Pinot, StarRocks) +// Minimum slots for any deployment +export const DEFAULT_MANAGED_SLOTS = 2; export interface SlotTier { slots: number; diff --git a/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte b/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte index 970085bc9c7..aec6eec0973 100644 --- a/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte +++ b/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte @@ -4,7 +4,7 @@ import { page } from "$app/stores"; import { createAdminServiceGetBillingSubscription } from "@rilldata/web-admin/client"; import { isEnterprisePlan } from "@rilldata/web-admin/features/billing/plans/utils"; - import ContentContainer from "@rilldata/web-admin/components/layout/ContentContainer.svelte"; + import ContentContainer from "@rilldata/web-common/components/layout/ContentContainer.svelte"; import LeftNav from "@rilldata/web-admin/components/nav/LeftNav.svelte"; $: organization = $page.params.organization; From f673f4bb900e25c866da06f340d19d40c92212d5 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Tue, 7 Apr 2026 10:21:28 -0400 Subject: [PATCH 12/31] Update DeploymentsPage.svelte --- .../projects/status/deployments/DeploymentsPage.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte index 5173e0ea84b..a12a6e177cb 100644 --- a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte +++ b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte @@ -302,14 +302,14 @@ Date: Tue, 7 Apr 2026 10:26:25 -0400 Subject: [PATCH 13/31] Update ManageSlotsModal.svelte --- .../features/projects/status/overview/ManageSlotsModal.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte b/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte index d5eed2c5952..48a3b1fb808 100644 --- a/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte +++ b/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte @@ -38,7 +38,7 @@ let minSlots = DEFAULT_MANAGED_SLOTS; - let selectedSlots = $state(currentSlots); + let selectedSlots = $state(0); let showAllSizes = $state(false); $effect(() => { From c680d96e79495234a918335f6c7ab9476c8bd5a0 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Wed, 8 Apr 2026 15:35:57 -0400 Subject: [PATCH 14/31] Update DeploymentsPage.svelte --- .../status/deployments/DeploymentsPage.svelte | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte index a12a6e177cb..16daf05d290 100644 --- a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte +++ b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte @@ -127,7 +127,7 @@
EST. MONTHLY COST - ${totalMonthlyCost} + ${totalMonthlyCost} ${prodMonthlyCost} prod + ${devMonthlyCost} dev @@ -328,7 +328,7 @@ /* Summary bar */ .summary-bar { - @apply flex rounded-xl overflow-hidden bg-surface-subtle border border-border; + @apply flex rounded-xl overflow-hidden bg-surface-background border border-border; } .summary-panel { @apply flex-1 flex flex-col gap-2 p-5; @@ -337,7 +337,7 @@ @apply w-px bg-border my-4; } .summary-label { - @apply text-[11px] font-semibold tracking-widest text-fg-tertiary uppercase; + @apply font-sans text-xs font-semibold leading-none text-fg-tertiary uppercase; } .summary-value { @apply text-3xl font-bold text-fg-primary tabular-nums tracking-tight; @@ -346,7 +346,9 @@ @apply text-sm flex items-center gap-1.5; } .summary-breakdown-plain { - @apply text-sm text-fg-secondary; + @apply font-medium text-fg-muted; + font-size: 12px; + line-height: 18px; } .summary-cycle { @apply text-xs text-fg-tertiary; @@ -381,7 +383,7 @@ @apply mt-2; } .section-heading-text { - @apply text-[11px] font-semibold tracking-widest text-fg-tertiary uppercase; + @apply font-sans text-xs font-semibold leading-none text-fg-tertiary uppercase; } /* Breakdown cards */ @@ -390,7 +392,7 @@ grid-template-columns: repeat(2, 1fr); } .breakdown-card { - @apply border border-border rounded-xl bg-surface-subtle flex flex-col; + @apply border border-border rounded-xl bg-surface-background flex flex-col; padding-top: 24px; padding-bottom: 24px; gap: 12px; @@ -404,9 +406,7 @@ } .breakdown-title { - @apply font-semibold; - font-size: 16px; - line-height: 16px; + @apply font-sans text-base font-semibold leading-none; } .breakdown-card-prod .breakdown-title { color: #8b5cf6; @@ -429,12 +429,12 @@ @apply flex flex-col gap-1 px-6; } .metric-value { - @apply text-2xl font-semibold text-fg-primary tabular-nums tracking-tight; + @apply font-sans text-lg font-bold text-fg-primary tabular-nums leading-none; + vertical-align: middle; } .metric-unit { - @apply text-sm font-medium text-fg-tertiary; - vertical-align: baseline; - margin-left: 2px; + @apply font-sans text-lg font-bold text-fg-secondary leading-none; + vertical-align: middle; } .metric-slash { @apply text-fg-tertiary mx-1; @@ -460,7 +460,7 @@ @apply border-b-0; } .detail-label { - @apply text-sm font-medium text-fg-tertiary; + @apply text-sm font-medium text-fg-primary; } .detail-value { @apply text-xl font-extrabold text-fg-primary tabular-nums text-right; @@ -472,7 +472,7 @@ /* Dev deployments table */ .dev-table-container { - @apply border border-border rounded-xl overflow-hidden bg-surface-subtle; + @apply border border-border rounded-xl overflow-hidden bg-surface-background; } .dev-table { @apply w-full text-sm; From 1f6b57c2fd5bc5197d7e272a9e34ffde20f19411 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Wed, 8 Apr 2026 15:44:15 -0400 Subject: [PATCH 15/31] Update DeploymentsPage.svelte --- .../projects/status/deployments/DeploymentsPage.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte index 16daf05d290..17e774a4581 100644 --- a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte +++ b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte @@ -429,12 +429,12 @@ @apply flex flex-col gap-1 px-6; } .metric-value { - @apply font-sans text-lg font-bold text-fg-primary tabular-nums leading-none; - vertical-align: middle; + @apply font-sans text-3xl font-semibold text-fg-primary tabular-nums; + vertical-align: baseline; } .metric-unit { @apply font-sans text-lg font-bold text-fg-secondary leading-none; - vertical-align: middle; + vertical-align: baseline; } .metric-slash { @apply text-fg-tertiary mx-1; From 0b435a23d8845cfd277ee972c0f16ac62c059858 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Mon, 13 Apr 2026 15:14:05 -0400 Subject: [PATCH 16/31] updated designs Co-Authored-By: Claude Opus 4.6 --- .../status/deployments/DeploymentsPage.svelte | 168 +++++++----------- 1 file changed, 66 insertions(+), 102 deletions(-) diff --git a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte index 17e774a4581..72bda85164a 100644 --- a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte +++ b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte @@ -55,7 +55,7 @@ // Slot types let prodSlots = $derived(currentSlots); - let devSlots = $derived(2); // TODO: wire to project data when dev slots are available + let devSlots = $derived(1); // TODO: wire to project data when dev slots are available let totalSlots = $derived(prodSlots + devSlots); // Cluster info (split into number + unit for display) @@ -75,10 +75,6 @@ (totalSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH).toFixed(2), ); - // Bar percentages - let prodPct = $derived(totalSlots > 0 ? (prodSlots / totalSlots) * 100 : 50); - let devPct = $derived(totalSlots > 0 ? (devSlots / totalSlots) * 100 : 50); - // Dev deployments table let deploymentsQuery = $derived( createAdminServiceListDeployments(organization, project), @@ -99,34 +95,19 @@
- TOTAL SLOTS + Total slots {totalSlots} - {prodSlots} production + {prodSlots} production · - {devSlots} development + {devSlots} development - -
- {#if prodSlots > 0} -
- {/if} - {#if devSlots > 0} -
- {/if} -
- EST. MONTHLY COST + Est. monthly project cost ${totalMonthlyCost} ${prodMonthlyCost} prod + ${devMonthlyCost} dev @@ -143,35 +124,38 @@
-

SLOTS BREAKDOWN

+

Slots breakdown

-
-

Production

-
- {#if canManage && !$subscriptionQuery?.isLoading} - - {/if} +

Production

- - {prodMemory}GiB - / - {prodCpu}vCPU - +
+ + {prodMemory}GiB + / + {prodCpu}vCPU + + {#if canManage && !$subscriptionQuery?.isLoading} + + {/if} +
Cluster size
Slots - {prodSlots} + {prodSlots}
Est. cost @@ -188,35 +172,38 @@
-
-

Development

-
- {#if canManage && !$subscriptionQuery?.isLoading} - - {/if} +

Development

- - {#if devSlots > 0} - {devMemory}GiB - / - {devCpu}vCPU - {:else} - — +
+ + {#if devSlots > 0} + {devMemory}GiB + / + {devCpu}vCPU + {:else} + — + {/if} + + {#if canManage && !$subscriptionQuery?.isLoading} + {/if} - +
Cluster size
Slots - {devSlots} + {devSlots}
Est. cost @@ -235,7 +222,7 @@
-

DEVELOPMENT DETAILS

+

Development details

@@ -247,16 +234,17 @@ Status Slots Last updated + {#if $deploymentsQuery.isLoading} - Loading... + Loading... {:else if devDeployments.length === 0} - No development deploymentsNo development deployments {:else} @@ -292,6 +280,9 @@ — {/if} + + + {/each} {/if} @@ -337,7 +328,7 @@ @apply w-px bg-border my-4; } .summary-label { - @apply font-sans text-xs font-semibold leading-none text-fg-tertiary uppercase; + @apply font-sans text-xs font-semibold leading-none text-fg-tertiary; } .summary-value { @apply text-3xl font-bold text-fg-primary tabular-nums tracking-tight; @@ -353,37 +344,12 @@ .summary-cycle { @apply text-xs text-fg-tertiary; } - .text-prod { - color: #8b5cf6; - } - .text-dev { - color: #65a30d; - } - - /* Mini bar */ - .mini-bar { - @apply flex w-full h-1.5 rounded-full overflow-hidden gap-0.5 mt-1; - @apply bg-surface-subtle; - } - .mini-segment { - @apply h-full transition-all duration-300; - min-width: 8px; - } - .mini-segment-prod { - background: #8b5cf6; - border-radius: 9999px 0 0 9999px; - } - .mini-segment-dev { - background: #65a30d; - border-radius: 0 9999px 9999px 0; - } - /* Section headings */ .section-heading { @apply mt-2; } .section-heading-text { - @apply font-sans text-xs font-semibold leading-none text-fg-tertiary uppercase; + @apply font-sans text-xs font-semibold leading-none text-fg-tertiary; } /* Breakdown cards */ @@ -400,22 +366,11 @@ .breakdown-header { @apply flex items-center justify-between px-6; } - .breakdown-title-row { - @apply flex items-center; - gap: 6px; - } - .breakdown-title { @apply font-sans text-base font-semibold leading-none; } - .breakdown-card-prod .breakdown-title { - color: #8b5cf6; - } - .breakdown-card-dev .breakdown-title { - color: #65a30d; - } .manage-btn { - @apply text-xs font-medium text-primary-500 bg-transparent border border-primary-300 rounded-md px-3 py-1 cursor-pointer; + @apply text-xs font-medium text-primary-500 bg-transparent border border-primary-300 rounded-none px-3 py-1 cursor-pointer; } .manage-btn:hover { @apply bg-primary-50 text-primary-600 border-primary-400; @@ -428,6 +383,9 @@ .breakdown-metric { @apply flex flex-col gap-1 px-6; } + .metric-row { + @apply flex items-center justify-between; + } .metric-value { @apply font-sans text-3xl font-semibold text-fg-primary tabular-nums; vertical-align: baseline; @@ -481,7 +439,7 @@ @apply bg-surface-subtle; } .dev-table th { - @apply text-left text-xs font-semibold text-fg-secondary uppercase tracking-wide px-4 py-2.5; + @apply text-left text-xs font-semibold text-fg-secondary tracking-wide px-4 py-2.5; } .dev-table td { @apply px-4 py-3 text-sm text-fg-primary border-t border-border; @@ -512,4 +470,10 @@ .status-badge.bg-gray-400 { @apply bg-gray-100 text-gray-600; } + .overflow-btn { + @apply bg-transparent border-none text-fg-tertiary cursor-pointer text-base px-1; + } + .overflow-btn:hover { + @apply text-fg-primary; + } From 67cf06d17c2f2625a5029bfdd1508af058c83446 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Mon, 13 Apr 2026 15:19:43 -0400 Subject: [PATCH 17/31] prettier dev slots 1, new table not included in this PR Co-Authored-By: Claude Opus 4.6 --- .../projects/status/deployments/DeploymentsPage.svelte | 1 + .../features/projects/status/overview/ManageSlotsModal.svelte | 4 ++-- .../src/features/projects/status/overview/slots-utils.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte index 72bda85164a..8a53ece7d01 100644 --- a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte +++ b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte @@ -304,6 +304,7 @@ {organization} {project} currentSlots={devSlots} + minSlots={1} /> {/if} diff --git a/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte b/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte index 48a3b1fb808..a77334ef2d6 100644 --- a/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte +++ b/web-admin/src/features/projects/status/overview/ManageSlotsModal.svelte @@ -28,16 +28,16 @@ project, currentSlots, title = "Manage Cluster Size", + minSlots = DEFAULT_MANAGED_SLOTS, }: { open?: boolean; organization: string; project: string; currentSlots: number; title?: string; + minSlots?: number; } = $props(); - let minSlots = DEFAULT_MANAGED_SLOTS; - let selectedSlots = $state(0); let showAllSizes = $state(false); diff --git a/web-admin/src/features/projects/status/overview/slots-utils.ts b/web-admin/src/features/projects/status/overview/slots-utils.ts index d9525e32261..24fa25f8dac 100644 --- a/web-admin/src/features/projects/status/overview/slots-utils.ts +++ b/web-admin/src/features/projects/status/overview/slots-utils.ts @@ -19,7 +19,7 @@ function tier(slots: number, rate = SLOT_RATE_PER_HR): SlotTier { } // Popular slot values shown by default -export const POPULAR_SLOTS = [2, 3, 4, 8, 16, 30]; +export const POPULAR_SLOTS = [1, 2, 3, 4, 8, 16, 30]; // All available slot values including intermediate sizes export const ALL_SLOTS = [ From 3085ebe886a4c4ddeea19f9317fa513e1b006729 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Wed, 15 Apr 2026 14:36:18 -0400 Subject: [PATCH 18/31] update designs --- .../status/deployments/DeploymentsPage.svelte | 56 ++++++++----------- .../deployments/DeploymentsSection.svelte | 2 +- 2 files changed, 23 insertions(+), 35 deletions(-) diff --git a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte index 8a53ece7d01..259a2212037 100644 --- a/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte +++ b/web-admin/src/features/projects/status/deployments/DeploymentsPage.svelte @@ -9,6 +9,9 @@ import { getStatusDotClass, getStatusLabel } from "../display-utils"; import { SLOT_RATE_PER_HR, HOURS_PER_MONTH } from "../overview/slots-utils"; import ManageSlotsModal from "../overview/ManageSlotsModal.svelte"; + import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte"; + import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte"; + import InfoCircle from "@rilldata/web-common/components/icons/InfoCircle.svelte"; let { organization, @@ -28,7 +31,6 @@ $proj.data?.projectPermissions?.manageProject ?? false, ); let prodModalOpen = $state(false); - let devModalOpen = $state(false); // Billing let subscriptionQuery = $derived( @@ -50,7 +52,7 @@ function formatCycleDate(dateStr: string | undefined): string { if (!dateStr) return ""; const d = new Date(dateStr); - return d.toLocaleDateString(undefined, { month: "short", day: "numeric" }); + return d.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" }); } // Slot types @@ -90,12 +92,22 @@ {#if !isEnterprise}
-

Usage & Slots

+

Usage & Compute

- Total slots + + Total Compute Units + + + + + + 1 unit = 4 GiB RAM / 1 vCPU + + + {totalSlots} {prodSlots} production @@ -122,9 +134,9 @@
- +
-

Slots breakdown

+

Unit breakdown

@@ -146,7 +158,7 @@ class="manage-btn" onclick={() => (prodModalOpen = true)} > - Manage slots + Manage units {/if}
@@ -154,17 +166,13 @@
- Slots + Units {prodSlots}
Est. cost ~${prodMonthlyCost}/mo
-
- Rate - ${SLOT_RATE_PER_HR}/slot/hr -
@@ -189,20 +197,12 @@ — {/if} - {#if canManage && !$subscriptionQuery?.isLoading} - - {/if}
Cluster size
- Slots + Units {devSlots}
@@ -211,10 +211,6 @@ {devSlots > 0 ? `~$${devMonthlyCost}/mo` : "—"}
-
- Rate - ${SLOT_RATE_PER_HR}/slot/hr -
@@ -232,7 +228,7 @@ Branch Author Status - Slots + Units Last updated @@ -298,14 +294,6 @@ {project} {currentSlots} /> - {/if} diff --git a/web-admin/src/routes/[organization]/[project]/-/status/branches/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/status/branches/+page.svelte index e8fc7f99da3..8e5340c229e 100644 --- a/web-admin/src/routes/[organization]/[project]/-/status/branches/+page.svelte +++ b/web-admin/src/routes/[organization]/[project]/-/status/branches/+page.svelte @@ -1,11 +1,13 @@ -
+
+
From 7500998f0f45c25dd13fecd07a9d523b5eff0f26 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Wed, 15 Apr 2026 14:53:14 -0400 Subject: [PATCH 20/31] prettier --- .../src/features/branches/DeploymentsPage.svelte | 14 +++++++++----- .../status/overview/DeploymentSection.svelte | 5 ++++- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/web-admin/src/features/branches/DeploymentsPage.svelte b/web-admin/src/features/branches/DeploymentsPage.svelte index 121ce074b48..15d8b67dcf7 100644 --- a/web-admin/src/features/branches/DeploymentsPage.svelte +++ b/web-admin/src/features/branches/DeploymentsPage.svelte @@ -4,7 +4,10 @@ createAdminServiceGetBillingSubscription, } from "@rilldata/web-admin/client"; import { isEnterprisePlan } from "@rilldata/web-admin/features/billing/plans/utils"; - import { SLOT_RATE_PER_HR, HOURS_PER_MONTH } from "@rilldata/web-admin/features/projects/status/overview/slots-utils"; + import { + SLOT_RATE_PER_HR, + HOURS_PER_MONTH, + } from "@rilldata/web-admin/features/projects/status/overview/slots-utils"; import ManageSlotsModal from "@rilldata/web-admin/features/projects/status/overview/ManageSlotsModal.svelte"; import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte"; import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte"; @@ -49,7 +52,11 @@ function formatCycleDate(dateStr: string | undefined): string { if (!dateStr) return ""; const d = new Date(dateStr); - return d.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" }); + return d.toLocaleDateString(undefined, { + year: "numeric", + month: "short", + day: "numeric", + }); } // Slot types @@ -73,7 +80,6 @@ let totalMonthlyCost = $derived( (totalSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH).toFixed(2), ); - {#if !isEnterprise} @@ -202,7 +208,6 @@
-
diff --git a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte index f3349ca30a0..6f2754b98f9 100644 --- a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte +++ b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte @@ -235,7 +235,10 @@
{dataLabel} - + {formatMemorySize(dataSizeBytes)} From e3553c7529985f7a9092fefb250243c9e626e193 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Wed, 15 Apr 2026 15:35:23 -0400 Subject: [PATCH 21/31] web code qual --- .../routes/[organization]/[project]/-/status/+layout.svelte | 6 ------ 1 file changed, 6 deletions(-) diff --git a/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte b/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte index 36b8784b834..4a681b70de6 100644 --- a/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte +++ b/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte @@ -2,18 +2,12 @@ -{#if !isEnterprise} +{#if showDeploymentSection}

Usage & Compute

diff --git a/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte b/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte index 4a681b70de6..105faa831c3 100644 --- a/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte +++ b/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte @@ -15,7 +15,7 @@ hasPermission: true, }, { - label: "Branches", + label: "Deployments", route: "/branches", hasPermission: true, }, From c726aff38b496f0d8928ddebbcf67addc620e166 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Wed, 15 Apr 2026 18:05:22 -0400 Subject: [PATCH 23/31] Manage Units(same CTA as Production Slots} with TODO for deployment API --- .../features/branches/BranchesSection.svelte | 34 ++++++++++++++++++- .../features/branches/DeploymentsPage.svelte | 4 ++- .../src/features/branches/dev-slots-store.ts | 7 ++++ .../status/overview/ManageSlotsModal.svelte | 17 ++++++++++ 4 files changed, 60 insertions(+), 2 deletions(-) create mode 100644 web-admin/src/features/branches/dev-slots-store.ts diff --git a/web-admin/src/features/branches/BranchesSection.svelte b/web-admin/src/features/branches/BranchesSection.svelte index ebaa5281e2d..1ddb92f726f 100644 --- a/web-admin/src/features/branches/BranchesSection.svelte +++ b/web-admin/src/features/branches/BranchesSection.svelte @@ -38,10 +38,13 @@ EyeIcon, GitBranchIcon, PlayIcon, + SlidersHorizontalIcon, StopCircleIcon, Trash2Icon, } from "lucide-svelte"; import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus"; + import ManageSlotsModal from "@rilldata/web-admin/features/projects/status/overview/ManageSlotsModal.svelte"; + import { devSlotsOverride } from "./dev-slots-store"; let { organization, project }: { organization: string; project: string } = $props(); @@ -94,11 +97,12 @@ ? parseInt($projectQuery.data.project.prodSlots, 10) : null, ); - let devSlots = $derived( + let apiDevSlots = $derived( $projectQuery.data?.project?.devSlots != null ? parseInt($projectQuery.data.project.devSlots, 10) : null, ); + let devSlots = $derived($devSlotsOverride ?? apiDevSlots); let visibleDeployments = $derived.by(() => { const active = ($allDeployments.data?.deployments ?? []).filter( @@ -142,6 +146,7 @@ let pendingId = $state(""); let deleteDialogOpen = $state(false); let pendingDelete = $state<{ id: string; branch: string } | null>(null); + let devSlotsModalOpen = $state(false); async function mutateDeployment( deploymentId: string, @@ -308,6 +313,20 @@ {prod ? "View" : "Preview"}
+ {#if !prod && isActiveDeployment(deployment)} + { + openDropdownId = ""; + devSlotsModalOpen = true; + }} + > +
+ + Manage units +
+ + {/if} {#if canStart} + { + devSlotsOverride.set(slots); + }} +/> + diff --git a/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte b/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte index 105faa831c3..5ca75d84c1e 100644 --- a/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte +++ b/web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte @@ -4,9 +4,11 @@ import { page } from "$app/stores"; import ContentContainer from "@rilldata/web-common/components/layout/ContentContainer.svelte"; import LeftNav from "@rilldata/web-admin/components/nav/LeftNav.svelte"; + import { extractBranchFromPath } from "@rilldata/web-admin/features/branches/branch-utils"; $: organization = $page.params.organization; $: basePage = `/${organization}/${$page.params.project}/-/status`; + $: onBranch = !!extractBranchFromPath($page.url.pathname); $: navItems = [ { @@ -17,7 +19,7 @@ { label: "Deployments", route: "/branches", - hasPermission: true, + hasPermission: !onBranch, }, { label: "Resources", diff --git a/web-admin/src/routes/[organization]/[project]/-/status/branches/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/status/branches/+page.svelte index 8e5340c229e..7a099bf6014 100644 --- a/web-admin/src/routes/[organization]/[project]/-/status/branches/+page.svelte +++ b/web-admin/src/routes/[organization]/[project]/-/status/branches/+page.svelte @@ -1,13 +1,30 @@ -
- - -
+{#if !activeBranch} +
+ + +
+{/if} From 615caed8464920b571910f2823cbe8423bf1819a Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Mon, 20 Apr 2026 11:34:26 -0400 Subject: [PATCH 25/31] Update DeploymentSection.svelte --- .../projects/status/overview/DeploymentSection.svelte | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte index 8a68bef6511..be4dac40a39 100644 --- a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte +++ b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte @@ -213,8 +213,7 @@ {#if aiConnector && aiConnector.name !== "admin"} {formatConnectorName(aiConnector.type)} - ({aiConnector.name})({aiConnector.name}) {:else} Rill Managed @@ -226,10 +225,7 @@
{dataLabel} - + {formatMemorySize(dataSizeBytes)} @@ -273,5 +269,4 @@ .repo-link:hover { @apply underline; } - From c447e1368a3fd9a7eced84936d59e035cd601fbb Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Mon, 20 Apr 2026 15:09:49 -0400 Subject: [PATCH 26/31] remove monthly estimate, show hourly for development --- .../features/branches/DeploymentsPage.svelte | 29 +++++++------------ 1 file changed, 10 insertions(+), 19 deletions(-) diff --git a/web-admin/src/features/branches/DeploymentsPage.svelte b/web-admin/src/features/branches/DeploymentsPage.svelte index 4128d01e654..7acd81e5587 100644 --- a/web-admin/src/features/branches/DeploymentsPage.svelte +++ b/web-admin/src/features/branches/DeploymentsPage.svelte @@ -8,10 +8,7 @@ isFreePlan, isProPlan, } from "@rilldata/web-admin/features/billing/plans/utils"; - import { - SLOT_RATE_PER_HR, - HOURS_PER_MONTH, - } from "@rilldata/web-admin/features/projects/status/overview/slots-utils"; + import { SLOT_RATE_PER_HR } from "@rilldata/web-admin/features/projects/status/overview/slots-utils"; import ManageSlotsModal from "@rilldata/web-admin/features/projects/status/overview/ManageSlotsModal.svelte"; import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte"; import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte"; @@ -79,16 +76,10 @@ let devMemory = $derived(devSlots * 4); let devCpu = $derived(devSlots); - // Cost calculations (with decimals) - let prodMonthlyCost = $derived( - (prodSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH).toFixed(2), - ); - let devMonthlyCost = $derived( - (devSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH).toFixed(2), - ); - let totalMonthlyCost = $derived( - (totalSlots * SLOT_RATE_PER_HR * HOURS_PER_MONTH).toFixed(2), - ); + // Cost calculations + let prodHourlyCost = $derived((prodSlots * SLOT_RATE_PER_HR).toFixed(2)); + let devHourlyCost = $derived((devSlots * SLOT_RATE_PER_HR).toFixed(2)); + let totalHourlyCost = $derived((totalSlots * SLOT_RATE_PER_HR).toFixed(2)); {#if showDeploymentSection} @@ -121,10 +112,10 @@
- Est. monthly project cost - ${totalMonthlyCost} + Est. hourly project cost + ${totalHourlyCost}/hr - ${prodMonthlyCost} prod + ${devMonthlyCost} dev + ${prodHourlyCost} prod + ${devHourlyCost} dev {#if cycleStart || cycleEnd} @@ -173,7 +164,7 @@
Est. cost - ~${prodMonthlyCost}/mo + ~${prodHourlyCost}/hr
@@ -210,7 +201,7 @@
Est. cost - {devSlots > 0 ? `~$${devMonthlyCost}/mo` : "—"} + {devSlots > 0 ? `~$${devHourlyCost}/hr` : "—"}
From 71b4a16534c9e41ca4e669dae63a3a9d55918132 Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Mon, 20 Apr 2026 15:43:32 -0400 Subject: [PATCH 27/31] Update DeploymentsPage.svelte --- web-admin/src/features/branches/DeploymentsPage.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web-admin/src/features/branches/DeploymentsPage.svelte b/web-admin/src/features/branches/DeploymentsPage.svelte index 7acd81e5587..f3d0a0d3bb1 100644 --- a/web-admin/src/features/branches/DeploymentsPage.svelte +++ b/web-admin/src/features/branches/DeploymentsPage.svelte @@ -113,7 +113,9 @@
Est. hourly project cost - ${totalHourlyCost}/hr + ${totalHourlyCost}/hr ${prodHourlyCost} prod + ${devHourlyCost} dev From 4451508f33a8d8040fe95b72a908c6f5652a5fad Mon Sep 17 00:00:00 2001 From: royendo <67675319+royendo@users.noreply.github.com> Date: Mon, 20 Apr 2026 16:24:06 -0400 Subject: [PATCH 28/31] design on call changes --- .../features/branches/BranchesSection.svelte | 66 ++++++++++++------- .../features/branches/DeploymentsPage.svelte | 35 +--------- .../status/overview/ManageSlotsModal.svelte | 12 ++-- 3 files changed, 51 insertions(+), 62 deletions(-) diff --git a/web-admin/src/features/branches/BranchesSection.svelte b/web-admin/src/features/branches/BranchesSection.svelte index 1ddb92f726f..5a024951d92 100644 --- a/web-admin/src/features/branches/BranchesSection.svelte +++ b/web-admin/src/features/branches/BranchesSection.svelte @@ -92,6 +92,9 @@ ), ); + let canManage = $derived( + $projectQuery.data?.projectPermissions?.manageProject ?? false, + ); let prodSlots = $derived( $projectQuery.data?.project?.prodSlots != null ? parseInt($projectQuery.data.project.prodSlots, 10) @@ -146,6 +149,7 @@ let pendingId = $state(""); let deleteDialogOpen = $state(false); let pendingDelete = $state<{ id: string; branch: string } | null>(null); + let prodSlotsModalOpen = $state(false); let devSlotsModalOpen = $state(false); async function mutateDeployment( @@ -207,9 +211,7 @@ } -
-

Branches

- +
{#if $allDeployments.isLoading}
@@ -226,22 +228,12 @@ {:else}
-
- Branch -
-
- Author -
-
- Status -
-
- Units -
-
- Last updated -
-
+
Branch
+
Author
+
Status
+
Units
+
Last updated
+
{#each visibleDeployments as deployment, i (deployment.id ?? i)} {@const prod = isProdDeployment(deployment)} @@ -313,6 +305,20 @@ {prod ? "View" : "Preview"}
+ {#if prod && canManage && isActiveDeployment(deployment)} + { + openDropdownId = ""; + prodSlotsModalOpen = true; + }} + > +
+ + Manage units +
+ + {/if} {#if !prod && isActiveDeployment(deployment)} + +