Merge pull request #2258 from muffix/fix-2257-conditionally-add-sentry-widget

Conditionally add Sentry widget to component page

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={<GitHubActionsRouter entity={entity} />}
     />
+    <EntityPageLayout.Content
+      path="/sentry"
+      title="Sentry"
+      element={<SentryRouter entity={entity} />}
+    />
   </EntityPageLayout>
 );
 
@@ -58,6 +64,11 @@ const WebsiteEntityPage = ({ entity }: { entity: Entity }) => (
       title="CI/CD"
       element={<GitHubActionsRouter entity={entity} />}
     />
+    <EntityPageLayout.Content
+      path="/sentry"
+      title="Sentry"
+      element={<SentryRouter entity={entity} />}
+    />
   </EntityPageLayout>
 );
 

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",

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"

plugins/sentry/src/components/Router.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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-slug';
+
+export const Router = ({ entity }: { entity: Entity }) => {
+  const projectId = entity.metadata.annotations?.[SENTRY_ANNOTATION];
+
+  if (!projectId) {
+    return (
+      <WarningPanel title="Sentry plugin:">
+        <pre>{SENTRY_ANNOTATION}</pre> annotation is missing on the entity.
+      </WarningPanel>
+    );
+  }
+
+  return (
+    <Routes>
+      <Route
+        path="/"
+        element={
+          <SentryPluginWidget sentryProjectId={projectId} statsFor="24h" />
+        }
+      />
+      )
+    </Routes>
+  );
+};

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';