diff --git a/.changeset/twenty-humans-jog.md b/.changeset/twenty-humans-jog.md
new file mode 100644
index 0000000000..16662d48fd
--- /dev/null
+++ b/.changeset/twenty-humans-jog.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+You can now maximize the logs into full-screen by clicking the button under each step of the job
diff --git a/plugins/scaffolder/src/components/JobStage/JobStage.tsx b/plugins/scaffolder/src/components/JobStage/JobStage.tsx
index 8b3fc04de0..86c2982dde 100644
--- a/plugins/scaffolder/src/components/JobStage/JobStage.tsx
+++ b/plugins/scaffolder/src/components/JobStage/JobStage.tsx
@@ -18,10 +18,12 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
+ AccordionActions,
Box,
CircularProgress,
LinearProgress,
Typography,
+ Button,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -29,6 +31,7 @@ import ExpandLessIcon from '@material-ui/icons/ExpandLess';
import cn from 'classnames';
import moment from 'moment';
import React, { Suspense, useEffect, useState } from 'react';
+import { LogModal } from './LogModal';
import { Job } from '../../types';
const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
@@ -111,6 +114,9 @@ export const JobStage = ({ endedAt, startedAt, name, log, status }: Props) => {
.humanize()
: null;
+ const [logsFullScreen, setLogsFullScreen] = useState(false);
+ const toggleLogsFullScreen = () => setLogsFullScreen(!logsFullScreen);
+
return (
{
) : (
}>
+
-
+
)}
+
+
+
);
};
diff --git a/plugins/scaffolder/src/components/JobStage/LogModal.tsx b/plugins/scaffolder/src/components/JobStage/LogModal.tsx
new file mode 100644
index 0000000000..73b6253510
--- /dev/null
+++ b/plugins/scaffolder/src/components/JobStage/LogModal.tsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import {
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ IconButton,
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Close from '@material-ui/icons/Close';
+import LazyLog from 'react-lazylog/build/LazyLog';
+
+type Props = {
+ log: string[];
+ open?: boolean;
+ onClose(): void;
+};
+
+const useStyles = makeStyles(theme => ({
+ header: {
+ width: '100%',
+ padding: theme.spacing(1, 4),
+ },
+ closeIcon: {
+ float: 'right',
+ padding: theme.spacing(0.5, 0),
+ },
+ logs: {
+ boxShadow: '-3px -1px 7px 0px rgba(50, 50, 50, 0.59)',
+ height: '100%',
+ width: '100%',
+ },
+}));
+
+export const LogModal = ({ log, open = false, onClose }: Props) => {
+ const classes = useStyles();
+
+ return (
+
+ );
+};