77 lines
1.8 KiB
Vue
77 lines
1.8 KiB
Vue
<template>
|
|
<div class="narrow">
|
|
<div>
|
|
<h1>Tavolio Uptime Dashboard</h1>
|
|
</div>
|
|
<div class="tile" v-for="group in groups">
|
|
<h2>{{ group.displayName }}</h2>
|
|
<div v-for="target in group.targets" class="target" @click="useRouter().push('/healthchecks/' + group.key + '/' + target.key)">
|
|
<div class="left-center">
|
|
<RatioComponent :ratio="target.last24Hour" :status="target.status"></RatioComponent>
|
|
<p>{{ target.displayName }}</p>
|
|
</div>
|
|
<div class="ping-container">
|
|
<div style="user-select: none" v-for="ping in target.pings" :class="ping.result"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {Group} from "~/components/targets/Target";
|
|
|
|
const groups: Ref<Group[] | undefined> = ref();
|
|
|
|
onMounted(() => {
|
|
Group.get((_groups: Group[]) => {
|
|
groups.value = _groups;
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.narrow {
|
|
width: min(1140px, 100%);
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
.target {
|
|
display: grid;
|
|
grid-template-columns: 55% 45%;
|
|
}
|
|
.ping-container {
|
|
display: grid;
|
|
gap: 0.25rem;
|
|
grid-template-columns: repeat(50, 1fr);
|
|
justify-content: end;
|
|
direction: rtl;
|
|
}
|
|
.healthcheck {
|
|
font-size: 1.125rem;
|
|
}
|
|
h2 {
|
|
font-weight: 600;
|
|
}
|
|
.UP {
|
|
background-color: #74f474;
|
|
border-radius: 0.25rem;
|
|
}
|
|
.DOWN {
|
|
background-color: #ff4534;
|
|
border-radius: 0.25rem;
|
|
}
|
|
.indicator {
|
|
font-size: 0.90rem;
|
|
font-weight: 550;
|
|
width: 3.75rem;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
background-color: #74f474;
|
|
color: black;
|
|
margin-right: 0.5rem;
|
|
border-radius: 1rem;
|
|
}
|
|
</style> |