diff --git a/Brewfile b/Brewfile new file mode 100644 index 0000000000..8e43ffdd88 --- /dev/null +++ b/Brewfile @@ -0,0 +1,18 @@ +### +# 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" diff --git a/Makefile b/Makefile index cee6d132cf..125f74565e 100644 --- a/Makefile +++ b/Makefile @@ -1,14 +1,35 @@ ### -# 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 install-forego +start: build-protocol-definitions + forego start + +### +# 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 +### +# 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. diff --git a/Procfile b/Procfile new file mode 100644 index 0000000000..063f838e54 --- /dev/null +++ b/Procfile @@ -0,0 +1,2 @@ +backend: docker-compose up --build +frontend: cd frontend/ && yarn install && yarn start diff --git a/README.md b/README.md index d230c4c036..75bbf2a0a7 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,27 +38,10 @@ 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: +Once you've installed all dependencies, start serving the frontend using `yarn`: ```bash -# 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`: - -```bash -$ cd frontend - -$ yarn install - -$ yarn start +$ make start ``` ## Plugins 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 0000000000..81b38a7c18 Binary files /dev/null and b/backend/inventory/inventory.db differ diff --git a/backend/inventory/main.go b/backend/inventory/main.go index 97859962b7..f406b3bb71 100644 --- a/backend/inventory/main.go +++ b/backend/inventory/main.go @@ -1,25 +1,74 @@ package main import ( - "log" + "flag" + "fmt" + "github.com/spotify/backstage/inventory/config" + "github.com/spotify/backstage/inventory/storage" "net" + "os" + "os/signal" "github.com/spotify/backstage/inventory/app" pb "github.com/spotify/backstage/proto/inventory/v1" + log "github.com/sirupsen/logrus" "google.golang.org/grpc" ) -const ( - port = ":50051" -) - func main() { - lis, err := net.Listen("tcp", port) + configFile := flag.String("config", "", "specify a config.toml file") + flag.Parse() + go catchInterrupt() + + cfg := config.Initialize(*configFile) + setupLogging(cfg) + storage := getStorage(cfg) + + address := fmt.Sprintf("%v:%v", cfg.Server.Address, cfg.Server.Port) + lis, err := net.Listen("tcp", address) if err != nil { log.Fatalf("failed to listen: %v", err) } + log.Infof("inventory service listening on: %v", address) + grpcServer := grpc.NewServer() - pb.RegisterInventoryServer(grpcServer, &app.Server{}) + pb.RegisterInventoryServer(grpcServer, &app.Server{Storage: storage}) grpcServer.Serve(lis) } + +func getStorage(cfg *config.Config) *storage.Storage { + storage, err := storage.OpenStorage(cfg.DB) + if err != nil { + log.Fatalf("could not open database: %v", err) + os.Exit(1) + } + return storage +} + +func setupLogging(cfg *config.Config) { + if cfg.Logging.Format == "json" { + log.SetFormatter(&log.JSONFormatter{ + FieldMap: log.FieldMap{ + log.FieldKeyLevel: "severity", + }, + }) + } + level, err := log.ParseLevel(cfg.Logging.Level) + if err != nil { + level = log.InfoLevel + } + log.SetOutput(os.Stdout) + log.SetLevel(level) +} + +func catchInterrupt() { + c := make(chan os.Signal, 1) + signal.Notify(c, os.Interrupt, os.Kill) + s := <-c + if s != os.Interrupt && s != os.Kill { + return + } + log.Info("shutting down...") + os.Exit(0) +} 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', 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/app/src/entities/index.ts b/frontend/packages/app/src/entities/index.ts index 4fa2254ee2..099bb1f3b0 100644 --- a/frontend/packages/app/src/entities/index.ts +++ b/frontend/packages/app/src/entities/index.ts @@ -17,8 +17,8 @@ import GithubActionsPlugin from '@backstage/plugin-github-actions'; /* SERVICE */ const serviceOverviewPage = createWidgetView() - .addComponent(MockEntityCard) - .addComponent(MockEntityCard); + .add({ size: 4, component: MockEntityCard }) + .register(GithubActionsPlugin); const serviceView = createEntityPage() .addPage('Overview', WebIcon, '/overview', serviceOverviewPage) 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/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/core/src/api/widgetView/WidgetViewBuilder.tsx b/frontend/packages/core/src/api/widgetView/WidgetViewBuilder.tsx index 3ab13c2f8c..84e231651f 100644 --- a/frontend/packages/core/src/api/widgetView/WidgetViewBuilder.tsx +++ b/frontend/packages/core/src/api/widgetView/WidgetViewBuilder.tsx @@ -1,50 +1,65 @@ -import React, { ComponentType, FC } from 'react'; +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 Props = { - app: App; - cards: ComponentType[]; -}; - -const WidgetViewComponent: FC = ({ cards }) => { - return ( -
- {cards.map((CardComponent, index) => ( - - ))} -
- ); -}; - -type WidgetViewRegistration = { - type: 'component'; - component: ComponentType; -}; +type WidgetViewRegistration = + | { + type: 'component'; + widget: Widget; + } + | { + type: 'plugin'; + plugin: BackstagePlugin; + }; 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 { + register(plugin: BackstagePlugin): WidgetViewBuilder { + this.registrations.push({ type: 'plugin', plugin }); + return this; + } + + build(_app: App): ComponentType { if (this.output) { return this.output; } - const cards = this.registrations.map(reg => { + const widgets = new Array(); + + for (const reg of this.registrations) { switch (reg.type) { case 'component': - return reg.component; + 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 = () => ; + 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/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 69aed8bd9f..93e0b50c59 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: '100%', }, 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', 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..1b3291a01a --- /dev/null +++ b/frontend/packages/core/src/components/DefaultWidgetView/DefaultWidgetView.tsx @@ -0,0 +1,32 @@ +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'; 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..7226c82ea7 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,9 @@ 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 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: { @@ -21,7 +24,21 @@ const CreateEntityFormPage = () => { description: '', }, onSubmit: (values: any) => { - alert(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.setMetadata( + new google_protobuf_struct_pb.Struct.fromJavaScript({ + description: values.description, + }), + ); + req.setPrivate(false); + client.create(req).then((res: scaffolderV1.CreateReply) => { + console.log('COMPONENT CREATED'); + console.log(res.toObject().componentId); + }); }, }); @@ -32,9 +49,9 @@ const CreateEntityFormPage = () => {
@@ -43,12 +60,16 @@ const CreateEntityFormPage = () => { label="Description:" name="description" id="description" - value={formik.values.description} + onChange={formik.handleChange} variant="outlined" >
-
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..b21cbab658 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,23 @@ import { makeStyles, ButtonGroup, Button, + Theme, } from '@material-ui/core'; +import { RelativeEntityLink } from '@backstage/core'; +import BuildStatusIndicator from '../BuildStatusIndicator'; -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 +57,73 @@ 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 + + + + + + + + Author + + {details?.author} + + + + Links + + + + + + + + + +
+ +
); }; 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..88875c8dcf 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,90 @@ 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'; +import BuildStatusIndicator from '../BuildStatusIndicator'; + +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 + + + + + + +
+ ); + } + + return ( +
+ + Master Build + + {content} +
+ ); }; export default BuildInfoCard; 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..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'); @@ -35,7 +36,7 @@ const useStyles = makeStyles(theme => ({ padding: theme.spacing(2), }, title: { - paddingBottom: theme.spacing(2), + padding: theme.spacing(1, 0, 2, 0), }, })); @@ -49,7 +50,7 @@ const BuildListPage: FC<{}> = () => { content = ; } else if (status.error) { content = ( - + Failed to load builds, {status.error.message} ); @@ -68,8 +69,9 @@ const BuildListPage: FC<{}> = () => { {status.value!.map(build => ( - {/* TODO: make this an indicating blobby thing */} - {build.status} + + + @@ -101,7 +103,7 @@ const BuildListPage: FC<{}> = () => { return (
- + CI/CD Builds {content} 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'; 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 }); }, }); 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..5167515116 100644 --- a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx +++ b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx @@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({ overflowY: 'auto', }, pageBody: { - padding: theme.spacing(2), + padding: theme.spacing(3), }, avatarButton: { padding: theme.spacing(2), @@ -27,7 +27,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 +36,8 @@ const HomePage: FC<{}> = () => { { id: 'backstage-microsite', kind: 'website' }, ].map(({ id, kind }) => { return { - id: ( + id, + entity: ( {id} @@ -52,15 +53,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 + = ({ 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" diff --git a/secrets.env.example b/secrets.env.example index cad253f585..ccd6a2c02c 100644 --- a/secrets.env.example +++ b/secrets.env.example @@ -1,5 +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= -BOSS_GH_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= +BOSS_GH_ACCESS_TOKEN=