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 ( + + + Logs + + + + + +
+ +
+
+
+ ); +};