add calculation function

dashboard/pages/api/metric.ts

@@ -31,27 +31,19 @@ export async function getActorBackPressures() {
 }
 
 export interface BackPressureInfo {
-  id: number;
-  name: string;
-  owner: number;
-  columns: Field[];
   actorId: number,
-  fragementId: number,
-  donwStreamFragmentId: number,
+  fragmentId: number,
+  downstreamFragmentId: number,
   value: number,
 }
 
 export const BackPressureInfo = {
   fromJSON: (object: any) => {
     return {
-      id: 0,
-      name: "",
-      owner: 0,
-      columns: [],
       actorId: isSet(object.actorId) ? Number(object.actorId) : 0,
-      fragementId: isSet(object.fragementId) ? Number(object.fragementId) : 0,
-      donwStreamFragmentId: isSet(object.donwStreamFragmentId) ? Number(object.donwStreamFragmentId) : 0,
-      value: isSet(object.value) ? Number(object.value) : 0,
+      fragmentId: isSet(object.fragmentId) ? Number(object.fragmentId) : 0,
+      downstreamFragmentId: isSet(object.downstreamFragmentId) ? Number(object.downstreamFragmentId) : 0,
+      value: isSet(object.value) ? Number(object.value) : "0",
     }
   },
 }

dashboard/pages/back_pressure_rates.tsx

@@ -14,11 +14,134 @@
  * limitations under the License.
  *
  */
+import Title from "../components/Title"
+import Head from "next/head"
 import {
-    Relations,
-} from "../components/Relations"
+    Box,
+    Table,
+    TableContainer,
+    Tbody,
+    Td,
+    Th,
+    Thead,
+    Tr,
+} from "@chakra-ui/react"
+import { Fragment, useEffect, useState } from "react"
 import { BackPressureInfo, getComputeBackPressures } from "./api/metric"
+import useErrorToast from "../hook/useErrorToast"
 
-export default function BackPressureRates() {
-    return Relations("Back Pressure Rates", getComputeBackPressures, [])
+const INTERVAL = 20000;
+
+interface BackPressureRateInfo {
+    actorId: number,
+    fragmentId: number,
+    downstreamFragmentId: number,
+    value: string,
+}
+
+function convertToMap(back_pressures: BackPressureInfo[]): Map<string, number> {
+    const map = new Map<string, number>();
+    for (const item of back_pressures) {
+        const key = `${item.actorId}-${item.fragmentId}-${item.downstreamFragmentId}`;
+        map.set(key, item.value);
+    }
+    return map;
+}
+
+function convertFromMap(map: Map<string, string>): BackPressureRateInfo[] {
+    const result: BackPressureRateInfo[] = [];
+    map.forEach((value, key) => {
+        const [actorId, fragmentId, downstreamFragmentId] = key.split('-').map(Number);
+        const backPressureRateInfo: BackPressureRateInfo = {
+            actorId,
+            fragmentId,
+            downstreamFragmentId,
+            value,
+        };
+        result.push(backPressureRateInfo);
+    });
+    return result;
+}
+
+
+function calculation(back_pressure_new: BackPressureInfo[], back_pressure_old: BackPressureInfo[]): BackPressureRateInfo[] {
+    let map_new = convertToMap(back_pressure_new);
+    let map_old = convertToMap(back_pressure_old);
+    let result = new Map<string, string>();
+    map_new.forEach((value, key) => {
+        if (map_old.has(key)) {
+            result.set(key, ((value - map_old.get(key)) / (INTERVAL * 1000000000)).toString());
+        } else {
+            result.set(key, "-");
+        }
+    });
+
+    return convertFromMap(result);
+}
+
+export default function back_pressure() {
+    const [previousBP, setPreviousBP] = useState<BackPressureInfo[]>([]);
+    const [backPressureRate, setBackPressureRate] = useState<BackPressureRateInfo[]>([]);
+    const title = "Back Pressure Rates";
+    const toast = useErrorToast()
+
+    useEffect(() => {
+        let localPreviousBP = previousBP;
+
+        async function fetchData() {
+            while (true) {
+                try {
+                    const currentBP = await getComputeBackPressures();
+                    const backPressureRate = calculation(currentBP, localPreviousBP);
+                    setBackPressureRate(backPressureRate);
+                    localPreviousBP = currentBP;
+                    setPreviousBP(currentBP);
+                    await new Promise((resolve) => setTimeout(resolve, INTERVAL));
+                } catch (e: any) {
+                    toast(e, "warning")
+                    break;
+                }
+            }
+        }
+
+        fetchData();
+        return () => { };
+    }, [toast]);
+
+    const table = (
+        <Box p={3}>
+            <Title>{title}</Title>
+            <TableContainer>
+                <Table variant="simple" size="sm" maxWidth="full">
+                    <Thead>
+                        <Tr>
+                            <Th width={3}>ActorId</Th>
+                            <Th width={3}>FragmentId</Th>
+                            <Th width={3}>DownStreamFragmentId</Th>
+                            <Th width={3}>Value</Th>
+                        </Tr>
+                    </Thead>
+                    <Tbody>
+                        {backPressureRate?.map((r) => (
+                            <Tr key={r.actorId}>
+                                <Td>{r.actorId}</Td>
+                                <Td>{r.fragmentId}</Td>
+                                <Td>{r.downstreamFragmentId}</Td>
+                                <Td>{r.value}</Td>
+                            </Tr>
+                        ))}
+                    </Tbody>
+                </Table>
+            </TableContainer>
+        </Box>
+    )
+
+    return (
+        <Fragment>
+            <Head>
+                <title>{title}</title>
+            </Head>
+            {table}
+        </Fragment>
+    )
 }