node decorators tooltips

netobserv · Nov 7, 2022 · 9982f19 · 9982f19
1 parent 2b63db3
commit 9982f19
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/web/locales/en/plugin__netobserv-plugin.json b/web/locales/en/plugin__netobserv-plugin.json
@@ -163,8 +163,10 @@
   "Badges are displayed": "Badges are displayed",
   "Badges are hidden": "Badges are hidden",
   "Truncate labels": "Truncate labels",
-  "Kind": "Kind",
-  "Name": "Name",
+  "Step into this {{name}}": "Step into this {{name}}",
+  "Add {{name}} filter": "Add {{name}} filter",
+  "Unpin this element": "Unpin this element",
+  "Pin this element": "Pin this element",
   "Query is slow": "Query is slow",
   "Overview": "Overview",
   "Flow Table": "Flow Table",
@@ -208,6 +210,8 @@
   "Kubernetes Objects": "Kubernetes Objects",
   "Owner Kubernetes Objects": "Owner Kubernetes Objects",
   "IPs & Ports": "IPs & Ports",
+  "Name": "Name",
+  "Kind": "Kind",
   "Owner Kind": "Owner Kind",
   "Port": "Port",
   "Kubernetes Object": "Kubernetes Object",

diff --git a/web/src/components/netflow-topology/styles/styleNode.tsx b/web/src/components/netflow-topology/styles/styleNode.tsx
@@ -1,3 +1,4 @@
+import { Tooltip, TooltipPosition } from '@patternfly/react-core';
 import {
   CubeIcon,
   CubesIcon,
@@ -119,6 +120,7 @@ const renderClickableDecorator = (
   element: NodePeer,
   quadrant: TopologyQuadrant,
   icon: React.ReactNode,
+  tooltip: string,
   isActive: boolean,
   onClick: (element: NodePeer) => void,
   getShapeDecoratorCenter?: (
@@ -136,16 +138,18 @@ const renderClickableDecorator = (
     : getDefaultShapeDecoratorCenter(quadrant, element);
 
   return (
-    <Decorator
-      x={x}
-      y={y}
-      radius={DEFAULT_DECORATOR_RADIUS}
-      padding={padding}
-      showBackground
-      icon={icon}
-      className={isActive ? 'selected-decorator' : ''}
-      onClick={() => onClick(element)}
-    />
+    <Tooltip content={tooltip} position={TooltipPosition.right}>
+      <Decorator
+        x={x}
+        y={y}
+        radius={DEFAULT_DECORATOR_RADIUS}
+        padding={padding}
+        showBackground
+        icon={icon}
+        className={isActive ? 'selected-decorator' : ''}
+        onClick={() => onClick(element)}
+      />
+    </Tooltip>
   );
 };
 
@@ -214,6 +218,7 @@ const renderDecorators = (
           element,
           TopologyQuadrant.lowerRight,
           <LevelDownAltIcon />,
+          t('Step into this {{name}}', { name: data.resourceKind?.toLowerCase() }),
           false,
           onStepIntoClick,
           getShapeDecoratorCenter,
@@ -225,6 +230,9 @@ const renderDecorators = (
           element,
           TopologyQuadrant.lowerLeft,
           isFiltered ? <TimesIcon /> : <FilterIcon />,
+          isFiltered
+            ? t('Remove {{name}} filter', { name: data.resourceKind?.toLowerCase() })
+            : t('Add {{name}} filter', { name: data.resourceKind?.toLowerCase() }),
           isFiltered,
           onFilterClick,
           getShapeDecoratorCenter,
@@ -235,6 +243,7 @@ const renderDecorators = (
         element,
         TopologyQuadrant.upperRight,
         <ThumbtackIcon />,
+        isPinned ? t('Unpin this element') : t('Pin this element'),
         isPinned,
         onPinClick,
         getShapeDecoratorCenter,