Adapt app-driven entity page

Addresses the changes required after merging backstage#2076. The Sentry plugin now defines a router and the widget will be displayed as a tab.
muffix · Sep 4, 2020 · eb4d54f · eb4d54f
1 parent 0837435
commit eb4d54f
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 11 deletions.
diff --git 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={<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>
 );
 

diff --git 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 }) => {
             <LatestWorkflowRunCard entity={entity} branch="master" />
           </Grid>
         )}
-        {entity.metadata?.annotations?.['backstage.io/sentry-project-id'] && (
-          <Grid item sm={8}>
-            <SentryIssuesWidget
-              sentryProjectId={
-                entity.metadata?.annotations?.['backstage.io/sentry-project-id']
-              }
-              statsFor="24h"
-            />
-          </Grid>
-        )}
       </Grid>
     </Content>
   );

diff --git 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
@@ -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) ? (
+    <WarningPanel title="Sentry plugin:">
+      `entity.metadata.annotations['
+      {SENTRY_ANNOTATION}']` key is missing on the entity.{' '}
+    </WarningPanel>
+  ) : (
+    <Routes>
+      <Route
+        path="/"
+        element={
+          <SentryPluginWidget
+            sentryProjectId={
+              entity.metadata.annotations?.[SENTRY_ANNOTATION] || ''
+            }
+            statsFor="24h"
+          />
+        }
+      />
+      )
+    </Routes>
+  );
diff --git 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';