From 4918f84e85f0395ea981ac17e9b2d9f8e867adcc Mon Sep 17 00:00:00 2001 From: Luis-Hebendanz Date: Mon, 15 Jan 2024 19:41:57 +0100 Subject: [PATCH 1/3] UI: Fixed exception in service view rendering --- pkgs/clan-cli/tests/test_db_api.py | 12 +++- pkgs/ui/src/components/error_boundary.tsx | 42 +++++++++++++ pkgs/ui/src/components/table/index.tsx | 13 ++-- pkgs/ui/src/config/client_1/index.tsx | 17 +++-- pkgs/ui/src/config/client_2/index.tsx | 77 ----------------------- 5 files changed, 73 insertions(+), 88 deletions(-) create mode 100644 pkgs/ui/src/components/error_boundary.tsx delete mode 100644 pkgs/ui/src/config/client_2/index.tsx diff --git a/pkgs/clan-cli/tests/test_db_api.py b/pkgs/clan-cli/tests/test_db_api.py index f17d7bd..8b0a1f4 100644 --- a/pkgs/clan-cli/tests/test_db_api.py +++ b/pkgs/clan-cli/tests/test_db_api.py @@ -79,13 +79,19 @@ def create_service(idx: int, entity: Entity) -> ServiceCreate: uuid=uuids[idx], service_name=f"Carlos Printing{idx}", service_type="3D Printing", - endpoint_url=f"{entity.ip}/v1/print_daemon{idx}", + endpoint_url=f"http://{entity.ip}/v1/print_daemon{idx}", status={"data": ["draft", "registered"]}, other={}, action={ "data": [ - {"name": "register", "path": "/register"}, - {"name": "deregister", "path": "/deregister"}, + { + "name": "register", + "endpoint": f"http://{entity.ip}/v1/print_daemon{idx}/register", + }, + { + "name": "deregister", + "endpoint": f"http://{entity.ip}/v1/print_daemon{idx}/deregister", + }, ] }, entity_did=entity.did, diff --git a/pkgs/ui/src/components/error_boundary.tsx b/pkgs/ui/src/components/error_boundary.tsx new file mode 100644 index 0000000..11b4128 --- /dev/null +++ b/pkgs/ui/src/components/error_boundary.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +class ErrorBoundary extends React.Component { + constructor(props: any) { + super(props); + + // Define a state variable to track whether is an error or not + this.state = { hasError: false }; + } + static getDerivedStateFromError(error: any) { + // Update state so the next render will show the fallback UI + + return { hasError: true }; + } + componentDidCatch(error: any, errorInfo: any) { + // You can use your own error logging service here + console.log({ error, errorInfo }); + } + render() { + // Check if the error is thrown + if (this.state.hasError) { + // You can render any custom fallback UI + return ( +
+

Oops, there is an error!

+ +
+ ); + } + + // Return children components in case of no error + + return this.props.children; + } +} + +export default ErrorBoundary; diff --git a/pkgs/ui/src/components/table/index.tsx b/pkgs/ui/src/components/table/index.tsx index 900b65c..c04cc27 100644 --- a/pkgs/ui/src/components/table/index.tsx +++ b/pkgs/ui/src/components/table/index.tsx @@ -10,6 +10,7 @@ import { NoDataOverlay } from "@/components/noDataOverlay"; import { StyledTableCell, StyledTableRow } from "./style"; import { ICustomTable, CustomTableConfiguration } from "@/types"; import { Checkbox, Skeleton } from "@mui/material"; +import ErrorBoundary from "@/components/error_boundary"; const CustomTable = ({ configuration, data, loading, tkey }: ICustomTable) => { if (loading) @@ -35,11 +36,15 @@ const CustomTable = ({ configuration, data, loading, tkey }: ICustomTable) => { // cover use case if we want to render a component if (render) renderedValue = render(value); - + if (typeof renderedValue === "object" && render === undefined) { + console.warn("Missing render function for column " + cellKey); + } return ( - - {renderedValue} - + + + {renderedValue} + + ); }; diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx index 3a1db60..d467d38 100644 --- a/pkgs/ui/src/config/client_1/index.tsx +++ b/pkgs/ui/src/config/client_1/index.tsx @@ -54,19 +54,28 @@ export const ServiceTableConfig = [ { key: "status", label: "Status", + render: (value: any) => { + let renderedValue: any = ""; + if (Array.isArray(value.data)) { + renderedValue = value.data.join(", "); + } else { + console.error("Status is not an array", value); + } + return renderedValue; + }, }, { - key: "other", + key: "action", label: "Action", render: (value: any) => { let renderedValue: any = ""; + console.log("value", value.data); if (typeof value === "object") renderedValue = ( <> - {value.action.map((actionType: string) => ( + {value.data.map((actionType: any) => ( <> - {actionType} -
+ ))} diff --git a/pkgs/ui/src/config/client_2/index.tsx b/pkgs/ui/src/config/client_2/index.tsx deleted file mode 100644 index 982b2ad..0000000 --- a/pkgs/ui/src/config/client_2/index.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { Button } from "@mui/material"; - -export const Client2ConsumerTableConfig = [ - { - key: "service_name", - label: "Service name", - }, - { - key: "service_type", - label: "Service Type", - }, - { - key: "endpoint_url", - label: "End Point", - render: () => { - return ( - - ); - }, - }, - // { - // key: "entity", - // label: "Entity", - // }, - { - key: "entity_did", - label: "Entity DID", - }, - // { - // key: "network", - // label: "Network", - // }, -]; - -export const Client2ProducerTableConfig = [ - { - key: "service_name", - label: "Service name", - }, - { - key: "service_type", - label: "Service Type", - }, - { - key: "endpoint_url", - label: "End Point", - }, - { - key: "entity_did", - label: "Entity DID", - }, - { - key: "status", - label: "Status", - }, - { - key: "other", - label: "Action", - render: (value: any) => { - let renderedValue: any = ""; - if (typeof value === "object") - renderedValue = ( - <> - {value.action.map((actionType: string) => ( - <> - {actionType} -
- - ))} - - ); - return renderedValue; - }, - }, -]; -- 2.51.0 From 93084c360b15f1326d2c4b0f1bbcdb96e7afdec7 Mon Sep 17 00:00:00 2001 From: Luis-Hebendanz Date: Mon, 15 Jan 2024 19:56:24 +0100 Subject: [PATCH 2/3] UI: Fixed missing types --- pkgs/clan-cli/tests/test_db_api.py | 2 +- pkgs/ui/src/components/error_boundary.tsx | 21 ++++++++++++++------- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/pkgs/clan-cli/tests/test_db_api.py b/pkgs/clan-cli/tests/test_db_api.py index 8b0a1f4..5f6e0ec 100644 --- a/pkgs/clan-cli/tests/test_db_api.py +++ b/pkgs/clan-cli/tests/test_db_api.py @@ -95,7 +95,7 @@ def create_service(idx: int, entity: Entity) -> ServiceCreate: ] }, entity_did=entity.did, - usage=[], + usage=[{"times_consumed": 2, "consumer_entity_did": "did:sov:test:120"}], ) return se diff --git a/pkgs/ui/src/components/error_boundary.tsx b/pkgs/ui/src/components/error_boundary.tsx index 11b4128..f6f8ef1 100644 --- a/pkgs/ui/src/components/error_boundary.tsx +++ b/pkgs/ui/src/components/error_boundary.tsx @@ -1,22 +1,30 @@ import React from "react"; -class ErrorBoundary extends React.Component { - constructor(props: any) { +interface Props { + children: React.ReactNode; +} + +interface State { + hasError: boolean; +} + +class ErrorBoundary extends React.Component { + constructor(props: Props) { super(props); // Define a state variable to track whether is an error or not this.state = { hasError: false }; } - static getDerivedStateFromError(error: any) { + static getDerivedStateFromError(error: Error): State { + // eslint-disable-line // Update state so the next render will show the fallback UI - return { hasError: true }; } - componentDidCatch(error: any, errorInfo: any) { + componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void { // You can use your own error logging service here console.log({ error, errorInfo }); } - render() { + render(): React.ReactNode { // Check if the error is thrown if (this.state.hasError) { // You can render any custom fallback UI @@ -34,7 +42,6 @@ class ErrorBoundary extends React.Component { } // Return children components in case of no error - return this.props.children; } } -- 2.51.0 From 92e584cc5cd796e366469d422f21ef77d744ac19 Mon Sep 17 00:00:00 2001 From: Luis-Hebendanz Date: Tue, 16 Jan 2024 16:19:44 +0100 Subject: [PATCH 3/3] Fixed unused var error --- pkgs/ui/src/components/error_boundary.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkgs/ui/src/components/error_boundary.tsx b/pkgs/ui/src/components/error_boundary.tsx index f6f8ef1..3979460 100644 --- a/pkgs/ui/src/components/error_boundary.tsx +++ b/pkgs/ui/src/components/error_boundary.tsx @@ -16,7 +16,7 @@ class ErrorBoundary extends React.Component { this.state = { hasError: false }; } static getDerivedStateFromError(error: Error): State { - // eslint-disable-line + console.error(error); // Update state so the next render will show the fallback UI return { hasError: true }; } -- 2.51.0