From 9e7bc707280740d5c78aefcb10b9685bafc68fa6 Mon Sep 17 00:00:00 2001 From: Nikita Nek Dudnik Date: Tue, 5 May 2020 11:23:37 +0200 Subject: [PATCH 1/5] Restructure pages --- .../src/pages/BuildsPage/BuildsPage.tsx | 33 ++++++++++++++++++ .../circleci/src/pages/BuildsPage/index.ts | 1 + .../CircleCIPage/CircleCIPage.tsx | 34 +++---------------- .../CircleCIPage/index.ts | 0 .../SettingsPage/SettingsPage.tsx | 8 +---- .../SettingsPage/index.ts | 0 plugins/circleci/src/plugin.ts | 3 +- 7 files changed, 40 insertions(+), 39 deletions(-) create mode 100644 plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx create mode 100644 plugins/circleci/src/pages/BuildsPage/index.ts rename plugins/circleci/src/{components => pages}/CircleCIPage/CircleCIPage.tsx (54%) rename plugins/circleci/src/{components => pages}/CircleCIPage/index.ts (100%) rename plugins/circleci/src/{components => pages}/SettingsPage/SettingsPage.tsx (91%) rename plugins/circleci/src/{components => pages}/SettingsPage/index.ts (100%) diff --git a/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx b/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx new file mode 100644 index 0000000000..cb8b3500ef --- /dev/null +++ b/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx @@ -0,0 +1,33 @@ +import React, { FC } from 'react'; +import { Link as RouterLink } from 'react-router-dom'; +import { + Content, + ContentHeader, + SupportButton, + InfoCard, +} from '@backstage/core'; +import { Button, Grid } from '@material-ui/core'; +import { CircleCIFetch } from 'components/CircleCIFetch'; +import { Settings as SettingsIcon } from '@material-ui/icons'; + +export const BuildsPage: FC<{}> = () => ( + + + + A description of your plugin goes here. + + + + + + + + + +); diff --git a/plugins/circleci/src/pages/BuildsPage/index.ts b/plugins/circleci/src/pages/BuildsPage/index.ts new file mode 100644 index 0000000000..94086cd569 --- /dev/null +++ b/plugins/circleci/src/pages/BuildsPage/index.ts @@ -0,0 +1 @@ +export * from './BuildsPage'; diff --git a/plugins/circleci/src/components/CircleCIPage/CircleCIPage.tsx b/plugins/circleci/src/pages/CircleCIPage/CircleCIPage.tsx similarity index 54% rename from plugins/circleci/src/components/CircleCIPage/CircleCIPage.tsx rename to plugins/circleci/src/pages/CircleCIPage/CircleCIPage.tsx index 32812b1ade..e648c20b3a 100644 --- a/plugins/circleci/src/components/CircleCIPage/CircleCIPage.tsx +++ b/plugins/circleci/src/pages/CircleCIPage/CircleCIPage.tsx @@ -16,51 +16,25 @@ import React, { FC } from 'react'; import { Route } from 'react-router'; -import { Link as RouterLink } from 'react-router-dom'; -import { Grid, Button } from '@material-ui/core'; -import { Settings as SettingsIcon } from '@material-ui/icons'; import { - InfoCard, Header, Page, pageTheme, - Content, - ContentHeader, HeaderLabel, - SupportButton, } from '@backstage/core'; -import { CircleCIFetch } from '../CircleCIFetch'; import { SettingsPage } from '../SettingsPage'; +import { BuildsPage } from '../BuildsPage/BuildsPage'; export const CircleCIPage: FC<{}> = () => { return ( <> -
- - - - - A description of your plugin goes here. - - - - - - - - - - + + + ); diff --git a/plugins/circleci/src/components/CircleCIPage/index.ts b/plugins/circleci/src/pages/CircleCIPage/index.ts similarity index 100% rename from plugins/circleci/src/components/CircleCIPage/index.ts rename to plugins/circleci/src/pages/CircleCIPage/index.ts diff --git a/plugins/circleci/src/components/SettingsPage/SettingsPage.tsx b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx similarity index 91% rename from plugins/circleci/src/components/SettingsPage/SettingsPage.tsx rename to plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx index 8a0ba78118..95e2c86662 100644 --- a/plugins/circleci/src/components/SettingsPage/SettingsPage.tsx +++ b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx @@ -4,12 +4,10 @@ import { circleCIApiRef } from 'api'; import { InfoCard, useApi, - Header, Page, pageTheme, Content, ContentHeader, - HeaderLabel, SupportButton, } from '@backstage/core'; import { ProjectInput } from 'components/ProjectInput/ProjectInput'; @@ -30,10 +28,6 @@ export const SettingsPage = () => { return ( -
- - -
A description of your plugin goes here. - + diff --git a/plugins/circleci/src/components/SettingsPage/index.ts b/plugins/circleci/src/pages/SettingsPage/index.ts similarity index 100% rename from plugins/circleci/src/components/SettingsPage/index.ts rename to plugins/circleci/src/pages/SettingsPage/index.ts diff --git a/plugins/circleci/src/plugin.ts b/plugins/circleci/src/plugin.ts index 05d3710d40..c05feb2059 100644 --- a/plugins/circleci/src/plugin.ts +++ b/plugins/circleci/src/plugin.ts @@ -14,8 +14,7 @@ * limitations under the License. */ import { createPlugin } from '@backstage/core'; -import { CircleCIPage } from './components/CircleCIPage'; - +import { CircleCIPage } from './pages/CircleCIPage'; export const plugin = createPlugin({ id: 'circleci', register({ router }) { From 20ef06f6f30d9c3e549e497ffe08b2eb41a2cfa8 Mon Sep 17 00:00:00 2001 From: Nikita Nek Dudnik Date: Tue, 5 May 2020 12:46:43 +0200 Subject: [PATCH 2/5] 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<{ {build.id} - + {build.buildName} 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<{}> = () => { - - + + ); 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({}); + 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 ( + + + + + + + {build.steps && build.steps.map(({name}: {name: string}) => ({name}))} + + + + + + ); +}; From 950830571e21fd0ae49e9816e6027e18ce0d0985 Mon Sep 17 00:00:00 2001 From: Nikita Nek Dudnik Date: Tue, 5 May 2020 16:44:39 +0200 Subject: [PATCH 3/5] Add ugly log visualization --- plugins/circleci/src/api/index.ts | 1 + .../components/ActionOutput/ActionOutput.tsx | 14 +++++ .../src/components/ActionOutput/index.ts | 1 + .../components/PluginHeader/PluginHeader.tsx | 18 +++++++ .../src/components/PluginHeader/index.ts | 1 + .../DetailedViewPage/DetailedViewPage.tsx | 54 +++++++++++++------ .../src/pages/DetailedViewPage/index.ts | 1 + 7 files changed, 74 insertions(+), 16 deletions(-) create mode 100644 plugins/circleci/src/components/ActionOutput/ActionOutput.tsx create mode 100644 plugins/circleci/src/components/ActionOutput/index.ts create mode 100644 plugins/circleci/src/components/PluginHeader/PluginHeader.tsx create mode 100644 plugins/circleci/src/components/PluginHeader/index.ts create mode 100644 plugins/circleci/src/pages/DetailedViewPage/index.ts diff --git a/plugins/circleci/src/api/index.ts b/plugins/circleci/src/api/index.ts index 362657326e..7ce157057b 100644 --- a/plugins/circleci/src/api/index.ts +++ b/plugins/circleci/src/api/index.ts @@ -31,6 +31,7 @@ export const circleCIApiRef = new ApiRef({ }); export class CircleCIApi { + private token: string = ''; options: Partial; diff --git a/plugins/circleci/src/components/ActionOutput/ActionOutput.tsx b/plugins/circleci/src/components/ActionOutput/ActionOutput.tsx new file mode 100644 index 0000000000..79f8954a73 --- /dev/null +++ b/plugins/circleci/src/components/ActionOutput/ActionOutput.tsx @@ -0,0 +1,14 @@ +import React, { useEffect, useState, FC } from 'react'; + +export const ActionOutput: FC<{ url: string }> = ({ url }) => { + //@ts-ignore + const [messages, setMessages] = useState([]); + useEffect(() => { + fetch(url) + .then(res => res.json()) + .then((messages) => { + messages && setMessages(messages.map(({message}: {message: string}) => message)) + }); + }, [url]); + return
{messages}
; +}; diff --git a/plugins/circleci/src/components/ActionOutput/index.ts b/plugins/circleci/src/components/ActionOutput/index.ts new file mode 100644 index 0000000000..1e4fd5dfac --- /dev/null +++ b/plugins/circleci/src/components/ActionOutput/index.ts @@ -0,0 +1 @@ +export { ActionOutput } from './ActionOutput'; diff --git a/plugins/circleci/src/components/PluginHeader/PluginHeader.tsx b/plugins/circleci/src/components/PluginHeader/PluginHeader.tsx new file mode 100644 index 0000000000..f725a979a9 --- /dev/null +++ b/plugins/circleci/src/components/PluginHeader/PluginHeader.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Link as RouterLink } from 'react-router-dom'; +import { ContentHeader, SupportButton } from '@backstage/core'; +import { Button } from '@material-ui/core'; +import { Settings as SettingsIcon } from '@material-ui/icons'; + +export const PluginHeader = () => ( + + + A description of your plugin goes here. + +); diff --git a/plugins/circleci/src/components/PluginHeader/index.ts b/plugins/circleci/src/components/PluginHeader/index.ts new file mode 100644 index 0000000000..e9231f1318 --- /dev/null +++ b/plugins/circleci/src/components/PluginHeader/index.ts @@ -0,0 +1 @@ +export * from './PluginHeader'; diff --git a/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx b/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx index e7441b979a..ce1b87b36a 100644 --- a/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx +++ b/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx @@ -2,20 +2,16 @@ 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 { BuildWithSteps, BuildStepAction } from 'circleci-api'; import { circleCIApiRef } from 'api'; -// import { LazyLog } from 'react-lazylog'; import { useParams } from 'react-router-dom'; +import { ActionOutput } from '../../components/ActionOutput/ActionOutput'; export const DetailedViewPage: FC<{}> = () => { let { buildId = '' } = useParams(); - console.log(useParams()); - const [authed, setAuthed] = React.useState(false); - - //@ts-ignore - const [build, setBuild] = React.useState({}); + const [build, setBuild] = React.useState(null); const api = useApi(circleCIApiRef); React.useEffect(() => { @@ -33,19 +29,45 @@ export const DetailedViewPage: FC<{}> = () => { }; getBuildAsync(); }, [authed, buildId]); - return ( - - - - - {build.steps && build.steps.map(({name}: {name: string}) => ({name}))} - - + {!api.authed ? ( +
Not authenticated
+ ) : ( + + + + + - + )} ); }; + +const BuildsList: FC<{ build: BuildWithSteps | null }> = ({ build }) => ( + + {build && + build.steps && + build.steps.map( + ({ name, actions }: { name: string; actions: BuildStepAction[] }) => ( + + {name} +
+ + + ), + )} + +); + +const ActionsList: FC<{ actions: BuildStepAction[] }> = ({ actions }) => ( + + {actions.map((action: BuildStepAction) => ( + + + + ))} + +); diff --git a/plugins/circleci/src/pages/DetailedViewPage/index.ts b/plugins/circleci/src/pages/DetailedViewPage/index.ts new file mode 100644 index 0000000000..578eec4e64 --- /dev/null +++ b/plugins/circleci/src/pages/DetailedViewPage/index.ts @@ -0,0 +1 @@ +export * from './DetailedViewPage'; From 8a9241619ef1516bbb4d58a75166b02310b00382 Mon Sep 17 00:00:00 2001 From: Nikita Nek Dudnik Date: Tue, 5 May 2020 22:40:43 +0200 Subject: [PATCH 4/5] Implement logs visualization --- .../components/ActionOutput/ActionOutput.tsx | 45 ++++++++++++++++--- .../DetailedViewPage/DetailedViewPage.tsx | 25 +++++------ 2 files changed, 49 insertions(+), 21 deletions(-) diff --git a/plugins/circleci/src/components/ActionOutput/ActionOutput.tsx b/plugins/circleci/src/components/ActionOutput/ActionOutput.tsx index 79f8954a73..b8d1564040 100644 --- a/plugins/circleci/src/components/ActionOutput/ActionOutput.tsx +++ b/plugins/circleci/src/components/ActionOutput/ActionOutput.tsx @@ -1,14 +1,47 @@ import React, { useEffect, useState, FC } from 'react'; +import { + ExpansionPanel, + ExpansionPanelSummary, + Typography, + ExpansionPanelDetails, +} from '@material-ui/core'; -export const ActionOutput: FC<{ url: string }> = ({ url }) => { - //@ts-ignore +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import { BuildStepAction } from 'circleci-api'; + +export const ActionOutput: FC<{ + url: string; + name: string; + action: BuildStepAction; +}> = ({ url, name }) => { const [messages, setMessages] = useState([]); useEffect(() => { fetch(url) .then(res => res.json()) - .then((messages) => { - messages && setMessages(messages.map(({message}: {message: string}) => message)) - }); + .then(actionOutput => { + actionOutput && + setMessages( + actionOutput.map(({ message }: { message: string }) => message), + ); + }); }, [url]); - return
{messages}
; + console.log(messages); + return ( + + } + aria-controls="panel1a-content" + id="panel1a-header" + > + {name} + + + {messages.length === 0 + ? 'Nothing here...' + : messages.map(message => ( +

{message}

+ ))} + + + ); }; diff --git a/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx b/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx index ce1b87b36a..53fe2fea3e 100644 --- a/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx +++ b/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; import { Content, InfoCard, useApi } from '@backstage/core'; -import { Grid, List, ListItem } from '@material-ui/core'; +import { Grid, Box } from '@material-ui/core'; import { PluginHeader } from 'components/PluginHeader'; import { BuildWithSteps, BuildStepAction } from 'circleci-api'; import { circleCIApiRef } from 'api'; @@ -37,8 +37,9 @@ export const DetailedViewPage: FC<{}> = () => { ) : ( - + + )} @@ -47,27 +48,21 @@ export const DetailedViewPage: FC<{}> = () => { }; const BuildsList: FC<{ build: BuildWithSteps | null }> = ({ build }) => ( - + {build && build.steps && build.steps.map( ({ name, actions }: { name: string; actions: BuildStepAction[] }) => ( - - {name} -
- - + ), )} - + ); -const ActionsList: FC<{ actions: BuildStepAction[] }> = ({ actions }) => ( - +const ActionsList: FC<{ actions: BuildStepAction[], name: string }> = ({ actions, name }) => ( + {actions.map((action: BuildStepAction) => ( - - - + ))} - + ); From 6b44dd110c5ca3b009f15b4f8e6cac6c95f061b2 Mon Sep 17 00:00:00 2001 From: Ivan Shmidt Date: Wed, 6 May 2020 11:18:49 +0200 Subject: [PATCH 5/5] feat: routing -> plugin routing --- .../circleci/src/components/Layout/Layout.tsx | 12 +++++ .../circleci/src/components/Layout/index.ts | 1 + .../src/pages/BuildsPage/BuildsPage.tsx | 39 ++++++++-------- .../src/pages/CircleCIPage/CircleCIPage.tsx | 44 ------------------- .../circleci/src/pages/CircleCIPage/index.ts | 1 - .../DetailedViewPage/DetailedViewPage.tsx | 42 +++++++++++------- .../src/pages/SettingsPage/SettingsPage.tsx | 9 ++-- plugins/circleci/src/plugin.ts | 6 ++- 8 files changed, 68 insertions(+), 86 deletions(-) create mode 100644 plugins/circleci/src/components/Layout/Layout.tsx create mode 100644 plugins/circleci/src/components/Layout/index.ts delete mode 100644 plugins/circleci/src/pages/CircleCIPage/CircleCIPage.tsx delete mode 100644 plugins/circleci/src/pages/CircleCIPage/index.ts diff --git a/plugins/circleci/src/components/Layout/Layout.tsx b/plugins/circleci/src/components/Layout/Layout.tsx new file mode 100644 index 0000000000..fe82bf90e8 --- /dev/null +++ b/plugins/circleci/src/components/Layout/Layout.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Header, Page, pageTheme, HeaderLabel } from '@backstage/core'; + +export const Layout: React.FC = ({ children }) => ( + +
+ + +
+ {children} + +); diff --git a/plugins/circleci/src/components/Layout/index.ts b/plugins/circleci/src/components/Layout/index.ts new file mode 100644 index 0000000000..9877e7f4ae --- /dev/null +++ b/plugins/circleci/src/components/Layout/index.ts @@ -0,0 +1 @@ +export * from './Layout'; diff --git a/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx b/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx index cb8b3500ef..98e634d4c0 100644 --- a/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx +++ b/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx @@ -9,25 +9,28 @@ import { import { Button, Grid } from '@material-ui/core'; import { CircleCIFetch } from 'components/CircleCIFetch'; import { Settings as SettingsIcon } from '@material-ui/icons'; +import { Layout } from 'components/Layout'; export const BuildsPage: FC<{}> = () => ( - - - - A description of your plugin goes here. - - - - - - + + + + + A description of your plugin goes here. + + + + + + + - - + + ); diff --git a/plugins/circleci/src/pages/CircleCIPage/CircleCIPage.tsx b/plugins/circleci/src/pages/CircleCIPage/CircleCIPage.tsx deleted file mode 100644 index fe0ef0f1ce..0000000000 --- a/plugins/circleci/src/pages/CircleCIPage/CircleCIPage.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import React, { FC } from 'react'; -import { Route } from 'react-router'; -import { - Header, - Page, - pageTheme, - HeaderLabel, -} from '@backstage/core'; -import { SettingsPage } from '../SettingsPage'; -import { BuildsPage } from '../BuildsPage'; -import { DetailedViewPage } from '../DetailedViewPage'; -export const CircleCIPage: FC<{}> = () => { - return ( - <> - -
- - -
- - - - - - ); -}; - -export default CircleCIPage; diff --git a/plugins/circleci/src/pages/CircleCIPage/index.ts b/plugins/circleci/src/pages/CircleCIPage/index.ts deleted file mode 100644 index 188ed6d61f..0000000000 --- a/plugins/circleci/src/pages/CircleCIPage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { CircleCIPage } from './CircleCIPage'; diff --git a/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx b/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx index 53fe2fea3e..3d5d7b575b 100644 --- a/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx +++ b/plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx @@ -6,6 +6,7 @@ import { BuildWithSteps, BuildStepAction } from 'circleci-api'; import { circleCIApiRef } from 'api'; import { useParams } from 'react-router-dom'; import { ActionOutput } from '../../components/ActionOutput/ActionOutput'; +import { Layout } from 'components/Layout'; export const DetailedViewPage: FC<{}> = () => { let { buildId = '' } = useParams(); @@ -30,20 +31,22 @@ export const DetailedViewPage: FC<{}> = () => { getBuildAsync(); }, [authed, buildId]); return ( - - - {!api.authed ? ( -
Not authenticated
- ) : ( - - - - - + + + + {!api.authed ? ( +
Not authenticated
+ ) : ( + + + + + + - - )} - + )} + + ); }; @@ -53,16 +56,23 @@ const BuildsList: FC<{ build: BuildWithSteps | null }> = ({ build }) => ( build.steps && build.steps.map( ({ name, actions }: { name: string; actions: BuildStepAction[] }) => ( - + ), )} ); -const ActionsList: FC<{ actions: BuildStepAction[], name: string }> = ({ actions, name }) => ( +const ActionsList: FC<{ actions: BuildStepAction[]; name: string }> = ({ + actions, + name, +}) => ( {actions.map((action: BuildStepAction) => ( - + ))} ); diff --git a/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx index 95e2c86662..af380509d1 100644 --- a/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx +++ b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx @@ -4,14 +4,13 @@ import { circleCIApiRef } from 'api'; import { InfoCard, useApi, - Page, - pageTheme, Content, ContentHeader, SupportButton, } from '@backstage/core'; import { ProjectInput } from 'components/ProjectInput/ProjectInput'; import { Link as RouterLink } from 'react-router-dom'; +import { Layout } from 'components/Layout'; export const SettingsPage = () => { const api = useApi(circleCIApiRef); @@ -27,7 +26,7 @@ export const SettingsPage = () => { }, []); return ( - + A description of your plugin goes here. - + @@ -84,6 +83,6 @@ export const SettingsPage = () => { - + ); }; diff --git a/plugins/circleci/src/plugin.ts b/plugins/circleci/src/plugin.ts index 7e96bf5e0d..11d215f30f 100644 --- a/plugins/circleci/src/plugin.ts +++ b/plugins/circleci/src/plugin.ts @@ -14,13 +14,15 @@ * limitations under the License. */ import { createPlugin } from '@backstage/core'; -import { CircleCIPage } from './pages/CircleCIPage'; +import { BuildsPage } from './pages/BuildsPage'; import { SettingsPage } from './pages/SettingsPage'; +import { DetailedViewPage } from './pages/DetailedViewPage'; export const plugin = createPlugin({ id: 'circleci', register({ router }) { - router.registerRoute('/circleci', CircleCIPage); + router.registerRoute('/circleci', BuildsPage); + router.registerRoute('/circleci/build/:buildId', DetailedViewPage); router.registerRoute('/circleci/settings', SettingsPage); }, });