extern/gatus
1
0
Fork 0
mirror of https://github.com/TwiN/gatus.git synced 2024-11-25 01:13:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

Migrate service group collapsing feature

Browse Source
This commit is contained in:
TwinProduction 2021-01-24 05:28:29 -05:00
parent dc6cb8fc1d
commit 668ed3b1a2
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/app/src/components/ServiceGroup.vue
View File

@ -1,15 +1,18 @@
<template> <template>
<div :class="services.length === 0 ? 'mt-3' : 'mt-4'"> <div :class="services.length === 0 ? 'mt-3' : 'mt-4'">
<slot v-if="name !== 'undefined'"> <slot v-if="name !== 'undefined'">
<div class="service-group container pt-2 border"> <div class="service-group container pt-2 border" @click="toggleGroup">
<h5 class='text-monospace text-gray-400 text-xl font-medium pb-2 px-3'> <h5 class='text-monospace text-gray-400 text-xl font-medium pb-2 px-3'>
<span v-if="healthy" class='text-green-600'>&#10003;</span> <span v-if="healthy" class='text-green-600'>&#10003;</span>
<span v-else class='text-yellow-400'>~</span> <span v-else class='text-yellow-400'>~</span>
{{ name }} {{ name }}
<span class='float-right service-group-arrow'>
{{ collapsed ? '&#9660;' : '&#9650;' }}
</span>
</h5> </h5>
</div> </div>
</slot> </slot>
<div :class="name === 'undefined' ? '' : 'service-group-content'"> <div v-if="!collapsed" :class="name === 'undefined' ? '' : 'service-group-content'">
<slot v-for="service in services" :key="service"> <slot v-for="service in services" :key="service">
<Service :data="service"/> <Service :data="service"/>
</slot> </slot>
@ -49,6 +52,9 @@ export default {
if (!this.healthy) { if (!this.healthy) {
this.healthy = true; this.healthy = true;
} }
},
toggleGroup() {
this.collapsed = !this.collapsed;
} }
}, },
watch: { watch: {
@ -61,7 +67,8 @@ export default {
}, },
data() { data() {
return { return {
healthy: true healthy: true,
collapsed: false
} }
} }
} }