pricing: phase-2: deployment page

admin/server/projects.go

@@ -2218,6 +2218,7 @@ func (s *Server) projToDTO(p *database.Project, orgName string) *adminv1.Project
 		Provisioner:         p.Provisioner,
 		ProdVersion:         p.ProdVersion,
 		ProdSlots:           int64(p.ProdSlots),
+		DevSlots:            int64(p.DevSlots),
 		PrimaryBranch:       p.PrimaryBranch,
 		Subpath:             p.Subpath,
 		GitRemote:           safeStr(p.GitRemote),

web-admin/src/features/branches/BranchesSection.svelte

@@ -38,10 +38,12 @@
     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";
 
   let { organization, project }: { organization: string; project: string } =
     $props();
@@ -89,6 +91,9 @@
     ),
   );
 
+  let canManage = $derived(
+    $projectQuery.data?.projectPermissions?.manageProject ?? false,
+  );
   let prodSlots = $derived(
     $projectQuery.data?.project?.prodSlots != null
       ? parseInt($projectQuery.data.project.prodSlots, 10)
@@ -142,6 +147,8 @@
   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(
     deploymentId: string,
@@ -202,9 +209,7 @@
   }
 </script>
 
-<section class="flex flex-col gap-y-5">
-  <h2 class="text-lg font-medium">Branches</h2>
-
+<section class="flex flex-col gap-y-3">
   {#if $allDeployments.isLoading}
     <div class="empty-container">
       <DelayedSpinner isLoading={true} size="20px" />
@@ -221,22 +226,12 @@
   {:else}
     <div class="table-wrapper">
       <div class="header-row">
-        <div class="pl-4 py-2 font-semibold text-fg-secondary text-sm">
-          Branch
-        </div>
-        <div class="pl-4 py-2 font-semibold text-fg-secondary text-sm">
-          Author
-        </div>
-        <div class="pl-4 py-2 font-semibold text-fg-secondary text-sm">
-          Status
-        </div>
-        <div class="pl-4 py-2 font-semibold text-fg-secondary text-sm">
-          Slots
-        </div>
-        <div class="pl-4 py-2 font-semibold text-fg-secondary text-sm">
-          Last updated
-        </div>
-        <div class="pl-4 py-2 font-semibold text-fg-secondary text-sm"></div>
+        <div class="pl-4 py-2">Branch</div>
+        <div class="pl-4 py-2">Author</div>
+        <div class="pl-4 py-2">Status</div>
+        <div class="pl-4 py-2">Units</div>
+        <div class="pl-4 py-2">Last updated</div>
+        <div class="pl-4 py-2"></div>
       </div>
       {#each visibleDeployments as deployment, i (deployment.id ?? i)}
         {@const prod = isProdDeployment(deployment)}
@@ -308,6 +303,34 @@
                     <span class="ml-2">{prod ? "View" : "Preview"}</span>
                   </div>
                 </DropdownMenu.Item>
+                {#if prod && canManage && isActiveDeployment(deployment)}
+                  <DropdownMenu.Item
+                    class="font-normal flex items-center"
+                    onclick={() => {
+                      openDropdownId = "";
+                      prodSlotsModalOpen = true;
+                    }}
+                  >
+                    <div class="flex items-center">
+                      <SlidersHorizontalIcon size="12px" />
+                      <span class="ml-2">Manage units</span>
+                    </div>
+                  </DropdownMenu.Item>
+                {/if}
+                {#if !prod && canManage && isActiveDeployment(deployment)}
+                  <DropdownMenu.Item
+                    class="font-normal flex items-center"
+                    onclick={() => {
+                      openDropdownId = "";
+                      devSlotsModalOpen = true;
+                    }}
+                  >
+                    <div class="flex items-center">
+                      <SlidersHorizontalIcon size="12px" />
+                      <span class="ml-2">Manage units</span>
+                    </div>
+                  </DropdownMenu.Item>
+                {/if}
                 {#if canStart}
                   <DropdownMenu.Item
                     class="font-normal flex items-center"
@@ -378,13 +401,31 @@
   onConfirm={handleDelete}
 />
 
+<ManageSlotsModal
+  bind:open={prodSlotsModalOpen}
+  {organization}
+  {project}
+  currentSlots={prodSlots ?? 0}
+  title="Manage Prod Cluster Size"
+/>
+
+<ManageSlotsModal
+  bind:open={devSlotsModalOpen}
+  {organization}
+  {project}
+  currentSlots={devSlots ?? 0}
+  title="Manage Dev Cluster Size"
+  minSlots={0}
+  slotType="dev"
+/>
+
 <style lang="postcss">
   .empty-container {
-    @apply border border-border rounded-sm py-10 flex flex-col items-center gap-y-2;
+    @apply border border-border rounded-xl py-10 flex flex-col items-center gap-y-2;
   }
 
   .table-wrapper {
-    @apply flex flex-col border rounded-sm overflow-x-auto;
+    @apply flex flex-col border border-border rounded-xl bg-surface-background overflow-x-auto;
   }
 
   .header-row,
@@ -397,7 +438,7 @@
   }
 
   .header-row {
-    @apply w-full bg-surface-subtle;
+    @apply w-full bg-surface-subtle text-xs font-semibold text-fg-secondary uppercase tracking-wide;
   }
 
   .data-row {