Merge pull request #7961 from karthikjeeyar/pipeline-metrics-font

Bug 1921610: fix pipeline metrics font size issue
openshift · Jan 29, 2021 · 62f9de0 · 62f9de0
2 parents 448511e + 701d6f4
commit 62f9de0
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 118 deletions.
diff --git a/.../packages/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineRunCount.tsx b/.../packages/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineRunCount.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Measure from 'react-measure';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { ChartVoronoiContainer } from '@patternfly/react-charts';
@@ -19,7 +20,6 @@ const PipelineRunCount: React.FC<PipelineMetricsGraphProps> = ({
   pipeline,
   timespan,
   interval,
-  width = 650,
   loaded = true,
   onLoad: onInitialLoad,
 }) => {
@@ -53,26 +53,31 @@ const PipelineRunCount: React.FC<PipelineMetricsGraphProps> = ({
   });
   const grouped = _.groupBy(newGraphData[0], (g) => formatDate(g.x));
   const finalArray = _.compact(_.keys(grouped).map((x) => _.maxBy(grouped[x], 'y')));
-
   return (
-    <TimeSeriesChart
-      ariaDesc={t('pipelines-plugin~Pipeline run count chart')}
-      ariaTitle={t('pipelines-plugin~Pipeline run count')}
-      data={finalArray}
-      timespan={timespan}
-      width={width}
-      containerComponent={
-        <ChartVoronoiContainer
-          constrainToVisibleArea
-          labels={({ datum }) =>
-            datum.childName.includes('bar-') && datum.y !== null
-              ? `${formatDate(datum.x)}
+    <Measure bounds>
+      {({ measureRef, contentRect }) => (
+        <div ref={measureRef} style={{ height: DEFAULT_CHART_HEIGHT }}>
+          <TimeSeriesChart
+            ariaDesc={t('pipelines-plugin~Pipeline run count chart')}
+            ariaTitle={t('pipelines-plugin~Pipeline run count')}
+            data={finalArray}
+            timespan={timespan}
+            width={contentRect.bounds.width}
+            containerComponent={
+              <ChartVoronoiContainer
+                constrainToVisibleArea
+                labels={({ datum }) =>
+                  datum.childName.includes('bar-') && datum.y !== null
+                    ? `${formatDate(datum.x)}
               ${datum.y}`
-              : null
-          }
-        />
-      }
-    />
+                    : null
+                }
+              />
+            }
+          />
+        </div>
+      )}
+    </Measure>
   );
 };
 

diff --git a/...s/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineRunDurationGraph.tsx b/...s/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineRunDurationGraph.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Measure from 'react-measure';
 import { useTranslation } from 'react-i18next';
 import { ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
 import { Bullseye, Flex, FlexItem, Grid, GridItem } from '@patternfly/react-core';
@@ -16,7 +17,6 @@ const PipelineRunDurationGraph: React.FC<PipelineMetricsGraphProps> = ({
   pipeline,
   timespan,
   interval,
-  width = 1000,
   loaded = true,
   onLoad: onInitialLoad,
 }) => {
@@ -83,28 +83,34 @@ const PipelineRunDurationGraph: React.FC<PipelineMetricsGraphProps> = ({
         </Bullseye>
       </GridItem>
       <GridItem span={9}>
-        <LineChart
-          ariaDesc={t('pipelines-plugin~Pipeline run duration chart')}
-          ariaTitle={t('pipelines-plugin~Pipeline run duration')}
-          data={[finalArray.duration]}
-          themeColor={ChartThemeColor.green}
-          yTickFormatter={(seconds) => `${Math.floor(seconds / 60)}m`}
-          width={(width * 70) / 100}
-          height={chartHeight}
-          containerComponent={
-            <ChartVoronoiContainer
-              voronoiPadding={{ bottom: 75 } as any}
-              constrainToVisibleArea
-              activateData={false}
-              labels={({ datum }) =>
-                datum.childName.includes('line-') && datum.y !== null
-                  ? `${datum?.metric?.pipelinerun} 
+        <Measure bounds>
+          {({ measureRef, contentRect }) => (
+            <div ref={measureRef}>
+              <LineChart
+                ariaDesc={t('pipelines-plugin~Pipeline run duration chart')}
+                ariaTitle={t('pipelines-plugin~Pipeline run duration')}
+                data={[finalArray.duration]}
+                themeColor={ChartThemeColor.green}
+                yTickFormatter={(seconds) => `${Math.floor(seconds / 60)}m`}
+                width={contentRect.bounds.width}
+                height={chartHeight}
+                containerComponent={
+                  <ChartVoronoiContainer
+                    voronoiPadding={{ bottom: 75 } as any}
+                    constrainToVisibleArea
+                    activateData={false}
+                    labels={({ datum }) =>
+                      datum.childName.includes('line-') && datum.y !== null
+                        ? `${datum?.metric?.pipelinerun} 
               ${datum?.time}`
-                  : null
-              }
-            />
-          }
-        />
+                        : null
+                    }
+                  />
+                }
+              />
+            </div>
+          )}
+        </Measure>
       </GridItem>
     </Grid>
   );

diff --git a/...es/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineRunTaskRunGraph.tsx b/...es/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineRunTaskRunGraph.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Measure from 'react-measure';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { DEFAULT_CHART_HEIGHT, DEFAULT_LEGEND_CHART_HEIGHT } from '../const';
@@ -26,7 +27,6 @@ const PipelineRunTaskRunGraph: React.FC<PipelineMetricsGraphProps> = ({
   pipeline,
   timespan,
   interval,
-  width = 650,
   loaded = true,
   onLoad: onInitialLoad,
 }) => {
@@ -115,43 +115,47 @@ const PipelineRunTaskRunGraph: React.FC<PipelineMetricsGraphProps> = ({
       onLegendClick: handleLegendClick,
     });
   return (
-    <>
-      <LineChart
-        ariaDesc={t('pipelines-plugin~Pipeline task run duration chart')}
-        ariaTitle={t('pipelines-plugin~Task run duration')}
-        data={_.values(finalObj)}
-        yTickFormatter={(seconds) => getYaxisValues(seconds)}
-        events={getEvents()}
-        hiddenSeries={hiddenSeries}
-        tickValues={tickValues}
-        width={width}
-        height={chartHeight}
-        legendPosition="bottom-left"
-        legendComponent={
-          <ChartLegend
-            gutter={25}
-            y={DEFAULT_CHART_HEIGHT + 75}
-            itemsPerRow={4}
-            name="legend"
-            data={getLegendData()}
-          />
-        }
-        containerComponent={
-          <ChartVoronoiContainer
-            constrainToVisibleArea
-            activateData={false}
-            voronoiPadding={{ bottom: 75 } as any}
-            labels={({ datum }) =>
-              datum.childName.includes('line-') && datum.y !== null
-                ? `${datum?.metric?.pipelinerun}
+    <Measure bounds>
+      {({ measureRef, contentRect }) => (
+        <div ref={measureRef}>
+          <LineChart
+            ariaDesc={t('pipelines-plugin~Pipeline task run duration chart')}
+            ariaTitle={t('pipelines-plugin~Task run duration')}
+            data={_.values(finalObj)}
+            yTickFormatter={(seconds) => getYaxisValues(seconds)}
+            events={getEvents()}
+            hiddenSeries={hiddenSeries}
+            tickValues={tickValues}
+            width={contentRect.bounds.width}
+            height={chartHeight}
+            legendPosition="bottom-left"
+            legendComponent={
+              <ChartLegend
+                gutter={25}
+                y={DEFAULT_CHART_HEIGHT + 75}
+                itemsPerRow={4}
+                name="legend"
+                data={getLegendData()}
+              />
+            }
+            containerComponent={
+              <ChartVoronoiContainer
+                constrainToVisibleArea
+                activateData={false}
+                voronoiPadding={{ bottom: 75 } as any}
+                labels={({ datum }) =>
+                  datum.childName.includes('line-') && datum.y !== null
+                    ? `${datum?.metric?.pipelinerun}
                 ${getCustomTaskName(datum?.metric?.task)}
             ${formatDuration(datum?.y * 1000)}`
-                : null
+                    : null
+                }
+              />
             }
           />
-        }
-      />
-    </>
+        </div>
+      )}
+    </Measure>
   );
 };
 

diff --git a/.../pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineSuccessRatioDonut.tsx b/.../pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineSuccessRatioDonut.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Measure from 'react-measure';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { ChartVoronoiContainer } from '@patternfly/react-charts';
@@ -21,7 +22,6 @@ const PipelineSuccessRatioDonut: React.FC<PipelineMetricsGraphProps> = ({
   pipeline,
   timespan,
   interval,
-  width = 1000,
   loaded = true,
   onLoad: onInitialLoad,
 }) => {
@@ -99,46 +99,53 @@ const PipelineSuccessRatioDonut: React.FC<PipelineMetricsGraphProps> = ({
   const successData = _.sortBy(finalArray, 'sortOrder');
   return (
     <Grid hasGutter>
-      <GridItem span={3}>
-        <SuccessRatioDonut
-          data={successData}
-          successValue={successValue}
-          width={(width * 30) / 100}
-          ariaDesc={t('pipelines-plugin~Pipeline success ratio chart')}
-          ariaTitle={t('pipelines-plugin~Pipeline success ratio')}
-          subTitle={
-            successData
-              ? t('pipelines-plugin~{{successValue}} of {{totalValue}} succeeded', {
-                  successValue,
-                  totalValue,
-                })
-              : ''
-          }
-          title={successData.length ? `${((successValue * 100) / totalValue).toFixed(1)}%` : ''}
-        />
+      <GridItem xl2={3} xl={3} lg={3} md={3} sm={3}>
+        <div style={{ height: DEFAULT_CHART_HEIGHT }}>
+          <SuccessRatioDonut
+            data={successData}
+            successValue={successValue}
+            ariaDesc={t('pipelines-plugin~Pipeline success ratio chart')}
+            ariaTitle={t('pipelines-plugin~Pipeline success ratio')}
+            subTitle={
+              successData
+                ? t('pipelines-plugin~{{successValue}} of {{totalValue}} succeeded', {
+                    successValue,
+                    totalValue,
+                  })
+                : ''
+            }
+            title={successData.length ? `${((successValue * 100) / totalValue).toFixed(1)}%` : ''}
+          />
+        </div>
       </GridItem>
-      <GridItem span={9}>
-        <TimeSeriesChart
-          ariaDesc={t('pipelines-plugin~Pipeline success chart')}
-          ariaTitle={t('pipelines-plugin~Pipeline success per day')}
-          data={Object.values(successTimeSeriesObj) ?? []}
-          bar={false}
-          domain={{ y: [0, 100] }}
-          yTickFormatter={(v) => `${v}%`}
-          timespan={timespan}
-          width={(width * 70) / 100}
-          containerComponent={
-            <ChartVoronoiContainer
-              constrainToVisibleArea
-              labels={({ datum }) =>
-                datum.childName.includes('line-') && datum.y !== null
-                  ? `${formatDate(datum.x)} 
+      <GridItem xl2={9} xl={9} lg={9} md={9} sm={9}>
+        <Measure bounds>
+          {({ measureRef, contentRect }) => (
+            <div ref={measureRef} style={{ height: DEFAULT_CHART_HEIGHT }}>
+              <TimeSeriesChart
+                ariaDesc={t('pipelines-plugin~Pipeline success chart')}
+                ariaTitle={t('pipelines-plugin~Pipeline success per day')}
+                data={Object.values(successTimeSeriesObj) ?? []}
+                bar={false}
+                domain={{ y: [0, 100] }}
+                yTickFormatter={(v) => `${v}%`}
+                timespan={timespan}
+                width={contentRect.bounds.width}
+                containerComponent={
+                  <ChartVoronoiContainer
+                    constrainToVisibleArea
+                    labels={({ datum }) =>
+                      datum.childName.includes('line-') && datum.y !== null
+                        ? `${formatDate(datum.x)} 
               ${datum?.y}%`
-                  : null
-              }
-            />
-          }
-        />
+                        : null
+                    }
+                  />
+                }
+              />
+            </div>
+          )}
+        </Measure>
       </GridItem>
     </Grid>
   );

diff --git a/...ines-plugin/src/components/pipelines/pipeline-metrics/__tests__/PipelineRunCount.spec.tsx b/...ines-plugin/src/components/pipelines/pipeline-metrics/__tests__/PipelineRunCount.spec.tsx
@@ -58,6 +58,13 @@ describe('Pipeline Run Count Graph', () => {
   it('Should render an TimeSeriesChart if data is available', () => {
     pipelineRunSpy.mockReturnValue([{ data: { result: [{ x: 'x' }] } }, false, false]);
     const PipelineRunCountWrapper = shallow(<PipelineRunCount {...PipelineRunCountProps} />);
-    expect(PipelineRunCountWrapper.find(TimeSeriesChart).exists()).toBe(true);
+    expect(PipelineRunCountWrapper.find(LoadingInline).exists()).toBe(false);
+    expect(PipelineRunCountWrapper.find(GraphEmpty).exists()).toBe(false);
+    expect(
+      PipelineRunCountWrapper.dive()
+        .dive()
+        .find(TimeSeriesChart)
+        .exists(),
+    ).toBe(true);
   });
 });
diff --git a/...s-plugin/src/components/pipelines/pipeline-metrics/__tests__/PipelineRunDuration.spec.tsx b/...s-plugin/src/components/pipelines/pipeline-metrics/__tests__/PipelineRunDuration.spec.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Measure from 'react-measure';
 import { shallow } from 'enzyme';
 import { GraphEmpty } from '@console/internal/components/graphs/graph-empty';
 import { DEFAULT_PROMETHEUS_TIMESPAN } from '@console/internal/components/graphs';
@@ -76,6 +77,14 @@ describe('Pipeline Run Duration Graph', () => {
     const PipelineRunDurationGraphWrapper = shallow(
       <PipelineRunDurationGraph {...PipelineRunDurationGraphProps} />,
     );
-    expect(PipelineRunDurationGraphWrapper.find(LineChart).exists()).toBe(true);
+    expect(PipelineRunDurationGraphWrapper.find(LoadingInline).exists()).toBe(false);
+    expect(PipelineRunDurationGraphWrapper.find(GraphEmpty).exists()).toBe(false);
+    expect(
+      PipelineRunDurationGraphWrapper.find(Measure)
+        .dive()
+        .dive()
+        .find(LineChart)
+        .exists(),
+    ).toBe(true);
   });
 });
diff --git a/...ugin/src/components/pipelines/pipeline-metrics/__tests__/PipelineRunTaskRunGraph.spec.tsx b/...ugin/src/components/pipelines/pipeline-metrics/__tests__/PipelineRunTaskRunGraph.spec.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Measure from 'react-measure';
 import { shallow } from 'enzyme';
 import { GraphEmpty } from '@console/internal/components/graphs/graph-empty';
 import { DEFAULT_PROMETHEUS_TIMESPAN } from '@console/internal/components/graphs';
@@ -72,6 +73,14 @@ describe('TaskRun Duration Graph', () => {
     const PipelineRunTaskRunGraphWrapper = shallow(
       <PipelineRunTaskRunGraph {...PipelineRunTaskRunGraphProps} />,
     );
-    expect(PipelineRunTaskRunGraphWrapper.find(LineChart).exists()).toBe(true);
+    expect(PipelineRunTaskRunGraphWrapper.find(LoadingInline).exists()).toBe(false);
+    expect(PipelineRunTaskRunGraphWrapper.find(GraphEmpty).exists()).toBe(false);
+    expect(
+      PipelineRunTaskRunGraphWrapper.find(Measure)
+        .dive()
+        .dive()
+        .find(LineChart)
+        .exists(),
+    ).toBe(true);
   });
 });