risingwavelabs · st1page · Feb 2, 2024
diff --git a/dashboard/components/BackPressureTable.tsx b/dashboard/components/BackPressureTable.tsx
@@ -51,7 +51,7 @@ export default function BackPressureTable({
           let metrics = await getActorBackPressures()
           metrics.outputBufferBlockingDuration = sortBy(
             metrics.outputBufferBlockingDuration,
-            (m) => (m.metric.fragment_id, m.metric.downstream_fragment_id)
+            (m) => (m.metric.fragment_id, m.metric.downstream_fragment_id),
           )
           setBackPressuresMetrics(metrics)
           await new Promise((resolve) => setTimeout(resolve, 5000)) // refresh every 5 secs

diff --git a/dashboard/components/FragmentDependencyGraph.tsx b/dashboard/components/FragmentDependencyGraph.tsx
@@ -66,12 +66,12 @@ export default function FragmentDependencyGraph({
         .attr("d", ({ points }: DagLink) => line(points))
         .attr("fill", "none")
         .attr("stroke-width", (d) =>
-          isSelected(d.source) || isSelected(d.target) ? 2 : 1
+          isSelected(d.source) || isSelected(d.target) ? 2 : 1,
         )
         .attr("stroke", (d) =>
           isSelected(d.source) || isSelected(d.target)
             ? theme.colors.blue["500"]
-            : theme.colors.gray["300"]
+            : theme.colors.gray["300"],
         )
     const createEdge = (sel: Enter<EdgeSelection>) =>
       sel.append("path").attr("class", "edge").call(applyEdge)
@@ -90,7 +90,7 @@ export default function FragmentDependencyGraph({
       sel
         .attr("transform", (d) => `translate(${d.x! + MARGIN_X}, ${d.y})`)
         .attr("fill", (d) =>
-          isSelected(d) ? theme.colors.blue["500"] : theme.colors.gray["500"]
+          isSelected(d) ? theme.colors.blue["500"] : theme.colors.gray["500"],
         )
 
     const createNode = (sel: Enter<NodeSelection>) =>
@@ -119,7 +119,7 @@ export default function FragmentDependencyGraph({
         .attr("alignment-baseline", "middle")
         .attr("y", (d) => d.y!)
         .attr("fill", (d) =>
-          isSelected(d) ? theme.colors.black["500"] : theme.colors.gray["500"]
+          isSelected(d) ? theme.colors.black["500"] : theme.colors.gray["500"],
         )
         .attr("font-weight", "600")
     const createLabel = (sel: Enter<LabelSelection>) =>
@@ -141,12 +141,12 @@ export default function FragmentDependencyGraph({
         .attr("x", STROKE_WIDTH)
         .attr(
           "height",
-          nodeRadius * 2 + edgeRadius * 2 - MARGIN_Y * 2 - STROKE_WIDTH * 2
+          nodeRadius * 2 + edgeRadius * 2 - MARGIN_Y * 2 - STROKE_WIDTH * 2,
         )
         .attr("width", svgWidth - STROKE_WIDTH * 2)
         .attr(
           "y",
-          (d) => d.y! - nodeRadius - edgeRadius + MARGIN_Y + STROKE_WIDTH
+          (d) => d.y! - nodeRadius - edgeRadius + MARGIN_Y + STROKE_WIDTH,
         )
         .attr("rx", 5)
         .attr("fill", theme.colors.gray["500"])

diff --git a/dashboard/components/FragmentGraph.tsx b/dashboard/components/FragmentGraph.tsx
@@ -39,7 +39,7 @@ type FragmentLayout = {
 
 function treeLayoutFlip<Datum>(
   root: d3.HierarchyNode<Datum>,
-  { dx, dy }: { dx: number; dy: number }
+  { dx, dy }: { dx: number; dy: number },
 ): d3.HierarchyPointNode<Datum> {
   const tree = d3.tree<Datum>().nodeSize([dy, dx])
 
@@ -59,7 +59,7 @@ function boundBox<Datum>(
   root: d3.HierarchyPointNode<Datum>,
   {
     margin: { top, bottom, left, right },
-  }: { margin: { top: number; bottom: number; left: number; right: number } }
+  }: { margin: { top: number; bottom: number; left: number; right: number } },
 ): { width: number; height: number } {
   let x0 = Infinity
   let x1 = -x0
@@ -111,7 +111,7 @@ export default function FragmentGraph({
       setCurrentStreamNode(node)
       onOpen()
     },
-    [onOpen, setCurrentStreamNode]
+    [onOpen, setCurrentStreamNode],
   )
 
   const planNodeDependencyDagCallback = useCallback(() => {
@@ -148,7 +148,7 @@ export default function FragmentGraph({
         return { width, height, id, ...data }
       }),
       fragmentDistanceX,
-      fragmentDistanceY
+      fragmentDistanceY,
     )
     const fragmentLayoutPosition = new Map<string, Position>()
     fragmentLayout.forEach(({ id, x, y }: FragmentBoxPosition) => {
@@ -250,7 +250,7 @@ export default function FragmentGraph({
           .attr("stroke-width", ({ id }) => (isSelected(id) ? 3 : 1))
           .attr("rx", 5)
           .attr("stroke", ({ id }) =>
-            isSelected(id) ? theme.colors.blue[500] : theme.colors.gray[500]
+            isSelected(id) ? theme.colors.blue[500] : theme.colors.gray[500],
           )
 
         // Stream node edges

diff --git a/dashboard/components/RelationDependencyGraph.tsx b/dashboard/components/RelationDependencyGraph.tsx
@@ -36,7 +36,7 @@ import { CatalogModal, useCatalogModal } from "./CatalogModal"
 
 function boundBox(
   relationPosition: RelationPointPosition[],
-  nodeRadius: number
+  nodeRadius: number,
 ): {
   width: number
   height: number
@@ -73,14 +73,14 @@ export default function RelationDependencyGraph({
       nodes,
       layerMargin,
       rowMargin,
-      nodeRadius
+      nodeRadius,
     ).map(
       ({ x, y, ...data }) =>
         ({
           x: x + layoutMargin,
           y: y + layoutMargin,
           ...data,
-        } as RelationPointPosition)
+        }) as RelationPointPosition,
     )
     const links = generateRelationEdges(layoutMap)
     const { width, height } = boundBox(layoutMap, nodeRadius)
@@ -120,15 +120,15 @@ export default function RelationDependencyGraph({
         .attr("fill", "none")
         .attr("stroke-width", 1)
         .attr("stroke-width", (d) =>
-          isSelected(d.source) || isSelected(d.target) ? 4 : 2
+          isSelected(d.source) || isSelected(d.target) ? 4 : 2,
         )
         .attr("opacity", (d) =>
-          isSelected(d.source) || isSelected(d.target) ? 1 : 0.5
+          isSelected(d.source) || isSelected(d.target) ? 1 : 0.5,
         )
         .attr("stroke", (d) =>
           isSelected(d.source) || isSelected(d.target)
             ? theme.colors.blue["500"]
-            : theme.colors.gray["300"]
+            : theme.colors.gray["300"],
         )
 
     const createEdge = (sel: Enter<EdgeSelection>) =>
@@ -200,7 +200,7 @@ export default function RelationDependencyGraph({
 
       typeTooltip.text(
         ({ relation }) =>
-          `${relation.name} (${relationTypeTitleCase(relation)})`
+          `${relation.name} (${relationTypeTitleCase(relation)})`,
       )
 
       // Relation modal

diff --git a/dashboard/components/Relations.tsx b/dashboard/components/Relations.tsx
@@ -112,7 +112,7 @@ export const streamingJobColumns = [dependentsColumn, fragmentsColumn]
 export function Relations<R extends Relation>(
   title: string,
   getRelations: () => Promise<R[]>,
-  extraColumns: Column<R>[]
+  extraColumns: Column<R>[],
 ) {
   const { response: relationList } = useFetch(getRelations)
   const [modalData, setModalId] = useCatalogModal(relationList)

diff --git a/dashboard/hook/useErrorToast.ts b/dashboard/hook/useErrorToast.ts
@@ -40,6 +40,6 @@ export default function useErrorToast() {
         isClosable: true,
       })
     },
-    [toast]
+    [toast],
   )
 }
diff --git a/dashboard/lib/algo.ts b/dashboard/lib/algo.ts
@@ -52,7 +52,7 @@ export function treeBfs(root: GraphNode, step: GraphTraverseStep) {
 export function graphBfs(
   root: GraphNode,
   step: GraphTraverseStep,
-  neighborListKey?: string
+  neighborListKey?: string,
 ) {
   let key = (neighborListKey || "nextNodes") as keyof typeof root
   let visitedNodes = new Set()

diff --git a/dashboard/lib/layout.ts b/dashboard/lib/layout.ts
@@ -20,14 +20,10 @@ import { Relation } from "../pages/api/streaming"
 import { TableFragments_Fragment } from "../proto/gen/meta"
 import { GraphNode } from "./algo"
 
-export type Enter<Type> = Type extends d3.Selection<
-  any,
-  infer B,
-  infer C,
-  infer D
->
-  ? d3.Selection<d3.EnterElement, B, C, D>
-  : never
+export type Enter<Type> =
+  Type extends d3.Selection<any, infer B, infer C, infer D>
+    ? d3.Selection<d3.EnterElement, B, C, D>
+    : never
 
 interface DagNode {
   node: GraphNode
@@ -164,7 +160,7 @@ function dagLayout(nodes: GraphNode[]) {
             isStraightLineOccupied(
               node2Layer.get(node),
               node2Layer.get(nextNode),
-              ++r
+              ++r,
             )
           ) {}
           putNodeInPosition(node, r)
@@ -189,7 +185,7 @@ function dagLayout(nodes: GraphNode[]) {
           !isStraightLineOccupied(
             node2Layer.get(node) + 1,
             node2Layer.get(nextNode),
-            r
+            r,
           )
         ) {
           putNodeInPosition(nextNode, r)
@@ -202,7 +198,7 @@ function dagLayout(nodes: GraphNode[]) {
           isStraightLineOccupied(
             node2Layer.get(node) + 1,
             node2Layer.get(nextNode),
-            ++r
+            ++r,
           )
         ) {}
         putNodeInPosition(nextNode, r)
@@ -224,7 +220,7 @@ function dagLayout(nodes: GraphNode[]) {
  * @returns Layer and row of the item
  */
 function gridLayout<I extends LayoutItemBase>(
-  items: Array<I>
+  items: Array<I>,
 ): Map<I, [number, number]> {
   // turn item to GraphNode
   let idToItem = new Map<String, I>()
@@ -318,7 +314,7 @@ export interface Edge {
 export function layoutItem<I extends LayoutItemBase>(
   items: Array<I>,
   layerMargin: number,
-  rowMargin: number
+  rowMargin: number,
 ): (I & Position)[] {
   let layoutMap = gridLayout(items)
   let layerRequiredWidth = new Map<number, number>()
@@ -350,7 +346,7 @@ export function layoutItem<I extends LayoutItemBase>(
     index: number,
     margin: number,
     resultMap: Map<number, number>,
-    marginMap: Map<number, number>
+    marginMap: Map<number, number>,
   ): number => {
     let rtn = resultMap.get(index)
     if (rtn) {
@@ -377,7 +373,7 @@ export function layoutItem<I extends LayoutItemBase>(
       i,
       layerMargin,
       layerCumulativeWidth,
-      layerRequiredWidth
+      layerRequiredWidth,
     )
   }
   for (let i = 0; i <= maxRow; ++i) {
@@ -406,7 +402,7 @@ function layoutRelation(
   relations: Array<RelationPoint>,
   layerMargin: number,
   rowMargin: number,
-  nodeRadius: number
+  nodeRadius: number,
 ): RelationPointPosition[] {
   const result = layoutItem(relations, layerMargin, rowMargin)
   return result.map(({ x, y, ...data }) => ({
@@ -420,13 +416,13 @@ export function flipLayoutRelation(
   relations: Array<RelationPoint>,
   layerMargin: number,
   rowMargin: number,
-  nodeRadius: number
+  nodeRadius: number,
 ): RelationPointPosition[] {
   const fragmentPosition = layoutRelation(
     relations,
     rowMargin,
     layerMargin,
-    nodeRadius
+    nodeRadius,
   )
   return fragmentPosition.map(({ x, y, ...data }) => ({
     x: y,
@@ -436,7 +432,7 @@ export function flipLayoutRelation(
 }
 
 export function generateRelationEdges(
-  layoutMap: RelationPointPosition[]
+  layoutMap: RelationPointPosition[],
 ): Edge[] {
   const links = []
   const relationMap = new Map<string, RelationPointPosition>()
@@ -460,7 +456,7 @@ export function generateRelationEdges(
 }
 
 export function generateFragmentEdges(
-  layoutMap: FragmentBoxPosition[]
+  layoutMap: FragmentBoxPosition[],
 ): Edge[] {
   const links = []
   const fragmentMap = new Map<string, FragmentBoxPosition>()

diff --git a/dashboard/next.config.js b/dashboard/next.config.js
@@ -19,7 +19,7 @@
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
-  output: 'export',
+  output: "export",
   trailingSlash: true,
 }
 

diff --git a/dashboard/pages/api/cluster.ts b/dashboard/pages/api/cluster.ts
@@ -24,14 +24,14 @@ export async function getClusterMetrics() {
 
 export async function getClusterInfoFrontend() {
   const res: WorkerNode[] = (await api.get("/clusters/1")).map(
-    WorkerNode.fromJSON
+    WorkerNode.fromJSON,
   )
   return res
 }
 
 export async function getClusterInfoComputeNode() {
   const res: WorkerNode[] = (await api.get("/clusters/2")).map(
-    WorkerNode.fromJSON
+    WorkerNode.fromJSON,
   )
   return res
 }
diff --git a/dashboard/pages/api/fetch.ts b/dashboard/pages/api/fetch.ts
@@ -28,7 +28,7 @@ import useErrorToast from "../../hook/useErrorToast"
 export default function useFetch<T>(
   fetchFn: () => Promise<T>,
   intervalMs: number | null = null,
-  when: boolean = true
+  when: boolean = true,
 ) {
   const [response, setResponse] = useState<T>()
   const toast = useErrorToast()

diff --git a/dashboard/pages/api/metric.ts b/dashboard/pages/api/metric.ts
@@ -23,7 +23,7 @@ export interface BackPressuresMetrics {
 
 export async function getActorBackPressures() {
   const res: BackPressuresMetrics = await api.get(
-    "/metrics/actor/back_pressures"
+    "/metrics/actor/back_pressures",
   )
   return res
 }

diff --git a/dashboard/pages/api/streaming.ts b/dashboard/pages/api/streaming.ts
@@ -28,7 +28,7 @@ export async function getActors(): Promise<ActorLocation[]> {
 
 export async function getFragments(): Promise<TableFragments[]> {
   let fragmentList: TableFragments[] = (await api.get("/fragments2")).map(
-    TableFragments.fromJSON
+    TableFragments.fromJSON,
   )
   fragmentList = sortBy(fragmentList, (x) => x.tableId)
   return fragmentList
@@ -72,7 +72,7 @@ export async function getStreamingJobs() {
     await getMaterializedViews(),
     await getTables(),
     await getIndexes(),
-    await getSinks()
+    await getSinks(),
   )
   jobs = sortBy(jobs, (x) => x.id)
   return jobs
@@ -84,14 +84,14 @@ export async function getRelations() {
     await getTables(),
     await getIndexes(),
     await getSinks(),
-    await getSources()
+    await getSources(),
   )
   relations = sortBy(relations, (x) => x.id)
   return relations
 }
 
 async function getTableCatalogsInner(
-  path: "tables" | "materialized_views" | "indexes" | "internal_tables"
+  path: "tables" | "materialized_views" | "indexes" | "internal_tables",
 ) {
   let list: Table[] = (await api.get(`/${path}`)).map(Table.fromJSON)
   list = sortBy(list, (x) => x.id)

diff --git a/dashboard/pages/await_tree.tsx b/dashboard/pages/await_tree.tsx
@@ -67,7 +67,7 @@ export default function AwaitTreeDump() {
 
     try {
       const response: StackTraceResponse = StackTraceResponse.fromJSON(
-        await api.get(`/monitor/await_tree/${computeNodeId}`)
+        await api.get(`/monitor/await_tree/${computeNodeId}`),
       )
 
       const actorTraces = _(response.actorTraces)
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,6 +40,6 @@ export default function useErrorToast() { @@
             isClosable: true,
           })
         },
-        [toast]
+        [toast],
       )
     }