View modes in dashboards, sample by in commit rate

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>(
     MetricDuration.ONE_HOUR,
   )
+  const [metricViewMode, setMetricViewMode] = useState<MetricViewMode>(
+    MetricViewMode.GRID,
+  )
   const [refreshRate, setRefreshRate] = useState<RefreshRate>()
   const [dialogOpen, setDialogOpen] = useState(false)
   const [metrics, setMetrics] = useState<Metric[]>([])
@@ -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 (
     <Root>
       <Toolbar>
-        {/* <Header>WAL metrics for {table.table_name}</Header> */}
         <AddMetricDialog open={dialogOpen} onOpenChange={setDialogOpen} />
         <Box align="center" gap="1rem">
-          <Text color="gray2">{getLocalTimeZone()}</Text>
+          <Box gap="0.5rem">
+            <World size="14px" />
+            <Text color="foreground">{getLocalTimeZone()}</Text>
+          </Box>
+          <Box gap="0.5rem">
+            <Soundwave size="14px" />
+            <Text color="foreground">
+              Sample: {defaultSampleByForDuration[metricDuration]}
+            </Text>
+          </Box>
           <Box gap="0.5rem" style={{ flexShrink: 0 }}>
             <IconWithTooltip
               icon={
@@ -335,9 +362,31 @@ export const Metrics = () => {
             tooltip="Time duration"
             placement="bottom"
           />
+          <IconWithTooltip
+            icon={
+              <Button
+                skin="secondary"
+                onClick={() =>
+                  setMetricViewMode(
+                    metricViewMode === MetricViewMode.GRID
+                      ? MetricViewMode.LIST
+                      : MetricViewMode.GRID,
+                  )
+                }
+              >
+                {metricViewMode === MetricViewMode.GRID ? (
+                  <GridAlt size="18px" />
+                ) : (
+                  <Menu size="18px" />
+                )}
+              </Button>
+            }
+            tooltip="Toogle view mode"
+            placement="bottom"
+          />
         </Box>
       </Toolbar>
-      <Charts noMetrics={metrics.length === 0}>
+      <Charts noMetrics={metrics.length === 0} viewMode={metricViewMode}>
         {metrics.length === 0 && (
           <GlobalInfo>
             <Box gap="1.5rem" flexDirection="column">

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",

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

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,
                               },
                             })
                           }}

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[]
 }