From f7b58c0ad49a76dedb169289785e5e55461fa143 Mon Sep 17 00:00:00 2001
From: Jeroen Nijhuis <jeroen.nijhuis@justeattakeaway.com>
Date: Thu, 21 Dec 2023 11:59:34 +0100
Subject: [PATCH] a lot of stuff

---
 .github/renovate.json                       |  2 +-
 .github/workflows/release.yml               |  9 ++--
 .github/workflows/test-build.yml            | 11 ++--
 .github/workflows/test.yml                  | 11 ++--
 src-tauri/src/main.rs                       | 23 +++++---
 src/command-palette/SwitchContext.ts        | 58 ++++++++++++---------
 src/components/RouterViewport.vue           |  2 +-
 src/components/tables/services/columns.ts   | 40 ++++++++++++++
 src/components/ui/scroll-area/ScrollBar.vue | 29 +++++++----
 src/composables/refresher.ts                |  2 +
 src/providers/KubeContextProvider.ts        |  6 +--
 src/router.ts                               |  5 ++
 src/services/Kubernetes.ts                  | 17 +++++-
 src/views/Deployments.vue                   | 18 +++++--
 src/views/Pods.vue                          | 16 ++++--
 src/views/Services.vue                      | 53 +++++++++++++++++++
 16 files changed, 230 insertions(+), 72 deletions(-)
 create mode 100644 src/components/tables/services/columns.ts
 create mode 100644 src/views/Services.vue

diff --git a/.github/renovate.json b/.github/renovate.json
index 836511b..69eac68 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -30,6 +30,6 @@
       "prCreation": "not-pending"
     }
   ],
-  "timezone": "Europe/Helsinki",
+  "timezone": "Europe/Amsterdam",
   "dependencyDashboard": true
 }
\ No newline at end of file
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index f8a9f12..1b1fef8 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -20,10 +20,6 @@ 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
@@ -31,6 +27,9 @@ jobs:
           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
diff --git a/.github/workflows/test-build.yml b/.github/workflows/test-build.yml
index 1808eb7..bbf992c 100644
--- a/.github/workflows/test-build.yml
+++ b/.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
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index bd72a93..ca05125 100644
--- a/.github/workflows/test.yml
+++ b/.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
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 29cc08b..1ae6160 100644
--- a/src-tauri/src/main.rs
+++ b/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
diff --git a/src/command-palette/SwitchContext.ts b/src/command-palette/SwitchContext.ts
index f881807..d9d5877 100644
--- a/src/command-palette/SwitchContext.ts
+++ b/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;
+  };
 }
diff --git a/src/components/RouterViewport.vue b/src/components/RouterViewport.vue
index 88e0e6f..af5119e 100644
--- a/src/components/RouterViewport.vue
+++ b/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" />
diff --git a/src/components/tables/services/columns.ts b/src/components/tables/services/columns.ts
new file mode 100644
index 0000000..a5cfc0b
--- /dev/null
+++ b/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`;
+    },
+  },
+];
diff --git a/src/components/ui/scroll-area/ScrollBar.vue b/src/components/ui/scroll-area/ScrollBar.vue
index 9ba2cb0..b6f4987 100644
--- a/src/components/ui/scroll-area/ScrollBar.vue
+++ b/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>
diff --git a/src/composables/refresher.ts b/src/composables/refresher.ts
index 34fae09..ee9d620 100644
--- a/src/composables/refresher.ts
+++ b/src/composables/refresher.ts
@@ -32,4 +32,6 @@ export function useDataRefresher(
       method(false); // Refresh on dependency change
     });
   });
+
+  return { startRefreshing, stopRefreshing };
 }
diff --git a/src/providers/KubeContextProvider.ts b/src/providers/KubeContextProvider.ts
index 6fa3db3..3d54225 100644
--- a/src/providers/KubeContextProvider.ts
+++ b/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();
diff --git a/src/router.ts b/src/router.ts
index 75381b8..8d07b11 100644
--- a/src/router.ts
+++ b/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({
diff --git a/src/services/Kubernetes.ts b/src/services/Kubernetes.ts
index dfaf47b..14bfd26 100644
--- a/src/services/Kubernetes.ts
+++ b/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,
+    });
+  }
 }
diff --git a/src/views/Deployments.vue b/src/views/Deployments.vue
index cc27c04..dcd9f62 100644
--- a/src/views/Deployments.vue
+++ b/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" />
diff --git a/src/views/Pods.vue b/src/views/Pods.vue
index 843d4f1..547ad2f 100644
--- a/src/views/Pods.vue
+++ b/src/views/Pods.vue
@@ -2,8 +2,8 @@
 import { injectStrict } from "@/lib/utils";
 import { V1Pod } 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,12 +32,22 @@ async function getPods(refresh: boolean = false) {
         title: "An error occured",
         description: error.message,
         variant: "destructive",
+        action: h(
+          ToastAction,
+          { altText: "Retry", onClick: () => startRefreshing() },
+          { default: () => "Retry" }
+        ),
       });
+      stopRefreshing();
     });
 }
 
-useDataRefresher(getPods, 1000, [context, namespace]);
+const { startRefreshing, stopRefreshing } = useDataRefresher(getPods, 1000, [
+  context,
+  namespace,
+]);
 </script>
+x
 <template>
   <DataTable :data="pods" :columns="columns" />
 </template>
diff --git a/src/views/Services.vue b/src/views/Services.vue
new file mode 100644
index 0000000..8a72af5
--- /dev/null
+++ b/src/views/Services.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { injectStrict } from "@/lib/utils";
+import { V1Service } from "@kubernetes/client-node";
+import { Kubernetes } from "@/services/Kubernetes";
+import { ref, h } from "vue";
+import { useToast, ToastAction } from "@/components/ui/toast";
+
+import { KubeContextStateKey } from "@/providers/KubeContextProvider";
+const { context, namespace } = injectStrict(KubeContextStateKey);
+
+import DataTable from "@/components/ui/DataTable.vue";
+import { columns } from "@/components/tables/services/columns";
+import { useDataRefresher } from "@/composables/refresher";
+
+const { toast } = useToast();
+const services = ref<V1Service[]>([]);
+
+async function getServices(refresh: boolean = false) {
+  if (!refresh) {
+    services.value = [];
+  }
+
+  Kubernetes.getServices(
+    context.value,
+    namespace.value === "all" ? "" : namespace.value
+  )
+    .then((results: V1Service[]) => {
+      services.value = results;
+    })
+    .catch((error) => {
+      toast({
+        title: "An error occured",
+        description: error.message,
+        variant: "destructive",
+        action: h(
+          ToastAction,
+          { altText: "Retry", onClick: () => startRefreshing() },
+          { default: () => "Retry" }
+        ),
+      });
+      stopRefreshing();
+    });
+}
+
+const { startRefreshing, stopRefreshing } = useDataRefresher(
+  getServices,
+  1000,
+  [context, namespace]
+);
+</script>
+<template>
+  <DataTable :data="services" :columns="columns" />
+</template>