NETOBSERV-1920: slider: switch to abbreviated mode with small screens

Also adds a tooltip with more info

Author: jotak

web/locales/en/plugin__netobserv-plugin.json

@@ -336,6 +336,17 @@
   "Results": "Results",
   "Query summary": "Query summary",
   "Find in view": "Find in view",
+  "Res": "Res",
+  "Base resource, such as a Pod, a Service or a Node": "Base resource, such as a Pod, a Service or a Node",
+  "Own": "Own",
+  "Controller owner, such as a Deployment": "Controller owner, such as a Deployment",
+  "NS": "NS",
+  "Resource namespace": "Resource namespace",
+  "Node on which the resources are running": "Node on which the resources are running",
+  "AZ": "AZ",
+  "Availability zone": "Availability zone",
+  "Cl": "Cl",
+  "Cluster name or identifier": "Cluster name or identifier",
   "Show all graphs": "Show all graphs",
   "Focus on this graph": "Focus on this graph",
   "Show total": "Show total",

web/src/components/slider/scope-slider.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FlowScope } from '../../model/flow-query';
-import { Slider } from './slider';
+import { Slider, SliderStepObject } from './slider';
 
 import './scope-slider.css';
 
@@ -15,23 +15,68 @@ export interface ScopeSliderProps {
 export const ScopeSlider: React.FC<ScopeSliderProps> = ({ scope, setScope, allowedScopes, sizePx }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
 
-  let scopes: [FlowScope, string][] = [
-    ['resource', t('Resource')],
-    ['owner', t('Owner')],
-    ['namespace', t('Namespace')],
-    ['host', t('Node')],
-    ['zone', t('Zone')],
-    ['cluster', t('Cluster')]
-  ];
-  scopes = scopes.filter(s => allowedScopes.includes(s[0]));
-
-  const index = scopes.findIndex(s => s[0] === scope);
   /* TODO: refactor vertical slider
    * In between the display is block to working dimensions managing two cases
    * Non supported dimensions simply hide the slider from the view
    * since we can manage scopes from advanced view
    */
-  const canDisplay = sizePx > 450 && sizePx < 2000;
+  if (sizePx < 250 || sizePx > 2000) {
+    return null;
+  }
+
+  let scopes: [FlowScope, SliderStepObject][] = [
+    [
+      'resource',
+      {
+        value: 0,
+        label: sizePx > 450 ? t('Resource') : t('Res'),
+        tooltip: t('Base resource, such as a Pod, a Service or a Node')
+      }
+    ],
+    [
+      'owner',
+      {
+        value: 1,
+        label: sizePx > 450 ? t('Owner') : t('Own'),
+        tooltip: t('Controller owner, such as a Deployment')
+      }
+    ],
+    [
+      'namespace',
+      {
+        value: 2,
+        label: sizePx > 450 ? t('Namespace') : t('NS'),
+        tooltip: t('Resource namespace')
+      }
+    ],
+    [
+      'host',
+      {
+        value: 3,
+        label: sizePx > 450 ? t('Node') : t('Node'),
+        tooltip: t('Node on which the resources are running')
+      }
+    ],
+    [
+      'zone',
+      {
+        value: 4,
+        label: sizePx > 450 ? t('Zone') : t('AZ'),
+        tooltip: t('Availability zone')
+      }
+    ],
+    [
+      'cluster',
+      {
+        value: 5,
+        label: sizePx > 450 ? t('Cluster') : t('Cl'),
+        tooltip: t('Cluster name or identifier')
+      }
+    ]
+  ];
+  scopes = scopes.filter(s => allowedScopes.includes(s[0]));
+
+  const index = scopes.findIndex(s => s[0] === scope);
   const isBig = sizePx > 700;
   return (
     <div
@@ -42,16 +87,14 @@ export const ScopeSlider: React.FC<ScopeSliderProps> = ({ scope, setScope, allow
         left: -sizePx * (isBig ? 0.38 : 0.28)
       }}
     >
-      {canDisplay && (
-        <Slider
-          value={index < 0 ? 2 : index}
-          showTicks
-          max={scopes.length - 1}
-          customSteps={scopes.map((s, idx) => ({ value: idx, label: s[1] }))}
-          onChange={(value: number) => setScope(scopes[value][0])}
-          vertical
-        />
-      )}
+      <Slider
+        value={index < 0 ? 2 : index}
+        showTicks
+        max={scopes.length - 1}
+        customSteps={scopes.map(s => s[1])}
+        onChange={(value: number) => setScope(scopes[value][0])}
+        vertical
+      />
     </div>
   );
 };

web/src/components/slider/slider.tsx

@@ -15,6 +15,7 @@ export interface SliderStepObject {
   label: string;
   /** Value of the step. This value is a percentage of the slider where the tick is drawn. */
   value: number;
+  tooltip?: string;
 }
 
 /** The main slider component. */
@@ -426,6 +427,19 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
               const maxValue = customSteps[customSteps.length - 1].value;
               const stepValue = getStepValue(stepObj.value, minValue, maxValue);
 
+              if (stepObj.tooltip) {
+                return (
+                  <Tooltip content={stepObj.tooltip}>
+                    <SliderStep
+                      key={stepObj.value}
+                      value={stepValue}
+                      label={stepObj.label}
+                      isLabelHidden={stepObj.isLabelHidden}
+                      isActive={stepObj.value <= localValue}
+                    />
+                  </Tooltip>
+                );
+              }
               return (
                 <SliderStep
                   key={stepObj.value}