Skip to content

Commit 5822f64

Browse files
joaomlnetojoaomlneto
committed
fix webui
1 parent cd3b9f5 commit 5822f64

18 files changed

+711
-782
lines changed

‎webui/.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -126,4 +126,4 @@ fabric.properties
126126
.idea/caches/build_file_checksums.ser
127127

128128

129-
/lib/bftbench-client/generated/
129+
/lib/byzzbench-client/generated/

‎webui/components/MutatorsList/MutatorsList.tsx

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
"use client";
22

3-
import { MutatorsListEntry } from "@/components/MutatorsList/MutatorsListEntry";
4-
import { useGetMutatorIds } from "@/lib/bftbench-client";
5-
import { Grid } from "@mantine/core";
3+
import {MutatorsListEntry} from "@/components/MutatorsList/MutatorsListEntry";
4+
import {useGetMutatorIds} from "@/lib/byzzbench-client";
5+
import {Grid} from "@mantine/core";
66
import React from "react";
77

88
export const MutatorsList = () => {
9-
const { data: nodeIds } = useGetMutatorIds({ query: { retry: true } });
10-
return (
11-
<Grid gutter="md">
12-
{nodeIds?.data.map((nodeId) => (
13-
<Grid.Col span="auto" key={nodeId}>
14-
<MutatorsListEntry mutatorId={nodeId} />
15-
</Grid.Col>
16-
))}
17-
</Grid>
18-
);
9+
const {data: nodeIds} = useGetMutatorIds({query: {retry: true}});
10+
return (
11+
<Grid gutter="md">
12+
{nodeIds?.data.map((nodeId) => (
13+
<Grid.Col span="auto" key={nodeId}>
14+
<MutatorsListEntry mutatorId={nodeId}/>
15+
</Grid.Col>
16+
))}
17+
</Grid>
18+
);
1919
};

‎webui/components/MutatorsList/MutatorsListEntry.tsx

+23-23
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
"use client";
22

3-
import { useGetMutatorById } from "@/lib/bftbench-client/generated";
4-
import { Container, Group, Text, Title } from "@mantine/core";
3+
import {useGetMutatorById} from "@/lib/byzzbench-client/generated";
4+
import {Container, Group, Text, Title} from "@mantine/core";
55
import React from "react";
66

7-
export const MutatorsListEntry = ({ mutatorId }: { mutatorId: number }) => {
8-
const { data: mutator } = useGetMutatorById(mutatorId);
7+
export const MutatorsListEntry = ({mutatorId}: { mutatorId: number }) => {
8+
const {data: mutator} = useGetMutatorById(mutatorId);
99

10-
if (!mutator) {
11-
return "Loading...";
12-
}
10+
if (!mutator) {
11+
return "Loading...";
12+
}
1313

14-
return (
15-
<Container fluid style={{ border: "1px solid black" }} p="md">
16-
<Group justify="space-between" wrap="nowrap" mb="sm">
17-
<div>
18-
<Title order={4}>
19-
{mutatorId}: {mutator.data.name}
20-
</Title>
21-
<Text lineClamp={1}>
22-
{mutator.data.inputClasses
23-
?.map((s) => s.split(".").at(-1))
24-
.join(", ")}
25-
</Text>
26-
</div>
27-
</Group>
28-
</Container>
29-
);
14+
return (
15+
<Container fluid style={{border: "1px solid black"}} p="md">
16+
<Group justify="space-between" wrap="nowrap" mb="sm">
17+
<div>
18+
<Title order={4}>
19+
{mutatorId}: {mutator.data.name}
20+
</Title>
21+
<Text lineClamp={1}>
22+
{mutator.data.inputClasses
23+
?.map((s) => s.split(".").at(-1))
24+
.join(", ")}
25+
</Text>
26+
</div>
27+
</Group>
28+
</Container>
29+
);
3030
};

‎webui/components/NodeCard.tsx

+21-21
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import { NodeStateNavLink } from "@/components/NodeStateNavLink";
2-
import { useGetNode } from "@/lib/bftbench-client";
3-
import { Container, JsonInput, Title } from "@mantine/core";
1+
import {NodeStateNavLink} from "@/components/NodeStateNavLink";
2+
import {useGetNode} from "@/lib/byzzbench-client";
3+
import {Container, JsonInput, Title} from "@mantine/core";
44
import React from "react";
55

66
export type NodeCardProps = {
7-
nodeId: string;
7+
nodeId: string;
88
};
99

10-
export const NodeCard = ({ nodeId }: NodeCardProps) => {
11-
const { data } = useGetNode(nodeId);
10+
export const NodeCard = ({nodeId}: NodeCardProps) => {
11+
const {data} = useGetNode(nodeId);
1212

13-
return (
14-
<Container fluid style={{ border: "1px solid black" }} p="md">
15-
{false && (
16-
<JsonInput value={JSON.stringify(data?.data, null, 2)} autosize />
17-
)}
18-
{data && (
19-
<NodeStateNavLink
20-
data={data.data}
21-
label={<Title order={4}>{nodeId}</Title>}
22-
defaultOpened
23-
opened={true}
24-
/>
25-
)}
26-
</Container>
27-
);
13+
return (
14+
<Container fluid style={{border: "1px solid black"}} p="md">
15+
{false && (
16+
<JsonInput value={JSON.stringify(data?.data, null, 2)} autosize/>
17+
)}
18+
{data && (
19+
<NodeStateNavLink
20+
data={data.data}
21+
label={<Title order={4}>{nodeId}</Title>}
22+
defaultOpened
23+
opened={true}
24+
/>
25+
)}
26+
</Container>
27+
);
2828
};

‎webui/components/NodeList.tsx

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
"use client";
22

3-
import { useGetNodes } from "@/lib/bftbench-client";
4-
import { Grid } from "@mantine/core";
3+
import {useGetNodes} from "@/lib/byzzbench-client";
4+
import {Grid} from "@mantine/core";
55
import React from "react";
6-
import { NodeCard } from "./NodeCard";
6+
import {NodeCard} from "./NodeCard";
77

88
export const NodeList = () => {
9-
const { data: nodeIds } = useGetNodes({ query: { retry: true } });
10-
return (
11-
<Grid gutter="md">
12-
{nodeIds?.data.map((nodeId) => (
13-
<Grid.Col span="auto" key={nodeId}>
14-
<NodeCard nodeId={nodeId} />
15-
</Grid.Col>
16-
))}
17-
</Grid>
18-
);
9+
const {data: nodeIds} = useGetNodes({query: {retry: true}});
10+
return (
11+
<Grid gutter="md">
12+
{nodeIds?.data.map((nodeId) => (
13+
<Grid.Col span="auto" key={nodeId}>
14+
<NodeCard nodeId={nodeId}/>
15+
</Grid.Col>
16+
))}
17+
</Grid>
18+
);
1919
};

‎webui/components/ResetActionIcon.tsx

+32-32
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
11
"use client";
22

3-
import { useReset } from "@/lib/bftbench-client";
4-
import { ActionIcon } from "@mantine/core";
5-
import { showNotification } from "@mantine/notifications";
6-
import { IconTrash } from "@tabler/icons-react";
7-
import { useQueryClient } from "@tanstack/react-query";
3+
import {useReset} from "@/lib/byzzbench-client";
4+
import {ActionIcon} from "@mantine/core";
5+
import {showNotification} from "@mantine/notifications";
6+
import {IconTrash} from "@tabler/icons-react";
7+
import {useQueryClient} from "@tanstack/react-query";
88
import React from "react";
99

1010
export const ResetActionIcon = () => {
11-
const queryClient = useQueryClient();
12-
const { mutate } = useReset();
11+
const queryClient = useQueryClient();
12+
const {mutate} = useReset();
1313

14-
return (
15-
<ActionIcon
16-
onClick={(e) => {
17-
e.preventDefault();
18-
mutate(null as never, {
19-
onSuccess: () => {
20-
showNotification({
21-
message: `Simulation reset`,
22-
});
23-
},
24-
onError: () => {
25-
showNotification({
26-
message: "Failed to reset simulation",
27-
color: "red",
28-
});
29-
},
30-
onSettled: async () => {
31-
await queryClient.invalidateQueries();
32-
},
33-
});
34-
}}
35-
>
36-
<IconTrash />
37-
</ActionIcon>
38-
);
14+
return (
15+
<ActionIcon
16+
onClick={(e) => {
17+
e.preventDefault();
18+
mutate(null as never, {
19+
onSuccess: () => {
20+
showNotification({
21+
message: `Simulation reset`,
22+
});
23+
},
24+
onError: () => {
25+
showNotification({
26+
message: "Failed to reset simulation",
27+
color: "red",
28+
});
29+
},
30+
onSettled: async () => {
31+
await queryClient.invalidateQueries();
32+
},
33+
});
34+
}}
35+
>
36+
<IconTrash/>
37+
</ActionIcon>
38+
);
3939
};

‎webui/components/messages/DeliverMessageActionIcon.tsx

+35-35
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,44 @@
11
"use client";
22

3-
import { useDeliverMessage } from "@/lib/bftbench-client/generated";
4-
import { ActionIcon } from "@mantine/core";
5-
import { showNotification } from "@mantine/notifications";
6-
import { IconSend } from "@tabler/icons-react";
7-
import { useQueryClient } from "@tanstack/react-query";
3+
import {useDeliverMessage} from "@/lib/byzzbench-client/generated";
4+
import {ActionIcon} from "@mantine/core";
5+
import {showNotification} from "@mantine/notifications";
6+
import {IconSend} from "@tabler/icons-react";
7+
import {useQueryClient} from "@tanstack/react-query";
88

99
type DeliverMessageActionIconProps = {
10-
messageId: number;
10+
messageId: number;
1111
};
1212

1313
export const DeliverMessageActionIcon = ({
14-
messageId,
15-
}: DeliverMessageActionIconProps) => {
16-
const queryClient = useQueryClient();
17-
const { mutate } = useDeliverMessage(messageId);
14+
messageId,
15+
}: DeliverMessageActionIconProps) => {
16+
const queryClient = useQueryClient();
17+
const {mutate} = useDeliverMessage(messageId);
1818

19-
return (
20-
<ActionIcon
21-
onClick={(e) => {
22-
e.preventDefault();
23-
mutate(null as never, {
24-
onSuccess: () => {
25-
showNotification({
26-
message: `Message ${messageId} delivered`,
27-
});
28-
},
29-
onError: () => {
30-
showNotification({
31-
message: "Failed to deliver message",
32-
color: "red",
33-
});
34-
},
35-
onSettled: async () => {
36-
await queryClient.invalidateQueries();
37-
},
38-
});
39-
}}
40-
>
41-
<IconSend />
42-
</ActionIcon>
43-
);
19+
return (
20+
<ActionIcon
21+
onClick={(e) => {
22+
e.preventDefault();
23+
mutate(null as never, {
24+
onSuccess: () => {
25+
showNotification({
26+
message: `Message ${messageId} delivered`,
27+
});
28+
},
29+
onError: () => {
30+
showNotification({
31+
message: "Failed to deliver message",
32+
color: "red",
33+
});
34+
},
35+
onSettled: async () => {
36+
await queryClient.invalidateQueries();
37+
},
38+
});
39+
}}
40+
>
41+
<IconSend/>
42+
</ActionIcon>
43+
);
4444
};

‎webui/components/messages/DeliveredMessagesList.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
"use client";
22

3-
import { MessagesList } from "@/components/messages/MessagesList";
4-
import { useGetDeliveredMessages } from "@/lib/bftbench-client/generated";
3+
import {MessagesList} from "@/components/messages/MessagesList";
4+
import {useGetDeliveredMessages} from "@/lib/byzzbench-client/generated";
55
import React from "react";
66

77
export const DeliveredMessagesList = () => {
8-
const { data } = useGetDeliveredMessages({ query: { retry: true } });
8+
const {data} = useGetDeliveredMessages({query: {retry: true}});
99

10-
return <MessagesList messageIds={data?.data ?? []} />;
10+
return <MessagesList messageIds={data?.data ?? []}/>;
1111
};

‎webui/components/messages/DropMessageActionIcon.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { useDropMessage } from "@/lib/bftbench-client/generated";
3+
import { useDropMessage } from "@/lib/byzzbench-client";
44
import { ActionIcon } from "@mantine/core";
55
import { showNotification } from "@mantine/notifications";
66
import { IconSendOff } from "@tabler/icons-react";

‎webui/components/messages/DroppedMessagesList.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
"use client";
22

3-
import { MessagesList } from "@/components/messages/MessagesList";
4-
import { useGetDroppedMessages } from "@/lib/bftbench-client";
3+
import {MessagesList} from "@/components/messages/MessagesList";
4+
import {useGetDroppedMessages} from "@/lib/byzzbench-client";
55
import React from "react";
66

77
export const DroppedMessagesList = () => {
8-
const { data } = useGetDroppedMessages({ query: { retry: true } });
8+
const {data} = useGetDroppedMessages({query: {retry: true}});
99

10-
return <MessagesList messageIds={data?.data ?? []} />;
10+
return <MessagesList messageIds={data?.data ?? []}/>;
1111
};

0 commit comments

Comments
 (0)