diff --git a/packages/app/src/apis.ts b/packages/app/src/apis.ts index c11ea24aca..bf9980bf5f 100644 --- a/packages/app/src/apis.ts +++ b/packages/app/src/apis.ts @@ -37,6 +37,7 @@ import { import { techRadarApiRef, TechRadar } from '@backstage/plugin-tech-radar'; import { CircleCIApi, circleCIApiRef } from '@backstage/plugin-circleci'; +import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog'; const builder = ApiRegistry.builder(); @@ -72,4 +73,12 @@ builder.add( }), ); +builder.add( + catalogApiRef, + new CatalogApi({ + apiOrigin: 'http://localhost:3000', + basePath: '/catalog/api', + }), +); + export default builder.build() as ApiHolder; diff --git a/plugins/catalog/src/api/index.ts b/plugins/catalog/src/api/index.ts new file mode 100644 index 0000000000..1bc739b56f --- /dev/null +++ b/plugins/catalog/src/api/index.ts @@ -0,0 +1,49 @@ +/* + * 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 { createApiRef } from '@backstage/core'; +import { DescriptorEnvelope } from './types'; + +export const catalogApiRef = createApiRef({ + id: 'plugin.catalog.service', + description: + 'Used by the Catalog plugin to make requests to accompanying backend', +}); + +export class CatalogApi { + private apiOrigin: string; + private basePath: string; + constructor({ + apiOrigin, + basePath, + }: { + apiOrigin: string; + basePath: string; + }) { + this.apiOrigin = apiOrigin; + this.basePath = basePath; + } + async getEntities(): Promise { + const response = await fetch(`${this.apiOrigin}${this.basePath}/entities`); + return await response.json(); + } + async getEntityByName(name: string): Promise { + const entities = await this.getEntities(); + const entity = entities.find(e => e.metadata.name === name); + if (entity) return entity; + throw new Error(`'Entity not found: ${name}`); + } +} diff --git a/plugins/catalog/src/api/types.ts b/plugins/catalog/src/api/types.ts new file mode 100644 index 0000000000..9f1cfb8529 --- /dev/null +++ b/plugins/catalog/src/api/types.ts @@ -0,0 +1,185 @@ +/* + * 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 { ComponentDescriptorV1beta1 } from './descriptors/ComponentDescriptorV1beta1Parser'; + +export type ComponentDescriptor = ComponentDescriptorV1beta1; + +/** + * Metadata fields common to all versions/kinds of entity. + * + * @see https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.18/#objectmeta-v1-meta + */ +export type EntityMeta = { + /** + * A globally unique ID for the entity. + * + * This field can not be set by the user at creation time, and the server + * will reject an attempt to do so. The field will be populated in read + * operations. The field can (optionally) be specified when performing + * update or delete operations, but the server is free to reject requests + * that do so in such a way that it breaks semantics. + */ + uid?: string; + + /** + * An opaque string that changes for each update operation to any part of + * the entity, including metadata. + * + * This field can not be set by the user at creation time, and the server + * will reject an attempt to do so. The field will be populated in read + * operations. The field can (optionally) be specified when performing + * update or delete operations, and the server will then reject the + * operation if it does not match the current stored value. + */ + etag?: string; + + /** + * A positive nonzero number that indicates the current generation of data + * for this entity; the value is incremented each time the spec changes. + * + * This field can not be set by the user at creation time, and the server + * will reject an attempt to do so. The field will be populated in read + * operations. + */ + generation?: number; + + /** + * The name of the entity. + * + * Must be uniqe within the catalog at any given point in time, for any + * given namespace, for any given kind. + */ + name: string; + + /** + * The namespace that the entity belongs to. + */ + namespace?: string; + + /** + * Key/value pairs of identifying information attached to the entity. + */ + labels?: Record; + + /** + * Key/value pairs of non-identifying auxiliary information attached to the + * entity. + */ + annotations?: Record; +}; + +/** + * The format envelope that's common to all versions/kinds. + * + * @see https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/ + */ +export type DescriptorEnvelope = { + /** + * The version of specification format for this particular entity that + * this is written against. + */ + apiVersion: string; + + /** + * The high level entity type being described. + */ + kind: string; + + /** + * Optional metadata related to the entity. + */ + metadata: EntityMeta; + + /** + * The specification data describing the entity itself. + */ + spec?: object; +}; + +/** + * Parses and validates descriptors. + * + * The output must be validated and well formed. + */ +export type DescriptorParser = { + /** + * Parses and validates a single raw descriptor. + * + * @param descriptor A raw descriptor object + * @returns A structure describing the parsed and validated descriptor + * @throws An Error if the descriptor was malformed + */ + parse(descriptor: object): Promise; +}; + +/** + * Parses and validates a single envelope into its materialized kind. + * + * These parsers may assume that the envelope is already validated and well + * formed. + */ +export type KindParser = { + /** + * Try to parse an envelope into a materialized kind. + * + * @param envelope A valid descriptor envelope + * @returns A materialized type, or undefined if the given version/kind is + * not meant to be handled by this parser + * @throws An Error if the type was handled and found to not be properly + * formatted + */ + tryParse( + envelope: DescriptorEnvelope, + ): Promise; +}; + +export class ParserError extends Error { + constructor(message?: string, private _entityName?: string | undefined) { + super(message); + } + get entityName() { + return this._entityName; + } +} + +export type ReaderOutput = + | { type: 'error'; error: Error } + | { type: 'data'; data: object }; + +export type LocationReader = { + /** + * Reads the contents of a single location. + * + * @param type The type of location to read + * @param target The location target (type-specific) + * @returns The parsed contents, as an array of unverified descriptors or + * errors where the individual documents could not be parsed. + * @throws An error if the location as a whole could not be read + */ + read(type: string, target: string): Promise; +}; + +export type LocationSource = { + /** + * Reads the contents of a single location. + * + * @param target The location target to read + * @returns The parsed contents, as an array of unverified descriptors + * @throws An error if the location target could not be read + */ + read(target: string): Promise; +}; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx index 60af5f7d24..df7fcc1cd2 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx @@ -19,19 +19,12 @@ import { render } from '@testing-library/react'; import CatalogPage from './CatalogPage'; import { ThemeProvider } from '@material-ui/core'; import { lightTheme } from '@backstage/theme'; -import { ComponentFactory } from '../../data/component'; - -const testComponentFactory: ComponentFactory = { - getAllComponents: jest.fn(() => Promise.resolve([{ name: 'test' }])), - getComponentByName: jest.fn(() => Promise.resolve({ name: 'test' })), - removeComponentByName: jest.fn(() => Promise.resolve(true)), -}; describe('CatalogPage', () => { it('should render', async () => { const rendered = render( - + , ); expect( diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index ec6c1cf09f..63bb4e0771 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -23,17 +23,19 @@ import { SupportButton, Page, pageTheme, + useApi, } from '@backstage/core'; import { useAsync } from 'react-use'; -import { ComponentFactory } from '../../data/component'; import CatalogTable from '../CatalogTable/CatalogTable'; import { Button } from '@material-ui/core'; -type CatalogPageProps = { - componentFactory: ComponentFactory; -}; -const CatalogPage: FC = ({ componentFactory }) => { - const { value, error, loading } = useAsync(componentFactory.getAllComponents); +import { catalogApiRef } from '../..'; +import { envelopeToComponent } from '../../data/utils'; + +const CatalogPage: FC<{}> = () => { + const catalogApi = useApi(catalogApiRef); + const { value, error, loading } = useAsync(() => catalogApi.getEntities()); + return (
@@ -47,7 +49,7 @@ const CatalogPage: FC = ({ componentFactory }) => { All your components diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 57f1dfe7f5..27e59973b5 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -15,13 +15,7 @@ */ import React, { FC } from 'react'; import { Component } from '../../data/component'; -import { - InfoCard, - Progress, - Table, - TableColumn, - StatusOK, -} from '@backstage/core'; +import { InfoCard, Progress, Table, TableColumn } from '@backstage/core'; import { Typography, Link } from '@material-ui/core'; const columns: TableColumn[] = [ @@ -34,26 +28,8 @@ const columns: TableColumn[] = [ ), }, { - title: 'System', - field: 'system', - }, - { - title: 'Owner', - field: 'owner', - }, - { - title: 'Lifecycle', - field: 'lifecycle', - }, - { - title: 'Status', - field: 'status', - render: (componentData: any) => ( - <> - - {componentData.status || 'Up and running'} - - ), + title: 'Kind', + field: 'kind', }, { title: 'Description', diff --git a/plugins/catalog/src/components/ComponentPage/ComponentPage.test.tsx b/plugins/catalog/src/components/ComponentPage/ComponentPage.test.tsx index 369b80de80..d0f67d9cb3 100644 --- a/plugins/catalog/src/components/ComponentPage/ComponentPage.test.tsx +++ b/plugins/catalog/src/components/ComponentPage/ComponentPage.test.tsx @@ -30,11 +30,6 @@ const getTestProps = (componentName: string) => { history: { push: jest.fn(), }, - componentFactory: { - getAllComponents: jest.fn(() => Promise.resolve([{ name: 'test' }])), - getComponentByName: jest.fn(() => Promise.resolve({ name: 'test' })), - removeComponentByName: jest.fn(() => Promise.resolve(true)), - }, }; }; @@ -52,19 +47,4 @@ describe('ComponentPage', () => { ); expect(props.history.push).toHaveBeenCalledWith('/catalog'); }); - it('should use factory to fetch component by name and display it', async () => { - await act(async () => { - const props = getTestProps('test'); - await render( - wrapInTheme( - - - , - ), - ); - expect(props.componentFactory.getComponentByName).toHaveBeenCalledWith( - 'test', - ); - }); - }); }); diff --git a/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx b/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx index 0cf7017173..0ee0e1d09a 100644 --- a/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx +++ b/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx @@ -15,7 +15,6 @@ */ import React, { FC, useEffect, useState } from 'react'; import { useAsync } from 'react-use'; -import { ComponentFactory } from '../../data/component'; import ComponentMetadataCard from '../ComponentMetadataCard/ComponentMetadataCard'; import { Content, @@ -30,11 +29,12 @@ import ComponentContextMenu from '../ComponentContextMenu/ComponentContextMenu'; import ComponentRemovalDialog from '../ComponentRemovalDialog/ComponentRemovalDialog'; import { SentryIssuesWidget } from '@backstage/plugin-sentry'; import { Grid } from '@material-ui/core'; +import { catalogApiRef } from '../..'; +import { envelopeToComponent } from '../../data/utils'; const REDIRECT_DELAY = 1000; type ComponentPageProps = { - componentFactory: ComponentFactory; match: { params: { name: string; @@ -45,11 +45,7 @@ type ComponentPageProps = { }; }; -const ComponentPage: FC = ({ - match, - history, - componentFactory, -}) => { +const ComponentPage: FC = ({ match, history }) => { const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false); const [removingPending, setRemovingPending] = useState(false); const showRemovalDialog = () => setConfirmationDialogOpen(true); @@ -62,8 +58,9 @@ const ComponentPage: FC = ({ return null; } + const catalogApi = useApi(catalogApiRef); const catalogRequest = useAsync(() => - componentFactory.getComponentByName(match.params.name), + catalogApi.getEntityByName(match.params.name), ); useEffect(() => { @@ -78,18 +75,20 @@ const ComponentPage: FC = ({ const removeComponent = async () => { setConfirmationDialogOpen(false); setRemovingPending(true); - await componentFactory.removeComponentByName(componentName); + // await componentFactory.removeComponentByName(componentName); history.push('/catalog'); }; + const component = envelopeToComponent(catalogRequest.value! ?? {}); + return ( -
+
{confirmationDialogOpen && catalogRequest.value && ( = ({ diff --git a/plugins/catalog/src/data/component.ts b/plugins/catalog/src/data/component.ts index 9a073f0a42..57cba03a9a 100644 --- a/plugins/catalog/src/data/component.ts +++ b/plugins/catalog/src/data/component.ts @@ -15,11 +15,6 @@ */ export type Component = { name: string; - status: string; + kind: string; + description: string; }; - -export interface ComponentFactory { - getAllComponents(): Promise; - getComponentByName(name: string): Promise; - removeComponentByName(name: string): Promise; -} diff --git a/plugins/catalog/src/data/mock-factory-data.json b/plugins/catalog/src/data/mock-factory-data.json deleted file mode 100644 index 8fc61a87a6..0000000000 --- a/plugins/catalog/src/data/mock-factory-data.json +++ /dev/null @@ -1,35 +0,0 @@ -[ - { - "name": "example.com" - }, - { - "name": "subdomain.example.com" - }, - { - "name": "subdomain2.example.com" - }, - { - "name": "User data pipeline 1" - }, - { - "name": "User data pipeline 2" - }, - { - "name": "User data pipeline 3" - }, - { - "name": "Aggregation CRON job" - }, - { - "name": "Authentication service" - }, - { - "name": "Payments service" - }, - { - "name": "Backstage supervisor" - }, - { - "name": "Identity service" - } -] diff --git a/plugins/catalog/src/data/mock-factory.ts b/plugins/catalog/src/data/mock-factory.ts deleted file mode 100644 index 15be051fb0..0000000000 --- a/plugins/catalog/src/data/mock-factory.ts +++ /dev/null @@ -1,46 +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 { Component, ComponentFactory } from './component'; -import { DescriptorEnvelope } from '../../../catalog-backend/src/ingestion/types'; - -function transformEnvelopeToComponent(data: DescriptorEnvelope): Component { - return { - name: data.metadata?.name ?? '', - status: data.metadata?.labels?.status ?? 'Up and running', - }; -} - -let inMemoryStore: Promise; - -export const MockComponentFactory: ComponentFactory = { - getAllComponents(): Promise { - inMemoryStore = - inMemoryStore ?? - fetch('//localhost:3000/catalog/api/entities') - .then(response => response.json()) - .then(data => data.map(transformEnvelopeToComponent)); - return inMemoryStore; - }, - async getComponentByName(name: string): Promise { - const components = await this.getAllComponents(); - const mockComponent = components.find(component => component.name === name); - if (mockComponent) return mockComponent; - throw new Error(`'Component not found: ${name}`); - }, - async removeComponentByName(_: string): Promise { - return true; - }, -}; diff --git a/plugins/catalog/src/data/with-mock-store.tsx b/plugins/catalog/src/data/utils.ts similarity index 61% rename from plugins/catalog/src/data/with-mock-store.tsx rename to plugins/catalog/src/data/utils.ts index 2e5425d03e..b30ac61d9e 100644 --- a/plugins/catalog/src/data/with-mock-store.tsx +++ b/plugins/catalog/src/data/utils.ts @@ -13,14 +13,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import * as React from 'react'; -import { ComponentFactory } from './component'; -import { MockComponentFactory } from './mock-factory'; +import { DescriptorEnvelope } from '../api/types'; +import { Component } from './component'; -const componentFactory: ComponentFactory = MockComponentFactory; - -export const withMockStore = (Component: React.ElementType) => { - return (props: any) => ( - - ); -}; +export function envelopeToComponent(envelope: DescriptorEnvelope): Component { + return { + name: envelope.metadata?.name ?? '', + kind: envelope.kind ?? 'unknown', + description: 'placeholder', + }; +} diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index 3a0a0fe2d3..d67bc6a864 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -15,3 +15,4 @@ */ export { plugin } from './plugin'; +export * from './api'; diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts index 456a6d2446..cf9edee4da 100644 --- a/plugins/catalog/src/plugin.ts +++ b/plugins/catalog/src/plugin.ts @@ -17,12 +17,11 @@ import { createPlugin } from '@backstage/core'; import CatalogPage from './components/CatalogPage'; import ComponentPage from './components/ComponentPage/ComponentPage'; -import { withMockStore } from './data/with-mock-store'; export const plugin = createPlugin({ id: 'catalog', register({ router }) { - router.registerRoute('/catalog', withMockStore(CatalogPage)); - router.registerRoute('/catalog/:name/', withMockStore(ComponentPage)); + router.registerRoute('/catalog', CatalogPage); + router.registerRoute('/catalog/:name/', ComponentPage); }, });