From 48780e51642b32eda5a9fc48eba8ed31714f8c27 Mon Sep 17 00:00:00 2001
From: Andreas Dinauer <andreas.j.dinauer@gmail.com>
Date: Sat, 20 Dec 2025 12:05:57 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20per=20container=20env?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 classes/Pod.ts                                |  7 +-
 .../{ => configmap}/ConfigMapComponent.vue    |  6 +-
 .../configmap/view/ConfigmapViewComponent.vue | 23 +++++
 .../DeploymentComponent.vue                   |  0
 .../deployment/view/DeploymentViewPopup.vue   | 13 +++
 .../inspect/resources/ConfigMapList.vue       |  1 +
 .../inspect/resources/DeploymentList.vue      |  4 +-
 .../inspect/resources/StatefulSetList.vue     |  2 +-
 components/pod/env/EnvVar.ts                  |  7 +-
 components/pod/view/EnvironmentViewer.vue     | 86 +++++++++++++++++++
 components/pod/view/PodViewPopup.vue          | 68 ++-------------
 .../StatefulSetComponent.vue                  |  0
 components/ui/ContainerPicker.vue             | 54 ++++++++++++
 components/ui/Prompt.ts                       |  3 +-
 components/ui/UiPompt.vue                     |  9 +-
 pages/account.vue                             |  2 +-
 .../inspect/[resource]/[namespace].vue        |  2 +-
 17 files changed, 212 insertions(+), 75 deletions(-)
 rename components/{ => configmap}/ConfigMapComponent.vue (66%)
 create mode 100644 components/configmap/view/ConfigmapViewComponent.vue
 rename components/{deployments => deployment}/DeploymentComponent.vue (100%)
 create mode 100644 components/deployment/view/DeploymentViewPopup.vue
 create mode 100644 components/pod/view/EnvironmentViewer.vue
 rename components/{deployments => statefulset}/StatefulSetComponent.vue (100%)
 create mode 100644 components/ui/ContainerPicker.vue

diff --git a/classes/Pod.ts b/classes/Pod.ts
index 40d9334..8fa249e 100644
--- a/classes/Pod.ts
+++ b/classes/Pod.ts
@@ -26,9 +26,12 @@ class Status
     phase?: PodStatus
 }
 
-class Container 
+export class Container 
 {
-
+    constructor (
+        public name: string,
+        public image: string
+    ) {}
 }
 
 enum PodStatus 
diff --git a/components/ConfigMapComponent.vue b/components/configmap/ConfigMapComponent.vue
similarity index 66%
rename from components/ConfigMapComponent.vue
rename to components/configmap/ConfigMapComponent.vue
index db0ee63..e8e7ac3 100644
--- a/components/ConfigMapComponent.vue
+++ b/components/configmap/ConfigMapComponent.vue
@@ -1,18 +1,22 @@
 <template>
     <div>
-        <p class="grid-element">{{ configMap.metadata.name }}</p>
+        <p class="grid-element" @click="() => show = true">{{ configMap.metadata.name }}</p>
         <p class="grid-element">{{ configMap.metadata.namespace }}</p>
         <p class="grid-element">{{ calcAge(configMap.metadata.creationTimestamp) }}</p>
         <p class="grid-element"><span v-if="configMap.data">{{ Object.keys(configMap.data).length }}</span><span v-else>-</span></p>
         <div class="grid-element">
             <ActionButton>delete</ActionButton>
         </div>
+        <ConfigmapViewComponent v-if="show" :config-map="configMap" @close="show = false"></ConfigmapViewComponent>
     </div>
 </template>
 
 <script setup lang="ts">
 import type { ConfigMap } from '~/classes/ConfigMap';
 import { calcAge } from '~/classes/Pod';
+import ConfigmapViewComponent from './view/ConfigmapViewComponent.vue';
+
+const show = ref(false);
 
 defineProps<{
     configMap: ConfigMap
diff --git a/components/configmap/view/ConfigmapViewComponent.vue b/components/configmap/view/ConfigmapViewComponent.vue
new file mode 100644
index 0000000..2ff096f
--- /dev/null
+++ b/components/configmap/view/ConfigmapViewComponent.vue
@@ -0,0 +1,23 @@
+<template>
+    <PopupTemplate :heading="StringUtils.format('%s/%s', configMap.metadata.namespace, configMap.metadata.name)" @close="emits('close')">
+        <div class="content-m">
+            <h3>Data</h3>
+            <p class="tile-m" v-if="configMap.data" v-for="[key, value] in Object.entries(configMap.data)">{{ key }}: {{ value }}</p>
+            <UiPompt v-else :prompt="new Prompt('This config map contains no data.', PromptType.INFO)"></UiPompt>
+        </div>
+    </PopupTemplate>
+</template>
+
+<script setup lang="ts">
+import type { ConfigMap } from '~/classes/ConfigMap';
+import PopupTemplate from '~/components/popup/PopupTemplate.vue';
+import { Prompt, PromptType } from '~/components/ui/Prompt';
+
+defineProps<{
+    configMap: ConfigMap
+}>();
+
+const emits = defineEmits<{
+    (e: 'close'): void
+}>()
+</script>
\ No newline at end of file
diff --git a/components/deployments/DeploymentComponent.vue b/components/deployment/DeploymentComponent.vue
similarity index 100%
rename from components/deployments/DeploymentComponent.vue
rename to components/deployment/DeploymentComponent.vue
diff --git a/components/deployment/view/DeploymentViewPopup.vue b/components/deployment/view/DeploymentViewPopup.vue
new file mode 100644
index 0000000..e1978d1
--- /dev/null
+++ b/components/deployment/view/DeploymentViewPopup.vue
@@ -0,0 +1,13 @@
+<template>
+    <PopupTemplate>
+
+    </PopupTemplate>
+</template>
+
+<script setup lang="ts">
+import PopupTemplate from "~/components/popup/PopupTemplate.vue";
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/inspect/resources/ConfigMapList.vue b/components/inspect/resources/ConfigMapList.vue
index 14d2a9c..7cabb8d 100644
--- a/components/inspect/resources/ConfigMapList.vue
+++ b/components/inspect/resources/ConfigMapList.vue
@@ -16,6 +16,7 @@
 <script setup lang="ts">
 import type { ConfigMap } from '~/classes/ConfigMap';
 import { ResourceRepo } from '~/classes/repo/ResourceRepo';
+import ConfigMapComponent from '~/components/configmap/ConfigMapComponent.vue';
 
 const repo = ResourceRepo.init<ConfigMap>();
 onMounted(() => {
diff --git a/components/inspect/resources/DeploymentList.vue b/components/inspect/resources/DeploymentList.vue
index b0ef2ec..619b94c 100644
--- a/components/inspect/resources/DeploymentList.vue
+++ b/components/inspect/resources/DeploymentList.vue
@@ -16,11 +16,11 @@
 <script setup lang="ts">
 import type { Deployment } from '~/classes/Deployment';
 import { ResourceRepo } from '~/classes/repo/ResourceRepo';
-import DeploymentComponent from '~/components/deployments/DeploymentComponent.vue';
+import DeploymentComponent from '~/components/deployment/DeploymentComponent.vue';
 
 const repo = ResourceRepo.init<Deployment>();
 onMounted(() => {
-    repo.listen("deployments");
+    repo.listen("deployment");
 });
 onUnmounted(() => {
     repo.clear();
diff --git a/components/inspect/resources/StatefulSetList.vue b/components/inspect/resources/StatefulSetList.vue
index 356471a..09f27cd 100644
--- a/components/inspect/resources/StatefulSetList.vue
+++ b/components/inspect/resources/StatefulSetList.vue
@@ -15,7 +15,7 @@
 <script setup lang="ts">
 import { ResourceRepo } from '~/classes/repo/ResourceRepo';
 import type { StatefulSet } from '~/classes/StatefulSet';
-import StatefulSetComponent from '~/components/deployments/StatefulSetComponent.vue';
+import StatefulSetComponent from '~/components/statefulset/StatefulSetComponent.vue';
 
 const repo = ResourceRepo.init<StatefulSet>();
 onMounted(() => {
diff --git a/components/pod/env/EnvVar.ts b/components/pod/env/EnvVar.ts
index 950abc6..7570598 100644
--- a/components/pod/env/EnvVar.ts
+++ b/components/pod/env/EnvVar.ts
@@ -7,12 +7,15 @@ export class EnvVar
         public value: string
     ) {}
 
-    static get(namespace: string, name: string, onSuccess: (envVars: EnvVar[]) => void)
+    static get(namespace: string, name: string, containerName: string, onSuccess: (envVars: EnvVar[]) => void, onError: () => void)
     {
-        const url = StringUtils.format('%s/pods/%s/%s/env', ApiConfig.getHttpBase(), namespace, name);
+        const url = StringUtils.format('%s/pods/%s/%s/%s/env', ApiConfig.getHttpBase(), namespace, name, containerName);
         axios.get<EnvVar[]>(url)
         .then((response) => {
             onSuccess(response.data);
         })
+        .catch(() => {
+            onError();
+        });
     }
 }
\ No newline at end of file
diff --git a/components/pod/view/EnvironmentViewer.vue b/components/pod/view/EnvironmentViewer.vue
new file mode 100644
index 0000000..e06afb8
--- /dev/null
+++ b/components/pod/view/EnvironmentViewer.vue
@@ -0,0 +1,86 @@
+<template>
+    <div class="content-l">
+        <h2>Env</h2>
+        <ContainerPicker :containers="pod.spec.containers" v-if="pod.spec.containers.length > 0" @selected="payload => container = payload"></ContainerPicker>
+        <UiInput v-if="error === false">
+            <input type="text" name="" id="" v-model="filter" placeholder="Filter...">
+        </UiInput>
+        <ScrollComponent>
+            <div>
+                <div class="env" v-for="env in filteredEnv" v-if="error === false">
+                    <UiMask class="spaced-center" :prefix="env.key" :enabled="isSensitive(env.key)" :value="env.value"></UiMask>
+                </div>
+                <div v-if="error === true">
+                    <UiPompt :prompt="new Prompt('This pod does not support retrieving environment variables using \'env\'', PromptType.ERROR)"></UiPompt>
+                </div>
+            </div>
+        </ScrollComponent>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Container, Pod } from '~/classes/Pod';
+import { EnvVar } from '../env/EnvVar';
+import ContainerPicker from '~/components/ui/ContainerPicker.vue';
+import UiMask from '~/components/ui/UiMask.vue';
+import { Prompt, PromptType } from '~/components/ui/Prompt';
+import UiPompt from '~/components/ui/UiPompt.vue';
+
+const props = defineProps<{
+    pod: Pod
+}>();
+
+const container: Ref<Container | undefined> = ref(undefined);
+const error = ref(false);
+
+const envs: Ref<EnvVar[] | undefined> = ref(undefined);
+watch(container, (container) => {
+    if (container && container.name)
+    {
+        EnvVar.get(props.pod.metadata.namespace, props.pod.metadata.name, container.name, (_envs: EnvVar[]) => {
+            error.value = false;
+            envs.value = _envs;
+        }, () => {
+            error.value = true;
+        });
+    }
+}, { immediate: true });
+
+const filter = ref("");
+const filteredEnv = computed(() => {
+    if (envs.value)
+    {
+        return envs.value.filter(item => item.key.toLowerCase().includes(filter.value.toLowerCase()));
+    }
+});
+
+function isSensitive(key: string)
+{
+    const markers = ["token", "key", "password", "secret", "private", "credential", "auth", "jwt"];
+    for (const marker of markers)
+    {
+        if (key.toLowerCase().includes(marker) && !key.toLowerCase().includes("public"))
+        {
+            return true;
+        }
+    }
+    return false;
+}
+</script>
+
+<style scoped>
+.env {
+    background-color: var(--shade-light);
+    padding: 0.25rem 0.5rem;
+}
+.env.env:nth-of-type(2n) {
+    background-color: var(--shade-dark);
+}
+.env:hover {
+    background-color: #cecece;
+}
+.env {
+    display: grid;
+    grid-template-columns: auto 1fr;
+}
+</style>
diff --git a/components/pod/view/PodViewPopup.vue b/components/pod/view/PodViewPopup.vue
index 8702ce6..65d51ef 100644
--- a/components/pod/view/PodViewPopup.vue
+++ b/components/pod/view/PodViewPopup.vue
@@ -38,21 +38,13 @@
                         <p class="tile-m" v-for="[key, value] in Object.entries(pod.metadata.labels)"><span>{{ key }}:</span>&nbsp;<span>{{ value }}</span></p>
                     </div>
                 </div>
+                <div class="content-m">
+                    <h3>Containers</h3>
+                    <p class="tile-m" v-for="container in pod.spec.containers">{{ container.name }}: {{ container.image }}</p>
+                </div>
             </div>
         </ScrollComponent>
-        <div class="content-l">
-            <h2>Env</h2>
-            <UiInput>
-                <input type="text" name="" id="" v-model="filter" placeholder="Filter...">
-            </UiInput>
-            <ScrollComponent>
-                <div>
-                    <div class="env" v-for="env in filteredEnv">
-                        <UiMask class="spaced-center" :prefix="env.key" :enabled="isSensitive(env.key)" :value="env.value"></UiMask>
-                    </div>
-                </div>
-            </ScrollComponent>
-        </div>
+        <EnvironmentViewer :pod="pod"></EnvironmentViewer>
     </div>
   </PopupTemplate>
 </template>
@@ -60,9 +52,8 @@
 <script setup lang="ts">
 import { calcAge, type Pod } from '~/classes/Pod';
 import PhaseComponent from '~/components/PhaseComponent.vue';
-import { EnvVar } from '../env/EnvVar';
 import ScrollComponent from '~/components/ScrollComponent.vue';
-import UiMask from '~/components/ui/UiMask.vue';
+import EnvironmentViewer from './EnvironmentViewer.vue';
 
 const base = ref();
 
@@ -74,21 +65,6 @@ const emits = defineEmits<{
     (e: 'close'): void
 }>()
 
-const envs: Ref<EnvVar[] | undefined> = ref(undefined);
-onMounted(() => {
-    EnvVar.get(props.pod.metadata.namespace, props.pod.metadata.name, (_envs: EnvVar[]) => {
-        envs.value = _envs;
-    });
-})
-
-const filter = ref("");
-const filteredEnv = computed(() => {
-    if (envs.value)
-    {
-        return envs.value.filter(item => item.key.toLowerCase().includes(filter.value.toLowerCase()));
-    }
-});
-
 function open() {
     base.value.open();
 }
@@ -103,34 +79,4 @@ onMounted(() => {
 })
 
 defineExpose({ open });
-
-function isSensitive(key: string)
-{
-    const markers = ["token", "key", "password", "secret", "private", "credential", "auth", "jwt"];
-    for (const marker of markers)
-    {
-        if (key.toLowerCase().includes(marker) && !key.toLowerCase().includes("public"))
-        {
-            return true;
-        }
-    }
-    return false;
-}
-</script>
-
-<style scoped>
-.env {
-    background-color: var(--shade-light);
-    padding: 0.25rem 0.5rem;
-}
-.env.env:nth-of-type(2n) {
-    background-color: var(--shade-dark);
-}
-.env:hover {
-    background-color: #cecece;
-}
-.env {
-    display: grid;
-    grid-template-columns: auto 1fr;
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/components/deployments/StatefulSetComponent.vue b/components/statefulset/StatefulSetComponent.vue
similarity index 100%
rename from components/deployments/StatefulSetComponent.vue
rename to components/statefulset/StatefulSetComponent.vue
diff --git a/components/ui/ContainerPicker.vue b/components/ui/ContainerPicker.vue
new file mode 100644
index 0000000..e279a97
--- /dev/null
+++ b/components/ui/ContainerPicker.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="tile container-picker">
+        <div class="inner-container-picker">
+            <div class="container pointer" v-for="container in containers" :class="{ selected: container.name === selected?.name }" @click="() => selected = container">{{ container.name }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Container } from '~/classes/Pod';
+
+const props = defineProps<{
+    containers: Container[]
+}>();
+
+const selected: Ref<Container | undefined> = ref(props.containers.at(0));
+
+const emits = defineEmits<{
+    (e: 'selected', payload: Container): void
+}>();
+
+watch(selected, (selection) => {
+    if (selection != null) 
+    {
+        console.log("X");
+        emits('selected', selection);
+    }
+}, { immediate: true })
+</script>
+
+<style scoped>
+.container-picker {
+    padding: 0.5rem;
+    height: 3rem;
+    display: flex;
+    align-items: flex-start;
+}
+.inner-container-picker {
+    background-color: white;
+    display: flex;
+    justify-content: flex-start;
+    border-radius: 0.25rem;
+    gap: 0.5rem;
+}
+.container {
+    padding: 0.25rem 0.5rem;
+    color: black;
+    border-radius: 0.25rem;
+}
+.container.selected {
+    background-color: var(--primary-color);
+    color: rgb(255, 255, 255);
+}
+</style>
\ No newline at end of file
diff --git a/components/ui/Prompt.ts b/components/ui/Prompt.ts
index 955ad1a..22fc943 100644
--- a/components/ui/Prompt.ts
+++ b/components/ui/Prompt.ts
@@ -9,5 +9,6 @@ export class Prompt
 export enum PromptType 
 {
     ERROR = "error",
-    SUCCESS = "success"
+    SUCCESS = "success",
+    INFO = "info"
 }
\ No newline at end of file
diff --git a/components/ui/UiPompt.vue b/components/ui/UiPompt.vue
index 29fe1ab..57ea074 100644
--- a/components/ui/UiPompt.vue
+++ b/components/ui/UiPompt.vue
@@ -20,15 +20,18 @@ const emit = defineEmits<{
 <style scoped>
 .prompt {
   border-radius: 0.25rem;
-  height: 2.5rem;
+  min-height: 2.5rem;
 }
 .error {
-  background-color: rgb(218, 57, 57);
+  background-color: rgb(255, 74, 74);
 }
 .success {
   background-color: rgb(43, 161, 49);
 }
+.info {
+  background-color: rgb(22, 79, 163);
+}
 .prompt * {
-    color: white;
+    color: rgb(255, 255, 255);
 }
 </style>
\ No newline at end of file
diff --git a/pages/account.vue b/pages/account.vue
index be287c7..78a93a2 100644
--- a/pages/account.vue
+++ b/pages/account.vue
@@ -6,7 +6,7 @@
                 <h3>Kubooboo</h3>
                 <div class="left-center">
                     <NuxtLink to="/account/inspect/nodes/_all">Inspect</NuxtLink>
-                    <NuxtLink to="/account/monitorings/nodes">Monitorings</NuxtLink>
+                    <NuxtLink v-if="false" to="/account/monitorings/nodes">Monitorings</NuxtLink>
                     <NuxtLink to="/account/settings/password">Settings</NuxtLink>
                     <p class="pointer" @click="logout()">Logout</p>
                 </div>
diff --git a/pages/account/inspect/[resource]/[namespace].vue b/pages/account/inspect/[resource]/[namespace].vue
index 0316e92..efec7b9 100644
--- a/pages/account/inspect/[resource]/[namespace].vue
+++ b/pages/account/inspect/[resource]/[namespace].vue
@@ -3,7 +3,7 @@
     <CustomResourceDefinitionComponent v-else-if="resource === 'custom-resource-definitions'"></CustomResourceDefinitionComponent>
     <IngressComponent v-else-if="resource === 'ingresses'"></IngressComponent>
     <ServiceComponent v-else-if="resource === 'services'"></ServiceComponent>
-    <DeploymentComponent v-else-if="resource === 'deployments'"></DeploymentComponent>
+    <DeploymentComponent v-else-if="resource === 'deployment'"></DeploymentComponent>
     <NodeComponent v-else-if="resource === 'nodes'"></NodeComponent>
     <SecretComponent v-else-if="resource === 'secrets'"></SecretComponent>
     <ConfigMapList v-else-if="resource === 'config-maps'"></ConfigMapList>