|
| 1 | +# Harness Feature Flags Plugin |
| 2 | + |
| 3 | +Website: [https://harness.io/](https://harness.io/) |
| 4 | + |
| 5 | +Welcome to the Harness FME Feature Flags plugin for Backstage! |
| 6 | + |
| 7 | +## Screenshots |
| 8 | + |
| 9 | +<img src="./src/assets/FeatureList.png" /> |
| 10 | + |
| 11 | +## Setup steps |
| 12 | + |
| 13 | +1. Open terminal and navigate to the _root of your Backstage app_. Then run |
| 14 | + |
| 15 | +``` |
| 16 | +yarn add --cwd packages/app @harnessio/backstage-plugin-fme-feature-flags |
| 17 | +
|
| 18 | +yarn install |
| 19 | +``` |
| 20 | + |
| 21 | +If you are looking to get started with Backstage, check out [backstage.io/docs](https://backstage.io/docs/getting-started/). |
| 22 | + |
| 23 | +For testing purposes, you can also clone this repository to try out the plugin. It contains an example Backstage app setup which is pre-installed with Harness plugins. However, you must create a new Backstage app if you are looking to get started with Backstage. |
| 24 | + |
| 25 | +2. Configure proxy for harness in your `app-config.yaml` under the `proxy` config. Add your Harness FME Admin API Key for `Authorization: Bearer`. See the [Harness FME docs](https://help.split.io/hc/en-us/articles/360019916211-API-keys) for generating an API Key. |
| 26 | + |
| 27 | +```yaml |
| 28 | +# In app-config.yaml |
| 29 | + |
| 30 | +proxy: |
| 31 | + # ... existing proxy settings |
| 32 | + '/harnessfme': |
| 33 | + target: 'https://api.split.io/' |
| 34 | + headers: |
| 35 | + 'Authorization': 'Bearer <API KEY>' |
| 36 | +# ... |
| 37 | +``` |
| 38 | + |
| 39 | +Notes: |
| 40 | + |
| 41 | +- Plugin uses token configured here to make Harness FME API calls. Make sure this token has the necessary permissions |
| 42 | + |
| 43 | + |
| 44 | +3. Inside your Backstage's `EntityPage.tsx`, add the new `FMEfeatureFlagList` component to render `<EntityHarnessFMEFeatureFlagContent />` whenever the service is using Harness Feature Flags. Something like this - |
| 45 | + |
| 46 | +```tsx |
| 47 | +// In packages/app/src/components/catalog/EntityPage.tsx |
| 48 | + |
| 49 | +import { |
| 50 | + isHarnessFMEFeatureFlagAvailable, |
| 51 | + EntityHarnessFMEFeatureFlagContent, |
| 52 | +} from '@harnessio/backstage-plugin-fme-feature-flags'; |
| 53 | + |
| 54 | +... |
| 55 | + |
| 56 | +const featureFlagList = ( |
| 57 | + <EntitySwitch> |
| 58 | + <EntitySwitch.Case if={isHarnessFMEFeatureFlagAvailable}> |
| 59 | + <EntityHarnessFMEFeatureFlagContent /> |
| 60 | + </EntitySwitch.Case> |
| 61 | + |
| 62 | + <EntitySwitch.Case> |
| 63 | + <EmptyState |
| 64 | + title="No FME Feature Flags available for this entity" |
| 65 | + missing="info" |
| 66 | + description="You need to add an annotation to your component if you want to enable Feature Flags for it. You can read more about annotations in Backstage by clicking the button below." |
| 67 | + action={ |
| 68 | + <Button |
| 69 | + variant="contained" |
| 70 | + color="primary" |
| 71 | + href="https://backstage.io/docs/features/software-catalog/well-known-annotations" |
| 72 | + > |
| 73 | + Read more |
| 74 | + </Button> |
| 75 | + } |
| 76 | + /> |
| 77 | + </EntitySwitch.Case> |
| 78 | + </EntitySwitch> |
| 79 | +); |
| 80 | + |
| 81 | +... |
| 82 | + |
| 83 | +const serviceEntityPage = ( |
| 84 | + <EntityLayout> |
| 85 | + <EntityLayout.Route path="/fme-feature-flag" title="FME Feature Flags"> |
| 86 | + {FMEList} |
| 87 | + </EntityLayout.Route> |
| 88 | + </EntityLayout> |
| 89 | +); |
| 90 | + |
| 91 | +... |
| 92 | + |
| 93 | +``` |
| 94 | + |
| 95 | +4. Add required Harness FME specific annotations to your software component's respective `catalog-info.yaml` file. |
| 96 | +You will need your accountId (formerly Org ID) and projectId (formerly Workspace ID) |
| 97 | + |
| 98 | +You can get these from the URL when you are logged in to the FME console. |
| 99 | + |
| 100 | +https://app.split.io/org/<ACCOUNT ID>/ws/<PROJECT ID>>/mywork |
| 101 | + |
| 102 | + |
| 103 | + |
| 104 | +```yaml |
| 105 | +apiVersion: backstage.io/v1alpha1 |
| 106 | +kind: Component |
| 107 | +metadata: |
| 108 | + # ... |
| 109 | + annotations: |
| 110 | + # mandatory annotation |
| 111 | + harnessfme/projectId: <project id> |
| 112 | + harnessfme/accountId: <account id> |
| 113 | + |
| 114 | + type: service |
| 115 | + # ... |
| 116 | +``` |
| 117 | + |
| 118 | + |
| 119 | + |
| 120 | +## Features |
| 121 | + |
| 122 | +- Connect a Backstage service with a Harness project and view the list of all Feature Flags. |
| 123 | +- See details about a Feature Flags - state(killed/live), trafficType, last modified and created. |
| 124 | +- Filter the Feature Flags and their corresponding information according to the Environments. |
0 commit comments