Merge pull request #92 from spotify/rugvip/build-stuff

front/plugins/github-actions: add nicer build status indicator + details view styling

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';
 }>;

frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx

@@ -15,13 +15,23 @@ import {
   makeStyles,
   ButtonGroup,
   Button,
+  Theme,
 } from '@material-ui/core';
+import { RelativeEntityLink } from '@backstage/core';
+import BuildStatusIndicator from '../BuildStatusIndicator';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles<Theme>(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 +57,73 @@ const BuildDetailsPage: FC<Props> = () => {
   const details = status.value;
 
   return (
-    <TableContainer component={Paper} className={classes.root}>
-      <Table>
-        <TableBody>
-          <TableRow>
-            <TableCell>
-              <Typography noWrap>Branch</Typography>
-            </TableCell>
-            <TableCell>{details?.build.branch}</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>
-              <Typography noWrap>Message</Typography>
-            </TableCell>
-            <TableCell>{details?.build.message}</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>
-              <Typography noWrap>Commit ID</Typography>
-            </TableCell>
-            <TableCell>{details?.build.commitId}</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>
-              <Typography noWrap>Status</Typography>
-            </TableCell>
-            <TableCell>{details?.build.status}</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>
-              <Typography noWrap>Author</Typography>
-            </TableCell>
-            <TableCell>{details?.author}</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>
-              <Typography noWrap>Links</Typography>
-            </TableCell>
-            <TableCell>
-              <ButtonGroup
-                variant="text"
-                color="primary"
-                aria-label="text primary button group"
-              >
-                <Button>
-                  <Link href={details?.overviewUrl}>GitHub</Link>
-                </Button>
-                <Button>
-                  <Link href={details?.logUrl}>Logs</Link>
-                </Button>
-              </ButtonGroup>
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    </TableContainer>
+    <div className={classes.root}>
+      <Typography className={classes.title} variant="h3">
+        <RelativeEntityLink view="/builds">
+          <Typography component={'span'} variant="h3" color="primary">
+            &lt;{' '}
+          </Typography>
+        </RelativeEntityLink>
+        Build Details
+      </Typography>
+      <TableContainer component={Paper} className={classes.table}>
+        <Table>
+          <TableBody>
+            <TableRow>
+              <TableCell>
+                <Typography noWrap>Branch</Typography>
+              </TableCell>
+              <TableCell>{details?.build.branch}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <Typography noWrap>Message</Typography>
+              </TableCell>
+              <TableCell>{details?.build.message}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <Typography noWrap>Commit ID</Typography>
+              </TableCell>
+              <TableCell>{details?.build.commitId}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <Typography noWrap>Status</Typography>
+              </TableCell>
+              <TableCell>
+                <BuildStatusIndicator status={details?.build.status} />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <Typography noWrap>Author</Typography>
+              </TableCell>
+              <TableCell>{details?.author}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <Typography noWrap>Links</Typography>
+              </TableCell>
+              <TableCell>
+                <ButtonGroup
+                  variant="text"
+                  color="primary"
+                  aria-label="text primary button group"
+                >
+                  <Button>
+                    <Link href={details?.overviewUrl}>GitHub</Link>
+                  </Button>
+                  <Button>
+                    <Link href={details?.logUrl}>Logs</Link>
+                  </Button>
+                </ButtonGroup>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
   );
 };
 

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<{}> = () => {
             <TableCell>
               <Typography noWrap>Status</Typography>
             </TableCell>
-            <TableCell>{build?.status}</TableCell>
+            <TableCell>
+              <BuildStatusIndicator status={build?.status} />
+            </TableCell>
           </TableRow>
         </TableBody>
       </Table>

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<{}> = () => {
           <TableBody>
             {status.value!.map(build => (
               <TableRow key={build.uri}>
-                {/* TODO: make this an indicating blobby thing */}
-                <TableCell>{build.status}</TableCell>
+                <TableCell>
+                  <BuildStatusIndicator status={build.status} />
+                </TableCell>
                 <TableCell>
                   <Typography>
                     <LongText text={build.branch} max={30} />

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<Theme, StatusStyle>({
+  icon: style => ({
+    color: style.color,
+  }),
+});
+
+const BuildStatusIndicator: FC<Props> = props => {
+  const { status } = props;
+  const style = (status && styles[status]) || styles[BuildStatus.Null];
+
+  const classes = useStyles(style);
+
+  const IconComponent = style.icon;
+
+  return (
+    <div className={classes.icon}>
+      <IconComponent />
+    </div>
+  );
+};
+
+export default BuildStatusIndicator;

frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts

@@ -0,0 +1 @@
+export { default } from './BuildStatusIndicator';