From 08374355317d114e0ac182a3676d8ba695490404 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Marschollek?= Date: Thu, 3 Sep 2020 09:20:04 +0200 Subject: [PATCH 1/3] Conditionally add Sentry widget to component page This adds the Sentry widget back to the component page (from which it was removed in #2246) if the component declares its own Sentry project ID in the annotation named backstage.io/sentry-project-id. The widget is hidden otherwise. Previous to #2246, the widget was just displaying an empty list because it was trying to load data for a hardcoded project name of sample-sentry-project-id. Fixes #2257 --- plugins/catalog/package.json | 1 + .../EntityPageOverview/EntityPageOverview.tsx | 11 +++++++++++ 2 files changed, 12 insertions(+) diff --git a/plugins/catalog/package.json b/plugins/catalog/package.json index b088e1699b..e393be9d17 100644 --- a/plugins/catalog/package.json +++ b/plugins/catalog/package.json @@ -27,6 +27,7 @@ "@backstage/plugin-github-actions": "^0.1.1-alpha.21", "@backstage/plugin-jenkins": "^0.1.1-alpha.21", "@backstage/plugin-scaffolder": "^0.1.1-alpha.21", + "@backstage/plugin-sentry": "^0.1.1-alpha.21", "@backstage/plugin-techdocs": "^0.1.1-alpha.21", "@backstage/theme": "^0.1.1-alpha.21", "@material-ui/core": "^4.9.1", diff --git a/plugins/catalog/src/components/EntityPageOverview/EntityPageOverview.tsx b/plugins/catalog/src/components/EntityPageOverview/EntityPageOverview.tsx index 9b29b205cf..f261698f7d 100644 --- a/plugins/catalog/src/components/EntityPageOverview/EntityPageOverview.tsx +++ b/plugins/catalog/src/components/EntityPageOverview/EntityPageOverview.tsx @@ -17,6 +17,7 @@ // TODO(shmidt-i): move to the app import { Entity } from '@backstage/catalog-model'; import { Content } from '@backstage/core'; +import { SentryIssuesWidget } from '@backstage/plugin-sentry'; import { LatestWorkflowRunCard } from '@backstage/plugin-github-actions'; import { JenkinsBuildsWidget, @@ -52,6 +53,16 @@ export const EntityPageOverview: FC<{ entity: Entity }> = ({ entity }) => { )} + {entity.metadata?.annotations?.['backstage.io/sentry-project-id'] && ( + + + + )} ); From eb4d54fcc4a2f756a12c56ee36fa4e71b132d6f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Marschollek?= Date: Fri, 4 Sep 2020 12:27:54 +0200 Subject: [PATCH 2/3] Adapt app-driven entity page Addresses the changes required after merging #2076. The Sentry plugin now defines a router and the widget will be displayed as a tab. --- .../app/src/components/catalog/EntityPage.tsx | 11 +++++ .../EntityPageOverview/EntityPageOverview.tsx | 11 ----- plugins/sentry/package.json | 2 + plugins/sentry/src/components/Router.tsx | 49 +++++++++++++++++++ plugins/sentry/src/index.ts | 1 + 5 files changed, 63 insertions(+), 11 deletions(-) create mode 100644 plugins/sentry/src/components/Router.tsx diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index 879e2fe6f7..cc1ae8bedc 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -14,6 +14,7 @@ * limitations under the License. */ import { Router as GitHubActionsRouter } from '@backstage/plugin-github-actions'; +import { Router as SentryRouter } from '@backstage/plugin-sentry'; import React from 'react'; import { EntityPageLayout, @@ -43,6 +44,11 @@ const ServiceEntityPage = ({ entity }: { entity: Entity }) => ( title="CI/CD" element={} /> + } + /> ); @@ -58,6 +64,11 @@ const WebsiteEntityPage = ({ entity }: { entity: Entity }) => ( title="CI/CD" element={} /> + } + /> ); diff --git a/plugins/catalog/src/components/EntityPageOverview/EntityPageOverview.tsx b/plugins/catalog/src/components/EntityPageOverview/EntityPageOverview.tsx index f261698f7d..9b29b205cf 100644 --- a/plugins/catalog/src/components/EntityPageOverview/EntityPageOverview.tsx +++ b/plugins/catalog/src/components/EntityPageOverview/EntityPageOverview.tsx @@ -17,7 +17,6 @@ // TODO(shmidt-i): move to the app import { Entity } from '@backstage/catalog-model'; import { Content } from '@backstage/core'; -import { SentryIssuesWidget } from '@backstage/plugin-sentry'; import { LatestWorkflowRunCard } from '@backstage/plugin-github-actions'; import { JenkinsBuildsWidget, @@ -53,16 +52,6 @@ export const EntityPageOverview: FC<{ entity: Entity }> = ({ entity }) => { )} - {entity.metadata?.annotations?.['backstage.io/sentry-project-id'] && ( - - - - )} ); diff --git a/plugins/sentry/package.json b/plugins/sentry/package.json index d5b29cc307..294d7159bf 100644 --- a/plugins/sentry/package.json +++ b/plugins/sentry/package.json @@ -21,6 +21,7 @@ "clean": "backstage-cli clean" }, "dependencies": { + "@backstage/catalog-model": "^0.1.1-alpha.21", "@backstage/core": "^0.1.1-alpha.21", "@backstage/theme": "^0.1.1-alpha.21", "@material-ui/core": "^4.9.1", @@ -29,6 +30,7 @@ "@types/react": "^16.9", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-router": "6.0.0-beta.0", "react-sparklines": "^1.7.0", "react-use": "^15.3.3", "timeago.js": "^4.0.2" diff --git a/plugins/sentry/src/components/Router.tsx b/plugins/sentry/src/components/Router.tsx new file mode 100644 index 0000000000..7c0468fda2 --- /dev/null +++ b/plugins/sentry/src/components/Router.tsx @@ -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 React from 'react'; +import { Entity } from '@backstage/catalog-model'; +import { Routes, Route } from 'react-router'; +import { WarningPanel } from '@backstage/core'; +import { SentryPluginWidget } from './SentryPluginWidget/SentryPluginWidget'; + +const SENTRY_ANNOTATION = 'sentry.io/project-id'; + +const isPluginApplicableToEntity = (entity: Entity) => + Boolean(entity.metadata.annotations?.[SENTRY_ANNOTATION]) && + entity.metadata.annotations?.[SENTRY_ANNOTATION] !== ''; + +export const Router = ({ entity }: { entity: Entity }) => + !isPluginApplicableToEntity(entity) ? ( + + `entity.metadata.annotations[' + {SENTRY_ANNOTATION}']` key is missing on the entity.{' '} + + ) : ( + + + } + /> + ) + + ); diff --git a/plugins/sentry/src/index.ts b/plugins/sentry/src/index.ts index 50da801a40..a0d3cab1be 100644 --- a/plugins/sentry/src/index.ts +++ b/plugins/sentry/src/index.ts @@ -15,4 +15,5 @@ */ export { plugin } from './plugin'; +export { Router } from './components/Router'; export { SentryPluginWidget as SentryIssuesWidget } from './components/SentryPluginWidget/SentryPluginWidget'; From bb7430dababac68b9f4989aa5933b2157408f3d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Marschollek?= Date: Fri, 4 Sep 2020 13:56:42 +0200 Subject: [PATCH 3/3] Refactor the Sentry plugin router --- plugins/sentry/src/components/Router.tsx | 31 +++++++++++------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/plugins/sentry/src/components/Router.tsx b/plugins/sentry/src/components/Router.tsx index 7c0468fda2..47d532b4e3 100644 --- a/plugins/sentry/src/components/Router.tsx +++ b/plugins/sentry/src/components/Router.tsx @@ -19,31 +19,28 @@ import { Routes, Route } from 'react-router'; import { WarningPanel } from '@backstage/core'; import { SentryPluginWidget } from './SentryPluginWidget/SentryPluginWidget'; -const SENTRY_ANNOTATION = 'sentry.io/project-id'; +const SENTRY_ANNOTATION = 'sentry.io/project-slug'; -const isPluginApplicableToEntity = (entity: Entity) => - Boolean(entity.metadata.annotations?.[SENTRY_ANNOTATION]) && - entity.metadata.annotations?.[SENTRY_ANNOTATION] !== ''; +export const Router = ({ entity }: { entity: Entity }) => { + const projectId = entity.metadata.annotations?.[SENTRY_ANNOTATION]; -export const Router = ({ entity }: { entity: Entity }) => - !isPluginApplicableToEntity(entity) ? ( - - `entity.metadata.annotations[' - {SENTRY_ANNOTATION}']` key is missing on the entity.{' '} - - ) : ( + if (!projectId) { + return ( + + 
{SENTRY_ANNOTATION}
annotation is missing on the entity. + + ); + } + + return ( + } /> ) ); +};