liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(dashboard): use bootstrap tooltip on shard status page

Browse Source
This commit is contained in:
spiral 2022-07-14 19:40:12 +02:00
parent f864498392
commit d17cb80db4
No known key found for this signature in database
GPG Key ID: 244A11E4B0BCF40E
2 changed files with 16 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
dashboard/src/lib/shard.svelte
View File

@ -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>
</style>

6
dashboard/src/pages/status.svelte
View File

@ -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}