feat: add query to get list of namespace, filter pods by namespace (#3)

src-tauri/src/main.rs

@@ -3,13 +3,14 @@
     windows_subsystem = "windows"
 )]
 
+mod namespaces;
 mod pods;
 
-use crate::pods::get_pods;
+use crate::{namespaces::get_namespaces, pods::get_pods};
 
 fn main() {
     tauri::Builder::default()
-        .invoke_handler(tauri::generate_handler![get_pods])
+        .invoke_handler(tauri::generate_handler![get_pods, get_namespaces])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src-tauri/src/namespaces/mod.rs

@@ -0,0 +1,16 @@
+use k8s_openapi::api::core::v1::Namespace;
+
+use kube::{
+    api::{Api, ListParams, ObjectList},
+    Client,
+};
+
+#[tauri::command]
+pub async fn get_namespaces() -> ObjectList<Namespace> {
+    let client = Client::try_default().await.unwrap();
+
+    let namespaces: Api<Namespace> = Api::all(client);
+    let lp = ListParams::default();
+
+    return namespaces.list(&lp).await.unwrap();
+}

src-tauri/src/pods/mod.rs

@@ -6,10 +6,14 @@ use kube::{
 };
 
 #[tauri::command]
-pub async fn get_pods() -> ObjectList<Pod> {
+pub async fn get_pods(namespace: Option<String>) -> ObjectList<Pod> {
     let client = Client::try_default().await.unwrap();
 
-    let pods: Api<Pod> = Api::default_namespaced(client);
+    // match namespace
+    let pods: Api<Pod> = match namespace {
+        Some(ns) => Api::namespaced(client, &ns),
+        None => Api::all(client),
+    };
 
     let lp = ListParams::default();
     return pods.list(&lp).await.unwrap();

src/app.tsx

@@ -1,4 +1,5 @@
 import { Pods } from "./pods/pods";
+import { Namespaces } from "./namespaces/namespaces";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const queryClient = new QueryClient();
@@ -9,6 +10,7 @@ export function App() {
       <div className="container">
         <h1>Kube Knots</h1>
 
+        <h2>Pods</h2>
         <Pods />
       </div>
     </QueryClientProvider>

src/namespaces/namespaces.tsx

@@ -0,0 +1,29 @@
+import { invoke } from "@tauri-apps/api";
+import { useQuery } from "@tanstack/react-query";
+
+import type { V1Namespace } from "@kubernetes/client-node";
+
+export function Namespaces({
+  onChange,
+}: {
+  onChange: (namespace: string) => void;
+}) {
+  const result = useQuery(["namespaces"], () => {
+    return invoke<{ items: V1Namespace[] }>("get_namespaces");
+  });
+
+  if (!result.isSuccess) {
+    return <div>Error</div>;
+  }
+
+  return (
+    <select name="namespaces" onChange={(e) => onChange(e.target.value)}>
+      <option>All</option>
+      {result.data.items.map((item) => (
+        <option key={item.metadata?.name} value={item.metadata?.name}>
+          {item.metadata?.name}
+        </option>
+      ))}
+    </select>
+  );
+}

src/pods/pods.tsx

@@ -2,30 +2,39 @@ import { invoke } from "@tauri-apps/api";
 import { useQuery } from "@tanstack/react-query";
 
 import type { V1Pod } from "@kubernetes/client-node";
+import { useState } from "react";
+import { Namespaces } from "../namespaces/namespaces";
 
 export function Pods() {
-  const result = useQuery(["pods"], () =>
-    invoke<{ items: V1Pod[] }>("get_pods")
-  );
+  const [namespace, setNamespace] = useState<string | undefined>(undefined);
+
+  const result = useQuery(["pods", namespace], () => {
+    return invoke<{ items: V1Pod[] }>("get_pods", { namespace });
+  });
 
-  if (!result.isSuccess) {
-    return <div>Error</div>;
-  }
+  const handleNamespaceChange = (namespace: string) => {
+    setNamespace(namespace);
+  };
 
   return (
-    <table>
-      <thead>
-        <th>Name</th>
-        <th>Status</th>
-      </thead>
-      <tbody>
-        {result.data.items.map((pod) => (
+    <div>
+      <Namespaces onChange={handleNamespaceChange} />
+      <table>
+        <thead>
           <tr>
-            <td>{pod.metadata?.name}</td>
-            <td>{pod.status?.phase}</td>
+            <th>Name</th>
+            <th>Status</th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {result.data?.items.map((pod) => (
+            <tr>
+              <td>{pod.metadata?.name}</td>
+              <td>{pod.status?.phase}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }