fix scrolling for graph tabs

Author: JeanMarcMilletScality

ui/src/components/VolumeMetricsTab.tsx

@@ -39,29 +39,26 @@ const MetricsTab = (props) => {
     <>
       {volumeCondition === VOLUME_CONDITION_LINK ? (
         <ChartLegendWrapper colorSet={createColorSet}>
+          <MetricsActionContainer>
+            {config.api?.url_grafana && volumeNamespace && volumePVCName && (
+              <a
+                href={`${config.api.url_grafana}/d/${GRAFANA_DASHBOARDS.volumes}?var-namespace=${volumeNamespace}&var-volume=${volumePVCName}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                data-cy="advanced_metrics_volume_detailed"
+              >
+                <Button
+                  label={intl.formatMessage({
+                    id: 'advanced_metrics',
+                  })}
+                  variant={'secondary'}
+                  icon={<Icon name="External-link" />}
+                />
+              </a>
+            )}
+            {volumeCondition === VOLUME_CONDITION_LINK && <TimespanSelector />}
+          </MetricsActionContainer>
           <ChartContainer>
-            <MetricsActionContainer>
-              {config.api?.url_grafana && volumeNamespace && volumePVCName && (
-                <a
-                  href={`${config.api.url_grafana}/d/${GRAFANA_DASHBOARDS.volumes}?var-namespace=${volumeNamespace}&var-volume=${volumePVCName}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  data-cy="advanced_metrics_volume_detailed"
-                >
-                  <Button
-                    label={intl.formatMessage({
-                      id: 'advanced_metrics',
-                    })}
-                    variant={'secondary'}
-                    icon={<Icon name="External-link" />}
-                  />
-                </a>
-              )}
-              {volumeCondition === VOLUME_CONDITION_LINK && (
-                <TimespanSelector />
-              )}
-            </MetricsActionContainer>
-
             <GraphGrid id="graph_container">
               <VolumeUsageChart
                 pvcName={volumePVCName}

ui/src/containers/NodePageMetricsTab.tsx

@@ -51,6 +51,7 @@ export const ChartContainer = styled.div`
   /* 100% - padding - action container height */
   height: calc(100% - 3rem);
   padding-left: ${spacing.r12};
+  overflow: hidden auto;
 `;
 export const GraphGrid = styled.div`
   display: grid;