From ea5774527f9cd34868b379805eca0143acc0de7d Mon Sep 17 00:00:00 2001 From: mshakira Date: Tue, 31 Oct 2023 12:57:28 -0700 Subject: [PATCH] add tooltips (#1289) Signed-off-by: Shakira M Co-authored-by: Shakira M Co-authored-by: Darshan Simha --- .../common/ErrorIndicator/index.tsx | 44 +++++++++++-------- ui/src/components/common/Help/index.tsx | 15 +++++++ .../common/SummaryPageLayout/index.tsx | 2 +- .../partials/SummaryStatuses/index.tsx | 31 +++++++++++-- .../partials/SummaryTitledValue/index.tsx | 37 ++++++++++++++-- ui/src/components/pages/Cluster/index.tsx | 8 ++++ ui/src/components/pages/Namespace/index.tsx | 10 +++++ .../partials/PipelineISBStatus/index.tsx | 3 +- .../PipelineISBSummaryStatus/index.tsx | 3 +- .../partials/PipelineStatus/index.tsx | 3 +- .../partials/PipelineSummaryStatus/index.tsx | 29 +++++++----- ui/src/utils/{index.ts => index.tsx} | 40 ++++++++++++++++- 12 files changed, 181 insertions(+), 44 deletions(-) create mode 100644 ui/src/components/common/Help/index.tsx rename ui/src/utils/{index.ts => index.tsx} (85%) diff --git a/ui/src/components/common/ErrorIndicator/index.tsx b/ui/src/components/common/ErrorIndicator/index.tsx index 9488b58c11..fd7400e89c 100644 --- a/ui/src/components/common/ErrorIndicator/index.tsx +++ b/ui/src/components/common/ErrorIndicator/index.tsx @@ -1,11 +1,13 @@ import React, { useContext, useCallback } from "react"; import Box from "@mui/material/Box"; import Paper from "@mui/material/Paper"; +import Tooltip from "@mui/material/Tooltip"; import { AppContextProps } from "../../../types/declarations/app"; import { AppContext } from "../../../App"; import { SidebarType } from "../SlidingSidebar"; import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; import ErrorIcon from "@mui/icons-material/Error"; +import { ERRORS_TOOLTIP } from "../../../utils"; import "./style.css"; @@ -20,24 +22,28 @@ export function ErrorIndicator() { }, []); return ( - - - {errors && errors.length ? ( - - ) : ( - - )} - {errors.length ? ( - Error occurred - ) : undefined} - - + + + + {errors && errors.length ? ( + + ) : ( + + )} + {errors.length ? ( + Error occurred + ) : undefined} + + + ); } diff --git a/ui/src/components/common/Help/index.tsx b/ui/src/components/common/Help/index.tsx new file mode 100644 index 0000000000..dbe6528676 --- /dev/null +++ b/ui/src/components/common/Help/index.tsx @@ -0,0 +1,15 @@ +import HelpIcon from "@mui/icons-material/Help"; +import { HTMLlTooltip } from "../../../utils"; +export const Help = ({ tooltip }) => { + return ( + + + + ); +}; diff --git a/ui/src/components/common/SummaryPageLayout/index.tsx b/ui/src/components/common/SummaryPageLayout/index.tsx index 6edc7354b3..00e1b24005 100644 --- a/ui/src/components/common/SummaryPageLayout/index.tsx +++ b/ui/src/components/common/SummaryPageLayout/index.tsx @@ -276,13 +276,13 @@ export function SummaryPageLayout({ zIndex: (theme) => theme.zIndex.drawer - 1, position: "fixed", top: "5.75rem", - padding: "0.5rem", }} > {getSummaryComponent(summarySections)} diff --git a/ui/src/components/common/SummaryPageLayout/partials/SummaryStatuses/index.tsx b/ui/src/components/common/SummaryPageLayout/partials/SummaryStatuses/index.tsx index b2e598d5b4..39113755a5 100644 --- a/ui/src/components/common/SummaryPageLayout/partials/SummaryStatuses/index.tsx +++ b/ui/src/components/common/SummaryPageLayout/partials/SummaryStatuses/index.tsx @@ -1,6 +1,7 @@ import React from "react"; import Box from "@mui/material/Box"; import { StatusBar } from "../../../StatusBar"; +import { Help } from "../../../Help"; import circleCheck from "../../../../../images/checkmark-circle.png"; import circleDash from "../../../../../images/circle-dash.png"; @@ -15,6 +16,7 @@ export interface SummaryStatusesProps { critical: number; activeText?: string; inAcitveText?: string; + tooltip?: string; linkComponent?: React.ReactNode; } @@ -27,20 +29,28 @@ export function SummaryStatuses({ critical, activeText = "Active", inAcitveText = "Non-Active", + tooltip, linkComponent, }: SummaryStatusesProps) { return ( - + {title} + {tooltip && ( + + + + )} ); } diff --git a/ui/src/components/common/SummaryPageLayout/partials/SummaryTitledValue/index.tsx b/ui/src/components/common/SummaryPageLayout/partials/SummaryTitledValue/index.tsx index 4ff75dae1c..1d31e502f2 100644 --- a/ui/src/components/common/SummaryPageLayout/partials/SummaryTitledValue/index.tsx +++ b/ui/src/components/common/SummaryPageLayout/partials/SummaryTitledValue/index.tsx @@ -1,26 +1,55 @@ import React from "react"; import Box from "@mui/material/Box"; +import { Help } from "../../../Help"; import "./style.css"; export interface SummaryTitledValueProps { title: string; value: string | number; + tooltip?: string; } -export function SummaryTitledValue({ title, value }: SummaryTitledValueProps) { +export function SummaryTitledValue({ + title, + value, + tooltip, +}: SummaryTitledValueProps) { return ( - {title} - {value} + + {title} + {value} + + {tooltip && ( + + + + )} ); } diff --git a/ui/src/components/pages/Cluster/index.tsx b/ui/src/components/pages/Cluster/index.tsx index 7a6b4c5e95..86bf6cd6c2 100644 --- a/ui/src/components/pages/Cluster/index.tsx +++ b/ui/src/components/pages/Cluster/index.tsx @@ -11,6 +11,11 @@ import { ErrorDisplay } from "../../common/ErrorDisplay"; import { useClusterSummaryFetch } from "../../../utils/fetchWrappers/clusterSummaryFetch"; import { AppContextProps } from "../../../types/declarations/app"; import { AppContext } from "../../../App"; +import { + ISB_SERVICES_STATUS_TOOLTIP, + ISB_SERVICES_TOOLTIP, + PIPELINE_STATUS_TOOLTIP, +} from "../../../utils"; import "./style.css"; @@ -75,6 +80,7 @@ export function Cluster() { healthy: data.pipelinesHealthyCount, warning: data.pipelinesWarningCount, critical: data.pipelinesCriticalCount, + tooltip: PIPELINE_STATUS_TOOLTIP, }, }, ], @@ -88,6 +94,7 @@ export function Cluster() { titledValueProps: { title: "ISB SERVICES", value: data.isbsCount, + tooltip: ISB_SERVICES_TOOLTIP, }, }, { @@ -99,6 +106,7 @@ export function Cluster() { healthy: data.isbsHealthyCount, warning: data.isbsWarningCount, critical: data.isbsCriticalCount, + tooltip: ISB_SERVICES_STATUS_TOOLTIP, }, }, ], diff --git a/ui/src/components/pages/Namespace/index.tsx b/ui/src/components/pages/Namespace/index.tsx index 9fa2959da7..9a7d6ffcda 100644 --- a/ui/src/components/pages/Namespace/index.tsx +++ b/ui/src/components/pages/Namespace/index.tsx @@ -14,6 +14,10 @@ import { SidebarType } from "../../common/SlidingSidebar"; import { NamespacePipelineListing } from "./partials/NamespacePipelineListing"; import { ErrorDisplay } from "../../common/ErrorDisplay"; import { NamespaceSummaryData } from "../../../types/declarations/namespace"; +import { + ISB_SERVICES_STATUS_TOOLTIP, ISB_SERVICES_TOOLTIP, + PIPELINE_STATUS_TOOLTIP, +} from "../../../utils"; import "./style.css"; @@ -100,6 +104,7 @@ export function Namespaces({ namespaceId: nsIdProp }: NamespaceProps) { healthy: 0, warning: 0, critical: 0, + tooltip: PIPELINE_STATUS_TOOLTIP, }, }, ], @@ -113,6 +118,7 @@ export function Namespaces({ namespaceId: nsIdProp }: NamespaceProps) { titledValueProps: { title: "ISB SERVICES", value: 0, + tooltip: ISB_SERVICES_TOOLTIP }, }, { @@ -124,6 +130,7 @@ export function Namespaces({ namespaceId: nsIdProp }: NamespaceProps) { healthy: 0, warning: 0, critical: 0, + tooltip: ISB_SERVICES_STATUS_TOOLTIP, }, }, ], @@ -186,6 +193,7 @@ export function Namespaces({ namespaceId: nsIdProp }: NamespaceProps) { healthy: data.pipelinesHealthyCount, warning: data.pipelinesWarningCount, critical: data.pipelinesCriticalCount, + tooltip: PIPELINE_STATUS_TOOLTIP, }, }, ], @@ -199,6 +207,7 @@ export function Namespaces({ namespaceId: nsIdProp }: NamespaceProps) { titledValueProps: { title: "ISB SERVICES", value: data.isbsCount, + tooltip: ISB_SERVICES_TOOLTIP }, }, { @@ -210,6 +219,7 @@ export function Namespaces({ namespaceId: nsIdProp }: NamespaceProps) { healthy: data.isbsHealthyCount, warning: data.isbsWarningCount, critical: data.isbsCriticalCount, + tooltip: ISB_SERVICES_STATUS_TOOLTIP, }, }, ], diff --git a/ui/src/components/pages/Pipeline/partials/PipelineISBStatus/index.tsx b/ui/src/components/pages/Pipeline/partials/PipelineISBStatus/index.tsx index ed927dad37..5f32982248 100644 --- a/ui/src/components/pages/Pipeline/partials/PipelineISBStatus/index.tsx +++ b/ui/src/components/pages/Pipeline/partials/PipelineISBStatus/index.tsx @@ -16,9 +16,8 @@ export function PipelineISBStatus({ isbData }) { display: "flex", flexDirection: "column", marginTop: "0.375rem", - alignItems: "center", flexGrow: 1, - justifyContent: "center", + paddingLeft: "1rem" }} > diff --git a/ui/src/components/pages/Pipeline/partials/PipelineISBSummaryStatus/index.tsx b/ui/src/components/pages/Pipeline/partials/PipelineISBSummaryStatus/index.tsx index 9019144f72..5349be7127 100644 --- a/ui/src/components/pages/Pipeline/partials/PipelineISBSummaryStatus/index.tsx +++ b/ui/src/components/pages/Pipeline/partials/PipelineISBSummaryStatus/index.tsx @@ -13,9 +13,8 @@ export function PipelineISBSummaryStatus({ isbData }) { display: "flex", flexDirection: "column", marginTop: "0.375rem", - alignItems: "center", flexGrow: 1, - justifyContent: "center", + paddingLeft: "1rem" }} > diff --git a/ui/src/components/pages/Pipeline/partials/PipelineStatus/index.tsx b/ui/src/components/pages/Pipeline/partials/PipelineStatus/index.tsx index e83d31a570..af3adfde51 100644 --- a/ui/src/components/pages/Pipeline/partials/PipelineStatus/index.tsx +++ b/ui/src/components/pages/Pipeline/partials/PipelineStatus/index.tsx @@ -11,9 +11,8 @@ export function PipelineStatus({ status, healthStatus }) { display: "flex", flexDirection: "column", marginTop: "0.375rem", - alignItems: "center", flexGrow: 1, - justifyContent: "center", + paddingLeft: "1rem" }} > diff --git a/ui/src/components/pages/Pipeline/partials/PipelineSummaryStatus/index.tsx b/ui/src/components/pages/Pipeline/partials/PipelineSummaryStatus/index.tsx index bd98e855d8..50b8a89b90 100644 --- a/ui/src/components/pages/Pipeline/partials/PipelineSummaryStatus/index.tsx +++ b/ui/src/components/pages/Pipeline/partials/PipelineSummaryStatus/index.tsx @@ -4,7 +4,11 @@ import { useParams } from "react-router-dom"; import { SidebarType } from "../../../../common/SlidingSidebar"; import { AppContextProps } from "../../../../../types/declarations/app"; import { AppContext } from "../../../../../App"; -import { DurationString } from "../../../../../utils"; +import { + DurationString, + HTMLlTooltip, + MAX_LAG_TOOLTIP, +} from "../../../../../utils"; import { ViewType } from "../../../../common/SpecEditor"; import "./style.css"; @@ -51,9 +55,8 @@ export function PipelineSummaryStatus({ pipelineId, pipeline, lag, refresh }) { display: "flex", flexDirection: "column", marginTop: "0.375rem", - alignItems: "center", flexGrow: 1, - justifyContent: "center", + paddingLeft: "1rem" }} > @@ -107,13 +110,19 @@ export function PipelineSummaryStatus({ pipelineId, pipeline, lag, refresh }) { >
-
- Max lag: - - {" "} - {DurationString(lag)} - -
+ +
+ Max lag: + + {" "} + {lag < 0 ? "Unavailable now" : DurationString(lag)} + +
+
diff --git a/ui/src/utils/index.ts b/ui/src/utils/index.tsx similarity index 85% rename from ui/src/utils/index.ts rename to ui/src/utils/index.tsx index d7a950a65e..6f8944d53f 100644 --- a/ui/src/utils/index.ts +++ b/ui/src/utils/index.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { Pod, PodDetail, ResourceUsage } from "../types/declarations/pods"; import circleCheck from "../../src/images/checkmark-circle.png"; import circleDash from "../../src/images/circle-dash.png"; @@ -6,6 +7,8 @@ import warning from "../../src/images/warning-circle.png"; import critical from "../../src/images/critical.png"; import moment from "moment"; import { IsbServiceSpec } from "../types/declarations/pipeline"; +import { styled } from "@mui/material/styles"; +import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip"; // global constants export const ALL = "All"; @@ -51,7 +54,8 @@ export async function getAPIResponseError( try { const data = await response.json(); if (data.errMsg) { - message = response.status === 403 ? `Error: ${data.errMsg}` : data.errMsg; + message = + response.status === 403 ? `Error: ${data.errMsg}` : data.errMsg; } } catch (e) { // Ignore @@ -342,3 +346,37 @@ export const timeAgo = (timestamp: string) => { } return time; }; + +export const PIPELINE_STATUS_TOOLTIP = + "Pipeline health is determined by backpressure. Active pipelines are running, while non-active pipelines are failed, pausing, paused, or deleting."; +export const ISB_SERVICES_TOOLTIP = + "Inter State Buffer Services are used to transfer data between vertices in a pipeline."; +export const ISB_SERVICES_STATUS_TOOLTIP = ( + + <> + Healthy:  The ISB service is operating optimally. No issues or + anomalies detected. +
+ Warning:  The ISB service is experiencing minor issues or + degradation within the data processing pipeline. Consider monitoring and + further investigation. +
+ Critical:  The ISB service is in a critical state. Immediate + attention required. + + +); +export const MAX_LAG_TOOLTIP = + "Max lag is the amount of time between the oldest and newest data that is being processed on."; +export const ERRORS_TOOLTIP = + "Errors that occur when attempting to retrieve data"; +// export const PIPELINES_TOOLTIP = "Pipelines list" +// export const ISB_TOOLTIP = "Inter State Buffer services list" + +export const HTMLlTooltip = styled(({ className, ...props }: TooltipProps) => ( + +))(() => ({ + [`& .${tooltipClasses.tooltip}`]: { + fontSize: 14, + }, +}));