more ui work

This commit is contained in:
Edward Shen 2019-05-01 16:15:18 -04:00
parent 0e8abe2701
commit 211a3f9477
Signed by: edward
GPG key ID: F350507060ED6C90
4 changed files with 31 additions and 14 deletions

View file

@ -18,7 +18,8 @@ pub struct Status {
#[derive(Serialize, Debug)] #[derive(Serialize, Debug)]
pub struct QueryResults { pub struct QueryResults {
pub last_update: DateTime<Utc>, pub timestamp: DateTime<Utc>,
pub timestamp_str: String,
pub refresh_time: u64, pub refresh_time: u64,
pub config: Config, pub config: Config,
pub statuses: Vec<Status>, pub statuses: Vec<Status>,

View file

@ -41,7 +41,8 @@ fn main() {
env_logger::init(); env_logger::init();
let state: State = Arc::new(RwLock::new(QueryResults { let state: State = Arc::new(RwLock::new(QueryResults {
last_update: Utc::now(), timestamp: Utc::now(),
timestamp_str: Utc::now().format("%Y-%m-%d %H:%M:%S").to_string(),
refresh_time: config.refresh_time.clone(), refresh_time: config.refresh_time.clone(),
config: config.clone(), config: config.clone(),
statuses: update_status(&config), statuses: update_status(&config),

View file

@ -5,7 +5,8 @@ use reqwest::{Client, Url, UrlError};
pub fn update_state(state: State) { pub fn update_state(state: State) {
let new_statuses = { Some(update_status(&state.read().unwrap().config)) }; let new_statuses = { Some(update_status(&state.read().unwrap().config)) };
let mut write_state = state.try_write().expect("Could not unlock"); let mut write_state = state.try_write().expect("Could not unlock");
write_state.last_update = Utc::now(); write_state.timestamp = Utc::now();
write_state.timestamp_str = Utc::now().format("%Y-%m-%d %H:%M:%S").to_string();
write_state.statuses = new_statuses.unwrap(); write_state.statuses = new_statuses.unwrap();
} }

View file

@ -4,30 +4,40 @@
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Endstat</title> <title>Endstat</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:200|Source+Code+Pro:400" rel="stylesheet">
<style> <style>
body { body {
background-color: #212121; background-color: #212121;
margin: 0; margin: 0;
color: #fff; color: #fff;
font-family: 'Montserrat', sans-serif;
} }
main { main {
width: 700px; width: 700px;
margin: 0 auto; margin: 0 auto;
margin-top: 5rem;
}
header {
display: flex;
align-items: flex-end;
justify-content: space-between;
} }
section { section {
display: flex; display: flex;
align-items: stretch;
justify-content: space-between;
background-color: #424242; background-color: #424242;
align-items: center;
margin: 1rem 0; margin: 1rem 0;
padding: 1rem; padding: 1rem;
border-radius: 1rem; border-radius: 1rem;
} }
p { margin: 0; } p { margin: 0; }
h1 { display: block; margin: 0; }
h1 { display: inline; } h3 { margin-top: 0; }
.indicator { .indicator {
width: 1rem; width: 1rem;
@ -37,20 +47,24 @@
.ok { background-color: green; } .ok { background-color: green; }
.warn { background-color: yellow; } .warn { background-color: yellow; }
.error { background-color: red; } .error { background-color: red; }
.error-msg { font-family: 'Source Code Pro', monospace;}
</style> </style>
</head> </head>
<body> <body>
<main> <main>
<h1>Welcome!</h1> <header>
<h1>{{ results.last_update }}</h1> <h1>Status</h1>
<p>{{ results.timestamp_str }}</p>
</header>
{% for status in results.statuses -%} {% for status in results.statuses -%}
<section> <section>
<p>{{ status.domain }}</p> <div>
<p>{{ status.endpoint }}</p> <!-- <p>{{ status.domain }}</p> -->
<h3>{{ status.endpoint }}</h3>
<p>{{ status.location }}</p> <p>{{ status.location }}</p>
{% if status.error %}<p>{{ status.error }}</p>{% endif %} {% if status.error %}<p class="error-msg">{{ status.error }}</p>{% endif %}
<div class="indicator {% if status.status == 0 %}ok{% elif status.status == 1 %}warn{% else %}error{% endif %}"></div> </div>
<aside class="indicator {% if status.status == 0 %}ok{% elif status.status == 1 %}warn{% else %}error{% endif %}"></aside>
</section> </section>
{% endfor -%} {% endfor -%}
</main> </main>