From 16054a87ca9fa1ec7dd20e640268ff69b021ecf5 Mon Sep 17 00:00:00 2001 From: Ivan Shmidt Date: Wed, 17 Jun 2020 21:21:32 +0200 Subject: [PATCH 1/4] feat(scaffolder): load data from catalog api --- plugins/scaffolder/package.json | 2 + .../src/components/ScaffolderPage/index.tsx | 70 ++++++++++++------- .../src/components/TemplateCard.tsx | 2 +- 3 files changed, 47 insertions(+), 27 deletions(-) diff --git a/plugins/scaffolder/package.json b/plugins/scaffolder/package.json index 84132a42f9..87ce329b39 100644 --- a/plugins/scaffolder/package.json +++ b/plugins/scaffolder/package.json @@ -22,7 +22,9 @@ "clean": "backstage-cli clean" }, "dependencies": { + "@backstage/catalog-model": "^0.1.1-alpha.9", "@backstage/core": "^0.1.1-alpha.9", + "@backstage/plugin-catalog": "^0.1.1-alpha.9", "@backstage/theme": "^0.1.1-alpha.9", "@material-ui/core": "^4.9.1", "@material-ui/icons": "^4.9.1", diff --git a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx index aa1cf36082..15d2efe1f4 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx @@ -22,24 +22,38 @@ import { Header, Page, pageTheme, + useApi, } from '@backstage/core'; -import { Typography, Link, Button } from '@material-ui/core'; +import { catalogApiRef } from '@backstage/plugin-catalog'; +import { + Typography, + Link, + Button, + Grid, + LinearProgress, +} from '@material-ui/core'; import { Link as RouterLink } from 'react-router-dom'; import TemplateCard from '../TemplateCard'; +import { useAsync } from 'react-use'; +import { TemplateEntityV1alpha1 } from '@backstage/catalog-model'; -// TODO(blam): Connect to backend -const STATIC_DATA = [ - { - id: 'react-ssr-template', - type: 'web-infra', - name: 'SSR React Website', - tags: ['Experimental'], - description: - 'Next.js application skeleton for creating isomorphic web applications.', - ownerId: 'something', - }, -]; const ScaffolderPage: React.FC<{}> = () => { + const catalogApi = useApi(catalogApiRef); + + const { value, loading } = useAsync(async () => { + const entities = await catalogApi.getEntities({ kind: 'Template' }); + return (entities as TemplateEntityV1alpha1[]).map(template => ({ + id: template.metadata.uid, + type: template.spec.type, + name: template.metadata.name, + // TODO(shmidt-i): decide on tags + tags: ['not-implemented'], + description: template.metadata.description ?? '-', + // TODO(shmidt-i): decide on owner + ownerId: '-', + })); + }); + return (
= () => { . -
- {STATIC_DATA.map(item => { - return ( - - ); - })} -
+ {loading ? ( + + ) : ( + + {value!.map(item => { + return ( + + ); + })} + + )} ); diff --git a/plugins/scaffolder/src/components/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard.tsx index 56d8907f7b..618eda64f1 100644 --- a/plugins/scaffolder/src/components/TemplateCard.tsx +++ b/plugins/scaffolder/src/components/TemplateCard.tsx @@ -67,7 +67,7 @@ const TemplateCard: FC = ({
{tags?.map(tag => ( - + ))} {description} From 2808d8aa06c931dbe176b3a5dc999e193dd5dae9 Mon Sep 17 00:00:00 2001 From: Ivan Shmidt Date: Sat, 20 Jun 2020 13:55:22 +0200 Subject: [PATCH 2/4] feat(scaffolder): use swr, pretty template mocks, move out grid item --- .../react-ssr-template/template.yaml | 6 +- .../springboot-template/template.yaml | 12 ++++ plugins/scaffolder-backend/scripts/mock-data | 16 +++-- plugins/scaffolder/package.json | 3 +- .../src/components/ScaffolderPage/index.tsx | 62 ++++++++++--------- .../src/components/TemplateCard.tsx | 43 +++++-------- 6 files changed, 78 insertions(+), 64 deletions(-) create mode 100644 plugins/scaffolder-backend/sample-templates/springboot-template/template.yaml diff --git a/plugins/scaffolder-backend/sample-templates/react-ssr-template/template.yaml b/plugins/scaffolder-backend/sample-templates/react-ssr-template/template.yaml index 17f9ebbf7d..058e2a715f 100644 --- a/plugins/scaffolder-backend/sample-templates/react-ssr-template/template.yaml +++ b/plugins/scaffolder-backend/sample-templates/react-ssr-template/template.yaml @@ -4,7 +4,9 @@ metadata: name: react-ssr-template title: React SSR Template description: Next.js application skeleton for creating isomorphic web applications. + annotations: + tags: Recommended,React spec: - type: cookiecutter + processor: cookiecutter + type: website path: '.' - diff --git a/plugins/scaffolder-backend/sample-templates/springboot-template/template.yaml b/plugins/scaffolder-backend/sample-templates/springboot-template/template.yaml new file mode 100644 index 0000000000..d44d926ef4 --- /dev/null +++ b/plugins/scaffolder-backend/sample-templates/springboot-template/template.yaml @@ -0,0 +1,12 @@ +apiVersion: backstage.io/v1alpha1 +kind: Template +metadata: + name: springboot-template + title: Spring Boot Service + description: Standard Spring Boot (Java) microservice with recommended configuration. + annotations: + tags: Recommended,Java +spec: + processor: cookiecutter + type: service + path: '.' diff --git a/plugins/scaffolder-backend/scripts/mock-data b/plugins/scaffolder-backend/scripts/mock-data index be3fa2b6cf..594bd76607 100755 --- a/plugins/scaffolder-backend/scripts/mock-data +++ b/plugins/scaffolder-backend/scripts/mock-data @@ -1,8 +1,12 @@ #!/usr/bin/env bash -curl \ ---location \ ---request POST 'localhost:7000/catalog/locations' \ ---header 'Content-Type: application/json' \ ---data-raw "{\"type\": \"file\", \"target\": \"$(pwd)/sample-templates/react-ssr-template/template.yaml\"}" - +for URL in \ + 'react-ssr-template' \ + 'springboot-template' \ +; do \ + curl \ + --location \ + --request POST 'localhost:7000/catalog/locations' \ + --header 'Content-Type: application/json' \ + --data-raw "{\"type\": \"file\", \"target\": \"$(pwd)/sample-templates/${URL}/template.yaml\"}" +done diff --git a/plugins/scaffolder/package.json b/plugins/scaffolder/package.json index 6710fdc1f7..683d277be2 100644 --- a/plugins/scaffolder/package.json +++ b/plugins/scaffolder/package.json @@ -31,7 +31,8 @@ "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "6.0.0-alpha.5", - "react-use": "^14.2.0" + "react-use": "^14.2.0", + "swr": "^0.2.2" }, "devDependencies": { "@backstage/cli": "^0.1.1-alpha.9", diff --git a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx index 1dbd993d93..a6dbac8f83 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import React, { useEffect } from 'react'; import { Lifecycle, Content, @@ -24,6 +24,7 @@ import { Page, pageTheme, useApi, + errorApiRef, } from '@backstage/core'; import { catalogApiRef } from '@backstage/plugin-catalog'; import { @@ -35,25 +36,25 @@ import { } from '@material-ui/core'; import { Link as RouterLink } from 'react-router-dom'; import TemplateCard from '../TemplateCard'; -import { useAsync } from 'react-use'; +import useStaleWhileRevalidate from 'swr'; import { TemplateEntityV1alpha1 } from '@backstage/catalog-model'; const ScaffolderPage: React.FC<{}> = () => { const catalogApi = useApi(catalogApiRef); + const errorApi = useApi(errorApiRef); - const { value, loading } = useAsync(async () => { - const entities = await catalogApi.getEntities({ kind: 'Template' }); - return (entities as TemplateEntityV1alpha1[]).map(template => ({ - id: template.metadata.uid, - type: template.spec.type, - name: template.metadata.name, - // TODO(shmidt-i): decide on tags - tags: ['not-implemented'], - description: template.metadata.description ?? '-', - // TODO(shmidt-i): decide on owner - ownerId: '-', - })); - }); + const { data: templates, isValidating, error } = useStaleWhileRevalidate( + 'templates/all', + async () => + catalogApi.getEntities({ kind: 'Template' }) as Promise< + TemplateEntityV1alpha1[] + >, + ); + + useEffect(() => { + if (!error) return; + errorApi.post(error); + }, [error, errorApi]); return ( @@ -89,23 +90,26 @@ const ScaffolderPage: React.FC<{}> = () => { . - {loading ? ( - - ) : ( - - {value!.map(item => { + {isValidating && } + + {templates && + templates.map(template => { return ( - + + + ); })} - - )} + ); diff --git a/plugins/scaffolder/src/components/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard.tsx index 618eda64f1..6d47f05693 100644 --- a/plugins/scaffolder/src/components/TemplateCard.tsx +++ b/plugins/scaffolder/src/components/TemplateCard.tsx @@ -14,14 +14,7 @@ * limitations under the License. */ import React, { FC } from 'react'; -import { - Button, - Card, - Chip, - Grid, - Typography, - makeStyles, -} from '@material-ui/core'; +import { Button, Card, Chip, Typography, makeStyles } from '@material-ui/core'; const useStyles = makeStyles(theme => ({ header: { @@ -59,25 +52,23 @@ const TemplateCard: FC = ({ const classes = useStyles(); return ( - - -
- {type} - {title} + +
+ {type} + {title} +
+
+ {tags?.map(tag => ( + + ))} + + {description} + +
+
-
- {tags?.map(tag => ( - - ))} - - {description} - -
- -
-
- - +
+ ); }; From 1088b916e69c7ba046d2f12367a1bf0ffe9a16a1 Mon Sep 17 00:00:00 2001 From: Ivan Shmidt Date: Wed, 24 Jun 2020 23:36:09 +0200 Subject: [PATCH 3/4] feat(scaffolder): tags as list --- .../sample-templates/react-ssr-template/template.yaml | 5 +++-- .../sample-templates/springboot-template/template.yaml | 5 +++-- plugins/scaffolder/src/components/ScaffolderPage/index.tsx | 3 +-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/plugins/scaffolder-backend/sample-templates/react-ssr-template/template.yaml b/plugins/scaffolder-backend/sample-templates/react-ssr-template/template.yaml index 058e2a715f..124d1575ce 100644 --- a/plugins/scaffolder-backend/sample-templates/react-ssr-template/template.yaml +++ b/plugins/scaffolder-backend/sample-templates/react-ssr-template/template.yaml @@ -4,8 +4,9 @@ metadata: name: react-ssr-template title: React SSR Template description: Next.js application skeleton for creating isomorphic web applications. - annotations: - tags: Recommended,React + tags: + - Recommended + - React spec: processor: cookiecutter type: website diff --git a/plugins/scaffolder-backend/sample-templates/springboot-template/template.yaml b/plugins/scaffolder-backend/sample-templates/springboot-template/template.yaml index d44d926ef4..681e8e7f51 100644 --- a/plugins/scaffolder-backend/sample-templates/springboot-template/template.yaml +++ b/plugins/scaffolder-backend/sample-templates/springboot-template/template.yaml @@ -4,8 +4,9 @@ metadata: name: springboot-template title: Spring Boot Service description: Standard Spring Boot (Java) microservice with recommended configuration. - annotations: - tags: Recommended,Java + tags: + - Recommended + - Java spec: processor: cookiecutter type: service diff --git a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx index a6dbac8f83..aa2a8b639a 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx @@ -103,8 +103,7 @@ const ScaffolderPage: React.FC<{}> = () => { }`} type={template.spec.type ?? ''} description={template.metadata.description ?? '-'} - // TODO(shmidt-i): how to store tags - tags={template.metadata.annotations?.tags.split(',') ?? []} + tags={template.metadata?.tags ?? []} /> ); From d65c67ea93da82c95737e92caf7fb72e778a634c Mon Sep 17 00:00:00 2001 From: Ivan Shmidt Date: Fri, 26 Jun 2020 09:27:24 +0200 Subject: [PATCH 4/4] fix(scaffolder): show progressbar if no data --- plugins/scaffolder/src/components/ScaffolderPage/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx index aa2a8b639a..2f9774757b 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx @@ -90,7 +90,7 @@ const ScaffolderPage: React.FC<{}> = () => { . - {isValidating && } + {!templates && isValidating && } {templates && templates.map(template => { @@ -103,7 +103,7 @@ const ScaffolderPage: React.FC<{}> = () => { }`} type={template.spec.type ?? ''} description={template.metadata.description ?? '-'} - tags={template.metadata?.tags ?? []} + tags={(template.metadata?.tags as string[]) ?? []} /> );