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

Merge pull request #6339 from ngranander/xcmetrics-dashboard-mvp

Browse Source 
Add XCMetrics Plugin
This commit is contained in:
Ben Lambert
2021-07-14 12:13:47 +02:00
committed by GitHub
parent 5238afea67 e63a9a07e8
commit 1020341712
19 changed files with 647 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/xcmetrics/.eslintrc.js
+3
View File
@@ -0,0 +1,3 @@
module.exports = {
extends: [require.resolve('@backstage/cli/config/eslint')],
};
plugins/xcmetrics/README.md
+38
View File
@@ -0,0 +1,38 @@
# XCMetrics
[XCMetrics](https://xcmetrics.io) is a tool for collecting build metrics from XCode.
With this plugin, you can view data from XCMetrics directly in Backstage.
![XCMetrics-overview](./docs/XCMetrics-overview.png)
## Getting started
From `packages/app`:
```bash
yarn add @backstage/plugin-xcmetrics
```
In `packages/app/src/App.tsx`, add the following:
```ts
import { XcmetricsPage } from '@backstage/plugin-xcmetrics';
```
```tsx
<FlatRoutes>
{/* Other routes... */}
<Route path="/xcmetrics" element={<XcmetricsPage />} />
</FlatRoutes>
```
Add the URL to your XCMetrics backend instance in `app-config.yaml` like so:
```yaml
proxy:
...
'/xcmetrics':
target: http://127.0.0.1:8080/v1
```
Start Backstage and navigate to `/xcmetrics` to view your build metrics!
plugins/xcmetrics/api-report.md
+23
View File
@@ -0,0 +1,23 @@
## API Report File for "@backstage/plugin-xcmetrics"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
/// <reference types="react" />
import { BackstagePlugin } from '@backstage/core-plugin-api';
import { RouteRef } from '@backstage/core-plugin-api';
// @public (undocumented)
export const XcmetricsPage: () => JSX.Element;
// @public (undocumented)
export const xcmetricsPlugin: BackstagePlugin<
{
root: RouteRef<undefined>;
},
{}
>;
// (No @packageDocumentation comment for this package)
```
plugins/xcmetrics/dev/index.tsx
+27
View File
@@ -0,0 +1,27 @@
/*
* 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 { createDevApp } from '@backstage/dev-utils';
import { xcmetricsPlugin, XcmetricsPage } from '../src/plugin';
createDevApp()
.registerPlugin(xcmetricsPlugin)
.addPage({
element: <XcmetricsPage />,
title: 'Root Page',
path: '/xcmetrics',
})
.render();
plugins/xcmetrics/docs/XCMetrics-overview.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 622 KiB

plugins/xcmetrics/package.json
+52
View File
@@ -0,0 +1,52 @@
{
"name": "@backstage/plugin-xcmetrics",
"version": "0.1.1",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "Apache-2.0",
"publishConfig": {
"access": "public",
"main": "dist/index.esm.js",
"types": "dist/index.d.ts"
},
"scripts": {
"build": "backstage-cli plugin:build",
"start": "backstage-cli plugin:serve",
"lint": "backstage-cli lint",
"test": "backstage-cli test",
"diff": "backstage-cli plugin:diff",
"prepack": "backstage-cli prepack",
"postpack": "backstage-cli postpack",
"clean": "backstage-cli clean"
},
"dependencies": {
"@backstage/core-components": "^0.1.5",
"@backstage/core-plugin-api": "^0.1.3",
"@backstage/errors": "^0.1.1",
"@backstage/theme": "^0.2.8",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.45",
"luxon": "^1.27.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-use": "^17.2.4"
},
"devDependencies": {
"@backstage/cli": "^0.7.3",
"@backstage/core-app-api": "^0.1.4",
"@backstage/dev-utils": "^0.2.1",
"@backstage/test-utils": "^0.1.14",
"@testing-library/jest-dom": "^5.10.1",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^13.1.8",
"@types/jest": "^26.0.7",
"@types/luxon": "^1.27.0",
"@types/node": "^14.14.32",
"cross-fetch": "^3.0.6",
"msw": "^0.29.0"
},
"files": [
"dist"
]
}
plugins/xcmetrics/src/api/XcmetricsClient.ts
+42
View File
@@ -0,0 +1,42 @@
/*
* 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 { ResponseError } from '@backstage/errors';
import { BuildItem, BuildsResult, 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<BuildItem[]> {
const baseUrl = `${await this.discoveryApi.getBaseUrl('proxy')}/xcmetrics`;
const response = await fetch(`${baseUrl}/build`);
if (!response.ok) {
throw await ResponseError.fromResponse(response);
}
return ((await response.json()) as BuildsResult).items;
}
}
plugins/xcmetrics/src/api/index.ts
+18
View File
@@ -0,0 +1,18 @@
/*
* 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 './types';
export * from './XcmetricsClient';
plugins/xcmetrics/src/api/types.ts
+63
View File
@@ -0,0 +1,63 @@
/*
* 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 type BuildStatus = 'succeeded' | 'failed' | 'stopped';
export type BuildItem = {
userid: string;
warningCount: number;
duration: number;
startTimestamp: string;
isCi: boolean;
startTimestampMicroseconds: number;
category: string;
endTimestampMicroseconds: number;
day: string;
compilationEndTimestamp: string;
tag: string;
projectName: string;
compilationEndTimestampMicroseconds: number;
errorCount: number;
id: string;
buildStatus: BuildStatus;
compilationDuration: number;
schema: string;
compiledCount: number;
endTimestamp: string;
userid256: string;
machineName: string;
wasSuspended: boolean;
};
export type BuildsResult = {
items: BuildItem[];
metadata: {
per: number;
total: number;
page: number;
};
};
export interface XcmetricsApi {
getBuilds(): Promise<BuildItem[]>;
}
export const xcmetricsApiRef = createApiRef<XcmetricsApi>({
id: 'plugin.xcmetrics.api',
description: 'Used by the XCMetrics plugin to make requests',
});
plugins/xcmetrics/src/components/OverviewComponent/OverviewComponent.test.tsx
+75
View File
@@ -0,0 +1,75 @@
/*
* 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 mockUserId = 'mockUser';
const mockApi: jest.Mocked<XcmetricsApi> = {
getBuilds: jest.fn().mockResolvedValue([
{
userid: mockUserId,
warningCount: 1,
duration: 123.45,
isCi: false,
projectName: 'App',
buildStatus: 'succeeded',
schema: 'AppSchema',
},
]),
};
const rendered = await renderInTestApp(
<ApiProvider apis={ApiRegistry.with(xcmetricsApiRef, mockApi)}>
<OverviewComponent />
</ApiProvider>,
);
expect(rendered.getByText('XCMetrics Dashboard')).toBeInTheDocument();
expect(rendered.getByText(mockUserId)).toBeInTheDocument();
expect(rendered.queryByText('CI')).toBeNull();
});
it('should render an empty state when no builds exist', 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('No builds to show')).toBeInTheDocument();
});
it('should show an error when API not responding', async () => {
const errorMessage = 'MockErrorMessage';
const mockApi: jest.Mocked<XcmetricsApi> = {
getBuilds: jest.fn().mockRejectedValue({ message: errorMessage }),
};
const rendered = await renderInTestApp(
<ApiProvider apis={ApiRegistry.with(xcmetricsApiRef, mockApi)}>
<OverviewComponent />
</ApiProvider>,
);
expect(rendered.getByText(errorMessage)).toBeInTheDocument();
});
});
plugins/xcmetrics/src/components/OverviewComponent/OverviewComponent.tsx
+120
View File
@@ -0,0 +1,120 @@
/*
* 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 {
ContentHeader,
SupportButton,
Progress,
StatusOK,
StatusError,
StatusWarning,
Table,
TableColumn,
EmptyState,
} from '@backstage/core-components';
import { useApi } from '@backstage/core-plugin-api';
import { BuildItem, BuildStatus, xcmetricsApiRef } from '../../api';
import { useAsync } from 'react-use';
import { Alert } from '@material-ui/lab';
import { Duration } from 'luxon';
import { Chip } from '@material-ui/core';
const formatStatus = (status: BuildStatus, warningCount: number) => {
const statusIcons = {
succeeded: <StatusOK />,
failed: <StatusError />,
stopped: <StatusWarning />,
};
return (
<>
{statusIcons[status]} {status[0].toUpperCase() + status.slice(1)}
{warningCount > 0 && ` with ${warningCount} warning`}
{warningCount > 1 && 's'}
</>
);
};
const columns: TableColumn<BuildItem>[] = [
{
title: 'Project',
field: 'projectName',
},
{
title: 'Schema',
field: 'schema',
},
{
title: 'Duration',
field: 'duration',
type: 'time',
searchable: false,
render: data => Duration.fromObject({ seconds: data.duration }).toISOTime(),
},
{
title: 'User',
field: 'userid',
},
{
title: 'Status',
field: 'buildStatus',
render: data => formatStatus(data.buildStatus, data.warningCount),
},
{
field: 'isCI',
render: data => data.isCi && <Chip label="CI" size="small" />,
width: '10',
sorting: false,
},
];
export const OverviewComponent = () => {
const client = useApi(xcmetricsApiRef);
const { value: builds, loading, error } = useAsync(
async (): Promise<BuildItem[]> => client.getBuilds(),
[],
);
if (loading) {
return <Progress />;
} else if (error) {
return <Alert severity="error">{error.message}</Alert>;
}
if (!builds || !builds.length) {
return (
<EmptyState
missing="data"
title="No builds to show"
description="There are no builds in XCMetrics yet"
/>
);
}
return (
<>
<ContentHeader title="XCMetrics Dashboard">
<SupportButton>Dashboard for XCMetrics</SupportButton>
</ContentHeader>
<Table
options={{ paging: false, search: false }}
data={builds}
columns={columns}
title="Latest Builds"
/>
</>
);
};
plugins/xcmetrics/src/components/OverviewComponent/index.ts
+16
View File
@@ -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 './OverviewComponent';
plugins/xcmetrics/src/components/XcmetricsLayout/XcmetricsLayout.tsx
+30
View File
@@ -0,0 +1,30 @@
/*
* 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 { Content, Header, HeaderLabel, Page } from '@backstage/core-components';
import { OverviewComponent } from '../OverviewComponent';
export const XcmetricsLayout = () => (
<Page themeId="tool">
<Header title="XCMetrics" subtitle="Dashboard">
<HeaderLabel label="Owner" value="Spotify" />
<HeaderLabel label="Lifecycle" value="Alpha" />
</Header>
<Content>
<OverviewComponent />
</Content>
</Page>
);
plugins/xcmetrics/src/components/XcmetricsLayout/index.ts
+16
View File
@@ -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 './XcmetricsLayout';
plugins/xcmetrics/src/index.ts
+16
View File
@@ -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 { xcmetricsPlugin, XcmetricsPage } from './plugin';
plugins/xcmetrics/src/plugin.test.ts
+22
View File
@@ -0,0 +1,22 @@
/*
* 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 { xcmetricsPlugin } from './plugin';
describe('xcmetrics', () => {
it('should export plugin', () => {
expect(xcmetricsPlugin).toBeDefined();
});
});
plugins/xcmetrics/src/plugin.ts
+49
View File
@@ -0,0 +1,49 @@
/*
* 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 {
createApiFactory,
createPlugin,
createRoutableExtension,
discoveryApiRef,
} from '@backstage/core-plugin-api';
import { xcmetricsApiRef, XcmetricsClient } from './api';
import { rootRouteRef } from './routes';
export const xcmetricsPlugin = createPlugin({
id: 'xcmetrics',
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/XcmetricsLayout').then(m => m.XcmetricsLayout),
mountPoint: rootRouteRef,
}),
);
plugins/xcmetrics/src/routes.ts
+20
View File
@@ -0,0 +1,20 @@
/*
* 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 { createRouteRef } from '@backstage/core-plugin-api';
export const rootRouteRef = createRouteRef({
title: 'XCMetrics',
});
plugins/xcmetrics/src/setupTests.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* 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 '@testing-library/jest-dom';
import 'cross-fetch/polyfill';