From 9afc5d8eab45a8cf4b5ad1e3b30b0b4adacf7972 Mon Sep 17 00:00:00 2001
From: Andreas Dinauer <andreas.j.dinauer@gmail.com>
Date: Sun, 28 Dec 2025 20:52:14 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20Pods=20for=20Deployments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/base-style.css                         | 10 +++++-
 classes/Pod.ts                                |  5 +++
 .../deployment/view/DeploymentViewPopup.vue   | 36 ++++++++++++++++++-
 components/ui/ContainerPicker.vue             |  2 +-
 stores/Popup.ts                               | 24 +++++++++++++
 5 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 stores/Popup.ts

diff --git a/assets/base-style.css b/assets/base-style.css
index ea74c2f..35259d3 100644
--- a/assets/base-style.css
+++ b/assets/base-style.css
@@ -137,7 +137,7 @@
     border-radius: 0.25rem;
     overflow: hidden;
     width: 100%;
-    border: 1px solid var(--border-color);
+    border: 1px solid #cddaff;
 }
 
 .tile-s {
@@ -199,6 +199,14 @@
     gap: 0;
 }
 
+.gap-m {
+    gap: 0.5rem;
+}
+
+.gap-l {
+    gap: 1rem;
+}
+
 .column {
     flex-direction: column;
 }
diff --git a/classes/Pod.ts b/classes/Pod.ts
index b1c28cf..0ff0fa3 100644
--- a/classes/Pod.ts
+++ b/classes/Pod.ts
@@ -23,6 +23,11 @@ export class Pod implements HasMetadata
             onSuccess(response.data)
         });
     }
+
+    static countRestarts(pod: Pod)
+    {
+        return pod.status.containerStatuses.map(s => s.restartCount).reduce((total, value) => total = total + value)
+    }
 }
 
 class Spec {
diff --git a/components/deployment/view/DeploymentViewPopup.vue b/components/deployment/view/DeploymentViewPopup.vue
index 89c9a3f..b74073f 100644
--- a/components/deployment/view/DeploymentViewPopup.vue
+++ b/components/deployment/view/DeploymentViewPopup.vue
@@ -38,6 +38,31 @@
                     <p class="tile-m" v-for="[key, value] in Object.entries(deployment.metadata.labels)"><span>{{ key }}:</span>&nbsp;<span>{{ value }}</span></p>
                 </div>
             </div>
+            <div class="content-m">
+                <h3>Pods</h3>
+                <div class="col-2">
+                    <div class="tile-m content-s" v-for="pod in pods">
+                        <div class="spaced-center">
+                            <p>{{ pod.metadata.name }}</p>
+                            <PhaseComponent :phase="pod.status.phase"></PhaseComponent>
+                        </div>
+                        <div class="left-center gap-l">
+                            <div>
+                                <p class="grayed-out">Age</p>
+                                <p>{{ calcAge(pod.metadata.creationTimestamp) }}</p>
+                            </div>
+                            <div>
+                                <p class="grayed-out">Restarts</p>
+                                <p>{{ Pod.countRestarts(pod) }}</p>
+                            </div>
+                            <div>
+                                <p class="grayed-out">Runs On</p>
+                                <p>{{ pod.spec.nodeName }}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </PopupTemplate>
 </template>
@@ -45,8 +70,9 @@
 <script setup lang="ts">
 import PopupTemplate from "~/components/popup/PopupTemplate.vue";
 import type { Deployment } from "~/classes/Deployment";
+import {calcAge, Pod} from "~/classes/Pod";
 
-defineProps<{
+const props = defineProps<{
     deployment: Deployment
 }>()
 
@@ -62,6 +88,14 @@ onMounted(() => {
         }
     });
 })
+
+const pods: Ref<Pod[] | undefined> = ref();
+
+onMounted(() => {
+    Pod.getByDeployment(props.deployment.metadata.namespace, props.deployment.metadata.name, (_pods: Pod[]) => {
+        pods.value = _pods;
+    });
+})
 </script>
 
 <style scoped>
diff --git a/components/ui/ContainerPicker.vue b/components/ui/ContainerPicker.vue
index e279a97..e09fcf0 100644
--- a/components/ui/ContainerPicker.vue
+++ b/components/ui/ContainerPicker.vue
@@ -31,7 +31,7 @@ watch(selected, (selection) => {
 <style scoped>
 .container-picker {
     padding: 0.5rem;
-    height: 3rem;
+    height: 3.25rem;
     display: flex;
     align-items: flex-start;
 }
diff --git a/stores/Popup.ts b/stores/Popup.ts
new file mode 100644
index 0000000..68b8c96
--- /dev/null
+++ b/stores/Popup.ts
@@ -0,0 +1,24 @@
+import type {DefineComponent} from "vue";
+
+export const usePopup = defineStore('namespace', {
+    state: () => ({
+        component: undefined as DefineComponent | undefined,
+        data: undefined as any,
+        isOpen: false as boolean
+    }),
+    getters: {
+
+    },
+    actions: {
+        open(component: DefineComponent, data?: any) {
+            this.component = component;
+            this.data = data;
+            this.isOpen = true;
+        },
+        close() {
+            this.component = undefined;
+            this.data = undefined;
+            this.isOpen = false;
+        }
+    }
+})
\ No newline at end of file