From 59e33f3ead2877a23bbe45fe26b0896513f0fe04 Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Sun, 21 Jan 2024 16:49:34 +0100 Subject: [PATCH 1/5] add register, deregister actions --- .../src/components/sequence_diagram/index.tsx | 7 +- pkgs/ui/src/config/client_1/index.tsx | 80 ++++++++----------- 2 files changed, 38 insertions(+), 49 deletions(-) diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx index 43d29f3..6980435 100644 --- a/pkgs/ui/src/components/sequence_diagram/index.tsx +++ b/pkgs/ui/src/components/sequence_diagram/index.tsx @@ -14,7 +14,7 @@ import { NoDataOverlay } from "../noDataOverlay"; import { useGetAllEventmessages } from "@/api/eventmessages/eventmessages"; import { mutate } from "swr"; import { LoadingOverlay } from "../join/loadingOverlay"; -import { generateMermaidString } from "./helpers"; +import { dataFromBE, generateMermaidString } from "./helpers"; const SequenceDiagram = () => { const { @@ -25,9 +25,10 @@ const SequenceDiagram = () => { const mermaidRef: any = useRef(null); const [scale, setScale] = useState(1); - const hasData = eventMessagesData?.data && eventMessagesData?.data.length > 0; + // const hasData = eventMessagesData?.data && eventMessagesData?.data.length > 0; + const hasData = true; - const mermaidString = generateMermaidString(eventMessagesData?.data); + const mermaidString = generateMermaidString(dataFromBE); useEffect(() => { if (!loadingEventMessages && hasData) diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx index e1ad33e..2d2cc20 100644 --- a/pkgs/ui/src/config/client_1/index.tsx +++ b/pkgs/ui/src/config/client_1/index.tsx @@ -1,7 +1,4 @@ -import { Button, IconButton, Tooltip } from "@mui/material"; -import AddCircleIcon from "@mui/icons-material/AddCircle"; -import RemoveCircleIcon from "@mui/icons-material/RemoveCircle"; -import DeleteIcon from "@mui/icons-material/Delete"; +import { Button, Tooltip } from "@mui/material"; export const ClientTableConfig = [ { @@ -15,26 +12,21 @@ export const ClientTableConfig = [ { key: "endpoint_url", label: "End Point", - render: () => { + render: (value: any) => { + const onConsume = () => { + // fetch(value).then(() => { }).catch(() => { }) + }; return ( - ); }, }, - // { - // key: "entity", - // label: "Entity", - // }, { key: "entity_did", label: "Entity DID", }, - // { - // key: "network", - // label: "Network", - // }, ]; export const ServiceTableConfig = [ @@ -88,39 +80,35 @@ export const ServiceTableConfig = [ { key: "action", label: "Actions", - render: () => { - return ( - <> - - - - - + render: (value: any) => { + const { data } = value; - - - - - - - - - - - - ); - // let renderedValue: any = ""; - // if (typeof value === "object") - // renderedValue = ( - // <> - // {[...value.data, { name: 'Delete', endpoint: '' }].map((actionType: any) => ( - // <> - // - // - // ))} - // - // ); - // return renderedValue; + const onButtonClick = (endpoint: string) => { + console.log("which endpoint comes here?", endpoint); + // fetch(endpoint).then(() => { }).catch(() => { }) + }; + + if (!data) return
N/A
; + + if (data && data.length) + return data.map((item: any, index: number) => { + const buttonLabel = item.name; + const buttonEndpoint = item.endpoint; + + return ( + + + + ); + }); }, }, ]; From 522d7eb69acf3745350df21aa02d5c9256f7bc07 Mon Sep 17 00:00:00 2001 From: "Arslan, Erdem" Date: Sun, 21 Jan 2024 21:15:51 +0100 Subject: [PATCH 2/5] fetch the consume and register/deregister endpoints and add error handling --- pkgs/ui/src/config/client_1/index.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx index 2d2cc20..84154ee 100644 --- a/pkgs/ui/src/config/client_1/index.tsx +++ b/pkgs/ui/src/config/client_1/index.tsx @@ -14,10 +14,14 @@ export const ClientTableConfig = [ label: "End Point", render: (value: any) => { const onConsume = () => { - // fetch(value).then(() => { }).catch(() => { }) + fetch(value).then((response) => { + console.log(response) + }).catch(error => { + console.log("Fetch error: ", error) + }) }; return ( - ); @@ -85,7 +89,11 @@ export const ServiceTableConfig = [ const onButtonClick = (endpoint: string) => { console.log("which endpoint comes here?", endpoint); - // fetch(endpoint).then(() => { }).catch(() => { }) + fetch(endpoint).then((response) => { + console.log(response); + }).catch(error => { + console.log("Fetch error: ", error) + }) }; if (!data) return
N/A
; From ec67dd1bac3b48b05a3a8b07843ae77c2aa997c7 Mon Sep 17 00:00:00 2001 From: "Arslan, Erdem" Date: Sun, 21 Jan 2024 21:24:17 +0100 Subject: [PATCH 3/5] updating fetch request --- pkgs/ui/src/config/client_1/index.tsx | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx index 84154ee..0557c19 100644 --- a/pkgs/ui/src/config/client_1/index.tsx +++ b/pkgs/ui/src/config/client_1/index.tsx @@ -14,11 +14,13 @@ export const ClientTableConfig = [ label: "End Point", render: (value: any) => { const onConsume = () => { - fetch(value).then((response) => { - console.log(response) - }).catch(error => { - console.log("Fetch error: ", error) - }) + fetch(value) + .then((response) => { + console.log(response); + }) + .catch((error) => { + console.log("Fetch error: ", error); + }); }; return ( ); }, From ea0148fdafd100362a3c9ba7efa993d65ec84d97 Mon Sep 17 00:00:00 2001 From: "Arslan, Erdem" Date: Sun, 21 Jan 2024 21:56:03 +0100 Subject: [PATCH 5/5] formatting index.tsx --- pkgs/ui/src/config/client_1/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx index 717a309..e72947f 100644 --- a/pkgs/ui/src/config/client_1/index.tsx +++ b/pkgs/ui/src/config/client_1/index.tsx @@ -1,5 +1,5 @@ -import {Button, CircularProgress, Tooltip} from "@mui/material"; -import {useState} from "react"; +import { Button, CircularProgress, Tooltip } from "@mui/material"; +import { useState } from "react"; export const ClientTableConfig = [ { @@ -19,17 +19,17 @@ export const ClientTableConfig = [ setIsLoading(true); fetch(value) .then((response) => { - setIsLoading(false) + setIsLoading(false); console.log(response); }) .catch((error) => { - setIsLoading(false) + setIsLoading(false); console.log("Fetch error: ", error); }); }; return ( ); },