Merge branch 'main' into frontend-2

pkgs/ui/README.md

@@ -25,3 +25,5 @@ Than run this command:
 ```
 GITEA_TOKEN=<YOUR_TOKEN> nix run .#update-ui-assets
 ```
+
+.

pkgs/ui/nix/ui-assets.nix

@@ -1,5 +1,5 @@
 { fetchzip }:
 fetchzip {
-  url = "https://gitea.gchq.icu/api/packages/IoSL/generic/IoSL-service-aware-frontend/16glc9nkcqsalf5jwcwcsv1nx65cqwrqr95n1ghmb365nxi57bb4/assets.tar.gz";
-  sha256 = "16glc9nkcqsalf5jwcwcsv1nx65cqwrqr95n1ghmb365nxi57bb4";
+  url = "https://gitea.gchq.icu/api/packages/IoSL/generic/IoSL-service-aware-frontend/0zz102k9sm0q9rlkrb06fkz2ap8i42gm65wr1qp4lxsg9kpgca70/assets.tar.gz";
+  sha256 = "0zz102k9sm0q9rlkrb06fkz2ap8i42gm65wr1qp4lxsg9kpgca70";
 }

pkgs/ui/nix/update-ui-assets.sh

@@ -1,3 +1,5 @@
+#!/usr/bin/env bash
+
 # shellcheck shell=bash
 set -xeuo pipefail
 

pkgs/ui/shell.nix

@@ -20,13 +20,13 @@ pkgs.mkShell {
     fi
 
     ln -sf ${pkgs.roboto}/share/fonts ./src
-    
+
     export PATH="$PATH:$(realpath ./node_modules)/.bin"
 
 
-    # re-generate the api code 
+    # re-generate the api code
     rm -rf src/api openapi.json
-    cp ${clanPkgs.clan-openapi}/openapi.json . 
+    cp ${clanPkgs.clan-openapi}/openapi.json .
     orval
   '';
 }

pkgs/ui/src/app/access-point/page.tsx

@@ -1,34 +1,80 @@
 "use client";
 
+import { mutate } from "swr";
+import { useGetAttachedEntities } from "@/api/entities/entities";
+import { useGetAllRepositories } from "@/api/repositories/repositories";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
 import {
   APSummaryDetails,
-  APAttachmentsDummyData,
   APAttachmentsTableConfig,
-  APServiceRepositoryDummyData,
   APServiceRepositoryTableConfig,
-} from "@/mock/access_point";
+} from "@/config/access_point";
+import { useEffect } from "react";
 
 export default function AccessPoint() {
+  const {
+    data: APAttachementData,
+    isLoading: loadingAttachements,
+    swrKey: attachedEntitiesKeyFunc,
+  } = useGetAttachedEntities();
+  const {
+    data: APRepositories,
+    isLoading: laodingRepositories,
+    swrKey: repositoriesKeyFunc,
+  } = useGetAllRepositories();
+
+  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(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 5000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className="m-10">
       <SummaryDetails
+        fake
         hasRefreshButton
+        onRefresh={onRefresh}
         entity={{ name: "Access Point", details: APSummaryDetails }}
       />
       <div>
         <h4>Attachment View</h4>
         <CustomTable
-          data={APAttachmentsDummyData}
+          loading={loadingAttachements}
+          data={APAttachementData?.data}
           configuration={APAttachmentsTableConfig}
+          tkey="attachment-table"
         />
       </div>
       <div>
         <h4>Service Repository View </h4>
         <CustomTable
-          data={APServiceRepositoryDummyData}
+          loading={laodingRepositories}
+          data={APRepositories?.data}
           configuration={APServiceRepositoryTableConfig}
+          tkey="service-repository-table"
         />
       </div>
     </div>

pkgs/ui/src/app/client-1/page.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import SummaryDetails from "@/components/summary_card";
-import {
-  Client1SummaryDetails,
-  Client1ConsumerData,
-  Client1ConsumerTableConfig,
-  Client1ProducerTableConfig,
-  Client1ProducerData,
-} from "@/mock/client_1";
-import CustomTable from "@/components/table";
-
-export default function Client1() {
-  return (
-    <div className="m-10">
-      <SummaryDetails
-        hasAttachDetach
-        hasRefreshButton
-        entity={{
-          name: "Client 1",
-          details: Client1SummaryDetails,
-        }}
-      />
-      <div>
-        <h4>Consumer View</h4>
-        <CustomTable
-          data={Client1ConsumerData}
-          configuration={Client1ConsumerTableConfig}
-        />
-      </div>
-      <div>
-        <h4>Producer View</h4>
-        <CustomTable
-          data={Client1ProducerData}
-          configuration={Client1ProducerTableConfig}
-        />
-      </div>
-    </div>
-  );
-}

pkgs/ui/src/app/client-2/page.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import SummaryDetails from "@/components/summary_card";
-import {
-  Client2ConsumerData,
-  Client2ConsumerTableConfig,
-  Client2ProducerData,
-  Client2ProducerTableConfig,
-  Client2SummaryDetails,
-} from "@/mock/client_2";
-import CustomTable from "@/components/table";
-
-export default function Client1() {
-  return (
-    <div className="m-10">
-      <SummaryDetails
-        hasAttachDetach
-        hasRefreshButton
-        entity={{
-          name: "Client 2",
-          details: Client2SummaryDetails,
-        }}
-      />
-      <div>
-        <h4>Consumer View</h4>
-        <CustomTable
-          data={Client2ConsumerData}
-          configuration={Client2ConsumerTableConfig}
-        />
-      </div>
-      <div>
-        <h4>Producer View</h4>
-        <CustomTable
-          data={Client2ProducerData}
-          configuration={Client2ProducerTableConfig}
-        />
-      </div>
-    </div>
-  );
-}

pkgs/ui/src/app/client/[client_name]/page.tsx

@@ -0,0 +1,245 @@
+"use client";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ClientTableConfig, ServiceTableConfig } from "@/config/client_1";
+import CustomTable from "@/components/table";
+import {
+  Alert,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Snackbar,
+  Typography,
+  CircularProgress,
+  IconButton,
+} from "@mui/material";
+import CopyToClipboard from "@/components/copy_to_clipboard";
+import {
+  attachEntity,
+  detachEntity,
+  isAttached,
+} from "@/api/entities/entities";
+import { mutate } from "swr";
+import { Skeleton } from "@mui/material";
+import { Entity, Service } from "@/api/model";
+import useGetEntityByNameOrDid from "@/components/hooks/useGetEntityByNameOrDid";
+import { useGetAllServices } from "@/api/services/services";
+import axios from "axios";
+import CloseIcon from "@mui/icons-material/Close";
+
+interface SnackMessage {
+  message: string;
+  severity: "success" | "error";
+}
+
+type AttachButtonProps = {
+  entity?: Entity;
+  setSnackbarMessage: (message: SnackMessage) => void;
+  setSnackbarOpen: (open: boolean) => void;
+};
+
+const AttachButton = ({
+  entity,
+  setSnackbarMessage,
+  setSnackbarOpen,
+}: AttachButtonProps) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = async () => {
+    setLoading(true);
+    // Call the attach or detach function depending on the isAttached value
+    // and await for the result
+    try {
+      let response = await (entity?.attached
+        ? detachEntity({ entity_did: entity?.did })
+        : attachEntity({ entity_did: entity?.did }));
+
+      if (!entity?.attached) {
+        console.log("calling isAttached");
+        response = await isAttached({ entity_did: entity?.did });
+        console.log("response: ", response);
+      }
+      const msg = {
+        message: response.data.message,
+        severity: "success",
+      } as SnackMessage;
+      setSnackbarMessage(msg);
+      setSnackbarOpen(true);
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        // Extract the error message from the error object
+        const errorMessage = error.response?.data.detail[0].msg;
+
+        const msg = {
+          message: `${errorMessage}`,
+          severity: "error",
+        } as SnackMessage;
+        setSnackbarMessage(msg);
+        setSnackbarOpen(true);
+      } else {
+        console.error("error: ", error);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Button
+        onClick={handleClick}
+        className="mr-6"
+        variant="contained"
+        // Disable the button while loading
+        disabled={loading}
+      >
+        {loading ? (
+          <CircularProgress size={24} />
+        ) : entity?.attached ? (
+          "Detach"
+        ) : (
+          "Attach"
+        )}
+      </Button>
+    </>
+  );
+};
+
+export default function Client({
+  params,
+}: {
+  params: { client_name: string };
+}) {
+  const { client_name } = params;
+
+  const { entity: entity } = useGetEntityByNameOrDid(client_name);
+  const {
+    data: services,
+    isLoading: services_loading,
+    swrKey: entityKeyFunc,
+  } = useGetAllServices();
+
+  const clients: Service[] = useMemo(() => {
+    if (services?.data) {
+      return services.data.filter((service) => {
+        if (service.entity_did !== entity?.did) return true;
+      });
+    }
+    return [];
+  }, [services, entity?.did]);
+
+  const onRefresh = () => {
+    const entityKey =
+      typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc;
+    if (entityKey) mutate(entityKey);
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 5000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const cardContentRef = useRef(null);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState<
+    SnackMessage | undefined
+  >(undefined);
+
+  const closeSnackBar = () => {
+    setSnackbarMessage(undefined);
+    setSnackbarOpen(false);
+  };
+
+  if (services_loading) return <Skeleton height={500} />;
+  if (!services) return <Alert severity="error">Client not found</Alert>;
+
+  return (
+    <div className="m-10">
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <h2>Entity {entity?.name}</h2>
+        <div>
+          <AttachButton
+            entity={entity}
+            setSnackbarMessage={setSnackbarMessage}
+            setSnackbarOpen={setSnackbarOpen}
+          ></AttachButton>
+
+          <Button onClick={onRefresh} variant="contained">
+            Refresh
+          </Button>
+        </div>
+      </div>
+
+      <Card variant="outlined">
+        <CardHeader
+          subheader="Summary"
+          action={<CopyToClipboard contentRef={cardContentRef} />}
+        />
+        <CardContent ref={cardContentRef}>
+          <Typography color="text.primary" gutterBottom>
+            DID: <code>{entity?.did}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            IP: <code>{entity?.ip}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            Network: <code>{entity?.other?.network}</code>
+          </Typography>
+        </CardContent>
+      </Card>
+      <div>
+        <h4>Client View</h4>
+        <CustomTable
+          loading={services_loading}
+          data={clients}
+          configuration={ClientTableConfig}
+          tkey="client-table"
+        />
+      </div>
+      <div>
+        <h4>Service View</h4>
+        <CustomTable
+          loading={services_loading}
+          data={services?.data}
+          configuration={ServiceTableConfig}
+          tkey="service-table"
+        />
+      </div>
+      <Snackbar
+        onClose={closeSnackBar}
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        open={snackbarOpen}
+        autoHideDuration={5000}
+      >
+        <Alert
+          severity={snackbarMessage?.severity}
+          // Add some margin or padding to the Alert component
+          sx={{ width: "100%", margin: 1, padding: 2 }}
+          // Add an IconButton component with a CloseIcon inside the Alert component
+          action={
+            <IconButton
+              size="small"
+              aria-label="close"
+              color="inherit"
+              onClick={closeSnackBar}
+            >
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          }
+        >
+          {snackbarMessage?.message}
+        </Alert>
+      </Snackbar>
+    </div>
+  );
+}

pkgs/ui/src/app/distributed-ledger-gateway/page.tsx

@@ -1,18 +1,37 @@
 "use client";
 
-import {
-  DLGResolutionDummyData,
-  DLGResolutionTableConfig,
-  DLGSummaryDetails,
-} from "@/mock/dlg";
+import { DLGResolutionTableConfig, DLGSummaryDetails } from "@/config/dlg";
 import CustomTable from "@/components/table";
 import SummaryDetails from "@/components/summary_card";
+import useFetch from "@/components/hooks/useFetch";
+import { useEffect } from "react";
 
 export default function DLG() {
+  const {
+    data: resolutionData,
+    loading: loadingResolutions,
+    fetch,
+  } = useFetch("/get_resolutions");
+
+  const onRefresh = () => {
+    fetch();
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 5000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className="m-10">
       <SummaryDetails
+        fake
         hasRefreshButton
+        onRefresh={onRefresh}
         entity={{
           name: "Distributed Ledger Gateway",
           details: DLGSummaryDetails,
@@ -21,8 +40,10 @@ export default function DLG() {
       <div>
         <h4>DID Resolution View</h4>
         <CustomTable
-          data={DLGResolutionDummyData}
+          loading={loadingResolutions}
+          data={resolutionData}
           configuration={DLGResolutionTableConfig}
+          tkey="resolution_table"
         />
       </div>
     </div>

pkgs/ui/src/app/home/page.tsx

@@ -1,22 +1,52 @@
 "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 { HomeDummyData, HomeTableConfig } from "@/mock/home";
+import { HomeTableConfig } from "@/config/home";
+import { useEffect } from "react";
+import { mutate } from "swr";
 
 export default function Home() {
+  const { data } = useAppState();
+
+  const entitiesKeyFunc = data.entitiesKeyFunc;
+
+  const onRefresh = () => {
+    const entityKey =
+      typeof entitiesKeyFunc === "function"
+        ? entitiesKeyFunc()
+        : entitiesKeyFunc;
+    if (entitiesKeyFunc) mutate(entityKey);
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 5000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className="m-10">
       <SummaryDetails
         entity={{ name: "Home", details: [] }}
-        hasRefreshButton={false}
+        hasRefreshButton={true}
+        onRefresh={onRefresh}
         hasAttachDetach={false}
       />
 
       <div>
         <h4>Home View Table</h4>
-        <CustomTable data={HomeDummyData} configuration={HomeTableConfig} />
+        <CustomTable
+          loading={data.loadingEntities}
+          data={data?.allEntities}
+          configuration={HomeTableConfig}
+          tkey="home_table"
+        />
       </div>
 
       <div>

pkgs/ui/src/components/hooks/useAppContext.tsx

@@ -1,3 +1,5 @@
+import { useGetAllEntities } 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<AppContextType>({} as AppContextType);
 
-type AppState = NonNullable<unknown>;
+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 } = useGetAllEntities();
+
   const isLoading = false;
   const error = undefined;
 
-  const [data, setAppState] = useState<AppState>({});
+  const [data, setAppState] = useState<AppState>({
+    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 (
     <AppContext.Provider

pkgs/ui/src/components/hooks/useFetch.tsx

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+import { BASE_URL } from "@/constants";
+
+const useFetch = (url: string) => {
+  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;

pkgs/ui/src/components/hooks/useGetEntityByNameOrDid.tsx

@@ -0,0 +1,19 @@
+import { useContext } from "react";
+import { AppContext } from "./useAppContext";
+
+const useGetEntityByNameOrDid = (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 useGetEntityByNameOrDid;

pkgs/ui/src/components/sidebar/index.tsx

@@ -36,13 +36,13 @@ const menuEntityEntries: MenuEntry[] = [
   {
     icon: <PersonIcon />,
     label: "C1",
-    to: "/client-1",
+    to: "/client/C1",
     disabled: false,
   },
   {
     icon: <PersonIcon />,
     label: "C2",
-    to: "/client-2",
+    to: "/client/C2",
     disabled: false,
   },
 ];

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
             </Button>
           )}
-          {hasRefreshButton && <Button variant="contained">Refresh</Button>}
+          {hasRefreshButton && (
+            <Button onClick={onRefresh} variant="contained">
+              Refresh
+            </Button>
+          )}
         </div>
       </div>
       {hasDetails && (
         <Card variant="outlined">
           <CardHeader
-            subheader="Summary"
+            subheader={fake ? "Summary (Fake Data)" : "Summary"}
             action={<CopyToClipboard contentRef={cardContentRef} />}
           />
           <CardContent ref={cardContentRef}>

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, tkey }: ICustomTable) => {
+  if (loading)
+    return <Skeleton variant="rectangular" animation="wave" height={200} />;
 
-const CustomTable = ({ configuration, data }: ICustomTable) => {
   // display empty icon in case there is no data
   if (!data || data.length === 0)
     return <NoDataOverlay label="No Activity yet" />;
@@ -53,12 +56,18 @@ const CustomTable = ({ configuration, data }: ICustomTable) => {
         <TableBody>
           {data.map((data: any, rowIndex: number) => (
             <StyledTableRow key={rowIndex}>
-              {configuration.map((column: CustomTableConfiguration) => {
-                const cellValue: any = data[column.key];
-                const cellKey = column.key;
-                const renderComponent = column?.render;
-                return renderTableCell(cellValue, cellKey, renderComponent);
-              })}
+              {configuration.map(
+                (column: CustomTableConfiguration, columnIndex: number) => {
+                  const cellValue: any = data[column.key];
+                  const cellKey = tkey + ":" + column.key + ":" + rowIndex;
+                  const renderComponent = column?.render;
+                  return renderTableCell(
+                    cellValue,
+                    cellKey + ":" + columnIndex,
+                    renderComponent,
+                  );
+                },
+              )}
             </StyledTableRow>
           ))}
         </TableBody>

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 = (
+          <code>
+            {label} {info}
+          </code>
+        );
+      }
+      return renderedValue;
+    },
+  },
+];

pkgs/ui/src/config/client_1/index.tsx

@@ -0,0 +1,77 @@
+import { Button } from "@mui/material";
+
+export const ClientTableConfig = [
+  {
+    key: "service_name",
+    label: "Service name",
+  },
+  {
+    key: "service_type",
+    label: "Service Type",
+  },
+  {
+    key: "endpoint_url",
+    label: "End Point",
+    render: () => {
+      return (
+        <Button disabled variant="outlined">
+          Consume
+        </Button>
+      );
+    },
+  },
+  // {
+  //   key: "entity",
+  //   label: "Entity",
+  // },
+  {
+    key: "entity_did",
+    label: "Entity DID",
+  },
+  // {
+  //   key: "network",
+  //   label: "Network",
+  // },
+];
+
+export const ServiceTableConfig = [
+  {
+    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) => (
+              <>
+                <code>{actionType}</code>
+                <br />
+              </>
+            ))}
+          </>
+        );
+      return renderedValue;
+    },
+  },
+];

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 (
+        <Button disabled variant="outlined">
+          Consume
+        </Button>
+      );
+    },
+  },
+  // {
+  //   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) => (
+              <>
+                <code>{actionType}</code>
+                <br />
+              </>
+            ))}
+          </>
+        );
+      return renderedValue;
+    },
+  },
+];

pkgs/ui/src/config/dlg/index.ts

@@ -1,5 +1,7 @@
 // DLG Summary Details
 
+import { formatDateTime } from "@/utils/helpers";
+
 export const DLGSummaryDetails = [
   {
     label: "DID",
@@ -16,14 +18,14 @@ export const DLGSummaryDetails = [
 export const DLGResolutionDummyData = [
   {
     requester_name: "C1",
-    requester_DID: "did:sov:test:1234",
-    DID_resolved: "did:sov:test:1234",
+    requester_did: "did:sov:test:1234",
+    resolved_did: "did:sov:test:1234",
     timestamp: "2023.11.01 17:05:45",
   },
   {
     requester_name: "C2",
-    requester_DID: "did:sov:test:5678",
-    DID_resolved: "did:sov:test:5678",
+    requester_did: "did:sov:test:5678",
+    resolved_did: "did:sov:test:5678",
     timestamp: "2023.12.01 15:05:50",
   },
 ];
@@ -34,15 +36,16 @@ export const DLGResolutionTableConfig = [
     label: "Requester name",
   },
   {
-    key: "requester_DID",
+    key: "requester_did",
     label: "Requester DID",
   },
   {
-    key: "DID_resolved",
-    label: "DID resolved",
+    key: "resolved_did",
+    label: "Resolved DID",
   },
   {
     key: "timestamp",
     label: "Timestamp",
+    render: (value: string) => formatDateTime(value),
   },
 ];

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: "network",
+    label: "Network",
+    render: (value: any) => {
+      const renderedValue = typeof value === "object" ? value?.network : "-";
+      return renderedValue;
+    },
+  },
+  {
+    key: "ip",
+    label: "IP address",
+  },
+  {
+    key: "roles",
+    label: "Roles",
+    render: (value: any) => {
+      const renderedValue =
+        typeof value === "object" ? value?.roles?.join(", ") : "-";
+      return renderedValue;
+    },
+  },
+  {
+    key: "attached",
+    label: "Attached",
+  },
+];

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 };

pkgs/ui/src/mock/access_point/index.ts

@@ -1,109 +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",
-    end_point: "URL",
-    producer: "C1",
-    producer_DID: "did:sov:test:1234",
-    network: "Carlo's Home Network",
-  },
-  {
-    service_name: "Jeff's Printing",
-    service_type: "3D Printing",
-    end_point: "URL",
-    producer: "C2",
-    producer_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: "end_point",
-    label: "End point",
-  },
-  {
-    key: "producer",
-    label: "Producer",
-  },
-  {
-    key: "producer_DID",
-    label: "Producer DID",
-  },
-  {
-    key: "network",
-    label: "Network",
-  },
-];

pkgs/ui/src/mock/client_1/index.ts

@@ -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",
-    end_point: "Consume",
-    producer: "C2",
-    producer_did: "did:sov:test:1223",
-    network: "Carlo's Home Network",
-  },
-  {
-    service_name: "Steve's Printing",
-    service_type: "3D Printing",
-    end_point: "Consume",
-    producer: "C2",
-    producer_did: "did:sov:test:1234",
-    network: "Steve's Home Network",
-  },
-  {
-    service_name: "Test A",
-    service_type: "3D Printing",
-    end_point: "Consume",
-    producer: "C2",
-    producer_did: "did:sov:test:4567",
-    network: "Test Network A",
-  },
-  {
-    service_name: "Test B",
-    service_type: "3D Printing",
-    end_point: "Consume",
-    producer: "C2",
-    producer_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: "end_point",
-    label: "End Point",
-  },
-  {
-    key: "producer",
-    label: "Producer",
-  },
-  {
-    key: "producer_did",
-    label: "Producer DID",
-  },
-  {
-    key: "network",
-    label: "Network",
-  },
-];
-
-export const Client1ProducerData = [
-  {
-    service_name: "Carlo's Printing",
-    service_type: "3D Printing",
-    end_point: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT, REGISTERED",
-    action: "Register, Deregister, Delete",
-  },
-  {
-    service_name: "Steve's Printing",
-    service_type: "3D Printing",
-    end_point: "URL",
-    usage: "C1(3), C3(4)",
-    status: "REGISTERED",
-    action: "Create",
-  },
-  {
-    service_name: "Test Printing A",
-    service_type: "3D Printing",
-    end_point: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT",
-    action: "Register, Deregister",
-  },
-  {
-    service_name: "Test Printing B",
-    service_type: "3D Printing",
-    end_point: "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: "end_point",
-    label: "End Point",
-  },
-  {
-    key: "usage",
-    label: "Usage",
-  },
-  {
-    key: "status",
-    label: "Status",
-  },
-  {
-    key: "action",
-    label: "Action",
-  },
-];

pkgs/ui/src/mock/client_2/index.ts

@@ -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",
-    end_point: "Consume",
-    producer: "C2",
-    producer_did: "did:sov:test:1223",
-    network: "Carlo's Home Network",
-  },
-  {
-    service_name: "Steve's Printing",
-    service_type: "3D Printing",
-    end_point: "Consume",
-    producer: "C2",
-    producer_did: "did:sov:test:1234",
-    network: "Steve's Home Network",
-  },
-  {
-    service_name: "Test A",
-    service_type: "3D Printing",
-    end_point: "Consume",
-    producer: "C2",
-    producer_did: "did:sov:test:4567",
-    network: "Test Network A",
-  },
-  {
-    service_name: "Test B",
-    service_type: "3D Printing",
-    end_point: "Consume",
-    producer: "C2",
-    producer_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: "end_point",
-    label: "End Point",
-  },
-  {
-    key: "producer",
-    label: "Producer",
-  },
-  {
-    key: "producer_did",
-    label: "Producer DID",
-  },
-  {
-    key: "network",
-    label: "Network",
-  },
-];
-
-export const Client2ProducerData = [
-  {
-    service_name: "Carlo's Printing",
-    service_type: "3D Printing",
-    end_point: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT, REGISTERED",
-    action: "Register, Deregister, Delete",
-  },
-  {
-    service_name: "Steve's Printing",
-    service_type: "3D Printing",
-    end_point: "URL",
-    usage: "C1(3), C3(4)",
-    status: "REGISTERED",
-    action: "Create",
-  },
-  {
-    service_name: "Test Printing A",
-    service_type: "3D Printing",
-    end_point: "URL",
-    usage: "C1(3), C3(4)",
-    status: "DRAFT",
-    action: "Register, Deregister",
-  },
-  {
-    service_name: "Test Printing B",
-    service_type: "3D Printing",
-    end_point: "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: "end_point",
-    label: "End Point",
-  },
-  {
-    key: "usage",
-    label: "Usage",
-  },
-  {
-    key: "status",
-    label: "Status",
-  },
-  {
-    key: "action",
-    label: "Action",
-  },
-];

pkgs/ui/src/mock/home/index.ts

@@ -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: "entity_name",
-    label: "Entity name",
-  },
-  {
-    key: "entity_DID",
-    label: "Entity DID",
-  },
-  {
-    key: "network",
-    label: "Network",
-  },
-  {
-    key: "ip_address",
-    label: "IP address",
-  },
-  {
-    key: "roles",
-    label: "Roles",
-  },
-  {
-    key: "visible",
-    label: "Visible",
-  },
-];

pkgs/ui/src/types/index.ts

@@ -7,6 +7,8 @@ export interface CustomTableConfiguration {
 export interface ICustomTable {
   configuration: CustomTableConfiguration[];
   data: any;
+  loading?: boolean;
+  tkey: string;
 }
 
 export interface EntityDetails {
@@ -20,7 +22,9 @@ export interface Entity {
 }
 
 export interface ISummaryDetails {
-  entity: Entity;
+  entity: any;
+  fake?: boolean;
   hasRefreshButton?: boolean;
   hasAttachDetach?: boolean;
+  onRefresh?: () => void;
 }

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,
+  });
+};