From 3d3e78cc56255607c7e87821f0bde0cec9b770e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jefferson=20Gir=C3=A3o?= Date: Fri, 7 Feb 2020 12:19:28 +0100 Subject: [PATCH 01/30] chore: procfile --- Procfile | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 Procfile diff --git a/Procfile b/Procfile new file mode 100644 index 0000000000..becfcd144e --- /dev/null +++ b/Procfile @@ -0,0 +1,2 @@ +backend: docker-compose up +frontend: cd frontend/ && yarn install && yarn start From ea581a2c62fa5b805cab7985318f6b7195ee3ab6 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 7 Feb 2020 12:50:32 +0100 Subject: [PATCH 02/30] front/plugins/github-actions/BuildsListPage: tweak styles --- .../src/components/BuildListPage/BuildListPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx b/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx index 9096cc8f2e..47dfb2e8d9 100644 --- a/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx +++ b/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx @@ -35,7 +35,7 @@ const useStyles = makeStyles(theme => ({ padding: theme.spacing(2), }, title: { - paddingBottom: theme.spacing(2), + padding: theme.spacing(1, 0, 2, 0), }, })); @@ -49,7 +49,7 @@ const BuildListPage: FC<{}> = () => { content = ; } else if (status.error) { content = ( - + Failed to load builds, {status.error.message} ); @@ -101,7 +101,7 @@ const BuildListPage: FC<{}> = () => { return (
- + CI/CD Builds {content} From ea35a14f68d74c87946aaed052a9974c87444b6b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 7 Feb 2020 13:11:56 +0100 Subject: [PATCH 03/30] front/core: add DefaultWidgetView and pass params for widgets --- frontend/packages/app/src/entities/index.ts | 4 +-- .../src/api/widgetView/WidgetViewBuilder.tsx | 33 ++++++------------- .../packages/core/src/api/widgetView/types.ts | 10 ++++++ .../DefaultWidgetView/DefaultWidgetView.tsx | 30 +++++++++++++++++ .../src/components/DefaultWidgetView/index.ts | 1 + 5 files changed, 53 insertions(+), 25 deletions(-) create mode 100644 frontend/packages/core/src/api/widgetView/types.ts create mode 100644 frontend/packages/core/src/components/DefaultWidgetView/DefaultWidgetView.tsx create mode 100644 frontend/packages/core/src/components/DefaultWidgetView/index.ts diff --git a/frontend/packages/app/src/entities/index.ts b/frontend/packages/app/src/entities/index.ts index 01f4105902..d0839118f5 100644 --- a/frontend/packages/app/src/entities/index.ts +++ b/frontend/packages/app/src/entities/index.ts @@ -12,8 +12,8 @@ import GithubActionsPlugin from '@backstage/plugin-github-actions'; /* SERVICE */ const serviceOverviewPage = createWidgetView() - .addComponent(MockEntityCard) - .addComponent(MockEntityCard); + .add({ size: 4, component: MockEntityCard }) + .add({ size: 4, component: MockEntityCard }); const serviceView = createEntityPage() .addPage('Overview', WebIcon, '/overview', serviceOverviewPage) diff --git a/frontend/packages/core/src/api/widgetView/WidgetViewBuilder.tsx b/frontend/packages/core/src/api/widgetView/WidgetViewBuilder.tsx index 3ab13c2f8c..164ceaf485 100644 --- a/frontend/packages/core/src/api/widgetView/WidgetViewBuilder.tsx +++ b/frontend/packages/core/src/api/widgetView/WidgetViewBuilder.tsx @@ -1,50 +1,37 @@ -import React, { ComponentType, FC } from 'react'; +import React, { ComponentType } from 'react'; import { App, AppComponentBuilder } from '../app/types'; - -type Props = { - app: App; - cards: ComponentType[]; -}; - -const WidgetViewComponent: FC = ({ cards }) => { - return ( -
- {cards.map((CardComponent, index) => ( - - ))} -
- ); -}; +import { Widget } from './types'; +import DefaultWidgetView from '../../components/DefaultWidgetView'; type WidgetViewRegistration = { type: 'component'; - component: ComponentType; + widget: Widget; }; export default class WidgetViewBuilder extends AppComponentBuilder { private readonly registrations = new Array(); private output?: ComponentType; - addComponent(component: ComponentType): WidgetViewBuilder { - this.registrations.push({ type: 'component', component }); + add(widget: Widget): WidgetViewBuilder { + this.registrations.push({ type: 'component', widget }); return this; } - build(app: App): ComponentType { + build(_app: App): ComponentType { if (this.output) { return this.output; } - const cards = this.registrations.map(reg => { + const widgets = this.registrations.map(reg => { switch (reg.type) { case 'component': - return reg.component; + return reg.widget; default: throw new Error(`Unknown WidgetViewBuilder registration`); } }); - this.output = () => ; + this.output = () => ; return this.output; } } diff --git a/frontend/packages/core/src/api/widgetView/types.ts b/frontend/packages/core/src/api/widgetView/types.ts new file mode 100644 index 0000000000..c7c0cf865b --- /dev/null +++ b/frontend/packages/core/src/api/widgetView/types.ts @@ -0,0 +1,10 @@ +import { ComponentType } from 'react'; + +export type Widget = { + size: 4 | 6 | 8 | 12; + component: ComponentType; +}; + +export type WidgetViewProps = { + widgets: Widget[]; +}; diff --git a/frontend/packages/core/src/components/DefaultWidgetView/DefaultWidgetView.tsx b/frontend/packages/core/src/components/DefaultWidgetView/DefaultWidgetView.tsx new file mode 100644 index 0000000000..c7ec02b4cf --- /dev/null +++ b/frontend/packages/core/src/components/DefaultWidgetView/DefaultWidgetView.tsx @@ -0,0 +1,30 @@ +import React, { FC } from 'react'; +import { Grid, Paper, makeStyles, Theme } from '@material-ui/core'; +import { WidgetViewProps } from '../../api/widgetView/types'; + +const useStyles = makeStyles(theme => ({ + root: { + padding: theme.spacing(2), + }, + widgetWrapper: { + padding: theme.spacing(2), + }, +})); + +const WidgetViewComponent: FC = ({ widgets }) => { + const classes = useStyles(); + + return ( + + {widgets.map(({ size, component: WidgetComponent }, index) => ( + + + + + + ))} + + ); +}; + +export default WidgetViewComponent; diff --git a/frontend/packages/core/src/components/DefaultWidgetView/index.ts b/frontend/packages/core/src/components/DefaultWidgetView/index.ts new file mode 100644 index 0000000000..37e32e9faf --- /dev/null +++ b/frontend/packages/core/src/components/DefaultWidgetView/index.ts @@ -0,0 +1 @@ +export { default } from './DefaultWidgetView'; From 46a11b8b4996aed4ec25291dc3840728465bde25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20=C3=85lund?= Date: Fri, 7 Feb 2020 13:21:23 +0100 Subject: [PATCH 04/30] Styling of navigation --- .../DefaultEntityPageNavbar/DefaultEntityPageNavbar.tsx | 1 + .../core/src/components/DefaultEntityPageNavbar/NavbarItem.tsx | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/core/src/components/DefaultEntityPageNavbar/DefaultEntityPageNavbar.tsx b/frontend/packages/core/src/components/DefaultEntityPageNavbar/DefaultEntityPageNavbar.tsx index 69aed8bd9f..b0816a5e00 100644 --- a/frontend/packages/core/src/components/DefaultEntityPageNavbar/DefaultEntityPageNavbar.tsx +++ b/frontend/packages/core/src/components/DefaultEntityPageNavbar/DefaultEntityPageNavbar.tsx @@ -12,6 +12,7 @@ const useStyles = makeStyles({ transitionTimingFunction: 'ease-in', backgroundColor: '#eeeeee', boxShadow: '0px 0 4px 0px rgba(0,0,0,0.35)', + height: '100vh', }, list: { padding: 0, diff --git a/frontend/packages/core/src/components/DefaultEntityPageNavbar/NavbarItem.tsx b/frontend/packages/core/src/components/DefaultEntityPageNavbar/NavbarItem.tsx index d75ee16f4c..7526fb7739 100644 --- a/frontend/packages/core/src/components/DefaultEntityPageNavbar/NavbarItem.tsx +++ b/frontend/packages/core/src/components/DefaultEntityPageNavbar/NavbarItem.tsx @@ -15,7 +15,6 @@ const useStyles = makeStyles(theme => ({ display: 'block', overflow: 'hidden', borderBottom: `1px solid #d9d9d9`, - paddingLeft: theme.spacing(1), }, label: { color: '#333', From 4bc315223e9aaea2b618c015133201cdf982165b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jefferson=20Gir=C3=A3o?= Date: Fri, 7 Feb 2020 13:25:06 +0100 Subject: [PATCH 05/30] add build flag to compose --- Procfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Procfile b/Procfile index becfcd144e..063f838e54 100644 --- a/Procfile +++ b/Procfile @@ -1,2 +1,2 @@ -backend: docker-compose up +backend: docker-compose up --build frontend: cd frontend/ && yarn install && yarn start From bb450005af9a852de37d5b6ec22c476c7dda7203 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 7 Feb 2020 13:27:43 +0100 Subject: [PATCH 06/30] front/core: add plugin api hooks and output for widgets --- .../packages/core/src/api/plugin/Plugin.tsx | 11 +++++ .../packages/core/src/api/plugin/types.ts | 7 ++++ .../src/api/widgetView/WidgetViewBuilder.tsx | 42 +++++++++++++++---- 3 files changed, 53 insertions(+), 7 deletions(-) diff --git a/frontend/packages/core/src/api/plugin/Plugin.tsx b/frontend/packages/core/src/api/plugin/Plugin.tsx index 772776e288..624a9042e6 100644 --- a/frontend/packages/core/src/api/plugin/Plugin.tsx +++ b/frontend/packages/core/src/api/plugin/Plugin.tsx @@ -1,6 +1,7 @@ import { ComponentType } from 'react'; import { PluginOutput, RoutePath, RouteOptions } from './types'; import { IconComponent } from '../types'; +import { Widget } from '../widgetView/types'; export type PluginConfig = { id: string; @@ -10,6 +11,7 @@ export type PluginConfig = { export type PluginHooks = { router: RouterHooks; entityPage: EntityPageHooks; + widgets: WidgetHooks; }; export type RouterHooks = { @@ -41,6 +43,10 @@ export type EntityPageHooks = { ): void; }; +export type WidgetHooks = { + add(widget: Widget): void; +}; + export const registerSymbol = Symbol('plugin-register'); export const outputSymbol = Symbol('plugin-output'); @@ -98,6 +104,11 @@ export default class Plugin { }); }, }, + widgets: { + add(widget: Widget) { + outputs.push({ type: 'widget', widget }); + }, + }, }); this.storedOutput = outputs; diff --git a/frontend/packages/core/src/api/plugin/types.ts b/frontend/packages/core/src/api/plugin/types.ts index f6efee230e..9b0eb73639 100644 --- a/frontend/packages/core/src/api/plugin/types.ts +++ b/frontend/packages/core/src/api/plugin/types.ts @@ -1,5 +1,6 @@ import { ComponentType } from 'react'; import { IconComponent } from '../types'; +import { Widget } from '../widgetView/types'; export type RouteOptions = { // Whether the route path must match exactly, defaults to true. @@ -22,6 +23,11 @@ export type RedirectRouteOutput = { options?: RouteOptions; }; +export type WidgetOutput = { + type: 'widget'; + widget: Widget; +}; + export type EntityPageViewRouteOutput = { type: 'entity-page-view-route'; path: RoutePath; @@ -39,5 +45,6 @@ export type EntityPageNavItemOutput = { export type PluginOutput = | RouteOutput | RedirectRouteOutput + | WidgetOutput | EntityPageViewRouteOutput | EntityPageNavItemOutput; diff --git a/frontend/packages/core/src/api/widgetView/WidgetViewBuilder.tsx b/frontend/packages/core/src/api/widgetView/WidgetViewBuilder.tsx index 164ceaf485..84e231651f 100644 --- a/frontend/packages/core/src/api/widgetView/WidgetViewBuilder.tsx +++ b/frontend/packages/core/src/api/widgetView/WidgetViewBuilder.tsx @@ -1,12 +1,18 @@ import React, { ComponentType } from 'react'; import { App, AppComponentBuilder } from '../app/types'; import { Widget } from './types'; +import BackstagePlugin from '../plugin/Plugin'; import DefaultWidgetView from '../../components/DefaultWidgetView'; -type WidgetViewRegistration = { - type: 'component'; - widget: Widget; -}; +type WidgetViewRegistration = + | { + type: 'component'; + widget: Widget; + } + | { + type: 'plugin'; + plugin: BackstagePlugin; + }; export default class WidgetViewBuilder extends AppComponentBuilder { private readonly registrations = new Array(); @@ -17,19 +23,41 @@ export default class WidgetViewBuilder extends AppComponentBuilder { return this; } + register(plugin: BackstagePlugin): WidgetViewBuilder { + this.registrations.push({ type: 'plugin', plugin }); + return this; + } + build(_app: App): ComponentType { if (this.output) { return this.output; } - const widgets = this.registrations.map(reg => { + const widgets = new Array(); + + for (const reg of this.registrations) { switch (reg.type) { case 'component': - return reg.widget; + widgets.push(reg.widget); + break; + case 'plugin': + let added = false; + for (const output of reg.plugin.output()) { + if (output.type === 'widget') { + widgets.push(output.widget); + added = true; + } + } + if (!added) { + throw new Error( + `Plugin ${reg.plugin} was registered as widget provider, but did not provide any widgets`, + ); + } + break; default: throw new Error(`Unknown WidgetViewBuilder registration`); } - }); + } this.output = () => ; return this.output; From d1c0fd9d49d3a6532c47530acf6fd37fb4c7ae03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Fri, 7 Feb 2020 13:30:45 +0100 Subject: [PATCH 07/30] Disable the annoying rubberband 'overscroll' effect going outside of the page boundaries --- frontend/packages/app/src/App.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/frontend/packages/app/src/App.tsx b/frontend/packages/app/src/App.tsx index e3a03db49f..3bf40cf430 100644 --- a/frontend/packages/app/src/App.tsx +++ b/frontend/packages/app/src/App.tsx @@ -1,8 +1,4 @@ -import { - BackstageTheme, - createApp, - InfoCard, -} from '@backstage/core'; +import { BackstageTheme, createApp, InfoCard } from '@backstage/core'; //import PageHeader from './components/PageHeader'; import { LoginComponent } from '@backstage/plugin-login'; import HomePagePlugin from '@backstage/plugin-home-page'; @@ -24,6 +20,7 @@ const useStyles = makeStyles(theme => ({ body: { height: '100%', fontFamily: theme.typography.fontFamily, + 'overscroll-behavior-y': 'none', }, a: { color: 'inherit', From c906b03e3beab4be2ef0a289fc24697ce8c5d2ec Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Fri, 7 Feb 2020 13:39:38 +0100 Subject: [PATCH 08/30] Initial commit to integrate with scaffolder --- .../plugins/create-entity/package.json | 3 ++- .../CreateEntityFormPage.tsx | 25 +++++++++++++------ .../LoginComponent/LoginComponent.tsx | 2 +- frontend/yarn.lock | 5 ++++ 4 files changed, 26 insertions(+), 9 deletions(-) diff --git a/frontend/packages/plugins/create-entity/package.json b/frontend/packages/plugins/create-entity/package.json index 4855921c54..bfac679ec1 100644 --- a/frontend/packages/plugins/create-entity/package.json +++ b/frontend/packages/plugins/create-entity/package.json @@ -18,7 +18,8 @@ "react-dom": "^16.12.0", "@material-ui/core": "^4.9.1", "@material-ui/icons": "^4.9.1", - "formik": "2.1.4" + "formik": "2.1.4", + "formik-material-ui": "2.0.0-alpha.3" }, "scripts": { "lint": "web-scripts lint", diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx index 6482aff6bf..f93554fc51 100644 --- a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx @@ -3,6 +3,7 @@ import { useRouteMatch } from 'react-router-dom'; import { useFormik } from 'formik'; import { Button, TextField, makeStyles } from '@material-ui/core'; import { InfoCard } from '@backstage/core'; +import { scaffolderV1 } from '@backstage/protobuf-definitions'; const useStyles = makeStyles(theme => ({ formGroup: { @@ -21,8 +22,18 @@ const CreateEntityFormPage = () => { description: '', }, onSubmit: (values: any) => { - alert(JSON.stringify(values, null, 2)); - }, + console.log(JSON.stringify(values, null, 2)); + const client = new scaffolderV1.Client('http://localhost:8080'); + const req = new scaffolderV1.CreateRequest(); + req.setComponentId(values.entityId); + req.setTemplateId(templateId); + // req.setOrg('soapraj'); + req.setPrivate(false); + client.create(req).then((res: scaffolderV1.CreateReply) => { + console.log('COMPONENT CREATED'); + console.log(res.toObject().componentId); + }); + } }); return ( @@ -32,9 +43,9 @@ const CreateEntityFormPage = () => {
@@ -43,12 +54,12 @@ const CreateEntityFormPage = () => { label="Description:" name="description" id="description" - value={formik.values.description} + onChange={formik.handleChange} variant="outlined" >
-
diff --git a/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx b/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx index f0915bed2e..bc84e8a2f0 100644 --- a/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx +++ b/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx @@ -59,7 +59,7 @@ const LoginComponent: FC = ({ onLogin }) => { Login - {error || 'Just enter any fake username'} + {error || 'Use your github username'} ); }; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index a4961f9b5c..81188e6a16 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -7127,6 +7127,11 @@ form-data@~2.3.2: combined-stream "^1.0.6" mime-types "^2.1.12" +formik-material-ui@2.0.0-alpha.3: + version "2.0.0-alpha.3" + resolved "https://registry.npmjs.org/formik-material-ui/-/formik-material-ui-2.0.0-alpha.3.tgz#1f5e4d98068686fa1c1c0cf54e75b51e92b14981" + integrity sha512-jVG18/cFa89j9omVPQUSJ+4kK7mJ1Wxz0hPVUKwdX+Cr1Z4Vfl1pBo6tJ0xzS2cOj4NEN35D+9Ft1DPAsDa90g== + formik@2.1.4: version "2.1.4" resolved "https://registry.npmjs.org/formik/-/formik-2.1.4.tgz#8deef07ec845ea98f75e03da4aad7aab4ac46570" From 0ef8e18815a28d2c9c6bfb0c7fb9fa5c160ef78b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Fri, 7 Feb 2020 13:41:09 +0100 Subject: [PATCH 09/30] Fix heights and paddings --- frontend/packages/app/src/components/SideBar/SideBar.tsx | 2 +- .../src/components/DefaultEntityPage/DefaultEntityPage.tsx | 5 ++--- .../DefaultEntityPageNavbar/DefaultEntityPageNavbar.tsx | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/frontend/packages/app/src/components/SideBar/SideBar.tsx b/frontend/packages/app/src/components/SideBar/SideBar.tsx index c3e4e7f082..0f2468939b 100644 --- a/frontend/packages/app/src/components/SideBar/SideBar.tsx +++ b/frontend/packages/app/src/components/SideBar/SideBar.tsx @@ -152,7 +152,7 @@ const useStyles = makeStyles(theme => ({ position: 'relative', overflow: 'visible', width: theme.spacing(7) + 1, - height: '100vh', + height: '100%', }, drawer: { display: 'flex', diff --git a/frontend/packages/core/src/components/DefaultEntityPage/DefaultEntityPage.tsx b/frontend/packages/core/src/components/DefaultEntityPage/DefaultEntityPage.tsx index 5edbea7bf0..6accdfe1c8 100644 --- a/frontend/packages/core/src/components/DefaultEntityPage/DefaultEntityPage.tsx +++ b/frontend/packages/core/src/components/DefaultEntityPage/DefaultEntityPage.tsx @@ -6,7 +6,7 @@ import { Switch, Route, Redirect } from 'react-router-dom'; import DefaultEntityPageHeader from '../DefaultEntityPageHeader'; import DefaultEntityPageNavbar from '../DefaultEntityPageNavbar'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles({ root: { display: 'grid', gridTemplateAreas: ` @@ -16,7 +16,6 @@ const useStyles = makeStyles(theme => ({ gridTemplateRows: 'auto 1fr', gridTemplateColumns: 'auto 1fr', minHeight: '100%', - paddingBottom: theme.spacing(3), }, header: { gridArea: 'header', @@ -27,7 +26,7 @@ const useStyles = makeStyles(theme => ({ content: { gridArea: 'content', }, -})); +}); const DefaultEntityPage: FC = ({ navItems, views }) => { const classes = useStyles(); diff --git a/frontend/packages/core/src/components/DefaultEntityPageNavbar/DefaultEntityPageNavbar.tsx b/frontend/packages/core/src/components/DefaultEntityPageNavbar/DefaultEntityPageNavbar.tsx index b0816a5e00..93e0b50c59 100644 --- a/frontend/packages/core/src/components/DefaultEntityPageNavbar/DefaultEntityPageNavbar.tsx +++ b/frontend/packages/core/src/components/DefaultEntityPageNavbar/DefaultEntityPageNavbar.tsx @@ -12,7 +12,7 @@ const useStyles = makeStyles({ transitionTimingFunction: 'ease-in', backgroundColor: '#eeeeee', boxShadow: '0px 0 4px 0px rgba(0,0,0,0.35)', - height: '100vh', + height: '100%', }, list: { padding: 0, From 42e24486eb6d1eceb1a51073c8588c15ee1e4aef Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 7 Feb 2020 13:40:02 +0100 Subject: [PATCH 10/30] front/core/DefaultWidgetView: tweak padding --- .../DefaultWidgetView/DefaultWidgetView.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/frontend/packages/core/src/components/DefaultWidgetView/DefaultWidgetView.tsx b/frontend/packages/core/src/components/DefaultWidgetView/DefaultWidgetView.tsx index c7ec02b4cf..1b3291a01a 100644 --- a/frontend/packages/core/src/components/DefaultWidgetView/DefaultWidgetView.tsx +++ b/frontend/packages/core/src/components/DefaultWidgetView/DefaultWidgetView.tsx @@ -15,15 +15,17 @@ const WidgetViewComponent: FC = ({ widgets }) => { const classes = useStyles(); return ( - - {widgets.map(({ size, component: WidgetComponent }, index) => ( - - - - - - ))} - +
+ + {widgets.map(({ size, component: WidgetComponent }, index) => ( + + + + + + ))} + +
); }; From bb15807004d3bc51f1612a2f3fa4e0757e677e4c Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 7 Feb 2020 13:40:21 +0100 Subject: [PATCH 11/30] front/plugins/github-actions: register build info card and popuplate card --- .../BuildInfoCard/BuildInfoCard.tsx | 83 ++++++++++++++++++- .../plugins/github-actions/src/plugin.ts | 4 +- 2 files changed, 84 insertions(+), 3 deletions(-) diff --git a/frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx b/frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx index 38fc2266db..823b43a21a 100644 --- a/frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx +++ b/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 => ({ + root: { + // height: 400, + }, + title: { + paddingBottom: theme.spacing(1), + }, +})); const BuildInfoCard: FC<{}> = () => { - return Last build was acb67fa3b5472w; + const classes = useStyles(); + const status = useAsync(() => client.listBuilds('entity:spotify:backstage')); + + let content: JSX.Element; + + if (status.loading) { + content = ; + } else if (status.error) { + content = ( + + Failed to load builds, {status.error.message} + + ); + } else { + const [build] = + status.value?.filter(({ branch }) => branch === 'master') ?? []; + + content = ( + + + + + Message + + + + {build?.message} + + + + + + Commit ID + + {build?.commitId} + + + + Status + + {build?.status} + + +
+ ); + } + + return ( +
+ + Master Build + + {content} +
+ ); }; export default BuildInfoCard; diff --git a/frontend/packages/plugins/github-actions/src/plugin.ts b/frontend/packages/plugins/github-actions/src/plugin.ts index d95d5b5bdc..0f5a7f9607 100644 --- a/frontend/packages/plugins/github-actions/src/plugin.ts +++ b/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 }); }, }); From c21263d64cf95f2d62af7b76745ed96a5f333d86 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 7 Feb 2020 13:40:35 +0100 Subject: [PATCH 12/30] front/app/entities: add build into card to service entities --- frontend/packages/app/src/entities/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/app/src/entities/index.ts b/frontend/packages/app/src/entities/index.ts index d0839118f5..9823b7fa38 100644 --- a/frontend/packages/app/src/entities/index.ts +++ b/frontend/packages/app/src/entities/index.ts @@ -13,7 +13,7 @@ import GithubActionsPlugin from '@backstage/plugin-github-actions'; /* SERVICE */ const serviceOverviewPage = createWidgetView() .add({ size: 4, component: MockEntityCard }) - .add({ size: 4, component: MockEntityCard }); + .register(GithubActionsPlugin); const serviceView = createEntityPage() .addPage('Overview', WebIcon, '/overview', serviceOverviewPage) From e33fcdae78151227bd0e47ed3db9323278b103bf Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Fri, 7 Feb 2020 14:07:40 +0100 Subject: [PATCH 13/30] Pass metadata description --- .../components/CreateEntityFormPage/CreateEntityFormPage.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx index f93554fc51..ab20425d67 100644 --- a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx @@ -27,7 +27,9 @@ const CreateEntityFormPage = () => { const req = new scaffolderV1.CreateRequest(); req.setComponentId(values.entityId); req.setTemplateId(templateId); - // req.setOrg('soapraj'); + req.setMetadata({ + description: values.description + }); req.setPrivate(false); client.create(req).then((res: scaffolderV1.CreateReply) => { console.log('COMPONENT CREATED'); From f57b897dd0dcde395f001869335aa85027fbecf2 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 7 Feb 2020 14:14:17 +0100 Subject: [PATCH 14/30] front/plugins/github-actions: add back button to details page --- .../BuildDetailsPage/BuildDetailsPage.tsx | 133 ++++++++++-------- 1 file changed, 76 insertions(+), 57 deletions(-) diff --git a/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx b/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx index 51a693ce31..f66fc16927 100644 --- a/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx +++ b/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx @@ -15,13 +15,22 @@ import { makeStyles, ButtonGroup, Button, + Theme, } from '@material-ui/core'; +import { RelativeEntityLink } from '@backstage/core'; -const useStyles = makeStyles({ +const useStyles = makeStyles(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 +56,71 @@ const BuildDetailsPage: FC = () => { const details = status.value; return ( - - - - - - Branch - - {details?.build.branch} - - - - Message - - {details?.build.message} - - - - Commit ID - - {details?.build.commitId} - - - - Status - - {details?.build.status} - - - - Author - - {details?.author} - - - - Links - - - - - - - - - -
- +
+ + + + <{' '} + + + Build Details + + + + + + + Branch + + {details?.build.branch} + + + + Message + + {details?.build.message} + + + + Commit ID + + {details?.build.commitId} + + + + Status + + {details?.build.status} + + + + Author + + {details?.author} + + + + Links + + + + + + + + + +
+ +
); }; From bdcab1fee7c6e5b47860a9398ef7fc88addde57d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jefferson=20Gir=C3=A3o?= Date: Fri, 7 Feb 2020 14:14:39 +0100 Subject: [PATCH 15/30] fix: initialize db properly, add cfg and logs --- backend/inventory/config/config.go | 73 +++++++++++++++++++++++++++++ backend/inventory/go.mod | 3 ++ backend/inventory/go.sum | 12 +++++ backend/inventory/inventory.db | Bin 0 -> 32768 bytes backend/inventory/main.go | 63 ++++++++++++++++++++++--- 5 files changed, 144 insertions(+), 7 deletions(-) create mode 100644 backend/inventory/config/config.go create mode 100644 backend/inventory/inventory.db diff --git a/backend/inventory/config/config.go b/backend/inventory/config/config.go new file mode 100644 index 0000000000..604dd9d55f --- /dev/null +++ b/backend/inventory/config/config.go @@ -0,0 +1,73 @@ +package config + +import ( + "fmt" + "github.com/spotify/backstage/inventory/storage" + "os" + + "github.com/BurntSushi/toml" + "github.com/kardianos/osext" + "github.com/sirupsen/logrus" +) + +// Config struct holds the current configuration +type Config struct { + Server struct { + Address string + Port int + } + + Logging struct { + Format string + Level string + } + + DB storage.Config +} + +// Initialize a new Config +func Initialize(configFile string) *Config { + cfg := DefaultConfig() + ReadConfigFile(cfg, getConfigFilePath(configFile)) + + return cfg +} + +// DefaultConfig returns a Config struct with default values +func DefaultConfig() *Config { + cfg := &Config{} + + cfg.Server.Address = "0.0.0.0" + cfg.Server.Port = 50051 + + cfg.Logging.Format = "text" + cfg.Logging.Level = "DEBUG" + + return cfg +} + +func getConfigFilePath(configPath string) string { + if configPath != "" { + if _, err := os.Stat(configPath); err == nil { + return configPath + } + panic(fmt.Sprintf("unable to open %s.", configPath)) + } + path, _ := osext.ExecutableFolder() + path = fmt.Sprintf("%s/config.toml", path) + if _, err := os.Open(path); err == nil { + return path + } + return "" +} + +func ReadConfigFile(cfg *Config, path string) { + _, err := os.Stat(path) + if err != nil { + return + } + + if _, err := toml.DecodeFile(path, cfg); err != nil { + logrus.WithError(err).Fatal("unable to read config") + } +} \ No newline at end of file diff --git a/backend/inventory/go.mod b/backend/inventory/go.mod index 5cad1fe68f..cf5ec9cea7 100644 --- a/backend/inventory/go.mod +++ b/backend/inventory/go.mod @@ -5,7 +5,10 @@ go 1.12 replace github.com/spotify/backstage/proto => ../proto require ( + github.com/BurntSushi/toml v0.3.1 github.com/golang/protobuf v1.3.3 + github.com/kardianos/osext v0.0.0-20190222173326-2bc1f35cddc0 + github.com/sirupsen/logrus v1.4.2 github.com/spotify/backstage/proto v0.0.0-00010101000000-000000000000 go.etcd.io/bbolt v1.3.3 golang.org/x/lint v0.0.0-20190313153728-d0100b6bd8b3 diff --git a/backend/inventory/go.sum b/backend/inventory/go.sum index f1c63ec689..3a111781a5 100644 --- a/backend/inventory/go.sum +++ b/backend/inventory/go.sum @@ -1,7 +1,9 @@ cloud.google.com/go v0.26.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMTw= +github.com/BurntSushi/toml v0.3.1 h1:WXkYYl6Yr3qBf1K79EBnL4mak0OimBfB0XUf9Vl28OQ= github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU= github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU= github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw= +github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38= github.com/envoyproxy/go-control-plane v0.9.1-0.20191026205805-5f8ba28d4473/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4= github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c= github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b/go.mod h1:SBH7ygxi8pfUlaOkMMuAQtPIUF8ecWP5IEl/CR7VP2Q= @@ -12,7 +14,15 @@ github.com/golang/protobuf v1.3.2/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5y github.com/golang/protobuf v1.3.3 h1:gyjaxf+svBWX08ZjK86iN9geUJF0H6gp2IRKX6Nf6/I= github.com/golang/protobuf v1.3.3/go.mod h1:vzj43D7+SQXF/4pzW/hwtAqwc6iTitCiVSaWz5lYuqw= github.com/google/go-cmp v0.2.0/go.mod h1:oXzfMopK8JAjlY9xF4vHSVASa0yLyX7SntLO5aqRK0M= +github.com/kardianos/osext v0.0.0-20190222173326-2bc1f35cddc0 h1:iQTw/8FWTuc7uiaSepXwyf3o52HaUYcV+Tu66S3F5GA= +github.com/kardianos/osext v0.0.0-20190222173326-2bc1f35cddc0/go.mod h1:1NbS8ALrpOvjt0rHPNLyCIeMtbizbir8U//inJ+zuB8= +github.com/konsorten/go-windows-terminal-sequences v1.0.1/go.mod h1:T0+1ngSBFLxvqU3pZ+m/2kptfBszLMUkC4ZK/EgS/cQ= +github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4= github.com/prometheus/client_model v0.0.0-20190812154241-14fe0d1b01d4/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA= +github.com/sirupsen/logrus v1.4.2 h1:SPIRibHv4MatM3XXNO2BJeFLZwZ2LvZgfQ5+UNI2im4= +github.com/sirupsen/logrus v1.4.2/go.mod h1:tLMulIdttU9McNUspp0xgXVQah82FyeX6MwdIuYE2rE= +github.com/stretchr/objx v0.1.1/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME= +github.com/stretchr/testify v1.2.2/go.mod h1:a8OnRcib4nhh0OaRAV+Yts87kKdq0PP7pXfy6kDkUVs= go.etcd.io/bbolt v1.3.3 h1:MUGmc65QhB3pIlaQ5bB4LwqSj6GIonVJXpZiaKNyaKk= go.etcd.io/bbolt v1.3.3/go.mod h1:IbVyRI1SCnLcuJnV2u8VeU0CEYM7e686BmAb1XKL+uU= golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w= @@ -32,6 +42,8 @@ golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJ golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY= golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a h1:1BGLXjeY4akVXGgbC9HugT3Jv3hCI0z56oJR5vAMgBU= golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY= +golang.org/x/sys v0.0.0-20190422165155-953cdadca894 h1:Cz4ceDQGXuKRnVBDTS23GTn/pU5OE2C0WrNTOYK1Uuc= +golang.org/x/sys v0.0.0-20190422165155-953cdadca894/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs= golang.org/x/text v0.3.0 h1:g61tztE5qeGQ89tm6NTjjM9VPIm088od1l6aSorWRWg= golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ= golang.org/x/tools v0.0.0-20190114222345-bf090417da8b/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ= diff --git a/backend/inventory/inventory.db b/backend/inventory/inventory.db new file mode 100644 index 0000000000000000000000000000000000000000..81b38a7c1814ca95db71cd9fcb0dbe0cf9a8ab4c GIT binary patch literal 32768 zcmeI)J#NA<6aZlJQ>IE~hJ~pU5<}IcCtzUV3P_B=5SI3++yQpBCd6+5!G=^z{URlH z9LIY4wiiDorS|CO_IP+bcANh2dOSZ)FS#?w?PYG=-+qjzKb!L@=4lBKAV7cs0RjXF z5FkK+0D*D@Iysa_`G4;w)X4W^e!TxS|6Yzh7wAV7cs0RjXF5FkK+009Dj zFA#P7-PBg{H`k^XpgAY?x!P6L*KD?5SNqGQ9=dz@esGt?AOQjd2oNAZfB*pk1PBl) zLLmO Date: Fri, 7 Feb 2020 14:14:42 +0100 Subject: [PATCH 16/30] front/plugins/github-actions: add nicer build status indicator --- frontend/packages/core/src/api/types.ts | 2 +- .../BuildDetailsPage/BuildDetailsPage.tsx | 5 +- .../BuildInfoCard/BuildInfoCard.tsx | 5 +- .../BuildListPage/BuildListPage.tsx | 6 +- .../BuildStatusIndicator.tsx | 63 +++++++++++++++++++ .../components/BuildStatusIndicator/index.ts | 1 + 6 files changed, 77 insertions(+), 5 deletions(-) create mode 100644 frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/BuildStatusIndicator.tsx create mode 100644 frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts diff --git a/frontend/packages/core/src/api/types.ts b/frontend/packages/core/src/api/types.ts index 8462a5a1b9..730d237f38 100644 --- a/frontend/packages/core/src/api/types.ts +++ b/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'; }>; diff --git a/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx b/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx index f66fc16927..b21cbab658 100644 --- a/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx +++ b/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx @@ -18,6 +18,7 @@ import { Theme, } from '@material-ui/core'; import { RelativeEntityLink } from '@backstage/core'; +import BuildStatusIndicator from '../BuildStatusIndicator'; const useStyles = makeStyles(theme => ({ root: { @@ -90,7 +91,9 @@ const BuildDetailsPage: FC = () => { Status - {details?.build.status} + + + diff --git a/frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx b/frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx index 823b43a21a..88875c8dcf 100644 --- a/frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx +++ b/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<{}> = () => { Status - {build?.status} + + + diff --git a/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx b/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx index 47dfb2e8d9..4f2f32d0b6 100644 --- a/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx +++ b/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<{}> = () => { {status.value!.map(build => ( - {/* TODO: make this an indicating blobby thing */} - {build.status} + + + diff --git a/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/BuildStatusIndicator.tsx b/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/BuildStatusIndicator.tsx new file mode 100644 index 0000000000..642eac350e --- /dev/null +++ b/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({ + icon: style => ({ + color: style.color, + }), +}); + +const BuildStatusIndicator: FC = props => { + const { status } = props; + const style = (status && styles[status]) || styles[BuildStatus.Null]; + + const classes = useStyles(style); + + const IconComponent = style.icon; + + return ( +
+ +
+ ); +}; + +export default BuildStatusIndicator; diff --git a/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts b/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts new file mode 100644 index 0000000000..de5992cc40 --- /dev/null +++ b/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts @@ -0,0 +1 @@ +export { default } from './BuildStatusIndicator'; From 22f588c07e004ee35963809c83a83b28fc1524f8 Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Fri, 7 Feb 2020 14:18:19 +0100 Subject: [PATCH 17/30] Use Struct for metadata --- .../CreateEntityFormPage.tsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx index ab20425d67..d596079509 100644 --- a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx @@ -4,6 +4,7 @@ import { useFormik } from 'formik'; import { Button, TextField, makeStyles } from '@material-ui/core'; import { InfoCard } from '@backstage/core'; import { scaffolderV1 } from '@backstage/protobuf-definitions'; +import * as google_protobuf_struct_pb from 'google-protobuf/google/protobuf/struct_pb.js'; const useStyles = makeStyles(theme => ({ formGroup: { @@ -23,19 +24,24 @@ const CreateEntityFormPage = () => { }, onSubmit: (values: any) => { console.log(JSON.stringify(values, null, 2)); + console.log(google_protobuf_struct_pb); const client = new scaffolderV1.Client('http://localhost:8080'); const req = new scaffolderV1.CreateRequest(); req.setComponentId(values.entityId); req.setTemplateId(templateId); - req.setMetadata({ - description: values.description - }); + req.setMetadata( + new google_protobuf_struct_pb.Struct({ + fields: { + description: values.description, + }, + }), + ); req.setPrivate(false); client.create(req).then((res: scaffolderV1.CreateReply) => { console.log('COMPONENT CREATED'); console.log(res.toObject().componentId); }); - } + }, }); return ( @@ -61,7 +67,11 @@ const CreateEntityFormPage = () => { >
-
From 17e60d92e331e6da4ae016cea3bae9855bd09c53 Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Fri, 7 Feb 2020 14:32:03 +0100 Subject: [PATCH 18/30] cookiecutter seems to work --- backend/Dockerfile | 3 ++- .../CreateEntityFormPage/CreateEntityFormPage.tsx | 9 +++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/backend/Dockerfile b/backend/Dockerfile index 40b231027d..8cb7508e24 100644 --- a/backend/Dockerfile +++ b/backend/Dockerfile @@ -31,5 +31,6 @@ CMD ["./service"] ### Scaffolder Stage ### needs extra cookiecutter FROM default AS scaffolder -RUN apt-get update && apt-get install -y python-pip +RUN apt-get update && apt-get install -y python-pip +RUN apt-get install -y python-backports.functools-lru-cache RUN pip install cookiecutter==1.7.0 --index-url https://pypi.python.org/simple diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx index d596079509..7409cad25c 100644 --- a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx @@ -23,17 +23,14 @@ const CreateEntityFormPage = () => { description: '', }, onSubmit: (values: any) => { - console.log(JSON.stringify(values, null, 2)); - console.log(google_protobuf_struct_pb); const client = new scaffolderV1.Client('http://localhost:8080'); const req = new scaffolderV1.CreateRequest(); req.setComponentId(values.entityId); req.setTemplateId(templateId); + req.setMetadata( - new google_protobuf_struct_pb.Struct({ - fields: { - description: values.description, - }, + new google_protobuf_struct_pb.Struct.fromJavaScript({ + description: values.description, }), ); req.setPrivate(false); From 2bed4f1e1af1d47cba25d0efec495c6b2e313b8a Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 7 Feb 2020 14:32:20 +0100 Subject: [PATCH 19/30] README: update secrets.env docs --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d230c4c036..dac98d9f28 100644 --- a/README.md +++ b/README.md @@ -28,10 +28,12 @@ See [proto/README.md](proto/README.md) for more information. ## Running Locally -First step is to set up a `secrets.env` file in the root of the repo. Use the following template but fill in your own values: +First step is to set up a `secrets.env` file in the root of the repo. Use the following template but fill in your own values (without quotes!): ```bash -# Github Access token with repo scope, created at https://github.com/settings/tokens +# GitHub username +BOSS_GH_USERNAME= +# GitHub Access token with repo scope, created at https://github.com/settings/tokens BOSS_GH_ACCESS_TOKEN= ``` From 3d70b117cf65e7f5168246df5211409de6117ced Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Fri, 7 Feb 2020 13:49:10 +0100 Subject: [PATCH 20/30] Added a Brewfile --- Brewfile | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 Brewfile diff --git a/Brewfile b/Brewfile new file mode 100644 index 0000000000..d5319ac17c --- /dev/null +++ b/Brewfile @@ -0,0 +1,21 @@ +### +# This will download all Homebrew dependencies. +### + +# Shared +brew "git" +brew "docker" +brew "docker-compose" +brew "protobuf" +brew "prototool" +cask "docker" + +# Frontend +brew "node@12" +brew "yarn" + +# Backend +brew "go" + + + From 0d1842658c9a61eccc07921d1539ad005cd39c38 Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Fri, 7 Feb 2020 14:36:12 +0100 Subject: [PATCH 21/30] Fixed merge conflict --- Makefile | 36 +++++++++++++++++++++++++++++++++--- README.md | 23 +++++++++++++++++------ secrets.env.example | 15 +++++++++++++++ 3 files changed, 65 insertions(+), 9 deletions(-) diff --git a/Makefile b/Makefile index cee6d132cf..0dace9771f 100644 --- a/Makefile +++ b/Makefile @@ -1,12 +1,27 @@ ### -# All-in-one build command. +# All-in-one commands ### -build: build-yarn-dependencies build-protocol-definitions +init: init-secrets +install: install-homebrew-dependencies install-yarn-dependencies +start: build-protocol-definitions start-backends start-frontend +stop: stop-backends + +### +# Setup secrets +### +init-secrets: + cp secrets.env.example secrets.env + +### +# Install any Homebrew dependencies specified in Brewfile +### +install-homebrew-dependencies: + brew bundle ### # Download dependencies from the Frontend using Yarn. ### -build-yarn-dependencies: +install-yarn-dependencies: yarn --cwd ${PWD}/frontend install ### @@ -22,3 +37,18 @@ build-protocol-definitions: ### scaffold-new-frontend-plugin: ${PWD}/tools/cookiecutter/init.sh frontend/packages/plugins/_template --output-dir frontend/packages/plugins + +### +# Run the backend services +### +start-backends: + ${PWD}/docker-compose.yaml up --build --detach + +stop-backends: + ${PWD}/docker-compose.yaml down + +### +# Run the frontend services. +### +start-frontend: + yarn --pwd ${PWD}/frontend start diff --git a/README.md b/README.md index dac98d9f28..5819d80994 100644 --- a/README.md +++ b/README.md @@ -8,12 +8,22 @@ Backstage is an open platform for building developer portals. ## Getting started +### Install Dependencies with Homebrew and Yarn + +Run the following to install relevant dependencies (such as Git, Docker, etc): + +```bash +# If you don't have Homebrew, run the following command: +# $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" +$ make install +``` + ### Secrets To setup secrets, copy the `secrets.env.example` to `secrets.env` as such: ```bash -$ cp secrets.env.example secrets.env +$ make init-secrets ``` ### Protobuf Definitions @@ -28,6 +38,7 @@ See [proto/README.md](proto/README.md) for more information. ## Running Locally +<<<<<<< HEAD First step is to set up a `secrets.env` file in the root of the repo. Use the following template but fill in your own values (without quotes!): ```bash @@ -45,12 +56,12 @@ $ ./docker-compose.yaml up --build And finally install all dependencies and start serving the frontend using `yarn`: +======= + +> > > > > > > f7ec4a6... Polishes + ```bash -$ cd frontend - -$ yarn install - -$ yarn start +$ make start ``` ## Plugins diff --git a/secrets.env.example b/secrets.env.example index c83bd2158b..bac99824e0 100644 --- a/secrets.env.example +++ b/secrets.env.example @@ -1,4 +1,19 @@ +### +# The environment you want to run the frontend (running using create-react-app) in. +# In production, these should be `production` and false respectively. +### NODE_ENV=development NODE_DEBUG=true + +### +# This is the full HTTP endpoint to the GraphQL API you'll want to point to. +# For example (in development): http://localhost:8080/graphql +### REACT_APP_GRAPHQL_API="" + +### +# A valid GitHub access token. +# To create one, visit https://github.com/settings/tokens in your browser. +### +BOSS_GH_USERNAME="" BOSS_GH_ACCESS_TOKEN="" From fdaa0538d8d3d118ee5c544528b9d617fc53a54c Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Fri, 7 Feb 2020 14:10:36 +0100 Subject: [PATCH 22/30] Removed newlines --- Brewfile | 3 --- 1 file changed, 3 deletions(-) diff --git a/Brewfile b/Brewfile index d5319ac17c..8e43ffdd88 100644 --- a/Brewfile +++ b/Brewfile @@ -16,6 +16,3 @@ brew "yarn" # Backend brew "go" - - - From 779559b4a5febf91b97760dc350657cb6ef67fb2 Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Fri, 7 Feb 2020 14:15:06 +0100 Subject: [PATCH 23/30] fix typo --- Makefile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Makefile b/Makefile index 0dace9771f..e8f709ad74 100644 --- a/Makefile +++ b/Makefile @@ -51,4 +51,4 @@ stop-backends: # Run the frontend services. ### start-frontend: - yarn --pwd ${PWD}/frontend start + yarn --cwd ${PWD}/frontend start From a84004f00ac5eb0ec093498414e72e7d73eca56c Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Fri, 7 Feb 2020 14:27:23 +0100 Subject: [PATCH 24/30] Added forego --- Brewfile | 1 + 1 file changed, 1 insertion(+) diff --git a/Brewfile b/Brewfile index 8e43ffdd88..9dd655cee3 100644 --- a/Brewfile +++ b/Brewfile @@ -8,6 +8,7 @@ brew "docker" brew "docker-compose" brew "protobuf" brew "prototool" +brew "forego" cask "docker" # Frontend From deda60b8434206a136f4b7fafd98f1f801b44675 Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Fri, 7 Feb 2020 14:33:25 +0100 Subject: [PATCH 25/30] Updated to use forego --- Brewfile | 1 - Makefile | 27 +++++++++------------------ 2 files changed, 9 insertions(+), 19 deletions(-) diff --git a/Brewfile b/Brewfile index 9dd655cee3..8e43ffdd88 100644 --- a/Brewfile +++ b/Brewfile @@ -8,7 +8,6 @@ brew "docker" brew "docker-compose" brew "protobuf" brew "prototool" -brew "forego" cask "docker" # Frontend diff --git a/Makefile b/Makefile index e8f709ad74..125f74565e 100644 --- a/Makefile +++ b/Makefile @@ -2,9 +2,9 @@ # All-in-one commands ### init: init-secrets -install: install-homebrew-dependencies install-yarn-dependencies -start: build-protocol-definitions start-backends start-frontend -stop: stop-backends +install: install-homebrew-dependencies install-yarn-dependencies install-forego +start: build-protocol-definitions + forego start ### # Setup secrets @@ -24,6 +24,12 @@ install-homebrew-dependencies: install-yarn-dependencies: yarn --cwd ${PWD}/frontend install +### +# Install Forego for running both frontend and backend in a single command. +### +install-forego: + go get -u github.com/ddollar/forego + ### # Protobuf Definitions. # This will generate Protobuf definitions from ./proto to both Go and JS/TypeScript. @@ -37,18 +43,3 @@ build-protocol-definitions: ### scaffold-new-frontend-plugin: ${PWD}/tools/cookiecutter/init.sh frontend/packages/plugins/_template --output-dir frontend/packages/plugins - -### -# Run the backend services -### -start-backends: - ${PWD}/docker-compose.yaml up --build --detach - -stop-backends: - ${PWD}/docker-compose.yaml down - -### -# Run the frontend services. -### -start-frontend: - yarn --cwd ${PWD}/frontend start From 6f4b7d9c9308256059e271f5f08fec3e3b14739d Mon Sep 17 00:00:00 2001 From: Raghunandan Balachandran Date: Fri, 7 Feb 2020 14:37:28 +0100 Subject: [PATCH 26/30] try require instead of import --- .../components/CreateEntityFormPage/CreateEntityFormPage.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx index 7409cad25c..7226c82ea7 100644 --- a/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx +++ b/frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx @@ -4,7 +4,8 @@ import { useFormik } from 'formik'; import { Button, TextField, makeStyles } from '@material-ui/core'; import { InfoCard } from '@backstage/core'; import { scaffolderV1 } from '@backstage/protobuf-definitions'; -import * as google_protobuf_struct_pb from 'google-protobuf/google/protobuf/struct_pb.js'; +const google_protobuf_struct_pb = require('google-protobuf/google/protobuf/struct_pb.js'); +// import * as google_protobuf_struct_pb from 'google-protobuf/google/protobuf/struct_pb.js'; const useStyles = makeStyles(theme => ({ formGroup: { From a3077d4c89b27f521b4f453c035c713bd81b1523 Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Fri, 7 Feb 2020 14:37:53 +0100 Subject: [PATCH 27/30] Cleanup README --- README.md | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/README.md b/README.md index 5819d80994..75bbf2a0a7 100644 --- a/README.md +++ b/README.md @@ -38,27 +38,7 @@ See [proto/README.md](proto/README.md) for more information. ## Running Locally -<<<<<<< HEAD -First step is to set up a `secrets.env` file in the root of the repo. Use the following template but fill in your own values (without quotes!): - -```bash -# GitHub username -BOSS_GH_USERNAME= -# GitHub Access token with repo scope, created at https://github.com/settings/tokens -BOSS_GH_ACCESS_TOKEN= -``` - -Then run start all backend services using `docker-compose`: - -```bash -$ ./docker-compose.yaml up --build -``` - -And finally install all dependencies and start serving the frontend using `yarn`: - -======= - -> > > > > > > f7ec4a6... Polishes +Once you've installed all dependencies, start serving the frontend using `yarn`: ```bash $ make start From 7cb5ba443d10cb0bea44131ccb251db8f9c16f29 Mon Sep 17 00:00:00 2001 From: Bilawal Hameed Date: Fri, 7 Feb 2020 14:49:36 +0100 Subject: [PATCH 28/30] Be more clear about GitHub permissions --- secrets.env.example | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/secrets.env.example b/secrets.env.example index bac99824e0..6790774c5b 100644 --- a/secrets.env.example +++ b/secrets.env.example @@ -12,7 +12,7 @@ NODE_DEBUG=true REACT_APP_GRAPHQL_API="" ### -# A valid GitHub access token. +# A valid GitHub access token. You'll need to give it access to "repo". # To create one, visit https://github.com/settings/tokens in your browser. ### BOSS_GH_USERNAME="" From e6c0b80b346a1f581a33d5e9472e579715c44faf Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 7 Feb 2020 14:56:57 +0100 Subject: [PATCH 29/30] front/plugins/home-page: nicer --- .../src/components/HomePage/HomePage.tsx | 23 +++++++++++-------- .../components/HomePage/SquadTechHealth.tsx | 4 +++- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx index db3d9fba5f..bac73580ea 100644 --- a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx +++ b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx @@ -10,6 +10,7 @@ import { theme, } from '@backstage/core'; import SquadTechHealth from './SquadTechHealth'; +import { inventoryV1 } from '@backstage/protobuf-definitions'; const useStyles = makeStyles(theme => ({ mainContentArea: { @@ -17,7 +18,7 @@ const useStyles = makeStyles(theme => ({ overflowY: 'auto', }, pageBody: { - padding: theme.spacing(2), + padding: theme.spacing(3), }, avatarButton: { padding: theme.spacing(2), @@ -27,7 +28,7 @@ const useStyles = makeStyles(theme => ({ const HomePage: FC<{}> = () => { const classes = useStyles(); const columns = [ - { id: 'id', label: 'ID' }, + { id: 'entity', label: 'ID' }, { id: 'kind', label: 'Kind' }, ]; @@ -36,7 +37,8 @@ const HomePage: FC<{}> = () => { { id: 'backstage-microsite', kind: 'website' }, ].map(({ id, kind }) => { return { - id: ( + id, + entity: ( {id} @@ -52,15 +54,18 @@ const HomePage: FC<{}> = () => {
- - - - - - + + + + Things you own + + + + +
diff --git a/frontend/packages/plugins/home-page/src/components/HomePage/SquadTechHealth.tsx b/frontend/packages/plugins/home-page/src/components/HomePage/SquadTechHealth.tsx index 5eeaeafc7f..f20279668e 100644 --- a/frontend/packages/plugins/home-page/src/components/HomePage/SquadTechHealth.tsx +++ b/frontend/packages/plugins/home-page/src/components/HomePage/SquadTechHealth.tsx @@ -6,7 +6,9 @@ import { HorizontalScrollGrid, ProgressCard } from '@backstage/core'; const SquadTechHealth: FC<{}> = () => { return ( <> - Team Metrics + + Team Metrics + Date: Fri, 7 Feb 2020 14:57:12 +0100 Subject: [PATCH 30/30] lint fix --- .../plugins/home-page/src/components/HomePage/HomePage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx index bac73580ea..5167515116 100644 --- a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx +++ b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx @@ -10,7 +10,6 @@ import { theme, } from '@backstage/core'; import SquadTechHealth from './SquadTechHealth'; -import { inventoryV1 } from '@backstage/protobuf-definitions'; const useStyles = makeStyles(theme => ({ mainContentArea: {