paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 41 Packages Projects Releases Wiki Activity

feat(catalog, app): new api 4 plugins integration

Browse Source
This commit is contained in:
Ivan Shmidt
2020-08-31 14:30:01 +02:00
parent e76d33e97d
commit 43ac2c0af7
23 changed files with 492 additions and 686 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/package.json
+1
View File
@@ -5,6 +5,7 @@
"dependencies": {
"@backstage/cli": "^0.1.1-alpha.19",
"@backstage/core": "^0.1.1-alpha.19",
"@backstage/catalog-model": "^0.1.1-alpha.19",
"@backstage/plugin-api-docs": "^0.1.1-alpha.19",
"@backstage/plugin-catalog": "^0.1.1-alpha.19",
"@backstage/plugin-circleci": "^0.1.1-alpha.19",
packages/app/src/App.tsx
+4 -3
View File
@@ -26,11 +26,11 @@ import * as plugins from './plugins';
import { apis } from './apis';
import { hot } from 'react-hot-loader/root';
import { providers } from './identityProviders';
import { CatalogPlugin } from '@backstage/plugin-catalog';
import { CatalogRouter } from '@backstage/plugin-catalog';
// import { ExplorePlugin } from '@backstage/plugin-explore';
import { Route, Routes } from 'react-router';
import { EntityPage } from './components/catalog';
import { EntityPage } from './components/catalog/EntityPage';
const app = createApp({
apis,
@@ -56,11 +56,12 @@ const AppRoutes = () => (
<Routes>
<Route
path="/catalog/*"
element={<CatalogPlugin EntityPage={EntityPage} />}
element={<CatalogRouter EntityPage={EntityPage} />}
/>
{/* <Route path="/explore" element={<ExplorePlugin />} /> */}
</Routes>
);
const App: FC<{}> = () => (
<AppProvider>
<AlertDisplay />
packages/app/src/apis.ts
+4 -1
View File
@@ -74,7 +74,10 @@ import {
TravisCIApi,
travisCIApiRef,
} from '@roadiehq/backstage-plugin-travis-ci';
import { GithubPullRequestsClient, githubPullRequestsApiRef } from '@roadiehq/backstage-plugin-github-pull-requests';
import {
GithubPullRequestsClient,
githubPullRequestsApiRef,
} from '@roadiehq/backstage-plugin-github-pull-requests';
export const apis = (config: ConfigApi) => {
// eslint-disable-next-line no-console
packages/app/src/components/catalog/Component.tsx
-82
View File
@@ -1,82 +0,0 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import {
GitHubActionsPlugin,
GITHUB_ACTIONS_ANNOTATION,
} from '@backstage/plugin-github-actions';
import {
useEntity,
EntityPageTabs as Tabs,
EntityMetadataCard,
} from '@backstage/plugin-catalog';
import { Grid } from '@material-ui/core';
const OverviewPage = () => {
const entity = useEntity();
return (
<Grid item sm={4}>
<EntityMetadataCard entity={entity} />
</Grid>
);
};
// Just for illustration purposes, gonna live in plugin-circle-ci
const CIRCLE_CI_ANNOTATION = 'circle-ci-slug-dummy';
const DefaultEntity = () => {
const entity = useEntity();
const isCIAvailable = [
entity!.metadata!.annotations?.[GITHUB_ACTIONS_ANNOTATION],
entity!.metadata!.annotations?.[CIRCLE_CI_ANNOTATION],
].some(Boolean);
return (
<Tabs>
<Tabs.Tab title="Overview" path="/" exact>
<OverviewPage />
</Tabs.Tab>
{isCIAvailable && (
<Tabs.Tab title="CI/CD" path="/ci-cd">
{entity!.metadata!.annotations?.[GITHUB_ACTIONS_ANNOTATION] && (
<GitHubActionsPlugin entity={entity} />
)}
</Tabs.Tab>
)}
<Tabs.Tab title="Docs" path="/docs">
{/* eslint-disable-next-line no-console */}
<div>{console.log('was here /docs')}Docs tab contents</div>
</Tabs.Tab>
</Tabs>
);
};
const Service = () => <DefaultEntity />;
const Website = () => <DefaultEntity />;
const UnkownEntity = () => <div>Unknown entity!</div>;
export const ComponentEntity = () => {
const entity = useEntity();
switch (entity.spec!.type) {
case 'service':
return <Service />;
case 'website':
return <Website />;
default:
return <UnkownEntity />;
}
};
packages/app/src/components/catalog/EntityPage.tsx
+89
View File
@@ -0,0 +1,89 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { GitHubActionsPage } from '@backstage/plugin-github-actions';
import React from 'react';
import {
EntityPageLayout,
useEntity,
EntityMetadataCard,
} from '@backstage/plugin-catalog';
import { Entity } from '@backstage/catalog-model';
export const OverviewPage = ({ entity }: { entity: Entity }) => (
<EntityMetadataCard entity={entity} />
);
const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
<EntityPageLayout>
<EntityPageLayout.Content
path="/"
title="Overview"
element={<OverviewPage entity={entity} />}
/>
<EntityPageLayout.Content
path="/ci-cd/*"
title="CI/CD"
element={<GitHubActionsPage entity={entity} />}
/>
<EntityPageLayout.Content
path="/docs/*"
title="Documentation"
element={<div>Much docs, such wow ({entity.metadata.name})🐶</div>}
/>
</EntityPageLayout>
);
const WebsiteEntityPage = ({ entity }: { entity: Entity }) => (
<EntityPageLayout>
<EntityPageLayout.Content
path="/"
title="Overview"
element={<OverviewPage entity={entity} />}
/>
<EntityPageLayout.Content
path="/ci-cd/*"
title="CI/CD"
element={<GitHubActionsPage entity={entity} />}
/>
<EntityPageLayout.Content
path="/docs/*"
title="Documentation"
element={<div>Much docs, such wow ({entity.metadata.name})🐶</div>}
/>
</EntityPageLayout>
);
const DefaultEntityPage = ({ entity }: { entity: Entity }) => (
<EntityPageLayout>
<EntityPageLayout.Content
path="*"
title="Overview"
element={<OverviewPage entity={entity} />}
/>
</EntityPageLayout>
);
export const EntityPage = () => {
const { entity } = useEntity();
switch (entity?.spec?.type) {
case 'service':
return <ServiceEntityPage entity={entity} />;
case 'website':
return <WebsiteEntityPage entity={entity} />;
default:
return <DefaultEntityPage entity={entity} />;
}
};
packages/app/src/components/catalog/index.tsx
-30
View File
@@ -1,30 +0,0 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { useEntity } from '@backstage/plugin-catalog';
import { ComponentEntity } from './Component';
const UnkownEntityKind = () => <div>Unknown entity kind!</div>;
export const EntityPage = () => {
const entity = useEntity();
switch (entity.kind) {
case 'Component':
return <ComponentEntity />;
default:
return <UnkownEntityKind />;
}
};