Merge remote-tracking branch 'origin/main' into bz/embedded-jaeger-ui

Signed-off-by: Bugen Zhao <[email protected]>

dashboard/components/BackPressureTable.tsx

@@ -24,11 +24,11 @@ import {
   Th,
   Thead,
   Tr,
-  useToast,
 } from "@chakra-ui/react"
 import { sortBy } from "lodash"
 import Head from "next/head"
 import { Fragment, useEffect, useState } from "react"
+import useErrorToast from "../hook/useErrorToast"
 import { getActorBackPressures } from "../pages/api/metric"
 import RateBar from "./RateBar"
 import { Metrics } from "./metrics"
@@ -44,7 +44,7 @@ export default function BackPressureTable({
 }) {
   const [backPressuresMetrics, setBackPressuresMetrics] =
     useState<BackPressuresMetrics>()
-  const toast = useToast()
+  const toast = useErrorToast()
 
   useEffect(() => {
     async function doFetch() {
@@ -58,14 +58,7 @@ export default function BackPressureTable({
           setBackPressuresMetrics(metrics)
           await new Promise((resolve) => setTimeout(resolve, 5000)) // refresh every 5 secs
         } catch (e: any) {
-          toast({
-            title: "Error Occurred",
-            description: e.toString(),
-            status: "error",
-            duration: 5000,
-            isClosable: true,
-          })
-          console.error(e)
+          toast(e, "warning")
           break
         }
       }

dashboard/components/FragmentGraph.tsx

@@ -20,7 +20,7 @@ import {
   generateBoxLinks,
   layout,
 } from "../lib/layout"
-import { PlanNodeDatum } from "../pages/streaming_plan"
+import { PlanNodeDatum } from "../pages/fragment_graph"
 import BackPressureTable from "./BackPressureTable"
 
 const ReactJson = loadable(() => import("react-json-view"))
@@ -218,7 +218,7 @@ export default function FragmentGraph({
 
         text
           .attr("fill", "black")
-          .text(({ id }) => `Fragment #${id}`)
+          .text(({ id }) => `Fragment ${id}`)
           .attr("font-family", "inherit")
           .attr("text-anchor", "end")
           .attr("dy", ({ height }) => height - actorMarginY + 12)

dashboard/components/Layout.tsx

@@ -143,8 +143,8 @@ function Layout({ children }: { children: React.ReactNode }) {
           </Section>
           <Section>
             <NavTitle>Streaming</NavTitle>
-            <NavButton href="/streaming_graph/">Graph</NavButton>
-            <NavButton href="/streaming_plan/">Fragments</NavButton>
+            <NavButton href="/dependency_graph/">Dependency Graph</NavButton>
+            <NavButton href="/fragment_graph/">Fragment Graph</NavButton>
           </Section>
           <Section>
             <NavTitle>Batch</NavTitle>

dashboard/components/Relations.tsx

@@ -33,14 +33,14 @@ import {
   Thead,
   Tr,
   useDisclosure,
-  useToast,
 } from "@chakra-ui/react"
 import loadable from "@loadable/component"
 import Head from "next/head"
 
 import Link from "next/link"
 import { Fragment, useEffect, useState } from "react"
 import Title from "../components/Title"
+import useErrorToast from "../hook/useErrorToast"
 import extractColumnInfo from "../lib/extractInfo"
 import { Relation, StreamingJob } from "../pages/api/streaming"
 import {
@@ -121,22 +121,15 @@ export function Relations<R extends Relation>(
   getRelations: () => Promise<R[]>,
   extraColumns: Column<R>[]
 ) {
-  const toast = useToast()
+  const toast = useErrorToast()
   const [relationList, setRelationList] = useState<R[]>([])
 
   useEffect(() => {
     async function doFetch() {
       try {
         setRelationList(await getRelations())
       } catch (e: any) {
-        toast({
-          title: "Error Occurred",
-          description: e.toString(),
-          status: "error",
-          duration: 5000,
-          isClosable: true,
-        })
-        console.error(e)
+        toast(e)
       }
     }
     doFetch()

dashboard/hook/useErrorToast.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2024 RisingWave Labs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { AlertStatus, useToast } from "@chakra-ui/react"
+import { useCallback } from "react"
+
+export default function useErrorToast() {
+  const toast = useToast()
+
+  return useCallback(
+    (e: any, status: AlertStatus = "error") => {
+      let title: string
+      let description: string | undefined
+
+      if (e instanceof Error) {
+        title = e.message
+        description = e.cause?.toString()
+      } else {
+        title = e.toString()
+      }
+
+      toast({
+        title,
+        description,
+        status,
+        duration: 5000,
+        isClosable: true,
+      })
+
+      console.error(e)
+    },
+    [toast]
+  )
+}

dashboard/pages/_app.tsx

@@ -30,7 +30,11 @@ function App({ Component, pageProps }: AppProps) {
   const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
-    router.events.on("routeChangeStart", () => setIsLoading(true))
+    router.events.on("routeChangeStart", (url, { shallow }) => {
+      if (!shallow) {
+        setIsLoading(true)
+      }
+    })
     router.events.on("routeChangeComplete", () => setIsLoading(false))
     router.events.on("routeChangeError", () => setIsLoading(false))
   }, [router.events])

dashboard/pages/api/api.ts

@@ -23,7 +23,9 @@ class Api {
       return data
     } catch (e) {
       console.error(e)
-      throw Error("Failed to fetch " + url)
+      throw Error(`Failed to fetch ${url}`, {
+        cause: e,
+      })
     }
   }
 }

dashboard/pages/api/fetch.ts

@@ -15,27 +15,20 @@
  *
  */
 
-import { useToast } from "@chakra-ui/react"
 import { useEffect, useState } from "react"
+import useErrorToast from "../../hook/useErrorToast"
 
 export default function useFetch<T>(fetchFn: () => Promise<T>) {
   const [response, setResponse] = useState<T>()
-  const toast = useToast()
+  const toast = useErrorToast()
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         const res = await fetchFn()
         setResponse(res)
       } catch (e: any) {
-        toast({
-          title: "Error Occurred",
-          description: e.toString(),
-          status: "error",
-          duration: 5000,
-          isClosable: true,
-        })
-        console.error(e)
+        toast(e)
       }
     }
     fetchData()

dashboard/pages/await_tree.tsx

@@ -81,7 +81,7 @@ export default function AwaitTreeDump() {
 
       result = `${title}\n\n${actorTraces}\n${rpcTraces}`
     } catch (e: any) {
-      result = `${title}\n\nError: ${e.message}`
+      result = `${title}\n\nERROR: ${e.message}\n${e.cause}`
     }
 
     setDump(result)

dashboard/pages/cluster.tsx

@@ -23,7 +23,6 @@ import {
   SimpleGrid,
   Text,
   theme,
-  useToast,
   VStack,
 } from "@chakra-ui/react"
 import { clone, reverse, sortBy } from "lodash"
@@ -32,6 +31,7 @@ import { Fragment, useCallback, useEffect, useState } from "react"
 import { Area, AreaChart, ResponsiveContainer, XAxis, YAxis } from "recharts"
 import { Metrics, MetricsSample } from "../components/metrics"
 import Title from "../components/Title"
+import useErrorToast from "../hook/useErrorToast"
 import { WorkerNode } from "../proto/gen/common"
 import {
   getClusterInfoComputeNode,
@@ -142,22 +142,15 @@ export default function Cluster() {
   const [frontendList, setFrontendList] = useState<WorkerNode[]>([])
   const [computeNodeList, setComputeNodeList] = useState<WorkerNode[]>([])
   const [metrics, setMetrics] = useState<ClusterNodeMetrics>()
-  const toast = useToast()
+  const toast = useErrorToast()
 
   useEffect(() => {
     async function doFetch() {
       try {
         setFrontendList(await getClusterInfoFrontend())
         setComputeNodeList(await getClusterInfoComputeNode())
       } catch (e: any) {
-        toast({
-          title: "Error Occurred",
-          description: e.toString(),
-          status: "error",
-          duration: 5000,
-          isClosable: true,
-        })
-        console.error(e)
+        toast(e)
       }
     }
     doFetch()
@@ -177,14 +170,7 @@ export default function Cluster() {
           setMetrics(metrics)
           await new Promise((resolve) => setTimeout(resolve, 5000)) // refresh every 5 secs
         } catch (e: any) {
-          toast({
-            title: "Error Occurred",
-            description: e.toString(),
-            status: "error",
-            duration: 5000,
-            isClosable: true,
-          })
-          console.error(e)
+          toast(e, "warning")
           break
         }
       }