Interpolate widget descriptions

questdb · Jan 16, 2025 · 6935043 · 6935043
1 parent 09845ef
commit 6935043
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 33 deletions.
diff --git a/packages/web-console/src/scenes/Editor/Metrics/graph.tsx b/packages/web-console/src/scenes/Editor/Metrics/graph.tsx
@@ -169,6 +169,11 @@ export const Graph = ({
     setDelayedLoading(false)
   }, [loading])
 
+  const lastValue =
+    data[1].length > 0
+      ? mapYValue(Math.floor(data[1][data[1].length - 1] as number))
+      : undefined
+
   return (
     <Root ref={graphRootRef}>
       <Header>
@@ -177,11 +182,10 @@ export const Graph = ({
           <HeaderText>{label}</HeaderText>
           <IconWithTooltip
             icon={<Information size="16px" />}
-            tooltip={`${
-              widgetConfig.description
-            }. Sample by ${formatSamplingRate(
-              getSamplingRateForPeriod(from, to),
-            )}`}
+            tooltip={widgetConfig.getDescription({
+              lastValue,
+              sampleBy: formatSamplingRate(getSamplingRateForPeriod(from, to)),
+            })}
             placement="bottom"
           />
           {delayedLoading && <Loader size="18px" spin />}

diff --git a/packages/web-console/src/scenes/Editor/Metrics/types.ts b/packages/web-console/src/scenes/Editor/Metrics/types.ts
@@ -6,9 +6,18 @@ export type DateRange = {
   dateTo: string
 }
 
+type MethodArgs = {
+  tableId?: number
+  sampleBy?: string
+  lastValue?: number | string
+  limit?: number
+  from?: string
+  to?: string
+}
+
 export type Widget = {
   label: string
-  description: string
+  getDescription: ({ sampleBy }: MethodArgs) => React.ReactNode
   iconUrl: string
   isTableMetric: boolean
   /**
@@ -20,19 +29,7 @@ export type Widget = {
    * 100 - Custom
    */
   distribution: uPlot.Scale.Distr
-  getQuery: ({
-    tableId,
-    sampleBy,
-    limit,
-    from,
-    to,
-  }: {
-    tableId?: number
-    sampleBy: string
-    limit?: number
-    from?: string
-    to?: string
-  }) => string
+  getQuery: ({ tableId, sampleBy, limit, from, to }: MethodArgs) => string
   getQueryLastNotNull: (id?: number) => string
   querySupportsRollingAppend: boolean
   alignData: (data: any) => uPlot.AlignedData

diff --git a/...enes/Editor/Metrics/widgets/commitRate.ts → ...nes/Editor/Metrics/widgets/commitRate.tsx b/...enes/Editor/Metrics/widgets/commitRate.ts → ...nes/Editor/Metrics/widgets/commitRate.tsx
@@ -1,3 +1,4 @@
+import React from "react"
 import uPlot from "uplot"
 import type { Widget, CommitRate } from "../types"
 import { sqlValueToFixed, formatNumbers } from "../utils"
@@ -6,9 +7,13 @@ import { TelemetryTable } from "../../../../consts"
 export const commitRate: Widget = {
   distribution: 1,
   label: "Commit rate",
-  description:
-    "Number of commits written to the table. " +
-    "Currently: [last_value]/[sampleBy]",
+  getDescription: ({ lastValue, sampleBy }) => (
+    <>
+      Number of commits written to the table.
+      <br />
+      {lastValue ? `Currently: ${lastValue}/${sampleBy}` : ``}
+    </>
+  ),
   iconUrl: "/assets/metric-commit-rate.svg",
   isTableMetric: true,
   querySupportsRollingAppend: true,

diff --git a/.../scenes/Editor/Metrics/widgets/latency.ts → ...scenes/Editor/Metrics/widgets/latency.tsx b/.../scenes/Editor/Metrics/widgets/latency.ts → ...scenes/Editor/Metrics/widgets/latency.tsx
@@ -1,3 +1,4 @@
+import React from "react"
 import uPlot from "uplot"
 import type { Widget, Latency } from "../types"
 import { sqlValueToFixed } from "../utils"
@@ -6,9 +7,14 @@ import { TelemetryTable } from "../../../../consts"
 export const latency: Widget = {
   distribution: 1,
   label: "WAL apply latency in ms",
-  description:
-    "Average time taken to apply WAL transactions to the table, making them readable. " +
-    "Currently: [last_value] for the last [sampleBy]",
+  getDescription: ({ lastValue, sampleBy }) => (
+    <>
+      Average time taken to apply WAL transactions to the table, making them
+      readable.
+      <br />
+      {lastValue ? `Currently: ${lastValue} for the last ${sampleBy}` : ""}
+    </>
+  ),
   iconUrl: "/assets/metric-read-latency.svg",
   isTableMetric: true,
   querySupportsRollingAppend: true,

diff --git a/...tor/Metrics/widgets/writeAmplification.ts → ...or/Metrics/widgets/writeAmplification.tsx b/...tor/Metrics/widgets/writeAmplification.ts → ...or/Metrics/widgets/writeAmplification.tsx
@@ -1,3 +1,4 @@
+import React from "react"
 import uPlot from "uplot"
 import type { Widget, WriteAmplification } from "../types"
 import { sqlValueToFixed, formatNumbers } from "../utils"
@@ -6,11 +7,15 @@ import { TelemetryTable } from "../../../../consts"
 export const writeAmplification: Widget = {
   distribution: 3,
   label: "Write amplification",
-  description:
-    "Ratio of rows physically written to disk against logical/queryable rows. " +
-    "If write amplification is higher than 1, this means data has been re-written several times. " +
-    "This will be higher during O3 writes. " +
-    "Currently: [last value] for the last [sample by]", // it is NOT a rate
+  getDescription: ({ lastValue, sampleBy }) => (
+    <>
+      Ratio of rows physically written to disk against logical/queryable rows.
+      If write amplification is higher than 1, this means data has been
+      re-written several times. This will be higher during O3 writes.
+      <br />
+      {lastValue ? `Currently: ${lastValue} for the last ${sampleBy}` : ""}
+    </>
+  ),
   iconUrl: "/assets/metric-write-amplification.svg",
   isTableMetric: true,
   querySupportsRollingAppend: true,

diff --git a/...Editor/Metrics/widgets/writeThroughput.ts → ...ditor/Metrics/widgets/writeThroughput.tsx b/...Editor/Metrics/widgets/writeThroughput.ts → ...ditor/Metrics/widgets/writeThroughput.tsx
@@ -1,3 +1,4 @@
+import React from "react"
 import uPlot from "uplot"
 import type { Widget, RowsApplied } from "../types"
 import { sqlValueToFixed, formatNumbers } from "../utils"
@@ -6,9 +7,13 @@ import { TelemetryTable } from "../../../../consts"
 export const writeThroughput: Widget = {
   distribution: 1,
   label: "Write throughput",
-  description:
-    "Logical (queryable) rows applied to table. " +
-    "Currently: [last value]/[sample by]",
+  getDescription: ({ lastValue, sampleBy }) => (
+    <>
+      Logical (queryable) rows applied to table.
+      <br />
+      {lastValue ? `Currently: ${lastValue}/${sampleBy}` : ""}
+    </>
+  ),
   iconUrl: "/assets/metric-rows-applied.svg",
   isTableMetric: true,
   querySupportsRollingAppend: true,