diff --git a/pkgs/clan-cli/tests/test_db_api.py b/pkgs/clan-cli/tests/test_db_api.py index 2595a86..cf393bf 100644 --- a/pkgs/clan-cli/tests/test_db_api.py +++ b/pkgs/clan-cli/tests/test_db_api.py @@ -266,7 +266,7 @@ def test_entity(api: TestClient) -> None: request_body = { "did": default_entity_did, "name": "C1", - "ip": "127.0.0.1", + "ip": "127.0.0.1:5555", "attached": False, "visible": True, "other": { @@ -283,7 +283,7 @@ def test_entity2(api: TestClient) -> None: request_body = { "did": default_entity_did2, "name": "C2", - "ip": "127.0.0.2", + "ip": "127.0.0.1:5555", "attached": False, "visible": True, "other": { diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx index 6a18acf..91bd903 100644 --- a/pkgs/ui/src/app/access-point/page.tsx +++ b/pkgs/ui/src/app/access-point/page.tsx @@ -1,56 +1,77 @@ "use client"; +import { mutate } from "swr"; +import { useGetAttachedEntities } from "@/api/entities/entities"; +import { useGetRepositories } from "@/api/repositories/repositories"; import SummaryDetails from "@/components/summary_card"; import CustomTable from "@/components/table"; import { APSummaryDetails, - APAttachmentsDummyData, APAttachmentsTableConfig, APServiceRepositoryTableConfig, -} from "@/mock/access_point"; -import { useEffect, useState } from "react"; - -interface RepositoryData { - entity_name: string; - entity_did: string; - network: string; - ip_address: string; -} +} from "@/config/access_point"; +import { useEffect } from "react"; export default function AccessPoint() { - const [repositoryData, setRepositoryData] = useState([]); + const { + data: APAttachementData, + isLoading: loadingAttachements, + swrKey: attachedEntitiesKeyFunc, + } = useGetAttachedEntities(); + const { + data: APRepositories, + isLoading: laodingRepositories, + swrKey: repositoriesKeyFunc, + } = useGetRepositories(); + + const onRefresh = () => { + const attachedEntitiesKey = + typeof attachedEntitiesKeyFunc === "function" + ? attachedEntitiesKeyFunc() + : attachedEntitiesKeyFunc; + const repositoriesKey = + typeof repositoriesKeyFunc === "function" + ? repositoriesKeyFunc() + : repositoriesKeyFunc; + + if (attachedEntitiesKey) { + mutate(attachedEntitiesKey); + } + if (repositoriesKey) { + mutate(repositoriesKey); + } + }; useEffect(() => { - fetch("http://localhost:2979/api/v1/get_repositories", { - method: "GET", - }) - .then((resp) => - resp.json().then((jsonData) => { - console.log(jsonData); - setRepositoryData(jsonData); - }), - ) - .then() - .catch(); + const interval = setInterval(() => { + onRefresh(); + }, 1000); + + return () => clearInterval(interval); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

Attachment View

Service Repository View

diff --git a/pkgs/ui/src/app/client-1/page.tsx b/pkgs/ui/src/app/client-1/page.tsx index 763702a..c0343de 100644 --- a/pkgs/ui/src/app/client-1/page.tsx +++ b/pkgs/ui/src/app/client-1/page.tsx @@ -1,68 +1,168 @@ "use client"; - -import SummaryDetails from "@/components/summary_card"; +import { useEffect, useRef, useState } from "react"; import { - Client1SummaryDetails, Client1ConsumerTableConfig, Client1ProducerTableConfig, -} from "@/mock/client_1"; +} from "@/config/client_1"; import CustomTable from "@/components/table"; -import { useEffect, useState } from "react"; +import useGetEntityByName from "@/components/hooks/useGetEntityById"; +import { + Alert, + Button, + Card, + CardContent, + CardHeader, + Skeleton, + Snackbar, + Typography, +} from "@mui/material"; +import CopyToClipboard from "@/components/copy_to_clipboard"; +import { mutate } from "swr"; +import { useGetEntity } from "@/api/entities/entities"; +import { BASE_URL } from "@/constants"; +import axios from "axios"; export default function Client1() { - const [consumerData, setConsumerData] = useState([]); - const [producerData, setProducerData] = useState([]); + const { entity } = useGetEntityByName("C1"); + const { + data: client1, + isLoading, + swrKey: entityKeyFunc, + } = useGetEntity({ entity_did: entity?.did }); + const cardContentRef = useRef(null); + const [isAttached, setIsAttached] = useState(entity?.attached || false); + const [snackbarOpen, setSnackbarOpen] = useState(false); + const [snackbarMessage, setSnackbarMessage] = useState(""); + + const closeSnackBar = () => { + setSnackbarMessage(""); + setSnackbarOpen(false); + }; + + const onAttachEntity = async () => { + try { + const response = await axios.post(`${BASE_URL}/attach`, { + entity_did: entity?.did, + }); + setSnackbarMessage(response.data.message); + setSnackbarOpen(true); + } catch (error) { + console.error(error); + } finally { + setIsAttached(true); + } + }; + + const onDetachEntity = async () => { + try { + const response = await axios.post(`${BASE_URL}/detach`, { + entity_did: entity?.did, + }); + console.log(response); + setSnackbarMessage("Entity detached successfully."); + setSnackbarOpen(true); + } catch (error) { + console.error(error); + } finally { + setIsAttached(false); + } + }; + + const onRefresh = () => { + const entityKey = + typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc; + if (entityKey) mutate(entityKey); + }; useEffect(() => { - fetch("http://localhost:2979/api/v1/get_consumers", { - method: "GET", - }) - .then((resp) => - resp.json().then((jsonData) => { - console.log(jsonData); - setConsumerData(jsonData); - }), - ) - .then() - .catch(); + const interval = setInterval(() => { + onRefresh(); + }, 1000); - fetch("http://localhost:2979/api/v1/get_producers", { - method: "GET", - }) - .then((resp) => - resp.json().then((jsonData) => { - console.log(jsonData); - setProducerData(jsonData); - }), - ) - .then() - .catch(); + return () => clearInterval(interval); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + if (isLoading) return ; + return (
- + > +

Client 1

+
+ {isAttached === false ? ( + + ) : ( + + )} + + +
+
+ + + } + /> + + + DID: {client1?.data?.did} + + + IP: {client1?.data?.ip} + + + Network: {client1?.data?.other?.network} + + +

Consumer View

Producer View

+ + + {snackbarMessage} + +
); } diff --git a/pkgs/ui/src/app/client-2/page.tsx b/pkgs/ui/src/app/client-2/page.tsx index b3a7b75..31526a5 100644 --- a/pkgs/ui/src/app/client-2/page.tsx +++ b/pkgs/ui/src/app/client-2/page.tsx @@ -1,69 +1,165 @@ "use client"; - -import SummaryDetails from "@/components/summary_card"; +import { useEffect, useRef, useState } from "react"; import { Client2ConsumerTableConfig, Client2ProducerTableConfig, - Client2SummaryDetails, -} from "@/mock/client_2"; +} from "@/config/client_2"; import CustomTable from "@/components/table"; -import { useEffect, useState } from "react"; +import useGetEntityByName from "@/components/hooks/useGetEntityById"; +import { + Button, + Card, + CardContent, + CardHeader, + Skeleton, + Typography, + Snackbar, + Alert, +} from "@mui/material"; +import CopyToClipboard from "@/components/copy_to_clipboard"; +import { useGetEntity } from "@/api/entities/entities"; +import { mutate } from "swr"; +import axios from "axios"; +import { BASE_URL } from "@/constants"; -export default function Client1() { - const [consumerData, setConsumerData] = useState([]); - const [producerData, setProducerData] = useState([]); +export default function Client2() { + const { entity } = useGetEntityByName("C2"); + const { + data: client2, + isLoading, + swrKey: entityKeyFunc, + } = useGetEntity({ entity_did: entity?.did }); + const cardContentRef = useRef(null); + const [isAttached, setIsAttached] = useState(entity?.attached); + const [snackbarOpen, setSnackbarOpen] = useState(false); + const [snackbarMessage, setSnackbarMessage] = useState(""); + + const closeSnackBar = () => { + setSnackbarMessage(""); + setSnackbarOpen(false); + }; + + const onAttachEntity = async () => { + try { + const response = await axios.post(`${BASE_URL}/attach`, { + entity_did: entity?.did, + }); + alert(response.data.message); + } catch (error) { + console.error(error); + } finally { + setIsAttached(true); + } + }; + + const onDetachEntity = async () => { + try { + const response = await axios.post(`${BASE_URL}/detach`, { + entity_did: entity?.did, + }); + console.log("detach", response); + alert("Entity Detached Successfully."); + } catch (error) { + console.error(error); + } finally { + setIsAttached(false); + } + }; + + const onRefresh = () => { + const entityKey = + typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc; + if (entityKey) mutate(entityKey); + }; useEffect(() => { - fetch("http://localhost:2979/api/v1/get_consumers", { - method: "GET", - }) - .then((resp) => - resp.json().then((jsonData) => { - console.log(jsonData); - setConsumerData(jsonData); - }), - ) - .then() - .catch(); + const interval = setInterval(() => { + onRefresh(); + }, 1000); - fetch("http://localhost:2979/api/v1/get_producers", { - method: "GET", - // credentials: 'include', - }) - .then((resp) => - resp.json().then((jsonData) => { - console.log(jsonData); - setProducerData(jsonData); - }), - ) - .then() - .catch(); + return () => clearInterval(interval); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + if (isLoading) return ; + return (
- + > +

Client 2

+
+ {isAttached === false ? ( + + ) : ( + + )} + +
+
+ + + } + /> + + + DID: {client2?.data?.did} + + + IP: {client2?.data?.ip} + + + Network: {client2?.data?.other?.network} + + +

Consumer View

Producer View

+ + + {snackbarMessage} + + ); } diff --git a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx index 73312b2..9698c9f 100644 --- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx +++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx @@ -1,31 +1,37 @@ "use client"; -import { DLGResolutionTableConfig, DLGSummaryDetails } from "@/mock/dlg"; +import { DLGResolutionTableConfig, DLGSummaryDetails } from "@/config/dlg"; import CustomTable from "@/components/table"; import SummaryDetails from "@/components/summary_card"; -import { useEffect, useState } from "react"; +import useFetch from "@/components/hooks/useFetch"; +import { useEffect } from "react"; export default function DLG() { - const [resolutionData, setResolutionData] = useState([]); + const { + data: resolutionData, + loading: loadingResolutions, + fetch, + } = useFetch("/get_resolutions"); + + const onRefresh = () => { + fetch(); + }; useEffect(() => { - fetch("http://localhost:2979/api/v1/get_resolutions", { - method: "GET", - }) - .then((resp) => - resp.json().then((jsonData) => { - console.log(jsonData); - setResolutionData(jsonData); - }), - ) - .then() - .catch(); + const interval = setInterval(() => { + onRefresh(); + }, 5000); + + return () => clearInterval(interval); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

DID Resolution View

diff --git a/pkgs/ui/src/app/home/page.tsx b/pkgs/ui/src/app/home/page.tsx index d6c3566..d405ccf 100644 --- a/pkgs/ui/src/app/home/page.tsx +++ b/pkgs/ui/src/app/home/page.tsx @@ -1,39 +1,51 @@ "use client"; +import { useAppState } from "@/components/hooks/useAppContext"; import { NoDataOverlay } from "@/components/noDataOverlay"; import SummaryDetails from "@/components/summary_card"; import CustomTable from "@/components/table"; -import { HomeTableConfig } from "@/mock/home"; -import { useEffect, useState } from "react"; +import { HomeTableConfig } from "@/config/home"; +import { useEffect } from "react"; +import { mutate } from "swr"; export default function Home() { - const [homeData, setHomeData] = useState([]); + const { data } = useAppState(); + + const entitiesKeyFunc = data.entitiesKeyFunc; + + const onRefresh = () => { + const entityKey = + typeof entitiesKeyFunc === "function" + ? entitiesKeyFunc() + : entitiesKeyFunc; + if (entitiesKeyFunc) mutate(entityKey); + }; useEffect(() => { - fetch("http://localhost:2979/api/v1/get_entities", { - method: "GET", - }) - .then((resp) => - resp.json().then((jsonData) => { - console.log(jsonData); - setHomeData(jsonData); - }), - ) - .then() - .catch(); + const interval = setInterval(() => { + onRefresh(); + }, 500); + + return () => clearInterval(interval); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

Home View Table

- +
diff --git a/pkgs/ui/src/components/hooks/useAppContext.tsx b/pkgs/ui/src/components/hooks/useAppContext.tsx index a749aaf..d8e9c31 100644 --- a/pkgs/ui/src/components/hooks/useAppContext.tsx +++ b/pkgs/ui/src/components/hooks/useAppContext.tsx @@ -1,3 +1,5 @@ +import { useGetEntities } from "@/api/entities/entities"; +import { Entity } from "@/api/model"; import { AxiosError } from "axios"; import React, { createContext, @@ -5,6 +7,7 @@ import React, { ReactNode, SetStateAction, useState, + useEffect, } from "react"; type AppContextType = { @@ -18,7 +21,11 @@ type AppContextType = { export const AppContext = createContext({} as AppContextType); -type AppState = NonNullable; +type AppState = { + allEntities: Entity[] | undefined; + loadingEntities: boolean; + entitiesKeyFunc: any; +}; interface AppContextProviderProps { children: ReactNode; @@ -26,10 +33,28 @@ interface AppContextProviderProps { export const WithAppState = (props: AppContextProviderProps) => { const { children } = props; + const { data: entityData, swrKey: entitiesKeyFunc } = useGetEntities(); + const isLoading = false; const error = undefined; - const [data, setAppState] = useState({}); + const [data, setAppState] = useState({ + allEntities: [], + loadingEntities: true, + entitiesKeyFunc, + }); + + useEffect(() => { + if (entityData) { + setAppState((prevState) => ({ + ...prevState, + allEntities: entityData.data, + entitiesKeyFunc, + loadingEntities: false, + })); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [entityData]); return ( { + const [data, setData] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const fetch = () => { + setLoading(true); + axios + .get(BASE_URL + url) + .then((response) => { + setData(response.data); + }) + .catch((error) => { + setError(error); + }) + .finally(() => { + setLoading(false); + }); + }; + + useEffect(() => { + fetch(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [url]); + + return { data, loading, error, fetch }; +}; + +export default useFetch; diff --git a/pkgs/ui/src/components/hooks/useGetEntityById.tsx b/pkgs/ui/src/components/hooks/useGetEntityById.tsx new file mode 100644 index 0000000..7736d44 --- /dev/null +++ b/pkgs/ui/src/components/hooks/useGetEntityById.tsx @@ -0,0 +1,19 @@ +import { useContext } from "react"; +import { AppContext } from "./useAppContext"; + +const useGetEntityByName = (nameOrDid: string) => { + const { data } = useContext(AppContext); + const allEntities = data.allEntities; + + if (!allEntities) { + return { entity: undefined, isLoading: true }; + } + + const entity = allEntities.find( + (entity) => entity.name === nameOrDid || entity.did === nameOrDid, + ); + + return { entity, isLoading: false }; +}; + +export default useGetEntityByName; diff --git a/pkgs/ui/src/components/summary_card/index.tsx b/pkgs/ui/src/components/summary_card/index.tsx index a9c979a..0a6c016 100644 --- a/pkgs/ui/src/components/summary_card/index.tsx +++ b/pkgs/ui/src/components/summary_card/index.tsx @@ -14,6 +14,8 @@ const SummaryDetails = ({ entity, hasRefreshButton, hasAttachDetach, + fake, + onRefresh, }: ISummaryDetails) => { const cardContentRef = useRef(null); const hasDetails = entity.details && entity.details.length > 0; @@ -34,13 +36,17 @@ const SummaryDetails = ({ Attach / Detach )} - {hasRefreshButton && } + {hasRefreshButton && ( + + )}
{hasDetails && ( } /> diff --git a/pkgs/ui/src/components/table/index.tsx b/pkgs/ui/src/components/table/index.tsx index 36714df..25af334 100644 --- a/pkgs/ui/src/components/table/index.tsx +++ b/pkgs/ui/src/components/table/index.tsx @@ -9,9 +9,12 @@ import Paper from "@mui/material/Paper"; import { NoDataOverlay } from "@/components/noDataOverlay"; import { StyledTableCell, StyledTableRow } from "./style"; import { ICustomTable, CustomTableConfiguration } from "@/types"; -import { Checkbox } from "@mui/material"; +import { Checkbox, Skeleton } from "@mui/material"; + +const CustomTable = ({ configuration, data, loading }: ICustomTable) => { + if (loading) + return ; -const CustomTable = ({ configuration, data }: ICustomTable) => { // display empty icon in case there is no data if (!data || data.length === 0) return ; diff --git a/pkgs/ui/src/config/access_point/index.tsx b/pkgs/ui/src/config/access_point/index.tsx new file mode 100644 index 0000000..2d8575a --- /dev/null +++ b/pkgs/ui/src/config/access_point/index.tsx @@ -0,0 +1,80 @@ +// 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", + }, +]; + +export const APAttachmentsTableConfig = [ + { + key: "name", + label: "Entity name", + }, + { + key: "did", + label: "Entity DID", + }, + { + key: "other", + label: "Network", + render: (value: any) => { + let renderedValue = ""; + if (typeof value === "object") renderedValue = value?.network; + return renderedValue; + }, + }, + { + key: "ip", + label: "IP address", + }, +]; + +export const APServiceRepositoryTableConfig = [ + { + 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: "Type", + render: (value: any) => { + let renderedValue: any = ""; + if (typeof value === "object") { + const label = Object.keys(value)[0]; + const info = value[label]; + renderedValue = ( + + {label} {info} + + ); + } + return renderedValue; + }, + }, +]; diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx new file mode 100644 index 0000000..ca3a025 --- /dev/null +++ b/pkgs/ui/src/config/client_1/index.tsx @@ -0,0 +1,77 @@ +import { Button } from "@mui/material"; + +export const Client1ConsumerTableConfig = [ + { + 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 Client1ProducerTableConfig = [ + { + 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; + }, + }, +]; diff --git a/pkgs/ui/src/config/client_2/index.tsx b/pkgs/ui/src/config/client_2/index.tsx new file mode 100644 index 0000000..982b2ad --- /dev/null +++ b/pkgs/ui/src/config/client_2/index.tsx @@ -0,0 +1,77 @@ +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; + }, + }, +]; diff --git a/pkgs/ui/src/mock/dlg/index.ts b/pkgs/ui/src/config/dlg/index.ts similarity index 88% rename from pkgs/ui/src/mock/dlg/index.ts rename to pkgs/ui/src/config/dlg/index.ts index 2e33f79..0cc3109 100644 --- a/pkgs/ui/src/mock/dlg/index.ts +++ b/pkgs/ui/src/config/dlg/index.ts @@ -1,5 +1,7 @@ // DLG Summary Details +import { formatDateTime } from "@/utils/helpers"; + export const DLGSummaryDetails = [ { label: "DID", @@ -44,5 +46,6 @@ export const DLGResolutionTableConfig = [ { key: "timestamp", label: "Timestamp", + render: (value: string) => formatDateTime(value), }, ]; diff --git a/pkgs/ui/src/config/home/index.ts b/pkgs/ui/src/config/home/index.ts new file mode 100644 index 0000000..7f72fe5 --- /dev/null +++ b/pkgs/ui/src/config/home/index.ts @@ -0,0 +1,35 @@ +export const HomeTableConfig = [ + { + key: "name", + label: "Entity name", + }, + { + key: "did", + label: "Entity DID", + }, + { + key: "other", + label: "Network", + render: (value: any) => { + const renderedValue = typeof value === "object" ? value?.network : "-"; + return renderedValue; + }, + }, + { + key: "ip", + label: "IP address", + }, + { + key: "other", + label: "Roles", + render: (value: any) => { + const renderedValue = + typeof value === "object" ? value?.roles?.join(", ") : "-"; + return renderedValue; + }, + }, + { + key: "attached", + label: "Attached", + }, +]; diff --git a/pkgs/ui/src/constants/index.ts b/pkgs/ui/src/constants/index.ts new file mode 100644 index 0000000..449ac7f --- /dev/null +++ b/pkgs/ui/src/constants/index.ts @@ -0,0 +1,9 @@ +const BASE_URL = "http://localhost:2979/api/v1"; + +// Home View +const HOME_VIEW_TABLE = "/get_entities"; + +// Access Point +const SERVICE_REPOSITORY_URL = "/get_repositories"; + +export { BASE_URL, HOME_VIEW_TABLE, SERVICE_REPOSITORY_URL }; diff --git a/pkgs/ui/src/mock/access_point/index.ts b/pkgs/ui/src/mock/access_point/index.ts deleted file mode 100644 index 8af005c..0000000 --- a/pkgs/ui/src/mock/access_point/index.ts +++ /dev/null @@ -1,113 +0,0 @@ -// 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 - Attachements - -export const APAttachmentsDummyData = [ - { - entity_name: "C1", - entity_did: "did:sov:test:1234", - network: "Carlo's Home Network", - ip_address: "127.0.0.1", - }, - { - entity_name: "C2", - entity_did: "did:sov:test:4567", - network: "Steve's Home Network", - ip_address: "127.0.0.1", - }, - { - entity_name: "C1-TEST", - entity_did: "did:sov:test:0001", - network: "Test Network A", - ip_address: "127.0.0.1", - }, - { - entity_name: "C2-TEST", - entity_did: "did:sov:test:0002", - network: "Test Network B", - ip_address: "127.0.0.1", - }, -]; -export const APAttachmentsTableConfig = [ - { - key: "entity_name", - label: "Entity name", - }, - { - key: "entity_did", - label: "Entity DID", - }, - { - key: "network", - label: "Network", - }, - { - key: "ip_address", - label: "IP address", - }, -]; - -// AP - Service Repository -export const APServiceRepositoryDummyData = [ - { - service_name: "Carlo's Printing", - service_type: "3D Printing", - endpoint_url: "URL", - entity: "C1", - entity_did: "did:sov:test:1234", - network: "Carlo's Home Network", - }, - { - service_name: "Jeff's Printing", - service_type: "3D Printing", - endpoint_url: "URL", - entity: "C2", - entity_did: "did:sov:test:5678", - network: "Jeff's Home Network", - }, -]; -export const APServiceRepositoryTableConfig = [ - { - key: "service_name", - label: "Service name", - }, - { - key: "service_type", - label: "Service type", - }, - { - key: "endpoint_url", - label: "End point", - }, - // { - // key: "entity", - // label: "Entity", - // }, - { - key: "entity_did", - label: "Entity DID", - }, - // { - // key: "network", - // label: "Network", - // }, - { - key: "status", - label: "Status", - }, -]; diff --git a/pkgs/ui/src/mock/client_1/index.ts b/pkgs/ui/src/mock/client_1/index.ts deleted file mode 100644 index 9139156..0000000 --- a/pkgs/ui/src/mock/client_1/index.ts +++ /dev/null @@ -1,140 +0,0 @@ -// Client1 - Summary - -export const Client1SummaryDetails = [ - { - label: "DID", - value: "did:sov:test:1234", - }, - { - label: "IP", - value: "127.0.0.1", - }, - { - label: "Network", - value: "Carlo's Home Network", - }, -]; - -export const Client1ConsumerData = [ - { - service_name: "Carlo's Printing", - service_type: "3D Printing", - endpoint_url: "Consume", - entity: "C2", - entity_did: "did:sov:test:1223", - network: "Carlo's Home Network", - }, - { - service_name: "Steve's Printing", - service_type: "3D Printing", - endpoint_url: "Consume", - entity: "C2", - entity_did: "did:sov:test:1234", - network: "Steve's Home Network", - }, - { - service_name: "Test A", - service_type: "3D Printing", - endpoint_url: "Consume", - entity: "C2", - entity_did: "did:sov:test:4567", - network: "Test Network A", - }, - { - service_name: "Test B", - service_type: "3D Printing", - endpoint_url: "Consume", - entity: "C2", - entity_did: "did:sov:test:0062", - network: "Test Network B", - }, -]; - -export const Client1ConsumerTableConfig = [ - { - key: "service_name", - label: "Service name", - }, - { - key: "service_type", - label: "Service Type", - }, - { - key: "endpoint_url", - label: "End Point", - }, - { - key: "entity", - label: "Entity", - }, - { - key: "entity_did", - label: "Entity DID", - }, - { - key: "network", - label: "Network", - }, -]; - -export const Client1ProducerData = [ - { - service_name: "Carlo's Printing", - service_type: "3D Printing", - endpoint_url: "URL", - usage: "C1(3), C3(4)", - status: "DRAFT, REGISTERED", - action: "Register, Deregister, Delete", - }, - { - service_name: "Steve's Printing", - service_type: "3D Printing", - endpoint_url: "URL", - usage: "C1(3), C3(4)", - status: "REGISTERED", - action: "Create", - }, - { - service_name: "Test Printing A", - service_type: "3D Printing", - endpoint_url: "URL", - usage: "C1(3), C3(4)", - status: "DRAFT", - action: "Register, Deregister", - }, - { - service_name: "Test Printing B", - service_type: "3D Printing", - endpoint_url: "URL", - usage: "C1(3), C3(4)", - status: "DRAFT, REGISTERED", - action: "Delete, Create", - }, -]; - -export const Client1ProducerTableConfig = [ - { - key: "service_name", - label: "Service name", - }, - { - key: "service_type", - label: "Service Type", - }, - { - key: "endpoint_url", - label: "End Point", - }, - // { - // key: "usage", - // label: "Usage", - // }, - { - key: "status", - label: "Status", - }, - // { - // key: "action", - // label: "Action", - // }, -]; diff --git a/pkgs/ui/src/mock/client_2/index.ts b/pkgs/ui/src/mock/client_2/index.ts deleted file mode 100644 index 1f40fcd..0000000 --- a/pkgs/ui/src/mock/client_2/index.ts +++ /dev/null @@ -1,140 +0,0 @@ -// Client2 - Summary - -export const Client2SummaryDetails = [ - { - label: "DID", - value: "did:sov:test:1234", - }, - { - label: "IP", - value: "127.0.0.2", - }, - { - label: "Network", - value: "Carlo's Home Network", - }, -]; - -export const Client2ConsumerData = [ - { - service_name: "Carlo's Printing", - service_type: "3D Printing", - endpoint_url: "Consume", - entity: "C2", - entity_did: "did:sov:test:1223", - network: "Carlo's Home Network", - }, - { - service_name: "Steve's Printing", - service_type: "3D Printing", - endpoint_url: "Consume", - entity: "C2", - entity_did: "did:sov:test:1234", - network: "Steve's Home Network", - }, - { - service_name: "Test A", - service_type: "3D Printing", - endpoint_url: "Consume", - entity: "C2", - entity_did: "did:sov:test:4567", - network: "Test Network A", - }, - { - service_name: "Test B", - service_type: "3D Printing", - endpoint_url: "Consume", - entity: "C2", - entity_did: "did:sov:test:0062", - network: "Test Network B", - }, -]; - -export const Client2ConsumerTableConfig = [ - { - key: "service_name", - label: "Service name", - }, - { - key: "service_type", - label: "Service Type", - }, - { - key: "endpoint_url", - label: "End Point", - }, - { - key: "entity", - label: "Entity", - }, - { - key: "entity_did", - label: "Entity DID", - }, - { - key: "network", - label: "Network", - }, -]; - -export const Client2ProducerData = [ - { - service_name: "Carlo's Printing", - service_type: "3D Printing", - endpoint_url: "URL", - usage: "C1(3), C3(4)", - status: "DRAFT, REGISTERED", - action: "Register, Deregister, Delete", - }, - { - service_name: "Steve's Printing", - service_type: "3D Printing", - endpoint_url: "URL", - usage: "C1(3), C3(4)", - status: "REGISTERED", - action: "Create", - }, - { - service_name: "Test Printing A", - service_type: "3D Printing", - endpoint_url: "URL", - usage: "C1(3), C3(4)", - status: "DRAFT", - action: "Register, Deregister", - }, - { - service_name: "Test Printing B", - service_type: "3D Printing", - endpoint_url: "URL", - usage: "C1(3), C3(4)", - status: "DRAFT, REGISTERED", - action: "Delete, Create", - }, -]; - -export const Client2ProducerTableConfig = [ - { - key: "service_name", - label: "Service name", - }, - { - key: "service_type", - label: "Service Type", - }, - { - key: "endpoint_url", - label: "End Point", - }, - { - key: "usage", - label: "Usage", - }, - { - key: "status", - label: "Status", - }, - { - key: "action", - label: "Action", - }, -]; diff --git a/pkgs/ui/src/mock/home/index.ts b/pkgs/ui/src/mock/home/index.ts deleted file mode 100644 index b6c2d4f..0000000 --- a/pkgs/ui/src/mock/home/index.ts +++ /dev/null @@ -1,47 +0,0 @@ -// HOME - Table Data - -export const HomeDummyData = [ - { - entity_name: "C1", - entity_DID: "did:sov:test:1234", - network: "Carlo's Home Network", - ip_address: "127.0.0.1", - roles: "service repository, service consumer, DLG", - visible: true, - }, - { - entity_name: "C2", - entity_DID: "did:sov:test:4567", - network: "Steve's Home Network", - ip_address: "127.0.0.1", - roles: "service repository, service consumer, DLG", - visible: false, - }, -]; - -export const HomeTableConfig = [ - { - key: "name", - label: "Entity name", - }, - { - key: "did", - label: "Entity DID", - }, - // { - // key: "network", - // label: "Network", - // }, - { - key: "ip", - label: "IP address", - }, - // { - // key: "roles", - // label: "Roles", - // }, - { - key: "attached", - label: "Attached", - }, -]; diff --git a/pkgs/ui/src/types/index.ts b/pkgs/ui/src/types/index.ts index 264feb4..fc40cbd 100644 --- a/pkgs/ui/src/types/index.ts +++ b/pkgs/ui/src/types/index.ts @@ -7,6 +7,7 @@ export interface CustomTableConfiguration { export interface ICustomTable { configuration: CustomTableConfiguration[]; data: any; + loading?: boolean; } export interface EntityDetails { @@ -20,7 +21,9 @@ export interface Entity { } export interface ISummaryDetails { - entity: Entity; + entity: any; + fake?: boolean; hasRefreshButton?: boolean; hasAttachDetach?: boolean; + onRefresh?: () => void; } diff --git a/pkgs/ui/src/utils/helpers.ts b/pkgs/ui/src/utils/helpers.ts new file mode 100644 index 0000000..8d6e3b2 --- /dev/null +++ b/pkgs/ui/src/utils/helpers.ts @@ -0,0 +1,12 @@ +export const formatDateTime = (date: string) => { + const _date = new Date(date); + return _date.toLocaleDateString("en-US", { + year: "numeric", + month: "long", + day: "numeric", + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + hour12: true, + }); +};