🚸 Improve Console

assets/style.css

@@ -22,6 +22,22 @@ html * {
     color: black;
 }
 
+html a.external {
+    color: #24a4ff;
+}
+
+html .marked.green {
+    color: #24ff24;
+}
+
+html .marked.yellow {
+    color: #ffa32b;
+}
+
+html .marked.red {
+    color: #ff362f;
+}
+
 html, body, #__nuxt {
     width: 100vw;
     height: 100vh;

classes/LogRepo.ts

@@ -4,14 +4,13 @@ export class LogRepo
 {
     websocket?: WebSocket = undefined;
 
-    listen(namespace: string, name: string, onReceive: (logs: Log[]) => void)
+    listen(resourceType: string, namespace: string, name: string, onReceive: (logs: Log[]) => void)
     {
-        const websocket = new WebSocket(StringUtils.format("%s/logs/%s/%s", ApiConfig.getWsBase(), namespace, name));
+        const websocket = new WebSocket(StringUtils.format("%s/logs/%s/%s/%s", ApiConfig.getWsBase(), resourceType, 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(() => {

classes/Pod.ts

@@ -2,16 +2,27 @@ import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import type { Metadata } from "./Metadata";
 import type { HasMetadata } from "./repo/ResourceRepo";
+import axios from "axios";
 
 export class Pod implements HasMetadata
 {
-
-
     constructor (
         public metadata: Metadata,
         public spec: Spec,
         public status: Status
     ) { }
+
+    static getByDeployment(namespace: string, name: string, onSuccess: (pods: Pod[]) => void)
+    {
+        axios.get<Pod[]>(StringUtils.format('%s/resources/deployments/%s/%s/pods', ApiConfig.getHttpBase(), namespace, name), {
+            headers: {
+                Authorization: "Bearer " + requireToken()
+            }
+        })
+        .then((response) => {
+            onSuccess(response.data)
+        });
+    }
 }
 
 class Spec {

components/LogPopup.vue

@@ -1,88 +0,0 @@
-<template>
-    <PopupTemplate :heading="'Logs: ' + pod.metadata?.namespace + '/' + pod.metadata?.name" ref="base" @close="emits('close')">
-        <ScrollComponent ref="scrollComponent" v-show="logs">
-            <div class="console" v-if="logs">
-                <p class="log" v-for="log, index in logs" :class="{ even: index % 2 }"><span>[{{ dayjs(log.timestamp).format('YYYY-MM-DD HH:mm') }}]</span><span>{{ log.message }}</span></p>
-            </div>
-        </ScrollComponent>
-        <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[]> = ref([]);
-
-const props = defineProps<{
-    pod: Pod
-}>();
-
-const emits = defineEmits<{
-    (e: 'close'): void
-}>()
-
-function close() {
-    
-}
-
-const scrollComponent = ref();
-
-const logRepo = new LogRepo();
-onMounted(() => {
-    logRepo.listen( props.pod.metadata.namespace, props.pod.metadata.name,(_logs: Log[]) => {
-        logs.value.push(..._logs);
-        scrollComponent.value.scrollToBottom();
-    });
-});
-onUnmounted(() => {
-    logRepo.clear();
-});
-
-onMounted(() => {
-    document.addEventListener('keydown', (event) => {
-        if(event.key === 'Escape') 
-        {
-            emits('close');
-        }
-    });
-})
-</script>
-
-<style scoped>
-.log {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    padding: 0.125rem 1rem;
-    gap: 1rem;
-}
-.log * {
-    width: 100%;
-    max-width: 100%;
-    word-break: break-all;
-    white-space: pre-wrap;
-    color: white;
-    line-height: 1.15rem;
-    font-weight: 600;
-}
-
-.console {
-    background-color: black;
-    border-radius: 0.5rem;
-    display: grid;
-    padding: 1rem 0;
-    align-content: start;
-}
-.even {
-    background-color: rgb(24, 24, 24);
-}
-</style>

components/ScrollComponent.vue

@@ -15,6 +15,7 @@ function scrollToBottom()
         const element = document.getElementById(id);
         if(element)
         {
+            console.log("Scroll to bottom");
             element.scrollTo({top: element.scrollHeight, behavior: 'instant'});
         }
     })

components/deployment/DeploymentComponent.vue

@@ -5,11 +5,13 @@
         <p class="grid-element">{{ calcAge(deployment.metadata.creationTimestamp) }}</p>
         <p class="grid-element">{{ deployment.spec.replicas }}</p>
         <div class="grid-element action-buttons">
+            <ActionButton @click="() => showLogsPopup = true">text_snippet</ActionButton>
             <ActionButton>autorenew</ActionButton>
             <ActionButton @click="() => rescaleDeploymentPopup.open()">height</ActionButton>
         </div>
         <RescaleDeploymentPopup ref="rescaleDeploymentPopup" :deployment="deployment"></RescaleDeploymentPopup>
         <DeploymentViewPopup v-if="showViewPopup" :deployment="deployment" @close="() => showViewPopup = false"></DeploymentViewPopup>
+        <DeploymentLogPopup v-if="showLogsPopup" :deployment="deployment" @close="() => showLogsPopup = false"></DeploymentLogPopup>
     </div>
 </template>
 
@@ -18,6 +20,7 @@ import { Deployment } from '~/classes/Deployment';
 import { calcAge } from '~/classes/Pod';
 import RescaleDeploymentPopup from '../RescaleDeploymentPopup.vue';
 import DeploymentViewPopup from "~/components/deployment/view/DeploymentViewPopup.vue";
+import DeploymentLogPopup from "~/components/inspect/logs/DeploymentLogPopup.vue";
 
 defineProps<{
     deployment: Deployment
@@ -25,4 +28,5 @@ defineProps<{
 
 const rescaleDeploymentPopup = ref();
 const showViewPopup = ref(false);
+const showLogsPopup = ref(false);
 </script>

components/pod/PodComponent.vue

@@ -14,7 +14,7 @@
             <ActionButton @click="showDeletePopup = true">delete</ActionButton>
         </div>
         <PodDeletePopup v-if="showDeletePopup" :pod="pod" @close="showDeletePopup = false"></PodDeletePopup>
-        <LogPopup v-if="showLogPopup" :pod="pod" @close="showLogPopup = false"></LogPopup>
+        <PodLogPopup v-if="showLogPopup" :pod="pod" @close="showLogPopup = false"></PodLogPopup>
         <PodViewPopup v-if="showViewPopup" :pod="pod" @close="showViewPopup = false"></PodViewPopup>
     </div>
 </template>
@@ -23,6 +23,7 @@
 import type { Pod } from '~/classes/Pod';
 import { calcAge } from '~/classes/Pod';
 import PodDeletePopup from './view/PodDeletePopup.vue';
+import PodLogPopup from "~/components/inspect/logs/PodLogPopup.vue";
 
 defineProps<{
     pod: Pod

components/ui/PodPicker.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="pod-picker base-shape">
+        <div v-for="pod in pods">
+            <p>{{ pod.metadata.name }}</p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {Pod} from "~/classes/Pod";
+
+defineProps<{
+    pods: Pod[]
+}>()
+</script>
+
+<style scoped>
+.pod-picker {
+    background-color: var(--tile-color);
+}
+</style>

requests/logs.ts

@@ -3,6 +3,7 @@ import axios from "axios";
 export class Log
 {
     constructor (
+        public podName: string,
         public timestamp: string,
         public message: string
     ) {}