diff --git a/packages/web-console/src/scenes/Editor/Metrics/index.tsx b/packages/web-console/src/scenes/Editor/Metrics/index.tsx index e91aad5f0..2067215ce 100644 --- a/packages/web-console/src/scenes/Editor/Metrics/index.tsx +++ b/packages/web-console/src/scenes/Editor/Metrics/index.tsx @@ -10,8 +10,16 @@ import { refreshRatesInSeconds, defaultSampleByForDuration, getRollingAppendRowLimit, + MetricViewMode, } from "./utils" -import { Time, Refresh } from "@styled-icons/boxicons-regular" +import { + GridAlt, + Menu, + Time, + Refresh, + World, +} from "@styled-icons/boxicons-regular" +import { Soundwave } from "@styled-icons/bootstrap" import { AddMetricDialog } from "./add-metric-dialog" import type { Metric } from "../../../store/buffers" import { Metric as MetricComponent } from "./metric" @@ -57,7 +65,7 @@ const Header = styled(Text)` const Charts = styled(Box).attrs({ align: "flex-start", gap: "2.5rem", -})<{ noMetrics: boolean }>` +})<{ noMetrics: boolean; viewMode: MetricViewMode }>` align-content: ${({ noMetrics }) => (noMetrics ? "center" : "flex-start")}; padding: 2.5rem; overflow-y: auto; @@ -66,7 +74,8 @@ const Charts = styled(Box).attrs({ flex-wrap: wrap; > div { - width: calc(50% - 1.25rem); + width: ${({ viewMode }) => + viewMode === MetricViewMode.GRID ? "calc(50% - 1.25rem)" : "100%"}; flex-shrink: 0; } ` @@ -101,6 +110,9 @@ export const Metrics = () => { const [metricDuration, setMetricDuration] = useState( MetricDuration.ONE_HOUR, ) + const [metricViewMode, setMetricViewMode] = useState( + MetricViewMode.GRID, + ) const [refreshRate, setRefreshRate] = useState() const [dialogOpen, setDialogOpen] = useState(false) const [metrics, setMetrics] = useState([]) @@ -197,6 +209,7 @@ export const Metrics = () => { const metrics = buffer?.metricsViewState?.metrics const metricDuration = buffer?.metricsViewState?.metricDuration const refreshRate = buffer?.metricsViewState?.refreshRate + const metricViewMode = buffer?.metricsViewState?.viewMode if (metrics) { setMetrics(metrics) } @@ -206,6 +219,9 @@ export const Metrics = () => { if (refreshRate) { setRefreshRate(refreshRate) } + if (metricViewMode) { + setMetricViewMode(metricViewMode) + } } }, [buffer]) @@ -219,13 +235,16 @@ export const Metrics = () => { ...(refreshRate !== buffer?.metricsViewState?.refreshRate && { refreshRate, }), + ...(metricViewMode !== buffer?.metricsViewState?.viewMode && { + viewMode: metricViewMode, + }), }, }) updateBuffer(buffer.id, merged) setLastRefresh(new Date().getTime()) } - }, [metricDuration, refreshRate]) + }, [metricDuration, refreshRate, metricViewMode]) useEffect(() => { if (refreshRate) { @@ -282,10 +301,18 @@ export const Metrics = () => { return ( - {/*
WAL metrics for {table.table_name}
*/} - {getLocalTimeZone()} + + + {getLocalTimeZone()} + + + + + Sample: {defaultSampleByForDuration[metricDuration]} + + { tooltip="Time duration" placement="bottom" /> + + setMetricViewMode( + metricViewMode === MetricViewMode.GRID + ? MetricViewMode.LIST + : MetricViewMode.GRID, + ) + } + > + {metricViewMode === MetricViewMode.GRID ? ( + + ) : ( + + )} + + } + tooltip="Toogle view mode" + placement="bottom" + /> - + {metrics.length === 0 && ( diff --git a/packages/web-console/src/scenes/Editor/Metrics/utils.ts b/packages/web-console/src/scenes/Editor/Metrics/utils.ts index 236337ec0..c297aad89 100644 --- a/packages/web-console/src/scenes/Editor/Metrics/utils.ts +++ b/packages/web-console/src/scenes/Editor/Metrics/utils.ts @@ -1,5 +1,7 @@ +import { Grid } from "@styled-icons/remix-line" import { utcToLocal } from "../../../utils/dateTime" import uPlot from "uplot" +import { List } from "@styled-icons/fluentui-system-filled" export enum MetricType { COMMIT_RATE = "Commit rate", @@ -40,6 +42,11 @@ export enum MetricDuration { SEVEN_DAYS = "7 days", } +export enum MetricViewMode { + LIST = "List", + GRID = "Grid", +} + export enum SampleBy { ONE_SECOND = "1s", ONE_MINUTE = "1m", diff --git a/packages/web-console/src/scenes/Editor/Metrics/widgets/commitRate.ts b/packages/web-console/src/scenes/Editor/Metrics/widgets/commitRate.ts index 6ee9c0ee7..07bca286e 100644 --- a/packages/web-console/src/scenes/Editor/Metrics/widgets/commitRate.ts +++ b/packages/web-console/src/scenes/Editor/Metrics/widgets/commitRate.ts @@ -6,11 +6,11 @@ import { sqlValueToFixed, formatNumbers, } from "../utils" -import type { CommitRate } from "../utils" +import { CommitRate, defaultSampleByForDuration } from "../utils" import { TelemetryTable } from "../../../../consts" export const commitRate: Widget = { - label: "Commit rate per second", + label: "Commit rate", iconUrl: "/assets/metric-commit-rate.svg", isTableMetric: true, getQuery: ({ tableId, metricDuration, sampleBy, limit }) => { @@ -39,7 +39,7 @@ export const commitRate: Widget = { and ${getTimeFilter(minutes)} -- it is important this is 1s, should this value change -- the "commit_rate" value will have to be adjusted to rate/s - sample by 1s + sample by ${sampleBy ?? defaultSampleByForDuration[metricDuration]} -- fill(0) ) -- there is a bug in QuestDB, which does not sort the window dataset diff --git a/packages/web-console/src/scenes/Schema/index.tsx b/packages/web-console/src/scenes/Schema/index.tsx index 8dff1d3fb..cb1becb0d 100644 --- a/packages/web-console/src/scenes/Schema/index.tsx +++ b/packages/web-console/src/scenes/Schema/index.tsx @@ -71,7 +71,11 @@ import { NotificationType } from "../../types" import { Checkbox } from "./checkbox" import { AddChart } from "@styled-icons/material" import { useEditor } from "../../providers/EditorProvider" -import { MetricDuration, RefreshRate } from "../../scenes/Editor/Metrics/utils" +import { + MetricDuration, + MetricViewMode, + RefreshRate, +} from "../../scenes/Editor/Metrics/utils" type Props = Readonly<{ hideMenu?: boolean @@ -471,6 +475,7 @@ const Schema = ({ metrics: [], metricDuration: MetricDuration.ONE_HOUR, refreshRate: RefreshRate.AUTO, + viewMode: MetricViewMode.GRID, }, }) }} diff --git a/packages/web-console/src/store/buffers.ts b/packages/web-console/src/store/buffers.ts index c36b2ffda..fc49d11cd 100644 --- a/packages/web-console/src/store/buffers.ts +++ b/packages/web-console/src/store/buffers.ts @@ -25,8 +25,11 @@ import { RefreshRate } from "./../scenes/Editor/Metrics/utils" import { db } from "./db" import type { editor } from "monaco-editor" -import { MetricType, MetricDuration } from "scenes/Editor/Metrics/utils" -import { Color } from "types" +import { + MetricType, + MetricDuration, + MetricViewMode, +} from "scenes/Editor/Metrics/utils" export enum BufferType { SQL = "SQL", @@ -44,6 +47,7 @@ export type MetricsViewState = { metricDuration?: MetricDuration refreshRate?: RefreshRate sampleBy?: string + viewMode?: MetricViewMode metrics?: Metric[] }