From 20ef06f6f30d9c3e549e497ffe08b2eb41a2cfa8 Mon Sep 17 00:00:00 2001
From: Nikita Nek Dudnik <nikdudnik@gmail.com>
Date: Tue, 5 May 2020 12:46:43 +0200
Subject: [PATCH] Add detailed view page with a list of build steps

---
 plugins/circleci/src/api/index.ts             |  4 ++
 .../src/components/CITable/CITable.tsx        |  4 +-
 .../src/pages/CircleCIPage/CircleCIPage.tsx   |  7 +--
 .../DetailedViewPage/DetailedViewPage.tsx     | 51 +++++++++++++++++++
 4 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx

diff --git a/plugins/circleci/src/api/index.ts b/plugins/circleci/src/api/index.ts
index 955daf3fba..362657326e 100644
--- a/plugins/circleci/src/api/index.ts
+++ b/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));
+  }
 }
diff --git a/plugins/circleci/src/components/CITable/CITable.tsx b/plugins/circleci/src/components/CITable/CITable.tsx
index 5efb0edb9f..465fae24e0 100644
--- a/plugins/circleci/src/components/CITable/CITable.tsx
+++ b/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>
diff --git a/plugins/circleci/src/pages/CircleCIPage/CircleCIPage.tsx b/plugins/circleci/src/pages/CircleCIPage/CircleCIPage.tsx
index e648c20b3a..fe0ef0f1ce 100644
--- a/plugins/circleci/src/pages/CircleCIPage/CircleCIPage.tsx
+++ b/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>
     </>
   );
diff --git a/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx b/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx
new file mode 100644
index 0000000000..e7441b979a
--- /dev/null
+++ b/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>
+  );
+};