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

add shard status page

package.json

@@ -25,7 +25,7 @@
     "discord-markdown": "^2.5.1",
     "gh-pages": "^3.2.3",
     "moment": "^2.29.1",
-    "sass": "^1.45.1",
+    "sass": "^1.47.0",
     "svelecte": "^3.4.5",
     "svelte-autosize": "^1.0.1",
     "svelte-icons": "^2.1.0",

src/App.svelte

@@ -7,6 +7,7 @@
   import Footer from './lib/Footer.svelte';
   import Public from "./pages/Public.svelte";
   import Main from "./pages/profiles/Main.svelte";
+  import Status from './pages/status.svelte';
   
   // theme cdns (I might make some myself too)
   let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
@@ -64,5 +65,6 @@
     <Route path = "profile/g">
       hey please provide a group
     </Route>
+    <Route path="status"><Status /></Route>
   <Footer />
 </Router>

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>
+	

src/pages/status.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+    import { Container, Row, Col, Card, CardHeader, CardTitle, CardBody, Input, Button } from 'sveltestrap';
+    import FaInfoCircle from 'svelte-icons/fa/FaInfoCircle.svelte'
+    import ShardItem from '../lib/shard.svelte';
+
+    let hover = null;
+
+    let message = "Loading...";
+    let shards = [];
+    let pingAverage = "";
+    let currentCommitMsg = "";
+
+    let foundShard = {
+        id: 1,
+        status: 1,
+        ping:"",
+        disconnection_count:0,
+        last_connection:0,
+        last_heartbeat:0.
+    };
+    foundShard = null;
+
+    let findShardInput = "";
+    let valid = false;
+
+    const get = async () => {
+        const pkdata = await fetch("https://api.pluralkit.me/private/meta").then(x => x.json());
+            shards = pkdata.shards.sort((x, y) => (x.id > y.id) ? 1 : -1);
+            let pings = 0;
+            shards = shards.map(shard => {
+                    pings += shard.ping;
+                    shard.last_connection = new Date(Number(shard.last_connection) * 1000).toUTCString().match(/([0-9][0-9]:[0-9][0-9]:[0-9][0-9])/)?.shift()
+                    shard.last_heartbeat = new Date(Number(shard.last_heartbeat) * 1000).toUTCString().match(/([0-9][0-9]:[0-9][0-9]:[0-9][0-9])/)?.shift()
+                    return shard;
+            });
+    
+            pingAverage = Math.trunc(pings / shards.length).toString();
+    
+            currentCommitMsg = `Current Git commit: <a href="https://github.com/xSke/PluralKit/commit/${pkdata.version}">${pkdata.version}</a>`;
+    
+            message = "";
+    };
+
+    get();
+    setTimeout(get, 30 * 1000);
+
+    // javascript wants everything to be BigInts
+    const getShardID = (guild_id: string, num_shards: number) => guild_id == "" ? -1 : (BigInt(guild_id) >> BigInt(22)) % BigInt(num_shards);
+    
+    let shardInfoMsg = "";
+
+    let shardInfoHandler = (_: Event) => {
+        if (findShardInput == "" || !findShardInput) {
+            valid = false;
+            foundShard = null;
+            shardInfoMsg = "";
+            return;
+        };
+        var match = findShardInput.match(/https:\/\/[\w+]?discord[app]?.com\/channels\/(\d+)\/\d+\/\d+/);
+        if (match != null) {
+            console.log("match", match)
+            foundShard = shards[Number(getShardID(match[1], shards.length))];
+            valid = true;
+            shardInfoMsg = "";
+            return;
+        }
+        try {
+            var shard = getShardID(findShardInput, shards.length);
+            if (shard == -1) {
+                valid = false;
+                foundShard == null;
+                shardInfoMsg = "Invalid server ID";
+                return;
+            }
+            foundShard = shards[Number(shard)];
+            valid = true;
+            shardInfoMsg = "";
+        } catch(e) {
+            valid = false;
+            shardInfoMsg = "Invalid server ID";
+        }
+    };
+    
+</script>
+
+<Container fluid>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <Card class="mb-4">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaInfoCircle />
+                        </div>
+                        Bot status
+                    </CardTitle>
+                </CardHeader>
+                <CardBody>
+                    <span>{@html currentCommitMsg}</span>
+                    <br>
+                    <noscript>Please enable JavaScript to view this page!</noscript>
+
+                    { shards.length } shards ({ shards.filter(x => x.status == "up").length } up) <br>
+                    Average latency: { pingAverage }ms
+                    <br><br>
+                    All times in UTC. More statistics available at <a href="https://stats.pluralkit.me">https://stats.pluralkit.me</a>
+                    <br><br>
+                    <details>
+                        <summary><b>Find my shard</b></summary>
+                        <br>
+                        Enter a server ID or a message link to find the shard currently assigned to your server:
+                        <br>
+                        <input bind:value={findShardInput} on:input={shardInfoHandler} />
+                        <br><br>
+                        <span>{ shardInfoMsg }</span>
+                        {#if valid}
+                            <h3>Your shard is: Shard { foundShard.id }</h3>
+                            <br>
+                            <span>Status: <b>{ foundShard.status }</b></span><br>
+                            <span>Latency: { foundShard.ping }ms</span><br>
+                            <span>Disconnection count: { foundShard.disconnection_count }</span><br>
+                            <span>Last connection: { foundShard.last_connection }</span><br>
+                            <span>Last heartbeat: { foundShard.last_heartbeat }</span><br>
+                        {/if}
+                    </details>
+                </CardBody>
+            </Card>
+        </Col>
+    </Row>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <Card class="mb-4">
+                <CardBody>
+                    <span>{ message }</span>
+                    {#each shards as shard}
+                        <ShardItem shard={shard} bind:hover={hover} />
+                    {/each}
+                </CardBody>
+            </Card>
+        </Col>
+    </Row>
+</Container>

yarn.lock

@@ -891,10 +891,10 @@ sander@^0.5.0:
     mkdirp "^0.5.1"
     rimraf "^2.5.2"
 
-sass@^1.45.1:
+sass@^1.47.0:
-  version "1.45.1"
+  version "1.49.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.45.1.tgz#fa03951f924d1ba5762949567eaf660e608a1ab0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.0.tgz#65ec1b1d9a6bc1bae8d2c9d4b392c13f5d32c078"
-  integrity sha512-pwPRiq29UR0o4X3fiQyCtrESldXvUQAAE0QmcJTpsI4kuHHcLzZ54M1oNBVIXybQv8QF2zfkpFcTxp8ta97dUA==
+  integrity sha512-TVwVdNDj6p6b4QymJtNtRS2YtLJ/CqZriGg0eIAbAKMlN8Xy6kbv33FsEZSF7FufFFM705SQviHjjThfaQ4VNw==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"