106 lines
4.0 KiB
Vue
106 lines
4.0 KiB
Vue
<template>
|
|
<Loading v-if="!retrievedConfig" class="h-64 w-64 px-4" />
|
|
<div v-else :class="[config && config.oidc && !config.authenticated ? 'hidden' : '', 'container container-xs relative mx-auto xl:rounded xl:border xl:shadow-xl xl:my-5 p-5 pb-12 xl:pb-5 text-left dark:bg-gray-800 dark:text-gray-200 dark:border-gray-500']" id="global">
|
|
<div class="mb-2">
|
|
<div class="flex flex-wrap">
|
|
<div class="w-3/4 text-left my-auto">
|
|
<div class="text-3xl xl:text-5xl lg:text-4xl font-light">{{ header }}</div>
|
|
</div>
|
|
<div class="w-1/4 flex justify-end">
|
|
<component :is="link ? 'a' : 'div'" :href="link" target="_blank" style="width:100px">
|
|
<img v-if="logo" :src="logo" alt="Gatus" class="object-scale-down" style="max-width: 100px; min-width: 50px; min-height:50px;" />
|
|
<img v-else src="./assets/logo.svg" alt="Gatus" class="object-scale-down" style="max-width: 100px; min-width: 50px; min-height:50px;" />
|
|
</component>
|
|
</div>
|
|
</div>
|
|
<div v-if="buttons" class="flex flex-wrap">
|
|
<a v-for="button in buttons" :key="button.name" :href="button.link" target="_blank" class="px-2 py-0.5 font-medium select-none text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-400 hover:underline">
|
|
{{ button.name }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<router-view @showTooltip="showTooltip" />
|
|
</div>
|
|
|
|
<div v-if="config && config.oidc && !config.authenticated" class="mx-auto max-w-md pt-12">
|
|
<img src="./assets/logo.svg" alt="Gatus" class="mx-auto" style="max-width:160px; min-width:50px; min-height:50px;"/>
|
|
<h2 class="mt-4 text-center text-4xl font-extrabold text-gray-800 dark:text-gray-200">
|
|
Gatus
|
|
</h2>
|
|
<div class="py-7 px-4 rounded-sm sm:px-10">
|
|
<div v-if="$route && $route.query.error" class="text-red-500 text-center mb-5">
|
|
<div class="text-sm">
|
|
<span class="text-red-500" v-if="$route.query.error === 'access_denied'">You do not have access to this status page</span>
|
|
<span class="text-red-500" v-else>{{ $route.query.error }}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a :href="`${SERVER_URL}/oidc/login`" class="max-w-lg mx-auto w-full flex justify-center py-3 px-4 border border-green-800 rounded-md shadow-lg text-sm text-white bg-green-700 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800">
|
|
Login with OIDC
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Tooltip :result="tooltip.result" :event="tooltip.event"/>
|
|
<Social/>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import Social from './components/Social.vue'
|
|
import Tooltip from './components/Tooltip.vue';
|
|
import {SERVER_URL} from "@/main";
|
|
import Loading from "@/components/Loading";
|
|
|
|
export default {
|
|
name: 'App',
|
|
components: {
|
|
Loading,
|
|
Social,
|
|
Tooltip
|
|
},
|
|
methods: {
|
|
fetchConfig() {
|
|
fetch(`${SERVER_URL}/api/v1/config`, {credentials: 'include'})
|
|
.then(response => {
|
|
this.retrievedConfig = true;
|
|
if (response.status === 200) {
|
|
response.json().then(data => {
|
|
this.config = data;
|
|
})
|
|
}
|
|
});
|
|
},
|
|
showTooltip(result, event) {
|
|
this.tooltip = {result: result, event: event};
|
|
}
|
|
},
|
|
computed: {
|
|
logo() {
|
|
return window.config && window.config.logo && window.config.logo !== '{{ .Logo }}' ? window.config.logo : "";
|
|
},
|
|
header() {
|
|
return window.config && window.config.header && window.config.header !== '{{ .Header }}' ? window.config.header : "Health Status";
|
|
},
|
|
link() {
|
|
return window.config && window.config.link && window.config.link !== '{{ .Link }}' ? window.config.link : null;
|
|
},
|
|
buttons() {
|
|
return window.config && window.config.buttons ? window.config.buttons : [];
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
error: '',
|
|
retrievedConfig: false,
|
|
config: { oidc: false, authenticated: true },
|
|
tooltip: {},
|
|
SERVER_URL
|
|
}
|
|
},
|
|
created() {
|
|
this.fetchConfig();
|
|
}
|
|
}
|
|
</script> |