From 59e33f3ead2877a23bbe45fe26b0896513f0fe04 Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Sun, 21 Jan 2024 16:49:34 +0100 Subject: [PATCH 01/10] 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 02/10] 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 03/10] 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 05/10] 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 ( ); }, From b98c6090afcb79797bbe56d067e1049562ef5b84 Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Thu, 25 Jan 2024 20:51:45 +0100 Subject: [PATCH 06/10] remove fake data in the header of dlg and ap views --- pkgs/ui/src/app/access-point/page.tsx | 22 ++++++++++++++++--- .../app/distributed-ledger-gateway/page.tsx | 20 ++++++++++++++--- pkgs/ui/src/config/access_point/index.tsx | 17 -------------- pkgs/ui/src/config/dlg/index.ts | 13 ----------- 4 files changed, 36 insertions(+), 36 deletions(-) diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx index c4783f0..77487be 100644 --- a/pkgs/ui/src/app/access-point/page.tsx +++ b/pkgs/ui/src/app/access-point/page.tsx @@ -6,13 +6,14 @@ import { useGetAllRepositories } from "@/api/repositories/repositories"; import SummaryDetails from "@/components/summary_card"; import CustomTable from "@/components/table"; import { - APSummaryDetails, APAttachmentsTableConfig, APServiceRepositoryTableConfig, } from "@/config/access_point"; import { useEffect } from "react"; +import useGetEntityByNameOrDid from "@/components/hooks/useGetEntityByNameOrDid"; export default function AccessPoint() { + const { entity } = useGetEntityByNameOrDid("AP"); const { data: APAttachementData, isLoading: loadingAttachements, @@ -54,10 +55,25 @@ export default function AccessPoint() { return (

Attachment View

diff --git a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx index 6f84e08..7d872ed 100644 --- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx +++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx @@ -1,13 +1,15 @@ "use client"; -import { DLGResolutionTableConfig, DLGSummaryDetails } from "@/config/dlg"; +import { DLGResolutionTableConfig } from "@/config/dlg"; import CustomTable from "@/components/table"; import SummaryDetails from "@/components/summary_card"; import { useEffect } from "react"; import { useGetAllResolutions } from "@/api/resolution/resolution"; import { mutate } from "swr"; +import useGetEntityByNameOrDid from "@/components/hooks/useGetEntityByNameOrDid"; export default function DLG() { + const { entity } = useGetEntityByNameOrDid("DLG"); const { data: resolutionData, isLoading: loadingResolutions, @@ -37,12 +39,24 @@ export default function DLG() { return (
diff --git a/pkgs/ui/src/config/access_point/index.tsx b/pkgs/ui/src/config/access_point/index.tsx index 8fae746..7b3d58b 100644 --- a/pkgs/ui/src/config/access_point/index.tsx +++ b/pkgs/ui/src/config/access_point/index.tsx @@ -1,20 +1,3 @@ -// AP - Summary - -export const APSummaryDetails = [ - { - label: "DID", - value: "did:sov:test:1274", - }, - { - label: "IP", - value: "127.0.0.2", - }, - { - label: "Network", - value: "Carlo's Home Network", - }, -]; - // AP - 2 Tables Configurations to display labels export const APAttachmentsTableConfig = [ diff --git a/pkgs/ui/src/config/dlg/index.ts b/pkgs/ui/src/config/dlg/index.ts index 1fdafde..6afdd7c 100644 --- a/pkgs/ui/src/config/dlg/index.ts +++ b/pkgs/ui/src/config/dlg/index.ts @@ -1,18 +1,5 @@ -// DLG Summary Details - import { formatDateTime } from "@/utils/helpers"; -export const DLGSummaryDetails = [ - { - label: "DID", - value: "did:sov:test:1274", - }, - { - label: "URL", - value: "dlg.tu-berlin.de", - }, -]; - // DLG - 2 Tables Configurations to display labels export const DLGResolutionDummyData = [ From 2000c1444af10b77951c86529749207230c52660 Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Thu, 25 Jan 2024 21:56:18 +0100 Subject: [PATCH 07/10] fix the issue of mermaid chart not rendering when changing routes --- pkgs/ui/src/app/client/client.tsx | 2 - .../components/sequence_diagram/helpers.ts | 2 +- .../src/components/sequence_diagram/index.tsx | 39 ++++++++++++------- pkgs/ui/src/components/sidebar/index.tsx | 2 +- 4 files changed, 28 insertions(+), 17 deletions(-) diff --git a/pkgs/ui/src/app/client/client.tsx b/pkgs/ui/src/app/client/client.tsx index 2be8284..6772be4 100644 --- a/pkgs/ui/src/app/client/client.tsx +++ b/pkgs/ui/src/app/client/client.tsx @@ -153,8 +153,6 @@ export default function Client() { setSnackbarOpen(false); }; - console.log("entity", entity); - if (services_loading) return ; if (!services) return Client not found; diff --git a/pkgs/ui/src/components/sequence_diagram/helpers.ts b/pkgs/ui/src/components/sequence_diagram/helpers.ts index 8e1b4a3..2c83cce 100644 --- a/pkgs/ui/src/components/sequence_diagram/helpers.ts +++ b/pkgs/ui/src/components/sequence_diagram/helpers.ts @@ -1,7 +1,7 @@ import { getGroupColor, sanitizeDID } from "@/utils/helpers"; export const generateMermaidString = (data: any) => { - if (!data) return ""; + if (!data || !data.length) return ""; let mermaidString = "sequenceDiagram\n"; const participantDetails = new Map(); diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx index 6d9e7b8..4107d3b 100644 --- a/pkgs/ui/src/components/sequence_diagram/index.tsx +++ b/pkgs/ui/src/components/sequence_diagram/index.tsx @@ -43,32 +43,45 @@ const SequenceDiagram = () => { swrKey: eventMessagesKeyFunc, } = useGetAllEventmessages(); - const mermaidRef: any = useRef(null); const [scale, setScale] = useState(1); const [openFilters, setOpenFilters] = useState(false); - const [sequenceNr, setSequenceNr] = useState(""); - const hasData = eventMessagesData?.data; + const mermaidRef: any = useRef(null); + + const hasData = eventMessagesData?.data && eventMessagesData?.data.length > 0; const mermaidString = generateMermaidString(eventMessagesData?.data); const allEventMessages = extractAllEventMessages(eventMessagesData?.data); + const dataDependency = JSON.stringify(hasData ? eventMessagesData?.data : ""); useEffect(() => { - if (!loadingEventMessages && hasData) - mermaid.initialize({ - startOnLoad: false, - securityLevel: "loose", - sequence: { - mirrorActors: true, - showSequenceNumbers: true, - }, - }); + if (!loadingEventMessages && hasData) { + if (!mermaidRef.current.getAttribute("data-processed")) { + mermaid.initialize({ + startOnLoad: false, + securityLevel: "loose", + sequence: { + mirrorActors: true, + showSequenceNumbers: true, + }, + }); + } + } if (mermaidRef.current) { mermaidRef.current.innerHTML = mermaidString; mermaid.init(undefined, mermaidRef.current); } - }, [loadingEventMessages, hasData, mermaidString]); + + return () => { + if (mermaidRef.current) { + // By removing the 'data-processed' attribute, we ensure Mermaid will process the diagram again + mermaidRef.current.removeAttribute("data-processed"); + // Reset the innerHTML to clear the diagram + mermaidRef.current.innerHTML = ""; + } + }; + }, [dataDependency]); useEffect(() => { if (mermaidRef.current) { diff --git a/pkgs/ui/src/components/sidebar/index.tsx b/pkgs/ui/src/components/sidebar/index.tsx index 69ac216..79de3da 100644 --- a/pkgs/ui/src/components/sidebar/index.tsx +++ b/pkgs/ui/src/components/sidebar/index.tsx @@ -93,7 +93,7 @@ export function Sidebar(props: SidebarProps) { const menuEntityEntries: MenuEntry[] = React.useMemo(() => { if (entityData) { return Array.isArray(entityData.data) - ? entityData.data.map((entity) => ({ + ? entityData.data.map((entity: any) => ({ icon: , label: entity.name, to: entity.name, From fd09d73edd724c4b56d63c97486563eafc43af0b Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Thu, 25 Jan 2024 22:31:25 +0100 Subject: [PATCH 08/10] small formatting fixes --- pkgs/ui/src/components/sequence_diagram/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx index 4107d3b..32a932d 100644 --- a/pkgs/ui/src/components/sequence_diagram/index.tsx +++ b/pkgs/ui/src/components/sequence_diagram/index.tsx @@ -56,6 +56,7 @@ const SequenceDiagram = () => { useEffect(() => { if (!loadingEventMessages && hasData) { + // check for the absence of this attribute to render the diagram if (!mermaidRef.current.getAttribute("data-processed")) { mermaid.initialize({ startOnLoad: false, From f3ab6e1b45cfe760230bef428160ca13e3b42eb0 Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Fri, 26 Jan 2024 01:11:55 +0100 Subject: [PATCH 09/10] removed warnings --- pkgs/ui/src/app/client/client.tsx | 2 +- pkgs/ui/src/components/sequence_diagram/index.tsx | 1 + pkgs/ui/src/config/client_1/index.tsx | 5 +---- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/pkgs/ui/src/app/client/client.tsx b/pkgs/ui/src/app/client/client.tsx index 7994702..155ed18 100644 --- a/pkgs/ui/src/app/client/client.tsx +++ b/pkgs/ui/src/app/client/client.tsx @@ -1,5 +1,5 @@ "use client"; -import { useEffect, useMemo, useRef, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { ClientTableConfig, ServiceTableConfig } from "@/config/client_1"; import CustomTable from "@/components/table"; import { diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx index 32a932d..f050cbb 100644 --- a/pkgs/ui/src/components/sequence_diagram/index.tsx +++ b/pkgs/ui/src/components/sequence_diagram/index.tsx @@ -82,6 +82,7 @@ const SequenceDiagram = () => { mermaidRef.current.innerHTML = ""; } }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, [dataDependency]); useEffect(() => { diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx index 64a9e2d..d8190f2 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 } from "@mui/material"; import EntityActions from "@/components/entity_actions"; export const ClientTableConfig = [ From eaec0feb9601f54ffff366f27e0cbe0e57e4b24a Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Fri, 26 Jan 2024 01:19:32 +0100 Subject: [PATCH 10/10] warning fix --- .../src/components/sequence_diagram/index.tsx | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx index f050cbb..4c5754b 100644 --- a/pkgs/ui/src/components/sequence_diagram/index.tsx +++ b/pkgs/ui/src/components/sequence_diagram/index.tsx @@ -55,9 +55,13 @@ const SequenceDiagram = () => { const dataDependency = JSON.stringify(hasData ? eventMessagesData?.data : ""); useEffect(() => { + const currentMermaidRef = mermaidRef?.current; + if (!loadingEventMessages && hasData) { - // check for the absence of this attribute to render the diagram - if (!mermaidRef.current.getAttribute("data-processed")) { + if ( + currentMermaidRef && + !currentMermaidRef.getAttribute("data-processed") + ) { mermaid.initialize({ startOnLoad: false, securityLevel: "loose", @@ -67,19 +71,16 @@ const SequenceDiagram = () => { }, }); } - } - if (mermaidRef.current) { - mermaidRef.current.innerHTML = mermaidString; - mermaid.init(undefined, mermaidRef.current); + if (currentMermaidRef) { + currentMermaidRef.innerHTML = mermaidString; + mermaid.init(undefined, currentMermaidRef); + } } - return () => { - if (mermaidRef.current) { - // By removing the 'data-processed' attribute, we ensure Mermaid will process the diagram again - mermaidRef.current.removeAttribute("data-processed"); - // Reset the innerHTML to clear the diagram - mermaidRef.current.innerHTML = ""; + if (currentMermaidRef) { + currentMermaidRef.removeAttribute("data-processed"); + currentMermaidRef.innerHTML = ""; } }; // eslint-disable-next-line react-hooks/exhaustive-deps