refactor(dashboard): move api utils out of components (#15252)

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

dashboard/components/CatalogModal.tsx

@@ -32,7 +32,7 @@ import {
   Relation,
   relationIsStreamingJob,
   relationTypeTitleCase,
-} from "../pages/api/streaming"
+} from "../lib/api/streaming"
 import { ReactJson } from "./Relations"
 
 export function useCatalogModal(relationList: Relation[] | undefined) {

dashboard/components/RateBar.tsx

@@ -17,7 +17,7 @@
 
 import { Box, Text, Tooltip } from "@chakra-ui/react"
 import { tinycolor } from "@ctrl/tinycolor"
-import { p50, p90, p95, p99 } from "../pages/api/metric"
+import { p50, p90, p95, p99 } from "../lib/api/metric"
 import { MetricsSample } from "./metrics"
 
 export default function RateBar({ samples }: { samples: MetricsSample[] }) {

dashboard/components/RelationDependencyGraph.tsx

@@ -18,6 +18,12 @@
 import { theme } from "@chakra-ui/react"
 import * as d3 from "d3"
 import { useCallback, useEffect, useRef } from "react"
+import {
+  Relation,
+  relationIsStreamingJob,
+  relationType,
+  relationTypeTitleCase,
+} from "../lib/api/streaming"
 import {
   Enter,
   Position,
@@ -26,12 +32,6 @@ import {
   flipLayoutRelation,
   generateRelationEdges,
 } from "../lib/layout"
-import {
-  Relation,
-  relationIsStreamingJob,
-  relationType,
-  relationTypeTitleCase,
-} from "../pages/api/streaming"
 import { CatalogModal, useCatalogModal } from "./CatalogModal"
 
 function boundBox(

dashboard/components/Relations.tsx

@@ -32,9 +32,9 @@ import Head from "next/head"
 import Link from "next/link"
 import { Fragment } from "react"
 import Title from "../components/Title"
+import useFetch from "../lib/api/fetch"
+import { Relation, StreamingJob } from "../lib/api/streaming"
 import extractColumnInfo from "../lib/extractInfo"
-import useFetch from "../pages/api/fetch"
-import { Relation, StreamingJob } from "../pages/api/streaming"
 import {
   Sink as RwSink,
   Source as RwSource,

dashboard/lib/layout.ts

@@ -16,9 +16,9 @@
  */
 
 import { max } from "lodash"
-import { Relation } from "../pages/api/streaming"
 import { TableFragments_Fragment } from "../proto/gen/meta"
 import { GraphNode } from "./algo"
+import { Relation } from "./api/streaming"
 
 export type Enter<Type> = Type extends d3.Selection<
   any,

dashboard/pages/await_tree.tsx

@@ -30,10 +30,10 @@ import Head from "next/head"
 import { Fragment, useEffect, useState } from "react"
 import SpinnerOverlay from "../components/SpinnerOverlay"
 import Title from "../components/Title"
+import api from "../lib/api/api"
+import { getClusterInfoComputeNode } from "../lib/api/cluster"
+import useFetch from "../lib/api/fetch"
 import { StackTraceResponse } from "../proto/gen/monitor_service"
-import api from "./api/api"
-import { getClusterInfoComputeNode } from "./api/cluster"
-import useFetch from "./api/fetch"
 
 const SIDEBAR_WIDTH = 200
 const ALL_COMPUTE_NODES = ""

dashboard/pages/cluster.tsx

@@ -32,12 +32,12 @@ 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,
   getClusterInfoFrontend,
   getClusterMetrics,
-} from "./api/cluster"
+} from "../lib/api/cluster"
+import { WorkerNode } from "../proto/gen/common"
 
 function WorkerNodeComponent({
   workerNodeType,

dashboard/pages/dependency_graph.tsx

@@ -24,9 +24,13 @@ import RelationDependencyGraph, {
   nodeRadius,
 } from "../components/RelationDependencyGraph"
 import Title from "../components/Title"
+import useFetch from "../lib/api/fetch"
+import {
+  Relation,
+  getRelations,
+  relationIsStreamingJob,
+} from "../lib/api/streaming"
 import { RelationPoint } from "../lib/layout"
-import useFetch from "./api/fetch"
-import { Relation, getRelations, relationIsStreamingJob } from "./api/streaming"
 
 const SIDEBAR_WIDTH = "200px"
 

dashboard/pages/fragment_graph.tsx

@@ -37,10 +37,7 @@ import FragmentDependencyGraph from "../components/FragmentDependencyGraph"
 import FragmentGraph from "../components/FragmentGraph"
 import Title from "../components/Title"
 import useErrorToast from "../hook/useErrorToast"
-import { FragmentBox } from "../lib/layout"
-import { TableFragments, TableFragments_Fragment } from "../proto/gen/meta"
-import { Dispatcher, MergeNode, StreamNode } from "../proto/gen/stream_plan"
-import useFetch from "./api/fetch"
+import useFetch from "../lib/api/fetch"
 import {
   BackPressureInfo,
   BackPressuresMetrics,
@@ -52,8 +49,11 @@ import {
   p90,
   p95,
   p99,
-} from "./api/metric"
-import { getFragments, getStreamingJobs } from "./api/streaming"
+} from "../lib/api/metric"
+import { getFragments, getStreamingJobs } from "../lib/api/streaming"
+import { FragmentBox } from "../lib/layout"
+import { TableFragments, TableFragments_Fragment } from "../proto/gen/meta"
+import { Dispatcher, MergeNode, StreamNode } from "../proto/gen/stream_plan"
 
 interface DispatcherNode {
   [actorId: number]: Dispatcher[]

dashboard/pages/heap_profiling.tsx

@@ -32,11 +32,11 @@ import path from "path"
 import { Fragment, useEffect, useState } from "react"
 import SpinnerOverlay from "../components/SpinnerOverlay"
 import Title from "../components/Title"
+import api from "../lib/api/api"
+import { getClusterInfoComputeNode } from "../lib/api/cluster"
+import useFetch from "../lib/api/fetch"
 import { WorkerNode } from "../proto/gen/common"
 import { ListHeapProfilingResponse } from "../proto/gen/monitor_service"
-import api from "./api/api"
-import { getClusterInfoComputeNode } from "./api/cluster"
-import useFetch from "./api/fetch"
 
 const SIDEBAR_WIDTH = 200
 

dashboard/pages/indexes.tsx

@@ -20,7 +20,7 @@ import {
   Relations,
   streamingJobColumns,
 } from "../components/Relations"
-import { getIndexes } from "./api/streaming"
+import { getIndexes } from "../lib/api/streaming"
 
 export default function Indexes() {
   return Relations("Indexes", getIndexes, [

dashboard/pages/internal_tables.tsx

@@ -16,7 +16,7 @@
  */
 
 import { primaryKeyColumn, Relations } from "../components/Relations"
-import { getInternalTables } from "./api/streaming"
+import { getInternalTables } from "../lib/api/streaming"
 
 export default function InternalTables() {
   return Relations("Internal Tables", getInternalTables, [primaryKeyColumn])

dashboard/pages/materialized_views.tsx

@@ -20,7 +20,7 @@ import {
   Relations,
   streamingJobColumns,
 } from "../components/Relations"
-import { getMaterializedViews } from "./api/streaming"
+import { getMaterializedViews } from "../lib/api/streaming"
 
 export default function MaterializedViews() {
   return Relations("Materialized Views", getMaterializedViews, [

dashboard/pages/settings.tsx

@@ -24,7 +24,7 @@ import {
   API_ENDPOINT_KEY,
   DEFAULT_API_ENDPOINT,
   PREDEFINED_API_ENDPOINTS,
-} from "./api/api"
+} from "../lib/api/api"
 
 export default function Settings() {
   const isClient = useIsClient()

dashboard/pages/sinks.tsx

@@ -20,7 +20,7 @@ import {
   Relations,
   streamingJobColumns,
 } from "../components/Relations"
-import { getSinks } from "./api/streaming"
+import { getSinks } from "../lib/api/streaming"
 
 export default function Sinks() {
   return Relations("Sinks", getSinks, [

dashboard/pages/sources.tsx

@@ -21,8 +21,8 @@ import {
   dependentsColumn,
   Relations,
 } from "../components/Relations"
+import { getSources } from "../lib/api/streaming"
 import { Source } from "../proto/gen/catalog"
-import { getSources } from "./api/streaming"
 
 export default function DataSources() {
   const rowFormatColumn: Column<Source> = {

dashboard/pages/tables.tsx

@@ -21,8 +21,8 @@ import {
   Relations,
   streamingJobColumns,
 } from "../components/Relations"
+import { getTables } from "../lib/api/streaming"
 import { Table } from "../proto/gen/catalog"
-import { getTables } from "./api/streaming"
 
 export default function Tables() {
   const associatedSourceColumn: Column<Table> = {

dashboard/pages/views.tsx

@@ -16,7 +16,7 @@
  */
 
 import { Relations } from "../components/Relations"
-import { getViews } from "./api/streaming"
+import { getViews } from "../lib/api/streaming"
 
 export default function Views() {
   return Relations("Views", getViews, [])