mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-21 13:23:07 +01:00
89 lines
2.6 KiB
Vue
89 lines
2.6 KiB
Vue
<template>
|
|
<div class="flex w-full flex-col">
|
|
<div class="relative flex items-start gap-x-2">
|
|
<ContainerName class="flex-none" :id="logEntry.containerID" v-if="showContainerName" />
|
|
<LogDate :date="logEntry.date" v-if="showTimestamp" />
|
|
<LogLevel class="flex" />
|
|
<div class="whitespace-pre-wrap" :data-event="logEntry.event" v-html="logEntry.message"></div>
|
|
</div>
|
|
<div class="alert alert-info mt-8 w-auto flex-none font-sans text-[1rem] md:mx-auto md:w-1/2" v-if="followEligible">
|
|
<carbon:information class="size-6 shrink-0 stroke-current" />
|
|
<div>
|
|
<h3 class="text-lg font-bold">{{ $t("alert.similar-container-found.title") }}</h3>
|
|
{{ $t("alert.similar-container-found.message", { containerId: nextContainer.id }) }}
|
|
</div>
|
|
<div>
|
|
<TimedButton v-if="automaticRedirect" class="btn-primary btn-sm" @finished="redirectNow()">{{
|
|
$t("button.cancel")
|
|
}}</TimedButton>
|
|
<router-link
|
|
:to="{ name: '/container/[id]', params: { id: nextContainer.id } }"
|
|
class="btn btn-primary btn-sm"
|
|
v-else
|
|
>
|
|
{{ $t("button.redirect") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ContainerEventLogEntry } from "@/models/LogEntry";
|
|
const router = useRouter();
|
|
const { showToast } = useToast();
|
|
const { t } = useI18n();
|
|
|
|
const { logEntry } = defineProps<{
|
|
logEntry: ContainerEventLogEntry;
|
|
showContainerName?: boolean;
|
|
}>();
|
|
|
|
const { containers } = useLoggingContext();
|
|
|
|
const store = useContainerStore();
|
|
|
|
const { containers: allContainers } = storeToRefs(store);
|
|
|
|
const nextContainer = computed(
|
|
() =>
|
|
[
|
|
...allContainers.value.filter(
|
|
(c) =>
|
|
c.host === containers.value[0].host &&
|
|
c.created > logEntry.date &&
|
|
c.name === containers.value[0].name &&
|
|
c.state === "running",
|
|
),
|
|
].sort((a, b) => +a.created - +b.created)[0],
|
|
);
|
|
|
|
const followEligible = computed(
|
|
() =>
|
|
router.currentRoute.value.name === "/container/[id]" &&
|
|
logEntry.event === "container-stopped" &&
|
|
containers.value.length === 1 &&
|
|
nextContainer.value !== undefined,
|
|
);
|
|
|
|
function redirectNow() {
|
|
showToast(
|
|
{
|
|
title: t("alert.redirected.title"),
|
|
message: t("alert.redirected.message", { containerId: nextContainer.value?.id }),
|
|
type: "info",
|
|
},
|
|
{ expire: 5000 },
|
|
);
|
|
router.push({ name: "/container/[id]", params: { id: nextContainer.value?.id } });
|
|
}
|
|
</script>
|
|
|
|
<style lang="postcss" scoped>
|
|
[data-event="container-stopped"] {
|
|
@apply text-red;
|
|
}
|
|
[data-event="container-started"] {
|
|
@apply text-green;
|
|
}
|
|
</style>
|