✨ Add Pods for Deployments

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;
 }

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 {

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>

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;
 }

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;
+        }
+    }
+})