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

Stash changes

Browse Source
This commit is contained in:
Luis-Hebendanz
2024-01-07 13:35:22 +01:00
parent aa664dfce1
commit bd30682092
38 changed files with 661 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pkgs/ui/shell.nix
View File

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

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

@@ -2,7 +2,7 @@
import { mutate } from "swr";
import { useGetAttachedEntities } from "@/api/entities/entities";
import { useGetRepositories } from "@/api/repositories/repositories";
import { useGetAllRepositories } from "@/api/repositories/repositories";
import SummaryDetails from "@/components/summary_card";
import CustomTable from "@/components/table";
import {
@@ -22,7 +22,7 @@ export default function AccessPoint() {
data: APRepositories,
isLoading: laodingRepositories,
swrKey: repositoriesKeyFunc,
} = useGetRepositories();
} = useGetAllRepositories();
const onRefresh = () => {
const attachedEntitiesKey =

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

@@ -1,168 +0,0 @@
"use client";
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 {
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 { 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 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,
});
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(response);
setSnackbarMessage("Entity detached successfully.");
setSnackbarOpen(true);
} catch (error) {
console.error(error);
} finally {
setIsAttached(false);
}
};
const onRefresh = () => {
const entityKey =
typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc;
if (entityKey) mutate(entityKey);
};
useEffect(() => {
const interval = setInterval(() => {
onRefresh();
}, 1000);
return () => clearInterval(interval);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (isLoading) return <Skeleton height={500} />;
return (
<div className="m-10">
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<h2>Client 1</h2>
<div>
{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>
<Card variant="outlined">
<CardHeader
subheader="Summary"
action={<CopyToClipboard contentRef={cardContentRef} />}
/>
<CardContent ref={cardContentRef}>
<Typography color="text.primary" gutterBottom>
DID: <code>{client1?.data?.did}</code>
</Typography>
<Typography color="text.primary" gutterBottom>
IP: <code>{client1?.data?.ip}</code>
</Typography>
<Typography color="text.primary" gutterBottom>
Network: <code>{client1?.data?.other?.network}</code>
</Typography>
</CardContent>
</Card>
<div>
<h4>Consumer View</h4>
<CustomTable
loading={isLoading}
data={client1?.data?.producers}
configuration={Client1ConsumerTableConfig}
/>
</div>
<div>
<h4>Producer View</h4>
<CustomTable
loading={isLoading}
data={client1?.data?.producers}
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>
);
}

151
pkgs/ui/src/app/client-2/page.tsx → pkgs/ui/src/app/client/[client_name]/page.tsx
View File

@@ -1,70 +1,50 @@
"use client";
import { useEffect, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import {
Client2ConsumerTableConfig,
Client2ProducerTableConfig,
} from "@/config/client_2";
ClientTableConfig,
ServiceTableConfig,
} from "@/config/client_1";
import CustomTable from "@/components/table";
import useGetEntityByName from "@/components/hooks/useGetEntityById";
import {
Alert,
Button,
Card,
CardContent,
CardHeader,
Skeleton,
Typography,
Snackbar,
Alert,
Typography,
} from "@mui/material";
import CopyToClipboard from "@/components/copy_to_clipboard";
import { useGetEntity } from "@/api/entities/entities";
import { useGetServicesByName } from "@/api/services/services";
import { attachEntity, detachEntity } from "@/api/entities/entities";
import { mutate } from "swr";
import axios from "axios";
import { BASE_URL } from "@/constants";
import { Skeleton } from "@mui/material";
import { Service } from "@/api/model";
export default function Client({
params,
}: {
params: { client_name: string };
}) {
const { client_name } = params;
export default function Client2() {
const { entity } = useGetEntityByName("C2");
const {
data: client2,
isLoading,
data: services,
isLoading: services_loading,
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("");
} = useGetServicesByName({
entity_name: client_name,
});
const closeSnackBar = () => {
setSnackbarMessage("");
setSnackbarOpen(false);
};
const onAttachEntity = async () => {
try {
const response = await axios.post(`${BASE_URL}/attach`, {
entity_did: entity?.did,
const entity = services?.data?.entity;
const clients: Service[] = useMemo(() => {
if (services?.data?.services) {
return services.data.services.filter((service) => {
if (service.entity_did !== entity?.did) return true;
});
alert(response.data.message);
} 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.");
} catch (error) {
console.error(error);
} finally {
setIsAttached(false);
}
};
return [];
}, [services]);
const onRefresh = () => {
const entityKey =
@@ -81,7 +61,51 @@ export default function Client2() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (isLoading) return <Skeleton height={500} />;
const cardContentRef = useRef(null);
const [snackbarOpen, setSnackbarOpen] = useState(false);
const [snackbarMessage, setSnackbarMessage] = useState("");
const [isAttached, setIsAttached] = useState(entity?.attached);
const closeSnackBar = () => {
setSnackbarMessage("");
setSnackbarOpen(false);
};
const onAttachEntity = async () => {
try {
if (entity) {
const response = await attachEntity(entity.did);
setSnackbarMessage(response.data.message);
setSnackbarOpen(true);
} else {
console.error("no entity");
}
} catch (error) {
console.error(error);
} finally {
setIsAttached(true);
}
};
const onDetachEntity = async () => {
try {
if (entity) {
const response = await detachEntity(entity.did);
console.log(response);
setSnackbarMessage("Entity detached successfully.");
setSnackbarOpen(true);
} else {
console.error("no entity");
}
} catch (error) {
console.error(error);
} finally {
setIsAttached(false);
}
};
if (services_loading) return <Skeleton height={500} />;
if (!services) return <Alert severity="error">Client not found</Alert>;
return (
<div className="m-10">
@@ -92,7 +116,7 @@ export default function Client2() {
justifyContent: "space-between",
}}
>
<h2>Client 2</h2>
<h2>Client 1</h2>
<div>
{isAttached === false ? (
<Button
@@ -111,6 +135,7 @@ export default function Client2() {
Detach
</Button>
)}
<Button onClick={onRefresh} variant="contained">
Refresh
</Button>
@@ -124,30 +149,32 @@ export default function Client2() {
/>
<CardContent ref={cardContentRef}>
<Typography color="text.primary" gutterBottom>
DID: <code>{client2?.data?.did}</code>
DID: <code>{entity?.did}</code>
</Typography>
<Typography color="text.primary" gutterBottom>
IP: <code>{client2?.data?.ip}</code>
IP: <code>{entity?.ip}</code>
</Typography>
<Typography color="text.primary" gutterBottom>
Network: <code>{client2?.data?.other?.network}</code>
Network: <code>{entity?.other?.network}</code>
</Typography>
</CardContent>
</Card>
<div>
<h4>Consumer View</h4>
<h4>Client View</h4>
<CustomTable
loading={isLoading}
data={client2?.data?.producers}
configuration={Client2ConsumerTableConfig}
loading={services_loading}
data={clients}
configuration={ClientTableConfig}
key="client-table"
/>
</div>
<div>
<h4>Producer View</h4>
<h4>Service View</h4>
<CustomTable
loading={isLoading}
data={client2?.data?.producers}
configuration={Client2ProducerTableConfig}
loading={services_loading}
data={services?.data?.services}
configuration={ServiceTableConfig}
key="service-table"
/>
</div>
<Snackbar

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

@@ -1,4 +1,4 @@
import { useGetEntities } from "@/api/entities/entities";
import { useGetAllEntities } from "@/api/entities/entities";
import { Entity } from "@/api/model";
import { AxiosError } from "axios";
import React, {
@@ -33,7 +33,7 @@ interface AppContextProviderProps {
export const WithAppState = (props: AppContextProviderProps) => {
const { children } = props;
const { data: entityData, swrKey: entitiesKeyFunc } = useGetEntities();
const { data: entityData, swrKey: entitiesKeyFunc } = useGetAllEntities();
const isLoading = false;
const error = undefined;

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

@@ -35,13 +35,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,
},
];

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

@@ -11,7 +11,7 @@ import { StyledTableCell, StyledTableRow } from "./style";
import { ICustomTable, CustomTableConfiguration } from "@/types";
import { Checkbox, Skeleton } from "@mui/material";
const CustomTable = ({ configuration, data, loading }: ICustomTable) => {
const CustomTable = ({ configuration, data, loading, key }: ICustomTable) => {
if (loading)
return <Skeleton variant="rectangular" animation="wave" height={200} />;
@@ -25,7 +25,7 @@ const CustomTable = ({ configuration, data, loading }: ICustomTable) => {
render?: (param: any) => void | undefined,
) => {
let renderedValue = value;
console.log(cellKey)
// cover use case if the data is an array
if (Array.isArray(value)) renderedValue = value.join(", ");
@@ -56,11 +56,11 @@ const CustomTable = ({ configuration, data, loading }: ICustomTable) => {
<TableBody>
{data.map((data: any, rowIndex: number) => (
<StyledTableRow key={rowIndex}>
{configuration.map((column: CustomTableConfiguration) => {
{configuration.map((column: CustomTableConfiguration, columnIndex: number) => {
const cellValue: any = data[column.key];
const cellKey = column.key;
const cellKey = key + ":" + column.key + ":" + rowIndex;
const renderComponent = column?.render;
return renderTableCell(cellValue, cellKey, renderComponent);
return renderTableCell(cellValue, cellKey + ":" + columnIndex, renderComponent);
})}
</StyledTableRow>
))}

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

@@ -1,6 +1,6 @@
import { Button } from "@mui/material";
export const Client1ConsumerTableConfig = [
export const ClientTableConfig = [
{
key: "service_name",
label: "Service name",
@@ -34,7 +34,7 @@ export const Client1ConsumerTableConfig = [
// },
];
export const Client1ProducerTableConfig = [
export const ServiceTableConfig = [
{
key: "service_name",
label: "Service name",

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

@@ -8,7 +8,7 @@ export const HomeTableConfig = [
label: "Entity DID",
},
{
key: "other",
key: "network",
label: "Network",
render: (value: any) => {
const renderedValue = typeof value === "object" ? value?.network : "-";
@@ -20,7 +20,7 @@ export const HomeTableConfig = [
label: "IP address",
},
{
key: "other",
key: "roles",
label: "Roles",
render: (value: any) => {
const renderedValue =

1
pkgs/ui/src/types/index.ts
View File

@@ -8,6 +8,7 @@ export interface ICustomTable {
configuration: CustomTableConfiguration[];
data: any;
loading?: boolean;
key: string;
}
export interface EntityDetails {