feat: implement CVSS indicator from sketches

trustification · Oct 6, 2023 · 66be959 · 66be959
1 parent 9382a42
commit 66be959
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 14 deletions.
diff --git a/spog/ui/Cargo.lock b/spog/ui/Cargo.lock
diff --git a/spog/ui/Cargo.toml b/spog/ui/Cargo.toml
@@ -89,7 +89,7 @@ members = [
 #yew-nested-router = { git = "https://github.com/ctron/yew-nested-router", rev = "9689db446dee7030325884df768d0c2e84f353d6" }
 #yew-more-hooks = { git = "https://github.com/ctron/yew-more-hooks", rev = "fc0af774aa925edcd5a544e562619ecb539942f8" }
 #yew-more-hooks = { path = "../../../yew-more-hooks" }
-patternfly-yew = { git = "https://github.com/ctron/patternfly-yew", rev = "93f953ff0fc63ac08200948b4b1df72661e674f0" } # FIXME: awaiting release
+patternfly-yew = { git = "https://github.com/ctron/patternfly-yew", rev = "5b81964a473c6b7df2e1b57e282c093031ac941e" } # FIXME: awaiting release
 #patternfly-yew = { path = "../../../patternfly-yew" }
 
 #analytics-next = { git = "https://github.com/ctron/analytics-next-rs", rev = "9c95122f4e6dc308c90b945bd0f1925faf7cb828" } # FIXME: awaiting release

diff --git a/spog/ui/crates/common/src/utils/cvss.rs b/spog/ui/crates/common/src/utils/cvss.rs
@@ -50,6 +50,12 @@ impl Severity {
     }
 }
 
+impl ToHtml for Severity {
+    fn to_html(&self) -> Html {
+        self.into_html()
+    }
+}
+
 impl From<Severity> for Html {
     fn from(value: Severity) -> Self {
         value.into_html()

diff --git a/spog/ui/crates/common/src/utils/mod.rs b/spog/ui/crates/common/src/utils/mod.rs
@@ -80,3 +80,25 @@ where
         }])
     }
 }
+
+impl<T> ToHtml for OrNone<T>
+where
+    T: Into<Html> + Clone,
+{
+    fn to_html(&self) -> Html {
+        match &self.0 {
+            Some(value) => value.clone().into(),
+            None => html!(<i>{OrNone::<T>::DEFAULT_NA}</i>),
+        }
+    }
+
+    fn into_html(self) -> Html
+    where
+        Self: Sized,
+    {
+        match self.0 {
+            Some(value) => value.into(),
+            None => html!(<i>{OrNone::<T>::DEFAULT_NA}</i>),
+        }
+    }
+}
diff --git a/spog/ui/crates/components/src/cvss.rs b/spog/ui/crates/components/src/cvss.rs
@@ -11,18 +11,53 @@ pub struct CvssScoreProperties {
 
 #[function_component(CvssScore)]
 pub fn cvss_information(props: &CvssScoreProperties) -> Html {
-    let label = format!("{}", props.cvss.score);
+    // let label = format!("{}", props.cvss.score);
 
-    let (color, outline) = match props.cvss.to_severity() {
-        Severity::None => (Color::Grey, true),
-        Severity::Low => (Color::Orange, true),
-        Severity::Medium => (Color::Orange, false),
-        Severity::High => (Color::Red, false),
-        Severity::Critical => (Color::Purple, false),
+    let icon = |label: &str, severity: Severity| {
+        html!(<>
+            { severity }
+            {" " }
+            { label }
+        </>)
     };
 
+    let (variant, description, style) = match props.cvss.to_severity() {
+        n @ Severity::None => (ProgressVariant::Default, icon("", n), ""),
+        n @ Severity::Low => (
+            ProgressVariant::Default,
+            icon("Low", n),
+            r#"
+            --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-global--info-color--100);
+            --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-global--info-color--100)
+            "#,
+        ),
+        n @ Severity::Medium => (ProgressVariant::Warning, icon("Medium", n), ""),
+        n @ Severity::High => (ProgressVariant::Danger, icon("High", n), ""),
+        n @ Severity::Critical => (
+            ProgressVariant::Danger,
+            icon("Critical", n),
+            r#"
+            --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-global--palette--purple-400);
+            --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-global--palette--purple-400)
+            "#,
+        ),
+    };
+
+    let style = format!("--pf-v5-c-progress--GridGap: 0.12rem;{style}");
+
+    let value_text = format!("{:.1}/10", props.cvss.score);
+
     html!(
-        <Label {label} {color} {outline}/>
+        <Progress
+            {variant}
+            {description}
+            range={0f64..10f64}
+            {value_text}
+            value={props.cvss.score as f64}
+            size={ProgressSize::Small}
+            no_icon=true
+            {style}
+        />
     )
 }
 

diff --git a/spog/ui/crates/components/src/theme.rs b/spog/ui/crates/components/src/theme.rs
@@ -38,7 +38,7 @@ pub fn themed(props: &ChildrenProperties) -> Html {
 
     html!(
         <ContextProvider<ThemeContext> {context}>
-            { for props.children.iter() }
+            { props.children.clone() }
         </ContextProvider<ThemeContext>>
     )
 }

diff --git a/spog/ui/src/app.rs b/spog/ui/src/app.rs
@@ -95,6 +95,6 @@ pub fn oauth_configured(props: &ChildrenProperties) -> Html {
         Some(OAuth2Context::Failed(err)) => {
             html!(<Error {err}/>)
         }
-        Some(_) => html!({ for props.children.iter() }),
+        Some(_) => html!({ props.children.clone() }),
     }
 }
diff --git a/spog/ui/src/console/mod.rs b/spog/ui/src/console/mod.rs
@@ -174,7 +174,7 @@ fn authenticated_page(props: &ChildrenProperties) -> Html {
 
     html!(
         <Page {brand} {sidebar} {tools}>
-            { for props.children.iter() }
+            { props.children.clone() }
         </Page>
     )
 }
@@ -184,7 +184,7 @@ fn authenticated_page(props: &ChildrenProperties) -> Html {
 fn non_authenticated_page(props: &ChildrenProperties) -> Html {
     html!(
         <Page brand={html!(<Brand/>)}>
-            { for props.children.iter() }
+            { props.children.clone() }
         </Page>
     )
 }