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

Add in AirbrakeWidget

Browse Source 
Signed-off-by: Karan Shah <karan.shah@simplybusiness.co.uk>
This commit is contained in:
Karan Shah
2021-12-29 10:58:22 +00:00
parent 1b8b5148b7
commit 00fd929ee0
9 changed files with 59 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/airbrake/src/components/ExampleComponent/index.ts → plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx
-1
View File
@@ -13,4 +13,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { ExampleComponent } from './ExampleComponent';
plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx
+54
View File
@@ -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 { Typography, Grid } from '@material-ui/core';
import {
InfoCard,
Header,
Page,
Content,
ContentHeader,
HeaderLabel,
SupportButton,
} from '@backstage/core-components';
import exampleData from './ExampleData';
export const AirbrakeWidget = () => {
return (
<Page themeId="tool">
<Header title="Airbrake" subtitle="Errors in your application">
<HeaderLabel label="Owner" value="Owner" />
<HeaderLabel label="Lifecycle" value="Alpha" />
</Header>
<Content>
<ContentHeader title="Airbrake">
<SupportButton>A description of your plugin goes here.</SupportButton>
</ContentHeader>
<Grid container spacing={3} direction="column">
{exampleData.groups.map(groupEntry => (
<Grid item key={groupEntry.id}>
{groupEntry.errors.map(error => (
<InfoCard title={error.type}>
<Typography variant="body1">{error.message}</Typography>
</InfoCard>
))}
</Grid>
))}
</Grid>
</Content>
</Page>
);
};
plugins/airbrake/dev/ExampleData.ts → plugins/airbrake/src/components/AirbrakeWidget/ExampleData.ts
+2 -2
View File
@@ -56,7 +56,7 @@ export default {
createdAt: '2021-12-19T09:44:30.067447Z',
},
{
id: '345',
id: '2',
projectId: 123,
resolved: true,
muted: false,
@@ -87,7 +87,7 @@ export default {
},
lastDeployId: '0',
lastDeployAt: null,
lastNoticeId: '456',
lastNoticeId: '345',
lastNoticeAt: '2021-12-15T17:16:38.419Z',
noticeCount: 1,
noticeTotalCount: 1,
plugins/airbrake/src/components/ExampleComponent/ExampleComponent.test.tsx
-47
View File
@@ -1,47 +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 {
setupRequestMockHandlers,
renderInTestApp,
} from '@backstage/test-utils';
describe('ExampleComponent', () => {
const server = setupServer();
// Enable sane handlers for network requests
setupRequestMockHandlers(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 airbrake!')).toBeInTheDocument();
});
});
plugins/airbrake/src/components/ExampleComponent/ExampleComponent.tsx
-53
View File
@@ -1,53 +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 { Typography, Grid } from '@material-ui/core';
import {
InfoCard,
Header,
Page,
Content,
ContentHeader,
HeaderLabel,
SupportButton,
} from '@backstage/core-components';
import { ExampleFetchComponent } from '../ExampleFetchComponent';
export const ExampleComponent = () => (
<Page themeId="tool">
<Header title="Welcome to airbrake!" 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>
);
plugins/airbrake/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx
-127
View File
@@ -1,127 +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 { setupRequestMockHandlers } from '@backstage/test-utils';
describe('ExampleFetchComponent', () => {
const server = setupServer();
// Enable sane handlers for network requests
setupRequestMockHandlers(server);
it('renders progress bar when loading', async () => {
server.use(
rest.get('https://randomuser.me/*', (_, res, ctx) => {
return res(ctx.delay(2000));
}),
);
const rendered = render(<ExampleFetchComponent />);
expect(await rendered.findByTestId('progress')).toBeInTheDocument();
});
it('renders data when fetch was successful', async () => {
server.use(
rest.get('https://randomuser.me/*', (_, res, ctx) =>
res(
ctx.status(200),
ctx.json({
results: [
{
gender: 'male',
name: {
title: 'Mr',
first: 'Vedat',
last: 'Özbey',
},
location: {
street: {
number: 7542,
name: 'Filistin Cd',
},
city: 'Elazığ',
state: 'Karaman',
country: 'Turkey',
postcode: 29773,
coordinates: {
latitude: '73.4994',
longitude: '-44.5254',
},
timezone: {
offset: '-8:00',
description: 'Pacific Time (US & Canada)',
},
},
email: 'vedat.ozbey@example.com',
login: {
uuid: 'ff2c94d3-65c9-43f2-97ae-afc39a5d4c1b',
username: 'redtiger713',
password: 'iforget',
salt: 'xuYMm0j2',
md5: '080fefd48bae64a2d3b952898ac3eca6',
sha1: '196b73795ba4529f85fdba815b20ce39cb96a7cc',
sha256:
'870a2ab050f8ce74dc44c4654c91ae94bd9921c4b4b5c4dd308529545f875adf',
},
dob: {
date: '1996-12-31T19:07:00.102Z',
age: 25,
},
registered: {
date: '2016-05-21T03:36:41.149Z',
age: 5,
},
phone: '(563)-838-1728',
cell: '(443)-962-7009',
id: {
name: '',
value: null,
},
picture: {
large: 'https://randomuser.me/api/portraits/men/21.jpg',
medium: 'https://randomuser.me/api/portraits/med/men/21.jpg',
thumbnail:
'https://randomuser.me/api/portraits/thumb/men/21.jpg',
},
nat: 'TR',
},
],
}),
),
),
);
const rendered = render(<ExampleFetchComponent />);
expect(
await rendered.findByRole('cell', { name: /Vedat Özbey/i }),
).toBeInTheDocument();
expect(await rendered.queryByRole('alert')).not.toBeInTheDocument();
});
it('renders an alert if fetch failed', async () => {
server.use(
rest.get('https://randomuser.me/*', (_, res, ctx) => {
return res(ctx.status(500));
}),
);
const rendered = render(<ExampleFetchComponent />);
expect(await rendered.findByRole('alert')).toBeInTheDocument();
});
});
plugins/airbrake/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx
-105
View File
@@ -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/airbrake/src/components/ExampleFetchComponent/index.ts
-16
View File
@@ -1,16 +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.
*/
export { ExampleFetchComponent } from './ExampleFetchComponent';
plugins/airbrake/src/plugin.ts
+3 -1
View File
@@ -31,7 +31,9 @@ export const AirbrakePage = airbrakePlugin.provide(
createRoutableExtension({
name: 'AirbrakePage',
component: () =>
import('./components/ExampleComponent').then(m => m.ExampleComponent),
import('./components/AirbrakeWidget/AirbrakeWidget').then(
m => m.AirbrakeWidget,
),
mountPoint: rootRouteRef,
}),
);