Widget UI updates, validation updates

questdb · Jan 8, 2025 · 7fd1566 · 7fd1566
1 parent aaaa582
commit 7fd1566
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 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
@@ -189,24 +189,29 @@ 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({
     dateFrom: Joi.any()
       .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
@@ -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 = ({
         <Box gap="0.5rem" align="center">
           <BeforeLabel>{beforeLabel}</BeforeLabel>
           <HeaderText>{label}</HeaderText>
+          <IconWithTooltip
+            icon={<Information size="16px" />}
+            tooltip={widgetConfig.description}
+            placement="bottom"
+          />
           {loading && <Loader size="18px" spin />}
         </Box>
         <Actions>{actions}</Actions>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,