fix(tekton): fix janus-idp#922 and janus-idp#962 by using full width …

…for pipeline visualization (janus-idp#1145) Signed-off-by: Christoph Jerolimov <jerolimov+github@redhat.com>
debsmita1 · Jan 31, 2024 · 1ea9f01 · 1ea9f01
1 parent 0a04992
commit 1ea9f01
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 52 deletions.
diff --git a/plugins/tekton/src/components/PipelineRunList/PipelineRunRow.tsx b/plugins/tekton/src/components/PipelineRunList/PipelineRunRow.tsx
@@ -116,8 +116,8 @@ export const PipelineRunRow = ({
   };
 
   return (
-    <>
-      <TableRow key={uid} className={classes.plrRow}>
+    <React.Fragment key={uid}>
+      <TableRow className={classes.plrRow}>
         <TableCell>
           <IconButton
             aria-label="expand row"
@@ -155,14 +155,14 @@ export const PipelineRunRow = ({
         </TableCell>
       </TableRow>
       <TableRow className={classes.plrVisRow}>
-        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={8}>
           <Collapse in={open} timeout="auto" unmountOnExit>
-            <Box margin={1}>
+            <Box marginTop={1} marginBottom={1}>
               <PipelineRunVisualization pipelineRunName={row.metadata?.name} />
             </Box>
           </Collapse>
         </TableCell>
       </TableRow>
-    </>
+    </React.Fragment>
   );
 };
diff --git a/plugins/tekton/src/components/pipeline-topology/PipelineLayout.tsx b/plugins/tekton/src/components/pipeline-topology/PipelineLayout.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Measure from 'react-measure';
 
 import {
   action,
@@ -43,7 +42,6 @@ type PipelineLayoutProps = {
 
 export const PipelineLayout = ({ model }: PipelineLayoutProps) => {
   const [vis, setVis] = React.useState<Controller | null>(null);
-  const [width, setWidth] = React.useState<number>(0);
   const [maxSize, setMaxSize] = React.useState<{
     height: number;
     width: number;
@@ -173,28 +171,16 @@ export const PipelineLayout = ({ model }: PipelineLayoutProps) => {
   );
 
   return (
-    <Measure
-      bounds
-      onResize={contentRect => {
-        setWidth(contentRect.bounds?.width ?? 0);
+    <div
+      style={{
+        height: Math.min(window.innerHeight, maxSize?.height),
       }}
     >
-      {({ measureRef }) => (
-        <div ref={measureRef}>
-          <div
-            style={{
-              height: Math.min(window.innerHeight, maxSize?.height),
-              width: Math.min(width, maxSize?.width),
-            }}
-          >
-            <VisualizationProvider controller={vis}>
-              <TopologyView controlBar={controlBar(vis)}>
-                <VisualizationSurface />
-              </TopologyView>
-            </VisualizationProvider>
-          </div>
-        </div>
-      )}
-    </Measure>
+      <VisualizationProvider controller={vis}>
+        <TopologyView controlBar={controlBar(vis)}>
+          <VisualizationSurface />
+        </TopologyView>
+      </VisualizationProvider>
+    </div>
   );
 };
diff --git a/plugins/tekton/src/components/pipeline-topology/PipelineVisualizationView.tsx b/plugins/tekton/src/components/pipeline-topology/PipelineVisualizationView.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import { EmptyState, Progress } from '@backstage/core-components';
 
-import { Table, TableBody } from '@material-ui/core';
 import { isEmpty } from 'lodash';
 
 import { TektonResourcesContext } from '../../hooks/TektonResourcesContext';
@@ -35,30 +34,20 @@ export const PipelineVisualizationView = ({
       </div>
     );
 
-  const pipelineRunViz = (
-    <>
-      {loaded && (responseError || isEmpty(pipelineRunResource)) ? (
-        <EmptyState
-          missing="data"
-          description="No Pipeline Run to visualize"
-          title=""
-        />
-      ) : (
-        <PipelineVisualization
-          pipelineRun={pipelineRunResource}
-          taskRuns={watchResourcesData?.taskruns?.data ?? []}
-        />
-      )}
-    </>
-  );
+  if (loaded && (responseError || isEmpty(pipelineRunResource))) {
+    return (
+      <EmptyState
+        missing="data"
+        description="No Pipeline Run to visualize"
+        title=""
+      />
+    );
+  }
 
   return (
-    <Table>
-      <TableBody>
-        <tr>
-          <td>{pipelineRunViz}</td>
-        </tr>
-      </TableBody>
-    </Table>
+    <PipelineVisualization
+      pipelineRun={pipelineRunResource}
+      taskRuns={watchResourcesData?.taskruns?.data ?? []}
+    />
   );
 };