Create a basic component hierarchy and a placeholder API client

Signed-off-by: Niklas Granander <ngranander@spotify.com>

plugins/xcmetrics/src/api/XCMetricsClient.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * 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 { DiscoveryApi } from '@backstage/core-plugin-api';
+import { XCMetricsApi } from './types';
+
+interface Options {
+  discoveryApi: DiscoveryApi;
+}
+
+export class XCMetricsClient implements XCMetricsApi {
+  private readonly discoveryApi: DiscoveryApi;
+
+  constructor(options: Options) {
+    this.discoveryApi = options.discoveryApi;
+  }
+
+  async getBuilds(): Promise<string> {
+    const backendUrl = `${await this.discoveryApi.getBaseUrl(
+      'proxy',
+    )}/xcmetrics/build`;
+    const response = await fetch(backendUrl);
+    return JSON.stringify(await response.json(), null, 2);
+  }
+}

plugins/xcmetrics/src/api/index.ts

@@ -13,4 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { ExampleFetchComponent } from './ExampleFetchComponent';
+
+export * from './types';
+export * from './XCMetricsClient';

plugins/xcmetrics/src/api/types.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * 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-plugin-api';
+
+export interface XCMetricsApi {
+  getBuilds(): Promise<string>;
+}
+
+export const xcmetricsApiRef = createApiRef<XCMetricsApi>({
+  id: 'plugin.xcmetrics.api',
+  description: 'Used by the XCMetrics plugin to make requests',
+});

plugins/xcmetrics/src/components/ExampleComponent/ExampleComponent.test.tsx

@@ -1,44 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * 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 { ExampleComponent } from './ExampleComponent';
-import { ThemeProvider } from '@material-ui/core';
-import { lightTheme } from '@backstage/theme';
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-import { msw, renderInTestApp } from '@backstage/test-utils';
-
-describe('ExampleComponent', () => {
-  const server = setupServer();
-  // Enable sane handlers for network requests
-  msw.setupDefaultHandlers(server);
-
-  // setup mock response
-  beforeEach(() => {
-    server.use(
-      rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))),
-    );
-  });
-
-  it('should render', async () => {
-    const rendered = await renderInTestApp(
-      <ThemeProvider theme={lightTheme}>
-        <ExampleComponent />
-      </ThemeProvider>,
-    );
-    expect(rendered.getByText('Welcome to xcmetrics!')).toBeInTheDocument();
-  });
-});

plugins/xcmetrics/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx

@@ -1,40 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * 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 { render } from '@testing-library/react';
-import { ExampleFetchComponent } from './ExampleFetchComponent';
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-import { msw } from '@backstage/test-utils';
-
-describe('ExampleFetchComponent', () => {
-  const server = setupServer();
-  // Enable sane handlers for network requests
-  msw.setupDefaultHandlers(server);
-
-  // setup mock response
-  beforeEach(() => {
-    server.use(
-      rest.get('https://randomuser.me/*', (_, res, ctx) =>
-        res(ctx.status(200), ctx.delay(2000), ctx.json({})),
-      ),
-    );
-  });
-  it('should render', async () => {
-    const rendered = render(<ExampleFetchComponent />);
-    expect(await rendered.findByTestId('progress')).toBeInTheDocument();
-  });
-});

plugins/xcmetrics/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx

@@ -1,105 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * 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 { makeStyles } from '@material-ui/core/styles';
-import { Table, TableColumn, Progress } from '@backstage/core-components';
-import Alert from '@material-ui/lab/Alert';
-import { useAsync } from 'react-use';
-
-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"
-  };
-  location: object; // {street: {number: 5060, name: "Hickory Creek Dr"}, city: "Albany", state: "New South Wales",…}
-  email: string; // "duane.reed@example.com"
-  login: object; // {uuid: "4b785022-9a23-4ab9-8a23-cb3fb43969a9", username: "blackdog796", password: "patch",…}
-  dob: object; // {date: "1983-06-22T12:30:23.016Z", age: 37}
-  registered: object; // {date: "2006-06-13T18:48:28.037Z", age: 14}
-  phone: string; // "07-2154-5651"
-  cell: string; // "0405-592-879"
-  id: {
-    name: string; // "TFN",
-    value: string; // "796260432"
-  };
-  picture: { medium: string }; // {medium: "https://randomuser.me/api/portraits/men/95.jpg",…}
-  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.medium}
-          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 (fetching data from randomuser.me)"
-      options={{ search: false, paging: false }}
-      columns={columns}
-      data={data}
-    />
-  );
-};
-
-export const ExampleFetchComponent = () => {
-  const { value, loading, error } = useAsync(async (): Promise<User[]> => {
-    const response = await fetch('https://randomuser.me/api/?results=20');
-    const data = await response.json();
-    return data.results;
-  }, []);
-
-  if (loading) {
-    return <Progress />;
-  } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
-  }
-
-  return <DenseTable users={value || []} />;
-};

plugins/xcmetrics/src/components/OverviewComponent/OverviewComponent.test.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * 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 { OverviewComponent } from './OverviewComponent';
+import { renderInTestApp } from '@backstage/test-utils';
+import { XCMetricsApi, xcmetricsApiRef } from '../../api';
+import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
+
+describe('OverviewComponent', () => {
+  it('should render', async () => {
+    const mockApi: jest.Mocked<XCMetricsApi> = {
+      getBuilds: jest.fn().mockResolvedValue(''),
+    };
+
+    const rendered = await renderInTestApp(
+      <ApiProvider apis={ApiRegistry.with(xcmetricsApiRef, mockApi)}>
+        <OverviewComponent />
+      </ApiProvider>,
+    );
+    expect(rendered.getByText('XCMetrics Dashboard')).toBeInTheDocument();
+  });
+});

plugins/xcmetrics/src/components/OverviewComponent/OverviewComponent.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * 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 { Grid } from '@material-ui/core';
+import {
+  InfoCard,
+  ContentHeader,
+  SupportButton,
+  Progress,
+} from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+import { xcmetricsApiRef } from '../../api';
+import { useAsync } from 'react-use';
+import { Alert } from '@material-ui/lab';
+
+export const OverviewComponent = () => {
+  const client = useApi(xcmetricsApiRef);
+  const { value, loading, error } = useAsync(async (): Promise<string> => {
+    return client.getBuilds();
+  }, []);
+
+  return (
+    <>
+      <ContentHeader title="XCMetrics Dashboard">
+        <SupportButton>Dashboard for XCMetrics</SupportButton>
+      </ContentHeader>
+      <Grid container spacing={3} direction="row">
+        <Grid item xs={7}>
+          <InfoCard title="Data fetched from XCMetrics through Backstage proxy">
+            {loading && <Progress />}
+            {error && <Alert severity="error">{error.message}</Alert>}
+            {value && <pre>{value}</pre>}
+          </InfoCard>
+        </Grid>
+        <Grid item xs={5}>
+          <InfoCard title="Placeholder Card" />
+        </Grid>
+      </Grid>
+    </>
+  );
+};

plugins/xcmetrics/src/components/OverviewComponent/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { ExampleComponent } from './ExampleComponent';
+export * from './OverviewComponent';

plugins/xcmetrics/src/components/XCMetricsPage/XCMetricsPage.tsx

@@ -14,40 +14,17 @@
  * limitations under the License.
  */
 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';
+import { Content, Header, HeaderLabel, Page } from '@backstage/core-components';
+import { OverviewComponent } from '../OverviewComponent';
 
-export const ExampleComponent = () => (
+export const XCMetricsPage = () => (
   <Page themeId="tool">
     <Header title="XCMetrics" subtitle="Dashboard">
       <HeaderLabel label="Owner" value="Spotify" />
       <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>
+      <OverviewComponent />
     </Content>
   </Page>
 );

plugins/xcmetrics/src/components/XCMetricsPage/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * 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.
+ */
+export * from './XCMetricsPage';

plugins/xcmetrics/src/plugin.ts

@@ -14,10 +14,12 @@
  * limitations under the License.
  */
 import {
+  createApiFactory,
   createPlugin,
   createRoutableExtension,
+  discoveryApiRef,
 } from '@backstage/core-plugin-api';
-
+import { xcmetricsApiRef, XCMetricsClient } from './api';
 import { rootRouteRef } from './routes';
 
 export const xcmetricsPlugin = createPlugin({
@@ -25,12 +27,23 @@ export const xcmetricsPlugin = createPlugin({
   routes: {
     root: rootRouteRef,
   },
+  apis: [
+    createApiFactory({
+      api: xcmetricsApiRef,
+      deps: {
+        discoveryApi: discoveryApiRef,
+      },
+      factory({ discoveryApi }) {
+        return new XCMetricsClient({ discoveryApi });
+      },
+    }),
+  ],
 });
 
 export const XcmetricsPage = xcmetricsPlugin.provide(
   createRoutableExtension({
     component: () =>
-      import('./components/ExampleComponent').then(m => m.ExampleComponent),
+      import('./components/XCMetricsPage').then(m => m.XCMetricsPage),
     mountPoint: rootRouteRef,
   }),
 );

plugins/xcmetrics/src/routes.ts

@@ -16,5 +16,5 @@
 import { createRouteRef } from '@backstage/core-plugin-api';
 
 export const rootRouteRef = createRouteRef({
-  title: 'xcmetrics',
+  title: 'XCMetrics',
 });