From f57b897dd0dcde395f001869335aa85027fbecf2 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 7 Feb 2020 14:14:17 +0100 Subject: [PATCH 1/2] front/plugins/github-actions: add back button to details page --- .../BuildDetailsPage/BuildDetailsPage.tsx | 133 ++++++++++-------- 1 file changed, 76 insertions(+), 57 deletions(-) diff --git a/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx b/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx index 51a693ce31..f66fc16927 100644 --- a/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx +++ b/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx @@ -15,13 +15,22 @@ import { makeStyles, ButtonGroup, Button, + Theme, } from '@material-ui/core'; +import { RelativeEntityLink } from '@backstage/core'; -const useStyles = makeStyles({ +const useStyles = makeStyles(theme => ({ root: { maxWidth: 720, + margin: theme.spacing(2), }, -}); + title: { + padding: theme.spacing(1, 0, 2, 0), + }, + table: { + padding: theme.spacing(1), + }, +})); type Props = {}; @@ -47,61 +56,71 @@ const BuildDetailsPage: FC = () => { const details = status.value; return ( - - - - - - Branch - - {details?.build.branch} - - - - Message - - {details?.build.message} - - - - Commit ID - - {details?.build.commitId} - - - - Status - - {details?.build.status} - - - - Author - - {details?.author} - - - - Links - - - - - - - - - -
- +
+ + + + <{' '} + + + Build Details + + + + + + + Branch + + {details?.build.branch} + + + + Message + + {details?.build.message} + + + + Commit ID + + {details?.build.commitId} + + + + Status + + {details?.build.status} + + + + Author + + {details?.author} + + + + Links + + + + + + + + + +
+ +
); }; From 7234da7cd998aa290330ff90efc7a90c8a2b43c3 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 7 Feb 2020 14:14:42 +0100 Subject: [PATCH 2/2] front/plugins/github-actions: add nicer build status indicator --- frontend/packages/core/src/api/types.ts | 2 +- .../BuildDetailsPage/BuildDetailsPage.tsx | 5 +- .../BuildInfoCard/BuildInfoCard.tsx | 5 +- .../BuildListPage/BuildListPage.tsx | 6 +- .../BuildStatusIndicator.tsx | 63 +++++++++++++++++++ .../components/BuildStatusIndicator/index.ts | 1 + 6 files changed, 77 insertions(+), 5 deletions(-) create mode 100644 frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/BuildStatusIndicator.tsx create mode 100644 frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts diff --git a/frontend/packages/core/src/api/types.ts b/frontend/packages/core/src/api/types.ts index 8462a5a1b9..730d237f38 100644 --- a/frontend/packages/core/src/api/types.ts +++ b/frontend/packages/core/src/api/types.ts @@ -1,5 +1,5 @@ import { ComponentType } from 'react'; export type IconComponent = ComponentType<{ - fontSize: 'inherit' | 'default' | 'small' | 'large'; + fontSize?: 'inherit' | 'default' | 'small' | 'large'; }>; diff --git a/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx b/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx index f66fc16927..b21cbab658 100644 --- a/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx +++ b/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx @@ -18,6 +18,7 @@ import { Theme, } from '@material-ui/core'; import { RelativeEntityLink } from '@backstage/core'; +import BuildStatusIndicator from '../BuildStatusIndicator'; const useStyles = makeStyles(theme => ({ root: { @@ -90,7 +91,9 @@ const BuildDetailsPage: FC = () => { Status - {details?.build.status} + + + diff --git a/frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx b/frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx index 823b43a21a..88875c8dcf 100644 --- a/frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx +++ b/frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx @@ -12,6 +12,7 @@ import { makeStyles, Theme, } from '@material-ui/core'; +import BuildStatusIndicator from '../BuildStatusIndicator'; const client = BuildsClient.create('http://localhost:8080'); @@ -67,7 +68,9 @@ const BuildInfoCard: FC<{}> = () => { Status - {build?.status} + + + diff --git a/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx b/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx index 47dfb2e8d9..4f2f32d0b6 100644 --- a/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx +++ b/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx @@ -16,6 +16,7 @@ import { import { RelativeEntityLink } from '@backstage/core'; import { BuildsClient } from '../../apis/builds'; import { useAsync } from 'react-use'; +import BuildStatusIndicator from '../BuildStatusIndicator'; const client = BuildsClient.create('http://localhost:8080'); @@ -68,8 +69,9 @@ const BuildListPage: FC<{}> = () => { {status.value!.map(build => ( - {/* TODO: make this an indicating blobby thing */} - {build.status} + + + diff --git a/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/BuildStatusIndicator.tsx b/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/BuildStatusIndicator.tsx new file mode 100644 index 0000000000..642eac350e --- /dev/null +++ b/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/BuildStatusIndicator.tsx @@ -0,0 +1,63 @@ +import React, { FC } from 'react'; +import { makeStyles, Theme } from '@material-ui/core'; +import { BuildStatus } from '../../apis/builds'; +import FailureIcon from '@material-ui/icons/Error'; +import SuccessIcon from '@material-ui/icons/CheckCircle'; +import ProgressIcon from '@material-ui/icons/Autorenew'; +import UnknownIcon from '@material-ui/icons/Help'; +import { IconComponent } from '@backstage/core'; + +type Props = { + status?: BuildStatus; +}; + +type StatusStyle = { + icon: IconComponent; + color: string; +}; + +const styles: { [key in BuildStatus]: StatusStyle } = { + [BuildStatus.Null]: { + icon: UnknownIcon, + color: '#f49b20', + }, + [BuildStatus.Success]: { + icon: SuccessIcon, + color: '#1db855', + }, + [BuildStatus.Failure]: { + icon: FailureIcon, + color: '#CA001B', + }, + [BuildStatus.Pending]: { + icon: UnknownIcon, + color: '#5BC0DE', + }, + [BuildStatus.Running]: { + icon: ProgressIcon, + color: '#BEBEBE', + }, +}; + +const useStyles = makeStyles({ + icon: style => ({ + color: style.color, + }), +}); + +const BuildStatusIndicator: FC = props => { + const { status } = props; + const style = (status && styles[status]) || styles[BuildStatus.Null]; + + const classes = useStyles(style); + + const IconComponent = style.icon; + + return ( +
+ +
+ ); +}; + +export default BuildStatusIndicator; diff --git a/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts b/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts new file mode 100644 index 0000000000..de5992cc40 --- /dev/null +++ b/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts @@ -0,0 +1 @@ +export { default } from './BuildStatusIndicator';