Add FluxEntityHelmRepositoriesCard.

This is a new Card that displays HelmRepositories. Improve the documentation.
weaveworks · Jul 4, 2023 · 1ed555e · 1ed555e
1 parent 16fe580
commit 1ed555e
Show file tree

Hide file tree

Showing 20 changed files with 552 additions and 55 deletions.
diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
@@ -60,6 +60,7 @@ import {
   FluxEntityGitRepositoriesCard,
   FluxEntityHelmReleasesCard,
   FluxEntityOCIRepositoriesCard,
+  FluxEntityHelmRepositoriesCard,
 } from '@weaveworksoss/backstage-plugin-flux';
 
 const techdocsContent = (
@@ -154,12 +155,16 @@ const serviceEntityPage = (
         <Grid item md={12}>
           <FluxEntityHelmReleasesCard />
         </Grid>
+        <Grid item md={12}>
+          <FluxEntityHelmRepositoriesCard />
+        </Grid>
         <Grid item md={12}>
           <FluxEntityGitRepositoriesCard />
         </Grid>
         <Grid item md={12}>
           <FluxEntityOCIRepositoriesCard />
         </Grid>
+
       </Grid>
     </EntityLayout.Route>
 

diff --git a/plugins/backstage-plugin-flux/README.md b/plugins/backstage-plugin-flux/README.md
@@ -6,7 +6,12 @@ The Flux plugin for Backstage provides views of [Flux](https://fluxcd.io/) resou
 
 ## Content
 
-- FluxEntityHelmReleasesCard - displays the state of HelmReleases for the Entity.
+All these cards display the relevant resources for the currently displayed entity.
+
+- FluxEntityHelmReleasesCard
+- FluxEntityGitRepositoriesCard
+- FluxEntityOCIRepositoriesCard
+- FluxEntityHelmRepositoriesCard
 
 ## Prerequisite
 
@@ -42,6 +47,8 @@ yarn add --cwd packages/app @weaveworksoss/backstage-plugin-flux
 
 ## Configuration
 
+The Flux plugins provide several different Cards, which are composable into your Backstage App.
+
 1. Add the card to your app EntityPage.tsx
 
 ```tsx
@@ -130,11 +137,16 @@ spec:
   interval: 1m0s
 ```
 
-5. Configure your `app-config.yaml`
+5. [Optional] Configure linking through to Weave GitOps, configure your `app-config.yaml`
+
+If you have [Weave GitOps](https://www.weave.works/product/gitops/) or [Weave GitOps Enterprise](https://www.weave.works/product/gitops-enterprise/) you can configure the plugins to link through to the UI which will provide more information on the resources.
+
+This will generate link URLs through to the relevant UIs relative to the configured URL, for example to view Helm Repositories, this would generate a URL that looks like this `https://wego.example.com/wego/helm_repo/details?clusterName=demo-cluster&name=podinfo&namespace=default`.
 
 ```yaml
-# app.config.yaml
+# app-config.yaml
 
 gitops:
-  baseUrl: https://wego.example.com/
+  #
+  baseUrl: https://wego.example.com
 ```
diff --git a/plugins/backstage-plugin-flux/dev/helpers.ts b/plugins/backstage-plugin-flux/dev/helpers.ts
@@ -1,12 +1,13 @@
 import { DateTime } from 'luxon';
+import { Condition } from '../src/objects';
 import * as verifiedOCIRepository from '../src/__fixtures__/verified_oci_repository.json';
 import * as unverifiedOCIRepository from '../src/__fixtures__/unverified_oci_repository.json';
 import * as ociRepository from '../src/__fixtures__/oci_repository.json';
 import * as verifiedGitRepository from '../src/__fixtures__/verified_git_repository.json';
 import * as unverifiedGitRepository from '../src/__fixtures__/unverified_git_repository.json';
 import * as gitRepository from '../src/__fixtures__/git_repository.json';
 import * as kustomization from '../src/__fixtures__/kustomization.json';
-import { Condition } from '../src/objects';
+import * as helmRepository from '../src/__fixtures__/helm_repository.json';
 
 const randomInt = (max: number) => Math.floor(Math.random() * max);
 
@@ -89,6 +90,23 @@ export const newTestKustomization = (
 
     result.metadata.name = name;
     result.spec.path = path;
+
+    result.metadata.name = name;
+    result.spec.url = url;
+    result.status.conditions = applyReadyCondition(ready, result.status.conditions);
+
+    return result;
+};
+
+export const newTestHelmRepository = (
+  name: string,
+  url: string,
+  ready: boolean = true,
+) => {
+    const result = copy(helmRepository);
+
+    result.metadata.name = name;
+    result.spec.url = url;
     result.status.conditions = applyReadyCondition(ready, result.status.conditions);
 
     return result;

diff --git a/plugins/backstage-plugin-flux/dev/index.tsx b/plugins/backstage-plugin-flux/dev/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Content } from '@backstage/core-components';
 import { createDevApp } from '@backstage/dev-utils';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { Entity } from '@backstage/catalog-model';
@@ -22,15 +23,16 @@ import {
   weaveworksFluxPlugin,
   FluxEntityHelmReleasesCard,
   FluxEntityGitRepositoriesCard,
+  FluxEntityOCIRepositoriesCard,
+  FluxEntityHelmRepositoriesCard,
 } from '../src/plugin';
 import {
   newTestHelmRelease,
   newTestOCIRepository,
   newTestGitRepository,
+  newTestHelmRepository,
 } from './helpers';
-import { FluxEntityOCIRepositoriesCard } from '../src/components/FluxEntityOCIRepositoriesCard';
 import { ReconcileRequestAnnotation } from '../src/hooks';
-import { Content } from '@backstage/core-components';
 
 const fakeEntity: Entity = {
   apiVersion: 'backstage.io/v1alpha1',
@@ -322,5 +324,38 @@ createDevApp()
       </TestApiProvider>
     ),
   })
+  .addPage({
+    title: 'Helm Repositories',
+    path: '/helm-repositories',
+    element: (
+      <TestApiProvider
+        apis={[
+          [
+            configApiRef,
+            new ConfigReader({
+              gitops: { baseUrl: 'https://example.com/wego' },
+            }),
+          ],
+          [
+            kubernetesApiRef,
+            new StubKubernetesClient([
+              newTestHelmRepository(
+                'podinfo',
+                'https://stefanprodan.github.io/podinfo',
+              ),
+            ]),
+          ],
+
+          [kubernetesAuthProvidersApiRef, new StubKubernetesAuthProvidersApi()],
+        ]}
+      >
+        <EntityProvider entity={fakeEntity}>
+          <Content>
+            <FluxEntityHelmRepositoriesCard />
+          </Content>
+        </EntityProvider>
+      </TestApiProvider>
+    ),
+  })
   .registerPlugin(weaveworksFluxPlugin)
   .render();
diff --git a/plugins/backstage-plugin-flux/helm_releases_card.png b/plugins/backstage-plugin-flux/helm_releases_card.png
diff --git a/plugins/backstage-plugin-flux/src/__fixtures__/helm_repository.json b/plugins/backstage-plugin-flux/src/__fixtures__/helm_repository.json
@@ -0,0 +1,54 @@
+{
+    "apiVersion": "source.toolkit.fluxcd.io/v1beta2",
+    "kind": "HelmRepository",
+    "metadata": {
+        "annotations": {
+            "kubectl.kubernetes.io/last-applied-configuration": "{\"apiVersion\":\"source.toolkit.fluxcd.io/v1beta2\",\"kind\":\"HelmRepository\",\"metadata\":{\"annotations\":{},\"name\":\"podinfo\",\"namespace\":\"backstage\"},\"spec\":{\"interval\":\"1m\",\"url\":\"https://stefanprodan.github.io/podinfo\"}}\n"
+        },
+        "creationTimestamp": "2023-06-29T13:50:21Z",
+        "finalizers": [
+            "finalizers.fluxcd.io"
+        ],
+        "generation": 1,
+        "name": "podinfo",
+        "namespace": "default",
+        "resourceVersion": "1054927",
+        "uid": "39f589d3-260d-4f93-a4f2-fcd6dc26b8a8"
+    },
+    "spec": {
+        "interval": "1m",
+        "provider": "generic",
+        "timeout": "60s",
+        "url": "https://stefanprodan.github.io/podinfo"
+    },
+    "status": {
+        "artifact": {
+            "digest": "sha256:80b091a3a69b9ecfebde40ce2a5f19e95f8f8ea956bd5635a31701f7fad1616e",
+            "lastUpdateTime": "2023-06-29T13:50:22Z",
+            "path": "helmrepository/backstage/podinfo/index-80b091a3a69b9ecfebde40ce2a5f19e95f8f8ea956bd5635a31701f7fad1616e.yaml",
+            "revision": "sha256:80b091a3a69b9ecfebde40ce2a5f19e95f8f8ea956bd5635a31701f7fad1616e",
+            "size": 43126,
+            "url": "http://source-controller.flux-system.svc.cluster.local./helmrepository/backstage/podinfo/index-80b091a3a69b9ecfebde40ce2a5f19e95f8f8ea956bd5635a31701f7fad1616e.yaml"
+        },
+        "conditions": [
+            {
+                "lastTransitionTime": "2023-07-03T09:18:10Z",
+                "message": "stored artifact: revision 'sha256:80b091a3a69b9ecfebde40ce2a5f19e95f8f8ea956bd5635a31701f7fad1616e'",
+                "observedGeneration": 1,
+                "reason": "Succeeded",
+                "status": "True",
+                "type": "Ready"
+            },
+            {
+                "lastTransitionTime": "2023-06-29T13:50:22Z",
+                "message": "stored artifact: revision 'sha256:80b091a3a69b9ecfebde40ce2a5f19e95f8f8ea956bd5635a31701f7fad1616e'",
+                "observedGeneration": 1,
+                "reason": "Succeeded",
+                "status": "True",
+                "type": "ArtifactInStorage"
+            }
+        ],
+        "observedGeneration": 1,
+        "url": "http://source-controller.flux-system.svc.cluster.local./helmrepository/backstage/podinfo/index.yaml"
+    }
+}
diff --git a/...age-plugin-flux/src/components/FluxEntityGitRepositoriesCard/FluxGitRepositoriesTable.tsx b/...age-plugin-flux/src/components/FluxEntityGitRepositoriesCard/FluxGitRepositoriesTable.tsx
@@ -5,7 +5,7 @@ import {
   nameAndClusterNameColumn,
   verifiedColumn,
   urlColumn,
-  tagColumn,
+  artifactColumn,
   statusColumn,
   updatedColumn,
   syncColumn,
@@ -18,7 +18,7 @@ export const defaultColumns: TableColumn<GitRepository>[] = [
   nameAndClusterNameColumn(),
   verifiedColumn(),
   urlColumn(),
-  tagColumn('Ref'),
+  artifactColumn(),
   statusColumn(),
   updatedColumn(),
   syncColumn(),