minor fixes and add lighthouse

backstage/Makefile

@@ -2,6 +2,14 @@
 run:
 	yarn dev
 
+.PHONY: run-lighthouse-srv
+run-lighthouse-srv:
+	docker-compose -f lighthouse.yaml up
+
+.PHONY: stop-lighthouse-srv
+stop-lighthouse-srv:
+	docker-compose -f lighthouse.yaml down
+
 .PHONY: install
 install:
 	pip3 install mkdocs-techdocs-core==1.0.2

backstage/README.md

@@ -5,10 +5,6 @@ This is your newly scaffolded Backstage App, Good Luck!
 To start the app, run:
 
 ```sh
-make install
-make run
+yarn install
+yarn dev
 ```
-
-Provide Github identity in http://localhost:3000/settings/auth-providers.
-
-This setup installs backstage plugins. The OTEL demo should be visible in backstage by default -- you can explore provided components, API and docs. In each component, we provide a simple overview including security, dependabot and GH codespaces. More info is available in the tabs. Components documentation is hosted in https://github.com/jmichalak9/opentelemetry.io.

backstage/app-config.yaml

@@ -19,6 +19,8 @@ backend:
     # host: 127.0.0.1
   csp:
     connect-src: ["'self'", 'http:', 'https:']
+    frame-src:
+      - http://localhost:4008
     # Content-Security-Policy directives follow the Helmet format: https://helmetjs.github.io/#reference
     # Default Helmet Content-Security-Policy values can be removed by setting the key to false
   cors:
@@ -105,3 +107,5 @@ catalog:
     #   target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/acme-corp.yaml
     #   rules:
     #     - allow: [User, Group]
+lighthouse:
+  baseUrl: http://localhost:4008

backstage/lighthouse.yaml

@@ -0,0 +1,24 @@
+# docker-compose.yml
+version: '3.1'
+
+services:
+
+  db:
+    image: postgres:latest
+    restart: always
+    environment:
+      POSTGRES_USER: dbuser
+      POSTGRES_PASSWORD: example
+
+  lighthouse:
+    image: spotify/lighthouse-audit-service:latest
+    environment:
+      PGHOST: db
+      PGUSER: dbuser
+      PGPASSWORD: example
+      LAS_PORT: 4008
+      LAS_CORS: "true"
+    ports:
+      - "4008:4008"
+    extra_hosts:
+    - "host.docker.internal:host-gateway"

backstage/package.json

@@ -58,8 +58,6 @@
   "dependencies": {
     "@adityasinghal26/plugin-github-codespaces": "^1.0.3",
     "@roadiehq/backstage-plugin-github-insights": "^2.3.27",
-    "@roadiehq/backstage-plugin-security-insights": "^2.3.15",
-    "backstage-plugin-techdocs-addon-mermaid": "^0.11.0",
-    "isolated-vm": "^4.7.2"
+    "@roadiehq/backstage-plugin-security-insights": "^2.3.15"
   }
 }

backstage/packages/app/package.json

@@ -28,20 +28,20 @@
     "@backstage/plugin-catalog-import": "^0.10.5",
     "@backstage/plugin-catalog-react": "^1.9.3",
     "@backstage/plugin-github-actions": "^0.6.10",
+    "@backstage/plugin-lighthouse": "^0.4.15",
     "@backstage/plugin-org": "^0.6.19",
     "@backstage/plugin-permission-react": "^0.4.19",
     "@backstage/plugin-scaffolder": "^1.17.1",
     "@backstage/plugin-search": "^1.4.5",
     "@backstage/plugin-search-react": "^1.7.5",
     "@backstage/plugin-tech-radar": "^0.6.12",
     "@backstage/plugin-techdocs": "^1.9.3",
-    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.5",
+    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.4",
     "@backstage/plugin-techdocs-react": "^1.1.15",
     "@backstage/plugin-user-settings": "^0.8.0",
     "@backstage/theme": "^0.5.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
-    "backstage-plugin-techdocs-addon-mermaid": "^0.11.0",
     "history": "^5.0.0",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",

backstage/packages/app/src/App.tsx

@@ -36,8 +36,7 @@ import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/
 
 import { githubAuthApiRef } from '@backstage/core-plugin-api';
 import { SignInProviderConfig, SignInPage } from '@backstage/core-components';
-
-import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';
+import { LighthousePage } from '@backstage/plugin-lighthouse';
 
 const githubProvider: SignInProviderConfig = {
   id: 'github-auth-provider',
@@ -93,7 +92,6 @@ const routes = (
     >
       <TechDocsAddons>
         <ReportIssue />
-        <Mermaid config={{ theme: 'forest', themeVariables: { lineColor: '#000000' } }} />
       </TechDocsAddons>
     </Route>
     <Route path="/create" element={<ScaffolderPage />} />
@@ -115,6 +113,7 @@ const routes = (
     </Route>
     <Route path="/settings" element={<UserSettingsPage />} />
     <Route path="/catalog-graph" element={<CatalogGraphPage />} />
+    <Route path="/lighthouse" element={<LighthousePage />} />
   </FlatRoutes>
 );
 

backstage/packages/app/src/components/catalog/EntityPage.tsx

@@ -73,8 +73,11 @@ import {
 } from '@adityasinghal26/plugin-github-codespaces';
 
 import { EntityGithubInsightsContent } from '@roadiehq/backstage-plugin-github-insights';
-
-import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';
+import {
+  EntityLighthouseContent,
+  EntityLastLighthouseAuditCard,
+  isLighthouseAvailable,
+} from '@backstage/plugin-lighthouse';
 
 const codespacesContent = (
   <>
@@ -103,7 +106,6 @@ const techdocsContent = (
   <EntityTechdocsContent>
     <TechDocsAddons>
       <ReportIssue />
-      <Mermaid config={{ theme: 'forest', themeVariables: { lineColor: '#000000' } }} />
     </TechDocsAddons>
   </EntityTechdocsContent>
 );
@@ -212,6 +214,13 @@ const overviewContent = (
         </Grid>
       </EntitySwitch.Case>
     </EntitySwitch>
+    <EntitySwitch>
+      <EntitySwitch.Case if={isLighthouseAvailable}>
+        <Grid item md={6}>
+          <EntityLastLighthouseAuditCard />
+        </Grid>
+      </EntitySwitch.Case>
+    </EntitySwitch>
   </Grid>
 );
 
@@ -296,6 +305,9 @@ const websiteEntityPage = (
     <EntityLayout.Route path="/docs" title="Docs">
       {techdocsContent}
     </EntityLayout.Route>
+    <EntityLayout.Route path="/lighthouse" title="Lighthouse">
+      <EntityLighthouseContent />
+    </EntityLayout.Route>
   </EntityLayout>
 );