Compare commits
7 Commits
ee4e7b4cf3
...
7895114acd
| Author | SHA1 | Date | |
|---|---|---|---|
|
7895114acd | ||
|
|
2335b85099 | ||
|
|
5e03926195 | ||
|
|
acd9d2093e | ||
| e12023ddd8 | |||
| 6f72adb559 | |||
| bf2b5ef867 |
2
sreez-showcase/.gitignore
vendored
2
sreez-showcase/.gitignore
vendored
@ -1,6 +1,6 @@
|
||||
# macOS
|
||||
.DS_Store
|
||||
|
||||
kube-config.yaml
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
@ -15,48 +15,49 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@backstage-community/plugin-github-actions": "^0.6.16",
|
||||
"@backstage/app-defaults": "^1.5.4",
|
||||
"@backstage/catalog-model": "^1.4.5",
|
||||
"@backstage/cli": "^0.26.3",
|
||||
"@backstage/core-app-api": "^1.12.4",
|
||||
"@backstage/core-components": "^0.14.4",
|
||||
"@backstage/app-defaults": "^1.5.5",
|
||||
"@backstage/catalog-model": "^1.5.0",
|
||||
"@backstage/cli": "^0.26.6",
|
||||
"@backstage/core-app-api": "^1.12.5",
|
||||
"@backstage/core-components": "^0.14.7",
|
||||
"@backstage/core-plugin-api": "^1.9.2",
|
||||
"@backstage/integration-react": "^1.1.26",
|
||||
"@backstage/plugin-api-docs": "^0.11.4",
|
||||
"@backstage/plugin-catalog": "^1.19.0",
|
||||
"@backstage/plugin-catalog-common": "^1.0.22",
|
||||
"@backstage/plugin-catalog-graph": "^0.4.4",
|
||||
"@backstage/plugin-catalog-import": "^0.10.10",
|
||||
"@backstage/plugin-catalog-react": "^1.11.3",
|
||||
"@backstage/integration-react": "^1.1.27",
|
||||
"@backstage/plugin-api-docs": "^0.11.5",
|
||||
"@backstage/plugin-catalog": "^1.20.0",
|
||||
"@backstage/plugin-catalog-common": "^1.0.23",
|
||||
"@backstage/plugin-catalog-graph": "^0.4.5",
|
||||
"@backstage/plugin-catalog-import": "^0.11.0",
|
||||
"@backstage/plugin-catalog-react": "^1.12.0",
|
||||
"@backstage/plugin-devtools": "^0.1.13",
|
||||
"@backstage/plugin-org": "^0.6.24",
|
||||
"@backstage/plugin-org": "^0.6.25",
|
||||
"@backstage/plugin-permission-react": "^0.4.22",
|
||||
"@backstage/plugin-scaffolder": "^1.19.3",
|
||||
"@backstage/plugin-search": "^1.4.10",
|
||||
"@backstage/plugin-search-react": "^1.7.10",
|
||||
"@backstage/plugin-scaffolder": "^1.20.0",
|
||||
"@backstage/plugin-search": "^1.4.11",
|
||||
"@backstage/plugin-search-react": "^1.7.11",
|
||||
"@backstage/plugin-tech-radar": "^0.7.3",
|
||||
"@backstage/plugin-techdocs": "^1.10.4",
|
||||
"@backstage/plugin-techdocs-module-addons-contrib": "^1.1.9",
|
||||
"@backstage/plugin-techdocs-react": "^1.2.3",
|
||||
"@backstage/plugin-user-settings": "^0.8.5",
|
||||
"@backstage/theme": "^0.5.3",
|
||||
"@backstage/plugin-techdocs": "^1.10.5",
|
||||
"@backstage/plugin-techdocs-module-addons-contrib": "^1.1.10",
|
||||
"@backstage/plugin-techdocs-react": "^1.2.4",
|
||||
"@backstage/plugin-user-settings": "^0.8.6",
|
||||
"@backstage/theme": "^0.5.5",
|
||||
"@bestsellerit/backstage-plugin-harbor": "^0.3.1",
|
||||
"@janus-idp/plugin-notifications": "^1.3.0",
|
||||
"@material-ui/core": "^4.12.2",
|
||||
"@material-ui/icons": "^4.9.1",
|
||||
"@roadiehq/backstage-plugin-argo-cd": "^2.6.4",
|
||||
"@mui/material": "next",
|
||||
"@internal/backstage-plugin-devspaces-plugin": "^0.1.0",
|
||||
"@janus-idp/plugin-notifications": "^1.3.1",
|
||||
"@material-ui/icons": "^4.11.3",
|
||||
"@roadiehq/backstage-plugin-argo-cd": "^2.6.5",
|
||||
"@roadiehq/backstage-plugin-github-insights": "^2.3.29",
|
||||
"@roadiehq/backstage-plugin-github-pull-requests": "^2.5.25",
|
||||
"@roadiehq/backstage-plugin-github-pull-requests": "^2.5.26",
|
||||
"@roadiehq/backstage-plugin-iframe": "^1.3.17",
|
||||
"@rsc-labs/backstage-changelog-plugin": "^0.5.0",
|
||||
"@veecode-platform/backstage-plugin-github-workflows": "^0.2.70",
|
||||
"@veecode-platform/backstage-plugin-github-workflows": "^0.4.9",
|
||||
"add": "^2.0.6",
|
||||
"history": "^5.0.0",
|
||||
"react": "^18.0.2",
|
||||
"react-dom": "^18.0.2",
|
||||
"react-router": "^6.3.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-use": "^17.2.4",
|
||||
"history": "^5.3.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router": "^6.23.1",
|
||||
"react-router-dom": "^6.23.1",
|
||||
"react-use": "^17.5.0",
|
||||
"yarn": "^1.22.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -26,7 +26,7 @@ import {githubAuthApiRef} from '@backstage/core-plugin-api';
|
||||
import {UnifiedThemeProvider} from '@backstage/theme';
|
||||
import {SreezCustomTheme} from './theme/custom';
|
||||
import LightIcon from '@material-ui/icons/WbSunny';
|
||||
|
||||
import {DevspacesPluginPage} from '@internal/backstage-plugin-devspaces-plugin';
|
||||
|
||||
const app = createApp({
|
||||
themes: [{
|
||||
@ -76,6 +76,7 @@ const app = createApp({
|
||||
|
||||
const routes = (
|
||||
<FlatRoutes>
|
||||
<Route path="/devspaces-plugin" element={<DevspacesPluginPage/>}></Route>
|
||||
<Route path="/" element={<Navigate to="catalog"/>}/>
|
||||
<Route path="/catalog" element={<CatalogIndexPage/>}/>
|
||||
<Route
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import {EntityDependsOnComponentsCard, EntityDependsOnResourcesCard, EntityLayout} from "@backstage/plugin-catalog";
|
||||
import {EntityIFrameContent} from "@roadiehq/backstage-plugin-iframe";
|
||||
import {EntityGithubInsightsContent} from "@roadiehq/backstage-plugin-github-insights";
|
||||
import {EntityGithubPullRequestsContent} from "@roadiehq/backstage-plugin-github-pull-requests";
|
||||
import {Grid} from "@material-ui/core";
|
||||
@ -15,17 +14,17 @@ export const serviceEntityPage = (
|
||||
<EntityLayout.Route path="/" title="Overview">
|
||||
{overviewContent}
|
||||
</EntityLayout.Route>
|
||||
<EntityLayout.Route
|
||||
path="/logs"
|
||||
title="Logs">
|
||||
<EntityIFrameContent title={" "} iframe={{
|
||||
src: 'https://sreez.nationtech.io',
|
||||
// src: 'http://localhost:8080/search',
|
||||
title: " ",
|
||||
width: "100%",
|
||||
height: "1000px"
|
||||
}}/>
|
||||
</EntityLayout.Route>
|
||||
{/*<EntityLayout.Route*/}
|
||||
{/* path="/logs"*/}
|
||||
{/* title="Logs">*/}
|
||||
{/* <EntityIFrameContent title={" "} iframe={{*/}
|
||||
{/* src: 'https://sreez.nationtech.io',*/}
|
||||
{/* // src: 'http://localhost:8080/search',*/}
|
||||
{/* title: " ",*/}
|
||||
{/* width: "100%",*/}
|
||||
{/* height: "1000px"*/}
|
||||
{/* }}/>*/}
|
||||
{/*</EntityLayout.Route>*/}
|
||||
<EntityLayout.Route
|
||||
path="/code-insights"
|
||||
title="Code Insights">
|
||||
@ -34,7 +33,7 @@ export const serviceEntityPage = (
|
||||
<EntityLayout.Route path="/pull-requests" title="Pull Requests">
|
||||
<EntityGithubPullRequestsContent/>
|
||||
</EntityLayout.Route>
|
||||
<EntityLayout.Route path="/github-actions" title="Builds">
|
||||
<EntityLayout.Route path="/ci-cd" title="Builds">
|
||||
{buildsContent}
|
||||
</EntityLayout.Route>
|
||||
<EntityLayout.Route
|
||||
|
||||
@ -1,34 +1,51 @@
|
||||
import {Grid} from "@material-ui/core";
|
||||
import {EntityAboutCard} from "@backstage/plugin-catalog";
|
||||
import {EntityAboutCard, EntityHasSubcomponentsCard, EntityLinksCard} from "@backstage/plugin-catalog";
|
||||
import React from "react";
|
||||
import {entityWarningContent} from "./EntityWarningContent";
|
||||
import {GithubWorkflowsCard} from "@veecode-platform/backstage-plugin-github-workflows";
|
||||
import {LatestWorkflowRunCard} from "@backstage-community/plugin-github-actions";
|
||||
import {EntityGithubInsightsContent} from "@roadiehq/backstage-plugin-github-insights";
|
||||
import {EntityGithubInsightsReadmeCard} from "@roadiehq/backstage-plugin-github-insights";
|
||||
import {EntityArgoCDOverviewCard} from "@roadiehq/backstage-plugin-argo-cd";
|
||||
import {EntityGithubPullRequestsOverviewCard} from "@roadiehq/backstage-plugin-github-pull-requests";
|
||||
import {EntityCatalogGraphCard} from "@backstage/plugin-catalog-graph";
|
||||
|
||||
export const overviewContent = (
|
||||
<Grid container spacing={1} alignItems={'stretch'} justifyContent={'flex-start'}>
|
||||
<Grid item xs={12}>
|
||||
{entityWarningContent}
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<EntityAboutCard variant={'fullHeight'}/>
|
||||
|
||||
<Grid item xs={4}>
|
||||
<EntityAboutCard variant={'flex'}/>
|
||||
<EntityLinksCard variant="flex"/>
|
||||
{/*<DevspacesPluginPage/>*/}
|
||||
</Grid>
|
||||
<Grid item xs={9}>
|
||||
<Grid item xs={8}>
|
||||
<Grid container>
|
||||
<Grid item xs={4}>
|
||||
<LatestWorkflowRunCard branch={'master'} variant="flex"/>
|
||||
<LatestWorkflowRunCard branch={'master'} variant="fullHeight"/>
|
||||
</Grid>
|
||||
<Grid item xs={8}>
|
||||
<EntityArgoCDOverviewCard/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<GithubWorkflowsCard/>
|
||||
|
||||
{/*<EntityGithubInsightsReadmeCard maxHeight={300}/>*/}
|
||||
</Grid>
|
||||
<Grid container spacing={1} alignItems={'stretch'}>
|
||||
<Grid item xs={4}>
|
||||
<EntityHasSubcomponentsCard variant="flex"/>
|
||||
</Grid>
|
||||
<Grid item xs={8}>
|
||||
<EntityGithubPullRequestsOverviewCard/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<EntityCatalogGraphCard variant="gridItem"/>
|
||||
</Grid>
|
||||
<Grid item xs={9}>
|
||||
<EntityGithubInsightsContent/>
|
||||
<EntityGithubInsightsReadmeCard/>
|
||||
</Grid>
|
||||
|
||||
|
||||
@ -53,16 +70,11 @@ export const overviewContent = (
|
||||
{/*/!*</EntitySwitch>*!/*/}
|
||||
|
||||
{/*<Grid item md={4}>*/}
|
||||
{/* <EntityGithubPullRequestsOverviewCard/>*/}
|
||||
{/*</Grid>*/}
|
||||
{/*<Grid item md={4} xs={12}>*/}
|
||||
{/* <EntityHasSubcomponentsCard variant="gridItem"/>*/}
|
||||
{/*</Grid>*/}
|
||||
{/*<Grid item md={4} xs={12}>*/}
|
||||
{/* <EntityCatalogGraphCard variant="gridItem" height={400}/>*/}
|
||||
{/*</Grid>*/}
|
||||
{/*<Grid item md={4} xs={12}>*/}
|
||||
{/* <EntityLinksCard/>*/}
|
||||
{/*</Grid>*/}
|
||||
|
||||
</Grid>
|
||||
);
|
||||
|
||||
1
sreez-showcase/plugins/devspaces-plugin/.eslintrc.js
Normal file
1
sreez-showcase/plugins/devspaces-plugin/.eslintrc.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
|
||||
13
sreez-showcase/plugins/devspaces-plugin/README.md
Normal file
13
sreez-showcase/plugins/devspaces-plugin/README.md
Normal file
@ -0,0 +1,13 @@
|
||||
# devspaces-plugin
|
||||
|
||||
Welcome to the devspaces-plugin plugin!
|
||||
|
||||
_This plugin was created through the Backstage CLI_
|
||||
|
||||
## Getting started
|
||||
|
||||
Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/devspaces-plugin](http://localhost:3000/devspaces-plugin).
|
||||
|
||||
You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
|
||||
This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
|
||||
It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
|
||||
12
sreez-showcase/plugins/devspaces-plugin/dev/index.tsx
Normal file
12
sreez-showcase/plugins/devspaces-plugin/dev/index.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import { createDevApp } from '@backstage/dev-utils';
|
||||
import { devspacesPluginPlugin, DevspacesPluginPage } from '../src/plugin';
|
||||
|
||||
createDevApp()
|
||||
.registerPlugin(devspacesPluginPlugin)
|
||||
.addPage({
|
||||
element: <DevspacesPluginPage />,
|
||||
title: 'Root Page',
|
||||
path: '/devspaces-plugin',
|
||||
})
|
||||
.render();
|
||||
51
sreez-showcase/plugins/devspaces-plugin/package.json
Normal file
51
sreez-showcase/plugins/devspaces-plugin/package.json
Normal file
@ -0,0 +1,51 @@
|
||||
{
|
||||
"name": "@internal/backstage-plugin-devspaces-plugin",
|
||||
"version": "0.1.0",
|
||||
"main": "src/index.ts",
|
||||
"types": "src/index.ts",
|
||||
"license": "Apache-2.0",
|
||||
"private": true,
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
"main": "dist/index.esm.js",
|
||||
"types": "dist/index.d.ts"
|
||||
},
|
||||
"backstage": {
|
||||
"role": "frontend-plugin"
|
||||
},
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"start": "backstage-cli package start",
|
||||
"build": "backstage-cli package build",
|
||||
"lint": "backstage-cli package lint",
|
||||
"test": "backstage-cli package test",
|
||||
"clean": "backstage-cli package clean",
|
||||
"prepack": "backstage-cli package prepack",
|
||||
"postpack": "backstage-cli package postpack"
|
||||
},
|
||||
"dependencies": {
|
||||
"@backstage/core-components": "^0.14.4",
|
||||
"@backstage/core-plugin-api": "^1.9.2",
|
||||
"@backstage/theme": "^0.5.3",
|
||||
"@material-ui/core": "^4.9.13",
|
||||
"@material-ui/icons": "^4.9.1",
|
||||
"@material-ui/lab": "^4.0.0-alpha.60",
|
||||
"react-use": "^17.2.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.13.1 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@backstage/cli": "^0.26.3",
|
||||
"@backstage/core-app-api": "^1.12.4",
|
||||
"@backstage/dev-utils": "^1.0.31",
|
||||
"@backstage/test-utils": "^1.5.4",
|
||||
"@testing-library/jest-dom": "^6.0.0",
|
||||
"@testing-library/react": "^14.0.0",
|
||||
"@testing-library/user-event": "^14.0.0",
|
||||
"msw": "^1.0.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import {useEntity} from '@backstage/plugin-catalog-react'
|
||||
import {Box, Card, CardContent, CardHeader, Divider, Grid, Paper} from '@material-ui/core';
|
||||
import {Link,} from '@backstage/core-components';
|
||||
|
||||
export const DevspacesComponent = () => {
|
||||
const {entity} = useEntity();
|
||||
const annotations = entity?.metadata?.annotations;
|
||||
const clusterUrl = "oc-med.wk.nt.local"
|
||||
const devspacesApp = "devspaces"
|
||||
const devspacesLink = `https://${devspacesApp}.apps.${clusterUrl}/#https://github.com/${annotations?.['github.com/project-slug']}`;
|
||||
|
||||
return (
|
||||
<Paper>
|
||||
<Grid>
|
||||
<Card>
|
||||
{/*<CardHeader title="OpenShift DevSpaces">*/}
|
||||
<CardHeader title={<Box mb={2}> OpenShift DevSpaces </Box>}/>
|
||||
<Divider/>
|
||||
<CardContent>
|
||||
<Link to={devspacesLink}>
|
||||
Open project in VSCode Web IDE
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import { Typography, Grid } from '@material-ui/core';
|
||||
import {
|
||||
InfoCard,
|
||||
Header,
|
||||
Page,
|
||||
Content,
|
||||
ContentHeader,
|
||||
HeaderLabel,
|
||||
SupportButton,
|
||||
} from '@backstage/core-components';
|
||||
import { ExampleFetchComponent } from '../ExampleFetchComponent';
|
||||
|
||||
export const DevspacesComponent = () => (
|
||||
<Page themeId="tool">
|
||||
<Header title="Welcome to devspaces-plugin!" subtitle="Optional subtitle">
|
||||
<HeaderLabel label="Owner" value="Team X" />
|
||||
<HeaderLabel label="Lifecycle" value="Alpha" />
|
||||
</Header>
|
||||
<Content>
|
||||
<ContentHeader title="Plugin title">
|
||||
<SupportButton>A description of your plugin goes here.</SupportButton>
|
||||
</ContentHeader>
|
||||
<Grid container spacing={3} direction="column">
|
||||
<Grid item>
|
||||
<InfoCard title="Information card">
|
||||
<Typography variant="body1">
|
||||
All content should be wrapped in a card like this.
|
||||
</Typography>
|
||||
</InfoCard>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<ExampleFetchComponent />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Content>
|
||||
</Page>
|
||||
);
|
||||
@ -0,0 +1 @@
|
||||
export { DevspacesComponent } from './DevspacesComponent';
|
||||
@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ExampleFetchComponent } from './ExampleFetchComponent';
|
||||
|
||||
describe('ExampleFetchComponent', () => {
|
||||
it('renders the user table', async () => {
|
||||
render(<ExampleFetchComponent />);
|
||||
|
||||
// Wait for the table to render
|
||||
const table = await screen.findByRole('table');
|
||||
const nationality = screen.getAllByText('GB')
|
||||
// Assert that the table contains the expected user data
|
||||
expect(table).toBeInTheDocument();
|
||||
expect(screen.getByAltText('Carolyn')).toBeInTheDocument();
|
||||
expect(screen.getByText('Carolyn Moore')).toBeInTheDocument();
|
||||
expect(screen.getByText('carolyn.moore@example.com')).toBeInTheDocument();
|
||||
expect(nationality[0]).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,309 @@
|
||||
import React from 'react';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import {
|
||||
Table,
|
||||
TableColumn,
|
||||
Progress,
|
||||
ResponseErrorPanel,
|
||||
} from '@backstage/core-components';
|
||||
import useAsync from 'react-use/lib/useAsync';
|
||||
|
||||
export const exampleUsers = {
|
||||
results: [
|
||||
{
|
||||
gender: 'female',
|
||||
name: {
|
||||
title: 'Miss',
|
||||
first: 'Carolyn',
|
||||
last: 'Moore',
|
||||
},
|
||||
email: 'carolyn.moore@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Carolyn',
|
||||
nat: 'GB',
|
||||
},
|
||||
{
|
||||
gender: 'female',
|
||||
name: {
|
||||
title: 'Ms',
|
||||
first: 'Esma',
|
||||
last: 'Berberoğlu',
|
||||
},
|
||||
email: 'esma.berberoglu@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Esma',
|
||||
nat: 'TR',
|
||||
},
|
||||
{
|
||||
gender: 'female',
|
||||
name: {
|
||||
title: 'Ms',
|
||||
first: 'Isabella',
|
||||
last: 'Rhodes',
|
||||
},
|
||||
email: 'isabella.rhodes@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Isabella',
|
||||
nat: 'GB',
|
||||
},
|
||||
{
|
||||
gender: 'male',
|
||||
name: {
|
||||
title: 'Mr',
|
||||
first: 'Derrick',
|
||||
last: 'Carter',
|
||||
},
|
||||
email: 'derrick.carter@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Derrick',
|
||||
nat: 'IE',
|
||||
},
|
||||
{
|
||||
gender: 'female',
|
||||
name: {
|
||||
title: 'Miss',
|
||||
first: 'Mattie',
|
||||
last: 'Lambert',
|
||||
},
|
||||
email: 'mattie.lambert@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Mattie',
|
||||
nat: 'AU',
|
||||
},
|
||||
{
|
||||
gender: 'male',
|
||||
name: {
|
||||
title: 'Mr',
|
||||
first: 'Mijat',
|
||||
last: 'Rakić',
|
||||
},
|
||||
email: 'mijat.rakic@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Mijat',
|
||||
nat: 'RS',
|
||||
},
|
||||
{
|
||||
gender: 'male',
|
||||
name: {
|
||||
title: 'Mr',
|
||||
first: 'Javier',
|
||||
last: 'Reid',
|
||||
},
|
||||
email: 'javier.reid@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Javier',
|
||||
nat: 'US',
|
||||
},
|
||||
{
|
||||
gender: 'female',
|
||||
name: {
|
||||
title: 'Ms',
|
||||
first: 'Isabella',
|
||||
last: 'Li',
|
||||
},
|
||||
email: 'isabella.li@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Isabella',
|
||||
nat: 'CA',
|
||||
},
|
||||
{
|
||||
gender: 'female',
|
||||
name: {
|
||||
title: 'Mrs',
|
||||
first: 'Stephanie',
|
||||
last: 'Garrett',
|
||||
},
|
||||
email: 'stephanie.garrett@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Stephanie',
|
||||
nat: 'AU',
|
||||
},
|
||||
{
|
||||
gender: 'female',
|
||||
name: {
|
||||
title: 'Ms',
|
||||
first: 'Antonia',
|
||||
last: 'Núñez',
|
||||
},
|
||||
email: 'antonia.nunez@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Antonia',
|
||||
nat: 'ES',
|
||||
},
|
||||
{
|
||||
gender: 'male',
|
||||
name: {
|
||||
title: 'Mr',
|
||||
first: 'Donald',
|
||||
last: 'Young',
|
||||
},
|
||||
email: 'donald.young@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Donald',
|
||||
nat: 'US',
|
||||
},
|
||||
{
|
||||
gender: 'male',
|
||||
name: {
|
||||
title: 'Mr',
|
||||
first: 'Iegor',
|
||||
last: 'Holodovskiy',
|
||||
},
|
||||
email: 'iegor.holodovskiy@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Iegor',
|
||||
nat: 'UA',
|
||||
},
|
||||
{
|
||||
gender: 'female',
|
||||
name: {
|
||||
title: 'Madame',
|
||||
first: 'Jessica',
|
||||
last: 'David',
|
||||
},
|
||||
email: 'jessica.david@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Jessica',
|
||||
nat: 'CH',
|
||||
},
|
||||
{
|
||||
gender: 'female',
|
||||
name: {
|
||||
title: 'Ms',
|
||||
first: 'Eve',
|
||||
last: 'Martinez',
|
||||
},
|
||||
email: 'eve.martinez@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Eve',
|
||||
nat: 'FR',
|
||||
},
|
||||
{
|
||||
gender: 'male',
|
||||
name: {
|
||||
title: 'Mr',
|
||||
first: 'Caleb',
|
||||
last: 'Silva',
|
||||
},
|
||||
email: 'caleb.silva@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Caleb',
|
||||
nat: 'US',
|
||||
},
|
||||
{
|
||||
gender: 'female',
|
||||
name: {
|
||||
title: 'Miss',
|
||||
first: 'Marcia',
|
||||
last: 'Jenkins',
|
||||
},
|
||||
email: 'marcia.jenkins@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Marcia',
|
||||
nat: 'US',
|
||||
},
|
||||
{
|
||||
gender: 'female',
|
||||
name: {
|
||||
title: 'Mrs',
|
||||
first: 'Mackenzie',
|
||||
last: 'Jones',
|
||||
},
|
||||
email: 'mackenzie.jones@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Mackenzie',
|
||||
nat: 'NZ',
|
||||
},
|
||||
{
|
||||
gender: 'male',
|
||||
name: {
|
||||
title: 'Mr',
|
||||
first: 'Jeremiah',
|
||||
last: 'Gutierrez',
|
||||
},
|
||||
email: 'jeremiah.gutierrez@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Jeremiah',
|
||||
nat: 'AU',
|
||||
},
|
||||
{
|
||||
gender: 'female',
|
||||
name: {
|
||||
title: 'Ms',
|
||||
first: 'Luciara',
|
||||
last: 'Souza',
|
||||
},
|
||||
email: 'luciara.souza@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Luciara',
|
||||
nat: 'BR',
|
||||
},
|
||||
{
|
||||
gender: 'male',
|
||||
name: {
|
||||
title: 'Mr',
|
||||
first: 'Valgi',
|
||||
last: 'da Cunha',
|
||||
},
|
||||
email: 'valgi.dacunha@example.com',
|
||||
picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Valgi',
|
||||
nat: 'BR',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const useStyles = makeStyles({
|
||||
avatar: {
|
||||
height: 32,
|
||||
width: 32,
|
||||
borderRadius: '50%',
|
||||
},
|
||||
});
|
||||
|
||||
type User = {
|
||||
gender: string; // "male"
|
||||
name: {
|
||||
title: string; // "Mr",
|
||||
first: string; // "Duane",
|
||||
last: string; // "Reed"
|
||||
};
|
||||
email: string; // "duane.reed@example.com"
|
||||
picture: string; // "https://api.dicebear.com/6.x/open-peeps/svg?seed=Duane"
|
||||
nat: string; // "AU"
|
||||
};
|
||||
|
||||
type DenseTableProps = {
|
||||
users: User[];
|
||||
};
|
||||
|
||||
export const DenseTable = ({ users }: DenseTableProps) => {
|
||||
const classes = useStyles();
|
||||
|
||||
const columns: TableColumn[] = [
|
||||
{ title: 'Avatar', field: 'avatar' },
|
||||
{ title: 'Name', field: 'name' },
|
||||
{ title: 'Email', field: 'email' },
|
||||
{ title: 'Nationality', field: 'nationality' },
|
||||
];
|
||||
|
||||
const data = users.map(user => {
|
||||
return {
|
||||
avatar: (
|
||||
<img
|
||||
src={user.picture}
|
||||
className={classes.avatar}
|
||||
alt={user.name.first}
|
||||
/>
|
||||
),
|
||||
name: `${user.name.first} ${user.name.last}`,
|
||||
email: user.email,
|
||||
nationality: user.nat,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<Table
|
||||
title="Example User List"
|
||||
options={{ search: false, paging: false }}
|
||||
columns={columns}
|
||||
data={data}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const ExampleFetchComponent = () => {
|
||||
|
||||
const { value, loading, error } = useAsync(async (): Promise<User[]> => {
|
||||
// Would use fetch in a real world example
|
||||
return exampleUsers.results;
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return <Progress />;
|
||||
} else if (error) {
|
||||
return <ResponseErrorPanel error={error} />;
|
||||
}
|
||||
|
||||
return <DenseTable users={value || []} />;
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export { ExampleFetchComponent } from './ExampleFetchComponent';
|
||||
1
sreez-showcase/plugins/devspaces-plugin/src/index.ts
Normal file
1
sreez-showcase/plugins/devspaces-plugin/src/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { devspacesPluginPlugin, DevspacesPluginPage } from './plugin';
|
||||
@ -0,0 +1,7 @@
|
||||
import { devspacesPluginPlugin } from './plugin';
|
||||
|
||||
describe('devspaces-plugin', () => {
|
||||
it('should export plugin', () => {
|
||||
expect(devspacesPluginPlugin).toBeDefined();
|
||||
});
|
||||
});
|
||||
22
sreez-showcase/plugins/devspaces-plugin/src/plugin.ts
Normal file
22
sreez-showcase/plugins/devspaces-plugin/src/plugin.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import {
|
||||
createPlugin,
|
||||
createRoutableExtension,
|
||||
} from '@backstage/core-plugin-api';
|
||||
|
||||
import { rootRouteRef } from './routes';
|
||||
|
||||
export const devspacesPluginPlugin = createPlugin({
|
||||
id: 'devspaces-plugin',
|
||||
routes: {
|
||||
root: rootRouteRef,
|
||||
},
|
||||
});
|
||||
|
||||
export const DevspacesPluginPage = devspacesPluginPlugin.provide(
|
||||
createRoutableExtension({
|
||||
name: 'DevspacesPluginPage',
|
||||
component: () =>
|
||||
import('./components/DevspacesComponent').then(m => m.DevspacesComponent),
|
||||
mountPoint: rootRouteRef,
|
||||
}),
|
||||
);
|
||||
5
sreez-showcase/plugins/devspaces-plugin/src/routes.ts
Normal file
5
sreez-showcase/plugins/devspaces-plugin/src/routes.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { createRouteRef } from '@backstage/core-plugin-api';
|
||||
|
||||
export const rootRouteRef = createRouteRef({
|
||||
id: 'devspaces-plugin',
|
||||
});
|
||||
@ -0,0 +1 @@
|
||||
import '@testing-library/jest-dom';
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user