✨Add dynamic logs and pods

app.vue

@@ -12,7 +12,9 @@ useRouter().beforeEach((route: RouteLocation) => {
   guard(route.fullPath);
 });
 
-guard(useRoute().fullPath);
+onMounted(() => {
+  guard(useRoute().fullPath);
+})
 
 function guard(route: string)
 {

assets/base-style.css

@@ -241,4 +241,8 @@
 
 .width-6rem {
     width: 6rem;
+}
+
+.nowrap {
+    white-space: nowrap
 }

classes/ConfigMap.ts

@@ -0,0 +1,9 @@
+import type { Metadata } from "./Metadata";
+
+export class ConfigMap
+{
+    constructor (
+        public metadata: Metadata,
+        public data: Record<string, string>
+    ) {}
+}

classes/LogRepo.ts

@@ -0,0 +1,35 @@
+import type { Log } from "~/requests/logs";
+
+export class LogRepo
+{
+    websocket?: WebSocket = undefined;
+
+    listen(namespace: string, name: string, onReceive: (logs: Log[]) => void)
+    {
+        const websocket = new WebSocket(StringUtils.format("ws://%s/api/logs/%s/%s", useRuntimeConfig().public.apiWsBase, namespace, name));
+        websocket.addEventListener('open', () => {
+            console.info("Opened Websocket.");
+        })
+        websocket.addEventListener("message", (event) => {
+            console.log(event.data);
+            onReceive(JSON.parse(event.data) as Log[]);
+        });
+        const interval = setInterval(() => {
+            console.info("[PING]");
+            websocket.send('[PING]');
+        }, 5000);
+        websocket.addEventListener("close", () => {
+            console.info("Closing websocket.");
+            clearTimeout(interval);
+        });
+        this.websocket = websocket;
+    }
+
+    clear()
+    {
+        if (this.websocket)
+        {
+            this.websocket.close();
+        }
+    }
+}

classes/Metadata.ts

@@ -5,6 +5,8 @@ export class Metadata
 
     constructor (
         public namespace: string,
-        public name: string
+        public name: string,
+        public labels?: Record<string, string>,
+        public annotations?: Record<string, string>
     ) { }
 }

classes/Node.ts

@@ -1,25 +1,18 @@
 import type { Metadata } from "./Metadata";
+import type { HasMetadata } from "./ResourceRepo";
 
-export class NodeStats 
+export class Node implements HasMetadata
 {
     constructor (
-        public node: Node,
-        public runningPods: number
+        public metadata: Metadata,
+        public runningPods: number,
+        public status: Status
     ) { }
 
     relativeCpuUsage?: number;
     relativeMemory?: number;
 }
 
-export class Node 
-{
-    constructor (
-        public metadata: Metadata
-    ) { }
-    
-    status?: Status;
-}
-
 class Status
 {
     conditions?: Condition[]

classes/Pod.ts

@@ -1,19 +1,24 @@
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import type { Metadata } from "./Metadata";
+import type { HasMetadata } from "./ResourceRepo";
 
-export class Pod 
+export class Pod implements HasMetadata
 {
     status?: Status
-    spec?: Spec
 
     constructor (
-        public metadata: Metadata
+        public metadata: Metadata,
+        public spec: Spec
     ) { }
 }
 
 class Spec {
     nodeName?: string;
+
+    constructor (
+        public containers: Container[]
+    ) { }
 }
 
 class Status
@@ -21,6 +26,11 @@ class Status
     phase?: PodStatus
 }
 
+class Container 
+{
+
+}
+
 enum PodStatus 
 {
     RUNNING = "Running",
@@ -38,7 +48,7 @@ export function calcAge(datetime: string | undefined)
     dayjs.extend(advancedFormat);
     if(datetime != null)
     {
-        const today = Number(dayjs().format('X'));
+        const today = Number(dayjs(useSeconds().value).format('X'));
         const createdAt = Number(dayjs(datetime).format('X'));
         const dif = today - createdAt;
         if(dif < 60) 

classes/ResourceRepo.ts

@@ -1,15 +1,102 @@
 import axios from "axios";
+import type { Metadata } from "./Metadata";
 
-export class ResourceRepo<T>
+export interface HasMetadata {
+  metadata: Metadata
+}
+
+export class ResourceEvent<T extends HasMetadata>
 {
-    private resources: Ref<T[] | undefined> = ref(undefined);
-    private interval: NodeJS.Timeout | undefined = undefined;
+    constructor (
+        public type: string,
+        public resources: T[]
+    ) {}
+}
 
-    static init<T>()
+export class ResourceRepo<T extends HasMetadata>
+{
+    private resources: Ref<T[]> = ref([]);
+    private interval: NodeJS.Timeout | undefined = undefined;
+    private websocket: WebSocket | undefined = undefined;
+
+    static init<T extends HasMetadata>()
     {
         return new ResourceRepo<T>();
     }
 
+    listen(resource: string)
+    {
+        const websocket = new WebSocket(StringUtils.format("%s/api/watch/%s/%s", useRuntimeConfig().public.apiWsBase, resource, this.getNamespace()));
+        websocket.addEventListener('open', () => {
+            console.info("Opened Websocket.");
+        })
+        websocket.addEventListener("message", (event) => {
+            const data = JSON.parse(event.data) as ResourceEvent<T>;
+            console.info(StringUtils.format("[%s] Resource", data.type));
+            switch (data.type)
+            {
+                case "INIT": 
+                {
+                    this.add(data.resources);
+                    break;
+                }
+                case "ADDED":
+                {
+                    this.add(data.resources);
+                    break;
+                }
+                case "MODIFIED":
+                {
+                    this.update(data.resources);
+                    break;
+                }
+                case "DELETED":
+                {
+                    this.delete(data.resources);
+                    break;
+                }
+            }
+        });
+        const interval = setInterval(() => {
+            console.info("[PING]");
+            websocket.send('[PING]');
+        }, 5000);
+        websocket.addEventListener("close", () => {
+            console.info("Closing websocket.");
+            clearTimeout(interval);
+        });
+        this.websocket = websocket;
+    }
+
+    private add(resources: T[])
+    {
+        this.resources.value.push(...resources);
+    }
+
+    private delete(resources: T[])
+    {
+        for (const resource of resources)
+        {
+            const index = this.resources.value.findIndex(item => item.metadata.uid === resource.metadata.uid);
+            if (index != null)
+            {
+                this.resources.value.splice(index, 1);
+            }
+        }
+    }
+
+    private update(resources: T[])
+    {
+        for (const resource of resources)
+        {
+            const index = this.resources.value.findIndex(item => item.metadata.uid === resource.metadata.uid);
+            if (index != null)
+            {
+                this.resources.value[index] = resource;
+            }
+        }
+    }
+
     load(resourceType: string)
     {
         this.refresh(resourceType);
@@ -19,37 +106,35 @@ export class ResourceRepo<T>
     clear() 
     {
         clearTimeout(this.interval);
+        if (this.websocket != null)
+        {
+            this.websocket.close();
+        }
     }
 
     get()
     {
         return computed(() => {
-            return this.resources.value;
+            return this.resources.value.toSorted((a, b) => a.metadata.name.localeCompare(b.metadata.name));
         })
     }
 
     private refresh(resourceType: string)
     {
         const namespace = this.getNamespace();
-        let url = useRuntimeConfig().public.apiBase + '/resources/' + resourceType
+        let url = StringUtils.format("%s/resources/%s", useRuntimeConfig().public.apiBase, resourceType);
         if (namespace)
         {
-            url = url + "/" + namespace;
+            url = StringUtils.format("%s/%s", url, namespace);
         }
         axios.get<T[]>(url)
         .then((response) => {
-            this.resources.value = undefined;
             this.resources.value = response.data;
         });
     }
 
     private getNamespace()
     {
-        const namespace = useRoute().params.namespace as string;
-        if (namespace !== "_all")
-        {
-            return namespace as string;
-        }
-        return undefined;
+        return useRoute().params.namespace as string;
     }
 }

classes/Secret.ts

@@ -1,6 +1,7 @@
-import type { Metadata } from "./Metadata";
+import { Metadata } from "./Metadata";
+import type { HasMetadata } from "./ResourceRepo";
 
-export class Secret
+export class Secret implements HasMetadata
 {
     constructor (
         public metadata: Metadata

classes/Service.ts

@@ -1,9 +1,13 @@
 import type { Metadata } from "./Metadata";
+import type { HasMetadata } from "./ResourceRepo";
 
-export class Service 
+export class Service implements HasMetadata
 {
-    metadata?: Metadata;
     spec?: ServiceSpec;
+
+    constructor (
+        public metadata: Metadata
+    ) {}
 }
 
 export class ServiceSpec 

components/ConfigMapComponent.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <p class="grid-element">{{ configMap.metadata.name }}</p>
+        <p class="grid-element">{{ configMap.metadata.namespace }}</p>
+        <p class="grid-element">{{ Object.keys(configMap.data).length }}</p>
+        <div class="grid-element">
+            <ActionButton v-if="hasAnyRole(getUser(), ['admin', 'maintainer'])">delete</ActionButton>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ConfigMap } from '~/classes/ConfigMap';
+import { hasAnyRole } from '~/classes/User';
+
+defineProps<{
+    configMap: ConfigMap
+}>();
+</script>

components/InspectSidebar.vue

@@ -1,19 +1,24 @@
 <template>
     <SidebarTemplate>
-        <div class="content-l">
-            <h2>Kubooboo</h2>
-            <div class="nav">
-                <NuxtLink class="resources" v-for="[key, value] of resources" :to="getRoute(key, namespace)" :class="{ 'router-link-active': useRoute().params.resource === key }">{{ value }}</NuxtLink>
+            <div class="content-l" style="display: grid; grid-template-rows: auto 1fr; height: 100%;">
+                <h2>Kubooboo</h2>
+                <ScrollComponent>
+                    <div class="content-l">
+                        <div class="nav">
+                            <NuxtLink class="resources" v-for="[key, value] of resources" :to="getRoute(key, namespace)" :class="{ 'router-link-active': useRoute().params.resource === key }">{{ value }}</NuxtLink>
+                        </div>
+                        <div class="divider" :class="{ hide: !inNamespaceScopedResource }"></div>
+                        <div class="nav" :class="{ hide: !inNamespaceScopedResource }">
+                            <NuxtLink v-for="[key, value] in namespaces" class="namespace" :to="getRoute(resource, key)">{{ value }}</NuxtLink>
+                        </div>
+                    </div>
+                </ScrollComponent>
             </div>
-            <div class="divider" :class="{ hide: !inNamespaceScopedResource }"></div>
-            <div class="nav" :class="{ hide: !inNamespaceScopedResource }">
-                <NuxtLink v-for="[key, value] in namespaces" class="namespace" :to="getRoute(resource, key)">{{ value }}</NuxtLink>
-            </div>
-        </div>
+        
         <div class="left-center" v-if="user" @click="() => accountPopup.open()">
-            <UiIcon>account_circle</UiIcon>
-            <p>{{ user.username }}</p>
-        </div>
+                <UiIcon>account_circle</UiIcon>
+                <p>{{ user.username }}</p>
+            </div>
     </SidebarTemplate>
 </template>
 
@@ -22,7 +27,7 @@ import SidebarTemplate from './SidebarTemplate.vue';
 
 import { StringUtils, useNamespaceStore } from '#imports';
 
-const resources = new Map<string, string>([["nodes", "Nodes"], ["ingresses", "Ingresses"], ["services", "Services"], ["deployments", "Deployments"], ["stateful-sets", "Stateful Sets"], ["pods", "Pods"], ["secrets", "Secrets"], ["custom-resource-definitions", "CDRs"]]);
+const resources = new Map<string, string>([["nodes", "Nodes"], ["ingresses", "Ingresses"], ["services", "Services"], ["deployments", "Deployments"], ["stateful-sets", "Stateful Sets"], ["pods", "Pods"], ["secrets", "Secrets"], ["config-maps", "Config Maps"], ["custom-resource-definitions", "CDRs"]]);
 
 const namespaceStore = useNamespaceStore();
 

components/LogPopup.vue

@@ -8,18 +8,20 @@
         <div v-if="logs == null" class="center" style="height: 100%; width: 100%">
             <UiLoadingIcon size="2rem"></UiLoadingIcon>
         </div>
+        <p>{{ logs }}</p>
     </PopupTemplate>
 </template>
 
 <script setup lang="ts">
 import dayjs from 'dayjs';
+import { LogRepo } from '~/classes/LogRepo';
 import type { Pod } from '~/classes/Pod';
 import { getLogs } from '~/requests/logs';
 import { Log } from '~/requests/logs';
 
 const base = ref();
 
-const logs: Ref<Log[] | undefined> = ref(undefined);
+const logs: Ref<Log[]> = ref([]);
 
 const props = defineProps<{
     pod: Pod
@@ -31,9 +33,11 @@ const emits = defineEmits<{
 
 const scrollComponent = ref();
 
+const logRepo = new LogRepo();
 onMounted(() => {
-    getLogs(props.pod.metadata.uid, (_logs: Log[]) => {
-        logs.value = _logs;
+    logRepo.listen( props.pod.metadata.namespace, props.pod.metadata.name,(_logs: Log[]) => {
+        logs.value.push(..._logs);
+        scrollComponent.value.scrollToBottom();
     });
 });
 

components/NodeComponent.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
-        <p class="grid-element" v-if="nodeStats.node && nodeStats.node.metadata">{{ nodeStats.node.metadata.name }}</p>
+        <p class="grid-element" v-if="nodeStats && nodeStats.metadata">{{ nodeStats.metadata.name }}</p>
         <div class="grid-element">
-            <p>{{ calcAge(nodeStats.node?.metadata?.creationTimestamp) }}</p>
+            <p>{{ calcAge(nodeStats.metadata?.creationTimestamp) }}</p>
         </div>
         <p class="grid-element">{{ nodeStats.runningPods }}</p>
         <div class="grid-element">
@@ -18,17 +18,17 @@
 </template>
 
 <script setup lang="ts">
-import type { NodeStats } from '~/classes/Node';
+import type { Node } from '~/classes/Node';
 import NodeReadyComponent from './NodeReadyComponent.vue';
 import { calcAge } from '~/classes/Pod';
 
 defineProps<{
-    nodeStats: NodeStats;
+    nodeStats: Node;
 }>();
 
-function isReady(nodeStats: NodeStats): boolean | undefined
+function isReady(nodeStats: Node): boolean | undefined
 {
-    const conditions = nodeStats.node?.status?.conditions;
+    const conditions = nodeStats.status.conditions;
     if(conditions != undefined)
     {
         for(const condition of conditions)

components/ScrollComponent.vue

@@ -11,13 +11,13 @@ const id = crypto.randomUUID();
 
 function scrollToBottom()
 {
-    setTimeout(() => {
+    nextTick(() => {
         const element = document.getElementById(id);
         if(element)
         {
             element.scrollTo({top: element.scrollHeight, behavior: 'instant'});
         }
-    }, 25)
+    })
 }
 
 defineExpose({
@@ -27,15 +27,23 @@ defineExpose({
 
 <style scoped>
 .scroll-component {
+    width: 100%;
     height: 100%;
     position: relative;
     overflow: scroll;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
+
 .inner-scroll-component {
-    width: 100%;
     position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
     min-height: 100%;
     display: grid;
+    grid-template-columns: 1fr;
     grid-template-rows: 1fr;
+    width: 100%;
 }
 </style>

components/SettingsSidebar.vue

@@ -0,0 +1,17 @@
+<template>
+  <SidebarTemplate>
+    <div class="nav">
+        <NuxtLink class="namespace" to="/account/settings">Account</NuxtLink>
+        <NuxtLink class="namespace" to="/account/users">Users</NuxtLink>
+        <NuxtLink class="namespace" to="/account/password">Password</NuxtLink>
+    </div>
+  </SidebarTemplate>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

components/SidebarTemplate.vue

@@ -22,6 +22,7 @@
     padding: 0.35rem 0.5rem;
     border-radius: 0.25rem;
     cursor: pointer;
+     white-space: nowrap;
 }
 .router-link-active {
     background-color: var(--primary-color);
@@ -31,7 +32,7 @@
     height: 1px;
     background-color: rgb(36, 36, 36);
 }
-.nav > * {
+.nav * {
     display: block;
     text-decoration: none;
 }

components/inspect/resources/ConfigMapList.vue

@@ -0,0 +1,28 @@
+<template>
+    <TableComponent :loading="configMaps == null">
+        <div class="resource-container config-map-container">
+            <div class="header">
+                <p>Name</p>
+                <p>Namespace</p>
+                <p>Entries</p>
+                <p>Aktionen</p>
+            </div>
+            <ConfigMapComponent v-for="configMap, index in configMaps" :config-map="configMap" class="resource" :class="{ even: index % 2 }"></ConfigMapComponent>
+        </div>
+    </TableComponent>
+</template>
+
+<script setup lang="ts">
+import type { ConfigMap } from '~/classes/ConfigMap';
+import { ResourceRepo } from '~/classes/ResourceRepo';
+
+const configMaps = ResourceRepo.init<ConfigMap>().load('config-maps').get();
+
+</script>
+
+<style scoped>
+.config-map-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr auto;
+}
+</style>

components/inspect/resources/NodeList.vue

@@ -15,11 +15,11 @@
 </template>
 
 <script setup lang="ts">
-import type { NodeStats } from '~/classes/Node';
+import type { Node } from '~/classes/Node';
 import { ResourceRepo } from '~/classes/ResourceRepo';
 import NodeComponent from '~/components/NodeComponent.vue';
 
-const node = ResourceRepo.init<NodeStats>().load('nodes').get();
+const node = ResourceRepo.init<Node>().load('nodes').get();
 </script>
 
 <style>

components/inspect/resources/PodList.vue

@@ -1,11 +1,12 @@
 <template>
-    <TableComponent :loading="pods == null">
+    <TableComponent :loading="pods == null" v-for="pods in [repo.get().value]">
         <div class="resource-container pod-container">
             <div class="header">
                 <p>Pod</p>
                 <p>Namespace</p>
                 <p>Alter</p>
                 <p>Node</p>
+                <p>Containers</p>
                 <p>Status</p>
                 <p>Aktionen</p>
             </div>
@@ -19,5 +20,18 @@ import type { Pod } from '~/classes/Pod';
 import { ResourceRepo } from '~/classes/ResourceRepo';
 import PodComponent from '~/components/pod/PodComponent.vue';
 
-const pods = ResourceRepo.init<Pod>().load('pods').get();
-</script>
+const repo = ResourceRepo.init<Pod>();
+onMounted(() => {
+    repo.listen("pods");
+});
+onUnmounted(() => {
+    repo.clear();
+});
+</script>
+
+<style scoped>
+.pod-container {
+    display: grid;
+    grid-template-columns: auto 1fr 1fr 1fr 1fr auto auto;
+}
+</style>

components/pod/PodComponent.vue

@@ -2,8 +2,9 @@
     <div>
         <p class="grid-element pointer" v-if="pod.metadata" @click="() => showViewPopup = true">{{ pod.metadata.name }}</p>
         <p class="grid-element" v-if="pod.metadata">{{ pod.metadata.namespace }}</p>
-        <p class="grid-element" v-if="pod.metadata">{{ calcAge(pod.metadata.creationTimestamp) }}</p>
+        <p class="grid-element no-wrap" v-if="pod.metadata">{{ calcAge(pod.metadata.creationTimestamp) }}</p>
         <p class="grid-element" v-if="pod.spec">{{ pod.spec.nodeName }}</p>
+        <p class="grid-element">{{ pod.spec.containers.length }}</p>
         <div class="grid-element">
             <PhaseComponent v-if="pod.status" :phase="pod.status.phase"></PhaseComponent>
         </div>
@@ -24,7 +25,7 @@ import { calcAge } from '~/classes/Pod';
 import { hasAnyRole } from '~/classes/User';
 import PodDeletePopup from './view/PodDeletePopup.vue';
 
-defineProps<{
+const props = defineProps<{
     pod: Pod
 }>();
 

components/pod/view/PodDeletePopup.vue

@@ -12,20 +12,32 @@
             </div>
         </div>
         <div class="center">
-            <UiButton class="width-6rem hollow">Cancel</UiButton>
-            <UiButton class="width-6rem" icon="delete" reverse>Delete</UiButton>
+            <UiButton :loading="loading" class="width-6rem hollow">Cancel</UiButton>
+            <UiButton :loading="loading" class="width-6rem" icon="delete" reverse :onclick="() => del()">Delete</UiButton>
         </div>
     </div>
   </PopupTemplate>
 </template>
 
 <script setup lang="ts">
+import type { Metadata } from '~/classes/Metadata';
 import { type Pod } from '~/classes/Pod';
+import { deletePod } from '~/requests/pod';
 
-defineProps<{
+const props = defineProps<{
     pod: Pod
 }>();
 
+const loading = ref(false);
+function del()
+{
+    const metadata: Metadata = props.pod.metadata; 
+    loading.value = true;
+    deletePod(metadata.namespace, metadata.name, () => {
+        emits('close');
+    });
+}
+
 const emits = defineEmits<{
     (e: 'close'): void
 }>()

components/pod/view/PodViewPopup.vue

@@ -1,27 +1,49 @@
 <template>
   <PopupTemplate ref="base" :heading="StringUtils.format('%s/%s', pod.metadata.namespace, pod.metadata.name)" @close="emits('close')">
     <div class="col-2 expand">
-        <div class="content-l">
-            <h2>General</h2>
-            <div class="content-m">
-                <h3>Pod</h3>
-                <p class="tile-m">{{ StringUtils.format('%s/%s', pod.metadata.namespace, pod.metadata.name) }}</p>
-            </div>
-            <div class="content-m">
-                <h3>Age</h3>
-                <p class="tile-m">{{ calcAge(pod.metadata.creationTimestamp) }}</p>
-            </div>
-            <div class="content-m">
-                <h3>Status</h3>
-                <div class="left-center">
-                    <PhaseComponent :phase="pod.status?.phase"></PhaseComponent>
+        <ScrollComponent>
+            <div class="content-l">
+                <h2>General</h2>
+                <div class="content-m">
+                    <h3>Pod</h3>
+                    <p class="tile-m" v-if="pod.metadata">{{ StringUtils.format('%s/%s', pod.metadata.namespace, pod.metadata.name) }}</p>
+                </div>
+                <div class="col-2 ">
+                    <div class="content-m">
+                        <h3>Age</h3>
+                        <p class="tile-m" v-if="pod.metadata">{{ calcAge(pod.metadata.creationTimestamp) }}</p>
+                    </div>
+                    <div class="content-m">
+                        <h3>Running On</h3>
+                        <p class="tile-m" v-if="pod.metadata">{{ pod.spec.nodeName }}</p>
+                    </div>
+                </div>
+                <div class="content-m">
+                    <h3>Status</h3>
+                    <div class="left-center">
+                        <PhaseComponent :phase="pod.status?.phase"></PhaseComponent>
+                    </div>
+                </div>
+                <div class="content-m">
+                    <h3>Annotations (<span v-if="pod.metadata.annotations">{{ Object.keys(pod.metadata.annotations).length }}</span><span v-else>0</span>)</h3>
+                    <div class="left-center" v-if="pod.metadata.annotations">
+                        <div class="content-m">
+                            <p class="tile-m" v-for="[key, value] in Object.entries(pod.metadata.annotations)"><span>{{ key }}:</span>&nbsp;<span style="overflow-wrap:anywhere; white-space: normal; width: 100%;">{{ value }}</span></p>
+                        </div>
+                    </div>
+                </div>
+                <div class="content-m">
+                    <h3>Labels (<span v-if="pod.metadata.labels">{{ Object.keys(pod.metadata.labels).length }}</span><span v-else>0</span>)</h3>
+                    <div class="content-m" v-if="pod.metadata.labels">
+                        <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>
-        </div>
+        </ScrollComponent>
         <div class="content-l">
             <h2>Env</h2>
-            <UiInput label="Filter">
-                <input type="text" name="" id="" v-model="filter">
+            <UiInput>
+                <input type="text" name="" id="" v-model="filter" placeholder="Filter...">
             </UiInput>
             <ScrollComponent>
                 <div>

nuxt.config.ts

@@ -1,3 +1,5 @@
+import { StringUtils } from "./utils/StringUtils";
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2025-05-15',
@@ -10,7 +12,8 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     public: {
-      apiBase: process.env.NUXT_PUBLIC_API_BASE
+      apiBase: StringUtils.format("%s://%s", process.env.NUXT_PUBLIC_API_SCHEMA as string, process.env.NUXT_PUBLIC_API_HOST as string),
+      apiWsBase: StringUtils.format("%s://%s", process.env.NUXT_PUBLIC_API_WS_SCHEMA as string, process.env.NUXT_PUBLIC_API_HOST as string)
     }
   },
 

pages/account/inspect.vue

@@ -22,7 +22,7 @@ onMounted(() => {
 <style scoped>
 #app {
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 13rem 1fr;
     min-height: 100%;
     align-items: flex-start;
 }

pages/account/inspect/[resource]/[namespace].vue

@@ -6,17 +6,19 @@
     <DeploymentComponent v-else-if="resource === 'deployments'"></DeploymentComponent>
     <NodeComponent v-else-if="resource === 'nodes'"></NodeComponent>
     <SecretComponent v-else-if="resource === 'secrets'"></SecretComponent>
+    <ConfigMapList v-else-if="resource === 'config-maps'"></ConfigMapList>
     <p v-else>Invalid resource</p>
 </template>
 
 <script setup lang="ts">
-import PodComponent from '~/components/inspect/resources/PodComponent.vue';
-import CustomResourceDefinitionComponent from '~/components/inspect/resources/CustomResourceDefinitionComponent.vue';
-import IngressComponent from '~/components/inspect/resources/IngressComponent.vue';
-import ServiceComponent from '~/components/inspect/resources/ServiceComponent.vue';
-import DeploymentComponent from '~/components/inspect/resources/DeploymentComponent.vue';
-import NodeComponent from '~/components/inspect/resources/NodeComponent.vue';
-import SecretComponent from '~/components/inspect/resources/SecretComponent.vue';
+import PodComponent from '~/components/inspect/resources/PodList.vue';
+import CustomResourceDefinitionComponent from '~/components/inspect/resources/CustomResourceDefinitionList.vue';
+import IngressComponent from '~/components/inspect/resources/IngressList.vue';
+import ServiceComponent from '~/components/inspect/resources/ServiceList.vue';
+import DeploymentComponent from '~/components/inspect/resources/DeploymentList.vue';
+import NodeComponent from '~/components/inspect/resources/NodeList.vue';
+import SecretComponent from '~/components/inspect/resources/SecretList.vue';
+import ConfigMapList from '~/components/inspect/resources/ConfigMapList.vue';
 
 const resource = useRoute().params.resource as string;
 </script>

pages/account/settings.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="settings-page">
+    <SettingsSidebar></SettingsSidebar>
+    <div>
+        <NuxtPage></NuxtPage>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+.settings-page {
+    display: grid;
+    grid-template-columns: auto 1fr;
+}
+</style>

pages/account/settings/password.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

pages/account/settings/users.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

requests/pod.ts

@@ -15,9 +15,9 @@ export function getPods(namespace: string | undefined, onSuccess: (pods: Pod[])
     .catch();
 }
 
-export function deletePod(id: string | undefined, onSuccess: () => void)
+export function deletePod(namespace: string, name: string, onSuccess: () => void)
 {
-    axios.delete(useRuntimeConfig().public.apiBase + '/pods/' + id, {
+    axios.delete(StringUtils.format('%s/pods/%s/%s', useRuntimeConfig().public.apiBase, namespace, name), {
         headers: {
             Authorization: "Bearer " + requireToken()
         }

utils/useSeconds.ts

@@ -0,0 +1,7 @@
+export function useSeconds() {
+    const seconds = ref(new Date());
+    setInterval(() => {
+        seconds.value = new Date();
+    }, 1000)
+    return seconds;
+}