fix(dashboard): improve shard status page

dashboard/src/lib/shard.svelte

@@ -7,14 +7,14 @@
 		ping:0,
 		disconnection_count:0,
 		last_connection:0,
-		last_heartbeat:0.
+		last_heartbeat:0,
+        heartbeat_minutes_ago: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" || shard.heartbeat_minutes_ago > 5) color = "background-color: #000;";
-	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
@@ -35,9 +35,12 @@
 		<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 connection: { shard.last_connection } UTC</span><br>
-		<span>Last heartbeat: { shard.last_heartbeat }</span><br>
+		<span>Last heartbeat: { shard.last_heartbeat } UTC</span>
-		<br>
+		{#if shard.heartbeat_minutes_ago > 5}
+		<span>(over {Math.floor(shard.heartbeat_minutes_ago)} minutes ago)</span>
+		{/if}
+		<br><br>
 	</Tooltip>
 </div>
 

dashboard/src/pages/status.svelte

@@ -16,7 +16,8 @@
         ping:"",
         disconnection_count:0,
         last_connection:0,
-        last_heartbeat:0.
+        last_heartbeat:0,
+        heartbeat_minutes_ago:0
     };
     foundShard = null;
 
@@ -29,6 +30,7 @@
         let pings = 0;
         data = data.map(shard => {
             pings += shard.ping;
+            shard.heartbeat_minutes_ago = heartbeatMinutesAgo(shard);
             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;
@@ -64,7 +66,7 @@
             shardInfoMsg = "";
             return;
         };
-        var match = findShardInput.match(/https:\/\/[\w+]?discord[app]?.com\/channels\/(\d+)\/\d+\/\d+/);
+        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))];
@@ -89,6 +91,14 @@
         }
     };
     
+    function heartbeatMinutesAgo(shard) {
+		// difference in milliseconds
+		const msDifference = Math.abs((Number(new Date(Number(shard.last_heartbeat) * 1000)) - Date.now()));
+		// convert to minutes
+		const minuteDifference = msDifference / (60 * 1000);
+		
+        return minuteDifference;
+	}
 </script>
 
 <Container>
@@ -107,29 +117,46 @@
                     <br>
                     <noscript>Please enable JavaScript to view this page!</noscript>
 
-                    { shards.length } shards ({ shards.filter(x => x.status == "up").length } up) <br>
+                    <Row>
-                    Average latency: { pingAverage }ms
+                        <Col class="mb-2" xs={12} md={6} lg={4} >
-                    <br><br>
+                            <span>{ shards.length } shards ({ shards.filter(x => x.status == "up").length } up)</span>
-                    All times in UTC. More statistics available at <a href="https://stats.pluralkit.me">https://stats.pluralkit.me</a>
+                        </Col>
-                    <br><br>
+                        <Col class="mb-2" xs={12} md={6} lg={4}>
-                    <details>
+                            <span>Average latency: { pingAverage }ms</span>
-                        <summary><b>Find my shard</b></summary>
+                        </Col>
-                        <br>
+                        <Col class="mb-2" xs={12} md={6} lg={4}>
-                        Enter a server ID or a message link to find the shard currently assigned to your server:
+                            <span>More statistics available at <a href="https://stats.pluralkit.me">https://stats.pluralkit.me</a></span>
-                        <br>
+                        </Col>
-                        <input bind:value={findShardInput} on:input={shardInfoHandler} />
+                    </Row>
-                        <br><br>
+                    <hr/>
-                        <span>{ shardInfoMsg }</span>
+                    <h3 style="font-size: 1.2rem;">Find my shard</h3>
+                        <p>Enter a server ID or a message link to find the shard currently assigned to your server</p>
+                        <label for="shardInput">Server ID or message link</label>
+                        <input id="shardInput" class="form form-control" bind:value={findShardInput} on:input={shardInfoHandler} />
+                        {#if shardInfoMsg || foundShard}
+                        <Card class="mt-4">
+                            <CardHeader>
+                                <CardTitle>
+                                    {#if shardInfoMsg}
+                                        {shardInfoMsg}
+                                    {/if}
+                                    {#if foundShard}
+                                        Your shard is: Shard { foundShard.id }
+                                    {/if}
+                                </CardTitle>
+                            </CardHeader>
+
                         {#if valid}
-                            <h3>Your shard is: Shard { foundShard.id }</h3>
+                            <CardBody>
-                            <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 connection: { foundShard.last_connection } UTC</span><br>
-                            <span>Last heartbeat: { foundShard.last_heartbeat }</span><br>
+                            <span>Last heartbeat: { foundShard.last_heartbeat } UTC</span><br>
+                            </CardBody>
+                        {/if}
+                        </Card>
                         {/if}
-                    </details>
                 </CardBody>
             </Card>
         </Col>