diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx index 6a18acf..ede2fee 100644 --- a/pkgs/ui/src/app/access-point/page.tsx +++ b/pkgs/ui/src/app/access-point/page.tsx @@ -1,56 +1,54 @@ "use client"; +import useSWR, { 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"; export default function AccessPoint() { - const [repositoryData, setRepositoryData] = useState([]); - 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 { 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); + } + } 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..e9a3c02 100644 --- a/pkgs/ui/src/app/client-1/page.tsx +++ b/pkgs/ui/src/app/client-1/page.tsx @@ -1,65 +1,108 @@ "use client"; - -import SummaryDetails from "@/components/summary_card"; +import { 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 { Button, Card, CardContent, CardHeader, Skeleton, Typography } from "@mui/material"; +import CopyToClipboard from "@/components/copy_to_clipboard"; +import { mutate } from "swr"; +import { useGetEntity } from "@/api/entities/entities"; +import { useGetConsumer } from "@/api/consumers/consumers"; +import { BASE_URL } from "@/constants"; +import axios from "axios"; export default function Client1() { - const [consumerData, setConsumerData] = useState([]); - const [producerData, setProducerData] = useState([]); - 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 { entity } = useGetEntityByName('C1'); + const { data: client1, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did }) + const { data: consumerData, isLoading: loadingConsumerData, swrKey: consumerKeyFunc } = useGetConsumer({ entity_did: entity?.did }) + const cardContentRef = useRef(null); - fetch("http://localhost:2979/api/v1/get_producers", { - method: "GET", - }) - .then((resp) => - resp.json().then((jsonData) => { - console.log(jsonData); - setProducerData(jsonData); - }), - ) - .then() - .catch(); - }, []); + 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 { + } + } + + 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 { + } + } + + const onRefresh = () => { + const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc; + const consumerKey = typeof consumerKeyFunc === 'function' ? consumerKeyFunc() : consumerKeyFunc; + if (entityKey) mutate(entityKey); + if (consumerKey) mutate(consumerKey) + } + + if (isLoading) + return return (
- + > +

Client 1

+
+ + + +
+
+ + + } + /> + + + DID: {client1?.data?.did} + + + IP: {client1?.data?.ip} + + + Network: {client1?.data?.other?.network} + + +

Consumer View

Producer View

diff --git a/pkgs/ui/src/app/client-2/page.tsx b/pkgs/ui/src/app/client-2/page.tsx index b3a7b75..9367b28 100644 --- a/pkgs/ui/src/app/client-2/page.tsx +++ b/pkgs/ui/src/app/client-2/page.tsx @@ -1,66 +1,109 @@ "use client"; - -import SummaryDetails from "@/components/summary_card"; +import { 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 { useAppState } from "@/components/hooks/useAppContext"; +import useGetEntityByName from "@/components/hooks/useGetEntityById"; +import { Button, Card, CardContent, CardHeader, Skeleton, Typography } from "@mui/material"; +import CopyToClipboard from "@/components/copy_to_clipboard"; +import { useGetEntity } from "@/api/entities/entities"; +import { useGetConsumer } from "@/api/consumers/consumers"; +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() { - 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 { entity } = useGetEntityByName('C2'); + const { data: client2, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did }) + const { data: consumerData, isLoading: loadingConsumerData, swrKey: consumerKeyFunc } = useGetConsumer({ entity_did: entity?.did }) + const cardContentRef = useRef(null); - 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(); - }, []); + 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 { + } + } + + 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 { + } + } + + const onRefresh = () => { + const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc; + const consumerKey = typeof consumerKeyFunc === 'function' ? consumerKeyFunc() : consumerKeyFunc; + if (entityKey) mutate(entityKey); + if (consumerKey) mutate(consumerKey) + } + + if (isLoading) + return return (
- + > +

Client 2

+
+ + + +
+
+ + + } + /> + + + DID: {client2?.data?.did} + + + IP: {client2?.data?.ip} + + + Network: {client2?.data?.other?.network} + + +

Consumer View

Producer View

diff --git a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx index 73312b2..96ee33f 100644 --- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx +++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx @@ -1,31 +1,24 @@ "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"; + export default function DLG() { - const [resolutionData, setResolutionData] = useState([]); + const { data: resolutionData, loading: loadingResolutions, fetch } = useFetch('/get_resolutions'); - 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 onRefresh = () => { + fetch(); + } return (

DID Resolution View

diff --git a/pkgs/ui/src/app/home/page.tsx b/pkgs/ui/src/app/home/page.tsx index d6c3566..9fcdfe4 100644 --- a/pkgs/ui/src/app/home/page.tsx +++ b/pkgs/ui/src/app/home/page.tsx @@ -1,27 +1,14 @@ "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"; export default function Home() { - const [homeData, setHomeData] = useState([]); - 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 { data } = useAppState(); return (
@@ -33,7 +20,7 @@ export default function Home() {

Home View Table

- +
diff --git a/pkgs/ui/src/components/hooks/useAppContext.tsx b/pkgs/ui/src/components/hooks/useAppContext.tsx index a749aaf..476b3c4 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, + })); + } + }, [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(); + }, [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..b1be4f3 --- /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; \ No newline at end of file diff --git a/pkgs/ui/src/components/summary_card/index.tsx b/pkgs/ui/src/components/summary_card/index.tsx index a9c979a..504935f 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,13 @@ 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..090b325 100644 --- a/pkgs/ui/src/components/table/index.tsx +++ b/pkgs/ui/src/components/table/index.tsx @@ -9,9 +9,14 @@ 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..f43ba4c --- /dev/null +++ b/pkgs/ui/src/config/access_point/index.tsx @@ -0,0 +1,77 @@ +// 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: "entity_name", + label: "Entity name", + }, + { + key: "entity_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..7d9b18f --- /dev/null +++ b/pkgs/ui/src/config/client_1/index.tsx @@ -0,0 +1,68 @@ +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: (value: any) => { + 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..c9528d8 --- /dev/null +++ b/pkgs/ui/src/config/client_2/index.tsx @@ -0,0 +1,68 @@ +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: (value: any) => { + 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..134aadc 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..57893fe --- /dev/null +++ b/pkgs/ui/src/config/home/index.ts @@ -0,0 +1,34 @@ +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..58bad54 --- /dev/null +++ b/pkgs/ui/src/constants/index.ts @@ -0,0 +1,15 @@ +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, +} \ No newline at end of file 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..f852c27 --- /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 + }); +} \ No newline at end of file