Announcements, halfway done

ferdi05 · Jul 4, 2022 · 3aef1a5 · 3aef1a5
1 parent da69a80
commit 3aef1a5
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 28 deletions.
diff --git a/res/assets/stylesheets/common.css b/res/assets/stylesheets/common.css
@@ -156,7 +156,7 @@ a:hover {
 }
 
 .has-tooltip .tooltip .tooltip-value .tooltip-value-text .tooltip-main {
-  color: #ffffff;
+  color: #FFFFFF;
 }
 
 .has-tooltip .tooltip .tooltip-value .tooltip-value-text .tooltip-label {
@@ -268,6 +268,11 @@ a:hover {
   border-color: rgba(225, 0, 0, 0.10);
 }
 
+.alert-announce-background,
+.alert-announce-background-before:before {
+  background-color: #1972F5;
+}
+
 @media screen and (max-width: 1020px) {
   .wrapper {
     width: calc(100% - 40px);

diff --git a/res/assets/stylesheets/index.css b/res/assets/stylesheets/index.css
@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 header {
-  background: #ffffff;
+  background: #FFFFFF;
   height: 62px;
   overflow: hidden;
   position: relative;
@@ -65,7 +65,7 @@ header nav ul li a {
 }
 
 header nav ul li a.nav-support {
-  color: #ffffff;
+  color: #FFFFFF;
   background-color: rgba(0, 0, 0, 0.85);
   letter-spacing: 0.10px;
   padding: 0 17px;
@@ -80,13 +80,13 @@ header nav ul li a.nav-support:active {
 
 header nav ul li a.nav-website {
   color: #000000;
-  background-color: #ffffff;
+  background-color: #FFFFFF;
   text-decoration: underline;
   padding: 0 15px;
 }
 
 aside {
-  color: #ffffff;
+  color: #FFFFFF;
   padding: 16px 0 19px;
   text-align: center;;
   overflow: hidden;
@@ -140,6 +140,39 @@ main section {
   border-radius: 2px;
 }
 
+main section.general:before,
+main section.announcement:before {
+  content: "";
+  width: 4px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
+main section.general .general-inner,
+main section.announcement .announcement-inner {
+  letter-spacing: -0.10px;
+  hyphens: auto;
+  word-wrap: break-word;
+  word-break: break-word;
+  padding: 0 0 1px 24px;
+  flex: 1;
+}
+
+main section.general .general-inner h2,
+main section.announcement .announcement-inner h4 {
+  font-size: 15.5px;
+}
+
+main section.general .general-inner p,
+main section.announcement .announcement-inner p {
+  font-size: 13px;
+  line-height: 18px;
+}
+
 main section.general .general-icon .badge {
   width: 42px;
   height: 42px;
@@ -153,18 +186,10 @@ main section.general {
   position: relative;
 }
 
-main section.general:before {
-  content: "";
-  width: 4px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-}
-
-main section.general:before {
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
+main section.general.announcement-preceding {
+  margin-bottom: 0;
+  z-index: 1;
+  box-shadow: 0 1px 3px 0 rgba(15, 31, 64, 0.08);
 }
 
 main section.general .general-icon {
@@ -174,16 +199,9 @@ main section.general .general-icon {
 
 main section.general .general-inner {
   border-left: 1px solid rgba(0, 0, 0, 0.08);
-  letter-spacing: -0.10px;
-  hyphens: auto;
-  word-wrap: break-word;
-  word-break: break-word;
-  padding: 0 0 1px 24px;
-  flex: 1;
 }
 
 main section.general .general-inner h2 {
-  font-size: 15.5px;
   margin-bottom: 11px;
 }
 
@@ -193,15 +211,52 @@ main section.general .general-inner p a {
 }
 
 main section.general .general-inner p {
-  font-size: 13px;
-  line-height: 18px;
   margin-top: 3px;
 }
 
 main section.general .general-inner p a {
   text-decoration: underline;
 }
 
+main section.announcement {
+  margin-top: -5px;
+  padding-top: 26px;
+  padding-bottom: 19px;
+  display: flex;
+  position: relative;
+  z-index: 0;
+}
+
+main section.announcement .announcement-inner h4 {
+  margin-top: -1px;
+  margin-bottom: 9px;
+}
+
+main section.announcement .announcement-inner time {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 12.5px;
+  line-height: 21px;
+  margin-top: 12px;
+  display: block;
+}
+
+main section.announcement .announcement-badge {
+  color: #FFFFFF;
+  font-size: 12.5px;
+  line-height: 30px;
+  padding: 0 14px;
+  display: inline-block;
+  border-radius: 2px;
+}
+
+main section.announcement .announcement-unit {
+  margin-bottom: 22px;
+}
+
+main section.announcement .announcement-unit:last-child {
+  margin-bottom: 0;
+}
+
 main section.probe {
   margin-top: 24px;
   padding-top: 22px;
@@ -278,7 +333,7 @@ main section.probe ul li .node {
 }
 
 main section.probe ul li .node .replica {
-  color: #ffffff;
+  color: #FFFFFF;
   font-size: 12px;
   text-align: center;
   line-height: 23px;
@@ -360,6 +415,20 @@ footer p a {
   main section.general .general-inner p {
     margin-top: 9px;
   }
+
+  main section.announcement {
+    flex-direction: column;
+  }
+
+  main section.announcement .announcement-badge {
+    text-align: center;
+    display: block;
+  }
+
+  main section.announcement .announcement-inner {
+    margin-top: 18px;
+    padding-left: 0;
+  }
 }
 
 @media screen and (max-width: 480px) {
@@ -406,6 +475,11 @@ footer p a {
     padding-right: 14px;
   }
 
+  main section.announcement {
+    padding-top: 25px;
+    padding-bottom: 16px;
+  }
+
   footer {
     padding-bottom: 28px;
   }

diff --git a/res/assets/templates/index.tera b/res/assets/templates/index.tera
@@ -80,7 +80,7 @@
     </aside>
 
     <main class="wrapper">
-      <section class="general status-{{ states.status | escape }}-background-before">
+      <section class="general status-{{ states.status | escape }}-background-before{% if announcements | length > 0 %} announcement-preceding{% endif %}">
         <div class="general-icon">
           <div class="badge badge-large badge-status-{{ states.status | escape }}"></div>
         </div>
@@ -112,6 +112,27 @@
         </div>
       </section>
 
+      {% if announcements | length > 0 %}
+        <section class="announcement alert-announce-background-before">
+          <div class="announcement-label">
+            <span class="announcement-badge alert-announce-background font-sans-semibold">Announcement</span>
+          </div>
+
+          <div class="announcement-inner">
+            {% for announcement in announcements %}
+              <div class="announcement-unit">
+                <h4 class="font-sans-semibold">{{ announcement.title | escape }}</h4>
+                <p class="font-sans-regular">{{ announcement.text | escape | linebreaksbr }}</p>
+
+                {% if announcement.date %}
+                  <time class="font-sans-regular">Published on {{ announcement.date | escape }}</time>
+                {% endif %}
+              </div>
+            {% endfor %}
+          </div>
+        </section>
+      {% endif %}
+
       {% for _, probe in states.probes %}
         <section class="probe">
           <div class="title">

diff --git a/src/responder/announcements.rs b/src/responder/announcements.rs
@@ -0,0 +1,25 @@
+// Vigil
+//
+// Microservices Status Page
+// Copyright: 2022, Valerian Saliou <[email protected]>
+// License: Mozilla Public License v2.0 (MPL v2.0)
+
+use std::sync::Arc;
+use std::sync::RwLock;
+
+lazy_static! {
+    pub static ref STORE: Arc<RwLock<Store>> = Arc::new(RwLock::new(Store {
+        announcements: Vec::new(),
+    }));
+}
+
+pub struct Store {
+    pub announcements: Vec<Announcement>,
+}
+
+#[derive(Serialize)]
+pub struct Announcement {
+    title: String,
+    text: String,
+    date: Option<String>,
+}
diff --git a/src/responder/context.rs b/src/responder/context.rs
@@ -8,6 +8,7 @@ use time;
 
 use url_serde::SerdeUrl;
 
+use super::announcements::Announcement;
 use crate::prober::states::ServiceStates;
 use crate::APP_CONF;
 
@@ -74,6 +75,7 @@ impl Default for IndexContextEnvironment {
 #[derive(Serialize)]
 pub struct IndexContext<'a, 'b> {
     pub states: &'a ServiceStates,
+    pub announcements: &'a Vec<Announcement>,
     pub environment: &'a IndexContextEnvironment,
     pub config: &'b IndexContextConfig,
 }

diff --git a/src/responder/mod.rs b/src/responder/mod.rs
@@ -4,6 +4,7 @@
 // Copyright: 2018, Valerian Saliou <[email protected]>
 // License: Mozilla Public License v2.0 (MPL v2.0)
 
+mod announcements;
 mod context;
 mod payload;
 mod routes;

diff --git a/src/responder/routes.rs b/src/responder/routes.rs
@@ -8,6 +8,7 @@ use actix_files::NamedFile;
 use actix_web::{get, web, web::Data, web::Json, HttpResponse};
 use tera::Tera;
 
+use super::announcements::STORE as ANNOUNCEMENTS_STORE;
 use super::context::{IndexContext, INDEX_CONFIG, INDEX_ENVIRONMENT};
 use super::payload::ReporterPayload;
 use crate::prober::manager::{run_dispatch_plugins, STORE as PROBER_STORE};
@@ -23,6 +24,7 @@ async fn index(tera: Data<Tera>) -> HttpResponse {
     let context = {
         IndexContext {
             states: &PROBER_STORE.read().unwrap().states,
+            announcements: &ANNOUNCEMENTS_STORE.read().unwrap().announcements,
             environment: &*INDEX_ENVIRONMENT,
             config: &*INDEX_CONFIG,
         }