more ui work
This commit is contained in:
parent
0e8abe2701
commit
211a3f9477
4 changed files with 31 additions and 14 deletions
|
@ -18,7 +18,8 @@ pub struct Status {
|
|||
|
||||
#[derive(Serialize, Debug)]
|
||||
pub struct QueryResults {
|
||||
pub last_update: DateTime<Utc>,
|
||||
pub timestamp: DateTime<Utc>,
|
||||
pub timestamp_str: String,
|
||||
pub refresh_time: u64,
|
||||
pub config: Config,
|
||||
pub statuses: Vec<Status>,
|
||||
|
|
|
@ -41,7 +41,8 @@ fn main() {
|
|||
env_logger::init();
|
||||
|
||||
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(),
|
||||
config: config.clone(),
|
||||
statuses: update_status(&config),
|
||||
|
|
|
@ -5,7 +5,8 @@ use reqwest::{Client, Url, UrlError};
|
|||
pub fn update_state(state: State) {
|
||||
let new_statuses = { Some(update_status(&state.read().unwrap().config)) };
|
||||
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();
|
||||
}
|
||||
|
||||
|
|
|
@ -4,30 +4,40 @@
|
|||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Endstat</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:200|Source+Code+Pro:400" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: #212121;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
background-color: #424242;
|
||||
align-items: center;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
p { margin: 0; }
|
||||
|
||||
h1 { display: inline; }
|
||||
h1 { display: block; margin: 0; }
|
||||
h3 { margin-top: 0; }
|
||||
|
||||
.indicator {
|
||||
width: 1rem;
|
||||
|
@ -37,20 +47,24 @@
|
|||
.ok { background-color: green; }
|
||||
.warn { background-color: yellow; }
|
||||
.error { background-color: red; }
|
||||
.error-msg { font-family: 'Source Code Pro', monospace;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Welcome!</h1>
|
||||
<h1>{{ results.last_update }}</h1>
|
||||
<header>
|
||||
<h1>Status</h1>
|
||||
<p>{{ results.timestamp_str }}</p>
|
||||
</header>
|
||||
{% for status in results.statuses -%}
|
||||
<section>
|
||||
<p>{{ status.domain }}</p>
|
||||
<p>{{ status.endpoint }}</p>
|
||||
<div>
|
||||
<!-- <p>{{ status.domain }}</p> -->
|
||||
<h3>{{ status.endpoint }}</h3>
|
||||
<p>{{ status.location }}</p>
|
||||
{% if status.error %}<p>{{ status.error }}</p>{% endif %}
|
||||
<div class="indicator {% if status.status == 0 %}ok{% elif status.status == 1 %}warn{% else %}error{% endif %}"></div>
|
||||
|
||||
{% if status.error %}<p class="error-msg">{{ status.error }}</p>{% endif %}
|
||||
</div>
|
||||
<aside class="indicator {% if status.status == 0 %}ok{% elif status.status == 1 %}warn{% else %}error{% endif %}"></aside>
|
||||
</section>
|
||||
{% endfor -%}
|
||||
</main>
|
||||
|
|
Loading…
Reference in a new issue