refactor: abstract out types and utils

packages/web-console/src/scenes/Editor/Metrics/graph.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from "react"
 import styled from "styled-components"
-import { Widget, hasData, getXAxisFormat, durationTokenToDate } from "./utils"
+import type { Widget } from "./types"
+import { hasData, getXAxisFormat, durationTokenToDate } from "./utils"
 import { useGraphOptions } from "./useGraphOptions"
 import uPlot from "uplot"
 import UplotReact from "uplot-react"

packages/web-console/src/scenes/Editor/Metrics/index.tsx

@@ -9,9 +9,9 @@ import {
   getRollingAppendRowLimit,
   MetricViewMode,
   FetchMode,
-  MetricsRefreshPayload,
   getAutoRefreshRate,
 } from "./utils"
+import type { MetricsRefreshPayload } from "./types"
 import { GridAlt, Menu, Refresh } from "@styled-icons/boxicons-regular"
 import { AddMetricDialog } from "./add-metric-dialog"
 import type { Metric } from "../../../store/buffers"

packages/web-console/src/scenes/Editor/Metrics/metric.tsx

@@ -2,16 +2,14 @@ import React, { useEffect, useState, useContext } from "react"
 import { Metric as MetricItem } from "../../../store/buffers"
 import {
   MetricType,
-  LastNotNull,
-  ResultType,
   hasData,
   FetchMode,
   mergeRollingData,
   getTimeFilter,
   getSamplingRateForPeriod,
   durationTokenToDate,
-  MetricsRefreshPayload,
 } from "./utils"
+import type { LastNotNull, ResultType, MetricsRefreshPayload } from "./types"
 import { widgets } from "./widgets"
 import { QuestContext } from "../../../providers"
 import * as QuestDB from "../../../utils/questdb"

packages/web-console/src/scenes/Editor/Metrics/types.ts

@@ -0,0 +1,71 @@
+import uPlot from "uplot"
+import { MetricType } from "./utils"
+
+export type Widget = {
+  label: string
+  description: string
+  iconUrl: string
+  isTableMetric: boolean
+  getQuery: ({
+    tableId,
+    sampleBy,
+    limit,
+    timeFilter,
+  }: {
+    tableId?: number
+    sampleBy: string
+    limit?: number
+    timeFilter?: string
+  }) => string
+  getQueryLastNotNull: (id?: number) => string
+  querySupportsRollingAppend: boolean
+  alignData: (data: any) => uPlot.AlignedData
+  mapYValue: (rawValue: number) => string
+}
+
+export type MetricsRefreshPayload = {
+  dateFrom: string
+  dateTo: string
+  overwrite?: boolean
+}
+
+export type Duration = {
+  dateFrom: string
+  dateTo: string
+  label: string
+}
+
+export type CommitRate = {
+  created: string
+  commit_rate: string
+  commit_rate_smooth: string
+}
+
+export type WriteAmplification = {
+  created: string
+  writeAmplification: string
+}
+
+export type RowsApplied = {
+  time: string
+  numOfWalApplies: string
+  numOfRowsApplied: string
+  numOfRowsWritten: string
+  avgWalAmplification: string
+}
+
+export type Latency = {
+  created: string
+  latency: string
+}
+
+export type LastNotNull = {
+  created: string
+}
+
+export type ResultType = {
+  [MetricType.COMMIT_RATE]: CommitRate
+  [MetricType.LATENCY]: Latency
+  [MetricType.WRITE_THROUGHPUT]: RowsApplied
+  [MetricType.WRITE_AMPLIFICATION]: RowsApplied
+}

packages/web-console/src/scenes/Editor/Metrics/useGraphOptions.ts

@@ -2,7 +2,7 @@ import { utcToLocal } from "./../../../utils/dateTime"
 import { useContext } from "react"
 import { ThemeContext } from "styled-components"
 import uPlot from "uplot"
-import { durationTokenToDate, DATETIME_FORMAT } from "./utils"
+import { DATETIME_FORMAT } from "./utils"
 
 type Params = {
   data: uPlot.AlignedData

packages/web-console/src/scenes/Editor/Metrics/utils.ts

@@ -2,6 +2,7 @@ import { isValidDate } from "./../../../utils/dateTime"
 import { format, formatISO, subMinutes } from "date-fns"
 import { utcToLocal } from "../../../utils/dateTime"
 import uPlot from "uplot"
+import type { Duration } from "./types"
 
 export const DATETIME_FORMAT = "yyyy-MM-dd HH:mm:ss"
 
@@ -12,40 +13,6 @@ export enum MetricType {
   WRITE_AMPLIFICATION = "Write amplification",
 }
 
-export type Widget = {
-  label: string
-  description: string
-  iconUrl: string
-  isTableMetric: boolean
-  getQuery: ({
-    tableId,
-    sampleBy,
-    limit,
-    timeFilter,
-  }: {
-    tableId?: number
-    sampleBy: string
-    limit?: number
-    timeFilter?: string
-  }) => string
-  getQueryLastNotNull: (id?: number) => string
-  querySupportsRollingAppend: boolean
-  alignData: (data: any) => uPlot.AlignedData
-  mapYValue: (rawValue: number) => string
-}
-
-export type MetricsRefreshPayload = {
-  dateFrom: string
-  dateTo: string
-  overwrite?: boolean
-}
-
-export type Duration = {
-  dateFrom: string
-  dateTo: string
-  label: string
-}
-
 export const metricDurations: Duration[] = [
   {
     dateFrom: "now-5m",
@@ -148,41 +115,6 @@ export const getAutoRefreshRate = (dateFrom: string, dateTo: string) => {
   return RefreshRate.ONE_MINUTE
 }
 
-export type CommitRate = {
-  created: string
-  commit_rate: string
-  commit_rate_smooth: string
-}
-
-export type WriteAmplification = {
-  created: string
-  writeAmplification: string
-}
-
-export type RowsApplied = {
-  time: string
-  numOfWalApplies: string
-  numOfRowsApplied: string
-  numOfRowsWritten: string
-  avgWalAmplification: string
-}
-
-export type Latency = {
-  created: string
-  latency: string
-}
-
-export type LastNotNull = {
-  created: string
-}
-
-export type ResultType = {
-  [MetricType.COMMIT_RATE]: CommitRate
-  [MetricType.LATENCY]: Latency
-  [MetricType.WRITE_THROUGHPUT]: RowsApplied
-  [MetricType.WRITE_AMPLIFICATION]: RowsApplied
-}
-
 export const minutesToDays = (durationInMinutes: number) =>
   durationInMinutes / 60 / 24
 

packages/web-console/src/scenes/Editor/Metrics/widgets/commitRate.ts

@@ -1,7 +1,6 @@
 import uPlot from "uplot"
-import type { Widget } from "../utils"
+import type { Widget, CommitRate } from "../types"
 import { sqlValueToFixed, formatNumbers } from "../utils"
-import { CommitRate } from "../utils"
 import { TelemetryTable } from "../../../../consts"
 
 export const commitRate: Widget = {

packages/web-console/src/scenes/Editor/Metrics/widgets/latency.ts

@@ -1,6 +1,6 @@
 import uPlot from "uplot"
-import type { Widget } from "../utils"
-import { Latency, sqlValueToFixed } from "../utils"
+import type { Widget, Latency } from "../types"
+import { sqlValueToFixed } from "../utils"
 import { TelemetryTable } from "../../../../consts"
 
 export const latency: Widget = {

packages/web-console/src/scenes/Editor/Metrics/widgets/writeAmplification.ts

@@ -1,6 +1,5 @@
 import uPlot from "uplot"
-import type { Widget } from "../utils"
-import { WriteAmplification } from "../utils"
+import type { Widget, WriteAmplification } from "../types"
 import { sqlValueToFixed, formatNumbers } from "../utils"
 import { TelemetryTable } from "../../../../consts"
 

packages/web-console/src/scenes/Editor/Metrics/widgets/writeThroughput.ts

@@ -1,6 +1,6 @@
 import uPlot from "uplot"
-import type { Widget } from "../utils"
-import { RowsApplied, sqlValueToFixed, formatNumbers } from "../utils"
+import type { Widget, RowsApplied } from "../types"
+import { sqlValueToFixed, formatNumbers } from "../utils"
 import { TelemetryTable } from "../../../../consts"
 
 export const writeThroughput: Widget = {

packages/web-console/src/scenes/Schema/index.tsx

@@ -72,11 +72,11 @@ import { Checkbox } from "./checkbox"
 import { AddChart } from "@styled-icons/material"
 import { useEditor } from "../../providers/EditorProvider"
 import {
-  Duration,
   metricDurations,
   MetricViewMode,
   RefreshRate,
 } from "../../scenes/Editor/Metrics/utils"
+import type { Duration } from "../../scenes/Editor/Metrics/types"
 
 type Props = Readonly<{
   hideMenu?: boolean