diff --git a/app-config.yaml b/app-config.yaml index f578fb3fca..5a5fdc1cab 100644 --- a/app-config.yaml +++ b/app-config.yaml @@ -26,6 +26,11 @@ techdocs: sentry: organization: spotify +newrelic: + api: + baseUrl: 'https://api.newrelic.com/v2' + key: NEW_RELIC_REST_API_KEY + auth: providers: google: diff --git a/packages/app/package.json b/packages/app/package.json index 99865a4216..41fcc054a3 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -12,6 +12,7 @@ "@backstage/plugin-gitops-profiles": "^0.1.1-alpha.18", "@backstage/plugin-graphiql": "^0.1.1-alpha.18", "@backstage/plugin-lighthouse": "^0.1.1-alpha.18", + "@backstage/plugin-newrelic": "^0.1.1-alpha.18", "@backstage/plugin-register-component": "^0.1.1-alpha.18", "@backstage/plugin-rollbar": "^0.1.1-alpha.18", "@backstage/plugin-scaffolder": "^0.1.1-alpha.18", diff --git a/packages/app/src/plugins.ts b/packages/app/src/plugins.ts index 46c8f23ef0..95d9e6c557 100644 --- a/packages/app/src/plugins.ts +++ b/packages/app/src/plugins.ts @@ -27,3 +27,4 @@ export { plugin as TechDocs } from '@backstage/plugin-techdocs'; export { plugin as GraphiQL } from '@backstage/plugin-graphiql'; export { plugin as GithubActions } from '@backstage/plugin-github-actions'; export { plugin as Rollbar } from '@backstage/plugin-rollbar'; +export { plugin as Newrelic } from '@backstage/plugin-newrelic'; diff --git a/plugins/explore/src/components/ExplorePluginPage.tsx b/plugins/explore/src/components/ExplorePluginPage.tsx index c1d36f2544..ad706ab5a0 100644 --- a/plugins/explore/src/components/ExplorePluginPage.tsx +++ b/plugins/explore/src/components/ExplorePluginPage.tsx @@ -37,6 +37,14 @@ const useStyles = makeStyles(theme => ({ })); const toolsCards = [ + { + title: 'New Relic', + description: + 'Observability platform built to help engineers create and monitor their software', + url: '/newrelic', + image: 'https://i.imgur.com/L37ikrX.jpg', + tags: ['newrelic', 'performance', 'monitoring', 'errors', 'alerting'], + }, { title: 'CircleCI', description: diff --git a/plugins/newrelic/.eslintrc.js b/plugins/newrelic/.eslintrc.js new file mode 100644 index 0000000000..13573efa9c --- /dev/null +++ b/plugins/newrelic/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: [require.resolve('@backstage/cli/config/eslint')], +}; diff --git a/plugins/newrelic/README.md b/plugins/newrelic/README.md new file mode 100644 index 0000000000..032d4f035b --- /dev/null +++ b/plugins/newrelic/README.md @@ -0,0 +1,39 @@ +# New Relic Plugin (Alpha) + +Website: [https://newrelic.com](https://newrelic.com) + +New Relic Plugin APM +New Relic Plugin Tools + +## Getting Started + +Add New Relic REST API Key to `app-config.yaml` + +```yaml +newrelic: + api: + baseUrl: 'https://api.newrelic.com/v2' + key: +``` + +New Relic Plugin Path: [/newrelic](http://localhost:3000/newrelic) + +## Features + +- View New Relic Application Performance Monitoring (APM) data such as: + - Application Name + - Response Time (ms) + - Throughput (rpm) + - Error Rate + - Instance Count + - Apdex Score + +## Limitations + +- Currently only supports New Relic APM data + +--- + +You can also serve the plugin in isolation by running `yarn start` in the plugin directory. +This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads. +It is only meant for local development, and the setup for it can be found inside the [/dev](/dev) directory. diff --git a/plugins/newrelic/dev/index.tsx b/plugins/newrelic/dev/index.tsx new file mode 100644 index 0000000000..812a5585d4 --- /dev/null +++ b/plugins/newrelic/dev/index.tsx @@ -0,0 +1,20 @@ +/* + * 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 { createDevApp } from '@backstage/dev-utils'; +import { plugin } from '../src/plugin'; + +createDevApp().registerPlugin(plugin).render(); diff --git a/plugins/newrelic/package.json b/plugins/newrelic/package.json new file mode 100644 index 0000000000..5b1b5d54ce --- /dev/null +++ b/plugins/newrelic/package.json @@ -0,0 +1,46 @@ +{ + "name": "@backstage/plugin-newrelic", + "version": "0.1.1-alpha.18", + "main": "src/index.ts", + "types": "src/index.ts", + "license": "Apache-2.0", + "private": true, + "publishConfig": { + "access": "public", + "main": "dist/index.esm.js", + "types": "dist/index.d.ts" + }, + "scripts": { + "build": "backstage-cli plugin:build", + "start": "backstage-cli plugin:serve", + "lint": "backstage-cli lint", + "test": "backstage-cli test", + "diff": "backstage-cli plugin:diff", + "prepack": "backstage-cli prepack", + "postpack": "backstage-cli postpack", + "clean": "backstage-cli clean" + }, + "dependencies": { + "@backstage/core": "^0.1.1-alpha.18", + "@backstage/theme": "^0.1.1-alpha.18", + "@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-use": "^15.3.3" + }, + "devDependencies": { + "@backstage/cli": "^0.1.1-alpha.18", + "@backstage/dev-utils": "^0.1.1-alpha.18", + "@testing-library/jest-dom": "^5.10.1", + "@testing-library/react": "^10.4.1", + "@testing-library/user-event": "^12.0.7", + "@types/jest": "^26.0.7", + "@types/node": "^12.0.0", + "jest-fetch-mock": "^3.0.3" + }, + "files": [ + "dist" + ] +} diff --git a/plugins/newrelic/src/assets/img/newrelic-plugin-apm.png b/plugins/newrelic/src/assets/img/newrelic-plugin-apm.png new file mode 100644 index 0000000000..cc63306bba Binary files /dev/null and b/plugins/newrelic/src/assets/img/newrelic-plugin-apm.png differ diff --git a/plugins/newrelic/src/assets/img/newrelic-plugin-tools.png b/plugins/newrelic/src/assets/img/newrelic-plugin-tools.png new file mode 100644 index 0000000000..e42013f14c Binary files /dev/null and b/plugins/newrelic/src/assets/img/newrelic-plugin-tools.png differ diff --git a/plugins/newrelic/src/assets/img/newrelic.jpg b/plugins/newrelic/src/assets/img/newrelic.jpg new file mode 100644 index 0000000000..d4b3a0e196 Binary files /dev/null and b/plugins/newrelic/src/assets/img/newrelic.jpg differ diff --git a/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx b/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx new file mode 100644 index 0000000000..94d5c530a1 --- /dev/null +++ b/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx @@ -0,0 +1,50 @@ +/* + * 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, { FC } from 'react'; +import { Grid } from '@material-ui/core'; +import { + Header, + Page, + pageTheme, + Content, + ContentHeader, + HeaderLabel, + SupportButton, +} from '@backstage/core'; +import NewRelicFetchComponent from '../NewRelicFetchComponent'; + +const NewRelicComponent: FC<{}> = () => ( + +
+ +
+ + + + New Relic Application Performance Monitoring + + + + + + + + + +); + +export default NewRelicComponent; diff --git a/plugins/newrelic/src/components/NewRelicComponent/index.ts b/plugins/newrelic/src/components/NewRelicComponent/index.ts new file mode 100644 index 0000000000..de10a42770 --- /dev/null +++ b/plugins/newrelic/src/components/NewRelicComponent/index.ts @@ -0,0 +1,17 @@ +/* + * 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. + */ + +export { default } from './NewRelicComponent'; diff --git a/plugins/newrelic/src/components/NewRelicFetchComponent/NewRelicFetchComponent.tsx b/plugins/newrelic/src/components/NewRelicFetchComponent/NewRelicFetchComponent.tsx new file mode 100644 index 0000000000..9b3791e062 --- /dev/null +++ b/plugins/newrelic/src/components/NewRelicFetchComponent/NewRelicFetchComponent.tsx @@ -0,0 +1,134 @@ +/* + * 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, { FC } from 'react'; +import { + configApiRef, + Progress, + Table, + TableColumn, + useApi, +} from '@backstage/core'; +import Alert from '@material-ui/lab/Alert'; +import { useAsync } from 'react-use'; + +type NewRelicApplication = { + id: number; + application_summary: NewRelicApplicationSummary; + name: string; + language: string; + health_status: string; + reporting: boolean; + settings: NewRelicApplicationSettings; + links?: NewRelicApplicationLinks; +}; + +type NewRelicApplicationSummary = { + apdex_score: number; + error_rate: number; + host_count: number; + instance_count: number; + response_time: number; + throughput: number; +}; + +type NewRelicApplicationSettings = { + app_apdex_threshold: number; + end_user_apdex_threshold: number; + enable_real_user_monitoring: boolean; + use_server_side_config: boolean; +}; + +type NewRelicApplicationLinks = { + application_instances: Array; + servers: Array; + application_hosts: Array; +}; + +type NewRelicApplications = { + applications: NewRelicApplication[]; +}; + +export const NewRelicAPMTable: FC = ({ + applications, +}) => { + const columns: TableColumn[] = [ + { title: 'Application', field: 'name' }, + { title: 'Response Time', field: 'responseTime' }, + { title: 'Throughput', field: 'throughput' }, + { title: 'Error Rate', field: 'errorRate' }, + { title: 'Instance Count', field: 'instanceCount' }, + { title: 'Apdex', field: 'apdexScore' }, + ]; + const data = applications.map((app: NewRelicApplication) => { + const { name, application_summary: applicationSummary } = app; + const { + response_time: responseTime, + throughput, + error_rate: errorRate, + instance_count: instanceCount, + apdex_score: apdexScore, + } = applicationSummary; + + return { + name, + responseTime: `${responseTime} ms`, + throughput: `${throughput} rpm`, + errorRate: `${errorRate}%`, + instanceCount, + apdexScore, + }; + }); + + return ( + + ); +}; + +const NewRelicFetchComponent: FC<{}> = () => { + const configApi = useApi(configApiRef); + const apiBaseUrl = configApi.getString('newrelic.api.baseUrl'); + const apiKey = configApi.getString('newrelic.api.key'); + + const { value, loading, error } = useAsync(async (): Promise< + NewRelicApplication[] + > => { + const response = await fetch(`${apiBaseUrl}/applications.json`, { + headers: { + 'X-Api-Key': apiKey, + }, + }); + const data: NewRelicApplications = await response.json(); + return data.applications.filter((application: NewRelicApplication) => { + return application.hasOwnProperty('application_summary'); + }); + }, []); + + if (loading) { + return ; + } else if (error) { + return {error.message}; + } + + return ; +}; + +export default NewRelicFetchComponent; diff --git a/plugins/newrelic/src/components/NewRelicFetchComponent/index.ts b/plugins/newrelic/src/components/NewRelicFetchComponent/index.ts new file mode 100644 index 0000000000..1907c0bf1d --- /dev/null +++ b/plugins/newrelic/src/components/NewRelicFetchComponent/index.ts @@ -0,0 +1,17 @@ +/* + * 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. + */ + +export { default } from './NewRelicFetchComponent'; diff --git a/plugins/newrelic/src/index.ts b/plugins/newrelic/src/index.ts new file mode 100644 index 0000000000..3a0a0fe2d3 --- /dev/null +++ b/plugins/newrelic/src/index.ts @@ -0,0 +1,17 @@ +/* + * 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. + */ + +export { plugin } from './plugin'; diff --git a/plugins/newrelic/src/plugin.test.ts b/plugins/newrelic/src/plugin.test.ts new file mode 100644 index 0000000000..17429a95e0 --- /dev/null +++ b/plugins/newrelic/src/plugin.test.ts @@ -0,0 +1,23 @@ +/* + * 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 { plugin } from './plugin'; + +describe('newrelic', () => { + it('should export plugin', () => { + expect(plugin).toBeDefined(); + }); +}); diff --git a/plugins/newrelic/src/plugin.ts b/plugins/newrelic/src/plugin.ts new file mode 100644 index 0000000000..21aac69e8f --- /dev/null +++ b/plugins/newrelic/src/plugin.ts @@ -0,0 +1,30 @@ +/* + * 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 { createPlugin, createRouteRef } from '@backstage/core'; +import NewRelicComponent from './components/NewRelicComponent'; + +export const rootRouteRef = createRouteRef({ + path: '/newrelic', + title: 'newrelic', +}); + +export const plugin = createPlugin({ + id: 'newrelic', + register({ router }) { + router.addRoute(rootRouteRef, NewRelicComponent); + }, +}); diff --git a/plugins/newrelic/src/setupTests.ts b/plugins/newrelic/src/setupTests.ts new file mode 100644 index 0000000000..8553642152 --- /dev/null +++ b/plugins/newrelic/src/setupTests.ts @@ -0,0 +1,19 @@ +/* + * 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 '@testing-library/jest-dom'; + +require('jest-fetch-mock').enableMocks();