PeachCloud
/
peach-workspace
3
2
Fork 1
Code Issues 17 Pull Requests Projects Releases Wiki Activity

add scuttlebutt status page with placeholder data

This commit is contained in:
glyph 2022-01-24 16:40:58 +02:00
parent 2bfba66dab
commit 528db7189a
5 changed files with 182 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
peach-web/static/icons/hermies.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
peach-web/static/icons/image-file.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
peach-web/static/icons/orbits.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
peach-web/static/icons/ram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

82
peach-web/templates/status/scuttlebutt.html.tera
View File

@ -2,16 +2,86 @@
{%- block card %}
<!-- SCUTTLEBUTT STATUS -->
<div class="card center">
<div class="card-container">
<p>Network key: </p>
<p>Replication hops: </p>
<p>Sbot version: </p>
<p>Process status: </p>
<!-- NETWORK INFO BOX -->
<div class="capsule capsule-container success-border">
<!-- NETWORK STATUS GRID -->
<div class="two-grid" title="PeachCloud network mode and status">
<!-- top-right config icon -->
<a class="link two-grid-top-right" href="/settings/scuttlebutt" title="Configure Scuttlebutt settings">
<img id="configureNetworking" class="icon-small" src="/icons/cog.svg" alt="Configure">
</a>
<!-- left column -->
<!-- network mode icon with label -->
<div class="grid-column-1">
<img id="netModeIcon" class="center icon icon-active" src="/icons/hermies.svg" alt="WiFi router">
<label id="netModeLabel" for="netModeIcon" class="center label-small font-gray" style="margin-top: 0.5rem;" title="Access Point Online">ACTIVE</label>
</div>
<!-- right column -->
<!-- network mode, ssid & ip with labels -->
<div class="grid-column-2">
<label class="label-small font-gray" for="netMode" title="Network Mode">VERSION</label>
<p id="netMode" class="card-text" title="Network Mode">1.1.0-alpha</p>
<label class="label-small font-gray" for="netSsid" title="Access Point SSID" style="margin-top: 0.5rem;">UPTIME</label>
<p id="netSsid" class="card-text" title="SSID">3 days & 7 hours</p>
</div>
</div>
<div id="middleSection" style="margin-top: 1rem;">
<div id="ssbSocialCounts" class="center" style="display: flex; justify-content: space-between; width: 90%;">
<div style="display: flex; align-items: last baseline;">
<label class="card-text" style="margin-right: 2px;">21</label>
<label class="label-small font-gray">Friends</label>
</div>
<div style="display: flex; align-items: last baseline;">
<label class="card-text" style="margin-right: 2px;">5</label>
<label class="label-small font-gray">Follows</label>
</div>
<div style="display: flex; align-items: last baseline;">
<label class="card-text" style="margin-right: 2px;">38</label>
<label class="label-small font-gray">Followers</label>
</div>
<div style="display: flex; align-items: last baseline;">
<label class="card-text" style="margin-right: 2px;">2</label>
<label class="label-small font-gray">Blocks</label>
</div>
</div>
</div>
<!--
<p class="card-text">Latest sequence number: </p>
<p class="card-text">Network key: </p>
<p>Process uptime: </p>
<p>Sbot version: </p>
<p>Replication hops: </p>
<p>Process status: </p>
<p>Blobstore size: </p>
<p>Latest sequence number: </p>
<p>Last time you visited this page, latest sequence was x ... now it's y</p>
<p>Number of follows / followers / friends / blocks</p>
-->
<!-- THREE-ACROSS STACK -->
<div class="three-grid card-container" style="margin-top: 1rem;">
<div class="stack">
<img class="icon" title="Hops" src="/icons/orbits.png">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium" style="padding-right: 3px;" title="Replication hops">2</label>
</div>
<label class="label-small font-gray">HOPS</label>
</div>
<div class="stack">
<img class="icon" title="Blobs" src="/icons/image-file.png">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium" style="padding-right: 3px;" title="Blobstore size in MB">163</label>
<label class="label-small font-near-black">MB</label>
</div>
<label class="label-small font-gray">BLOBSTORE</label>
</div>
<div class="stack">
<img class="icon" title="Memory" src="/icons/ram.png">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium" style="padding-right: 3px;" title="Memory usage of the go-sbot process in MB">47</label>
<label class="label-small font-near-black">MB</label>
</div>
<label class="label-small font-gray">MEMORY</label>
</div>
</div>
</div>
</div>
{%- endblock card -%}