NETOBSERV-671 UI: Fields / Overview tooltips (#252)

* table fields popover

* overview info

* fix

* addressed feedback

Author: jpinsonneau

web/locales/en/plugin__netobserv-plugin.json

@@ -167,6 +167,7 @@
   "Filter on {{name}}": "Filter on {{name}}",
   "Flow information": "Flow information",
   "Details": "Details",
+  "More info": "More info",
   "Raw": "Raw",
   "JSON": "JSON",
   "Kind not managed": "Kind not managed",
@@ -246,14 +247,35 @@
   "Kubernetes Objects": "Kubernetes Objects",
   "Owner Kubernetes Objects": "Owner Kubernetes Objects",
   "IPs & Ports": "IPs & Ports",
+  "The {{group}} name of the related kubernetes resource.": "The {{group}} name of the related kubernetes resource.",
   "Kind": "Kind",
+  "The {{group}} kind of the related kubernetes resource. Examples:": "The {{group}} kind of the related kubernetes resource. Examples:",
+  "Pod": "Pod",
+  "Service": "Service",
+  "The {{group}} owner name of the related kubernetes resource.": "The {{group}} owner name of the related kubernetes resource.",
   "Owner Kind": "Owner Kind",
+  "The {{group}} owner kind of the related kubernetes resource. Examples:": "The {{group}} owner kind of the related kubernetes resource. Examples:",
+  "Deployment": "Deployment",
+  "StatefulSet": "StatefulSet",
+  "DaemonSet": "DaemonSet",
+  "Job": "Job",
+  "CronJob": "CronJob",
+  "The {{group}} namespace of the related kubernetes resource.": "The {{group}} namespace of the related kubernetes resource.",
+  "The {{group}} IP address. Can be either in IPv4 or IPv6 format.": "The {{group}} IP address. Can be either in IPv4 or IPv6 format.",
   "Port": "Port",
+  "The {{group}} port number.": "The {{group}} port number.",
+  "The {{group}} MAC address.": "The {{group}} MAC address.",
+  "The {{group}} node IP address. Can be either in IPv4 or IPv6 format.": "The {{group}} node IP address. Can be either in IPv4 or IPv6 format.",
+  "The {{group}} name of the node running the workload.": "The {{group}} name of the node running the workload.",
   "Kubernetes Object": "Kubernetes Object",
   "Owner Kubernetes Object": "Owner Kubernetes Object",
   "IP & Port": "IP & Port",
   "Protocol": "Protocol",
+  "The value of the protocol number in the IP packet header": "The value of the protocol number in the IP packet header",
   "Direction": "Direction",
+  "The direction of the Flow observed at the Observation Point.": "The direction of the Flow observed at the Observation Point.",
+  "The total aggregated number of bytes.": "The total aggregated number of bytes.",
+  "The total aggregated number of packets.": "The total aggregated number of packets.",
   "Duration": "Duration",
   "Time elapsed between flow Start Time and End Time.": "Time elapsed between flow Start Time and End Time.",
   "Collection Time": "Collection Time",
@@ -322,13 +344,14 @@
   "Top {{limit}} flow rates stacked": "Top {{limit}} flow rates stacked",
   "bars": "bars",
   "Top {{limit}} flow rates stacked with total": "Top {{limit}} flow rates stacked with total",
+  "The top rates as bar compared to total as line over the selected interval": "The top rates as bar compared to total as line over the selected interval",
   "Top {{limit}} flow rates": "Top {{limit}} flow rates",
   "lines": "lines",
   "Top {{limit}} average rates": "Top {{limit}} average rates",
   "donut": "donut",
-  "This is the average rate over the selected interval": "This is the average rate over the selected interval",
+  "The average rate over the selected interval": "The average rate over the selected interval",
   "Top {{limit}} latest rates": "Top {{limit}} latest rates",
-  "This is the last measured rate from the selected interval": "This is the last measured rate from the selected interval",
+  "The last measured rate from the selected interval": "The last measured rate from the selected interval",
   "Top {{limit}} flows distribution": "Top {{limit}} flows distribution",
   "sankey": "sankey",
   "Total rate": "Total rate",

web/src/components/netflow-record/record-panel.css

@@ -64,5 +64,26 @@ button.borderless-accordion {
 
 #pf-tab-section-details-drawer-tabs,
 #pf-tab-section-raw-drawer-tabs {
-    padding: var(--pf-c-drawer--child--PaddingTop) var(--pf-c-drawer--child--PaddingRight) var(--pf-c-drawer--child--PaddingBottom) var(--pf-c-drawer--child--PaddingLeft);
+  padding: var(--pf-c-drawer--child--PaddingTop) var(--pf-c-drawer--child--PaddingRight) var(--pf-c-drawer--child--PaddingBottom) var(--pf-c-drawer--child--PaddingLeft);
+}
+
+h4.record-field-title,
+button.record-field-title-popover-button {
+  color: inherit !important;
+  font-weight: inherit !important;
+  margin-bottom: 3px !important;
+  padding: 0 !important;
+}
+
+button.record-field-title-popover-button {
+  background-image: linear-gradient(to right, var(--pf-c-button--m-plain--Color) 33%, rgba(255, 255, 255, 0) 0%);
+  background-position: bottom;
+  background-size: 3px 1px;
+  background-repeat: repeat-x;
+}
+
+div.record-field-popover-body,
+div.record-field-popover-footer {
+  white-space: pre-line;
+  word-break: break-word;
 }

web/src/components/netflow-record/record-panel.tsx

@@ -3,6 +3,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionToggle,
+  Button,
   ClipboardCopy,
   ClipboardCopyVariant,
   Divider,
@@ -11,6 +12,7 @@ import {
   DrawerHead,
   DrawerPanelBody,
   DrawerPanelContent,
+  Popover,
   Tab,
   Tabs,
   TabTitleText,
@@ -251,7 +253,30 @@ export const RecordPanel: React.FC<RecordDrawerProps> = ({
                         key={c.id}
                         data-test-id={`drawer-field-${c.id}`}
                       >
-                        <Text component={TextVariants.h4}>{c.name}</Text>
+                        {c.tooltip ? (
+                          <Popover
+                            headerContent={c.name}
+                            bodyContent={<div className="record-field-popover-body">{c.tooltip}</div>}
+                            footerContent={
+                              c.docURL ? (
+                                <div className="record-field-popover-footer">
+                                  {`${t('More info')}: `}
+                                  <a href={c.docURL} target="_blank" rel="noopener noreferrer">
+                                    {c.docURL}
+                                  </a>
+                                </div>
+                              ) : undefined
+                            }
+                          >
+                            <Button variant="plain" className="record-field-title-popover-button">
+                              <Text component={TextVariants.h4}>{c.name}</Text>
+                            </Button>
+                          </Popover>
+                        ) : (
+                          <Text component={TextVariants.h4} className="record-field-title">
+                            {c.name}
+                          </Text>
+                        )}
                         <RecordField flow={record} column={c} filter={getFilter(c)} size={'s'} useLinks={true} />
                       </TextContent>
                     ))}

web/src/components/netflow-table/netflow-table-header.tsx

@@ -193,7 +193,13 @@ export const NetflowTableHeader: React.FC<{
           onDragEnd={clearDragEffects}
           modifier="wrap"
           style={{ width: `${Math.floor((100 * c.width) / tableWidth)}%`, minWidth: columnSizes[c.id] }}
-          info={c.tooltip ? { tooltip: c.tooltip } : undefined}
+          info={
+            [ColumnsId.starttime, ColumnsId.endtime, ColumnsId.collectiontime, ColumnsId.collectionlatency].includes(
+              c.id
+            ) && c.tooltip
+              ? { tooltip: c.tooltip }
+              : undefined
+          }
         >
           {headersState.useNested ? c.name : getFullColumnName(c)}
         </Th>