feat: scale deployment up and down

src-tauri/src/main.rs

@@ -13,6 +13,7 @@ fn main() {
             cron_jobs::get_cron_jobs,
             deployments::get_deployments,
             deployments::restart_deployment,
+            deployments::scale_deployment,
             jobs::get_jobs,
             pods::get_pod_logs,
             pods::get_pods,

src-tauri/src/resources/deployments.rs

@@ -1,5 +1,9 @@
 use k8s_openapi::api::apps::v1::Deployment;
-use kube::{api::ListParams, core::ObjectList, Api};
+use kube::{
+    api::{ListParams, Patch, PatchParams},
+    core::ObjectList,
+    Api,
+};
 
 use super::internal::get_api;
 
@@ -25,3 +29,22 @@ pub async fn restart_deployment(namespace: Option<String>, name: String) -> bool
     };
     return result;
 }
+
+#[tauri::command]
+pub async fn scale_deployment(namespace: Option<String>, name: String, replicas: u8) -> bool {
+    let api: Api<Deployment> = get_api(namespace).await;
+    let spec = serde_json::json!({ "spec": { "replicas": replicas }});
+    let pp = PatchParams::default();
+    let patch = Patch::Merge(&spec);
+    let resource = api.patch_scale(&name, &pp, &patch).await;
+
+    let result = match resource {
+        Ok(_resource) => true,
+        Err(err) => {
+            println!("Error scaling deployment: {}", err);
+            return false;
+        }
+    };
+
+    return result;
+}

src-tauri/tauri.conf.json

@@ -55,10 +55,10 @@
     "windows": [
       {
         "fullscreen": false,
-        "height": 600,
+        "height": 900,
         "resizable": true,
         "title": "Kube Knots",
-        "width": 800
+        "width": 1200
       }
     ]
   }

src/deployments/deployments.tsx

@@ -1,12 +1,15 @@
-import { ArrowPathIcon, PencilIcon } from "@heroicons/react/20/solid";
+import { Dialog } from "@headlessui/react";
+import { ArrowPathIcon, PencilIcon, ArrowsUpDownIcon } from "@heroicons/react/20/solid";
 import type { V1Deployment } from "@kubernetes/client-node";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { invoke } from "@tauri-apps/api";
 import { lazy, Suspense, useState } from "react";
 
 import { ActionButton, ActionGroup } from "../components/action-group";
+import { Modal } from "../components/modal";
 import { Table, TableHeader, TableBody, TableCell } from "../components/table";
 import { useCurrentNamespace } from "../namespaces/namespaces";
+import { ScaleDeploymentModal } from "./scale-deployment-modal";
 
 const ResourceEditDrawer = lazy(() =>
   import("../components/resource-edit-drawer").then((module) => ({
@@ -39,13 +42,17 @@ export function Deployments() {
     },
   });
 
+  const [action, setAction] = useState<"edit" | "scale" | null>(null);
   const [selected, setSelected] = useState<V1Deployment | null>(null);
 
-  const handleEditOpen = (deployment: V1Deployment) => {
+  const handleOpen = (deployment: V1Deployment, action: "edit" | "scale") => {
     setSelected(deployment);
+    setAction(action);
   };
-  const handleEditClose = () => {
+
+  const handleClose = () => {
     setSelected(null);
+    setAction(null);
   };
 
   return (
@@ -68,11 +75,17 @@ export function Deployments() {
                     position="left"
                     onClick={() => restartMutation.mutate(item)}
                   />
+                  <ActionButton
+                    Icon={ArrowsUpDownIcon}
+                    label="Scale"
+                    position="middle"
+                    onClick={() => handleOpen(item, "scale")}
+                  />
                   <ActionButton
                     Icon={PencilIcon}
                     label="Edit"
                     position="right"
-                    onClick={() => handleEditOpen(item)}
+                    onClick={() => handleOpen(item, "edit")}
                   />
                 </ActionGroup>
               </TableCell>
@@ -83,11 +96,21 @@ export function Deployments() {
 
       <Suspense fallback={<div>Loading Editor</div>}>
         <ResourceEditDrawer
-          isOpen={!!selected}
-          handleClose={handleEditClose}
+          isOpen={action === "edit"}
+          handleClose={handleClose}
           selectedResource={selected}
         />
       </Suspense>
+
+      <Suspense fallback={<div>Loading Scale Form</div>}>
+        {selected && (
+          <ScaleDeploymentModal
+            isOpen={action === "scale"}
+            handleClose={handleClose}
+            deployment={selected}
+          />
+        )}
+      </Suspense>
     </div>
   );
 }

src/deployments/scale-deployment-modal.tsx

@@ -0,0 +1,66 @@
+import { Dialog } from "@headlessui/react";
+import { type V1Deployment } from "@kubernetes/client-node";
+import { useMutation } from "@tanstack/react-query";
+import { invoke } from "@tauri-apps/api";
+import { useState } from "react";
+
+interface ModalProps {
+  isOpen: boolean;
+  handleClose: () => void;
+  deployment: V1Deployment;
+}
+export function ScaleDeploymentModal({ isOpen, handleClose, deployment }: ModalProps): JSX.Element {
+  const [replicas, setReplicas] = useState<number>(deployment.spec?.replicas || 0);
+
+  const scaleMutation = useMutation({
+    mutationFn: (replicas: number) => {
+      return invoke("scale_deployment", {
+        namespace: deployment.metadata?.namespace,
+        name: deployment.metadata?.name,
+        replicas,
+      });
+    },
+    onSuccess: (_data, variables) => {
+      handleClose();
+      alert(`Scaled deployment ${deployment.metadata?.name} to ${variables} replicas`);
+    },
+  });
+
+  return (
+    <Dialog as="div" className="relative z-10" onClose={handleClose} open={isOpen}>
+      <div className="fixed inset-0 bg-gray-500/75 transition-opacity" />
+
+      <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="flex min-h-full items-end justify-center p-4 text-center">
+          <Dialog.Panel className="relative rounded-lg bg-gray-100 p-4 text-left shadow-xl">
+            <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+              Scale {deployment.metadata?.name}
+            </Dialog.Title>
+
+            <div className="mt-2">
+              <p className="text-sm text-gray-500">
+                Current replica count: {deployment.spec?.replicas}
+              </p>
+            </div>
+
+            <input
+              onChange={(e) => setReplicas(parseInt(e.target.value ?? ""))}
+              type="number"
+              value={replicas}
+              className="mt-4 block w-full rounded-md border-gray-300 focus:ring-slate-500"
+              step={1}
+              min={0}
+            />
+
+            <button
+              className="mt-4 w-full rounded-md bg-gray-200 px-4 py-2 text-base text-gray-800 shadow-sm hover:bg-gray-300"
+              onClick={() => scaleMutation.mutate(replicas)}
+            >
+              Scale
+            </button>
+          </Dialog.Panel>
+        </div>
+      </div>
+    </Dialog>
+  );
+}