front/plugins/github-actions: register build info card and popuplate card

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

@@ -1,8 +1,87 @@
 import React, { FC } from 'react';
-import { InfoCard } from '@backstage/core';
+import { RelativeEntityLink } from '@backstage/core';
+import { BuildsClient } from '../../apis/builds';
+import { useAsync } from 'react-use';
+import {
+  Typography,
+  Table,
+  TableBody,
+  TableRow,
+  TableCell,
+  LinearProgress,
+  makeStyles,
+  Theme,
+} from '@material-ui/core';
+
+const client = BuildsClient.create('http://localhost:8080');
+
+const useStyles = makeStyles<Theme>(theme => ({
+  root: {
+    // height: 400,
+  },
+  title: {
+    paddingBottom: theme.spacing(1),
+  },
+}));
 
 const BuildInfoCard: FC<{}> = () => {
-  return <InfoCard>Last build was acb67fa3b5472w</InfoCard>;
+  const classes = useStyles();
+  const status = useAsync(() => client.listBuilds('entity:spotify:backstage'));
+
+  let content: JSX.Element;
+
+  if (status.loading) {
+    content = <LinearProgress />;
+  } else if (status.error) {
+    content = (
+      <Typography variant="h2" color="error">
+        Failed to load builds, {status.error.message}
+      </Typography>
+    );
+  } else {
+    const [build] =
+      status.value?.filter(({ branch }) => branch === 'master') ?? [];
+
+    content = (
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <Typography noWrap>Message</Typography>
+            </TableCell>
+            <TableCell>
+              <RelativeEntityLink
+                view={`builds/${encodeURIComponent(build?.uri || '')}`}
+              >
+                <Typography color="primary">{build?.message}</Typography>
+              </RelativeEntityLink>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Typography noWrap>Commit ID</Typography>
+            </TableCell>
+            <TableCell>{build?.commitId}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Typography noWrap>Status</Typography>
+            </TableCell>
+            <TableCell>{build?.status}</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+  }
+
+  return (
+    <div className={classes.root}>
+      <Typography variant="h2" className={classes.title}>
+        Master Build
+      </Typography>
+      {content}
+    </div>
+  );
 };
 
 export default BuildInfoCard;

frontend/packages/plugins/github-actions/src/plugin.ts

@@ -2,6 +2,7 @@ import { createPlugin } from '@backstage/core';
 import BuildDetailsPage from './components/BuildDetailsPage';
 import BuildListPage from './components/BuildListPage';
 import BuildIcon from '@material-ui/icons/Build';
+import BuildInfoCard from './components/BuildInfoCard';
 
 // export const buildListRoute = createEntityRoute<[]>('/builds')
 // export const buildDetailsRoute = createEntityRoute<[number]>('/builds/:buildId')
@@ -9,9 +10,10 @@ import BuildIcon from '@material-ui/icons/Build';
 export default createPlugin({
   id: 'github-actions',
 
-  register({ entityPage }) {
+  register({ entityPage, widgets }) {
     entityPage.navItem({ title: 'CI/CD', icon: BuildIcon, target: '/builds' });
     entityPage.route('/builds', BuildListPage);
     entityPage.route('/builds/:buildUri', BuildDetailsPage);
+    widgets.add({ size: 8, component: BuildInfoCard });
   },
 });