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 +136 -52
9 changed files with 136 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 760b4add33 - Show all commits

4
pkgs/clan-cli/tests/test_db_api.py
View File

@@ -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": {

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

@@ -10,6 +10,7 @@ import {
APAttachmentsTableConfig,
APServiceRepositoryTableConfig,
} from "@/config/access_point";
import { useEffect } from 'react';
export default function AccessPoint() {
@@ -28,6 +29,14 @@ export default function AccessPoint() {
}
}
useEffect(() => {
const interval = setInterval(() => {
onRefresh();
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<div className="m-10">
<SummaryDetails

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

@@ -1,16 +1,15 @@
"use client";
import { useRef } from "react";
import { useEffect, useRef, useState } from "react";
import {
Client1ConsumerTableConfig,
Client1ProducerTableConfig,
} from "@/config/client_1";
import CustomTable from "@/components/table";
import useGetEntityByName from "@/components/hooks/useGetEntityById";
import { Button, Card, CardContent, CardHeader, Skeleton, 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";
import { useGetConsumer } from "@/api/consumers/consumers";
import { BASE_URL } from "@/constants";
import axios from "axios";
@@ -18,37 +17,54 @@ export default function Client1() {
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);
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 });
alert(response.data.message);
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('detach', response)
alert('Entity Detached Successfully.');
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;
const consumerKey = typeof consumerKeyFunc === 'function' ? consumerKeyFunc() : consumerKeyFunc;
if (entityKey) mutate(entityKey);
if (consumerKey) mutate(consumerKey)
}
useEffect(() => {
const interval = setInterval(() => {
onRefresh();
}, 1000);
return () => clearInterval(interval);
}, []);
if (isLoading)
return <Skeleton height={500} />
@@ -63,12 +79,17 @@ export default function Client1() {
>
<h2>Client 1</h2>
<div>
<Button onClick={onAttachEntity} className="mr-6" variant="contained">
Attach
</Button>
<Button onClick={onDetachEntity} className="mr-6" variant="contained">
Detach
</Button>
{isAttached === false ?
<Button onClick={onAttachEntity} className="mr-6" variant="contained">
Attach
</Button>
:
<Button onClick={onDetachEntity} className="mr-6" variant="contained">
Detach
</Button>
}
<Button onClick={onRefresh} variant="contained">Refresh</Button>
</div>
</div>
@@ -93,8 +114,8 @@ export default function Client1() {
<div>
<h4>Consumer View</h4>
<CustomTable
loading={loadingConsumerData}
data={consumerData?.data}
loading={isLoading}
data={client1?.data?.producers}
configuration={Client1ConsumerTableConfig}
/>
</div>
@@ -106,6 +127,11 @@ 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%' }}>
{snackbarMessage}
</Alert>
</Snackbar>
</div>
);
}

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

@@ -1,15 +1,14 @@
"use client";
import { useRef } from "react";
import { useEffect, useRef, useState } from "react";
import {
Client2ConsumerTableConfig,
Client2ProducerTableConfig,
} from "@/config/client_2";
import CustomTable from "@/components/table";
import useGetEntityByName from "@/components/hooks/useGetEntityById";
import { Button, Card, CardContent, CardHeader, Skeleton, Typography } 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 { useGetConsumer } from "@/api/consumers/consumers";
import { mutate } from "swr";
import axios from "axios";
import { BASE_URL } from "@/constants";
@@ -18,8 +17,15 @@ export default function Client2() {
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);
const [isAttached, setIsAttached] = useState(entity?.attached);
const [snackbarOpen, setSnackbarOpen] = useState(false);
const [snackbarMessage, setSnackbarMessage] = useState('');
const closeSnackBar = () => {
setSnackbarMessage('');
setSnackbarOpen(false);
}
const onAttachEntity = async () => {
try {
@@ -28,6 +34,7 @@ export default function Client2() {
} catch (error) {
console.error(error);
} finally {
setIsAttached(true)
}
}
@@ -39,16 +46,23 @@ export default function Client2() {
} catch (error) {
console.error(error);
} finally {
setIsAttached(false)
}
}
const onRefresh = () => {
const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc;
const consumerKey = typeof consumerKeyFunc === 'function' ? consumerKeyFunc() : consumerKeyFunc;
if (entityKey) mutate(entityKey);
if (consumerKey) mutate(consumerKey)
}
useEffect(() => {
const interval = setInterval(() => {
onRefresh();
}, 1000);
return () => clearInterval(interval);
}, []);
if (isLoading)
return <Skeleton height={500} />
@@ -63,12 +77,15 @@ export default function Client2() {
>
<h2>Client 2</h2>
<div>
<Button onClick={onAttachEntity} className="mr-6" variant="contained">
Attach
</Button>
<Button onClick={onDetachEntity} className="mr-6" variant="contained">
Detach
</Button>
{isAttached === false ?
<Button onClick={onAttachEntity} className="mr-6" variant="contained">
Attach
</Button>
:
<Button onClick={onDetachEntity} className="mr-6" variant="contained">
Detach
</Button>
}
<Button onClick={onRefresh} variant="contained">Refresh</Button>
</div>
</div>
@@ -93,8 +110,8 @@ export default function Client2() {
<div>
<h4>Consumer View</h4>
<CustomTable
loading={loadingConsumerData}
data={consumerData?.data}
loading={isLoading}
data={client2?.data?.producers}
configuration={Client2ConsumerTableConfig}
/>
</div>
@@ -106,6 +123,11 @@ 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%' }}>
{snackbarMessage}
</Alert>
</Snackbar>
</div>
);
}

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

@@ -4,6 +4,7 @@ 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() {
@@ -13,6 +14,14 @@ export default function DLG() {
fetch();
}
useEffect(() => {
const interval = setInterval(() => {
onRefresh();
}, 5000);
return () => clearInterval(interval);
}, []);
return (
<div className="m-10">
<SummaryDetails

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

@@ -5,16 +5,34 @@ import { NoDataOverlay } from "@/components/noDataOverlay";
import SummaryDetails from "@/components/summary_card";
import CustomTable from "@/components/table";
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();
}, 500);
return () => clearInterval(interval);
}, []);
return (
<div className="m-10">
<SummaryDetails
entity={{ name: "Home", details: [] }}
hasRefreshButton={false}
hasRefreshButton={true}
onRefresh={onRefresh}
hasAttachDetach={false}
/>

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

@@ -17,11 +17,11 @@ export const APSummaryDetails = [
export const APAttachmentsTableConfig = [
{
key: "entity_name",
key: "name",
label: "Entity name",
},
{
key: "entity_did",
key: "did",
label: "Entity DID",
},
{

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

@@ -16,18 +16,18 @@ export const Client1ConsumerTableConfig = [
return <Button disabled variant="outlined">Consume</Button>
}
},
{
key: "entity",
label: "Entity",
},
// {
// key: "entity",
// label: "Entity",
// },
{
key: "entity_did",
label: "Entity DID",
},
{
key: "network",
label: "Network",
},
// {
// key: "network",
// label: "Network",
// },
];
export const Client1ProducerTableConfig = [

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

@@ -16,18 +16,18 @@ export const Client2ConsumerTableConfig = [
return <Button disabled variant="outlined">Consume</Button>
}
},
{
key: "entity",
label: "Entity",
},
// {
// key: "entity",
// label: "Entity",
// },
{
key: "entity_did",
label: "Entity DID",
},
{
key: "network",
label: "Network",
},
// {
// key: "network",
// label: "Network",
// },
];
export const Client2ProducerTableConfig = [