Add namespace label to argo rollouts in kubernetes (#25467)

* Create fixture for rollouts

Since rollouts have customized support, having a fixture for them can
help in maintaining their rendering.

Signed-off-by: ilias <mail@ilias.xyz>

* Show namespace on Argo Rollout drawers

Signed-off-by: ilias <mail@ilias.xyz>

* Add changeset

Signed-off-by: ilias <mail@ilias.xyz>

* Check namespace shows up on rollouts

Signed-off-by: ilias <mail@ilias.xyz>

---------

Signed-off-by: ilias <mail@ilias.xyz>

.changeset/sharp-rice-tickle.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-kubernetes-react': patch
+---
+
+Add a namespace label to RolloutDrawer

plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/Rollout.test.tsx

@@ -35,6 +35,7 @@ describe('Rollout', () => {
 
     expect(screen.getByText('dice-roller')).toBeInTheDocument();
     expect(screen.getByText('Rollout')).toBeInTheDocument();
+    expect(screen.getByText('namespace: default')).toBeInTheDocument();
     expect(screen.getByText('2 pods')).toBeInTheDocument();
     expect(screen.getByText('No pods with errors')).toBeInTheDocument();
     expect(screen.queryByText('Paused')).toBeNull();
@@ -52,6 +53,7 @@ describe('Rollout', () => {
 
     expect(screen.getByText('dice-roller')).toBeInTheDocument();
     expect(screen.getByText('Rollout')).toBeInTheDocument();
+    expect(screen.getByText('namespace: default')).toBeInTheDocument();
     expect(screen.getByText('2 pods')).toBeInTheDocument();
     expect(screen.getByText('1 pod with errors')).toBeInTheDocument();
     expect(screen.queryByText('Paused')).toBeNull();
@@ -71,6 +73,7 @@ describe('Rollout', () => {
 
     expect(screen.getByText('dice-roller')).toBeInTheDocument();
     expect(screen.getByText('Rollout')).toBeInTheDocument();
+    expect(screen.getByText('namespace: default')).toBeInTheDocument();
     expect(screen.getByText('2 pods')).toBeInTheDocument();
     expect(screen.getByText('No pods with errors')).toBeInTheDocument();
     expect(screen.getByText('Paused (45 minutes ago)')).toBeInTheDocument();
@@ -90,6 +93,7 @@ describe('Rollout', () => {
 
     expect(screen.getByText('dice-roller')).toBeInTheDocument();
     expect(screen.getByText('Rollout')).toBeInTheDocument();
+    expect(screen.getByText('namespace: default')).toBeInTheDocument();
     expect(screen.getByText('2 pods')).toBeInTheDocument();
     expect(screen.getByText('No pods with errors')).toBeInTheDocument();
     expect(screen.queryByText('Paused')).toBeNull();

plugins/kubernetes-react/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import { KubernetesStructuredMetadataTableDrawer } from '../../KubernetesDrawer';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
+import Chip from '@material-ui/core/Chip';
 
 export const RolloutDrawer = ({
   rollout,
@@ -26,6 +27,7 @@ export const RolloutDrawer = ({
   rollout: any;
   expanded?: boolean;
 }) => {
+  const namespace = rollout.metadata?.namespace;
   return (
     <KubernetesStructuredMetadataTableDrawer
       object={rollout}
@@ -50,6 +52,11 @@ export const RolloutDrawer = ({
             Rollout
           </Typography>
         </Grid>
+        {namespace && (
+          <Grid item>
+            <Chip size="small" label={`namespace: ${namespace}`} />
+          </Grid>
+        )}
       </Grid>
     </KubernetesStructuredMetadataTableDrawer>
   );

plugins/kubernetes/dev/index.tsx

@@ -33,6 +33,7 @@ import fixture1 from '../src/__fixtures__/1-deployments.json';
 import fixture2 from '../src/__fixtures__/2-deployments.json';
 import fixture3 from '../src/__fixtures__/1-cronjobs.json';
 import fixture4 from '../src/__fixtures__/2-cronjobs.json';
+import fixture5 from '../src/__fixtures__/1-rollouts.json';
 import { TestApiProvider } from '@backstage/test-utils';
 
 const mockEntity: Entity = {
@@ -186,5 +187,18 @@ createDevApp()
       </TestApiProvider>
     ),
   })
+  .addPage({
+    path: '/fixture-5',
+    title: 'Fixture 5',
+    element: (
+      <TestApiProvider
+        apis={[[kubernetesApiRef, new MockKubernetesClient(fixture5)]]}
+      >
+        <EntityProvider entity={mockEntity}>
+          <EntityKubernetesContent />
+        </EntityProvider>
+      </TestApiProvider>
+    ),
+  })
   .registerPlugin(kubernetesPlugin)
   .render();