Merge pull request backstage#461 from spotify/lighthouse-plugin

Add plugin for lighthouse-audit-service

packages/app/package.json

@@ -5,9 +5,10 @@
   "dependencies": {
     "@backstage/cli": "^0.1.1-alpha.3",
     "@backstage/core": "^0.1.1-alpha.3",
+    "@backstage/theme": "^0.1.1-alpha.3",
     "@backstage/plugin-home-page": "^0.1.1-alpha.3",
+    "@backstage/plugin-lighthouse": "^0.1.1-alpha.3",
     "@backstage/plugin-welcome": "^0.1.1-alpha.3",
-    "@backstage/theme": "^0.1.1-alpha.3",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",

packages/app/src/apis.ts

@@ -21,13 +21,21 @@ import {
   featureFlagsApiRef,
   FeatureFlags,
 } from '@backstage/core';
+import {
+  lighthouseApiRef,
+  LighthouseRestApi,
+} from '@backstage/plugin-lighthouse';
+
 import { ErrorDisplayForwarder } from './components/ErrorDisplay/ErrorDisplay';
 
 const builder = ApiRegistry.builder();
 
 export const errorDialogForwarder = new ErrorDisplayForwarder();
+
 builder.add(errorApiRef, errorDialogForwarder);
 
 builder.add(featureFlagsApiRef, new FeatureFlags());
 
+builder.add(lighthouseApiRef, new LighthouseRestApi('http://localhost:3003'));
+
 export default builder.build() as ApiHolder;

packages/app/src/plugins.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import { default as HomePagePlugin } from '@backstage/plugin-home-page';
 import { default as WelcomePlugin } from '@backstage/plugin-welcome';
-export { HomePagePlugin, WelcomePlugin };
+import { default as LighthousePlugin } from '@backstage/plugin-lighthouse';
+export { HomePagePlugin, WelcomePlugin, LighthousePlugin };

packages/cli/config/tsconfig.json

@@ -6,6 +6,8 @@
     "noEmit": false,
     "declarationMap": true,
     "incremental": true,
-    "module": "es6"
+    "module": "es6",
+    "resolveJsonModule": true,
+    "esModuleInterop": true
   }
 }

packages/cli/src/commands/plugin/rollup.config.ts

@@ -39,7 +39,7 @@ export default {
     }),
     commonjs({
       include: ['node_modules/**', '../../node_modules/**'],
-      exclude: ['**/*.stories.js'],
+      exclude: ['**/*.stories.*', '**/*.test.*'],
     }),
     postcss(),
     imageFiles(),

packages/cli/templates/default-plugin/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve('@backstage/cli/config/eslint.js')],
+};

packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 /*
  * Copyright 2020 Spotify AB
  *

packages/core/.eslintrc.js

@@ -1,13 +1,5 @@
 module.exports = {
-  overrides: [
-    {
-      files: ['**/*.ts?(x)'],
-      rules: {
-        // TODO: add prop types and set to 1
-        'react/prop-types': 0,
-      },
-    },
-  ],
+  extends: [require.resolve('@backstage/cli/config/eslint.js')],
   rules: {
     // TODO: add prop types to JS and remove
     'react/prop-types': 0,

packages/core/package.json

@@ -50,6 +50,6 @@
     "react-router": "^5.1.2"
   },
   "peerDependencies": {
-    "@backstage/theme": "^0.1.1-alpha.2"
+    "@backstage/theme": "^0.1.1-alpha.3"
   }
 }

packages/core/src/api/apis/index.ts

@@ -17,5 +17,6 @@
 export { default as ApiProvider, useApi } from './ApiProvider';
 export { default as ApiRegistry } from './ApiRegistry';
 export { default as ApiTestRegistry } from './ApiTestRegistry';
+export { default as ApiRef } from './ApiRef';
 export * from './types';
 export * from './definitions';

packages/core/src/index.ts

@@ -32,3 +32,4 @@ export { AlphaLabel, BetaLabel } from './components/Lifecycle';
 export { default as SupportButton } from './components/SupportButton';
 export { default as SortableTable } from './components/SortableTable';
 export { FeatureCalloutCircular } from './components/FeatureDiscovery/FeatureCalloutCircular';
+export * from './components/Status';

packages/core/src/layout/Content/Content.tsx

@@ -15,6 +15,7 @@
  */
 
 import React, { FC } from 'react';
+import classNames from 'classnames';
 import { Theme, makeStyles } from '@material-ui/core';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -25,12 +26,27 @@ const useStyles = makeStyles((theme: Theme) => ({
     paddingBottom: theme.spacing(3),
     ...theme.mixins.gutters({}),
   },
+  stretch: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+  },
 }));
 
-const Content: FC<{}> = ({ children, ...props }) => {
+const Content: FC<{ stretch?: boolean; className?: string }> = ({
+  children,
+  className,
+  stretch,
+  ...props
+}) => {
   const classes = useStyles();
   return (
-    <article {...props} className={classes.root}>
+    <article
+      {...props}
+      className={classNames(classes.root, className, {
+        [classes.stretch]: stretch,
+      })}
+    >
       {children}
     </article>
   );

packages/core/src/layout/Page/Page.tsx

@@ -27,7 +27,7 @@ const useStyles = makeStyles(() => ({
       "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
     gridTemplateRows: 'auto auto 1fr',
     gridTemplateColumns: 'auto 1fr auto',
-    minHeight: '100%',
+    minHeight: '100vh',
   },
 }));
 

packages/test-utils/package.json

@@ -38,7 +38,7 @@
     "react-router-dom": "^5.1.2"
   },
   "peerDependencies": {
-    "@backstage/theme": "^0.1.1-alpha.2",
+    "@backstage/theme": "^0.1.1-alpha.3",
     "@material-ui/core": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",

plugins/home-page/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve('@backstage/cli/config/eslint.js')],
+};

plugins/home-page/package.json

@@ -26,8 +26,8 @@
     "react-dom": "^16.12.0"
   },
   "peerDependencies": {
-    "@backstage/core": "^0.1.1-alpha.2",
-    "@backstage/theme": "^0.1.1-alpha.2",
+    "@backstage/core": "^0.1.1-alpha.3",
+    "@backstage/theme": "^0.1.1-alpha.3",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",

plugins/lighthouse/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve('@backstage/cli/config/eslint.js')],
+};

plugins/lighthouse/README.md

@@ -0,0 +1,51 @@
+# @backstage/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.
+
+## Getting Started
+
+### Use cases
+
+Google's [Lighthouse](https://developers.google.com/web/tools/lighthouse) auditing tool for websites
+is a great open-source resource forbenchmarking 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.
+
+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).
+
+### Installation
+
+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 when running lighthouse-audit-service. Initialize the app
+with the environment variable `LAS_CORS` set to `true`._
+
+When you have an instance running that Backstage can hook into, make sure to export the plugin in
+your app's [`plugins.ts`](https://github.com/spotify/backstage/blob/master/packages/app/src/plugins.ts)
+to enable the plugin:
+
+```js
+import { default as LighthousePlugin } from '@backstage/plugin-lighthouse';
+export LighthousePlugin;
+```
+
+Then, you need to use the `lighthouseApiRef` exported from the plugin to initialize the Rest API in
+your [`apis.ts`](https://github.com/spotify/backstage/blob/master/packages/app/src/apis.ts).
+
+```js
+import { ApiHolder, ApiRegistry } from '@backstage/core';
+import {
+  lighthouseApiRef,
+  LighthouseRestApi,
+} from '@backstage/lighthouse-audits';
+
+const builder = ApiRegistry.builder();
+
+export const lighthouseApi =
+  new LighthouseRestApi(/* your service url here! */);
+builder.add(lighthouseApiRef, lighthouseApi);
+
+export default builder.build() as ApiHolder;
+```

plugins/lighthouse/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@backstage/plugin-lighthouse",
+  "version": "0.1.1-alpha.3",
+  "main": "dist/index.cjs.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "private": true,
+  "scripts": {
+    "build:watch": "backstage-cli plugin:build --watch",
+    "build": "backstage-cli plugin:build",
+    "lint": "backstage-cli lint",
+    "test": "backstage-cli test"
+  },
+  "dependencies": {
+    "react-markdown": "^4.3.1",
+    "react-sparklines": "^1.7.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.1.1-alpha.3",
+    "@backstage/core": "^0.1.1-alpha.3",
+    "@backstage/test-utils": "^0.1.1-alpha.3",
+    "@backstage/theme": "^0.1.1-alpha.3",
+    "@material-ui/core": "^4.9.1",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.45",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react-sparklines": "^1.7.0",
+    "@types/testing-library__jest-dom": "5.0.2",
+    "jest-fetch-mock": "^3.0.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.1.2",
+    "react-use": "^13.24.0"
+  },
+  "peerDependencies": {
+    "@backstage/core": "^0.1.1-alpha.3",
+    "@backstage/theme": "^0.1.1-alpha.3",
+    "@material-ui/core": "^4.9.1",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.45",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.1.2",
+    "react-use": "^13.24.0"
+  }
+}

plugins/lighthouse/src/__fixtures__/create-audit-response.json

@@ -0,0 +1,6 @@
+{
+  "id": "80d92fff-52ec-4ef5-848f-9cec8b383e41",
+  "url": "https://anchor.fm",
+  "timeCreated": "2020-03-31T15:34:02.199-04:00",
+  "status": "RUNNING"
+}