Enhance error component and set hardcoded message when guac fails

Signed-off-by: carlosthe19916 <[email protected]>
desmax74 · Apr 8, 2024 · 129a5a6 · 129a5a6
1 parent e8907fd
commit 129a5a6
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 33 deletions.
diff --git a/spog/ui/crates/common/src/error/components.rs b/spog/ui/crates/common/src/error/components.rs
@@ -17,12 +17,18 @@ pub struct ApiErrorProperties {
 pub fn api_error(props: &ApiErrorProperties) -> Html {
     match &*props.error.0 {
         ApiErrorKind::Api {
-            status: _,
+            status,
             details: ApiErrorDetails::Information(info),
         } => {
-            html!(
-                <Error title={props.title.clone()} message={info.message.clone()} err={info.details.clone()}/>
-            )
+            if status.as_u16() >= 500 {
+                html!(
+                    <Error title={"Internal server error"} message={info.message.clone()} err={info.details.clone()}/>
+                )
+            } else {
+                html!(
+                    <Error title={props.title.clone()} message={info.message.clone()} err={info.details.clone()}/>
+                )
+            }
         }
         _ => {
             html!(<Error title={props.title.clone()} message={props.message.clone().unwrap_or_else(|| "Error processing request".into() )} err={props.error.to_string()} />)
@@ -40,6 +46,9 @@ pub struct ErrorProperties {
 
     #[prop_or_default]
     pub err: String,
+
+    #[prop_or_default]
+    pub actions: Option<Html>,
 }
 
 #[function_component(Error)]
@@ -50,26 +59,47 @@ pub fn error(props: &ErrorProperties) -> Html {
 
     html!(
         <Bullseye>
-            <Grid gutter=true>
-                <GridItem cols={[2]}>
+            <Stack gutter=true>
+                <StackItem>
                     <div style="text-align: center;">
-                        <img src={error_image_src} alt="Error" />
+                        <img src={error_image_src} alt="Error" style="height: 52px;" />
                     </div>
-                </GridItem>
-                <GridItem cols={[10]}>
-                    <Title>{props.title.clone()}</Title>
-                    <Content>
-                        if let Some(message)  = &props.message {
-                            <p>{ &message }</p>
-                            <ExpandableSection>
-                                <p>{ &props.err }</p>
-                            </ExpandableSection>
-                        } else {
-                            <p>{ &props.err }</p>
-                        }
-                    </Content>
-                </GridItem>
-            </Grid>
+                </StackItem>
+                <StackItem>
+                    <Bullseye>
+                        <Stack>
+                            <StackItem>
+                                <div style="text-align: center;">
+                                    <Title size={Size::XLarge}>{props.title.clone()}</Title>
+                                </div>
+                            </StackItem>
+                            <StackItem>
+                                <Content>
+                                    if let Some(message)  = &props.message {
+                                        <p style="text-align: center;">{ &message }</p>
+                                        if !props.err.is_empty() {
+                                            <div style="max-width: 300px;">
+                                                <ExpandableSection>
+                                                    <p>{ &props.err }</p>
+                                                </ExpandableSection>
+                                            </div>
+                                        }
+                                    } else {
+                                        <p>{ &props.err }</p>
+                                    }
+                                </Content>
+                            </StackItem>
+                        </Stack>
+                    </Bullseye>
+                </StackItem>
+                if let Some(actions) = &props.actions {
+                    <StackItem>
+                        <div style="text-align: center;">
+                            {actions.clone()}
+                        </div>
+                    </StackItem>
+                }
+            </Stack>
         </Bullseye>
     )
 }
diff --git a/spog/ui/crates/common/src/error/mod.rs b/spog/ui/crates/common/src/error/mod.rs
@@ -65,7 +65,7 @@ impl Display for ApiErrorDetails {
     fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
         match self {
             Self::Information(info) => {
-                write!(f, "{} ({})", info.message, info.error)
+                write!(f, "{} ({}) - {}", info.message, info.error, info.details)
             }
             Self::Plain(s) => f.write_str(s),
             Self::Empty => f.write_str("no information"),
@@ -75,7 +75,7 @@ impl Display for ApiErrorDetails {
 }
 
 #[derive(Clone, Debug)]
-pub struct ApiError(Rc<ApiErrorKind>);
+pub struct ApiError(pub Rc<ApiErrorKind>);
 
 impl Deref for ApiError {
     type Target = ApiErrorKind;

diff --git a/spog/ui/src/pages/sbom_report/mod.rs b/spog/ui/src/pages/sbom_report/mod.rs
@@ -8,7 +8,10 @@ use patternfly_yew::prelude::*;
 use serde_json::{json, Value};
 use spog_model::prelude::*;
 use spog_ui_backend::use_backend;
-use spog_ui_common::error::components::ApiError;
+use spog_ui_common::error::{
+    components::{ApiError, Error},
+    ApiErrorKind,
+};
 use spog_ui_components::{
     common::{NotFound, PageHeading},
     time::Date,
@@ -115,14 +118,34 @@ pub fn sbom(props: &SbomReportProperties) -> Html {
                 </>
             )
         }
-        UseAsyncState::Ready(Err(err)) => html!(
-            <>
-                <PageHeading sticky=false>{ props.id.clone() }</PageHeading>
-                <PageSection fill={PageSectionFill::Fill} variant={PageSectionVariant::Light}>
-                    <ApiError error={err.clone()} />
-                </PageSection>
-            </>
-        ),
+        UseAsyncState::Ready(Err(err)) => {
+            let error_component = match &*err.0 {
+                // If >= 500 error then assume we did something wrong and just render a nice message rather than the verbose but not friendly message drom the API
+                ApiErrorKind::Api { status, details } if status.as_u16() >= 500 => {
+                    log::error!("Server error: {}", details);
+                    html!(
+                        <Error
+                            title={"Internal server error"}
+                            message={"The error might be caused due to inconsistencies in the content of the SBOM file."}
+                            actions={html!(
+                                <>
+                                    <a href="https://access.redhat.com/documentation/en-us/red_hat_trusted_profile_analyzer/2024-q1/html/reference_guide/creating-an-sbom-manifest-file_ref">{"SBOM Reference Guide"}{" "}{Icon::ExternalLinkAlt}</a>
+                                </>
+                            )}
+                        />
+                    )
+                }
+                _ => html!(<ApiError error={err.clone()} />),
+            };
+
+            html!(
+                <>
+                    <PageSection fill={PageSectionFill::Fill} variant={PageSectionVariant::Light}>
+                        {error_component}
+                    </PageSection>
+                </>
+            )
+        }
     }
 }