@backstage-community/plugin-lighthouse 0.4.20

package/README.md

@@ -0,0 +1,115 @@
+# @backstage-community/plugin-lighthouse
+
+A frontend for [lighthouse-audit-service](https://github.com/spotify/lighthouse-audit-service), this plugin allows you to trigger Lighthouse audits on websites and track them over time.
+
+## Introduction
+
+Google's [Lighthouse](https://developers.google.com/web/tools/lighthouse) auditing tool for websites
+is a great open-source resource for benchmarking and improving the accessibility, performance, SEO, and best practices of your site.
+At Spotify, we keep track of Lighthouse audit scores over time to look at trends and overall areas for investment.
+
+This plugin allows you to generate on-demand Lighthouse audits for websites, and to track the trends for the
+top-level categories of Lighthouse at a glance.
+
+You can learn more in our blog post [Introducing Lighthouse for Backstage](https://backstage.io/blog/2020/04/06/lighthouse-plugin).
+
+| List of audits                                                                | Specific audit                                                                        |
+| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| ![Screen shot of the main Lighthouse plugin page](images/lighthouse-page.png) | ![Screen shot of the resulting audit in the Lighthouse plugin](images/audit-view.png) |
+
+In the future, we hope to add support for scheduling audits (which we do internally), as well as allowing
+custom runs of Lighthouse to be ingested (for auditing sites that require authentication or some session state).
+
+## Getting Started
+
+To get started, you will need a running instance of [`lighthouse-audit-service`](https://github.com/spotify/lighthouse-audit-service).
+_It's likely you will need to [enable CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) to integrate with Backstage, so initialize the `lighthouse-audit-service` with the environment variable `LAS_CORS` set to `true`._
+
+When you have an instance running that Backstage can hook into, first install the plugin into your app:
+
+```bash
+# From your Backstage root directory
+yarn --cwd packages/app add @backstage-community/plugin-lighthouse
+```
+
+Modify your app routes in `App.tsx` to include the `LighthousePage` component exported from the plugin, for example:
+
+```tsx
+// In packages/app/src/App.tsx
+import { LighthousePage } from '@backstage-community/plugin-lighthouse';
+
+const routes = (
+  <FlatRoutes>
+    {/* ...other routes */}
+    <Route path="/lighthouse" element={<LighthousePage />} />
+```
+
+Then configure the `lighthouse-audit-service` URL in your [`app-config.yaml`](https://github.com/backstage/backstage/blob/master/app-config.yaml).
+
+```yaml
+backend:
+  csp:
+    frame-src:
+      - http://your-service-url
+lighthouse:
+  baseUrl: http://your-service-url
+```
+
+## Integration with the Catalog
+
+The Lighthouse plugin can be integrated into the catalog so that Lighthouse audit information relating to a component
+can be displayed within that component's entity page. In order to link an Entity to its Lighthouse audits, the entity
+must be annotated as follows:
+
+```yaml
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  # ...
+  annotations:
+    lighthouse.com/website-url: # A single website url e.g. https://backstage.io/
+```
+
+> NOTE: The plugin only supports one website URL per component at this time.
+
+Add a Lighthouse tab to the entity page:
+
+```tsx
+// In packages/app/src/components/catalog/EntityPage.tsx
+import { EntityLighthouseContent } from '@backstage-community/plugin-lighthouse';
+
+const websiteEntityPage = (
+  <EntityLayout>
+    {/* other tabs... */}
+    <EntityLayout.Route path="/lighthouse" title="Lighthouse">
+      <EntityLighthouseContent />
+    </EntityLayout.Route>
+```
+
+> NOTE: The embedded router renders page content without a header section
+> allowing it to be rendered within a catalog plugin page.
+
+Add a **Lighthouse card** to the overview tab on the EntityPage:
+
+```tsx
+// In packages/app/src/components/catalog/EntityPage.tsx
+import {
+  EntityLastLighthouseAuditCard,
+  isLighthouseAvailable,
+} from '@backstage-community/plugin-lighthouse';
+
+const overviewContent = (
+  <Grid container spacing={3} alignItems="stretch">
+    {/* ...other content */}
+    <EntitySwitch>
+      <EntitySwitch.Case if={isLighthouseAvailable}>
+        <Grid item md={6}>
+          <EntityLastLighthouseAuditCard />
+        </Grid>
+      </EntitySwitch.Case>
+    </EntitySwitch>
+```
+
+## Schedule
+
+If you want to run automated scheduled runs, you can install the [@backstage/lighthouse-backend](../lighthouse-backend/README.md) plugin

package/dist/esm/index-DTZMI_cR.esm.js

@@ -0,0 +1,26 @@
+export { LastLighthouseAuditCard } from '../index.esm.js';
+import '@backstage-community/plugin-lighthouse-common';
+import '@backstage/core-plugin-api';
+import 'react';
+import 'react-router-dom';
+import '@backstage/plugin-catalog-react';
+import '@material-ui/core/Button';
+import '@material-ui/core/Grid';
+import '@material-ui/lab/Pagination';
+import 'react-use/esm/useAsync';
+import 'react-use/esm/useLocalStorage';
+import '@material-ui/core/Tab';
+import '@material-ui/core/Tabs';
+import '@material-ui/core/styles';
+import '@material-ui/icons/Close';
+import '@backstage/core-components';
+import '@material-ui/core/Typography';
+import 'react-use/esm/useInterval';
+import '@material-ui/core/List';
+import '@material-ui/core/ListItem';
+import '@material-ui/core/ListItemIcon';
+import '@material-ui/core/ListItemText';
+import '@material-ui/lab/Alert';
+import '@material-ui/core/MenuItem';
+import '@material-ui/core/TextField';
+//# sourceMappingURL=index-DTZMI_cR.esm.js.map

package/dist/esm/index-DTZMI_cR.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-DTZMI_cR.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import * as _backstage_core_components from '@backstage/core-components';
+import { InfoCardVariants } from '@backstage/core-components';
+import * as react from 'react';
+import react__default from 'react';
+import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
+import { Entity } from '@backstage/catalog-model';
+import { LighthouseApi } from '@backstage-community/plugin-lighthouse-common';
+
+/** @public */
+declare const lighthousePlugin: _backstage_core_plugin_api.BackstagePlugin<{
+    root: _backstage_core_plugin_api.RouteRef<undefined>;
+    entityContent: _backstage_core_plugin_api.RouteRef<undefined>;
+}, {}, {}>;
+/** @public */
+declare const LighthousePage: () => react.JSX.Element;
+/** @public */
+declare const EntityLighthouseContent: () => react.JSX.Element;
+/** @public */
+declare const EntityLastLighthouseAuditCard: (props: {
+    dense?: boolean | undefined;
+    variant?: _backstage_core_components.InfoCardVariants | undefined;
+}) => react.JSX.Element;
+
+/** @public */
+declare const isLighthouseAvailable: (entity: Entity) => boolean;
+/** @public */
+declare const Router: () => react__default.JSX.Element;
+/** @public */
+declare const EmbeddedRouter: () => react__default.JSX.Element;
+
+/** @public */
+declare const lighthouseApiRef: _backstage_core_plugin_api.ApiRef<LighthouseApi>;
+
+/** @public */
+declare const LastLighthouseAuditCard: (props: {
+    dense?: boolean;
+    variant?: InfoCardVariants;
+}) => react__default.JSX.Element;
+
+export { EmbeddedRouter, EntityLastLighthouseAuditCard, EntityLighthouseContent, LastLighthouseAuditCard, LighthousePage, Router, isLighthouseAvailable, isLighthouseAvailable as isPluginApplicableToEntity, lighthouseApiRef, lighthousePlugin, lighthousePlugin as plugin };