style: re-design consumer group page

andrewinci · Oct 17, 2022 · 79117b8 · 79117b8
1 parent 114c282
commit 79117b8
Showing 1 changed file with 51 additions and 25 deletions.
diff --git a/src/pages/consumer-groups/consumer-group.tsx b/src/pages/consumer-groups/consumer-group.tsx
@@ -1,15 +1,24 @@
-import { Text, Button, Container, Divider, Group, Center, Stack, SimpleGrid } from "@mantine/core";
+import { Text, Button, Container, Divider, Group, Stack, SimpleGrid } from "@mantine/core";
 import { IconRefresh } from "@tabler/icons";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { SingleLineTitle } from "../../components";
 import { ConsumerGroupInfo } from "../../models/kafka";
 import { describeConsumerGroup } from "../../tauri";
 
 export const ConsumerGroup = ({ name, clusterId }: { name: string; clusterId: string }) => {
+  // todo: wip cache last result on the backend
   const [state, setState] = useState<ConsumerGroupInfo | undefined>(undefined);
-  const retrieveConsumerGroup = () => {
-    describeConsumerGroup(clusterId, name).then((cgi) => setState(cgi));
-  };
+  useMemo(() => {
+    setState(undefined);
+  }, [name, clusterId]);
+
+  const retrieveConsumerGroup = useMemo(
+    () => async () => {
+      await describeConsumerGroup(clusterId, name).then((s) => setState(s));
+    },
+    [name, clusterId]
+  );
+
   return (
     <Container>
       <Group noWrap style={{ maxHeight: 50 }} position={"apart"}>
@@ -18,27 +27,44 @@ export const ConsumerGroup = ({ name, clusterId }: { name: string; clusterId: st
       <Divider my={10} />
 
       <Stack m={10} align={"stretch"} justify={"flex-start"}>
-        {!state && (
-          <Center mt={10}>
-            <Text>Retrive the consumer group info may take few minutes. Click the button to start the process.</Text>
-            <Button onClick={retrieveConsumerGroup}>
-              <IconRefresh /> Get consumer group info
-            </Button>
-          </Center>
-        )}
+        <Group>
+          <Button mb={10} size="xs" onClick={retrieveConsumerGroup}>
+            <IconRefresh /> Refresh
+          </Button>
+
+          {/*
+            todo: allow reset each single topic/partition
+            <Menu shadow="md" width={200}>
+            <Menu.Target>
+              <Button mb={10} size="xs">
+                <IconTool /> Reset offset tool
+              </Button>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <Menu.Item icon={<IconPlayerPlay size={14} />}>Reset to the beginning</Menu.Item>
+              <Menu.Item icon={<IconFlag size={14} />}>Reset to end</Menu.Item>
+              <Menu.Item icon={<IconClock size={14} />}>Reset to a point in time</Menu.Item>
+            </Menu.Dropdown>
+          </Menu> */}
+        </Group>
         {state && (
-          <SimpleGrid cols={3}>
-            <Text weight={"bold"}>Topic</Text>
-            <Text weight={"bold"}>Partition</Text>
-            <Text weight={"bold"}>Offset</Text>
-            {state.offsets.map((o, i) => (
-              <>
-                <Text key={`topic-${i}`}>{o.topic}</Text>
-                <Text key={`partition-${i}`}>{o.partition_id}</Text>
-                <Text key={`offset-${i}`}>{o.offset}</Text>
-              </>
-            ))}
-          </SimpleGrid>
+          <>
+            <SimpleGrid cols={3}>
+              <Text weight={"bold"}>Topic</Text>
+              <Text weight={"bold"}>Partition</Text>
+              <Text weight={"bold"}>Offset</Text>
+              {state.offsets.map((o, i) => (
+                <>
+                  <Text key={`topic-${i}`}>{o.topic}</Text>
+                  <Text key={`partition-${i}`}>{o.partition_id}</Text>
+                  <Text key={`offset-${i}`}>{o.offset}</Text>
+                </>
+              ))}
+            </SimpleGrid>
+            {/* <Button my={10} color="red">
+              Update
+            </Button> */}
+          </>
         )}
       </Stack>
     </Container>