Add popups displaying specific alerts

iml-gui/crate/src/components/alert_indicator.rs

@@ -3,23 +3,23 @@
 // license that can be found in the LICENSE file.
 
 use crate::{
-    components::{attrs, font_awesome_outline, tooltip, Placement},
+    components::{attrs, font_awesome_outline, popover, tooltip, Placement},
     generated::css_classes::C,
 };
 use im::HashMap;
 use iml_wire_types::{warp_drive::ArcValuesExt, Alert, AlertSeverity, ToCompositeId};
 use seed::{prelude::*, *};
-use std::{cmp::max, collections::BTreeSet, iter::FromIterator, sync::Arc};
+use std::{collections::BTreeSet, iter::FromIterator, sync::Arc};
 
 pub(crate) fn alert_indicator<T>(
-    alerts: &HashMap<i32, Arc<Alert>>,
+    all_alerts: &HashMap<i32, Arc<Alert>>,
     x: &dyn ToCompositeId,
     compact: bool,
     tt_placement: Placement,
 ) -> Node<T> {
     let composite_id = x.composite_id();
 
-    let alerts: Vec<&Alert> = alerts
+    let mut alerts = all_alerts
         .arc_values()
         .filter_map(|x| {
             let xs = x.affected_composite_ids.as_ref()?;
@@ -28,24 +28,16 @@ pub(crate) fn alert_indicator<T>(
 
             Some(x)
         })
-        .collect();
+        .collect::<Vec<_>>();
 
     if compact && alerts.is_empty() {
         return empty![];
     }
 
-    let count = alerts.len();
-
-    let msg = if count == 0 {
-        "No Alerts".into()
-    } else if count == 1 {
-        alerts[0].message.clone()
-    } else {
-        format!("{} Alerts", alerts.len())
-    };
-
-    let health = alerts.into_iter().map(|x| x.severity).fold(AlertSeverity::INFO, max);
+    // Put the most severe alerts first:
+    alerts.sort_unstable_by(|a, b| b.severity.cmp(&a.severity));
 
+    let health = alerts.get(0).map(|a| a.severity).unwrap_or(AlertSeverity::INFO);
     let cls = if health == AlertSeverity::INFO {
         C.text_blue_500
     } else if health == AlertSeverity::WARNING {
@@ -56,13 +48,41 @@ pub(crate) fn alert_indicator<T>(
 
     let icon = font_awesome_outline(class![cls, C.inline, C.h_4, C.w_4], "bell");
 
-    if compact {
+    let count = alerts.len();
+
+    let txt = if count == 0 {
+        "No Alerts".into()
+    } else if count == 1 {
+        alerts[0].message.clone()
+    } else {
+        format!("{} Alerts", alerts.len())
+    };
+
+    let mut el = if compact {
         span![
             class![C.inline_block],
-            span![attrs::container(), icon, tooltip::view(&msg, tt_placement)],
+            attrs::container(),
+            icon,
+            tooltip::view(&txt, tt_placement),
             sup![class![cls], count.to_string()]
         ]
     } else {
-        span![icon, span![class![C.ml_1], &msg]]
+        span![icon, attrs::container(), span![class![C.ml_1], &txt]]
+    };
+
+    if count > 1 {
+        let pop = popover::view(
+            popover::content_view(ul![
+                class![C.list_disc, C.px_4, C.whitespace_no_wrap, C.text_left],
+                alerts.into_iter().map(|a| li![&a.message])
+            ]),
+            Placement::Bottom,
+        );
+        el.add_child(pop)
+            .add_class(C.cursor_pointer)
+            .add_class(C.outline_none)
+            .add_attr(At::TabIndex.as_str(), 0);
     }
+
+    el
 }

iml-gui/crate/src/components/duration_picker.rs

@@ -227,7 +227,7 @@ pub fn view(model: &Model, mut input: Node<Msg>) -> Node<Msg> {
                 open,
                 dropdown_items(model.unit, &model.exclude_units)
             )
-            .merge_attrs(class![C.z_10])
+            .merge_attrs(class![C.z_20])
         ]
     ]
 }

iml-gui/crate/src/components/lock_indicator.rs

@@ -48,7 +48,7 @@ fn indicator<T>(lcks: &HashSet<LockChange>) -> Node<T> {
 
     span![
         attrs::container(),
-        class![C.cursor_pointer],
+        class![C.cursor_pointer, C.outline_none],
         attrs! {At::TabIndex => 0},
         font_awesome(class![C.inline, C.w_4, C.h_4], "lock"),
         tooltip::view(&tooltip.join(", "), Placement::Top),
@@ -59,5 +59,8 @@ fn indicator<T>(lcks: &HashSet<LockChange>) -> Node<T> {
 fn mk_lock_list<T>(locks: &HashSet<&LockChange>) -> Node<T> {
     let mut items: Vec<&String> = locks.iter().map(|x| &x.description).collect();
     items.sort_unstable();
-    ul![class![C.list_disc, C.px_4], items.iter().map(|x| li![x])]
+    ul![
+        class![C.list_disc, C.px_4, C.whitespace_no_wrap, C.text_left],
+        items.iter().map(|x| li![x])
+    ]
 }

iml-gui/crate/src/components/popover.rs

@@ -16,7 +16,7 @@ pub fn title_view<T>(content: &str) -> Node<T> {
 }
 
 pub fn content_view<T>(content: impl View<T>) -> Node<T> {
-    div![class![C.py_2, C.px_3, C.w_64, C.text_sm], content.els()]
+    div![class![C.py_2, C.px_3, C.text_sm], content.els()]
 }
 
 pub fn view<T>(content: impl View<T>, placement: Placement) -> Node<T> {
@@ -67,6 +67,6 @@ pub fn view<T>(content: impl View<T>, placement: Placement) -> Node<T> {
         ],
         popover_style,
         arrow(placement, color),
-        div![class![C.rounded, C.shadow, C.bg_white,], content.els(),]
+        div![class![C.rounded, C.shadow, C.bg_white, C.text_black], content.els(),]
     ]
 }

iml-gui/crate/src/components/tree.rs

@@ -579,7 +579,7 @@ fn tree_host_item_view(cache: &ArcCache, model: &Model, host: &Host) -> Option<N
             tooltip::view(&"View statistics", Placement::Bottom),
             font_awesome(class![C.w_5, C.h_4, C.inline, C.mr_1, C._mt_1], "chart-bar"),
         ],
-        alert_indicator(&cache.active_alert, &host, true, Placement::Bottom),
+        alert_indicator(&cache.active_alert, &host, true, Placement::Top),
         if tree_node.open {
             tree_volume_collection_view(cache, model, &address, host)
         } else {