From 126d1a7c6a52ebc8cc74bda4a288699898420f7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ladislav=20Vit=C3=A1sek?= <ladislav.vitasek@gendigital.com>
Date: Tue, 2 May 2023 10:51:30 +0200
Subject: [PATCH 1/4] Logviewer instead of Paper

---
 .../TeamcityLogPage/TeamcityLogPage.tsx       | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/TeamcityLogPage/TeamcityLogPage.tsx b/src/components/TeamcityLogPage/TeamcityLogPage.tsx
index bc34fdd..3d49bc9 100644
--- a/src/components/TeamcityLogPage/TeamcityLogPage.tsx
+++ b/src/components/TeamcityLogPage/TeamcityLogPage.tsx
@@ -4,10 +4,11 @@ import {
   Paper,
   Typography,
 } from '@material-ui/core';
+// @ts-ignore
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { buildLogsRouteRef } from '../../plugin';
-import { Breadcrumbs, Content, Link, Progress } from '@backstage/core-components';
+import { Breadcrumbs, Content, Link, Progress, LogViewer } from '@backstage/core-components';
 import Alert from '@material-ui/lab/Alert';
 import { useApi, configApiRef, useRouteRefParams } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
@@ -21,8 +22,17 @@ const useStyles = makeStyles({
   card: {
     padding: '10px 20px'
   },
+  lineNumber: {
+    display: 'none'
+  },
+  logviewer: {
+    maxHeight: 800,
+    overflow: 'auto',
+    whiteSpace: 'pre'
+  }
 });
 
+
 const TeamcityLogPage = () => {
   const classes = useStyles();
   const { buildName, buildId, buildRunId } = useRouteRefParams(buildLogsRouteRef);
@@ -50,9 +60,13 @@ const TeamcityLogPage = () => {
       </Breadcrumbs>
       <Box m={1} />
       <Card className={classes.card}>
-        <Paper className={classes.paper}>
-          {value}
-        </Paper>
+        // Since the LogViewer uses windowing to avoid rendering all contents at once, the
+        // log is sized automatically to fill the available vertical space. This means
+        // it may often be needed to wrap the LogViewer in a container that provides it
+        // with a fixed amount of space.
+        <div style={{width: '100%', height: '70vh'}}>
+          <LogViewer text={value || ""} />
+        </div>
       </Card>
     </div>
   );

From a33e0746273949e3039d8603ee84e7b4c95758b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrik=20Dvo=C5=99=C3=A1=C4=8Dek?= <patrik@dvoracek.dev>
Date: Tue, 2 May 2023 13:19:24 +0200
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E2=9C=A8=20Remove=20the=20row=20nu?=
 =?UTF-8?q?mber=20from=20LogViewer=20in=20TeamCityLogPage.=20(#1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TeamcityLogPage/TeamcityLogPage.tsx       | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/components/TeamcityLogPage/TeamcityLogPage.tsx b/src/components/TeamcityLogPage/TeamcityLogPage.tsx
index 3d49bc9..8c1a572 100644
--- a/src/components/TeamcityLogPage/TeamcityLogPage.tsx
+++ b/src/components/TeamcityLogPage/TeamcityLogPage.tsx
@@ -1,7 +1,6 @@
 import {
   Box,
   Card,
-  Paper,
   Typography,
 } from '@material-ui/core';
 // @ts-ignore
@@ -14,22 +13,21 @@ import { useApi, configApiRef, useRouteRefParams } from '@backstage/core-plugin-
 import useAsync from 'react-use/lib/useAsync';
 
 const useStyles = makeStyles({
-  paper: {
-    maxHeight: 800,
-    overflow: 'auto',
-    whiteSpace: 'pre'
-  },
   card: {
     padding: '10px 20px'
   },
-  lineNumber: {
-    display: 'none'
+  logPageRoot: {
+    height: '100%'
+  },
+  logViewerWrapper: {
+    width: '100%',
+    height: 'min-content',
+  },
+  logViewer: {
+    '& a[role="row"]': {
+        display: 'none'
+    },
   },
-  logviewer: {
-    maxHeight: 800,
-    overflow: 'auto',
-    whiteSpace: 'pre'
-  }
 });
 
 
@@ -52,7 +50,7 @@ const TeamcityLogPage = () => {
   }
 
   return (
-    <div>
+    <div className={classes.logPageRoot}>
       <Breadcrumbs aria-label="breadcrumb">
         <Link to="../../../../..">Builds</Link>
         <Link to="../..">{buildName} ({buildId})</Link>
@@ -60,12 +58,12 @@ const TeamcityLogPage = () => {
       </Breadcrumbs>
       <Box m={1} />
       <Card className={classes.card}>
-        // Since the LogViewer uses windowing to avoid rendering all contents at once, the
-        // log is sized automatically to fill the available vertical space. This means
-        // it may often be needed to wrap the LogViewer in a container that provides it
-        // with a fixed amount of space.
-        <div style={{width: '100%', height: '70vh'}}>
-          <LogViewer text={value || ""} />
+        {/* Since the LogViewer uses windowing to avoid rendering all contents at once, the
+        log is sized automatically to fill the available vertical space. This means
+        it may often be needed to wrap the LogViewer in a container that provides it
+        with a fixed amount of space. */}
+        <div className={classes.logViewerWrapper}>
+          <LogViewer text={value || ""} classes={{ root: classes.logViewer }} />
         </div>
       </Card>
     </div>
@@ -78,4 +76,4 @@ const Page = () => (
 );
 
 export default Page;
-export { TeamcityLogPage };
\ No newline at end of file
+export { TeamcityLogPage };

From 9226b350ae9277c263e5835cdd8ea9124766f958 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ladislav=20Vit=C3=A1sek?= <ladislav.vitasek@gendigital.com>
Date: Tue, 2 May 2023 13:32:32 +0200
Subject: [PATCH 3/4] CSS styling

---
 .../TeamcityLogPage/TeamcityLogPage.tsx       | 108 ++++++++----------
 1 file changed, 48 insertions(+), 60 deletions(-)

diff --git a/src/components/TeamcityLogPage/TeamcityLogPage.tsx b/src/components/TeamcityLogPage/TeamcityLogPage.tsx
index 8c1a572..9bb1807 100644
--- a/src/components/TeamcityLogPage/TeamcityLogPage.tsx
+++ b/src/components/TeamcityLogPage/TeamcityLogPage.tsx
@@ -1,79 +1,67 @@
-import {
-  Box,
-  Card,
-  Typography,
-} from '@material-ui/core';
-// @ts-ignore
+import {Box, Card, Typography,} from '@material-ui/core';
+
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { buildLogsRouteRef } from '../../plugin';
-import { Breadcrumbs, Content, Link, Progress, LogViewer } from '@backstage/core-components';
+import {makeStyles} from '@material-ui/core/styles';
+import {buildLogsRouteRef} from '../../plugin';
+import {Breadcrumbs, Content, Link, LogViewer, Progress} from '@backstage/core-components';
 import Alert from '@material-ui/lab/Alert';
-import { useApi, configApiRef, useRouteRefParams } from '@backstage/core-plugin-api';
+import {configApiRef, useApi, useRouteRefParams} from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
 
 const useStyles = makeStyles({
-  card: {
-    padding: '10px 20px'
-  },
-  logPageRoot: {
-    height: '100%'
-  },
-  logViewerWrapper: {
-    width: '100%',
-    height: 'min-content',
-  },
-  logViewer: {
-    '& a[role="row"]': {
-        display: 'none'
+    card: {
+        padding: '10px 20px'
+    },
+    // logviewer has enabled line numbers by default, we have to hide them
+    logViewer: {
+        '& a[class*="lineNumber"]': {
+            display: 'none'
+        },
     },
-  },
 });
 
 
 const TeamcityLogPage = () => {
-  const classes = useStyles();
-  const { buildName, buildId, buildRunId } = useRouteRefParams(buildLogsRouteRef);
-  const config = useApi(configApiRef);
-  const { value, loading, error } = useAsync(async (): Promise<string> => {
+    const classes = useStyles();
+    const {buildName, buildId, buildRunId} = useRouteRefParams(buildLogsRouteRef);
+    const config = useApi(configApiRef);
+    const {value, loading, error} = useAsync(async (): Promise<string> => {
     const backendUrl = config.getString('backend.baseUrl');
     const response = await fetch(`${backendUrl}/api/proxy/teamcity-proxy/downloadBuildLog.html?buildId=${buildRunId}`);
-    const data = await response.text();
-
-    return data;
-  }, []);
+        return await response.text();
+    }, []);
 
-  if (loading) {
-    return <Progress />;
-  } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
-  }
+    if (loading) {
+        return <Progress/>;
+    } else if (error) {
+        return <Alert severity="error">{error.message}</Alert>;
+    }
 
-  return (
-    <div className={classes.logPageRoot}>
-      <Breadcrumbs aria-label="breadcrumb">
-        <Link to="../../../../..">Builds</Link>
-        <Link to="../..">{buildName} ({buildId})</Link>
-        <Typography>Logs</Typography>
-      </Breadcrumbs>
-      <Box m={1} />
-      <Card className={classes.card}>
-        {/* Since the LogViewer uses windowing to avoid rendering all contents at once, the
-        log is sized automatically to fill the available vertical space. This means
-        it may often be needed to wrap the LogViewer in a container that provides it
-        with a fixed amount of space. */}
-        <div className={classes.logViewerWrapper}>
-          <LogViewer text={value || ""} classes={{ root: classes.logViewer }} />
-        </div>
-      </Card>
-    </div>
-  );
+    return (
+        <>
+            <Breadcrumbs aria-label="breadcrumb">
+                <Link to="../../../../..">Builds</Link>
+                <Link to="../..">{buildName} ({buildId})</Link>
+                <Typography>Logs</Typography>
+            </Breadcrumbs>
+            <Box m={1}/>
+            <Card className={classes.card}>
+                {/* Since the LogViewer uses windowing to avoid rendering all contents at once, the
+                    log is sized automatically to fill the available vertical space. This means
+                     it may often be needed to wrap the LogViewer in a container that provides it
+                     with a fixed amount of space. */}
+                <div style={{height: '70vh'}}>
+                    <LogViewer text={value || ""} classes={{root: classes.logViewer}}/>
+                </div>
+            </Card>
+        </>
+    )
 };
 const Page = () => (
-  <Content>
-    <TeamcityLogPage />
-  </Content>
+    <Content>
+        <TeamcityLogPage/>
+    </Content>
 );
 
 export default Page;
-export { TeamcityLogPage };
+export {TeamcityLogPage};

From 5bae0bc8ac2a1d683e2cde9818788edec140f36b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ladislav=20Vit=C3=A1sek?= <ladislav.vitasek@gendigital.com>
Date: Tue, 2 May 2023 13:41:06 +0200
Subject: [PATCH 4/4] rollback DIV component

---
 src/components/TeamcityLogPage/TeamcityLogPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TeamcityLogPage/TeamcityLogPage.tsx b/src/components/TeamcityLogPage/TeamcityLogPage.tsx
index 9bb1807..c10dfad 100644
--- a/src/components/TeamcityLogPage/TeamcityLogPage.tsx
+++ b/src/components/TeamcityLogPage/TeamcityLogPage.tsx
@@ -38,7 +38,7 @@ const TeamcityLogPage = () => {
     }
 
     return (
-        <>
+        <div>
             <Breadcrumbs aria-label="breadcrumb">
                 <Link to="../../../../..">Builds</Link>
                 <Link to="../..">{buildName} ({buildId})</Link>
@@ -54,7 +54,7 @@ const TeamcityLogPage = () => {
                     <LogViewer text={value || ""} classes={{root: classes.logViewer}}/>
                 </div>
             </Card>
-        </>
+        </div>
     )
 };
 const Page = () => (