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

frontend #35

Merged
merge-bot merged 18 commits from frontend into main 2023-12-09 18:43:16 +00:00
Conversation 0 Commits 18 Files Changed 8 +213 -97
8 changed files with 213 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,11 +6,45 @@ import {
APSummaryDetails,
APAttachmentsDummyData,
APAttachmentsTableConfig,
APServiceRepositoryDummyData,
APServiceRepositoryTableConfig,
} from "@/mock/access_point";
import { useEffect, useState } from "react";
interface RepositoryData {
entity_name: string;
entity_did: string;
network: string;
ip_address: string;
}
export default function AccessPoint() {
const [repositoryData, setRepositoryData] = useState<RepositoryData[]>([]);
useEffect(() => {
fetch("http://localhost:2979/api/v1/get_repositories", {
method: "GET",
// credentials: 'include',
})
.then((resp) =>
resp.json().then((jsonData) => {
console.log(jsonData);
const transformedData = jsonData.map(
(item: { service_name: any; entity_did: any; network: any }) => ({
entity_name: item.service_name,
entity_did: item.entity_did,
network: item.network,
ip_address: "",
}),
);
setRepositoryData(transformedData);
}),
)
.then()
.catch();
}, []);
return (
<div className="m-10">
<SummaryDetails
@@ -27,7 +61,7 @@ export default function AccessPoint() {
<div>
<h4>Service Repository View </h4>
<CustomTable
data={APServiceRepositoryDummyData}
data={repositoryData}
configuration={APServiceRepositoryTableConfig}
/>
</div>

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

@@ -3,14 +3,44 @@
import SummaryDetails from "@/components/summary_card";
import {
Client1SummaryDetails,
Client1ConsumerData,
Client1ConsumerTableConfig,
Client1ProducerTableConfig,
Client1ProducerData,
} from "@/mock/client_1";
import CustomTable from "@/components/table";
import { useEffect, useState } from "react";
export default function Client1() {
const [consumerData, setConsumerData] = useState([]);
const [producerData, setProducerData] = useState([]);
useEffect(() => {
fetch("http://localhost:2979/api/v1/get_consumers", {
method: "GET",
// credentials: 'include',
})
.then((resp) =>
resp.json().then((jsonData) => {
console.log(jsonData);
setConsumerData(jsonData);
}),
)
.then()
.catch();
fetch("http://localhost:2979/api/v1/get_producers", {
method: "GET",
// credentials: 'include',
})
.then((resp) =>
resp.json().then((jsonData) => {
console.log(jsonData);
setProducerData(jsonData);
}),
)
.then()
.catch();
}, []);
return (
<div className="m-10">
<SummaryDetails
@@ -24,14 +54,14 @@ export default function Client1() {
<div>
<h4>Consumer View</h4>
<CustomTable
data={Client1ConsumerData}
data={consumerData}
configuration={Client1ConsumerTableConfig}
/>
</div>
<div>
<h4>Producer View</h4>
<CustomTable
data={Client1ProducerData}
data={producerData}
configuration={Client1ProducerTableConfig}
/>
</div>

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

@@ -2,15 +2,45 @@
import SummaryDetails from "@/components/summary_card";
import {
Client2ConsumerData,
Client2ConsumerTableConfig,
Client2ProducerData,
Client2ProducerTableConfig,
Client2SummaryDetails,
} from "@/mock/client_2";
import CustomTable from "@/components/table";
import { useEffect, useState } from "react";
export default function Client1() {
const [consumerData, setConsumerData] = useState([]);
const [producerData, setProducerData] = useState([]);
useEffect(() => {
fetch("http://localhost:2979/api/v1/get_consumers", {
method: "GET",
// credentials: 'include',
})
.then((resp) =>
resp.json().then((jsonData) => {
console.log(jsonData);
setConsumerData(jsonData);
}),
)
.then()
.catch();
fetch("http://localhost:2979/api/v1/get_producers", {
method: "GET",
// credentials: 'include',
})
.then((resp) =>
resp.json().then((jsonData) => {
console.log(jsonData);
setProducerData(jsonData);
}),
)
.then()
.catch();
}, []);
return (
<div className="m-10">
<SummaryDetails
@@ -24,14 +54,14 @@ export default function Client1() {
<div>
<h4>Consumer View</h4>
<CustomTable
data={Client2ConsumerData}
data={consumerData}
configuration={Client2ConsumerTableConfig}
/>
</div>
<div>
<h4>Producer View</h4>
<CustomTable
data={Client2ProducerData}
data={producerData}
configuration={Client2ProducerTableConfig}
/>
</div>

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

@@ -3,9 +3,27 @@
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 "@/mock/home";
import { useEffect, useState } from "react";
export default function Home() {
const [homeData, setHomeData] = useState([]);
useEffect(() => {
fetch("http://localhost:2979/api/v1/get_entities", {
method: "GET",
// credentials: 'include',
})
.then((resp) =>
resp.json().then((jsonData) => {
console.log(jsonData);
setHomeData(jsonData);
}),
)
.then()
.catch();
}, []);
return (
<div className="m-10">
<SummaryDetails
@@ -16,7 +34,7 @@ export default function Home() {
<div>
<h4>Home View Table</h4>
<CustomTable data={HomeDummyData} configuration={HomeTableConfig} />
<CustomTable data={homeData} configuration={HomeTableConfig} />
</div>
<div>

44
pkgs/ui/src/mock/access_point/index.ts
View File

@@ -20,25 +20,25 @@ export const APSummaryDetails = [
export const APAttachmentsDummyData = [
{
entity_name: "C1",
entity_DID: "did:sov:test:1234",
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",
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",
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",
entity_did: "did:sov:test:0002",
network: "Test Network B",
ip_address: "127.0.0.1",
},
@@ -49,7 +49,7 @@ export const APAttachmentsTableConfig = [
label: "Entity name",
},
{
key: "entity_DID",
key: "entity_did",
label: "Entity DID",
},
{
@@ -67,17 +67,17 @@ export const APServiceRepositoryDummyData = [
{
service_name: "Carlo's Printing",
service_type: "3D Printing",
end_point: "URL",
producer: "C1",
producer_DID: "did:sov:test:1234",
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",
end_point: "URL",
producer: "C2",
producer_DID: "did:sov:test:5678",
endpoint_url: "URL",
entity: "C2",
entity_did: "did:sov:test:5678",
network: "Jeff's Home Network",
},
];
@@ -91,19 +91,23 @@ export const APServiceRepositoryTableConfig = [
label: "Service type",
},
{
key: "end_point",
key: "endpoint_url",
label: "End point",
},
// {
// key: "entity",
// label: "Entity",
// },
{
key: "producer",
label: "Producer",
key: "entity_did",
label: "Entity DID",
},
// {
// key: "network",
// label: "Network",
// },
{
key: "producer_DID",
label: "Producer DID",
},
{
key: "network",
label: "Network",
key: "status",
label: "Status",
},
];

60
pkgs/ui/src/mock/client_1/index.ts
View File

@@ -19,33 +19,33 @@ export const Client1ConsumerData = [
{
service_name: "Carlo's Printing",
service_type: "3D Printing",
end_point: "Consume",
producer: "C2",
producer_did: "did:sov:test:1223",
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",
end_point: "Consume",
producer: "C2",
producer_did: "did:sov:test:1234",
endpoint_url: "Consume",
entity: "C2",
entity_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",
endpoint_url: "Consume",
entity: "C2",
entity_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",
endpoint_url: "Consume",
entity: "C2",
entity_did: "did:sov:test:0062",
network: "Test Network B",
},
];
@@ -60,16 +60,16 @@ export const Client1ConsumerTableConfig = [
label: "Service Type",
},
{
key: "end_point",
key: "endpoint_url",
label: "End Point",
},
{
key: "producer",
label: "Producer",
key: "entity",
label: "Entity",
},
{
key: "producer_did",
label: "Producer DID",
key: "entity_did",
label: "Entity DID",
},
{
key: "network",
@@ -81,7 +81,7 @@ export const Client1ProducerData = [
{
service_name: "Carlo's Printing",
service_type: "3D Printing",
end_point: "URL",
endpoint_url: "URL",
usage: "C1(3), C3(4)",
status: "DRAFT, REGISTERED",
action: "Register, Deregister, Delete",
@@ -89,7 +89,7 @@ export const Client1ProducerData = [
{
service_name: "Steve's Printing",
service_type: "3D Printing",
end_point: "URL",
endpoint_url: "URL",
usage: "C1(3), C3(4)",
status: "REGISTERED",
action: "Create",
@@ -97,7 +97,7 @@ export const Client1ProducerData = [
{
service_name: "Test Printing A",
service_type: "3D Printing",
end_point: "URL",
endpoint_url: "URL",
usage: "C1(3), C3(4)",
status: "DRAFT",
action: "Register, Deregister",
@@ -105,7 +105,7 @@ export const Client1ProducerData = [
{
service_name: "Test Printing B",
service_type: "3D Printing",
end_point: "URL",
endpoint_url: "URL",
usage: "C1(3), C3(4)",
status: "DRAFT, REGISTERED",
action: "Delete, Create",
@@ -122,19 +122,19 @@ export const Client1ProducerTableConfig = [
label: "Service Type",
},
{
key: "end_point",
key: "endpoint_url",
label: "End Point",
},
{
key: "usage",
label: "Usage",
},
// {
// key: "usage",
// label: "Usage",
// },
{
key: "status",
label: "Status",
},
{
key: "action",
label: "Action",
},
// {
// key: "action",
// label: "Action",
// },
];

44
pkgs/ui/src/mock/client_2/index.ts
View File

@@ -19,33 +19,33 @@ export const Client2ConsumerData = [
{
service_name: "Carlo's Printing",
service_type: "3D Printing",
end_point: "Consume",
producer: "C2",
producer_did: "did:sov:test:1223",
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",
end_point: "Consume",
producer: "C2",
producer_did: "did:sov:test:1234",
endpoint_url: "Consume",
entity: "C2",
entity_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",
endpoint_url: "Consume",
entity: "C2",
entity_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",
endpoint_url: "Consume",
entity: "C2",
entity_did: "did:sov:test:0062",
network: "Test Network B",
},
];
@@ -60,16 +60,16 @@ export const Client2ConsumerTableConfig = [
label: "Service Type",
},
{
key: "end_point",
key: "endpoint_url",
label: "End Point",
},
{
key: "producer",
label: "Producer",
key: "entity",
label: "Entity",
},
{
key: "producer_did",
label: "Producer DID",
key: "entity_did",
label: "Entity DID",
},
{
key: "network",
@@ -81,7 +81,7 @@ export const Client2ProducerData = [
{
service_name: "Carlo's Printing",
service_type: "3D Printing",
end_point: "URL",
endpoint_url: "URL",
usage: "C1(3), C3(4)",
status: "DRAFT, REGISTERED",
action: "Register, Deregister, Delete",
@@ -89,7 +89,7 @@ export const Client2ProducerData = [
{
service_name: "Steve's Printing",
service_type: "3D Printing",
end_point: "URL",
endpoint_url: "URL",
usage: "C1(3), C3(4)",
status: "REGISTERED",
action: "Create",
@@ -97,7 +97,7 @@ export const Client2ProducerData = [
{
service_name: "Test Printing A",
service_type: "3D Printing",
end_point: "URL",
endpoint_url: "URL",
usage: "C1(3), C3(4)",
status: "DRAFT",
action: "Register, Deregister",
@@ -105,7 +105,7 @@ export const Client2ProducerData = [
{
service_name: "Test Printing B",
service_type: "3D Printing",
end_point: "URL",
endpoint_url: "URL",
usage: "C1(3), C3(4)",
status: "DRAFT, REGISTERED",
action: "Delete, Create",
@@ -122,7 +122,7 @@ export const Client2ProducerTableConfig = [
label: "Service Type",
},
{
key: "end_point",
key: "endpoint_url",
label: "End Point",
},
{

26
pkgs/ui/src/mock/home/index.ts
View File

@@ -21,27 +21,27 @@ export const HomeDummyData = [
export const HomeTableConfig = [
{
key: "entity_name",
key: "name",
label: "Entity name",
},
{
key: "entity_DID",
key: "did",
label: "Entity DID",
},
// {
// key: "network",
// label: "Network",
// },
{
key: "network",
label: "Network",
},
{
key: "ip_address",
key: "ip",
label: "IP address",
},
// {
// key: "roles",
// label: "Roles",
// },
{
key: "roles",
label: "Roles",
},
{
key: "visible",
label: "Visible",
key: "attached",
label: "Attached",
},
];