IoSL/service-aware-frontend
3
0
Fork 0
generated from Luis/nextjs-python-web-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Before Milestone Meeting Final Changes #40

Merged
Luis merged 11 commits from final-fixes into main 2023-12-12 22:00:38 +00:00
Conversation 0 Commits 11 Files Changed 23 +231 -131
17 changed files with 231 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 78736f3944 - Show all commits

29
pkgs/ui/src/app/access-point/page.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { mutate } from 'swr';
import { mutate } from "swr";
import { useGetAttachedEntities } from "@/api/entities/entities";
import { useGetRepositories } from "@/api/repositories/repositories";
import SummaryDetails from "@/components/summary_card";
@@ -10,16 +10,29 @@ import {
APAttachmentsTableConfig,
APServiceRepositoryTableConfig,
} from "@/config/access_point";
import { useEffect } from 'react';
import { useEffect } from "react";
export default function AccessPoint() {
const { data: APAttachementData, isLoading: loadingAttachements, swrKey: attachedEntitiesKeyFunc } = useGetAttachedEntities();
const { data: APRepositories, isLoading: laodingRepositories, swrKey: repositoriesKeyFunc } = useGetRepositories();
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;
const attachedEntitiesKey =
typeof attachedEntitiesKeyFunc === "function"
? attachedEntitiesKeyFunc()
: attachedEntitiesKeyFunc;
const repositoriesKey =
typeof repositoriesKeyFunc === "function"
? repositoriesKeyFunc()
: repositoriesKeyFunc;
if (attachedEntitiesKey) {
mutate(attachedEntitiesKey);
@@ -27,7 +40,7 @@ export default function AccessPoint() {
if (repositoriesKey) {
mutate(repositoriesKey);
}
}
};
useEffect(() => {
const interval = setInterval(() => {

84
pkgs/ui/src/app/client-1/page.tsx
View File

@@ -6,7 +6,16 @@ import {
} from "@/config/client_1";
import CustomTable from "@/components/table";
import useGetEntityByName from "@/components/hooks/useGetEntityById";
import { Alert, Button, Card, CardContent, CardHeader, Skeleton, Snackbar, Typography } from "@mui/material";
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";
@@ -14,48 +23,56 @@ import { BASE_URL } from "@/constants";
import axios from "axios";
export default function Client1() {
const { entity } = useGetEntityByName('C1');
const { data: client1, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did })
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 [snackbarMessage, setSnackbarMessage] = useState("");
const closeSnackBar = () => {
setSnackbarMessage('');
setSnackbarMessage("");
setSnackbarOpen(false);
}
};
const onAttachEntity = async () => {
try {
const response = await axios.post(`${BASE_URL}/attach`, { entity_did: entity?.did });
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)
setIsAttached(true);
}
}
};
const onDetachEntity = async () => {
try {
const response = await axios.post(`${BASE_URL}/detach`, { entity_did: entity?.did });
const response = await axios.post(`${BASE_URL}/detach`, {
entity_did: entity?.did,
});
console.log(response);
setSnackbarMessage('Entity detached successfully.');
setSnackbarMessage("Entity detached successfully.");
setSnackbarOpen(true);
} catch (error) {
console.error(error);
} finally {
setIsAttached(false)
setIsAttached(false);
}
}
};
const onRefresh = () => {
const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc;
const entityKey =
typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc;
if (entityKey) mutate(entityKey);
}
};
useEffect(() => {
const interval = setInterval(() => {
@@ -66,8 +83,7 @@ export default function Client1() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (isLoading)
return <Skeleton height={500} />
if (isLoading) return <Skeleton height={500} />;
return (
<div className="m-10">
@@ -80,18 +96,27 @@ export default function Client1() {
>
<h2>Client 1</h2>
<div>
{isAttached === false ?
<Button onClick={onAttachEntity} className="mr-6" variant="contained">
{isAttached === false ? (
<Button
onClick={onAttachEntity}
className="mr-6"
variant="contained"
>
Attach
</Button>
:
<Button onClick={onDetachEntity} className="mr-6" variant="contained">
) : (
<Button
onClick={onDetachEntity}
className="mr-6"
variant="contained"
>
Detach
</Button>
}
)}
<Button onClick={onRefresh} variant="contained">Refresh</Button>
<Button onClick={onRefresh} variant="contained">
Refresh
</Button>
</div>
</div>
@@ -128,8 +153,13 @@ export default function Client1() {
configuration={Client1ProducerTableConfig}
/>
</div>
<Snackbar onClose={closeSnackBar} anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={snackbarOpen} autoHideDuration={1000}>
<Alert severity="success" sx={{ width: '100%' }}>
<Snackbar
onClose={closeSnackBar}
anchorOrigin={{ vertical: "top", horizontal: "center" }}
open={snackbarOpen}
autoHideDuration={1000}
>
<Alert severity="success" sx={{ width: "100%" }}>
{snackbarMessage}
</Alert>
</Snackbar>

85
pkgs/ui/src/app/client-2/page.tsx
View File

@@ -6,7 +6,16 @@ import {
} from "@/config/client_2";
import CustomTable from "@/components/table";
import useGetEntityByName from "@/components/hooks/useGetEntityById";
import { Button, Card, CardContent, CardHeader, Skeleton, Typography, Snackbar, Alert } from "@mui/material";
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";
@@ -14,46 +23,54 @@ import axios from "axios";
import { BASE_URL } from "@/constants";
export default function Client2() {
const { entity } = useGetEntityByName('C2');
const { data: client2, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did })
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 [snackbarMessage, setSnackbarMessage] = useState("");
const closeSnackBar = () => {
setSnackbarMessage('');
setSnackbarMessage("");
setSnackbarOpen(false);
}
};
const onAttachEntity = async () => {
try {
const response = await axios.post(`${BASE_URL}/attach`, { entity_did: entity?.did });
const response = await axios.post(`${BASE_URL}/attach`, {
entity_did: entity?.did,
});
alert(response.data.message);
} catch (error) {
console.error(error);
} finally {
setIsAttached(true)
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.');
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)
setIsAttached(false);
}
}
};
const onRefresh = () => {
const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc;
const entityKey =
typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc;
if (entityKey) mutate(entityKey);
}
};
useEffect(() => {
const interval = setInterval(() => {
@@ -64,8 +81,7 @@ export default function Client2() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (isLoading)
return <Skeleton height={500} />
if (isLoading) return <Skeleton height={500} />;
return (
<div className="m-10">
@@ -78,16 +94,26 @@ export default function Client2() {
>
<h2>Client 2</h2>
<div>
{isAttached === false ?
<Button onClick={onAttachEntity} className="mr-6" variant="contained">
{isAttached === false ? (
<Button
onClick={onAttachEntity}
className="mr-6"
variant="contained"
>
Attach
</Button>
:
<Button onClick={onDetachEntity} className="mr-6" variant="contained">
) : (
<Button
onClick={onDetachEntity}
className="mr-6"
variant="contained"
>
Detach
</Button>
}
<Button onClick={onRefresh} variant="contained">Refresh</Button>
)}
<Button onClick={onRefresh} variant="contained">
Refresh
</Button>
</div>
</div>
@@ -124,8 +150,13 @@ export default function Client2() {
configuration={Client2ProducerTableConfig}
/>
</div>
<Snackbar onClose={closeSnackBar} anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={snackbarOpen} autoHideDuration={1000}>
<Alert severity="success" sx={{ width: '100%' }}>
<Snackbar
onClose={closeSnackBar}
anchorOrigin={{ vertical: "top", horizontal: "center" }}
open={snackbarOpen}
autoHideDuration={1000}
>
<Alert severity="success" sx={{ width: "100%" }}>
{snackbarMessage}
</Alert>
</Snackbar>

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

@@ -6,13 +6,16 @@ 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 {
data: resolutionData,
loading: loadingResolutions,
fetch,
} = useFetch("/get_resolutions");
const onRefresh = () => {
fetch();
}
};
useEffect(() => {
const interval = setInterval(() => {

14
pkgs/ui/src/app/home/page.tsx
View File

@@ -9,15 +9,17 @@ 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;
const entityKey =
typeof entitiesKeyFunc === "function"
? entitiesKeyFunc()
: entitiesKeyFunc;
if (entitiesKeyFunc) mutate(entityKey);
}
};
useEffect(() => {
const interval = setInterval(() => {
@@ -39,7 +41,11 @@ export default function Home() {
<div>
<h4>Home View Table</h4>
<CustomTable loading={data.loadingEntities} data={data?.allEntities} configuration={HomeTableConfig} />
<CustomTable
loading={data.loadingEntities}
data={data?.allEntities}
configuration={HomeTableConfig}
/>
</div>
<div>

11
pkgs/ui/src/components/hooks/useAppContext.tsx
View File

@@ -22,10 +22,10 @@ type AppContextType = {
export const AppContext = createContext<AppContextType>({} as AppContextType);
type AppState = {
allEntities: Entity[] | undefined,
loadingEntities: boolean,
entitiesKeyFunc: any,
}
allEntities: Entity[] | undefined;
loadingEntities: boolean;
entitiesKeyFunc: any;
};
interface AppContextProviderProps {
children: ReactNode;
@@ -35,7 +35,6 @@ export const WithAppState = (props: AppContextProviderProps) => {
const { data: entityData, swrKey: entitiesKeyFunc } = useGetEntities();
const isLoading = false;
const error = undefined;
@@ -47,7 +46,7 @@ export const WithAppState = (props: AppContextProviderProps) => {
useEffect(() => {
if (entityData) {
setAppState(prevState => ({
setAppState((prevState) => ({
...prevState,
allEntities: entityData.data,
entitiesKeyFunc,

10
pkgs/ui/src/components/hooks/useFetch.tsx
View File

@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react';
import axios from 'axios';
import { BASE_URL } from '@/constants';
import { useState, useEffect } from "react";
import axios from "axios";
import { BASE_URL } from "@/constants";
const useFetch = (url: string) => {
const [data, setData] = useState([]);
@@ -9,7 +9,8 @@ const useFetch = (url: string) => {
const fetch = () => {
setLoading(true);
axios.get(BASE_URL + url)
axios
.get(BASE_URL + url)
.then((response) => {
setData(response.data);
})
@@ -29,5 +30,4 @@ const useFetch = (url: string) => {
return { data, loading, error, fetch };
};
export default useFetch;

4
pkgs/ui/src/components/hooks/useGetEntityById.tsx
View File

@@ -10,10 +10,10 @@ const useGetEntityByName = (nameOrDid: string) => {
}
const entity = allEntities.find(
(entity) => entity.name === nameOrDid || entity.did === nameOrDid
(entity) => entity.name === nameOrDid || entity.did === nameOrDid,
);
return { entity, isLoading: false };
};
export default useGetEntityByName;
export default useGetEntityByName;

6
pkgs/ui/src/components/summary_card/index.tsx
View File

@@ -36,7 +36,11 @@ const SummaryDetails = ({
Attach / Detach
</Button>
)}
{hasRefreshButton && <Button onClick={onRefresh} variant="contained">Refresh</Button>}
{hasRefreshButton && (
<Button onClick={onRefresh} variant="contained">
Refresh
</Button>
)}
</div>
</div>
{hasDetails && (

4
pkgs/ui/src/components/table/index.tsx
View File

@@ -12,10 +12,8 @@ import { ICustomTable, CustomTableConfiguration } from "@/types";
import { Checkbox, Skeleton } from "@mui/material";
const CustomTable = ({ configuration, data, loading }: ICustomTable) => {
if (loading)
return <Skeleton variant="rectangular" animation="wave" height={200} />
return <Skeleton variant="rectangular" animation="wave" height={200} />;
// display empty icon in case there is no data
if (!data || data.length === 0)

21
pkgs/ui/src/config/access_point/index.tsx
View File

@@ -28,11 +28,10 @@ export const APAttachmentsTableConfig = [
key: "other",
label: "Network",
render: (value: any) => {
let renderedValue = ''
if (typeof value === 'object')
renderedValue = value?.network;
let renderedValue = "";
if (typeof value === "object") renderedValue = value?.network;
return renderedValue;
}
},
},
{
key: "ip",
@@ -65,13 +64,17 @@ export const APServiceRepositoryTableConfig = [
key: "other",
label: "Type",
render: (value: any) => {
let renderedValue: any = ''
if (typeof value === 'object') {
let renderedValue: any = "";
if (typeof value === "object") {
const label = Object.keys(value)[0];
const info = value[label]
renderedValue = (<code>{label} {info}</code>);
const info = value[label];
renderedValue = (
<code>
{label} {info}
</code>
);
}
return renderedValue;
}
},
},
];

21
pkgs/ui/src/config/client_1/index.tsx
View File

@@ -13,8 +13,12 @@ export const Client1ConsumerTableConfig = [
key: "endpoint_url",
label: "End Point",
render: () => {
return <Button disabled variant="outlined">Consume</Button>
}
return (
<Button disabled variant="outlined">
Consume
</Button>
);
},
},
// {
// key: "entity",
@@ -55,14 +59,19 @@ export const Client1ProducerTableConfig = [
key: "other",
label: "Action",
render: (value: any) => {
let renderedValue: any = '';
let renderedValue: any = "";
if (typeof value === "object")
renderedValue = (
<>
{value.action.map((actionType: string) => <><code>{actionType}</code><br /></>)}
{value.action.map((actionType: string) => (
<>
<code>{actionType}</code>
<br />
</>
))}
</>
)
);
return renderedValue;
},
}
},
];

21
pkgs/ui/src/config/client_2/index.tsx
View File

@@ -13,8 +13,12 @@ export const Client2ConsumerTableConfig = [
key: "endpoint_url",
label: "End Point",
render: () => {
return <Button disabled variant="outlined">Consume</Button>
}
return (
<Button disabled variant="outlined">
Consume
</Button>
);
},
},
// {
// key: "entity",
@@ -55,14 +59,19 @@ export const Client2ProducerTableConfig = [
key: "other",
label: "Action",
render: (value: any) => {
let renderedValue: any = '';
let renderedValue: any = "";
if (typeof value === "object")
renderedValue = (
<>
{value.action.map((actionType: string) => <><code>{actionType}</code><br /></>)}
{value.action.map((actionType: string) => (
<>
<code>{actionType}</code>
<br />
</>
))}
</>
)
);
return renderedValue;
},
}
},
];

4
pkgs/ui/src/config/dlg/index.ts
View File

@@ -46,6 +46,6 @@ export const DLGResolutionTableConfig = [
{
key: "timestamp",
label: "Timestamp",
render: (value: string) => formatDateTime(value)
}
render: (value: string) => formatDateTime(value),
},
];

7
pkgs/ui/src/config/home/index.ts
View File

@@ -13,7 +13,7 @@ export const HomeTableConfig = [
render: (value: any) => {
const renderedValue = typeof value === "object" ? value?.network : "-";
return renderedValue;
}
},
},
{
key: "ip",
@@ -23,9 +23,10 @@ export const HomeTableConfig = [
key: "other",
label: "Roles",
render: (value: any) => {
const renderedValue = typeof value === "object" ? value?.roles?.join(", ") : "-";
const renderedValue =
typeof value === "object" ? value?.roles?.join(", ") : "-";
return renderedValue;
}
},
},
{
key: "attached",

14
pkgs/ui/src/constants/index.ts
View File

@@ -1,15 +1,9 @@
const BASE_URL = 'http://localhost:2979/api/v1';
const BASE_URL = "http://localhost:2979/api/v1";
// Home View
const HOME_VIEW_TABLE = '/get_entities';
const HOME_VIEW_TABLE = "/get_entities";
// Access Point
const SERVICE_REPOSITORY_URL = '/get_repositories';
const SERVICE_REPOSITORY_URL = "/get_repositories";
export {
BASE_URL,
HOME_VIEW_TABLE,
SERVICE_REPOSITORY_URL,
}
export { BASE_URL, HOME_VIEW_TABLE, SERVICE_REPOSITORY_URL };

18
pkgs/ui/src/utils/helpers.ts
View File

@@ -1,12 +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
return _date.toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: true,
});
}
};