a lot of stuff

.github/renovate.json

@@ -30,6 +30,6 @@
       "prCreation": "not-pending"
     }
   ],
-  "timezone": "Europe/Helsinki",
+  "timezone": "Europe/Amsterdam",
   "dependencyDashboard": true
 }

.github/workflows/release.yml

@@ -20,17 +20,16 @@ jobs:
     runs-on: ${{ matrix.platform }}
     steps:
       - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 2
-          run_install: true
 
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18
           cache: 'pnpm'
 
+      - name: Install dependencies
+        run: npm install
+
       - name: install Rust stable
         uses: actions-rs/toolchain@v1
         with:
@@ -43,7 +42,7 @@ jobs:
           sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf
 
       - name: Build Vite + Tauri
-        run: pnpm build
+        run: npm run build
 
       - name: Create release
         uses: tauri-apps/tauri-action@v0

.github/workflows/test-build.yml

@@ -27,17 +27,14 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - name: Install pnpm + deps
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
-          run_install: true
-
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18
           cache: 'pnpm'
+
+      - name: Install dependencies
+        run: npm install
 
       - name: Install Rust stable
         uses: actions-rs/toolchain@v1
@@ -51,4 +48,4 @@ jobs:
           sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf
 
       - name: Build Vite + Tauri
-        run: pnpm build
+        run: npm run build

.github/workflows/test.yml

@@ -28,16 +28,15 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-          run_install: true
 
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: 'pnpm'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
 
       - name: Run unit tests
-        run: pnpm test
+        run: npm test

src-tauri/src/main.rs

@@ -5,7 +5,7 @@ use tauri::api::shell;
 use tauri::{CustomMenuItem, Manager, Menu, Submenu};
 
 use k8s_openapi::api::apps::v1::Deployment;
-use k8s_openapi::api::core::v1::{Namespace, Pod};
+use k8s_openapi::api::core::v1::{Namespace, Pod, Service};
 use kube::api::ListParams;
 use kube::config::{KubeConfigOptions, Kubeconfig, KubeconfigError};
 use kube::{api::Api, Client, Config, Error};
@@ -93,11 +93,6 @@ async fn list_contexts() -> Result<Vec<String>, SerializableKubeError> {
 
 async fn client_with_context(context: &str) -> Result<Client, SerializableKubeError> {
     if context.to_string() != CURRENT_CONTEXT.lock().unwrap().as_ref().unwrap().clone() {
-        println!(
-            "client_with_context - context changed from {} to {}",
-            CURRENT_CONTEXT.lock().unwrap().as_ref().unwrap().clone(),
-            context
-        );
         let options = KubeConfigOptions {
             context: Some(context.to_string()),
             cluster: None,
@@ -176,6 +171,21 @@ async fn list_deployments(
         .map_err(|err| SerializableKubeError::from(err));
 }
 
+#[tauri::command]
+async fn list_services(
+    context: &str,
+    namespace: &str,
+) -> Result<Vec<Service>, SerializableKubeError> {
+    let client = client_with_context(context).await?;
+    let services_api: Api<Service> = Api::namespaced(client, namespace);
+
+    return services_api
+        .list(&ListParams::default())
+        .await
+        .map(|services| services.items)
+        .map_err(|err| SerializableKubeError::from(err));
+}
+
 struct TerminalSession {
     writer: Arc<Mutex<Box<dyn Write + Send>>>,
 }
@@ -288,6 +298,7 @@ fn main() {
             list_pods,
             get_pod,
             list_deployments,
+            list_services,
             create_tty_session,
             stop_tty_session,
             write_to_pty

src/command-palette/SwitchContext.ts

@@ -1,37 +1,47 @@
-import { Command } from "@/command-palette";
+import { Kubernetes } from "@/services/Kubernetes";
 
 export function SwitchContext(
   setContext: (context: string) => void,
   setNamespace: (namespace: string) => void
 ) {
+  const contextCache = {
+    contexts: [] as string[],
+  };
+  const namespaceCache = {} as { [key: string]: string[] };
+
+  Kubernetes.getContexts().then((contexts) => {
+    contextCache["contexts"] = contexts;
+
+    contexts.map((context) => {
+      Kubernetes.getNamespaces(context).then((namespaces) => {
+        namespaceCache[context] = namespaces.map(
+          (namespace) => namespace.metadata?.name || ""
+        );
+      });
+    });
+  });
+
   return {
     id: "switch-context",
     name: "Switch context",
     description: "Switch between contexts and namespaces",
     commands: async () => {
-      return [
-        {
-          name: "sre-eks-production-1 - all",
-          execute: () => {
-            setContext("sre-eks-production-1");
-            setNamespace("all");
-          },
-        },
-        {
-          name: "sre-eks-production-1 - backoffice-platform",
-          execute: () => {
-            setContext("sre-eks-production-1");
-            setNamespace("backoffice-platform");
-          },
-        },
-        {
-          name: "sre-eks-staging-1 - tms",
-          execute: () => {
-            setContext("sre-eks-staging-1");
-            setNamespace("tms");
+      return contextCache["contexts"].map((context) => {
+        return {
+          name: context,
+          commands: async () => {
+            return namespaceCache[context].map((namespace) => {
+              return {
+                name: namespace,
+                execute: () => {
+                  setContext(context);
+                  setNamespace(namespace);
+                },
+              };
+            });
           },
-        },
-      ];
+        };
+      });
     },
-  } as Command;
+  };
 }

src/components/RouterViewport.vue

@@ -3,7 +3,7 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 </script>
 <template>
   <ScrollArea
-    class="w-full h-full flex flex-grow border-l border-[#232323] bg-[#0f0f0f]"
+    class="w-full h-full max-h-screen flex flex-grow border-l border-[#232323] bg-[#0f0f0f]"
   >
     <router-view />
     <ScrollBar orientation="horizontal" />

src/components/tables/services/columns.ts

@@ -0,0 +1,40 @@
+import { V1Deployment, V1Service } from "@kubernetes/client-node";
+import { ColumnDef } from "@tanstack/vue-table";
+
+export const columns: ColumnDef<V1Service>[] = [
+  {
+    accessorKey: "metadata.name",
+    header: "Name",
+  },
+  {
+    header: "Type",
+    accessorKey: "spec.type",
+  },
+  {
+    header: "Cluster IP",
+    accessorKey: "spec.clusterIP",
+  },
+  {
+    header: "External IP",
+    accessorFn: (row) => {
+      return row.spec?.externalIPs?.join(", ") || "";
+    },
+  },
+  {
+    header: "Ports",
+    accessorFn: (row) => {
+      return (
+        row.spec?.ports?.map((p) => `${p.name}:${p.port}`).join(", ") || ""
+      );
+    },
+  },
+  {
+    header: "Age",
+    accessorFn: (row) => {
+      const date = new Date(row.metadata?.creationTimestamp || "");
+      return `${Math.floor(
+        (Date.now() - date.getTime()) / 1000 / 60 / 60 / 24
+      )}d`;
+    },
+  },
+];

src/components/ui/scroll-area/ScrollBar.vue

@@ -1,23 +1,30 @@
 <script setup lang="ts">
-import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import {
+  ScrollAreaScrollbar,
+  type ScrollAreaScrollbarProps,
+  ScrollAreaThumb,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
 
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
-  orientation: 'vertical',
-})
+  orientation: "vertical",
+});
 </script>
 
 <template>
   <ScrollAreaScrollbar
     v-bind="props"
     :class="
-      cn('flex touch-none select-none transition-colors',
-         orientation === 'vertical'
-           && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
-         orientation === 'horizontal'
-           && 'h-2.5 border-t border-t-transparent p-[1px]',
-         $attrs.class ?? '')"
+      cn(
+        'flex touch-none select-none transition-colors',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent p-[1px]',
+        orientation === 'horizontal' &&
+          'h-2.5 border-t border-t-transparent p-[1px]',
+        $attrs.class ?? ''
+      )
+    "
   >
-    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-white opacity-25" />
   </ScrollAreaScrollbar>
 </template>

src/composables/refresher.ts

@@ -32,4 +32,6 @@ export function useDataRefresher(
       method(false); // Refresh on dependency change
     });
   });
+
+  return { startRefreshing, stopRefreshing };
 }

src/providers/KubeContextProvider.ts

@@ -35,9 +35,9 @@ export default {
     provide(KubeContextSetContextKey, setContext);
     provide(KubeContextSetNamespaceKey, setNamespace);
 
-    // Kubernetes.getCurrentContext().then((context) => {
-    //   setContext(context);
-    // });
+    Kubernetes.getCurrentContext().then((context) => {
+      setContext(context);
+    });
   },
   render(): any {
     return this.$slots.default();

src/router.ts

@@ -11,6 +11,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "Deployments",
     component: () => import("./views/Deployments.vue"),
   },
+  {
+    path: "/services",
+    name: "Services",
+    component: () => import("./views/Services.vue"),
+  },
 ];
 
 const router = createRouter({

src/services/Kubernetes.ts

@@ -1,4 +1,9 @@
-import { V1Deployment, V1Namespace, V1Pod } from "@kubernetes/client-node";
+import {
+  V1Deployment,
+  V1Namespace,
+  V1Pod,
+  V1Service,
+} from "@kubernetes/client-node";
 import { invoke } from "@tauri-apps/api/tauri";
 
 export interface KubernetesError {
@@ -56,4 +61,14 @@ export class Kubernetes {
       namespace: namespace,
     });
   }
+
+  static async getServices(
+    context: string,
+    namespace: string
+  ): Promise<V1Service[]> {
+    return invoke("list_services", {
+      context: context,
+      namespace: namespace,
+    });
+  }
 }

src/views/Deployments.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { injectStrict } from "@/lib/utils";
-import { V1Deployment, V1Pod } from "@kubernetes/client-node";
+import { V1Deployment } from "@kubernetes/client-node";
 import { Kubernetes } from "@/services/Kubernetes";
-import { ref } from "vue";
-import { useToast } from "@/components/ui/toast";
+import { ref, h } from "vue";
+import { useToast, ToastAction } from "@/components/ui/toast";
 
 import { KubeContextStateKey } from "@/providers/KubeContextProvider";
 const { context, namespace } = injectStrict(KubeContextStateKey);
@@ -32,11 +32,21 @@ async function getDeployments(refresh: boolean = false) {
         title: "An error occured",
         description: error.message,
         variant: "destructive",
+        action: h(
+          ToastAction,
+          { altText: "Retry", onClick: () => startRefreshing() },
+          { default: () => "Retry" }
+        ),
       });
+      stopRefreshing();
     });
 }
 
-useDataRefresher(getDeployments, 1000, [context, namespace]);
+const { startRefreshing, stopRefreshing } = useDataRefresher(
+  getDeployments,
+  1000,
+  [context, namespace]
+);
 </script>
 <template>
   <DataTable :data="deployments" :columns="columns" />