mirror of
https://github.com/smartyellow/status.git
synced 2025-01-18 21:47:58 +00:00
177 lines
6.9 KiB
Svelte
177 lines
6.9 KiB
Svelte
<script>
|
|
|
|
import { createEventDispatcher, onMount } from 'svelte';
|
|
import { translate, api } from 'helpers/webdesq/stores.js';
|
|
|
|
import PanelManager from 'components/webdesq/panelmanager.svelte';
|
|
import Panel from 'components/webdesq/panel.svelte';
|
|
|
|
export let language = 'en';
|
|
|
|
const icons = {
|
|
wrench: '<path d="M175 631c0-15-13-28-29-28s-29 13-29 28 13 27 29 27 29-12 29-27zm294-180L158 743a61 61 0 0 1-41 16c-16 0-31-6-42-16l-48-46a52 52 0 0 1 0-78l310-292c24 57 72 102 132 124zm289-187c0 15-6 32-11 46a206 206 0 0 1-192 129c-113 0-205-86-205-192S442 55 555 55c33 0 76 9 104 27 5 3 7 7 7 12s-3 9-7 12l-134 72v96l88 46c15-8 121-71 130-71s15 7 15 15zm0 0"/>',
|
|
server: '<path d="M0 308.58v150.83a57.73 57.73 0 0 0 10.69 33.38H757.3a57.62 57.62 0 0 0 10.7-33.37V308.58a57.73 57.73 0 0 0-10.69-33.38H10.7A57.76 57.76 0 0 0 0 308.58Zm665.6 81.82a12.8 12.8 0 1 1-.01 25.6 12.8 12.8 0 0 1 .01-25.6ZM640 352a12.8 12.8 0 1 1 0 25.61 12.8 12.8 0 0 1 0-25.61Zm-25.6 38.4a12.8 12.8 0 1 1-.01 25.6 12.8 12.8 0 0 1 0-25.6ZM588.8 352a12.8 12.8 0 1 1 0 25.61 12.8 12.8 0 0 1 0-25.61Zm-25.6 38.4a12.8 12.8 0 1 1 0 25.6 12.8 12.8 0 0 1 0-25.6ZM537.6 352a12.8 12.8 0 1 1-.01 25.6 12.8 12.8 0 0 1 .01-25.6ZM512 390.4a12.8 12.8 0 1 1 0 25.6 12.8 12.8 0 0 1 0-25.6ZM486.4 352a12.8 12.8 0 1 1-.01 25.61 12.8 12.8 0 0 1 0-25.61Zm-25.6 38.4a12.8 12.8 0 1 1 0 25.6 12.8 12.8 0 0 1 0-25.6ZM435.2 352a12.8 12.8 0 1 1 0 25.61 12.8 12.8 0 0 1 0-25.61Zm-300.8-25.6A57.67 57.67 0 0 1 192 384a57.67 57.67 0 0 1-57.6 57.6A57.67 57.67 0 0 1 76.8 384a57.67 57.67 0 0 1 57.6-57.6Zm622.91-76.8A57.76 57.76 0 0 0 768 216.22V65.38A59.05 59.05 0 0 0 709.02 6.4H58.98A59.05 59.05 0 0 0 0 65.38V216.2a57.73 57.73 0 0 0 10.69 33.39H757.3Zm-91.7-102.4a12.8 12.8 0 1 1-.02 25.6 12.8 12.8 0 0 1 .01-25.6ZM640 108.8a12.8 12.8 0 1 1 0 25.61 12.8 12.8 0 0 1 0-25.6Zm-25.6 38.4a12.8 12.8 0 1 1-.01 25.6 12.8 12.8 0 0 1 0-25.6Zm-25.6-38.4a12.8 12.8 0 1 1 0 25.61 12.8 12.8 0 0 1 0-25.6Zm-25.6 38.4a12.8 12.8 0 1 1 0 25.6 12.8 12.8 0 0 1 0-25.6Zm-25.6-38.4a12.8 12.8 0 1 1-.01 25.6 12.8 12.8 0 0 1 .01-25.6ZM512 147.2a12.8 12.8 0 1 1 0 25.6 12.8 12.8 0 0 1 0-25.6Zm-25.6-38.4a12.8 12.8 0 1 1-.01 25.61 12.8 12.8 0 0 1 0-25.6Zm-25.6 38.4a12.8 12.8 0 1 1 0 25.6 12.8 12.8 0 0 1 0-25.6Zm-25.6-38.4a12.8 12.8 0 1 1 0 25.61 12.8 12.8 0 0 1 0-25.6ZM134.4 83.2a57.67 57.67 0 0 1 57.6 57.6 57.67 57.67 0 0 1-57.6 57.6 57.67 57.67 0 0 1-57.6-57.6 57.67 57.67 0 0 1 57.6-57.6ZM10.69 518.4A57.76 57.76 0 0 0 0 551.78v150.83c0 32.53 26.46 59 58.98 59H709a59.05 59.05 0 0 0 58.99-59V551.79a57.73 57.73 0 0 0-10.69-33.38Zm123.7 166.4a57.67 57.67 0 0 1-57.59-57.6 57.67 57.67 0 0 1 57.6-57.6 57.67 57.67 0 0 1 57.6 57.6 57.67 57.67 0 0 1-57.6 57.6Zm300.8-64a12.8 12.8 0 1 1 .02-25.6 12.8 12.8 0 0 1-.01 25.6Zm25.61 38.4a12.8 12.8 0 1 1 0-25.61 12.8 12.8 0 0 1 0 25.6Zm25.6-38.4a12.8 12.8 0 1 1 .01-25.6 12.8 12.8 0 0 1-.01 25.6Zm25.6 38.4a12.8 12.8 0 1 1 0-25.61 12.8 12.8 0 0 1 0 25.6Zm25.6-38.4a12.8 12.8 0 1 1 .01-25.6 12.8 12.8 0 0 1 0 25.6Zm25.6 38.4a12.8 12.8 0 1 1 0-25.61 12.8 12.8 0 0 1 0 25.6Zm25.6-38.4a12.8 12.8 0 1 1 0-25.6 12.8 12.8 0 0 1 0 25.6Zm25.6 38.4a12.8 12.8 0 1 1 .01-25.6 12.8 12.8 0 0 1-.01 25.6Zm25.6-38.4a12.8 12.8 0 1 1 0-25.6 12.8 12.8 0 0 1 0 25.6Zm25.6 38.4a12.8 12.8 0 1 1 .01-25.61 12.8 12.8 0 0 1 0 25.6Zm0 0"/>',
|
|
};
|
|
|
|
const dispatch = createEventDispatcher();
|
|
let mounted = false;
|
|
let error = false;
|
|
let webservices = [];
|
|
|
|
async function refresh() {
|
|
console.log('refresh');
|
|
try {
|
|
webservices = await api.get('/webservices');
|
|
}
|
|
catch (err) {
|
|
console.error(err);
|
|
error = true;
|
|
}
|
|
}
|
|
|
|
function openWebService(title, id) {
|
|
dispatch('openitem', {
|
|
type: 'smartyellow/webservices',
|
|
title: title,
|
|
icon: icons.server,
|
|
closeable: true,
|
|
isNew: false,
|
|
data: { id: id },
|
|
});
|
|
}
|
|
|
|
onMount(async () => {
|
|
await refresh();
|
|
const interval = setInterval(async () => await refresh(), 10_000);
|
|
|
|
mounted = true;
|
|
return () => clearInterval(interval);
|
|
});
|
|
|
|
</script>
|
|
|
|
{#if error}
|
|
<div class="error">
|
|
{translate('Failed to fetch fresh data', language)}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if mounted}
|
|
|
|
<PanelManager>
|
|
<Panel>
|
|
|
|
{#if webservices.length}
|
|
<div class="servicelist">
|
|
{#each webservices as service}
|
|
{@const name = service.name[language] || service.name.en}
|
|
<div class="service">
|
|
<div class="title">{name}</div>
|
|
|
|
<div class="date">
|
|
{@html translate('Status last checked on: <m>', [ `<span>${new Date(service.lastChecked).toLocaleString()}</span>`, language ])}
|
|
</div>
|
|
|
|
<div class="tags">
|
|
{#if service.heartbeat[service.heartbeat.length - 1]?.down == true}
|
|
<span class="tag red">DOWN</span>
|
|
{:else}
|
|
<span class="tag green">UP</span>
|
|
{/if}
|
|
|
|
<span class="tag light link" on:click={() => openWebService(name, service.id)}>
|
|
open
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
No webservices
|
|
{/if}
|
|
|
|
</Panel>
|
|
</PanelManager>
|
|
|
|
{:else}
|
|
<h2>Loading...</h2>
|
|
{/if}
|
|
|
|
<style>
|
|
div:not(:last-child) {
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.servicelist {
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 3px;
|
|
}
|
|
.servicelist .service {
|
|
background-color: #fff;
|
|
margin-bottom: 1px;
|
|
padding: 1em;
|
|
}
|
|
.servicelist .service .title {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.tag {
|
|
background-color: #808080;
|
|
color: #fff;
|
|
padding: 2px 5px;
|
|
border-radius: 5px;
|
|
display: inline-block;
|
|
}
|
|
.tag.green {
|
|
background-color: #007000;
|
|
}
|
|
.tag.red {
|
|
background-color: #980000;
|
|
}
|
|
.tag.light {
|
|
background-color: rgba(0, 0, 0, .1);
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.tag.link {
|
|
text-decoration: underline;
|
|
transition: background-color .2s;
|
|
}
|
|
.tag.link.light:hover {
|
|
background-color: rgba(0, 0, 0, .2);
|
|
}
|
|
.tag.link::after {
|
|
content: '';
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-block;
|
|
margin-left: .3em;
|
|
}
|
|
|
|
.date {
|
|
color: rgba(0, 0, 0, .5);
|
|
}
|
|
.date :global(span) {
|
|
font-style: italic;
|
|
opacity: 1.3;
|
|
color: rgba(0, 0, 0, .8);
|
|
}
|
|
|
|
.error {
|
|
padding: 10px;
|
|
color: #fff;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.servicelist {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|