add tooltips (#1289)

Signed-off-by: Shakira M <[email protected]> Co-authored-by: Shakira M <[email protected]> Co-authored-by: Darshan Simha <[email protected]>
numaproj · Oct 31, 2023 · ea57745 · ea57745
1 parent 22a30cf
commit ea57745
Show file tree

Hide file tree

Showing 12 changed files with 181 additions and 44 deletions.
diff --git 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 (
-    <Paper
-      elevation={1}
-      sx={{
-        cursor: "pointer",
-        padding: "0.25rem 0.5rem",
-      }}
-      onClick={onErrorClick}
-    >
-      <Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
-        {errors && errors.length ? (
-          <ErrorIcon sx={{ color: "#D52B1E" }} />
-        ) : (
-          <ErrorOutlineIcon sx={{ color: "#6B6C72" }} />
-        )}
-        {errors.length ? (
-          <span className="error-indicator-text">Error occurred</span>
-        ) : undefined}
-      </Box>
-    </Paper>
+    <Tooltip title={ERRORS_TOOLTIP} arrow>
+      <Paper
+        elevation={1}
+        sx={{
+          cursor: "pointer",
+          padding: "0.25rem 0.5rem",
+        }}
+        onClick={onErrorClick}
+      >
+        <Box
+          sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}
+        >
+          {errors && errors.length ? (
+            <ErrorIcon sx={{ color: "#D52B1E" }} />
+          ) : (
+            <ErrorOutlineIcon sx={{ color: "#6B6C72" }} />
+          )}
+          {errors.length ? (
+            <span className="error-indicator-text">Error occurred</span>
+          ) : undefined}
+        </Box>
+      </Paper>
+    </Tooltip>
   );
 }
diff --git a/ui/src/components/common/Help/index.tsx 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 (
+    <HTMLlTooltip title={tooltip} arrow>
+      <HelpIcon
+        sx={{
+          fontSize: 14,
+          alignItems: "right",
+          color: "#b2b2b2",
+        }}
+      />
+    </HTMLlTooltip>
+  );
+};
diff --git 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",
         }}
       >
         <Box
           sx={{
             display: "flex",
             width: "100%",
+            padding: "0rem",
           }}
         >
           {getSummaryComponent(summarySections)}

diff --git 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 (
     <Box
       sx={{
         display: "flex",
-        flexDirection: "column",
-        marginTop: "0.375rem",
+        flexDirection: "row",
         alignItems: "center",
         flexGrow: 1,
         justifyContent: "center",
       }}
     >
-      <Box sx={{ width: "fit-content" }}>
+      <Box
+        sx={{
+          width: "fit-content",
+          flexGrow: 1,
+          alignItems: "center",
+          justifyContent: "center",
+          paddingLeft: "1rem",
+        }}
+      >
         <span className="summary-statuses-title">{title}</span>
         <Box
           sx={{ display: "flex", flexDirection: "row", marginTop: "0.3125rem" }}
@@ -106,6 +116,21 @@ export function SummaryStatuses({
           )}
         </Box>
       </Box>
+      {tooltip && (
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "right",
+            justifyContent: "flex-end",
+            paddingRight: "0.2rem",
+            marginRight: "1rem",
+            height: "100%"
+          }}
+        >
+          <Help tooltip={tooltip} />
+        </Box>
+      )}
     </Box>
   );
 }
diff --git 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 (
     <Box
       sx={{
         display: "flex",
-        flexDirection: "column",
+        flexDirection: "row",
         alignItems: "center",
         flexGrow: 1,
         justifyContent: "center",
       }}
     >
-      <span className="summary-titled-value-title">{title}</span>
-      <span className="summary-titled-value-value">{value}</span>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: "1rem"
+        }}
+      >
+        <span className="summary-titled-value-title">{title}</span>
+        <span className="summary-titled-value-value">{value}</span>
+      </Box>
+      {tooltip && (
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "right",
+            height: "100%",
+            justifyContent: "flex-end",
+            marginRight: "1rem",
+          }}
+        >
+          <Help tooltip={tooltip} />
+        </Box>
+      )}
     </Box>
   );
 }
diff --git 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
@@ -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
@@ -16,9 +16,8 @@ export function PipelineISBStatus({ isbData }) {
         display: "flex",
         flexDirection: "column",
         marginTop: "0.375rem",
-        alignItems: "center",
         flexGrow: 1,
-        justifyContent: "center",
+        paddingLeft: "1rem"
       }}
     >
       <Box sx={{ display: "flex", flexDirection: "row" }}>

diff --git 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"
       }}
     >
       <Box sx={{ display: "flex", flexDirection: "row" }}>

diff --git 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"
       }}
     >
       <Box sx={{ width: "fit-content" }}>