From cc59b3ff0c6523e7b68e93e047ae17d988d164d9 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Fri, 30 Oct 2020 10:42:05 +0530 Subject: [PATCH 1/6] feat: scaffolder full screen logs --- .../src/components/JobStage/JobStage.tsx | 16 ++++++- .../src/components/JobStage/LogModal.tsx | 48 +++++++++++++++++++ 2 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 plugins/scaffolder/src/components/JobStage/LogModal.tsx diff --git a/plugins/scaffolder/src/components/JobStage/JobStage.tsx b/plugins/scaffolder/src/components/JobStage/JobStage.tsx index 5128a761ec..68a9e8ead8 100644 --- a/plugins/scaffolder/src/components/JobStage/JobStage.tsx +++ b/plugins/scaffolder/src/components/JobStage/JobStage.tsx @@ -1,3 +1,5 @@ +/* eslint-disable jsx-a11y/click-events-have-key-events */ +/* eslint-disable jsx-a11y/no-static-element-interactions */ /* * Copyright 2020 Spotify AB * @@ -31,6 +33,7 @@ import moment from 'moment'; import React, { Suspense, useEffect, useState } from 'react'; import { Job } from '../../types'; +const LogModal = React.lazy(() => import('./LogModal')); const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog')); moment.relativeTimeThreshold('ss', 0); @@ -99,6 +102,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..0eefad9b04 --- /dev/null +++ b/plugins/scaffolder/src/components/JobStage/LogModal.tsx @@ -0,0 +1,48 @@ +/* + * 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 Close from '@material-ui/icons/Close'; +import LazyLog from 'react-lazylog/build/LazyLog'; + +type Props = { + log: string[]; + open?: boolean; + onClose(): void; +}; + +export const LogModal: React.FC = ({ log, open = false, onClose }) => ( + + + Logs + + + + + +
+ +
+ + +); + +export default LogModal; From 7ce1d4950a6cfeef7ec5300f80bfa18e4c72f113 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Mon, 2 Nov 2020 22:13:07 +0530 Subject: [PATCH 2/6] chore: update UI --- .../src/components/JobStage/JobStage.tsx | 6 ++- .../src/components/JobStage/LogModal.tsx | 50 +++++++++++++------ 2 files changed, 40 insertions(+), 16 deletions(-) diff --git a/plugins/scaffolder/src/components/JobStage/JobStage.tsx b/plugins/scaffolder/src/components/JobStage/JobStage.tsx index 68a9e8ead8..a73b434cd5 100644 --- a/plugins/scaffolder/src/components/JobStage/JobStage.tsx +++ b/plugins/scaffolder/src/components/JobStage/JobStage.tsx @@ -145,7 +145,11 @@ export const JobStage = ({ endedAt, startedAt, name, log, status }: Props) => { style={{ height: '20vh', width: '100%' }} onClick={toggleLogsFullScreen} > - +
)} diff --git a/plugins/scaffolder/src/components/JobStage/LogModal.tsx b/plugins/scaffolder/src/components/JobStage/LogModal.tsx index 0eefad9b04..6c6c5b4ffd 100644 --- a/plugins/scaffolder/src/components/JobStage/LogModal.tsx +++ b/plugins/scaffolder/src/components/JobStage/LogModal.tsx @@ -20,6 +20,7 @@ import { 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'; @@ -29,20 +30,39 @@ type Props = { onClose(): void; }; -export const LogModal: React.FC = ({ log, open = false, onClose }) => ( - - - Logs - - - - - -
- -
- - -); +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: React.FC = ({ log, open = false, onClose }) => { + const classes = useStyles(); + + return ( + + + Logs + + + + + +
+ +
+ + + ); +}; export default LogModal; From 595698414e2d024061a9710ccac18c0339029adb Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 5 Jan 2021 16:34:09 +0100 Subject: [PATCH 3/6] chore: fixing code review comments. settled for a simpler button instead in an actions wrapper --- .../src/components/JobStage/JobStage.tsx | 20 +++++++++---------- .../src/components/JobStage/LogModal.tsx | 10 +++++++++- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/plugins/scaffolder/src/components/JobStage/JobStage.tsx b/plugins/scaffolder/src/components/JobStage/JobStage.tsx index 398595a274..53ceffc87d 100644 --- a/plugins/scaffolder/src/components/JobStage/JobStage.tsx +++ b/plugins/scaffolder/src/components/JobStage/JobStage.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ /* * Copyright 2020 Spotify AB * @@ -20,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'; @@ -153,19 +153,17 @@ export const JobStage = ({ endedAt, startedAt, name, log, status }: Props) => { onClose={toggleLogsFullScreen} log={log} /> -
- +
+
)} + + + ); }; diff --git a/plugins/scaffolder/src/components/JobStage/LogModal.tsx b/plugins/scaffolder/src/components/JobStage/LogModal.tsx index 6c6c5b4ffd..8c2d757ade 100644 --- a/plugins/scaffolder/src/components/JobStage/LogModal.tsx +++ b/plugins/scaffolder/src/components/JobStage/LogModal.tsx @@ -46,7 +46,15 @@ const useStyles = makeStyles(theme => ({ }, })); -export const LogModal: React.FC = ({ log, open = false, onClose }) => { +export const LogModal = ({ + log, + open = false, + onClose, +}: { + log: string[]; + open: boolean; + onClose: () => void; +}) => { const classes = useStyles(); return ( From 947d3c269441cd7cd04db8b06b378b928ad23c09 Mon Sep 17 00:00:00 2001 From: Ben Lambert Date: Tue, 5 Jan 2021 16:36:54 +0100 Subject: [PATCH 4/6] Create twenty-humans-jog.md --- .changeset/twenty-humans-jog.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/twenty-humans-jog.md diff --git a/.changeset/twenty-humans-jog.md b/.changeset/twenty-humans-jog.md new file mode 100644 index 0000000000..8aef0c5fca --- /dev/null +++ b/.changeset/twenty-humans-jog.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder': patch +--- + +You can now maximize the logs into fullscreen by clicking the button under each step of the job From 5b31d0cedcb3b1472aa31edd6fc7e7f1a2b98bfa Mon Sep 17 00:00:00 2001 From: Ben Lambert Date: Tue, 5 Jan 2021 16:39:34 +0100 Subject: [PATCH 5/6] Update twenty-humans-jog.md --- .changeset/twenty-humans-jog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/twenty-humans-jog.md b/.changeset/twenty-humans-jog.md index 8aef0c5fca..16662d48fd 100644 --- a/.changeset/twenty-humans-jog.md +++ b/.changeset/twenty-humans-jog.md @@ -2,4 +2,4 @@ '@backstage/plugin-scaffolder': patch --- -You can now maximize the logs into fullscreen by clicking the button under each step of the job +You can now maximize the logs into full-screen by clicking the button under each step of the job From 4925d4e768b4eb79f9bcb2e39fe81847dd7cb6a1 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 5 Jan 2021 16:50:54 +0100 Subject: [PATCH 6/6] chore: tidy up some smaller parts of the modal to align with the ADR --- .../scaffolder/src/components/JobStage/JobStage.tsx | 2 +- .../scaffolder/src/components/JobStage/LogModal.tsx | 11 +---------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/plugins/scaffolder/src/components/JobStage/JobStage.tsx b/plugins/scaffolder/src/components/JobStage/JobStage.tsx index 53ceffc87d..86c2982dde 100644 --- a/plugins/scaffolder/src/components/JobStage/JobStage.tsx +++ b/plugins/scaffolder/src/components/JobStage/JobStage.tsx @@ -31,9 +31,9 @@ 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 LogModal = React.lazy(() => import('./LogModal')); const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog')); moment.relativeTimeThreshold('ss', 0); diff --git a/plugins/scaffolder/src/components/JobStage/LogModal.tsx b/plugins/scaffolder/src/components/JobStage/LogModal.tsx index 8c2d757ade..73b6253510 100644 --- a/plugins/scaffolder/src/components/JobStage/LogModal.tsx +++ b/plugins/scaffolder/src/components/JobStage/LogModal.tsx @@ -46,15 +46,7 @@ const useStyles = makeStyles(theme => ({ }, })); -export const LogModal = ({ - log, - open = false, - onClose, -}: { - log: string[]; - open: boolean; - onClose: () => void; -}) => { +export const LogModal = ({ log, open = false, onClose }: Props) => { const classes = useStyles(); return ( @@ -73,4 +65,3 @@ export const LogModal = ({ ); }; -export default LogModal;