Merge branch 'main' of https://github.com/risingwavelabs/risingwave i…

…nto li0k/storage_task_expire
risingwavelabs · Jan 4, 2024 · 99f7e44 · 99f7e44
2 parents 0262284 + eada1d1
commit 99f7e44
Show file tree

Hide file tree

Showing 46 changed files with 883 additions and 721 deletions.
diff --git a/dashboard/components/BackPressureTable.tsx b/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
         }
       }

diff --git a/dashboard/components/FragmentGraph.tsx b/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)

diff --git a/dashboard/components/Layout.tsx b/dashboard/components/Layout.tsx
@@ -31,6 +31,7 @@ import { UrlObject } from "url"
 import {
   IconArrowRightCircle,
   IconArrowRightCircleFill,
+  IconBoxArrowUpRight,
   IconServer,
 } from "../components/utils/icons"
 
@@ -41,11 +42,13 @@ function NavButton({
   children,
   leftIcon,
   leftIconActive,
+  external,
 }: {
   href: string | UrlObject
   children?: React.ReactNode
   leftIcon?: React.ReactElement
   leftIconActive?: React.ReactElement
+  external?: boolean
 }) {
   const router = useRouter()
   const [match, setMatch] = useState(false)
@@ -55,19 +58,22 @@ function NavButton({
     return () => {}
   }, [href, router.asPath])
 
+  const icon =
+    leftIcon || (external ? <IconBoxArrowUpRight /> : <IconArrowRightCircle />)
+  const activeIcon =
+    leftIconActive ||
+    leftIcon ||
+    (external ? undefined : <IconArrowRightCircleFill />)
+
   return (
-    <Link href={href}>
+    <Link href={href} target={external ? "_blank" : undefined}>
       <Button
         colorScheme={match ? "blue" : "gray"}
         color={match ? "blue.600" : "gray.500"}
         variant={match ? "outline" : "ghost"}
         width="full"
         justifyContent="flex-start"
-        leftIcon={
-          match
-            ? leftIconActive || leftIcon || <IconArrowRightCircleFill />
-            : leftIcon || <IconArrowRightCircle />
-        }
+        leftIcon={match ? activeIcon : icon}
       >
         {children}
       </Button>
@@ -83,6 +89,14 @@ function NavTitle({ children }: { children: React.ReactNode }) {
   )
 }
 
+function Section({ children }: { children: React.ReactNode }) {
+  return (
+    <VStack width="full" alignItems="flex-start" px={3}>
+      {children}
+    </VStack>
+  )
+}
+
 function Layout({ children }: { children: React.ReactNode }) {
   return (
     <Flex>
@@ -110,10 +124,12 @@ function Layout({ children }: { children: React.ReactNode }) {
               </Text>
             </HStack>
           </Box>
-          <NavButton href="/cluster/" leftIcon={<IconServer />}>
-            Cluster Overview
-          </NavButton>
-          <VStack width="full" alignItems="flex-start" px={3}>
+          <Section>
+            <NavButton href="/cluster/" leftIcon={<IconServer />}>
+              Cluster Overview
+            </NavButton>
+          </Section>
+          <Section>
             <NavTitle>Catalog</NavTitle>
             <NavButton href="/sources/">Sources</NavButton>
             <NavButton href="/tables/">Tables</NavButton>
@@ -124,28 +140,32 @@ function Layout({ children }: { children: React.ReactNode }) {
             <NavButton href="/internal_tables/">Internal Tables</NavButton>
             <NavButton href="/sinks/">Sinks</NavButton>
             <NavButton href="/views/">Views</NavButton>
-          </VStack>
-          <VStack width="full" alignItems="flex-start" px={3}>
+          </Section>
+          <Section>
             <NavTitle>Streaming</NavTitle>
-            <NavButton href="/streaming_graph/">Graph</NavButton>
-            <NavButton href="/streaming_plan/">Fragments</NavButton>
-          </VStack>
-          <VStack width="full" alignItems="flex-start" px={3}>
+            <NavButton href="/dependency_graph/">Dependency Graph</NavButton>
+            <NavButton href="/fragment_graph/">Fragment Graph</NavButton>
+          </Section>
+          <Section>
             <NavTitle>Batch</NavTitle>
             <NavButton href="/batch_tasks/">Batch Tasks</NavButton>
-          </VStack>
-          <VStack width="full" alignItems="flex-start" px={3}>
+          </Section>
+          <Section>
             <NavTitle>Explain</NavTitle>
             <NavButton href="/explain_distsql/">Distributed Plan</NavButton>
-          </VStack>
-          <VStack width="full" alignItems="flex-start" px={3}>
+          </Section>
+          <Section>
             <NavTitle>Debug</NavTitle>
             <NavButton href="/await_tree/">Await Tree Dump</NavButton>
             <NavButton href="/heap_profiling/">Heap Profiling</NavButton>
-            <NavButton href="/api/monitor/diagnose">Diagnose</NavButton>
-          </VStack>
-          <VStack mb={3}></VStack>
-          <NavButton href="/settings/">Settings</NavButton>
+            <NavButton href="/api/monitor/diagnose" external>
+              Diagnose
+            </NavButton>
+          </Section>
+          <Section>
+            <NavTitle>Settings</NavTitle>
+            <NavButton href="/settings/">Settings</NavButton>
+          </Section>
         </VStack>
       </Box>
       <Box flex={1} overflowY="scroll">

diff --git a/dashboard/components/Relations.tsx b/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()

diff --git a/dashboard/components/utils/icons.tsx b/dashboard/components/utils/icons.tsx
@@ -26,3 +26,7 @@ export function IconArrowRightCircle() {
 export function IconArrowRightCircleFill() {
   return <i className="bi bi-arrow-right-circle-fill"></i>
 }
+
+export function IconBoxArrowUpRight() {
+  return <i className="bi bi-box-arrow-up-right"></i>
+}
diff --git a/dashboard/hook/useErrorToast.ts b/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]
+  )
+}
diff --git a/dashboard/hook/useWindowSize.js b/dashboard/hook/useWindowSize.js
diff --git a/dashboard/pages/_app.tsx b/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])

diff --git a/dashboard/pages/api/api.ts b/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,
+      })
     }
   }
 }

diff --git a/dashboard/pages/api/fetch.ts b/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()

diff --git a/dashboard/pages/await_tree.tsx b/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)