Merge pull request #2 from spiralw/feat/status-page

add shard status page

src/lib/shard.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	export let hover;
+
+	export let shard = {
+		id: 1,
+		status: "",
+		ping:0,
+		disconnection_count: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={() => hover = (hover != shard.id) ? shard.id : null}
+		class="shard" id={shard.id.toString()}
+		style={color}
+	>{ shard.id }</div>
+	{#if hover == shard.id}
+		<div class="more-info">
+			<br>
+			<h3>Shard { shard.id }</h3>
+			<br>
+			<span>Status: <b>{ shard.status }</b></span><br>
+			<span>Latency: { shard.ping }ms</span><br>
+			<span>Disconnection count: { shard.disconnection_count }</span><br>
+			<span>Last connection: { shard.last_connection }</span><br>
+			<span>Last heartbeat: { shard.last_heartbeat }</span><br>
+			<br>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.wrapper {
+		height: 55px;
+		width: 55px;
+		display: block;
+		float: left;
+	}
+	.shard:hover {
+		cursor: pointer;
+	}
+	.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>
+