Merge pull request 'Improve Scuttlebutt status page' (#77) from add_sbot_status into main

Reviewed-on: #77
This commit is contained in:
glyph 2022-01-26 10:10:49 +00:00
commit 6d9ced5ebc
10 changed files with 236 additions and 51 deletions

View File

@ -2,19 +2,27 @@
use std::{process::Command, str};
#[cfg(feature = "miniserde_support")]
use miniserde::{Deserialize, Serialize};
#[cfg(feature = "serde_support")]
use serde::{Deserialize, Serialize};
use crate::StatsError;
/// go-sbot process statistics.
#[derive(Debug)]
#[cfg_attr(feature = "miniserde_support", derive(Serialize, Deserialize))]
#[cfg_attr(feature = "serde_support", derive(Serialize, Deserialize))]
pub struct SbotStat {
/// Current process state.
state: String,
pub state: String,
/// Current process memory usage in bytes.
memory: Option<u32>,
pub memory: Option<u32>,
/// Uptime for the process (if state is `active`).
uptime: Option<String>,
pub uptime: Option<String>,
/// Downtime for the process (if state is `inactive`).
downtime: Option<String>,
pub downtime: Option<String>,
}
impl SbotStat {

View File

@ -1,17 +1,25 @@
use rocket::{get, request::FlashMessage};
use rocket::{get, request::FlashMessage, State};
use rocket_dyn_templates::{tera::Context, Template};
use crate::routes::authentication::Authenticated;
use crate::RocketConfig;
// HELPERS AND ROUTES FOR /settings
/// View and delete currently configured admin.
#[get("/settings")]
pub fn settings_menu(flash: Option<FlashMessage>, _auth: Authenticated) -> Template {
pub fn settings_menu(
_auth: Authenticated,
flash: Option<FlashMessage>,
config: &State<RocketConfig>,
) -> Template {
let mut context = Context::new();
context.insert("back", &Some("/".to_string()));
context.insert("title", &Some("Settings".to_string()));
// pass in mode from managed state so we can conditionally render html elements
context.insert("standalone_mode", &config.standalone_mode);
// check to see if there is a flash message to display
if let Some(flash) = flash {
context.insert("flash_name", &Some(flash.kind().to_string()));

View File

@ -1,16 +1,30 @@
use rocket::get;
use peach_stats::sbot;
use rocket::{get, State};
use rocket_dyn_templates::{tera::Context, Template};
use crate::routes::authentication::Authenticated;
use crate::RocketConfig;
// HELPERS AND ROUTES FOR /status/scuttlebutt
#[get("/scuttlebutt")]
pub fn scuttlebutt_status(_auth: Authenticated) -> Template {
pub fn scuttlebutt_status(_auth: Authenticated, config: &State<RocketConfig>) -> Template {
let mut context = Context::new();
// retrieve go-sbot systemd process stats
let sbot_stats = sbot::sbot_stats().ok();
context.insert("sbot_stats", &sbot_stats);
context.insert("flash_name", &None::<()>);
context.insert("flash_msg", &None::<()>);
context.insert("title", &Some("Scuttlebutt Status"));
// define back arrow url based on mode
if config.standalone_mode {
// return to home page
context.insert("back", &Some("/"));
} else {
// return to status menu
context.insert("back", &Some("/status"));
}
Template::render("status/scuttlebutt", &context.into_json())
}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -4,7 +4,9 @@
<div class="card center">
<!-- BUTTONS -->
<div id="settingsButtons">
{% if standalone_mode == false %}
<a id="network" class="button button-primary center" href="/settings/network" title="Network Settings">Network</a>
{% endif %}
<a id="scuttlebutt" class="button button-primary center" href="/settings/scuttlebutt" title="Scuttlebutt Settings">Scuttlebutt</a>
<a id="admin" class="button button-primary center" href="/settings/admin" title="Administrator Settings">Administration</a>
</div>

View File

@ -31,7 +31,7 @@
</div>
</div>
<!-- horizontal dividing line -->
<hr>
<hr style="color: var(--light-gray);">
<!-- DEVICES AND TRAFFIC GRID -->
<div class="three-grid card-container">
<div class="stack">
@ -110,7 +110,7 @@
</div>
</div>
<!-- horizontal dividing line -->
<hr>
<hr style="color: var(--light-gray);">
<!-- SIGNAL AND TRAFFIC GRID -->
<!-- row of icons representing network statistics -->
<div class="three-grid card-container">

View File

@ -1,17 +1,98 @@
{%- extends "nav" -%}
{%- block card %}
{# ASSIGN VARIABLES #}
{# ---------------- #}
{%- if sbot_stats.memory -%}
{% set mem = sbot_stats.memory / 1024 / 1024 | round -%}
{%- else -%}
{% set mem = "X" -%}
{%- endif -%}
<!-- 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>
<p>Process uptime: </p>
<!-- SBOT INFO BOX -->
<div class="capsule capsule-container {% if sbot_stats.state == "active" %}success-border{% else %}warning-border{% endif %}">
<!-- SBOT STATUS GRID -->
<div class="two-grid" title="go-sbot process state">
<!-- 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 -->
<!-- go-sbot state icon with label -->
<div class="grid-column-1">
<img id="sbotStateIcon" class="center icon {% if sbot_stats.state == "inactive" %}icon-inactive{% endif %}" src="/icons/hermies.svg" alt="Hermies">
<label id="sbotStateLabel" for="sbotStateIcon" class="center label-small font-gray" style="margin-top: 0.5rem;" title="Sbot state">{{ sbot_stats.state | upper }}</label>
</div>
<!-- right column -->
<!-- go-sbot version and uptime / downtime with labels -->
<div class="grid-column-2">
<label class="label-small font-gray" for="sbotVersion" title="go-sbot version">VERSION</label>
<p id="sbotVersion" class="card-text" title="Version">1.1.0-alpha</p>
{% if sbot_stats.state == "active" %}
<label class="label-small font-gray" for="sbotUptime" title="go-sbot uptime" style="margin-top: 0.5rem;">UPTIME</label>
<p id="sbotUptime" class="card-text" title="Uptime">{{ sbot_stats.uptime }}</p>
{%- else -%}
<label class="label-small font-gray" for="sbotDowntime" title="go-sbot downtime" style="margin-top: 0.5rem;">DOWNTIME</label>
<p id="sbotDowntime" class="card-text" title="Downtime">{{ sbot_stats.downtime }}</p>
{%- endif -%}
</div>
</div>
<hr style="color: var(--light-gray);">
<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>
<!--
not implemented yet:
<p class="card-text">Latest sequence number: </p>
<p class="card-text">Network key: </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>
-->
<hr style="color: var(--light-gray);">
<!-- 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{% if not sbot_stats.memory %} icon-inactive{% endif %}" title="Memory" src="/icons/ram.png">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium{% if sbot_stats.state == "inactive" %} font-gray{% endif %}" style="padding-right: 3px;" title="Memory usage of the go-sbot process in MB">{{ mem }}</label>
<label class="label-small {% if sbot_stats.state == "inactive" %}font-gray{% else %}font-near-black{% endif %}">MB</label>
</div>
<label class="label-small font-gray">MEMORY</label>
</div>
</div>
</div>
</div>
{%- endblock card -%}