Skip to content

Commit 4c7c533

Browse files
karthikjeeyarkarthikjeeyar
authored
feat(argocd): add argocd deployment lifecycle and summary component (#1540)
* add argocd deployment lifecycle and summary components * add unit test for argocd plugin * add documentation and change visibility of argocd plugin to public * update ReadMe to include dynamic plugin usage
1 parent f79ad82 commit 4c7c533

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+4449
-439
lines changed

‎plugins/argocd/README.md

Lines changed: 199 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,208 @@
1-
# argocd
1+
# Argocd plugin for Backstage
22

33
Welcome to the argocd plugin!
44

55
_This plugin was created through the Backstage CLI_
66

77
## Getting started
88

9-
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 [/argocd](http://localhost:3000/argocd).
9+
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 [/argocd/deployment-lifecycle](http://localhost:3000/argocd/deployment-lifecycle).
1010

1111
You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
1212
This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
1313
It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
1414

15+
## For Administrators
16+
17+
### Installation and configuration
18+
19+
#### Prerequisites
20+
21+
- Install `@roadiehq/backstage-plugin-argo-cd-backend` plugin using the following command from the root directory
22+
<!-- configure it by following [Argo CD Backend Plugin docs](https://www.npmjs.com/package/@roadiehq/backstage-plugin-argo-cd-backend) -->
23+
24+
```bash
25+
yarn workspace app add @roadiehq/backstage-plugin-argo-cd-backend
26+
```
27+
28+
- Create plugin file for ArgoCD backend in your `packages/backend/src/plugins/` directory.
29+
30+
```ts
31+
// packages/backend/src/plugins/argocd.ts
32+
33+
import { createRouter } from '@roadiehq/backstage-plugin-argo-cd-backend';
34+
35+
import { PluginEnvironment } from '../types';
36+
37+
export default async function createPlugin({
38+
logger,
39+
config,
40+
}: PluginEnvironment) {
41+
return await createRouter({ logger, config });
42+
}
43+
```
44+
45+
- Modify your backend router to expose the APIs for ArgoCD backend
46+
47+
```ts
48+
// packages/backend/src/index.ts
49+
50+
import argocd from './plugins/argocd';
51+
...
52+
53+
const argocdEnv = useHotMemoize(module, () => createEnv('argocd'));
54+
...
55+
apiRouter.use('/argocd', await argocd(argocdEnv));
56+
```
57+
58+
- add argocd instance information in app.config.yaml
59+
60+
```ts
61+
argocd:
62+
appLocatorMethods:
63+
- type: 'config'
64+
instances:
65+
- name: argoInstance1
66+
url: https://argoInstance1.com
67+
username: ${ARGOCD_USERNAME}
68+
password: ${ARGOCD_PASSWORD}
69+
- name: argoInstance2
70+
url: https://argoInstance2.com
71+
username: ${ARGOCD_USERNAME}
72+
password: ${ARGOCD_PASSWORD}
73+
```
74+
75+
#### How to add argocd frontend plugin to Backstage app
76+
77+
1. Install the Argocd plugin using the following command:
78+
79+
```bash
80+
yarn workspace app add @janus-idp/backstage-plugin-argocd
81+
```
82+
83+
2. Add deployment summary and deployment lifecycle compoennt to the `entityPage.tsx` source file:
84+
85+
```ts
86+
// packages/app/src/components/catalog/EntityPage.tsx
87+
import {
88+
ArgocdDeploymentSummary,
89+
ArgocdDeploymentLifecycle,
90+
isArgocdConfigured,
91+
} from '@janus-idp/backstage-plugin-argocd';
92+
93+
const overviewContent = (
94+
<Grid container spacing={3} alignItems="stretch">
95+
...
96+
<EntitySwitch>
97+
<EntitySwitch.Case if={e => Boolean(isArgocdConfigured(e))}>
98+
<Grid item sm={12}>
99+
<ArgocdDeploymentSummary />
100+
</Grid>
101+
</EntitySwitch.Case>
102+
</EntitySwitch>
103+
...
104+
</Grid>
105+
);
106+
107+
108+
const cicdcontent = (
109+
<EntitySwitch>
110+
{/* ... */}
111+
{/* highlight-add-start */}
112+
...
113+
<EntitySwitch.Case if={e => Boolean(isArgocdConfigured(e))}>
114+
<Grid item sm={12}>
115+
<ArgocdDeploymentLifecycle />
116+
</Grid>
117+
</EntitySwitch.Case>
118+
{/* highlight-add-end */}
119+
</EntitySwitch>
120+
);
121+
```
122+
123+
- The following annotation is added to the entity's `catalog-info.yaml` file to enable argocd features in the backstage instance:
124+
125+
```yaml
126+
annotations:
127+
...
128+
129+
argocd/app-selector: 'rht-gitops.com/janus-argocd=quarkus-app'
130+
131+
```
132+
133+
- To switch between argocd instances, you can use the following annotation
134+
135+
```yaml
136+
annotations:
137+
...
138+
argocd/instance-name: 'argoInstance2'
139+
```
140+
141+
**_Note: If this annotation is not set, the plugin will defaultto the first argocd instance configured in the `app.config.yaml`_**
142+
15143
## Loading as Dynamic Plugin
16144

145+
To install this plugin into Red Hat Developer Hub or Janus IDP via Helm use this configuration:
146+
147+
```yaml
148+
global:
149+
dynamic:
150+
includes:
151+
- dynamic-plugins.default.yaml
152+
plugins:
153+
- package: ./dynamic-plugins/dist/roadiehq-backstage-plugin-argo-cd-backend-dynamic
154+
disabled: false
155+
pluginConfig:
156+
argocd:
157+
username: "${ARGOCD_USERNAME}"
158+
password: "${ARGOCD_PASSWORD}"
159+
appLocatorMethods:
160+
- type: 'config'
161+
instances:
162+
- name: argoInstance1
163+
url: "${ARGOCD_INSTANCE1_URL}"
164+
token: "${ARGOCD_AUTH_TOKEN}"
165+
- package: ./dynamic-plugins/dist/janus-idp-backstage-plugin-argocd
166+
disabled: false
167+
pluginConfig:
168+
dynamicPlugins:
169+
frontend:
170+
janus-idp.backstage-plugin-argocd:
171+
mountPoints:
172+
- mountPoint: entity.page.overview/cards
173+
importName: ArgocdDeploymentSummary
174+
config:
175+
layout:
176+
gridColumnEnd:
177+
lg: "span 8"
178+
xs: "span 12"
179+
if:
180+
allOf:
181+
- isArgocdAvailable
182+
- mountPoint: entity.page.cd/cards
183+
importName: ArgocdDeploymentLifecycle
184+
config:
185+
layout:
186+
gridColumn: '1 / -1'
187+
if:
188+
allOf:
189+
- isArgocdConfigured
190+
191+
```
192+
17193
This plugin can be loaded in backstage showcase application as a dynamic plugin.
18194

19195
Follow the below steps -
20196

21197
- Export dynamic plugin assets. This will build and create the static assets for the plugin and put it inside dist-scalprum folder.
22198

23-
```sh
24-
yarn export-dynamic
25-
```
199+
`yarn install`
200+
201+
`yarn tsc`
202+
203+
`yarn build`
204+
205+
`yarn export-dynamic`
26206

27207
- Package and copy dist-scalprum folder assets to dynamic-plugins-root folder in showcase application.
28208

@@ -33,22 +213,31 @@ tar -xzf "$archive" && rm "$archive"
33213
mv package $(echo $archive | sed -e 's:\.tgz$::')
34214
```
35215

36-
- Add the extension point inside the app-config.yaml or app-config.local.yaml file.
216+
- Add the extension point inside the `app-config.yaml` or `app-config.local.yaml` file.
37217

38218
```yaml
39219
dynamicPlugins:
40220
frontend:
41221
janus-idp.backstage-plugin-argocd:
42222
mountPoints:
223+
- mountPoint: entity.page.overview/cards
224+
importName: ArgocdDeploymentSummary
225+
config:
226+
layout:
227+
gridColumnEnd:
228+
lg: 'span 8'
229+
xs: 'span 12'
230+
if:
231+
allOf:
232+
- isArgocdAvailable
43233
- mountPoint: entity.page.cd/cards
44-
importName: ArgocdPage
234+
importName: ArgocdDeploymentLifecycle
45235
config:
46236
layout:
47237
gridColumn: '1 / -1'
48238
if:
49-
anyOf:
50-
- hasAnnotation: backstage.io/kubernetes-id
51-
- hasAnnotation: backstage.io/kubernetes-namespace
239+
allOf:
240+
- isArgocdConfigured
52241
```
53242

54243
For more detailed explanation on dynamic plugins follow this [doc](https://github.com/janus-idp/backstage-showcase/blob/main/showcase-docs/dynamic-plugins.md).

‎plugins/argocd/config.d.ts

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,49 @@
1-
export interface Config {}
1+
export interface Config {
2+
/** Optional configurations for the ArgoCD plugin */
3+
argocd?: {
4+
/**
5+
* The base url of the ArgoCD instance.
6+
* @visibility frontend
7+
*/
8+
baseUrl?: string;
9+
/**
10+
* Support for the ArgoCD beta feature "Applications in any namespace"
11+
* @visibility frontend
12+
*/
13+
namespacedApps?: boolean;
14+
/**
15+
* The number of revisions to load per application in the history table.
16+
* @visibility frontend
17+
*/
18+
revisionsToLoad?: number;
19+
/**
20+
* Polling interval timeout
21+
* @visibility frontend
22+
*/
23+
refreshInterval: number;
24+
/**
25+
* The base url of the ArgoCD instance.
26+
* @visibility frontend
27+
*/
28+
appLocatorMethods?: Array</**
29+
* @visibility secret
30+
*/
31+
{
32+
/**
33+
* The base url of the ArgoCD instance.
34+
* @visibility frontend
35+
*/
36+
type: string;
37+
instances: Array<{
38+
/**
39+
* @visibility frontend
40+
*/
41+
name: string;
42+
/**
43+
* @visibility frontend
44+
*/
45+
url: string;
46+
}>;
47+
}>;
48+
};
49+
}

0 commit comments

Comments
 (0)