use class method

Signed-off-by: Bugen Zhao <[email protected]>
risingwavelabs · Oct 29, 2024 · 577e162 · 577e162
1 parent 8fea545
commit 577e162
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 25 deletions.
diff --git a/dashboard/lib/api/streaming.ts b/dashboard/lib/api/streaming.ts
@@ -15,6 +15,7 @@
  *
  */
 
+import { plainToInstance } from "class-transformer"
 import _ from "lodash"
 import sortBy from "lodash/sortBy"
 import {
@@ -67,24 +68,36 @@ export interface Relation {
   databaseName?: string
 }
 
-export interface StreamingJobInfo {
-  jobId: number
-  objType: string
-  name: string
-  jobStatus: string
-  parallelism: any
-  maxParallelism: number
-}
-
-export function formatParallelism(parallelism: any) {
-  if (typeof parallelism === "string") {
-    return parallelism
-  } else if (typeof parallelism === "object") {
-    let key = Object.keys(parallelism)[0]
-    let value = parallelism[key]
-    return `${key} (${value})`
-  } else {
-    return JSON.stringify(parallelism)
+export class StreamingJobInfo {
+  jobId!: number
+  objType!: string
+  name!: string
+  jobStatus!: string
+  parallelism!: any
+  maxParallelism!: number
+
+  parallelismDisplay() {
+    const parallelism = this.parallelism
+    if (typeof parallelism === "string") {
+      // `Adaptive`
+      return parallelism
+    } else if (typeof parallelism === "object") {
+      // `Fixed (64)`
+      let key = Object.keys(parallelism)[0]
+      let value = parallelism[key]
+      return `${key} (${value})`
+    } else {
+      // fallback
+      return JSON.stringify(parallelism)
+    }
+  }
+
+  typeDisplay() {
+    if (this.objType == "Table") {
+      return "Table / MV"
+    } else {
+      return this.objType
+    }
   }
 }
 
@@ -117,7 +130,10 @@ export function relationIsStreamingJob(x: Relation): x is StreamingJob {
 }
 
 export async function getStreamingJobs() {
-  let jobs: StreamingJobInfo[] = await api.get("/streaming_jobs")
+  let jobs = plainToInstance(
+    StreamingJobInfo,
+    (await api.get("/streaming_jobs")) as any[]
+  )
   jobs = sortBy(jobs, (x) => x.jobId)
   return jobs
 }

diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -24,6 +24,7 @@
     "@uidotdev/usehooks": "^2.4.1",
     "base64url": "^3.0.1",
     "bootstrap-icons": "^1.9.1",
+    "class-transformer": "^0.5.1",
     "d3": "^7.6.1",
     "d3-axis": "^3.0.0",
     "d3-dag": "^0.11.4",
@@ -42,6 +43,7 @@
     "react-json-view": "^1.21.3",
     "react-syntax-highlighter": "^15.5.0",
     "recharts": "^2.3.2",
+    "reflect-metadata": "^0.2.2",
     "styled-components": "5.3.0",
     "ts-proto": "^1.169.1"
   },

diff --git a/dashboard/pages/_app.tsx b/dashboard/pages/_app.tsx
@@ -15,6 +15,7 @@
  *
  */
 import "bootstrap-icons/font/bootstrap-icons.css"
+import "reflect-metadata"
 import "../styles/global.css"
 
 import { ChakraProvider } from "@chakra-ui/react"

diff --git a/dashboard/pages/fragment_graph.tsx b/dashboard/pages/fragment_graph.tsx
@@ -50,7 +50,6 @@ import {
   fetchPrometheusBackPressure,
 } from "../lib/api/metric"
 import {
-  formatParallelism,
   getFragmentsByJobId,
   getRelationIdInfos,
   getStreamingJobs,
@@ -460,19 +459,21 @@ export default function Streaming() {
                   <Tbody>
                     <Tr>
                       <Td fontWeight="medium">Type</Td>
-                      <Td isNumeric>{job.objType}</Td>
+                      <Td isNumeric>{job.typeDisplay()}</Td>
                     </Tr>
                     <Tr>
                       <Td fontWeight="medium">Status</Td>
                       <Td isNumeric>{job.jobStatus}</Td>
                     </Tr>
                     <Tr>
-                      <Td fontWeight="medium">Max Parallelism</Td>
-                      <Td isNumeric>{job.maxParallelism}</Td>
+                      <Td fontWeight="medium">Parallelism</Td>
+                      <Td isNumeric>{job.parallelismDisplay()}</Td>
                     </Tr>
                     <Tr>
-                      <Td fontWeight="medium">Parallelism</Td>
-                      <Td isNumeric>{formatParallelism(job.parallelism)}</Td>
+                      <Td fontWeight="medium" paddingEnd={0}>
+                        Max Parallelism
+                      </Td>
+                      <Td isNumeric>{job.maxParallelism}</Td>
                     </Tr>
                   </Tbody>
                 </Table>