From 89ecdf526a7d1183b7cc4956105be418c6371bcb Mon Sep 17 00:00:00 2001 From: Adam Harvey Date: Wed, 14 Apr 2021 14:42:50 -0400 Subject: [PATCH 01/32] Update plugin example for composability Signed-off-by: Adam Harvey Signed-off-by: Brett Wright --- .../configure-app-with-plugins.md | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md index cdef932127..1753676e19 100644 --- a/docs/getting-started/configure-app-with-plugins.md +++ b/docs/getting-started/configure-app-with-plugins.md @@ -34,23 +34,25 @@ CircleCI is a frontend UI plugin, it goes in `app` rather than `backend`. export { plugin as Circleci } from '@backstage/plugin-circleci'; ``` -3. Register the plugin router: +3. Register the plugin in the entity pages: ```jsx // packages/app/src/components/catalog/EntityPage.tsx - -import { Router as CircleCIRouter } from '@backstage/plugin-circleci'; +import { + EntityCircleCIContent, + isCircleCIAvailable, +} from '@backstage/plugin-circleci'; // Then somewhere inside -} -/>; + + +; ``` -Note that stand-alone plugins that are not "attached" to the Software Catalog -would be added outside the `EntityPage`. +This is just one example, but each Backstage instance may integrate content or +cards to suit their needs on different pages, tabs, etc. Note that stand-alone +plugins that are not "attached" to the Software Catalog would be added outside +the `EntityPage`. 4. [Optional] Add proxy config: From 6c3c255ff5fedff10e1d92fc64a407e95b91a995 Mon Sep 17 00:00:00 2001 From: Adam Harvey Date: Thu, 15 Apr 2021 12:42:03 -0400 Subject: [PATCH 02/32] Fix pluginname Signed-off-by: Adam Harvey Signed-off-by: Brett Wright --- docs/getting-started/configure-app-with-plugins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md index 1753676e19..428f768a82 100644 --- a/docs/getting-started/configure-app-with-plugins.md +++ b/docs/getting-started/configure-app-with-plugins.md @@ -31,7 +31,7 @@ CircleCI is a frontend UI plugin, it goes in `app` rather than `backend`. ```js // packages/app/src/plugins.ts -export { plugin as Circleci } from '@backstage/plugin-circleci'; +export { plugin as CircleCi } from '@backstage/plugin-circleci'; ``` 3. Register the plugin in the entity pages: From 274fb80198a98ad7818370e043bdb64e1b2c3520 Mon Sep 17 00:00:00 2001 From: Adam Harvey Date: Thu, 15 Apr 2021 14:41:10 -0400 Subject: [PATCH 03/32] Clarify example Signed-off-by: Adam Harvey Signed-off-by: Brett Wright --- .../configure-app-with-plugins.md | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md index 428f768a82..b2f3a37d90 100644 --- a/docs/getting-started/configure-app-with-plugins.md +++ b/docs/getting-started/configure-app-with-plugins.md @@ -36,17 +36,22 @@ export { plugin as CircleCi } from '@backstage/plugin-circleci'; 3. Register the plugin in the entity pages: -```jsx -// packages/app/src/components/catalog/EntityPage.tsx -import { - EntityCircleCIContent, - isCircleCIAvailable, -} from '@backstage/plugin-circleci'; +```diff + // packages/app/src/components/catalog/EntityPage.tsx ++import { ++ EntityCircleCIContent, ++ isCircleCIAvailable, ++} from '@backstage/plugin-circleci'; -// Then somewhere inside - - -; +... + const cicdContent = ( + + ... ++ ++ ++ ; + + ); ``` This is just one example, but each Backstage instance may integrate content or From 21c90863a2485048bcf424985a854b4136bb8ad3 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 16 Apr 2021 04:19:34 +0000 Subject: [PATCH 04/32] chore(deps): bump diff from 4.0.2 to 5.0.0 Bumps [diff](https://github.com/kpdecker/jsdiff) from 4.0.2 to 5.0.0. - [Release notes](https://github.com/kpdecker/jsdiff/releases) - [Changelog](https://github.com/kpdecker/jsdiff/blob/master/release-notes.md) - [Commits](https://github.com/kpdecker/jsdiff/compare/v4.0.2...v5.0.0) Signed-off-by: dependabot[bot] Signed-off-by: Brett Wright --- packages/cli/package.json | 2 +- yarn.lock | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/cli/package.json b/packages/cli/package.json index 0a8561fa16..548e659e76 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -62,7 +62,7 @@ "commander": "^6.1.0", "css-loader": "^3.5.3", "dashify": "^2.0.0", - "diff": "^4.0.2", + "diff": "^5.0.0", "esbuild": "^0.8.56", "eslint": "^7.1.0", "eslint-config-prettier": "^6.0.0", diff --git a/yarn.lock b/yarn.lock index 1f76456d00..2fe64c785d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11527,11 +11527,16 @@ diff@1.4.0: resolved "https://registry.npmjs.org/diff/-/diff-1.4.0.tgz#7f28d2eb9ee7b15a97efd89ce63dcfdaa3ccbabf" integrity sha1-fyjS657nsVqX79ic5j3P2qPMur8= -diff@^4.0.1, diff@^4.0.2: +diff@^4.0.1: version "4.0.2" resolved "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d" integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A== +diff@^5.0.0: + version "5.0.0" + resolved "https://registry.npmjs.org/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b" + integrity sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w== + diffie-hellman@^5.0.0: version "5.0.3" resolved "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875" From 2730b30b7c543dde0051cbd7de31c19e977ed729 Mon Sep 17 00:00:00 2001 From: Adam Harvey Date: Thu, 15 Apr 2021 21:05:26 -0400 Subject: [PATCH 05/32] Move diagram to system page Signed-off-by: Adam Harvey Signed-off-by: Brett Wright --- .changeset/sour-plums-enjoy.md | 7 +++++++ packages/app/src/components/catalog/EntityPage.tsx | 7 +++---- .../packages/app/src/components/catalog/EntityPage.tsx | 7 +++---- 3 files changed, 13 insertions(+), 8 deletions(-) create mode 100644 .changeset/sour-plums-enjoy.md diff --git a/.changeset/sour-plums-enjoy.md b/.changeset/sour-plums-enjoy.md new file mode 100644 index 0000000000..ef68166255 --- /dev/null +++ b/.changeset/sour-plums-enjoy.md @@ -0,0 +1,7 @@ +--- +'@backstage/create-app': patch +--- + +Fix system diagram card to be on the system page + +To apply the same fix to an existing application, in `EntityPage.tsx` simply move the `` for the `/diagram` path from the `groupPage` down into the `systemPage` element. diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index d6f91957a9..d4db2b0e63 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -441,10 +441,6 @@ const groupPage = ( - - - - ); @@ -463,6 +459,9 @@ const systemPage = ( + + + ); diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx index f1aba46c52..a302bb6dd7 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx @@ -208,10 +208,6 @@ const groupPage = ( - - - - ); @@ -230,6 +226,9 @@ const systemPage = ( + + + ); From 8761385311c4c52e19ae6a25c82ff2a6e40f3fde Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 11:16:43 +0200 Subject: [PATCH 06/32] added datadog RUM events Signed-off-by: Brett Wright Signed-off-by: Brett Wright --- app-config.yaml | 6 ++ packages/app/public/index.html | 112 ++++++++++++------------- packages/cli/package.json | 30 +++++++ packages/cli/src/lib/bundler/config.ts | 10 +++ 4 files changed, 100 insertions(+), 58 deletions(-) diff --git a/app-config.yaml b/app-config.yaml index afbda40852..56733436a6 100644 --- a/app-config.yaml +++ b/app-config.yaml @@ -2,6 +2,12 @@ app: title: Backstage Example App baseUrl: http://localhost:3000 googleAnalyticsTrackingId: # UA-000000-0 + datadogRum: + clientToken: '123456789' + applicationId: qwerty + # site: # datadoghq.eu default = datadoghq.com + # env: # optional + support: url: https://github.com/backstage/backstage/issues # Used by common ErrorPage items: # Used by common SupportButton component diff --git a/packages/app/public/index.html b/packages/app/public/index.html index 9a665141c0..e55e39f7d6 100644 --- a/packages/app/public/index.html +++ b/packages/app/public/index.html @@ -1,60 +1,34 @@ - - - - - - - - - - - - - - - - <%= app.title %> + + + + + + + + + + <%= app.title %> + - <% if (app.googleAnalyticsTrackingId && typeof app.googleAnalyticsTrackingId - === 'string') { %> - + <% if (app.googleAnalyticsTrackingId && typeof app.googleAnalyticsTrackingId==='string' ) { %> + <% } %> - - - -
- - - + + + \ No newline at end of file diff --git a/packages/cli/package.json b/packages/cli/package.json index 548e659e76..251b2ab076 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -180,6 +180,36 @@ "UA-000000-0" ] }, + "datadogRum": { + "type": "object", + "description": "Datadog RUM events configuration", + "properties": { + "env": { + "type": "string", + "visibility": "frontend", + "description": "Environment for Datadog RUM events" + }, + "clientToken": { + "type": "string", + "visibility": "frontend", + "description": "clientToken for Datadog RUM events" + }, + "applicationId": { + "type": "string", + "visibility": "frontend", + "description": "applicationId for Datadog RUM events" + }, + "site": { + "type": "string", + "visibility": "frontend", + "description": "site for Datadog RUM events" + } + }, + "required": [ + "clientToken", + "applicationId" + ] + }, "listen": { "type": "object", "description": "Listening configuration for local development", diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts index f81e055f69..8837554f22 100644 --- a/packages/cli/src/lib/bundler/config.ts +++ b/packages/cli/src/lib/bundler/config.ts @@ -127,6 +127,16 @@ export async function createConfig( googleAnalyticsTrackingId: frontendConfig.getOptionalString( 'app.googleAnalyticsTrackingId', ), + datadogRum: { + env: frontendConfig.getOptionalString('app.datadogRum.env'), + clientToken: frontendConfig.getOptionalString( + 'app.datadogRum.clientToken', + ), + applicationId: frontendConfig.getOptionalString( + 'app.datadogRum.applicationId', + ), + site: frontendConfig.getOptionalString('app.datadogRum.site'), + }, }, }, }), From 1334c7868c7ffd0a0e5ef91021e8619edcc9c813 Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 11:47:17 +0200 Subject: [PATCH 07/32] Added doco regarding Datadog installation Signed-off-by: Brett Wright Signed-off-by: Brett Wright --- docs/integrations/datadog-rum/installation.md | 30 +++++++++++++++++++ docs/plugins/observability.md | 5 ++++ 2 files changed, 35 insertions(+) create mode 100644 docs/integrations/datadog-rum/installation.md diff --git a/docs/integrations/datadog-rum/installation.md b/docs/integrations/datadog-rum/installation.md new file mode 100644 index 0000000000..b23f2b4039 --- /dev/null +++ b/docs/integrations/datadog-rum/installation.md @@ -0,0 +1,30 @@ +--- +id: installation +title: Datadog RUM Installation +sidebar_label: Installation +# prettier-ignore +description: Adding Datadog RUM to Your App +--- + +There is a basic [Datadog](https://docs.datadoghq.com/real_user_monitoring/) +integration built into Backstage. You can enable it by adding the following to +your app configuration: + +```yaml +app: + datadogRum: + clientToken: '123456789' + applicationId: qwerty + # site: # datadoghq.eu default = datadoghq.com + # env: # optional +``` + +Replace the clientToken and applicationId with the ones generated for you +datadog. + +optional arguments: + +``` +site: datadoghq.eu # default equals datadoghq.com +env: dev # allow to specify the environment +``` diff --git a/docs/plugins/observability.md b/docs/plugins/observability.md index de6f4bf988..b5a6a0ba60 100644 --- a/docs/plugins/observability.md +++ b/docs/plugins/observability.md @@ -13,6 +13,11 @@ Backstage integrator. See how to install Google Analytics in your app [here](../integrations/google-analytics/installation.md) +## Datadog RUM Events + +See how to install Datadog Events in your app +[here](../integrations/datadog-rum/installation.md) + ## Logging The backend supplies a central [winston](https://github.com/winstonjs/winston) From 479b291242198b44a24b71ad402e18873d14ef19 Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 11:52:19 +0200 Subject: [PATCH 08/32] Added changeset Signed-off-by: Brett Wright Signed-off-by: Brett Wright --- .changeset/tiny-ears-love.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tiny-ears-love.md diff --git a/.changeset/tiny-ears-love.md b/.changeset/tiny-ears-love.md new file mode 100644 index 0000000000..2f7502fad7 --- /dev/null +++ b/.changeset/tiny-ears-love.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': major +--- + +Added support for Datadog rum events From 817e7fee1f7a9b5e4e35add761a908f69959f0fd Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 12:51:04 +0200 Subject: [PATCH 09/32] ran Prettier Signed-off-by: Brett Wright Signed-off-by: Brett Wright --- app-config.yaml | 2 +- packages/app/public/index.html | 121 ++++++++++++++++++++++----------- 2 files changed, 81 insertions(+), 42 deletions(-) diff --git a/app-config.yaml b/app-config.yaml index 56733436a6..ac59874878 100644 --- a/app-config.yaml +++ b/app-config.yaml @@ -4,7 +4,7 @@ app: googleAnalyticsTrackingId: # UA-000000-0 datadogRum: clientToken: '123456789' - applicationId: qwerty + applicationId: qwerty # site: # datadoghq.eu default = datadoghq.com # env: # optional diff --git a/packages/app/public/index.html b/packages/app/public/index.html index e55e39f7d6..da4d3cf3b8 100644 --- a/packages/app/public/index.html +++ b/packages/app/public/index.html @@ -1,34 +1,60 @@ - - - - - - - - - - - - - - - - - - <%= app.title %> - + + + + + + + + + <%= app.title %> - <% if (app.googleAnalyticsTrackingId && typeof app.googleAnalyticsTrackingId==='string' ) { %> - + <% if (app.googleAnalyticsTrackingId && typeof + app.googleAnalyticsTrackingId==='string' ) { %> + - <% } %> - <% if (app.datadogRum.clientToken && app.datadogRum.applicationId ) { %> + <% } %> <% if (app.datadogRum.clientToken && app.datadogRum.applicationId ) + { %> <% } %> - + - - -
- - - - \ No newline at end of file + + From 948c4b6a30d14838ed612137edcd390a5a191276 Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 15:23:49 +0200 Subject: [PATCH 10/32] Added Datadog to vocab Signed-off-by: Brett Wright --- .github/styles/vocab.txt | 1 + docs/integrations/datadog-rum/installation.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/styles/vocab.txt b/.github/styles/vocab.txt index 226af9bf0a..7d0f36d858 100644 --- a/.github/styles/vocab.txt +++ b/.github/styles/vocab.txt @@ -13,6 +13,7 @@ Cloudformation Codecov Codehilite Config +Datadog Debounce Discoverability Dockerfile diff --git a/docs/integrations/datadog-rum/installation.md b/docs/integrations/datadog-rum/installation.md index b23f2b4039..50ebe722be 100644 --- a/docs/integrations/datadog-rum/installation.md +++ b/docs/integrations/datadog-rum/installation.md @@ -20,7 +20,7 @@ app: ``` Replace the clientToken and applicationId with the ones generated for you -datadog. +Datadog. optional arguments: From d04a4b7a2d9eea387d55d38a5a7453e2b29fe166 Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 16:22:13 +0200 Subject: [PATCH 11/32] Delete sour-plums-enjoy.md Signed-off-by: Brett Wright --- .changeset/sour-plums-enjoy.md | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 .changeset/sour-plums-enjoy.md diff --git a/.changeset/sour-plums-enjoy.md b/.changeset/sour-plums-enjoy.md deleted file mode 100644 index ef68166255..0000000000 --- a/.changeset/sour-plums-enjoy.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@backstage/create-app': patch ---- - -Fix system diagram card to be on the system page - -To apply the same fix to an existing application, in `EntityPage.tsx` simply move the `` for the `/diagram` path from the `groupPage` down into the `systemPage` element. From a40c2aa853ae5af0acb0355c287b405726b8b55b Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 16:22:39 +0200 Subject: [PATCH 12/32] Delete configure-app-with-plugins.md Signed-off-by: Brett Wright --- .../configure-app-with-plugins.md | 99 ------------------- 1 file changed, 99 deletions(-) delete mode 100644 docs/getting-started/configure-app-with-plugins.md diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md deleted file mode 100644 index b2f3a37d90..0000000000 --- a/docs/getting-started/configure-app-with-plugins.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -id: configure-app-with-plugins -title: Configuring App with plugins -description: Documentation on How Configuring App with plugins ---- - -Backstage plugins customize the app for your needs. There is a -[plugin marketplace](https://backstage.io/plugins) with plugins for many common -infrastructure needs - CI/CD, monitoring, auditing, and more. - -## Adding existing plugins to your app - -The following steps assume that you have -[created a Backstage app](./create-an-app.md) and want to add an existing plugin -to it. We are using the -[CircleCI](https://github.com/backstage/backstage/blob/master/plugins/circleci/README.md) -plugin in this example. - -1. Add the plugin's npm package to the repo: - -```bash -yarn workspace app add @backstage/plugin-circleci -``` - -Note the plugin is added to the `app` package, rather than the root -package.json. Backstage Apps are set up as monorepos with -[yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/). Since -CircleCI is a frontend UI plugin, it goes in `app` rather than `backend`. - -2. Add the plugin itself to the App: - -```js -// packages/app/src/plugins.ts -export { plugin as CircleCi } from '@backstage/plugin-circleci'; -``` - -3. Register the plugin in the entity pages: - -```diff - // packages/app/src/components/catalog/EntityPage.tsx -+import { -+ EntityCircleCIContent, -+ isCircleCIAvailable, -+} from '@backstage/plugin-circleci'; - -... - const cicdContent = ( - - ... -+ -+ -+ ; - - ); -``` - -This is just one example, but each Backstage instance may integrate content or -cards to suit their needs on different pages, tabs, etc. Note that stand-alone -plugins that are not "attached" to the Software Catalog would be added outside -the `EntityPage`. - -4. [Optional] Add proxy config: - -```yaml -// app-config.yaml -proxy: - '/circleci/api': - target: https://circleci.com/api/v1.1 - headers: - Circle-Token: ${CIRCLECI_AUTH_TOKEN} -``` - -### Adding a plugin page to the Sidebar - -In a standard Backstage app created with -[@backstage/create-app](./create-an-app.md), the sidebar is managed inside -`packages/app/src/components/Root/Root.tsx`. The file exports the entire -`Sidebar` element of your app, which you can extend with additional entries by -adding new `SidebarItem` elements. - -For example, if you install the `api-docs` plugin, a matching `SidebarItem` -could be something like this: - -```tsx -// Import icon from MUI -import ExtensionIcon from '@material-ui/icons/Extension'; - -// ... inside the AppSidebar component -; -``` - -You can also use your own SVGs directly as icon components. Just make sure they -are sized according to the Material UI's -[SvgIcon](https://material-ui.com/api/svg-icon/) default of 24x24px, and set the -extension to `.icon.svg`. For example: - -```ts -import InternalToolIcon from './internal-tool.icon.svg'; -``` From 0f649240bf982f3e9ee8e75b8c47dfd05018d881 Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 16:23:13 +0200 Subject: [PATCH 13/32] Delete EntityPage.tsx Signed-off-by: Brett Wright --- .../app/src/components/catalog/EntityPage.tsx | 494 ------------------ 1 file changed, 494 deletions(-) delete mode 100644 packages/app/src/components/catalog/EntityPage.tsx diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx deleted file mode 100644 index d4db2b0e63..0000000000 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ /dev/null @@ -1,494 +0,0 @@ -/* - * 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, { ReactNode, useMemo, useState } from 'react'; -import BadgeIcon from '@material-ui/icons/CallToAction'; -import { EmptyState } from '@backstage/core'; -import { - EntityApiDefinitionCard, - EntityConsumingComponentsCard, - EntityHasApisCard, - EntityProvidingComponentsCard, - EntityProvidedApisCard, - EntityConsumedApisCard, -} from '@backstage/plugin-api-docs'; -import { EntityBadgesDialog } from '@backstage/plugin-badges'; -import { - EntityAboutCard, - EntityHasComponentsCard, - EntityHasSubcomponentsCard, - EntityHasSystemsCard, - EntityLayout, - EntityLinksCard, - EntitySystemDiagramCard, - EntitySwitch, - isComponentType, - isKind, -} from '@backstage/plugin-catalog'; -import { - EntityCircleCIContent, - isCircleCIAvailable, -} from '@backstage/plugin-circleci'; -import { - EntityCloudbuildContent, - isCloudbuildAvailable, -} from '@backstage/plugin-cloudbuild'; -import { - EntityGithubActionsContent, - EntityRecentGithubActionsRunsCard, - isGithubActionsAvailable, -} from '@backstage/plugin-github-actions'; -import { - EntityJenkinsContent, - EntityLatestJenkinsRunCard, - isJenkinsAvailable, -} from '@backstage/plugin-jenkins'; -import { EntityKafkaContent } from '@backstage/plugin-kafka'; -import { EntityKubernetesContent } from '@backstage/plugin-kubernetes'; -import { - EntityLastLighthouseAuditCard, - EntityLighthouseContent, - isLighthouseAvailable, -} from '@backstage/plugin-lighthouse'; -import { - EntityGroupProfileCard, - EntityMembersListCard, - EntityOwnershipCard, - EntityUserProfileCard, -} from '@backstage/plugin-org'; -import { - EntityPagerDutyCard, - isPagerDutyAvailable, -} from '@backstage/plugin-pagerduty'; -import { - EntityRollbarContent, - isRollbarAvailable, -} from '@backstage/plugin-rollbar'; -import { EntitySentryContent } from '@backstage/plugin-sentry'; -import { EntityTechdocsContent } from '@backstage/plugin-techdocs'; -import { EntityTodoContent } from '@backstage/plugin-todo'; -import { Button, Grid } from '@material-ui/core'; -import { - EntityBuildkiteContent, - isBuildkiteAvailable, -} from '@roadiehq/backstage-plugin-buildkite'; -import { - EntityGithubInsightsContent, - EntityGithubInsightsLanguagesCard, - EntityGithubInsightsReadmeCard, - EntityGithubInsightsReleasesCard, - isGithubInsightsAvailable, -} from '@roadiehq/backstage-plugin-github-insights'; -import { - EntityGithubPullRequestsContent, - EntityGithubPullRequestsOverviewCard, - isGithubPullRequestsAvailable, -} from '@roadiehq/backstage-plugin-github-pull-requests'; -import { - EntityTravisCIContent, - EntityTravisCIOverviewCard, - isTravisciAvailable, -} from '@roadiehq/backstage-plugin-travis-ci'; - -const EntityLayoutWrapper = (props: { children?: ReactNode }) => { - const [badgesDialogOpen, setBadgesDialogOpen] = useState(false); - - const extraMenuItems = useMemo(() => { - return [ - { - title: 'Badges', - Icon: BadgeIcon, - onClick: () => setBadgesDialogOpen(true), - }, - ]; - }, []); - - return ( - <> - - {props.children} - - setBadgesDialogOpen(false)} - /> - - ); -}; - -export const cicdContent = ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - Read more - - } - /> - - -); - -const cicdCard = ( - - - - - - - - - - - - - - - - - - - -); - -const errorsContent = ( - - - - - - - - - -); - -const overviewContent = ( - - - - - - - - - - - - - - - - - - {cicdCard} - - - Boolean(isGithubInsightsAvailable(e))}> - - - - - - - - - - - - - - - - - - - - Boolean(isGithubPullRequestsAvailable(e))}> - - - - - - - - - - -); - -const serviceEntityPage = ( - - - {overviewContent} - - - - {cicdContent} - - - - {errorsContent} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -const websiteEntityPage = ( - - - {overviewContent} - - - - {cicdContent} - - - - - - - - {errorsContent} - - - - - - - - - - - - - - - - - - - - - - -); - -const defaultEntityPage = ( - - - {overviewContent} - - - - - - - - - - -); - -const componentPage = ( - - - {serviceEntityPage} - - - - {websiteEntityPage} - - - {defaultEntityPage} - -); - -const apiPage = ( - - - - - - - - - - - - - - - - - - - - - - - - - -); - -const userPage = ( - - - - - - - - - - - - -); - -const groupPage = ( - - - - - - - - - - - - - - - -); - -const systemPage = ( - - - - - - - - - - - - - - - - - - -); - -const domainPage = ( - - - - - - - - - - - - -); - -export const entityPage = ( - - - - - - - - - {defaultEntityPage} - -); From 77a2335997f0956006a4d4c099430794a0b6759f Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 16:23:46 +0200 Subject: [PATCH 14/32] Delete EntityPage.tsx Signed-off-by: Brett Wright --- .../app/src/components/catalog/EntityPage.tsx | 261 ------------------ 1 file changed, 261 deletions(-) delete mode 100644 packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx deleted file mode 100644 index a302bb6dd7..0000000000 --- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx +++ /dev/null @@ -1,261 +0,0 @@ -/* - * 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 { Button, Grid } from '@material-ui/core'; -import { EmptyState } from '@backstage/core'; -import { - EntityApiDefinitionCard, - EntityConsumedApisCard, - EntityConsumingComponentsCard, - EntityHasApisCard, - EntityProvidedApisCard, - EntityProvidingComponentsCard, -} from '@backstage/plugin-api-docs'; -import { - EntityAboutCard, - EntitySystemDiagramCard, - EntityHasComponentsCard, - EntityHasSystemsCard, - EntityLayout, - EntitySwitch, - isComponentType, - isKind, -} from '@backstage/plugin-catalog'; -import { - isGithubActionsAvailable, - EntityGithubActionsContent, -} from '@backstage/plugin-github-actions'; -import { - EntityUserProfileCard, - EntityGroupProfileCard, - EntityMembersListCard, - EntityOwnershipCard, -} from '@backstage/plugin-org'; -import { EntityTechdocsContent } from '@backstage/plugin-techdocs'; - -const cicdContent = ( - // This is an example of how you can implement your company's logic in entity page. - // You can for example enforce that all components of type 'service' should use GitHubActions - - - - - - - - Read more - - } - /> - - -); - -const overviewContent = ( - - - - - -); - -const serviceEntityPage = ( - - - {overviewContent} - - - - {cicdContent} - - - - - - - - - - - - - - - - - -); - -const websiteEntityPage = ( - - - {overviewContent} - - - - {cicdContent} - - - - - - -); - -const defaultEntityPage = ( - - - {overviewContent} - - - - - - -); - -const componentPage = ( - - - {serviceEntityPage} - - - - {websiteEntityPage} - - - {defaultEntityPage} - -); - -const apiPage = ( - - - - - - - - - - - - - - - - - - - - - - - - - -); - -const userPage = ( - - - - - - - - - - - - -); - -const groupPage = ( - - - - - - - - - - - - - - - -); - -const systemPage = ( - - - - - - - - - - - - - - - - - - -); - -const domainPage = ( - - - - - - - - - - - - -); - -export const entityPage = ( - - - - - - - - - {defaultEntityPage} - -); From 66cd739fec8eeae4c7c02f066e33e6a3cc184104 Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 18:58:16 +0200 Subject: [PATCH 15/32] Revert "Delete EntityPage.tsx" This reverts commit 59eda628a87dc470ae1c5d2b7b46ced129fea289. Signed-off-by: Brett Wright --- .../app/src/components/catalog/EntityPage.tsx | 261 ++++++++++++++++++ 1 file changed, 261 insertions(+) create mode 100644 packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx new file mode 100644 index 0000000000..a302bb6dd7 --- /dev/null +++ b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx @@ -0,0 +1,261 @@ +/* + * 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 { Button, Grid } from '@material-ui/core'; +import { EmptyState } from '@backstage/core'; +import { + EntityApiDefinitionCard, + EntityConsumedApisCard, + EntityConsumingComponentsCard, + EntityHasApisCard, + EntityProvidedApisCard, + EntityProvidingComponentsCard, +} from '@backstage/plugin-api-docs'; +import { + EntityAboutCard, + EntitySystemDiagramCard, + EntityHasComponentsCard, + EntityHasSystemsCard, + EntityLayout, + EntitySwitch, + isComponentType, + isKind, +} from '@backstage/plugin-catalog'; +import { + isGithubActionsAvailable, + EntityGithubActionsContent, +} from '@backstage/plugin-github-actions'; +import { + EntityUserProfileCard, + EntityGroupProfileCard, + EntityMembersListCard, + EntityOwnershipCard, +} from '@backstage/plugin-org'; +import { EntityTechdocsContent } from '@backstage/plugin-techdocs'; + +const cicdContent = ( + // This is an example of how you can implement your company's logic in entity page. + // You can for example enforce that all components of type 'service' should use GitHubActions + + + + + + + + Read more + + } + /> + + +); + +const overviewContent = ( + + + + + +); + +const serviceEntityPage = ( + + + {overviewContent} + + + + {cicdContent} + + + + + + + + + + + + + + + + + +); + +const websiteEntityPage = ( + + + {overviewContent} + + + + {cicdContent} + + + + + + +); + +const defaultEntityPage = ( + + + {overviewContent} + + + + + + +); + +const componentPage = ( + + + {serviceEntityPage} + + + + {websiteEntityPage} + + + {defaultEntityPage} + +); + +const apiPage = ( + + + + + + + + + + + + + + + + + + + + + + + + + +); + +const userPage = ( + + + + + + + + + + + + +); + +const groupPage = ( + + + + + + + + + + + + + + + +); + +const systemPage = ( + + + + + + + + + + + + + + + + + + +); + +const domainPage = ( + + + + + + + + + + + + +); + +export const entityPage = ( + + + + + + + + + {defaultEntityPage} + +); From 47b4c33c1f60da9dbf4fa936289b2f77be73bb83 Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 19:00:51 +0200 Subject: [PATCH 16/32] Revert "Delete EntityPage.tsx" This reverts commit 157318b7b261541758c353482d98e0372a4369ce. Signed-off-by: Brett Wright --- .../app/src/components/catalog/EntityPage.tsx | 494 ++++++++++++++++++ 1 file changed, 494 insertions(+) create mode 100644 packages/app/src/components/catalog/EntityPage.tsx diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx new file mode 100644 index 0000000000..d4db2b0e63 --- /dev/null +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -0,0 +1,494 @@ +/* + * 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, { ReactNode, useMemo, useState } from 'react'; +import BadgeIcon from '@material-ui/icons/CallToAction'; +import { EmptyState } from '@backstage/core'; +import { + EntityApiDefinitionCard, + EntityConsumingComponentsCard, + EntityHasApisCard, + EntityProvidingComponentsCard, + EntityProvidedApisCard, + EntityConsumedApisCard, +} from '@backstage/plugin-api-docs'; +import { EntityBadgesDialog } from '@backstage/plugin-badges'; +import { + EntityAboutCard, + EntityHasComponentsCard, + EntityHasSubcomponentsCard, + EntityHasSystemsCard, + EntityLayout, + EntityLinksCard, + EntitySystemDiagramCard, + EntitySwitch, + isComponentType, + isKind, +} from '@backstage/plugin-catalog'; +import { + EntityCircleCIContent, + isCircleCIAvailable, +} from '@backstage/plugin-circleci'; +import { + EntityCloudbuildContent, + isCloudbuildAvailable, +} from '@backstage/plugin-cloudbuild'; +import { + EntityGithubActionsContent, + EntityRecentGithubActionsRunsCard, + isGithubActionsAvailable, +} from '@backstage/plugin-github-actions'; +import { + EntityJenkinsContent, + EntityLatestJenkinsRunCard, + isJenkinsAvailable, +} from '@backstage/plugin-jenkins'; +import { EntityKafkaContent } from '@backstage/plugin-kafka'; +import { EntityKubernetesContent } from '@backstage/plugin-kubernetes'; +import { + EntityLastLighthouseAuditCard, + EntityLighthouseContent, + isLighthouseAvailable, +} from '@backstage/plugin-lighthouse'; +import { + EntityGroupProfileCard, + EntityMembersListCard, + EntityOwnershipCard, + EntityUserProfileCard, +} from '@backstage/plugin-org'; +import { + EntityPagerDutyCard, + isPagerDutyAvailable, +} from '@backstage/plugin-pagerduty'; +import { + EntityRollbarContent, + isRollbarAvailable, +} from '@backstage/plugin-rollbar'; +import { EntitySentryContent } from '@backstage/plugin-sentry'; +import { EntityTechdocsContent } from '@backstage/plugin-techdocs'; +import { EntityTodoContent } from '@backstage/plugin-todo'; +import { Button, Grid } from '@material-ui/core'; +import { + EntityBuildkiteContent, + isBuildkiteAvailable, +} from '@roadiehq/backstage-plugin-buildkite'; +import { + EntityGithubInsightsContent, + EntityGithubInsightsLanguagesCard, + EntityGithubInsightsReadmeCard, + EntityGithubInsightsReleasesCard, + isGithubInsightsAvailable, +} from '@roadiehq/backstage-plugin-github-insights'; +import { + EntityGithubPullRequestsContent, + EntityGithubPullRequestsOverviewCard, + isGithubPullRequestsAvailable, +} from '@roadiehq/backstage-plugin-github-pull-requests'; +import { + EntityTravisCIContent, + EntityTravisCIOverviewCard, + isTravisciAvailable, +} from '@roadiehq/backstage-plugin-travis-ci'; + +const EntityLayoutWrapper = (props: { children?: ReactNode }) => { + const [badgesDialogOpen, setBadgesDialogOpen] = useState(false); + + const extraMenuItems = useMemo(() => { + return [ + { + title: 'Badges', + Icon: BadgeIcon, + onClick: () => setBadgesDialogOpen(true), + }, + ]; + }, []); + + return ( + <> + + {props.children} + + setBadgesDialogOpen(false)} + /> + + ); +}; + +export const cicdContent = ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + Read more + + } + /> + + +); + +const cicdCard = ( + + + + + + + + + + + + + + + + + + + +); + +const errorsContent = ( + + + + + + + + + +); + +const overviewContent = ( + + + + + + + + + + + + + + + + + + {cicdCard} + + + Boolean(isGithubInsightsAvailable(e))}> + + + + + + + + + + + + + + + + + + + + Boolean(isGithubPullRequestsAvailable(e))}> + + + + + + + + + + +); + +const serviceEntityPage = ( + + + {overviewContent} + + + + {cicdContent} + + + + {errorsContent} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +const websiteEntityPage = ( + + + {overviewContent} + + + + {cicdContent} + + + + + + + + {errorsContent} + + + + + + + + + + + + + + + + + + + + + + +); + +const defaultEntityPage = ( + + + {overviewContent} + + + + + + + + + + +); + +const componentPage = ( + + + {serviceEntityPage} + + + + {websiteEntityPage} + + + {defaultEntityPage} + +); + +const apiPage = ( + + + + + + + + + + + + + + + + + + + + + + + + + +); + +const userPage = ( + + + + + + + + + + + + +); + +const groupPage = ( + + + + + + + + + + + + + + + +); + +const systemPage = ( + + + + + + + + + + + + + + + + + + +); + +const domainPage = ( + + + + + + + + + + + + +); + +export const entityPage = ( + + + + + + + + + {defaultEntityPage} + +); From de00581391ca8e85f3dd8c3951d5af66e2215c36 Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 19:00:57 +0200 Subject: [PATCH 17/32] Revert "Delete configure-app-with-plugins.md" This reverts commit ce16cd5233779e0dbe24b2756027de83484ead84. Signed-off-by: Brett Wright --- .../configure-app-with-plugins.md | 99 +++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 docs/getting-started/configure-app-with-plugins.md diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md new file mode 100644 index 0000000000..b2f3a37d90 --- /dev/null +++ b/docs/getting-started/configure-app-with-plugins.md @@ -0,0 +1,99 @@ +--- +id: configure-app-with-plugins +title: Configuring App with plugins +description: Documentation on How Configuring App with plugins +--- + +Backstage plugins customize the app for your needs. There is a +[plugin marketplace](https://backstage.io/plugins) with plugins for many common +infrastructure needs - CI/CD, monitoring, auditing, and more. + +## Adding existing plugins to your app + +The following steps assume that you have +[created a Backstage app](./create-an-app.md) and want to add an existing plugin +to it. We are using the +[CircleCI](https://github.com/backstage/backstage/blob/master/plugins/circleci/README.md) +plugin in this example. + +1. Add the plugin's npm package to the repo: + +```bash +yarn workspace app add @backstage/plugin-circleci +``` + +Note the plugin is added to the `app` package, rather than the root +package.json. Backstage Apps are set up as monorepos with +[yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/). Since +CircleCI is a frontend UI plugin, it goes in `app` rather than `backend`. + +2. Add the plugin itself to the App: + +```js +// packages/app/src/plugins.ts +export { plugin as CircleCi } from '@backstage/plugin-circleci'; +``` + +3. Register the plugin in the entity pages: + +```diff + // packages/app/src/components/catalog/EntityPage.tsx ++import { ++ EntityCircleCIContent, ++ isCircleCIAvailable, ++} from '@backstage/plugin-circleci'; + +... + const cicdContent = ( + + ... ++ ++ ++ ; + + ); +``` + +This is just one example, but each Backstage instance may integrate content or +cards to suit their needs on different pages, tabs, etc. Note that stand-alone +plugins that are not "attached" to the Software Catalog would be added outside +the `EntityPage`. + +4. [Optional] Add proxy config: + +```yaml +// app-config.yaml +proxy: + '/circleci/api': + target: https://circleci.com/api/v1.1 + headers: + Circle-Token: ${CIRCLECI_AUTH_TOKEN} +``` + +### Adding a plugin page to the Sidebar + +In a standard Backstage app created with +[@backstage/create-app](./create-an-app.md), the sidebar is managed inside +`packages/app/src/components/Root/Root.tsx`. The file exports the entire +`Sidebar` element of your app, which you can extend with additional entries by +adding new `SidebarItem` elements. + +For example, if you install the `api-docs` plugin, a matching `SidebarItem` +could be something like this: + +```tsx +// Import icon from MUI +import ExtensionIcon from '@material-ui/icons/Extension'; + +// ... inside the AppSidebar component +; +``` + +You can also use your own SVGs directly as icon components. Just make sure they +are sized according to the Material UI's +[SvgIcon](https://material-ui.com/api/svg-icon/) default of 24x24px, and set the +extension to `.icon.svg`. For example: + +```ts +import InternalToolIcon from './internal-tool.icon.svg'; +``` From 5d01971dd33c3d49852e1886cc2f46046419d9a9 Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 19:01:00 +0200 Subject: [PATCH 18/32] Revert "Delete sour-plums-enjoy.md" This reverts commit 7d9de03c4432d82ffad10937f39243f6fa4fcce8. Signed-off-by: Brett Wright --- .changeset/sour-plums-enjoy.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/sour-plums-enjoy.md diff --git a/.changeset/sour-plums-enjoy.md b/.changeset/sour-plums-enjoy.md new file mode 100644 index 0000000000..ef68166255 --- /dev/null +++ b/.changeset/sour-plums-enjoy.md @@ -0,0 +1,7 @@ +--- +'@backstage/create-app': patch +--- + +Fix system diagram card to be on the system page + +To apply the same fix to an existing application, in `EntityPage.tsx` simply move the `` for the `/diagram` path from the `groupPage` down into the `systemPage` element. From 766533df4b95c133953263621e1dd142eb4b7c5f Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 19:01:03 +0200 Subject: [PATCH 19/32] Revert "Move diagram to system page" This reverts commit 876a468740f25b69d6dc7737586d7d64348daf6a. Signed-off-by: Brett Wright --- .changeset/sour-plums-enjoy.md | 7 ------- packages/app/src/components/catalog/EntityPage.tsx | 7 ++++--- .../packages/app/src/components/catalog/EntityPage.tsx | 7 ++++--- 3 files changed, 8 insertions(+), 13 deletions(-) delete mode 100644 .changeset/sour-plums-enjoy.md diff --git a/.changeset/sour-plums-enjoy.md b/.changeset/sour-plums-enjoy.md deleted file mode 100644 index ef68166255..0000000000 --- a/.changeset/sour-plums-enjoy.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@backstage/create-app': patch ---- - -Fix system diagram card to be on the system page - -To apply the same fix to an existing application, in `EntityPage.tsx` simply move the `` for the `/diagram` path from the `groupPage` down into the `systemPage` element. diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index d4db2b0e63..d6f91957a9 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -441,6 +441,10 @@ const groupPage = ( + + + + ); @@ -459,9 +463,6 @@ const systemPage = ( - - - ); diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx index a302bb6dd7..f1aba46c52 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx @@ -208,6 +208,10 @@ const groupPage = ( + + + + ); @@ -226,9 +230,6 @@ const systemPage = ( - - - ); From 4949915fb32edd6d31bb5b24e1559cf517494bce Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 19:01:07 +0200 Subject: [PATCH 20/32] Revert "chore(deps): bump diff from 4.0.2 to 5.0.0" This reverts commit 2213de5068443f5036f1ea5a899867086266dc52. Signed-off-by: Brett Wright --- packages/cli/package.json | 2 +- yarn.lock | 7 +------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/cli/package.json b/packages/cli/package.json index 251b2ab076..db7ac2774c 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -62,7 +62,7 @@ "commander": "^6.1.0", "css-loader": "^3.5.3", "dashify": "^2.0.0", - "diff": "^5.0.0", + "diff": "^4.0.2", "esbuild": "^0.8.56", "eslint": "^7.1.0", "eslint-config-prettier": "^6.0.0", diff --git a/yarn.lock b/yarn.lock index 2fe64c785d..1f76456d00 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11527,16 +11527,11 @@ diff@1.4.0: resolved "https://registry.npmjs.org/diff/-/diff-1.4.0.tgz#7f28d2eb9ee7b15a97efd89ce63dcfdaa3ccbabf" integrity sha1-fyjS657nsVqX79ic5j3P2qPMur8= -diff@^4.0.1: +diff@^4.0.1, diff@^4.0.2: version "4.0.2" resolved "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d" integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A== -diff@^5.0.0: - version "5.0.0" - resolved "https://registry.npmjs.org/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b" - integrity sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w== - diffie-hellman@^5.0.0: version "5.0.3" resolved "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875" From f77db9572d05d835154461e5e86a6907f2731d67 Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 19:01:10 +0200 Subject: [PATCH 21/32] Revert "Clarify example" This reverts commit 72eaf17eaa408af347db07881ef6a8b7619c7adf. Signed-off-by: Brett Wright --- .../configure-app-with-plugins.md | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md index b2f3a37d90..428f768a82 100644 --- a/docs/getting-started/configure-app-with-plugins.md +++ b/docs/getting-started/configure-app-with-plugins.md @@ -36,22 +36,17 @@ export { plugin as CircleCi } from '@backstage/plugin-circleci'; 3. Register the plugin in the entity pages: -```diff - // packages/app/src/components/catalog/EntityPage.tsx -+import { -+ EntityCircleCIContent, -+ isCircleCIAvailable, -+} from '@backstage/plugin-circleci'; +```jsx +// packages/app/src/components/catalog/EntityPage.tsx +import { + EntityCircleCIContent, + isCircleCIAvailable, +} from '@backstage/plugin-circleci'; -... - const cicdContent = ( - - ... -+ -+ -+ ; - - ); +// Then somewhere inside + + +; ``` This is just one example, but each Backstage instance may integrate content or From 314b8bf1e9e786bdbb31d107aa58ee44ee5eb1ee Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 19:01:11 +0200 Subject: [PATCH 22/32] Revert "Fix pluginname" This reverts commit cb287be816d8149153cd72df5d6318efe04b04d4. Signed-off-by: Brett Wright --- docs/getting-started/configure-app-with-plugins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md index 428f768a82..1753676e19 100644 --- a/docs/getting-started/configure-app-with-plugins.md +++ b/docs/getting-started/configure-app-with-plugins.md @@ -31,7 +31,7 @@ CircleCI is a frontend UI plugin, it goes in `app` rather than `backend`. ```js // packages/app/src/plugins.ts -export { plugin as CircleCi } from '@backstage/plugin-circleci'; +export { plugin as Circleci } from '@backstage/plugin-circleci'; ``` 3. Register the plugin in the entity pages: From 50c5808b624bc7f6de4d79587a461ad3c48c6361 Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 19:01:14 +0200 Subject: [PATCH 23/32] Revert "Update plugin example for composability" This reverts commit 7ca780442219d2ec85fb296c3d1584c0d3aab1db. Signed-off-by: Brett Wright --- .../configure-app-with-plugins.md | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md index 1753676e19..cdef932127 100644 --- a/docs/getting-started/configure-app-with-plugins.md +++ b/docs/getting-started/configure-app-with-plugins.md @@ -34,25 +34,23 @@ CircleCI is a frontend UI plugin, it goes in `app` rather than `backend`. export { plugin as Circleci } from '@backstage/plugin-circleci'; ``` -3. Register the plugin in the entity pages: +3. Register the plugin router: ```jsx // packages/app/src/components/catalog/EntityPage.tsx -import { - EntityCircleCIContent, - isCircleCIAvailable, -} from '@backstage/plugin-circleci'; + +import { Router as CircleCIRouter } from '@backstage/plugin-circleci'; // Then somewhere inside - - -; +} +/>; ``` -This is just one example, but each Backstage instance may integrate content or -cards to suit their needs on different pages, tabs, etc. Note that stand-alone -plugins that are not "attached" to the Software Catalog would be added outside -the `EntityPage`. +Note that stand-alone plugins that are not "attached" to the Software Catalog +would be added outside the `EntityPage`. 4. [Optional] Add proxy config: From 4c89acec0e6d62cdbfda4137d626af82dc52a9ab Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Mon, 19 Apr 2021 19:44:36 +0200 Subject: [PATCH 24/32] change patch to minor Signed-off-by: Brett Wright --- .changeset/tiny-ears-love.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/tiny-ears-love.md b/.changeset/tiny-ears-love.md index 2f7502fad7..52218e2ecc 100644 --- a/.changeset/tiny-ears-love.md +++ b/.changeset/tiny-ears-love.md @@ -1,5 +1,5 @@ --- -'@backstage/cli': major +'@backstage/cli': minor --- Added support for Datadog rum events From 9b9a8f39b60ba68aa21b518f012e6878c51a76af Mon Sep 17 00:00:00 2001 From: Adam Harvey Date: Mon, 19 Apr 2021 20:35:56 -0400 Subject: [PATCH 25/32] Remove WIP Signed-off-by: Adam Harvey --- plugins/catalog/README.md | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/plugins/catalog/README.md b/plugins/catalog/README.md index e9405a41f5..2940fecaa1 100644 --- a/plugins/catalog/README.md +++ b/plugins/catalog/README.md @@ -1,12 +1,25 @@ -# Catalog Frontend - -WORK IN PROGRESS +# Backstage Catalog Frontend This is the frontend part of the default catalog plugin. It will implement the core API for handling your catalog of software, and supply the base views to show and manage them. +## Getting Started + +This frontend plugin can be started in a standalone mode from directly in this package +with `yarn start`. However, it will have limited functionality and that process is +most convenient when developing the catalog frontend plugin itself. + +To evaluate the catalog and have a greater amount of functionality available, from the main +Backstage root folder, instead do: + +```bash +yarn dev +``` + +This will launch both the front and backend in same window, populated some example entities. + ## Links - [Backend part of the plugin](https://github.com/backstage/backstage/tree/master/plugins/catalog-backend) From ac6025f63afce4b964c528803543e414befe8692 Mon Sep 17 00:00:00 2001 From: "Chongyang Adrian, Ke" Date: Mon, 19 Apr 2021 18:07:49 +0800 Subject: [PATCH 26/32] techdocs-plugin: add feedback link for Github/Gitlab source repos Signed-off-by: Chongyang Adrian, Ke --- .changeset/techdocs-eight-camels-hear.md | 8 ++ .../techdocs/src/reader/components/Reader.tsx | 6 +- .../transformers/addGitFeedbackLink.test.ts | 115 ++++++++++++++++++ .../reader/transformers/addGitFeedbackLink.ts | 86 +++++++++++++ .../techdocs/src/reader/transformers/index.ts | 1 + 5 files changed, 215 insertions(+), 1 deletion(-) create mode 100644 .changeset/techdocs-eight-camels-hear.md create mode 100644 plugins/techdocs/src/reader/transformers/addGitFeedbackLink.test.ts create mode 100644 plugins/techdocs/src/reader/transformers/addGitFeedbackLink.ts diff --git a/.changeset/techdocs-eight-camels-hear.md b/.changeset/techdocs-eight-camels-hear.md new file mode 100644 index 0000000000..0d6c16f725 --- /dev/null +++ b/.changeset/techdocs-eight-camels-hear.md @@ -0,0 +1,8 @@ +--- +'@backstage/plugin-techdocs': minor +--- + +Add feedback link icon in Techdocs Reader that directs to Gitlab or Github repo issue page with prefilled title and source link. +For link to appear, requires repo_url and edit_uri to be filled in mkdocs.yml, as per https://www.mkdocs.org/user-guide/configuration. edit_uri will need to be specified for self-hosted Gitlab/Github with different hostnames. +Gitlab or Github detection checks for 'gitlab' or 'github' in hostname of source in repo_url; +additionally 'techdocs.feedback.gitlab' and '.github' in app config can be used to specify hostnames that should be recognised as the respective Git hosting for the feedback link. diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index feed758caa..ff4f47dca0 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import { EntityName } from '@backstage/catalog-model'; -import { useApi } from '@backstage/core'; +import { useApi, configApiRef } from '@backstage/core'; import { BackstageTheme } from '@backstage/theme'; import { useTheme } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; @@ -31,6 +31,7 @@ import transformer, { rewriteDocLinks, sanitizeDOM, simplifyMkdocsFooter, + addGitFeedbackLink, } from '../transformers'; import { TechDocsNotFound } from './TechDocsNotFound'; import TechDocsProgressBar from './TechDocsProgressBar'; @@ -52,6 +53,7 @@ export const Reader = ({ entityId, onReady }: Props) => { const [loadedPath, setLoadedPath] = useState(''); const [atInitialLoad, setAtInitialLoad] = useState(true); const [newerDocsExist, setNewerDocsExist] = useState(false); + const configApi = useApi(configApiRef); const { value: isSynced, @@ -142,6 +144,7 @@ export const Reader = ({ entityId, onReady }: Props) => { rewriteDocLinks(), removeMkdocsHeader(), simplifyMkdocsFooter(), + addGitFeedbackLink(configApi), injectCss({ css: ` body { @@ -313,6 +316,7 @@ export const Reader = ({ entityId, onReady }: Props) => { name, newerDocsExist, isSynced, + configApi, ]); // docLoadError not considered an error state if sync request is still ongoing diff --git a/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.test.ts b/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.test.ts new file mode 100644 index 0000000000..cc451c3a25 --- /dev/null +++ b/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.test.ts @@ -0,0 +1,115 @@ +/* + * Copyright 2021 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 { createTestShadowDom } from '../../test-utils'; +import { addGitFeedbackLink } from './addGitFeedbackLink'; + +const configApi = { + getOptionalString: function getOptionalString(key: string) { + return key === 'gitlab' ? 'gitlab.com' : 'github.com'; + }, +}; + +describe('addGitFeedbackLink', () => { + it('adds a feedback link when a Gitlab source edit link is available', () => { + const shadowDom = createTestShadowDom( + ` + + +
+

HeaderText

+ +
+ + `, + { + preTransformers: [addGitFeedbackLink(configApi)], + postTransformers: [], + }, + ); + + expect(shadowDom.querySelector('#git-feedback-link')).toBeTruthy(); + expect( + (shadowDom.querySelector('#git-feedback-link') as HTMLLinkElement)!.href, + ).toEqual( + 'https://gitlab.com/reponame/username/issues/new?issue[title]=Documentation%20Feedback%3A%20HeaderText&issue[description]=Page%20source%3A%0Ahttps%3A%2F%2Fgitlab.com%2Freponame%2Fusername%2Fdocs%2FTestDoc.md%0A%0AFeedback%3A', + ); + }); + + it('adds a feedback link when a Github source edit link is available', () => { + const shadowDom = createTestShadowDom( + ` + + + + + `, + { + preTransformers: [addGitFeedbackLink(configApi)], + postTransformers: [], + }, + ); + + expect(shadowDom.querySelector('#git-feedback-link')).toBeTruthy(); + expect( + (shadowDom.querySelector('#git-feedback-link') as HTMLLinkElement)!.href, + ).toEqual( + 'https://github.com/reponame/username/issues/new?title=Documentation%20Feedback%3A%20HeaderText&body=Page%20source%3A%0Ahttps%3A%2F%2Fgithub.com%2Freponame%2Fusername%2Fdocs%2FTestDoc.md%0A%0AFeedback%3A', + ); + }); + + it('does not add a feedback link when no source edit link is available', () => { + const shadowDom = createTestShadowDom( + ` + + + + + `, + { + preTransformers: [addGitFeedbackLink(configApi)], + postTransformers: [], + }, + ); + + expect(shadowDom.querySelector('#git-feedback-link')).toBeFalsy(); + }); + + it('does not add a feedback link when a Gitlab or Github source edit link is not available', () => { + const shadowDom = createTestShadowDom( + ` + + +
+

Conveyor Pipelines

+ +
+ + `, + { + preTransformers: [addGitFeedbackLink(configApi)], + postTransformers: [], + }, + ); + + expect(shadowDom.querySelector('#git-feedback-link')).toBeFalsy(); + }); +}); diff --git a/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.ts b/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.ts new file mode 100644 index 0000000000..d19d90228c --- /dev/null +++ b/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.ts @@ -0,0 +1,86 @@ +/* + * Copyright 2021 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 type { Transformer } from './index'; +import FeedbackOutlinedIcon from '@material-ui/icons/FeedbackOutlined'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +// requires repo +export const addGitFeedbackLink = (configApi: any): Transformer => { + return dom => { + // attempting to use selectors that are more likely to be static as MkDocs updates over time + const sourceAnchor = dom.querySelector( + '[title="Edit this page"]', + ) as HTMLAnchorElement; + + // don't show if edit link not available in raw page + if (!sourceAnchor || !sourceAnchor.href) { + return dom; + } + let gitHost = ''; + + const sourceURL = new URL(sourceAnchor.href); + const githubHosts = configApi + .getConfigArray('integrations.github') + .map((integration: any) => integration.data.host); + const gitlabHosts = configApi + .getConfigArray('integrations.gitlab') + .map((integration: any) => integration.data.host); + + // don't show if can't identify edit link hostname as a gitlab/github hosting + if ( + githubHosts.includes(sourceURL.hostname) || + sourceURL.origin.includes('github') + ) { + gitHost = 'github'; + } else if ( + gitlabHosts.includes(sourceURL.hostname) || + sourceURL.origin.includes('gitlab') + ) { + gitHost = 'gitlab'; + } else { + return dom; + } + + // topmost h1 only contains title for whole page + const title = (dom.querySelector('article>h1') as HTMLElement).childNodes[0] + .textContent; + const issueTitle = encodeURIComponent(`Documentation Feedback: ${title}`); + const issueDesc = encodeURIComponent( + `Page source:\n${sourceAnchor.href}\n\nFeedback:`, + ); + const repoPath = sourceURL.pathname.split('/').slice(0, 3).join('/'); + + const feedbackLink = sourceAnchor.cloneNode() as HTMLAnchorElement; + switch (gitHost) { + case 'gitlab': + feedbackLink.href = `${sourceURL.origin}${repoPath}/issues/new?issue[title]=${issueTitle}&issue[description]=${issueDesc}`; + break; + case 'github': + feedbackLink.href = `${sourceURL.origin}${repoPath}/issues/new?title=${issueTitle}&body=${issueDesc}`; + break; + default: + return dom; + } + ReactDOM.render(React.createElement(FeedbackOutlinedIcon), feedbackLink); + feedbackLink.style.paddingLeft = '5px'; + feedbackLink.title = 'Leave feedback for this page'; + feedbackLink.id = 'git-feedback-link'; + sourceAnchor?.insertAdjacentElement('beforebegin', feedbackLink); + return dom; + }; +}; diff --git a/plugins/techdocs/src/reader/transformers/index.ts b/plugins/techdocs/src/reader/transformers/index.ts index 4da4cb3add..a005ad470b 100644 --- a/plugins/techdocs/src/reader/transformers/index.ts +++ b/plugins/techdocs/src/reader/transformers/index.ts @@ -15,6 +15,7 @@ */ export * from './addBaseUrl'; +export * from './addGitFeedbackLink'; export * from './rewriteDocLinks'; export * from './addLinkClickListener'; export * from './removeMkdocsHeader'; From 2b440c06055e37a05bfc019bcd28caf108da9fc6 Mon Sep 17 00:00:00 2001 From: "Chongyang Adrian, Ke" Date: Tue, 20 Apr 2021 13:32:34 +0800 Subject: [PATCH 27/32] add git feedback link: update FAQ and unit testing Signed-off-by: Chongyang Adrian, Ke --- .changeset/techdocs-eight-camels-hear.md | 3 +- docs/features/techdocs/FAQ.md | 12 ++++++ .../transformers/addGitFeedbackLink.test.ts | 37 ++++++++++++++++--- 3 files changed, 45 insertions(+), 7 deletions(-) diff --git a/.changeset/techdocs-eight-camels-hear.md b/.changeset/techdocs-eight-camels-hear.md index 0d6c16f725..5c3df10c89 100644 --- a/.changeset/techdocs-eight-camels-hear.md +++ b/.changeset/techdocs-eight-camels-hear.md @@ -4,5 +4,4 @@ Add feedback link icon in Techdocs Reader that directs to Gitlab or Github repo issue page with prefilled title and source link. For link to appear, requires repo_url and edit_uri to be filled in mkdocs.yml, as per https://www.mkdocs.org/user-guide/configuration. edit_uri will need to be specified for self-hosted Gitlab/Github with different hostnames. -Gitlab or Github detection checks for 'gitlab' or 'github' in hostname of source in repo_url; -additionally 'techdocs.feedback.gitlab' and '.github' in app config can be used to specify hostnames that should be recognised as the respective Git hosting for the feedback link. +To identify issue URL format as Github or Gitlab, the hostname of source in repo_url is checked if it contains 'gitlab' or 'github'. Alternately this is determined by matching to 'host' values from 'integrations' in app-config.yaml. diff --git a/docs/features/techdocs/FAQ.md b/docs/features/techdocs/FAQ.md index 5ce71ebfad..3b479f2a15 100644 --- a/docs/features/techdocs/FAQ.md +++ b/docs/features/techdocs/FAQ.md @@ -45,3 +45,15 @@ metadata annotation is used in the build process of TechDocs. But when annotation should still be present in entity descriptor file (e.g. `catalog-info.yaml`) for Backstage to know that TechDocs is enabled for the entity. + +#### Is it possible for users to suggest changes or provide feedback on a TechDocs page? + +This is supported for TechDocs sites whose source code is hosted in either +GitHub or GitLab. In order to add "edit this page" and "leave feedback" buttons +on a TechDocs page, be sure that you have `repo_url` and `edit_uri` values in +your `mkdocs.yml` files per +[MkDocs instructions](https://www.mkdocs.org/user-guide/configuration). + +If the hostname of your source code hosting URL does not include 'github' or +'gitlab', an `integrations` entry in your `app-config.yaml` pointed at your +source code provider is also needed (only the `host` key is necessary). diff --git a/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.test.ts b/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.test.ts index cc451c3a25..4c9ea04fe9 100644 --- a/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.test.ts +++ b/plugins/techdocs/src/reader/transformers/addGitFeedbackLink.test.ts @@ -18,8 +18,10 @@ import { createTestShadowDom } from '../../test-utils'; import { addGitFeedbackLink } from './addGitFeedbackLink'; const configApi = { - getOptionalString: function getOptionalString(key: string) { - return key === 'gitlab' ? 'gitlab.com' : 'github.com'; + getConfigArray: function getConfigArray(key: string) { + return key === 'integrations.github' + ? [{ data: { host: 'self-hosted-git-hub-provider.com' } }] + : []; }, }; @@ -80,7 +82,7 @@ describe('addGitFeedbackLink', () => { `, @@ -99,8 +101,8 @@ describe('addGitFeedbackLink', () => { `, @@ -112,4 +114,29 @@ describe('addGitFeedbackLink', () => { expect(shadowDom.querySelector('#git-feedback-link')).toBeFalsy(); }); + + it('adds a feedback link when a Gitlab or Github source edit link is not available but hostname matches an integrations host', () => { + const shadowDom = createTestShadowDom( + ` + + + + + `, + { + preTransformers: [addGitFeedbackLink(configApi)], + postTransformers: [], + }, + ); + + expect(shadowDom.querySelector('#git-feedback-link')).toBeTruthy(); + expect( + (shadowDom.querySelector('#git-feedback-link') as HTMLLinkElement)!.href, + ).toEqual( + 'https://self-hosted-git-hub-provider.com/reponame/username/issues/new?title=Documentation%20Feedback%3A%20HeaderText&body=Page%20source%3A%0Ahttps%3A%2F%2Fself-hosted-git-hub-provider.com%2Freponame%2Fusername%2Fdocs%2FTestDoc.md%0A%0AFeedback%3A', + ); + }); }); From 9b8f596aefb956a0109872f05bd187ea1a833a98 Mon Sep 17 00:00:00 2001 From: Brett Wright Date: Tue, 20 Apr 2021 08:29:27 +0200 Subject: [PATCH 28/32] Changed to patch as its a nonbreaking change Signed-off-by: Brett Wright --- .changeset/tiny-ears-love.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/tiny-ears-love.md b/.changeset/tiny-ears-love.md index 52218e2ecc..9c3d1613a5 100644 --- a/.changeset/tiny-ears-love.md +++ b/.changeset/tiny-ears-love.md @@ -1,5 +1,5 @@ --- -'@backstage/cli': minor +'@backstage/cli': patch --- Added support for Datadog rum events From 295589e13672b40a27fc4a2b45076121ae93a175 Mon Sep 17 00:00:00 2001 From: Eric Peterson Date: Tue, 20 Apr 2021 14:00:21 +0200 Subject: [PATCH 29/32] Satisfy vale linter. Signed-off-by: Eric Peterson --- .changeset/techdocs-eight-camels-hear.md | 6 +++--- docs/features/techdocs/FAQ.md | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.changeset/techdocs-eight-camels-hear.md b/.changeset/techdocs-eight-camels-hear.md index 5c3df10c89..8f2479f6bd 100644 --- a/.changeset/techdocs-eight-camels-hear.md +++ b/.changeset/techdocs-eight-camels-hear.md @@ -2,6 +2,6 @@ '@backstage/plugin-techdocs': minor --- -Add feedback link icon in Techdocs Reader that directs to Gitlab or Github repo issue page with prefilled title and source link. -For link to appear, requires repo_url and edit_uri to be filled in mkdocs.yml, as per https://www.mkdocs.org/user-guide/configuration. edit_uri will need to be specified for self-hosted Gitlab/Github with different hostnames. -To identify issue URL format as Github or Gitlab, the hostname of source in repo_url is checked if it contains 'gitlab' or 'github'. Alternately this is determined by matching to 'host' values from 'integrations' in app-config.yaml. +Add feedback link icon in Techdocs Reader that directs to GitLab or GitHub repo issue page with pre-filled title and source link. +For link to appear, requires `repo_url` and `edit_uri` to be filled in mkdocs.yml, as per https://www.mkdocs.org/user-guide/configuration. An `edit_uri` will need to be specified for self-hosted GitLab/GitHub instances with a different host name. +To identify issue URL format as GitHub or GitLab, the host name of source in `repo_url` is checked if it contains `gitlab` or `github`. Alternately this is determined by matching to `host` values from `integrations` in app-config.yaml. diff --git a/docs/features/techdocs/FAQ.md b/docs/features/techdocs/FAQ.md index 3b479f2a15..117471f749 100644 --- a/docs/features/techdocs/FAQ.md +++ b/docs/features/techdocs/FAQ.md @@ -54,6 +54,6 @@ on a TechDocs page, be sure that you have `repo_url` and `edit_uri` values in your `mkdocs.yml` files per [MkDocs instructions](https://www.mkdocs.org/user-guide/configuration). -If the hostname of your source code hosting URL does not include 'github' or -'gitlab', an `integrations` entry in your `app-config.yaml` pointed at your +If the host name of your source code hosting URL does not include `github` or +`gitlab`, an `integrations` entry in your `app-config.yaml` pointed at your source code provider is also needed (only the `host` key is necessary). From 18868f258b5c77a387430d7ebc00417ebce9a018 Mon Sep 17 00:00:00 2001 From: Andrey O <10812297+andreyors@users.noreply.github.com> Date: Mon, 12 Apr 2021 09:38:14 +0200 Subject: [PATCH 30/32] Update Ukrainian and Russian translations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fredrik Adelöw --- .../CatalogPage/utils/locales/goodEvening.locales.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/catalog/src/components/CatalogPage/utils/locales/goodEvening.locales.json b/plugins/catalog/src/components/CatalogPage/utils/locales/goodEvening.locales.json index 890899fcf3..36d48eaf39 100644 --- a/plugins/catalog/src/components/CatalogPage/utils/locales/goodEvening.locales.json +++ b/plugins/catalog/src/components/CatalogPage/utils/locales/goodEvening.locales.json @@ -75,7 +75,7 @@ "Quiché": "Xe q’ij", "Romani [Sinte]": "Lashi rachi", "Romanian": "Bunã seara", - "Russian": "Dobry vyecher", + "Russian": "Добрый вечер", "Scottish Gaelic": "Feasgar mhath", "Scots": "Guid eenin", "Sesotho": "Fonane", @@ -91,7 +91,7 @@ "Telugu": "శుభ సాయంత్రం", "Thai": "Sawat-dii torn khum", "Turkish": "İyi akşamlar", - "Ukrainian": "Dobry vechir", + "Ukrainian": "Добрий вечiр", "Uzbek": "Xayrli kech", "Welsh": "Noswaith dda", "Yiddish": "Ah gutn ovnt", From 772f60f14b3e7f5cfd0827879c13daf311c9575c Mon Sep 17 00:00:00 2001 From: Adam Harvey Date: Tue, 20 Apr 2021 07:10:08 -0400 Subject: [PATCH 31/32] Update plugins/catalog/README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fredrik Adelöw Signed-off-by: Adam Harvey --- plugins/catalog/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/catalog/README.md b/plugins/catalog/README.md index 2940fecaa1..611d2989e8 100644 --- a/plugins/catalog/README.md +++ b/plugins/catalog/README.md @@ -18,7 +18,7 @@ Backstage root folder, instead do: yarn dev ``` -This will launch both the front and backend in same window, populated some example entities. +This will launch both frontend and backend in the same window, populated with some example entities. ## Links From e669a8013f9013e73bdae27cca29274ec99a6e4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Tue, 20 Apr 2021 13:50:42 +0200 Subject: [PATCH 32/32] update the standalone frontend contribs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fredrik Adelöw --- .github/styles/vocab.txt | 1 + contrib/docker/frontend-with-nginx/Dockerfile | 18 ------ .../Dockerfile.dockerbuild | 59 +++++++++++++++++++ .../frontend-with-nginx/Dockerfile.hostbuild | 41 +++++++++++++ contrib/docker/frontend-with-nginx/README.md | 16 +++++ .../docker/multi-stage-frontend/Dockerfile | 23 -------- contrib/docker/multi-stage-frontend/README.md | 19 ------ docs/deployment/docker.md | 2 +- 8 files changed, 118 insertions(+), 61 deletions(-) delete mode 100644 contrib/docker/frontend-with-nginx/Dockerfile create mode 100644 contrib/docker/frontend-with-nginx/Dockerfile.dockerbuild create mode 100644 contrib/docker/frontend-with-nginx/Dockerfile.hostbuild create mode 100644 contrib/docker/frontend-with-nginx/README.md delete mode 100644 contrib/docker/multi-stage-frontend/Dockerfile delete mode 100644 contrib/docker/multi-stage-frontend/README.md diff --git a/.github/styles/vocab.txt b/.github/styles/vocab.txt index 226af9bf0a..432cd19f25 100644 --- a/.github/styles/vocab.txt +++ b/.github/styles/vocab.txt @@ -16,6 +16,7 @@ Config Debounce Discoverability Dockerfile +dockerfiles Dockerize Docusaurus Env diff --git a/contrib/docker/frontend-with-nginx/Dockerfile b/contrib/docker/frontend-with-nginx/Dockerfile deleted file mode 100644 index a444c9de83..0000000000 --- a/contrib/docker/frontend-with-nginx/Dockerfile +++ /dev/null @@ -1,18 +0,0 @@ -FROM nginx:mainline - -# The purpose of this image is to serve the frontend app content separately. -# By default the Backstage backend uses the app-backend plugin to serve the -# app from the backend itself, but it may be desirable to move the frontend -# content serving to a separate deployment, in which case this image can be used. - -# This dockerfile requires the app to be built on the host first, as it -# simply copies in the build output into the image. - -RUN apt-get update && apt-get -y install jq && rm -rf /var/lib/apt/lists/* - -COPY packages/app/dist /usr/share/nginx/html -COPY docker/default.conf.template /etc/nginx/conf.d/default.conf.template -COPY docker/run.sh /usr/local/bin/run.sh -CMD run.sh - -ENV PORT 80 diff --git a/contrib/docker/frontend-with-nginx/Dockerfile.dockerbuild b/contrib/docker/frontend-with-nginx/Dockerfile.dockerbuild new file mode 100644 index 0000000000..dda9779eb0 --- /dev/null +++ b/contrib/docker/frontend-with-nginx/Dockerfile.dockerbuild @@ -0,0 +1,59 @@ +# The purpose of this image is to serve the frontend app content separately. +# By default the Backstage backend uses the app-backend plugin to serve the +# app from the backend itself, but it may be desirable to move the frontend +# content serving to a separate deployment, in which case this image can be +# used. + +# This dockerfile also performs the build first inside docker. This may come +# with a build time impact, but is sometimes desirable. If you want to run the +# build on the host instead, use the file simply named Dockerfile in this folder +# instead. + +# USAGE: +# +# - Copy this file and the "docker" folder from this directory to your project +# root +# +# - Update your .dockerignore, make sure that the source folders are not +# excluded, but do exclude node_modules and build artifacts: +# +# .git +# node_modules +# packages/*/dist +# packages/*/node_modules +# plugins/*/dist +# plugins/*/node_modules +# +# - Update the copy of this file to add configuration arguments to the "build" +# command, for example: +# +# RUN yarn workspace app build --config --config ... +# +# - In your project root, run: +# +# docker build -t backstage-frontend -f Dockerfile.dockerbuild . + + + +FROM node:14-buster AS build + +RUN mkdir /app +COPY . /app +WORKDIR /app + +RUN yarn install +RUN yarn workspace app build + + + +FROM nginx:mainline + +RUN apt-get update && apt-get -y install jq && rm -rf /var/lib/apt/lists/* + +COPY --from=build /app/packages/app/dist /usr/share/nginx/html +COPY docker/default.conf.template /etc/nginx/conf.d/default.conf.template +COPY docker/run.sh /usr/local/bin/run.sh + +CMD run.sh + +ENV PORT 80 diff --git a/contrib/docker/frontend-with-nginx/Dockerfile.hostbuild b/contrib/docker/frontend-with-nginx/Dockerfile.hostbuild new file mode 100644 index 0000000000..6e5912dd67 --- /dev/null +++ b/contrib/docker/frontend-with-nginx/Dockerfile.hostbuild @@ -0,0 +1,41 @@ +# The purpose of this image is to serve the frontend app content separately. +# By default the Backstage backend uses the app-backend plugin to serve the +# app from the backend itself, but it may be desirable to move the frontend +# content serving to a separate deployment, in which case this image can be +# used. + +# This dockerfile requires the app to be built on the host first, as it +# simply copies in the build output into the image. If you want to also perform +# the build itself inside docker, use Dockerfile.build in this folder instead. + + +# USAGE: +# +# - Copy this file and the "docker" folder from this directory to your project +# root +# +# - Add the following line to your .dockerignore to make sure that the built +# frontend actually can be transferred into the docker image: +# +# !packages/app/dist +# +# - In your project root, run: +# +# yarn install +# yarn tsc +# yarn build --config --config ... +# docker build -t backstage-frontend -f Dockerfile.hostbuild . + + + +FROM nginx:mainline + +RUN apt-get update && apt-get -y install jq && rm -rf /var/lib/apt/lists/* + +COPY packages/app/dist /usr/share/nginx/html +COPY docker/default.conf.template /etc/nginx/conf.d/default.conf.template +COPY docker/run.sh /usr/local/bin/run.sh + +CMD run.sh + +ENV PORT 80 diff --git a/contrib/docker/frontend-with-nginx/README.md b/contrib/docker/frontend-with-nginx/README.md new file mode 100644 index 0000000000..eae70b8bba --- /dev/null +++ b/contrib/docker/frontend-with-nginx/README.md @@ -0,0 +1,16 @@ +# Frontend with NGINX + +This folder contains Docker images that let you run the Backstage frontend as +a separate image, rather than having it served through the `app-backend` plugin +from the backend. + +Note that when running the frontend like this, the app configuration becomes +embedded into the actual static JavaScript files at build time. This means that +you will have to supply the list of configuration files as part of the command +line at build. + +## Usage + +There are two variants: one that builds inside Docker, and one that builds on +the host. See the comments at the top of the individual dockerfiles for usage +instructions. diff --git a/contrib/docker/multi-stage-frontend/Dockerfile b/contrib/docker/multi-stage-frontend/Dockerfile deleted file mode 100644 index 3190687c52..0000000000 --- a/contrib/docker/multi-stage-frontend/Dockerfile +++ /dev/null @@ -1,23 +0,0 @@ -FROM node:12-buster AS build - -RUN mkdir /app -COPY . /app -WORKDIR /app - -RUN yarn install -RUN yarn workspace example-app build - -# Contruct backstage-frontend image -FROM nginx:mainline - -RUN apt-get update && apt-get -y install jq && rm -rf /var/lib/apt/lists/* - -# Copy from build stage -COPY --from=build /app/packages/app/dist /usr/share/nginx/html - -COPY docker/default.conf.template /etc/nginx/conf.d/default.conf.template -COPY docker/run.sh /usr/local/bin/run.sh - -CMD run.sh - -ENV PORT 80 diff --git a/contrib/docker/multi-stage-frontend/README.md b/contrib/docker/multi-stage-frontend/README.md deleted file mode 100644 index b6ae4fdc6c..0000000000 --- a/contrib/docker/multi-stage-frontend/README.md +++ /dev/null @@ -1,19 +0,0 @@ -# Standalone Dockerfile for frontend - -This directory contains the resources which will help you build backstage without any requirements -other than docker itself. It uses a multi-stage Dockerfile to build and ship backstage. - -## Usage - -You can simply run the following command to build backstage. - -``` -# Make sure you are in the root directory of backstage then run -docker build -t backstage-frontend -f ./contrib/docker/multi-stage-frontend/Dockerfile . -``` - -After a successful build, You can simply run backstage frontend with the following command. - -``` -docker run -it --rm -p 3080:80 backstage-frontend -``` diff --git a/docs/deployment/docker.md b/docs/deployment/docker.md index ef178b2977..383cf0615a 100644 --- a/docs/deployment/docker.md +++ b/docs/deployment/docker.md @@ -232,7 +232,7 @@ package, which is done as follows: Once the `app-backend` is removed from the backend, you can use your favorite static file serving method for serving the frontend. An example of how to set up an NGINX image is available in the -[contrib folder in the main repo](https://github.com/backstage/backstage/blob/master/contrib/docker/frontend-with-nginx/Dockerfile) +[contrib folder in the main repo](https://github.com/backstage/backstage/blob/master/contrib/docker/frontend-with-nginx) Note that if you're building a separate docker build of the frontend you probably need to adjust `.dockerignore` appropriately. Most likely by making