From 2aff0ce3276869bd994b47db5824afc4d996a1bb Mon Sep 17 00:00:00 2001 From: Yury Molodov Date: Fri, 25 Aug 2023 15:39:21 +0200 Subject: [PATCH] vmui: ui improvements (#4872) * vmui: chart refactoring to enhance code structure * vmui: improve ui (cherry picked from commit 72167a697e6832d4be51e66c541eef17d8577b9c) --- app/vmui/packages/vmui/public/index.html | 2 +- .../Chart/ChartTooltip/ChartTooltip.tsx | 38 +++++----- .../components/Chart/ChartTooltip/style.scss | 75 +++++++++++++------ .../components/Chart/GraphTips/GraphTips.tsx | 1 + .../Line/Legend/LegendItem/LegendItem.tsx | 13 +++- .../Chart/Line/Legend/LegendItem/style.scss | 22 +++++- .../AdditionalSettings/AdditionalSettings.tsx | 1 + .../GlobalSettings/GlobalSettings.tsx | 1 + .../GraphSettings/GraphSettings.tsx | 1 + .../StepConfigurator/StepConfigurator.tsx | 1 + .../ExecutionControls/ExecutionControls.tsx | 1 + .../TimeSelector/TimeSelector.tsx | 1 + .../ExploreMetricItemHeader.tsx | 6 ++ .../ExploreMetricsHeader.tsx | 2 + .../src/components/Main/Button/Button.tsx | 3 + .../Main/CodeExample/CodeExample.tsx | 1 + .../DateTimeInput/DateTimeInput.tsx | 1 + .../components/Main/MenuBurger/MenuBurger.tsx | 1 + .../vmui/src/components/Main/Modal/Modal.tsx | 1 + .../src/components/Main/Popper/Popper.tsx | 1 + .../Main/ShortcutKeys/ShortcutKeys.tsx | 1 + .../Main/TextField/TextFieldMessage.tsx | 1 - .../vmui/src/components/Table/Table.tsx | 1 + .../Table/TableSettings/TableSettings.tsx | 2 + .../TraceQuery/NestedNav/NestedNav.tsx | 3 +- .../components/TraceQuery/TracingsView.tsx | 2 + .../components/Views/TableView/TableView.tsx | 1 + app/vmui/packages/vmui/src/constants/graph.ts | 4 +- .../packages/vmui/src/constants/palette.ts | 2 +- .../Header/HeaderControls/HeaderControls.tsx | 1 + .../src/layouts/Header/HeaderNav/style.scss | 6 +- .../CardinalityConfigurator.tsx | 1 + .../QueryConfigurator/QueryConfigurator.tsx | 3 + .../PredefinedDashboard.tsx | 1 + .../TopQueryTable/TopQueryTable.tsx | 2 + app/vmui/packages/vmui/src/styles/fonts.scss | 2 + app/vmui/packages/vmui/src/styles/style.scss | 2 +- .../packages/vmui/src/utils/uplot/helpers.ts | 6 +- 38 files changed, 157 insertions(+), 57 deletions(-) diff --git a/app/vmui/packages/vmui/public/index.html b/app/vmui/packages/vmui/public/index.html index ca8d5d575f..92cd53f081 100644 --- a/app/vmui/packages/vmui/public/index.html +++ b/app/vmui/packages/vmui/public/index.html @@ -3,7 +3,7 @@ - + = ({ size="small" startIcon={} onMouseDown={handleMouseDown} + ariaLabel="drag the tooltip" /> diff --git a/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricItemHeader/ExploreMetricItemHeader.tsx b/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricItemHeader/ExploreMetricItemHeader.tsx index 1dc00078d6..d39a74fde5 100644 --- a/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricItemHeader/ExploreMetricItemHeader.tsx +++ b/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricItemHeader/ExploreMetricItemHeader.tsx @@ -59,6 +59,7 @@ const ExploreMetricItemHeader: FC = ({ size="small" startIcon={} onClick={handleOpenOptions} + ariaLabel="open panel settings" /> {openOptions && ( = ({ variant="outlined" onClick={handleOrderUp} disabled={index === 0} + ariaLabel="move graph up" />

position: #{index + 1} @@ -81,6 +83,7 @@ const ExploreMetricItemHeader: FC = ({ variant="outlined" onClick={handleOrderDown} disabled={index === length - 1} + ariaLabel="move graph down" /> {!isBucket && ( @@ -123,6 +126,7 @@ const ExploreMetricItemHeader: FC = ({ color="gray" size="small" onClick={handleOrderUp} + ariaLabel="move graph up" />

#{index+1}
@@ -134,6 +138,7 @@ const ExploreMetricItemHeader: FC = ({ color="gray" size="small" onClick={handleOrderDown} + ariaLabel="move graph down" /> @@ -157,6 +162,7 @@ const ExploreMetricItemHeader: FC = ({ color="gray" size="small" onClick={handleClickRemove} + ariaLabel="close graph" /> diff --git a/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricsHeader/ExploreMetricsHeader.tsx b/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricsHeader/ExploreMetricsHeader.tsx index 9d25581045..0d4151cb19 100644 --- a/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricsHeader/ExploreMetricsHeader.tsx +++ b/app/vmui/packages/vmui/src/components/ExploreMetrics/ExploreMetricsHeader/ExploreMetricsHeader.tsx @@ -100,6 +100,7 @@ const ExploreMetricsHeader: FC = ({ color={showTips ? "warning" : "gray"} startIcon={} onClick={toggleShowTips} + ariaLabel="visibility tips" /> @@ -134,6 +135,7 @@ const ExploreMetricsHeader: FC = ({ size="small" startIcon={} onClick={setHideTips} + ariaLabel="close tips" /> diff --git a/app/vmui/packages/vmui/src/components/Main/Button/Button.tsx b/app/vmui/packages/vmui/src/components/Main/Button/Button.tsx index 5d939e609a..f7507a77b9 100644 --- a/app/vmui/packages/vmui/src/components/Main/Button/Button.tsx +++ b/app/vmui/packages/vmui/src/components/Main/Button/Button.tsx @@ -7,6 +7,7 @@ interface ButtonProps { variant?: "contained" | "outlined" | "text" color?: "primary" | "secondary" | "success" | "error" | "gray" | "warning" size?: "small" | "medium" | "large" + ariaLabel?: string // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label endIcon?: ReactNode startIcon?: ReactNode fullWidth?: boolean @@ -21,6 +22,7 @@ const Button: FC = ({ variant = "contained", color = "primary", size = "medium", + ariaLabel, children, endIcon, startIcon, @@ -46,6 +48,7 @@ const Button: FC = ({ diff --git a/app/vmui/packages/vmui/src/components/Main/Modal/Modal.tsx b/app/vmui/packages/vmui/src/components/Main/Modal/Modal.tsx index 1cbeb524bf..7139964849 100644 --- a/app/vmui/packages/vmui/src/components/Main/Modal/Modal.tsx +++ b/app/vmui/packages/vmui/src/components/Main/Modal/Modal.tsx @@ -82,6 +82,7 @@ const Modal: FC = ({ variant="text" size="small" onClick={onClose} + ariaLabel="close" > diff --git a/app/vmui/packages/vmui/src/components/Main/Popper/Popper.tsx b/app/vmui/packages/vmui/src/components/Main/Popper/Popper.tsx index 9caee30e3f..d76f454a5d 100644 --- a/app/vmui/packages/vmui/src/components/Main/Popper/Popper.tsx +++ b/app/vmui/packages/vmui/src/components/Main/Popper/Popper.tsx @@ -162,6 +162,7 @@ const Popper: FC = ({ variant="text" size="small" onClick={handleClickClose} + ariaLabel="close" > diff --git a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx index 171d730834..c05b4249ed 100644 --- a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx +++ b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx @@ -45,6 +45,7 @@ const ShortcutKeys: FC<{ showTitle?: boolean }> = ({ showTitle }) => { color="primary" startIcon={} onClick={handleOpen} + ariaLabel={title} > {showTitle && title} diff --git a/app/vmui/packages/vmui/src/components/Main/TextField/TextFieldMessage.tsx b/app/vmui/packages/vmui/src/components/Main/TextField/TextFieldMessage.tsx index db1c2f1c7f..2ac8357d7f 100644 --- a/app/vmui/packages/vmui/src/components/Main/TextField/TextFieldMessage.tsx +++ b/app/vmui/packages/vmui/src/components/Main/TextField/TextFieldMessage.tsx @@ -11,7 +11,6 @@ interface TextFieldErrorProps { } const TextFieldMessage: FC = ({ error, warning, info }) => { - console.log(warning); const messageRef = useRef(null); const [isMessageTruncated, setIsMessageTruncated] = useState(false); const [showFull, setShowFull] = useState(false); diff --git a/app/vmui/packages/vmui/src/components/Table/Table.tsx b/app/vmui/packages/vmui/src/components/Table/Table.tsx index 3f9c56b0cf..1a53542b79 100644 --- a/app/vmui/packages/vmui/src/components/Table/Table.tsx +++ b/app/vmui/packages/vmui/src/components/Table/Table.tsx @@ -110,6 +110,7 @@ const Table = ({ rows, columns, defaultOrderBy, copyToClipboar size="small" startIcon={copied === rowIndex ? : } onClick={createCopyHandler(row[copyToClipboard], rowIndex)} + ariaLabel="copy row" /> diff --git a/app/vmui/packages/vmui/src/components/Table/TableSettings/TableSettings.tsx b/app/vmui/packages/vmui/src/components/Table/TableSettings/TableSettings.tsx index 1665a11563..f9c2c65bcd 100644 --- a/app/vmui/packages/vmui/src/components/Table/TableSettings/TableSettings.tsx +++ b/app/vmui/packages/vmui/src/components/Table/TableSettings/TableSettings.tsx @@ -67,6 +67,7 @@ const TableSettings: FC = ({ startIcon={} onClick={toggleOpenSettings} disabled={disabledButton} + ariaLabel="table settings" /> @@ -100,6 +101,7 @@ const TableSettings: FC = ({ size="small" onClick={handleResetColumns} startIcon={} + ariaLabel="reset columns" /> diff --git a/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx b/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx index 02699336e0..f32e13b549 100644 --- a/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx +++ b/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx @@ -88,9 +88,8 @@ const NestedNav: FC = ({ trace, totalMsec }) => { {(isExpanded || showFullMessage) && (