ui: add switch to not render mailboxes

Author: joaomlneto

webui/app/page.tsx

@@ -16,6 +16,7 @@ import {
   Group,
   ScrollArea,
   Stack,
+  Switch,
   Title,
 } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
@@ -43,6 +44,11 @@ export default function Home() {
 
   const mode = useGetMode();
 
+  const [showMailboxes, setShowMailboxes] = useLocalStorage<boolean>({
+    key: "byzzbench/showMailboxes",
+    defaultValue: true,
+  });
+
   if (mode.data?.data === "RUNNING") {
     return (
       <Container fluid p="xl">
@@ -63,6 +69,13 @@ export default function Home() {
           <Group wrap="nowrap" gap="xs" align="center">
             <Title order={3}>{schedule?.data.scenarioId}</Title>
             <PredicateList />
+            <Switch
+              label="Show mailboxes"
+              checked={showMailboxes}
+              onChange={(event) => {
+                setShowMailboxes(event.currentTarget.checked);
+              }}
+            />
           </Group>
           <Accordion.Item key="clients" value="clients">
             <Accordion.Control>Clients</Accordion.Control>
@@ -73,7 +86,7 @@ export default function Home() {
           <Accordion.Item key="nodes" value="nodes">
             <Accordion.Control>Nodes</Accordion.Control>
             <Accordion.Panel>
-              <NodeList />
+              <NodeList showMailboxes={showMailboxes} />
             </Accordion.Panel>
           </Accordion.Item>
           {/*<Accordion.Item key="adob" value="adob">

webui/components/NodeCard.tsx

@@ -21,9 +21,10 @@ import React from "react";
 
 export type NodeCardProps = {
   nodeId: string;
+  showMailboxes?: boolean;
 };
 
-export const NodeCard = ({ nodeId }: NodeCardProps) => {
+export const NodeCard = ({ nodeId, showMailboxes = true }: NodeCardProps) => {
   const { data, isLoading } = useGetNode(nodeId);
   const faultyReplicasQuery = useGetFaultyReplicas();
   const partitionsQuery = useGetPartitions();
@@ -69,7 +70,7 @@ export const NodeCard = ({ nodeId }: NodeCardProps) => {
         />
       )}
       <Space h="xs" />
-      <NodeMailbox nodeId={nodeId} />
+      {showMailboxes && <NodeMailbox nodeId={nodeId} />}
     </Card>
   );
 };

webui/components/NodeList.tsx

@@ -5,7 +5,11 @@ import { Grid, Loader } from "@mantine/core";
 import React from "react";
 import { NodeCard } from "./NodeCard";
 
-export const NodeList = () => {
+export type NodeListProps = {
+  showMailboxes?: boolean;
+};
+
+export const NodeList = ({ showMailboxes = true }: NodeListProps) => {
   const { data: nodeIds, isLoading } = useGetReplicas({
     query: { retry: true },
   });
@@ -18,7 +22,7 @@ export const NodeList = () => {
     <Grid gutter="md">
       {nodeIds?.data.map((nodeId) => (
         <Grid.Col span="content" key={nodeId}>
-          <NodeCard nodeId={nodeId} />
+          <NodeCard nodeId={nodeId} showMailboxes={showMailboxes} />
         </Grid.Col>
       ))}
     </Grid>