Add detailed view page with a list of build steps

plugins/circleci/src/api/index.ts

@@ -104,4 +104,8 @@ export class CircleCIApi {
   async getUser() {
     return this.api.me();
   }
+
+  async getBuild(buildId: string) {
+    return this.api.build(parseInt(buildId, 10));
+  }
 }

plugins/circleci/src/components/CITable/CITable.tsx

@@ -9,10 +9,10 @@ import {
   TableHead,
   TableContainer,
   TableRow,
-  Link,
   CircularProgress,
 } from '@material-ui/core';
 import { Replay as RetryIcon } from '@material-ui/icons';
+import { Link } from 'react-router-dom';
 import {
   StatusFailed,
   StatusOK,
@@ -94,7 +94,7 @@ export const CITable: FC<{
             <TableRow key={build.id}>
               <TableCell>{build.id}</TableCell>
               <TableCell>
-                <Link href={build.buildUrl} target="_blank">
+                <Link to={`/circleci/build/${build.id}`}>
                   {build.buildName}
                 </Link>
               </TableCell>

plugins/circleci/src/pages/CircleCIPage/CircleCIPage.tsx

@@ -23,7 +23,8 @@ import {
   HeaderLabel,
 } from '@backstage/core';
 import { SettingsPage } from '../SettingsPage';
-import { BuildsPage } from '../BuildsPage/BuildsPage';
+import { BuildsPage } from '../BuildsPage';
+import { DetailedViewPage } from '../DetailedViewPage';
 export const CircleCIPage: FC<{}> = () => {
   return (
     <>
@@ -33,8 +34,8 @@ export const CircleCIPage: FC<{}> = () => {
           <HeaderLabel label="Lifecycle" value="Alpha" />
         </Header>
         <Route path="/circleci/settings" component={SettingsPage} />
-        <Route exact path="/circleci" component={BuildsPage}>
-        </Route>
+        <Route path="/circleci/build/:buildId" component={DetailedViewPage} />
+        <Route exact path="/circleci" component={BuildsPage} />
       </Page>
     </>
   );

plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+import { Content, InfoCard, useApi } from '@backstage/core';
+import { Grid, List, ListItem } from '@material-ui/core';
+import { PluginHeader } from 'components/PluginHeader';
+import { BuildWithSteps, BuildStep } from 'circleci-api';
+import { circleCIApiRef } from 'api';
+// import { LazyLog } from 'react-lazylog';
+import { useParams } from 'react-router-dom';
+
+export const DetailedViewPage: FC<{}> = () => {
+  let { buildId = '' } = useParams();
+
+  console.log(useParams());
+
+  const [authed, setAuthed] = React.useState(false);
+
+  //@ts-ignore
+  const [build, setBuild] = React.useState<BuildWithSteps>({});
+  const api = useApi(circleCIApiRef);
+
+  React.useEffect(() => {
+    const getBuildAsync = async () => {
+      if (!authed) {
+        await api.restorePersistedSettings();
+        await api
+          .validateToken()
+          .then(() => {
+            setAuthed(true);
+          })
+          .catch(() => setAuthed(false));
+      }
+      api.getBuild(buildId).then(setBuild);
+    };
+    getBuildAsync();
+  }, [authed, buildId]);
+
+  return (
+    <Content>
+      <PluginHeader />
+      <Grid container spacing={3} direction="column">
+        <Grid item>
+          <InfoCard title="Pipelines">
+            <List>
+                {build.steps && build.steps.map<BuildStep>(({name}: {name: string}) => (<ListItem>{name}</ListItem>))}
+            </List>
+          </InfoCard>
+        </Grid>
+      </Grid>
+    </Content>
+  );
+};