89 lines
2.3 KiB
Svelte
89 lines
2.3 KiB
Svelte
|
<script lang="ts">
|
||
|
|
let isHovering = false;
|
||
|
|
|
||
|
|
export let shard = {
|
||
|
|
id: 1,
|
||
|
|
status: "",
|
||
|
|
ping:0,
|
||
|
|
last_connection:0,
|
||
|
|
last_heartbeat:0.
|
||
|
|
};
|
||
|
|
|
||
|
|
let color = "background-color: #fff";
|
||
|
|
|
||
|
|
// shard is down
|
||
|
|
// todo: check if last heartbeat is really recent, since database up/down status can get out of sync
|
||
|
|
if (shard.status != "up") color = "background-color: #000;";
|
||
|
|
// shard latency is < 250ms: OK!
|
||
|
|
else if (shard.ping < 300) color = "background-color: #00cc00;";
|
||
|
|
// shard latency is 250ms < ping < 600ms: slow, but OK
|
||
|
|
else if (shard.ping < 600) color = "background-color: #da9317;";
|
||
|
|
// shard latency is >600ms, this might be problematic
|
||
|
|
else color = "background-color: #cc0000;"
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="wrapper">
|
||
|
|
<div
|
||
|
|
on:click={() => isHovering = !isHovering}
|
||
|
|
class="shard" id={shard.id.toString()}
|
||
|
|
style={color}
|
||
|
|
>{ shard.id }</div>
|
||
|
|
{#if isHovering}
|
||
|
|
<div class="more-info">
|
||
|
|
<h3>Shard { shard.id }</h3>
|
||
|
|
<br>
|
||
|
|
<span>Status: <b>{ shard.status }</b></span><br>
|
||
|
|
<span>Latency: { shard.ping }ms</span><br>
|
||
|
|
<span>Last connection: { new Date(shard.last_connection).toUTCString().match(/([0-9][0-9]:[0-9][0-9]:[0-9][0-9])/)?.shift() }</span><br>
|
||
|
|
<span>Last heartbeat: { new Date(shard.last_heartbeat).toUTCString().match(/([0-9][0-9]:[0-9][0-9]:[0-9][0-9])/)?.shift() }</span><br>
|
||
|
|
<br>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.wrapper {
|
||
|
|
height: 55px;
|
||
|
|
width: 55px;
|
||
|
|
display: block;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
.shard {
|
||
|
|
color: #fff;
|
||
|
|
display: block;
|
||
|
|
float: left;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
justify-content: center;
|
||
|
|
z-index: 1;
|
||
|
|
height: 50px;
|
||
|
|
width: 50px;
|
||
|
|
margin-right: 5px;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
border-radius: 2px;
|
||
|
|
-webkit-touch-callout: none; /* iOS Safari */
|
||
|
|
-webkit-user-select: none; /* Safari */
|
||
|
|
-khtml-user-select: none; /* Konqueror HTML */
|
||
|
|
-moz-user-select: none; /* Old versions of Firefox */
|
||
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
||
|
|
user-select: none; /* Non-prefixed version, currently
|
||
|
|
supported by Chrome, Edge, Opera and Firefox */
|
||
|
|
}
|
||
|
|
.more-info {
|
||
|
|
/* display: none; */
|
||
|
|
position: absolute;
|
||
|
|
margin-top: 3em;
|
||
|
|
will-change: transform;
|
||
|
|
min-height: 150px;
|
||
|
|
width: 200px;
|
||
|
|
z-index: 2;
|
||
|
|
border-radius: 5px;
|
||
|
|
background-color: #333;
|
||
|
|
color: #fff;
|
||
|
|
opacity: 95%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|