frontend/components/deployment/view/DeploymentLogPopup.vue

53 lines
2.3 KiB
Vue

<template>
<PopupTemplate :heading="StringUtils.format('Logs: %s/%s', deployment.metadata.namespace, deployment.metadata.name)">
<div class="log-container">
<div class="spaced-center">
<div class="left-center">
<UiButton @click="() => config.timestamps = true" v-if="!config.timestamps"><span>Show Timestamp</span> <UiIcon>visibility</UiIcon></UiButton>
<UiButton @click="() => config.timestamps = false" v-if="config.timestamps"><span>Hide Timestamp</span> <UiIcon>visibility_off</UiIcon></UiButton>
<UiButton @click="() => config.podNames = true" v-if="!config.podNames"><span>Show Pod Name</span> <UiIcon>visibility</UiIcon></UiButton>
<UiButton @click="() => config.podNames = false" v-if="config.podNames"><span>Hide Pod Name</span> <UiIcon>visibility_off</UiIcon></UiButton>
<UiButton @click="() => config.lineWrap = true" v-if="!config.lineWrap"><span>Wrap Line</span> <UiIcon>format_text_wrap</UiIcon></UiButton>
<UiButton @click="() => config.lineWrap = false" v-if="config.lineWrap"><span>Unwrap Line</span> <UiIcon>format_text_overflow</UiIcon></UiButton>
</div>
</div>
<Console :logs="logs" :config="config"></Console>
</div>
</PopupTemplate>
</template>
<script setup lang="ts">
import { LogRepo } from '~/classes/LogRepo';
import { Pod } from '~/classes/Pod';
import { Log } from '~/requests/logs';
import Console from "~/components/inspect/console/Console.vue";
import type {Deployment} from "~/classes/Deployment";
import UiIcon from "~/components/ui/UiIcon.vue";
import { ConsoleConfig } from '~/components/inspect/console/ConsoleConfig'
import {usePopup} from "~/components/popup/Popup";
const config = ref(ConsoleConfig.default(true, true, false));
const logs: Ref<Log[]> = ref([]);
const deployment = usePopup().data() as Deployment;
const logRepo = new LogRepo();
onMounted(() => {
logRepo.listen("deployments", deployment.metadata.namespace, deployment.metadata.name,(_logs: Log[]) => {
logs.value.push(..._logs);
});
});
onUnmounted(() => {
logRepo.clear();
});
</script>
<style scoped>
.log-container {
height: 100%;
display: grid;
grid-template-rows: auto 1fr;
gap: 0.5rem;
}
</style>