diff --git a/.changeset/friendly-jars-obey.md b/.changeset/friendly-jars-obey.md new file mode 100644 index 0000000000..032fcff3f9 --- /dev/null +++ b/.changeset/friendly-jars-obey.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-cloudbuild': patch +--- + +Added Installation Steps so that it is clear what is needed to install and use the Google Cloud Plugin. diff --git a/docs/assets/plugins/cloudbuild/CloudBuildPlugin.png b/docs/assets/plugins/cloudbuild/CloudBuildPlugin.png new file mode 100644 index 0000000000..3b347f0f68 Binary files /dev/null and b/docs/assets/plugins/cloudbuild/CloudBuildPlugin.png differ diff --git a/plugins/cloudbuild/README.md b/plugins/cloudbuild/README.md index 5f1f6519dc..07999c85a1 100644 --- a/plugins/cloudbuild/README.md +++ b/plugins/cloudbuild/README.md @@ -1,13 +1,81 @@ # Google Cloud Build -Welcome to the Google Cloud Build plugin! +### Welcome to the Google Cloud Build plugin! -_This plugin was created through the Backstage CLI_ +This plugin allows you to include Google Cloud Build history in your backstage CI/CD page. -## Getting started + -Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/cloudbuild](http://localhost:3000/cloudbuild). +## Installation Steps -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. +### Install the plugin into backstage + +```bash +cd packages/app +yarn add @backstage/plugin-cloudbuild +``` + +### Modify EntityPage.tsx + +packages/app/src/components/catalog/EntityPage.tsx + +#### Add the Plugin import to the list of imports + +```diff +// packages/app/src/components/catalog/EntityPage.tsx +import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; + +import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; + ++import { EntityCloudbuildContent, isCloudbuildAvailable } from '@backstage/plugin-cloudbuild'; +``` + +#### In your `cicdContent` constant, add the following switch case + +```diff +// packages/app/src/components/catalog/EntityPage.tsx +const cicdContent = ( + ++ ++ ++ + + + + +``` + +##### OPTIONAL + +If you don't use GitHub Actions, or don't want to show it on your CI/CD page, then you can remove the switch case for it + +```diff +// packages/app/src/components/catalog/EntityPage.tsx +const cicdContent = ( + ++ ++ ++ + +- +- +- +``` + +### Add annotation to your component-info.yaml file. + +Any component, that you would like the Cloud Build Plugin to populate for, should include the following annotation: + +```diff +// component-info.yaml +apiVersion: backstage.io/v1alpha1 +kind: Component +metadata: + name: backstage + description: Backstage application. ++ annotations: ++ google.com/cloudbuild-project-slug: your-project-name +spec: + type: website + lifecycle: development +```