Skip to content

Commit

Permalink
format
Browse files Browse the repository at this point in the history
  • Loading branch information
@yufansong
yufansong committed Jan 30, 2024
1 parent cc97a44 commit 73d9ad4
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 113 deletions.
4 changes: 3 additions & 1 deletion dashboard/components/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,9 @@ function Layout({ children }: { children: React.ReactNode }) {
<NavTitle>Streaming</NavTitle>
<NavButton href="/dependency_graph/">Dependency Graph</NavButton>
<NavButton href="/fragment_graph/">Fragment Graph</NavButton>
<NavButton href="/back_pressure_rates/">Back Pressure Rates</NavButton>
<NavButton href="/back_pressure_rates/">
Back Pressure Rates
</NavButton>
</Section>
<Section>
<NavTitle>Batch</NavTitle>
Expand Down
26 changes: 16 additions & 10 deletions dashboard/pages/api/metric.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,34 +24,40 @@ export interface BackPressuresMetrics {
// Get back pressure from meta node -> prometheus
export async function getActorBackPressures() {
const res: BackPressuresMetrics = await api.get(
"/metrics/actor/back_pressures"
"/metrics/actor/back_pressures",
)
return res
}

export interface BackPressureInfo {
actorId: number,
fragmentId: number,
downstreamFragmentId: number,
value: number,
actorId: number
fragmentId: number
downstreamFragmentId: number
value: number
}

export const BackPressureInfo = {
fromJSON: (object: any) => {
return {
actorId: isSet(object.actorId) ? Number(object.actorId) : 0,
fragmentId: isSet(object.fragmentId) ? Number(object.fragmentId) : 0,
downstreamFragmentId: isSet(object.downstreamFragmentId) ? Number(object.downstreamFragmentId) : 0,
downstreamFragmentId: isSet(object.downstreamFragmentId)
? Number(object.downstreamFragmentId)
: 0,
value: isSet(object.value) ? Number(object.value) : 0,
}
},
}

// Get back pressure from meta node -> compute node
export async function getComputeBackPressures() {
const response = await api.get("/metrics/back_pressures");
let back_pressure_infos: BackPressureInfo[] = response.backPressureInfos.map(BackPressureInfo.fromJSON)
back_pressure_infos = back_pressure_infos.sort((a, b) => a.actorId - b.actorId)
const response = await api.get("/metrics/back_pressures")
let back_pressure_infos: BackPressureInfo[] = response.backPressureInfos.map(
BackPressureInfo.fromJSON,
)
back_pressure_infos = back_pressure_infos.sort(
(a, b) => a.actorId - b.actorId,
)
return back_pressure_infos
}

Expand All @@ -78,5 +84,5 @@ export function p99(samples: MetricsSample[]) {
}

function isSet(value: any): boolean {
return value !== null && value !== undefined;
return value !== null && value !== undefined
}
213 changes: 111 additions & 102 deletions dashboard/pages/back_pressure_rates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,131 +17,140 @@
import Title from "../components/Title"
import Head from "next/head"
import {
Box,
Table,
TableContainer,
Tbody,
Td,
Th,
Thead,
Tr,
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"

const INTERVAL = 20000;
const INTERVAL = 20000

interface BackPressureRateInfo {
actorId: number,
fragmentId: number,
downstreamFragmentId: number,
backPressureRate: string,
actorId: number
fragmentId: number
downstreamFragmentId: number
backPressureRate: 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;
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,
backPressureRate: value,
};
result.push(backPressureRateInfo);
});
return result;
const result: BackPressureRateInfo[] = []
map.forEach((value, key) => {
const [actorId, fragmentId, downstreamFragmentId] = key
.split("-")
.map(Number)
const backPressureRateInfo: BackPressureRateInfo = {
actorId,
fragmentId,
downstreamFragmentId,
backPressureRate: 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, "-")
}
})

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);
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()
const [previousBP, setPreviousBP] = useState<BackPressureInfo[]>([])
const [backPressureRate, setBackPressureRate] = useState<
BackPressureRateInfo[]
>([])
const title = "Back Pressure Rates"
const toast = useErrorToast()

useEffect(() => {
let localPreviousBP = previousBP;
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;
}
}
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]);
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}>Back Pressure Rate</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.backPressureRate}</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Box>
)
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}>Back Pressure Rate</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.backPressureRate}</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Box>
)

return (
<Fragment>
<Head>
<title>{title}</title>
</Head>
{table}
</Fragment>
)
return (
<Fragment>
<Head>
<title>{title}</title>
</Head>
{table}
</Fragment>
)
}

0 comments on commit 73d9ad4

Please sign in to comment.