Skip to content

Commit

Permalink
format
Browse files Browse the repository at this point in the history
  • Loading branch information
@fuyufjh
fuyufjh committed Dec 19, 2024
1 parent d8f287e commit 6671fcb
Show file tree
Hide file tree
Showing 7 changed files with 86 additions and 44 deletions.
46 changes: 31 additions & 15 deletions dashboard/components/FragmentGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,14 @@ import {
layoutItem,
} from "../lib/layout"
import { PlanNodeDatum } from "../pages/fragment_graph"
import { StreamNode } from "../proto/gen/stream_plan"
import { backPressureColor, backPressureWidth, epochToUnixMillis, latencyToColor } from "./utils/backPressure"
import { FragmentStats } from "../proto/gen/monitor_service"
import { StreamNode } from "../proto/gen/stream_plan"
import {
backPressureColor,
backPressureWidth,
epochToUnixMillis,
latencyToColor,
} from "./utils/backPressure"

const ReactJson = loadable(() => import("react-json-view"))

Expand Down Expand Up @@ -250,14 +255,21 @@ export default function FragmentGraph({
.attr("height", ({ height }) => height - fragmentMarginY * 2)
.attr("x", fragmentMarginX)
.attr("y", fragmentMarginY)
.attr("fill", fragmentStats ? ({ id }) => {
const fragmentId = parseInt(id)
if (isNaN(fragmentId) || !fragmentStats[fragmentId]) {
return "white";
}
let currentMs = epochToUnixMillis(fragmentStats[fragmentId].currentEpoch)
return latencyToColor(now_ms - currentMs, "white");
} : "white")
.attr(
"fill",
fragmentStats
? ({ id }) => {
const fragmentId = parseInt(id)
if (isNaN(fragmentId) || !fragmentStats[fragmentId]) {
return "white"
}
let currentMs = epochToUnixMillis(
fragmentStats[fragmentId].currentEpoch
)
return latencyToColor(now_ms - currentMs, "white")
}
: "white"
)
.attr("stroke-width", ({ id }) => (isSelected(id) ? 3 : 1))
.attr("rx", 5)
.attr("stroke", ({ id }) =>
Expand All @@ -267,17 +279,21 @@ export default function FragmentGraph({
const getTooltipContent = (id: string) => {
const fragmentId = parseInt(id)
const stats = fragmentStats?.[fragmentId]
const latencySeconds = stats ? ((now_ms - epochToUnixMillis(stats.currentEpoch)) / 1000).toFixed(2) : "N/A"
const latencySeconds = stats
? ((now_ms - epochToUnixMillis(stats.currentEpoch)) / 1000).toFixed(
2
)
: "N/A"
const epoch = stats?.currentEpoch ?? "N/A"

return `<b>Fragment ${fragmentId}</b><br>Epoch: ${epoch}<br>Latency: ${latencySeconds} seconds`
}

boundingBox
.on("mouseover", (event, { id }) => {
// Remove existing tooltip if any
d3.selectAll(".tooltip").remove()

// Create new tooltip
d3.select("body")
.append("div")
Expand Down Expand Up @@ -462,14 +478,14 @@ export default function FragmentGraph({
.on("mouseover", (event, d) => {
// Remove existing tooltip if any
d3.selectAll(".tooltip").remove()

if (backPressures) {
const value = backPressures.get(`${d.target}_${d.source}`)
if (value) {
// Create new tooltip
d3.select("body")
.append("div")
.attr("class", "tooltip")
.attr("class", "tooltip")
.style("position", "absolute")
.style("background", "white")
.style("padding", "10px")
Expand Down
58 changes: 39 additions & 19 deletions dashboard/components/RelationGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,14 @@ import {
flipLayoutRelation,
generateRelationEdges,
} from "../lib/layout"
import { CatalogModal, useCatalogModal } from "./CatalogModal"
import { backPressureColor, backPressureWidth, epochToUnixMillis, latencyToColor } from "./utils/backPressure"
import { RelationStats } from "../proto/gen/monitor_service"
import { CatalogModal, useCatalogModal } from "./CatalogModal"
import {
backPressureColor,
backPressureWidth,
epochToUnixMillis,
latencyToColor,
} from "./utils/backPressure"

function boundBox(
relationPosition: RelationPointPosition[],
Expand Down Expand Up @@ -158,15 +163,15 @@ export default function RelationGraph({
.on("mouseover", (event, d) => {
// Remove existing tooltip if any
d3.selectAll(".tooltip").remove()

if (backPressures) {
const value = backPressures.get(`${d.target}_${d.source}`)
if (value) {
// Create new tooltip
d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("position", "absolute")
.style("background", "white")
.style("padding", "10px")
.style("border", "1px solid #ddd")
Expand Down Expand Up @@ -214,7 +219,9 @@ export default function RelationGraph({
if (relationStats) {
const relationId = parseInt(id)
if (!isNaN(relationId) && relationStats[relationId]) {
const currentMs = epochToUnixMillis(relationStats[relationId].currentEpoch)
const currentMs = epochToUnixMillis(
relationStats[relationId].currentEpoch
)
return latencyToColor(now_ms - currentMs, baseColor)
}
}
Expand Down Expand Up @@ -264,18 +271,23 @@ export default function RelationGraph({
const getTooltipContent = (relation: Relation, id: string) => {
const relationId = parseInt(id)
const stats = relationStats?.[relationId]
const latencySeconds = stats
? ((Date.now() - epochToUnixMillis(stats.currentEpoch)) / 1000).toFixed(2)
const latencySeconds = stats
? (
(Date.now() - epochToUnixMillis(stats.currentEpoch)) /
1000
).toFixed(2)
: "N/A"
const epoch = stats?.currentEpoch ?? "N/A"

return `<b>${relation.name} (${relationTypeTitleCase(relation)})</b><br>Epoch: ${epoch}<br>Latency: ${latencySeconds} seconds`

return `<b>${relation.name} (${relationTypeTitleCase(
relation
)})</b><br>Epoch: ${epoch}<br>Latency: ${latencySeconds} seconds`
}

g.on("mouseover", (event, { relation, id }) => {
// Remove existing tooltip if any
d3.selectAll(".tooltip").remove()

// Create new tooltip
d3.select("body")
.append("div")
Expand All @@ -291,14 +303,14 @@ export default function RelationGraph({
.style("font-size", "12px")
.html(getTooltipContent(relation, id))
})
.on("mousemove", (event) => {
d3.select(".tooltip")
.style("left", event.pageX + 10 + "px")
.style("top", event.pageY + 10 + "px")
})
.on("mouseout", () => {
d3.selectAll(".tooltip").remove()
})
.on("mousemove", (event) => {
d3.select(".tooltip")
.style("left", event.pageX + 10 + "px")
.style("top", event.pageY + 10 + "px")
})
.on("mouseout", () => {
d3.selectAll(".tooltip").remove()
})

// Relation modal
g.style("cursor", "pointer").on("click", (_, { relation, id }) => {
Expand All @@ -321,7 +333,15 @@ export default function RelationGraph({
nodeSelection.enter().call(createNode)
nodeSelection.call(applyNode)
nodeSelection.exit().remove()
}, [layoutMap, links, selectedId, setModalId, setSelectedId, backPressures, relationStats])
}, [
layoutMap,
links,
selectedId,
setModalId,
setSelectedId,
backPressures,
relationStats,
])

return (
<>
Expand Down
4 changes: 2 additions & 2 deletions dashboard/components/utils/backPressure.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export function epochToUnixMillis(epoch: number) {
export function latencyToColor(latency_ms: number, baseColor: string) {
const LOWER = 10000 // 10s
const UPPER = 300000 // 5min

const colorRange = [
baseColor,
theme.colors.yellow["200"],
Expand Down Expand Up @@ -84,4 +84,4 @@ export function latencyToColor(latency_ms: number, baseColor: string) {
.toHexString()

return color
}
}
4 changes: 3 additions & 1 deletion dashboard/lib/api/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ export const PREDEFINED_API_ENDPOINTS = [
]

export const DEFAULT_API_ENDPOINT: string =
process.env.NODE_ENV === "production" ? PROD_API_ENDPOINT : EXTERNAL_META_NODE_API_ENDPOINT // EXTERNAL_META_NODE_API_ENDPOINT to debug with RisingWave servers
process.env.NODE_ENV === "production"
? PROD_API_ENDPOINT
: EXTERNAL_META_NODE_API_ENDPOINT // EXTERNAL_META_NODE_API_ENDPOINT to debug with RisingWave servers

export const API_ENDPOINT_KEY = "risingwave.dashboard.api.endpoint"

Expand Down
2 changes: 1 addition & 1 deletion dashboard/lib/api/metric.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export async function fetchEmbeddedBackPressure() {
const response: GetBackPressureResponse = await api.get(
"/metrics/fragment/embedded_back_pressures"
)
return response;
return response
}

function calculatePercentile(samples: MetricsSample[], percentile: number) {
Expand Down
10 changes: 6 additions & 4 deletions dashboard/pages/fragment_graph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,16 +329,18 @@ export default function Streaming() {
// Didn't call `useFetch()` because the `setState` way is special.
const [embeddedBackPressureInfo, setEmbeddedBackPressureInfo] =
useState<EmbeddedBackPressureInfo>()
const [fragmentStats, setFragmentStats] =
useState< { [key: number]: FragmentStats }>()
const [fragmentStats, setFragmentStats] = useState<{
[key: number]: FragmentStats
}>()

useEffect(() => {
if (backPressureDataSource === "Embedded") {
function refresh() {
fetchEmbeddedBackPressure().then(
(response) => {
console.log(response)
let newBP = response.backPressureInfos?.map(BackPressureInfo.fromJSON) ?? [];
let newBP =
response.backPressureInfos?.map(BackPressureInfo.fromJSON) ?? []
setEmbeddedBackPressureInfo((prev) =>
prev
? {
Expand All @@ -359,7 +361,7 @@ export default function Streaming() {
totalDurationNs: 0,
}
)
setFragmentStats(response.fragmentStats);
setFragmentStats(response.fragmentStats)
},
(e) => {
console.error(e)
Expand Down
6 changes: 4 additions & 2 deletions dashboard/pages/relation_graph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,9 @@ export default function StreamingGraph() {
// Didn't call `useFetch()` because the `setState` way is special.
const [embeddedBackPressureInfo, setEmbeddedBackPressureInfo] =
useState<EmbeddedBackPressureInfo>()
const [relationStats, setRelationStats] = useState<{ [key: number]: RelationStats }>();
const [relationStats, setRelationStats] = useState<{
[key: number]: RelationStats
}>()

useEffect(() => {
if (resetEmbeddedBackPressures) {
Expand Down Expand Up @@ -165,7 +167,7 @@ export default function StreamingGraph() {
totalDurationNs: 0,
}
)
setRelationStats(response.relationStats);
setRelationStats(response.relationStats)
},
(e) => {
console.error(e)
Expand Down

0 comments on commit 6671fcb

Please sign in to comment.