From d17cb80db43dbc281badd38d57d25b68ee147584 Mon Sep 17 00:00:00 2001
From: spiral <spiral@spiral.sh>
Date: Thu, 14 Jul 2022 19:40:12 +0200
Subject: [PATCH] refactor(dashboard): use bootstrap tooltip on shard status
 page

---
 dashboard/src/lib/shard.svelte    | 47 +++++++++----------------------
 dashboard/src/pages/status.svelte |  6 ++--
 2 files changed, 16 insertions(+), 37 deletions(-)

diff --git a/dashboard/src/lib/shard.svelte b/dashboard/src/lib/shard.svelte
index 9111f8a3..201016a1 100644
--- a/dashboard/src/lib/shard.svelte
+++ b/dashboard/src/lib/shard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let hover;
+	import { Tooltip } from 'sveltestrap';
 
 	export let shard = {
 		id: 1,
@@ -25,23 +25,20 @@
 
 <div class="wrapper">
 	<div
-		on:click={() => hover = (hover != shard.id) ? shard.id : null}
-		class="shard" id={shard.id.toString()}
+		class="shard" id={`shard-${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}
+	<Tooltip target={`shard-${shard.id.toString()}`} placement="bottom">
+		<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>
+	</Tooltip>
 </div>
 
 <style>
@@ -73,20 +70,4 @@
 				  user-select: none; /* Non-prefixed version, currently
 										supported by Chrome, Edge, Opera and Firefox */
 	}
-	.more-info {
-		/* display: none; */
-		position: absolute;
-		top: 100%;
-		right: -50%;
-		will-change: transform;
-		min-height: 150px;
-		width: 12em;
-		z-index: 2;
-		border-radius: 5px;
-		background-color: #333;
-		color: #fff;
-		opacity: 95%;
-		text-align: center;
-	}
-</style>
-	
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/dashboard/src/pages/status.svelte b/dashboard/src/pages/status.svelte
index a00e2db7..2119859e 100644
--- a/dashboard/src/pages/status.svelte
+++ b/dashboard/src/pages/status.svelte
@@ -5,8 +5,6 @@
 
     import api from '../api';
 
-    let hover = null;
-
     let message = "Loading...";
     let shards = [];
     let clusters = {};
@@ -147,7 +145,7 @@
                     <CardBody>
                         <span>{ message }</span>
                         {#each shards as shard}
-                            <ShardItem shard={shard} bind:hover={hover} />
+                            <ShardItem shard={shard} />
                         {/each}
                     </CardBody>
                 </Card>
@@ -163,7 +161,7 @@
             </div>
             <div class="cluster-shards">
                 {#each clusters[key] as shard}
-                <ShardItem shard={shard} bind:hover={hover} />
+                <ShardItem shard={shard} />
                 {/each}
             </div>
         {/each}