-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[UI] Add Validation and Error Boundaries #8833
Changes from all commits
abb5c8f
33cf4b4
457d0ff
13f82fc
5947263
6964d92
6063886
4b5da2b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,30 @@ | ||||||
import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary"; | ||||||
|
||||||
function Fallback({ error }) { | ||||||
// Call resetErrorBoundary() to reset the error boundary and retry the render. | ||||||
|
||||||
return ( | ||||||
<div role="alert"> | ||||||
<p>Something went wrong:</p> | ||||||
<pre style={{ color : "red" }}>{error.message}</pre> | ||||||
</div> | ||||||
) | ||||||
} | ||||||
|
||||||
export const ErrorBoundary = ({ children ,...props }) => { | ||||||
return ( | ||||||
<ReactErrorBoundary FallbackComponent={Fallback} {...props}> | ||||||
{children} | ||||||
</ReactErrorBoundary> | ||||||
); | ||||||
} | ||||||
|
||||||
export const withErrorBoundary = (Component) => { | ||||||
const WrappedWithErrorBoundary = (props) => ( | ||||||
<ErrorBoundary FallbackComponent> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
Or I am missing something? |
||||||
<Component {...props} /> | ||||||
</ErrorBoundary> | ||||||
); | ||||||
|
||||||
return WrappedWithErrorBoundary; | ||||||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,6 +3,8 @@ import AlertIcon from "../../assets/icons/AlertIcon"; | |
import ErrorIcon from "../../assets/icons/ErrorIcon.js" | ||
import { Colors } from "../../themes/app"; | ||
import ReadIcon from "../../assets/icons/ReadIcon"; | ||
import Ajv from "ajv"; | ||
import _ from "lodash"; | ||
|
||
export const SEVERITY = { | ||
INFO : "informational", | ||
|
@@ -37,4 +39,86 @@ export const SEVERITY_STYLE = { | |
color : NOTIFICATIONCOLORS.WARNING | ||
}, | ||
|
||
} | ||
|
||
//TODO: This should be generated from OPENAPI schema | ||
const EVENT_SCHEMA = { | ||
type : "object", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The schema is already present but the contract b/w fronted and backend is missing. also, this schema is inaccurate as it lacks category and action There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. we were not using that in frontend anywhere yet , thats why forgot . will add those |
||
properties : { | ||
id : { type : "string" }, | ||
description : { | ||
type : "string", | ||
default : "" | ||
}, | ||
severity : { | ||
type : "string", | ||
enum : Object.values(SEVERITY), | ||
default : SEVERITY.INFO | ||
}, | ||
status : { | ||
type : "string", | ||
enum : Object.values(STATUS), | ||
default : STATUS.UNREAD | ||
}, | ||
created_at : { type : "string" }, | ||
updated_at : { type : "string" }, | ||
user_id : { type : "string" }, | ||
system_id : { type : "string" }, | ||
operation_id : { type : "string" }, | ||
action : { type : "string" }, | ||
metadata : { | ||
type : "object", | ||
} | ||
}, | ||
required : ["id", "severity", "status", "created_at", "updated_at", "user_id", "system_id", "action"] | ||
} | ||
|
||
|
||
// Validate event against EVENT_SCHEMA and return [isValid,validatedEvent] | ||
export const validateEvent = (event) => { | ||
const eventCopy = _.cloneDeep(event) || {}; | ||
const ajv = new Ajv({ | ||
useDefaults : true, | ||
|
||
}); | ||
const validate = ajv.compile(EVENT_SCHEMA); | ||
const valid = validate(eventCopy); | ||
return [valid, eventCopy]; | ||
} | ||
|
||
// return validated events (adds default values if not present) | ||
export const validateEvents = (events) => { | ||
return events.map((event) => { | ||
const [isValid, validatedEvent] = validateEvent(event) | ||
return isValid ? validatedEvent : null | ||
}).filter((event) => event) | ||
} | ||
|
||
|
||
|
||
const EVENT_METADATA_SCHEMA = { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This isn’t always the case, in long operations i.e. an operation which invoked multiple other operation the metadata contains a summary which is not an error specifically. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Very good point regarding errors being one of a number of different types of events. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks Uzair , i have not considered that . do you have an example response for this kind of situation |
||
type : "object", | ||
properties : { | ||
error : { | ||
type : "object", | ||
properties : { | ||
Code : { type : "string" }, | ||
LongDescription : { type : "array", items : { type : "string" }, default : [] }, | ||
ProbableCause : { type : "array", items : { type : "string" }, default : [] }, | ||
Severity : { type : "number", default : 1 }, | ||
ShortDescription : { type : "array", items : { type : "string" }, default : [] }, | ||
SuggestedRemediation : { type : "array", items : { type : "string" }, default : [] }, | ||
}, | ||
required : ["Code", "LongDescription", "ProbableCause", "Severity", "ShortDescription", "SuggestedRemediation"] | ||
}, | ||
}, | ||
required : ["error"] | ||
} | ||
|
||
export const validateEventMetadata = (metadata) => { | ||
const metadataCopy = _.cloneDeep(metadata) || {}; | ||
const ajv = new Ajv(); | ||
const validate = ajv.compile(EVENT_METADATA_SCHEMA); | ||
const valid = validate(metadataCopy); | ||
return [valid, metadataCopy]; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.