Merge pull request #1096 from fhp/bugsnag-fix-error

Improvements to Bugsnag plugin
RoadieHQ · Sep 12, 2023 · 4697896 · 4697896
2 parents 34e0a9f + 5b4f418
commit 4697896
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 29 deletions.
diff --git a/.changeset/nice-yaks-itch.md b/.changeset/nice-yaks-itch.md
@@ -0,0 +1,17 @@
+---
+'@roadiehq/backstage-plugin-bugsnag': minor
+---
+
+**BREAKING** Change the `bugsnag.com/project-key` annotation from `OrganizationName/projectApiKey` to `OrganizationName/ProjectName`.
+
+This change allows (optionally) changing the content of the `bugsnag.com/project-key` annotation to `Organization name/Project name`. As this already contains the project name, the `bugsnag.com/project-name` annotation becomes deprecated. Configuring the plugin this way makes more sense, as the secret api-key can be kept out of the repositories. The plugin will detect if the plugin is configured with an old annotation, and revert to the old behaviour if needed.
+
+Improve the display of data in the table:
+
+- It adds the description and the status to the table.
+- It adds filtering options to the table.
+
+Bugfixes:
+
+- Don't throw an error if the annotation is missing.
+- If there are multiple stages, they are now joined with a comma.
diff --git a/ADOPTERS.md b/ADOPTERS.md
@@ -2,4 +2,5 @@
 | ----------------------------------------- | -------------------------------------------- | ----------------------------- |
 | [Roadie](https://roadie.io)               | [@dtuite](https://github.com/dtuite)         | Development                   |
 | [Hopin](https://hopin.com)                | [@vglafirov](https://github.com/vglafirov)   | Development experience portal |
-| [OVO Energy](https://www.ovoenergy.com/)  | [@dlaird-ovo](https://github.com/dlaird-ovo) | Developer Portal              |
+| [OVO Energy](https://www.ovoenergy.com/)  | [@dlaird-ovo](https://github.com/dlaird-ovo) | Developer Portal              |
+| [Gynzy](https://www.gynzy.com/)           | [@fhp](https://github.com/fhp)               | Developer Portal              |
diff --git a/packages/app/cypress/fixtures/Bugsnag/errors.json b/packages/app/cypress/fixtures/Bugsnag/errors.json
@@ -6,8 +6,10 @@
     "first_seen": "2021-09-05T09:17:17.384804Z",
     "last_seen": "2021-09-20T09:17:17.384804Z",
     "events": 3,
-    "release_stages": "Development",
+    "release_stages": ["Development"],
+    "message": "Something went wrong",
     "error_class": "Error",
+    "status": "open",
     "users": 5
   },
   {
@@ -17,8 +19,10 @@
     "first_seen": "2021-09-11T09:17:17.384804Z",
     "last_seen": "2021-09-20T09:17:17.384804Z",
     "events": 3,
-    "release_stages": "Development",
+    "release_stages": ["Development", "Test"],
+    "message": "This is a test error",
     "error_class": "Error",
+    "status": "open",
     "users": 5
   }
 ]
diff --git a/packages/app/cypress/integration/bugsnag.ts b/packages/app/cypress/integration/bugsnag.ts
@@ -27,7 +27,7 @@ describe('Bugsnag', () => {
     ).as('getOrganizations');
     cy.intercept(
       'GET',
-      'http://localhost:7007/api/proxy/bugsnag/api/organizations/129876sdfgh/projects?per_page=50',
+      'http://localhost:7007/api/proxy/bugsnag/api/organizations/129876sdfgh/projects?q=Test%20bugsnag%20application&per_page=50',
       { fixture: 'Bugsnag/projects.json' },
     ).as('getProjects');
     cy.intercept(
@@ -43,7 +43,9 @@ describe('Bugsnag', () => {
 
   describe('Navigating to Bugsnag', () => {
     it('should show Bugsnag when navigating to Bugsnag tab', () => {
-      cy.contains('Errors overview');
+      cy.contains('Description');
+      cy.contains('This is a test error');
+      cy.contains('Development, Test');
     });
   });
 });
diff --git a/packages/entities/test-entity.yaml b/packages/entities/test-entity.yaml
@@ -13,7 +13,7 @@ metadata:
     datadoghq.com/dashboard-url: https://p.datadoghq.eu/sb/test-datadog-link
     datadoghq.com/graph-token: qwertytoken1234
     argocd/app-name: test-app
-    bugsnag.com/project-key: RoadieHQTest/qwerty12345
+    bugsnag.com/project-key: RoadieHQTest/Test bugsnag application
 spec:
   type: service
   owner: roadie

diff --git a/plugins/frontend/backstage-plugin-bugsnag/README.md b/plugins/frontend/backstage-plugin-bugsnag/README.md
@@ -67,14 +67,10 @@ const serviceEntityPage = (
 1. Add annotations to the yaml config file of a component:
 
 ```yml
-bugsnag.com/project-key: <organization-name>/<project-notifier-api-key>
+bugsnag.com/project-key: <organization-name>/<project-name>
 ```
 
-Please note that if your organisation has more projects than results returned by page and defined under 'bugsnag.resultsPerPage' you need to provide additional annotations where you will provide the name of the project:
-
-```yml
-bugsnag.com/project-name: <project-name>
-```
+Note that you must use the full names, not the slugs.
 
 These values can be found in Bugsnag settings dashboard, under organization and project settings.
 

diff --git a/plugins/frontend/backstage-plugin-bugsnag/docs/backstage-bugsnag-plugin.png b/plugins/frontend/backstage-plugin-bugsnag/docs/backstage-bugsnag-plugin.png
diff --git a/plugins/frontend/backstage-plugin-bugsnag/src/api/types.ts b/plugins/frontend/backstage-plugin-bugsnag/src/api/types.ts
@@ -21,9 +21,11 @@ export type BugsnagError = {
   first_seen: string;
   last_seen: string;
   events: number;
-  release_stages: string;
+  release_stages: string[];
   error_class: string;
   users: number;
+  message: string;
+  status: string;
 };
 
 export type Organisation = {

diff --git a/...ontend/backstage-plugin-bugsnag/src/components/ErrorsOverviewComponent/ErrorsOverview.tsx b/...ontend/backstage-plugin-bugsnag/src/components/ErrorsOverviewComponent/ErrorsOverview.tsx
@@ -37,11 +37,12 @@ import {
   useProjectName,
 } from '../../hooks/useBugsnagData';
 
-export const ErrorsOverview = () => {
-  const { entity } = useEntity();
+export const ErrorsOverviewComponent = () => {
   const organisationName = useBugsnagData()[0];
-  const projectApiKey = useBugsnagData()[1];
-  const projectName = useProjectName();
+  const projectNameOrKey = useBugsnagData()[1];
+  const projectNameAnnotation = useProjectName();
+  const isKey = /^[0-9a-fA-F]{32}$/i.test(projectNameOrKey);
+  const projectName = isKey ? projectNameAnnotation : projectNameOrKey;
   const api = useApi(bugsnagApiRef);
   const configApi = useApi(configApiRef);
   const [slug, setOrganisationSlug] = useState('');
@@ -61,7 +62,9 @@ export const ErrorsOverview = () => {
     });
 
     const filteredProject = projects.find(proj =>
-      proj.api_key.includes(projectApiKey),
+      isKey
+        ? proj.api_key.includes(projectNameOrKey)
+        : proj.name.includes(projectNameOrKey),
     );
     return filteredProject;
   });
@@ -72,7 +75,7 @@ export const ErrorsOverview = () => {
     return <Alert severity="error">{error.message}</Alert>;
   }
 
-  return isBugsnagAvailable(entity) ? (
+  return (
     <Page themeId="tool">
       <Content>
         <ContentHeader title="Bugsnag logs">
@@ -87,7 +90,13 @@ export const ErrorsOverview = () => {
         </Grid>
       </Content>
     </Page>
-  ) : (
-    <MissingAnnotationEmptyState annotation={BUGSNAG_ANNOTATION} />
   );
 };
+
+export const ErrorsOverview = () => {
+  const { entity } = useEntity();
+  if (!isBugsnagAvailable(entity)) {
+    return <MissingAnnotationEmptyState annotation={BUGSNAG_ANNOTATION} />;
+  }
+  return <ErrorsOverviewComponent />;
+};
diff --git a/...rontend/backstage-plugin-bugsnag/src/components/ErrorsTableComponent/ErrorsTable.test.tsx b/...rontend/backstage-plugin-bugsnag/src/components/ErrorsTableComponent/ErrorsTable.test.tsx
@@ -92,7 +92,8 @@ describe('BugsnagErrorsTable', () => {
         </TestApiProvider>,
       ),
     );
-    expect(await rendered.findByText('Errors overview')).toBeInTheDocument();
+    expect(await rendered.findByText('Description')).toBeInTheDocument();
     expect(await rendered.findByText('SyntaxError')).toBeInTheDocument();
+    expect(await rendered.findByText('Development, Test')).toBeInTheDocument();
   });
 });
diff --git a/...ins/frontend/backstage-plugin-bugsnag/src/components/ErrorsTableComponent/ErrorsTable.tsx b/...ins/frontend/backstage-plugin-bugsnag/src/components/ErrorsTableComponent/ErrorsTable.tsx
@@ -64,12 +64,14 @@ export const DenseTable = ({
 }) => {
   const columns: TableColumn[] = [
     { title: '', field: 'class' },
+    { title: 'Description', field: 'message', width: '40%' },
     { title: 'Events', field: 'events' },
     { title: 'Users', field: 'users' },
     { title: 'Stage', field: 'stage' },
     { title: 'First seen', field: 'first_seen' },
     { title: 'Last seen', field: 'last_seen' },
     { title: 'Severity', field: 'severity' },
+    { title: 'Status', field: 'status' },
   ];
 
   const data = errors.map(error => {
@@ -81,7 +83,9 @@ export const DenseTable = ({
         organisationName,
         projectName,
       ),
-      stage: error.release_stages,
+      message: error.message,
+      status: error.status,
+      stage: error.release_stages.join(', '),
       events: error.events,
       id: error.id,
       project_id: error.project_id,
@@ -93,10 +97,23 @@ export const DenseTable = ({
 
   return (
     <Table
-      title="Errors overview"
       options={{ search: true, paging: true }}
       columns={columns}
       data={data}
+      filters={[
+        {
+          column: 'Severity',
+          type: 'multiple-select',
+        },
+        {
+          column: 'Status',
+          type: 'multiple-select',
+        },
+        {
+          column: 'Stage',
+          type: 'multiple-select',
+        },
+      ]}
     />
   );
 };

diff --git a/plugins/frontend/backstage-plugin-bugsnag/src/mock/bugsnag-mocks.ts b/plugins/frontend/backstage-plugin-bugsnag/src/mock/bugsnag-mocks.ts
@@ -22,7 +22,7 @@ export const ErrorsMock = [
     first_seen: '2021-09-05T09:17:17.384804Z',
     last_seen: '2021-09-20T09:17:17.384804Z',
     events: 3,
-    release_stages: 'Development',
+    release_stages: ['Development', 'Test'],
     error_class: 'Error',
     users: 5,
   },
@@ -33,7 +33,7 @@ export const ErrorsMock = [
     first_seen: '2021-09-11T09:17:17.384804Z',
     last_seen: '2021-09-20T09:17:17.384804Z',
     events: 3,
-    release_stages: 'Development',
+    release_stages: ['Development'],
     error_class: 'Error',
     users: 5,
   },
@@ -44,7 +44,7 @@ export const ErrorsMock = [
     first_seen: '2021-09-06T09:17:17.384804Z',
     last_seen: '2021-09-10T09:17:17.384804Z',
     events: 3,
-    release_stages: 'Development',
+    release_stages: ['Development'],
     error_class: 'Error',
     users: 5,
   },
@@ -55,7 +55,7 @@ export const ErrorsMock = [
     first_seen: '2021-09-15T09:17:17.384804Z',
     last_seen: '2021-09-20T09:17:17.384804Z',
     events: 3,
-    release_stages: 'Development',
+    release_stages: ['Development'],
     error_class: 'SyntaxError',
     users: 5,
   },

diff --git a/...-github-pull-requests/src/components/PullRequestsStatsCard/PullRequestsStatsCard.test.tsx b/...-github-pull-requests/src/components/PullRequestsStatsCard/PullRequestsStatsCard.test.tsx
@@ -32,6 +32,7 @@ import { entityMock } from '../../mocks/mocks';
 import PullRequestsStatsCard from './PullRequestsStatsCard';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { handlers } from '../../mocks/handlers';
+import { Duration } from 'luxon';
 
 const mockGithubAuth = {
   getAccessToken: async (_: string[]) => 'test-token',
@@ -65,7 +66,11 @@ describe('PullRequestsCard', () => {
       </TestApiProvider>,
     );
     expect(
-      await screen.findByText('1 month, 26 days, 16 hours'),
+      await screen.findByText(
+        Duration.fromObject({ months: 1, days: 26, hours: 16 }).toHuman({
+          notation: 'compact',
+        }),
+      ),
     ).toBeInTheDocument();
     expect(await screen.findByText('67%')).toBeInTheDocument();
     expect(await screen.findByText('3309 lines')).toBeInTheDocument();