From 7fd156692289f6c4701a4341b35ccf9f9ae28be7 Mon Sep 17 00:00:00 2001 From: Maciej Bodek Date: Wed, 8 Jan 2025 12:23:32 +0100 Subject: [PATCH] Widget UI updates, validation updates --- .../scenes/Editor/Metrics/date-time-picker.tsx | 17 +++++++++++++---- .../src/scenes/Editor/Metrics/graph.tsx | 9 ++++++++- .../src/scenes/Editor/Metrics/index.tsx | 1 + .../src/scenes/Editor/Metrics/utils.ts | 1 + .../scenes/Editor/Metrics/widgets/commitRate.ts | 2 ++ .../scenes/Editor/Metrics/widgets/latency.ts | 2 ++ .../Metrics/widgets/writeAmplification.ts | 2 ++ .../Editor/Metrics/widgets/writeThroughput.ts | 2 ++ 8 files changed, 31 insertions(+), 5 deletions(-) diff --git a/packages/web-console/src/scenes/Editor/Metrics/date-time-picker.tsx b/packages/web-console/src/scenes/Editor/Metrics/date-time-picker.tsx index 1aad2f7eb..b80c7b76c 100644 --- a/packages/web-console/src/scenes/Editor/Metrics/date-time-picker.tsx +++ b/packages/web-console/src/scenes/Editor/Metrics/date-time-picker.tsx @@ -189,6 +189,7 @@ export const DateTimePicker = ({ "string.toIsBeforeFrom": "To date must be after From date", "string.dateInFuture": "Please set a date in the past or use `now`", "string.fromIsAfterTo": "From date must be before To date", + "string.sameValues": "From and To dates cannot be the same", } const schema = Joi.object({ @@ -196,17 +197,21 @@ export const DateTimePicker = ({ .required() .custom((value, helpers) => { const dateValue = durationTokenToDate(value) + const timeValue = new Date(dateValue).getTime() + const timeNow = new Date().getTime() if (dateValue === "Invalid date") { return helpers.error("string.invalidDate") } else if ( - new Date(dateValue).getTime() >= + timeValue >= new Date( durationTokenToDate(helpers.state.ancestors[0].dateTo), ).getTime() ) { return helpers.error("string.fromIsAfterTo") - } else if (new Date(dateValue).getTime() > new Date().getTime()) { + } else if (timeValue > timeNow) { return helpers.error("string.dateInFuture") + } else if (timeValue === timeNow) { + return helpers.error("string.sameValues") } return value }) @@ -215,17 +220,21 @@ export const DateTimePicker = ({ .required() .custom((value, helpers) => { const dateValue = durationTokenToDate(value) + const timeValue = new Date(dateValue).getTime() + const timeNow = new Date().getTime() if (dateValue === "Invalid date") { return helpers.error("string.invalidDate") } else if ( - new Date(dateValue).getTime() <= + timeValue <= new Date( durationTokenToDate(helpers.state.ancestors[0].dateFrom), ).getTime() ) { return helpers.error("string.toIsBeforeFrom") - } else if (new Date(dateValue).getTime() > new Date().getTime()) { + } else if (timeValue > timeNow) { return helpers.error("string.dateInFuture") + } else if (timeValue === timeNow) { + return helpers.error("string.sameValues") } return value }) diff --git a/packages/web-console/src/scenes/Editor/Metrics/graph.tsx b/packages/web-console/src/scenes/Editor/Metrics/graph.tsx index 2600c9400..ea0e45d1b 100644 --- a/packages/web-console/src/scenes/Editor/Metrics/graph.tsx +++ b/packages/web-console/src/scenes/Editor/Metrics/graph.tsx @@ -6,6 +6,8 @@ import uPlot from "uplot" import UplotReact from "uplot-react" import { Box, Button, Loader } from "@questdb/react-components" import { Text } from "../../../components/Text" +import { IconWithTooltip } from "../../../components/IconWithTooltip" +import { Information } from "@styled-icons/remix-line" const Actions = styled.div` margin-right: 0; @@ -36,7 +38,7 @@ const Header = styled(Box).attrs({ const HeaderText = styled.span` font-size: 1.4rem; font-weight: 600; - padding: 0 1rem; + padding: 0 0 0 1rem; ` const GraphWrapper = styled(Box).attrs({ @@ -152,6 +154,11 @@ export const Graph = ({ {beforeLabel} {label} + } + tooltip={widgetConfig.description} + placement="bottom" + /> {loading && } {actions} diff --git a/packages/web-console/src/scenes/Editor/Metrics/index.tsx b/packages/web-console/src/scenes/Editor/Metrics/index.tsx index 6a31738d4..e4bf595d9 100644 --- a/packages/web-console/src/scenes/Editor/Metrics/index.tsx +++ b/packages/web-console/src/scenes/Editor/Metrics/index.tsx @@ -48,6 +48,7 @@ const Toolbar = styled(Box).attrs({ border-bottom: 1px solid ${({ theme }) => theme.color.backgroundDarker}; box-shadow: 0 2px 10px 0 rgba(23, 23, 23, 0.35); white-space: nowrap; + flex-shrink: 0; ` const Header = styled(Text)` diff --git a/packages/web-console/src/scenes/Editor/Metrics/utils.ts b/packages/web-console/src/scenes/Editor/Metrics/utils.ts index 71c2818f4..5a56f8c70 100644 --- a/packages/web-console/src/scenes/Editor/Metrics/utils.ts +++ b/packages/web-console/src/scenes/Editor/Metrics/utils.ts @@ -14,6 +14,7 @@ export enum MetricType { export type Widget = { label: string + description: string iconUrl: string isTableMetric: boolean getQuery: ({ 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 382338c4c..e14bd8c2c 100644 --- a/packages/web-console/src/scenes/Editor/Metrics/widgets/commitRate.ts +++ b/packages/web-console/src/scenes/Editor/Metrics/widgets/commitRate.ts @@ -6,6 +6,8 @@ import { TelemetryTable } from "../../../../consts" export const commitRate: Widget = { label: "Commit rate", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.", iconUrl: "/assets/metric-commit-rate.svg", isTableMetric: true, querySupportsRollingAppend: true, diff --git a/packages/web-console/src/scenes/Editor/Metrics/widgets/latency.ts b/packages/web-console/src/scenes/Editor/Metrics/widgets/latency.ts index 8bc349fa0..c776b4c7c 100644 --- a/packages/web-console/src/scenes/Editor/Metrics/widgets/latency.ts +++ b/packages/web-console/src/scenes/Editor/Metrics/widgets/latency.ts @@ -5,6 +5,8 @@ import { TelemetryTable } from "../../../../consts" export const latency: Widget = { label: "WAL apply latency in ms", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.", iconUrl: "/assets/metric-read-latency.svg", isTableMetric: true, querySupportsRollingAppend: true, diff --git a/packages/web-console/src/scenes/Editor/Metrics/widgets/writeAmplification.ts b/packages/web-console/src/scenes/Editor/Metrics/widgets/writeAmplification.ts index fe0eb8f51..bdec75bbd 100644 --- a/packages/web-console/src/scenes/Editor/Metrics/widgets/writeAmplification.ts +++ b/packages/web-console/src/scenes/Editor/Metrics/widgets/writeAmplification.ts @@ -6,6 +6,8 @@ import { TelemetryTable } from "../../../../consts" export const writeAmplification: Widget = { label: "Write amplification", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.", iconUrl: "/assets/metric-write-amplification.svg", isTableMetric: true, querySupportsRollingAppend: true, diff --git a/packages/web-console/src/scenes/Editor/Metrics/widgets/writeThroughput.ts b/packages/web-console/src/scenes/Editor/Metrics/widgets/writeThroughput.ts index 89d788198..157db4596 100644 --- a/packages/web-console/src/scenes/Editor/Metrics/widgets/writeThroughput.ts +++ b/packages/web-console/src/scenes/Editor/Metrics/widgets/writeThroughput.ts @@ -5,6 +5,8 @@ import { TelemetryTable } from "../../../../consts" export const writeThroughput: Widget = { label: "Write throughput", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.", iconUrl: "/assets/metric-rows-applied.svg", isTableMetric: true, querySupportsRollingAppend: true,