88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<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.25rem 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> |