@spinnaker/kubernetes 2026.2.2 → 2026.3.0

package/src/securityGroup/details/KubernetesSecurityGroupDetails.spec.tsx

@@ -0,0 +1,292 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { MenuItem } from 'react-bootstrap';
+
+import {
+  AccountTag,
+  AddEntityTagLinks,
+  CloudProviderLogo,
+  CollapsibleSection,
+  EntityNotifications,
+  ManifestReader,
+  SETTINGS,
+} from '@spinnaker/core';
+
+import {
+  KubernetesSecurityGroupActions,
+  KubernetesSecurityGroupDetailsComponent as KubernetesSecurityGroupDetails,
+} from './KubernetesSecurityGroupDetails';
+import type { IKubernetesSecurityGroupDetailsProps } from './KubernetesSecurityGroupDetails';
+import { KubernetesV2SecurityGroupTransformer } from '../transformer';
+import { AnnotationCustomSections } from '../../manifest/AnnotationCustomSections';
+import { DeleteModal } from '../../manifest/delete/DeleteModal';
+import { KubernetesManifestCommandBuilder } from '../../manifest/manifestCommandBuilder.service';
+import { ManifestLabels } from '../../manifest/ManifestLabels';
+import { ManifestWizard } from '../../manifest/wizard/ManifestWizard';
+
+describe('<KubernetesSecurityGroupDetails />', () => {
+  let originalAdHocInfraWritesEnabled: boolean;
+  let originalEntityTags: boolean;
+  let props: IKubernetesSecurityGroupDetailsProps;
+  let securityGroupReader: any;
+
+  beforeEach(() => {
+    originalAdHocInfraWritesEnabled = SETTINGS.kubernetesAdHocInfraWritesEnabled;
+    originalEntityTags = SETTINGS.feature.entityTags;
+    SETTINGS.kubernetesAdHocInfraWritesEnabled = true;
+    SETTINGS.feature.entityTags = false;
+
+    securityGroupReader = {
+      getSecurityGroupDetails: jasmine
+        .createSpy('getSecurityGroupDetails')
+        .and.returnValue(Promise.resolve(securityGroup())),
+    };
+    props = {
+      app: appWithSecurityGroups(),
+      resolvedSecurityGroup: {
+        accountId: 'k8s-local',
+        name: 'networkPolicy backend-security-policy',
+        region: 'dev',
+      },
+      securityGroupReader,
+    } as IKubernetesSecurityGroupDetailsProps;
+
+    spyOn(ManifestReader, 'getManifest').and.returnValue(Promise.resolve(manifestDetails()) as any);
+  });
+
+  it('replaces missing details through the injected state service', () => {
+    const stateService = { go: jasmine.createSpy('go'), params: {} };
+    const component = new KubernetesSecurityGroupDetails({
+      ...props,
+      router: {},
+      stateParams: {},
+      stateService,
+    } as any);
+
+    (component as any).autoClose();
+
+    expect(stateService.params.allowModalToStayOpen).toBe(true);
+    expect(stateService.go).toHaveBeenCalledWith('^', null, { location: 'replace' });
+  });
+
+  afterEach(() => {
+    SETTINGS.kubernetesAdHocInfraWritesEnabled = originalAdHocInfraWritesEnabled;
+    SETTINGS.feature.entityTags = originalEntityTags;
+  });
+
+  it('loads security group and manifest details before rendering the React sections', async () => {
+    const component = shallow(<KubernetesSecurityGroupDetails {...props} />);
+
+    await settle();
+    component.update();
+
+    expect(securityGroupReader.getSecurityGroupDetails).toHaveBeenCalledWith(
+      props.app,
+      'k8s-local',
+      'kubernetes',
+      'dev',
+      '',
+      'networkPolicy backend-security-policy',
+    );
+    expect(ManifestReader.getManifest).toHaveBeenCalledWith(
+      'k8s-local',
+      'dev',
+      'networkPolicy backend-security-policy',
+    );
+    expect(component.find(CloudProviderLogo).prop('provider')).toBe('kubernetes');
+    expect(component.find('h3').text()).toContain('backend-security-policy');
+    expect(component.find(KubernetesSecurityGroupActions).prop('securityGroup')).toEqual(securityGroup());
+    expect(component.find(CollapsibleSection).map((section) => section.prop('heading'))).toEqual([
+      'Information',
+      'Labels',
+    ]);
+    expect(component.find(AccountTag).prop('account')).toBe('k8s-local');
+    expect(component.find(AnnotationCustomSections).prop('manifest')).toEqual(manifestDetails().manifest);
+    expect(component.find(AnnotationCustomSections).prop('resource')).toEqual(securityGroup());
+    expect(component.find(ManifestLabels).prop('manifest')).toEqual(manifestDetails().manifest);
+  });
+
+  it('auto-closes when the security group cannot be found', async () => {
+    const autoClose = jasmine.createSpy('autoClose');
+    securityGroupReader.getSecurityGroupDetails.and.returnValue(Promise.resolve(null));
+    const component = shallow(<KubernetesSecurityGroupDetails {...props} autoClose={autoClose} />);
+
+    await settle();
+    component.update();
+
+    expect(autoClose).toHaveBeenCalled();
+  });
+
+  it('renders entity tag integrations when enabled', async () => {
+    SETTINGS.feature.entityTags = true;
+    const component = shallow(<KubernetesSecurityGroupDetails {...props} />);
+
+    await settle();
+    component.update();
+
+    expect(component.find(EntityNotifications).prop('entity')).toEqual(securityGroup());
+  });
+
+  it('loads standalone security group details when the securityGroups data source is absent', async () => {
+    const app = {
+      ...appWithSecurityGroups(),
+      isStandalone: true,
+      getDataSource: () => undefined,
+    };
+    const component = shallow(<KubernetesSecurityGroupDetails {...props} app={app} />);
+
+    await settle();
+    component.update();
+
+    expect(securityGroupReader.getSecurityGroupDetails).toHaveBeenCalledWith(
+      app,
+      'k8s-local',
+      'kubernetes',
+      'dev',
+      '',
+      'networkPolicy backend-security-policy',
+    );
+    expect(component.find('h3').text()).toContain('backend-security-policy');
+  });
+});
+
+describe('<KubernetesSecurityGroupActions />', () => {
+  let originalAdHocInfraWritesEnabled: boolean;
+  let originalEntityTags: boolean;
+
+  beforeEach(() => {
+    originalAdHocInfraWritesEnabled = SETTINGS.kubernetesAdHocInfraWritesEnabled;
+    originalEntityTags = SETTINGS.feature.entityTags;
+    SETTINGS.kubernetesAdHocInfraWritesEnabled = true;
+    SETTINGS.feature.entityTags = false;
+  });
+
+  afterEach(() => {
+    SETTINGS.kubernetesAdHocInfraWritesEnabled = originalAdHocInfraWritesEnabled;
+    SETTINGS.feature.entityTags = originalEntityTags;
+  });
+
+  it('opens the delete modal from the actions menu', () => {
+    const component = shallow(
+      <KubernetesSecurityGroupActions
+        app={appWithSecurityGroups()}
+        manifest={manifestDetails()}
+        securityGroup={securityGroup()}
+      />,
+    );
+
+    expect(component.find(DeleteModal).prop('isOpen')).toBe(false);
+
+    component.find(MenuItem).at(0).prop('onClick')({} as any);
+
+    expect(component.find(DeleteModal).prop('isOpen')).toBe(true);
+    expect(component.find(DeleteModal).prop('resource')).toEqual(securityGroup());
+  });
+
+  it('opens the manifest wizard from the actions menu', async () => {
+    const command = { manifest: {} };
+    spyOn(KubernetesManifestCommandBuilder, 'buildNewManifestCommand').and.returnValue(Promise.resolve(command) as any);
+    spyOn(ManifestWizard, 'show');
+    const app = appWithSecurityGroups();
+    const component = shallow(
+      <KubernetesSecurityGroupActions app={app} manifest={manifestDetails()} securityGroup={securityGroup()} />,
+    );
+
+    component.find(MenuItem).at(1).prop('onClick')({} as any);
+    await settle();
+
+    expect(KubernetesManifestCommandBuilder.buildNewManifestCommand).toHaveBeenCalledWith(
+      app,
+      manifestDetails().manifest,
+      securityGroup().moniker,
+      'k8s-local',
+    );
+    expect(ManifestWizard.show).toHaveBeenCalledWith({
+      title: 'Edit Manifest',
+      application: app,
+      command,
+    });
+  });
+
+  it('renders entity tag links when enabled', () => {
+    SETTINGS.feature.entityTags = true;
+    const app = appWithSecurityGroups();
+    const component = shallow(
+      <KubernetesSecurityGroupActions app={app} manifest={manifestDetails()} securityGroup={securityGroup()} />,
+    );
+
+    expect(component.find(AddEntityTagLinks).prop('component')).toEqual(securityGroup());
+    expect(component.find(AddEntityTagLinks).prop('application')).toBe(app);
+    expect(component.find(AddEntityTagLinks).prop('entityType')).toBe('securityGroup');
+  });
+
+  it('does not render action controls when ad-hoc infrastructure writes are disabled', () => {
+    SETTINGS.kubernetesAdHocInfraWritesEnabled = false;
+
+    const component = shallow(
+      <KubernetesSecurityGroupActions
+        app={appWithSecurityGroups()}
+        manifest={manifestDetails()}
+        securityGroup={securityGroup()}
+      />,
+    );
+
+    expect(component.isEmptyRender()).toBe(true);
+    expect(component.find('Dropdown').exists()).toBe(false);
+    expect(component.find(MenuItem).exists()).toBe(false);
+    expect(component.find(DeleteModal).exists()).toBe(false);
+  });
+});
+
+describe('KubernetesV2SecurityGroupTransformer', () => {
+  it('normalizes Kubernetes security groups without modifying them', async () => {
+    const group = securityGroup();
+
+    await expectAsync(new KubernetesV2SecurityGroupTransformer().normalizeSecurityGroup(group)).toBeResolvedTo(group);
+  });
+});
+
+const settle = () => new Promise((resolve) => setTimeout(resolve));
+
+const appWithSecurityGroups = () =>
+  ({
+    isStandalone: false,
+    getDataSource: () => ({
+      ready: () => Promise.resolve(),
+      onRefresh: () => () => null,
+    }),
+    securityGroups: {
+      refresh: jasmine.createSpy('refreshSecurityGroups'),
+    },
+  } as any);
+
+const securityGroup = (overrides: any = {}) =>
+  ({
+    account: 'k8s-local',
+    apiVersion: 'networking.k8s.io/v1',
+    cloudProvider: 'kubernetes',
+    createdTime: 1753718892000,
+    displayName: 'backend-security-policy',
+    kind: 'networkPolicy',
+    moniker: { app: 'kubernetesapp', cluster: 'networkPolicy backend-security-policy' },
+    name: 'networkPolicy backend-security-policy',
+    namespace: 'dev',
+    region: 'dev',
+    ...overrides,
+  } as any);
+
+const manifestDetails = () =>
+  ({
+    account: 'k8s-local',
+    manifest: {
+      metadata: {
+        annotations: {
+          'strategy.spinnaker.io/deployment-info': 'Account: {{ resource.account }}',
+        },
+        labels: {
+          'app.kubernetes.io/name': 'kubernetesapp',
+        },
+        name: 'backend-security-policy',
+      },
+    },
+  } as any);

package/src/securityGroup/details/KubernetesSecurityGroupDetails.tsx

@@ -0,0 +1,304 @@
+import React from 'react';
+import { Dropdown, MenuItem } from 'react-bootstrap';
+
+import type {
+  Application,
+  IManifest,
+  IOverridableProps,
+  IRouterInjectedProps,
+  ISecurityGroupDetail,
+  SecurityGroupReader,
+} from '@spinnaker/core';
+import {
+  AccountTag,
+  AddEntityTagLinks,
+  CloudProviderLogo,
+  CollapsibleSection,
+  DeckRuntimeContext,
+  EntityNotifications,
+  FirewallLabels,
+  ManifestReader,
+  robotToHuman,
+  SETTINGS,
+  timestamp,
+  useModal,
+  withRouter,
+} from '@spinnaker/core';
+
+import type { IKubernetesSecurityGroup } from '../../interfaces';
+import { AnnotationCustomSections } from '../../manifest/AnnotationCustomSections';
+import { ManifestLabels } from '../../manifest/ManifestLabels';
+import { DeleteModal } from '../../manifest/delete/DeleteModal';
+import { KubernetesManifestCommandBuilder } from '../../manifest/manifestCommandBuilder.service';
+import { ManifestWizard } from '../../manifest/wizard/ManifestWizard';
+
+interface ISecurityGroupFromStateParams {
+  accountId: string;
+  name: string;
+  region: string;
+}
+
+export interface IKubernetesSecurityGroupDetailsProps extends IOverridableProps {
+  app: Application;
+  autoClose?: () => void;
+  resolvedSecurityGroup: ISecurityGroupFromStateParams;
+  securityGroupReader?: SecurityGroupReader;
+}
+
+interface IKubernetesSecurityGroupDetailsState {
+  loading: boolean;
+  manifest?: IManifest;
+  securityGroup?: IKubernetesSecurityGroup;
+}
+
+export interface IKubernetesSecurityGroupActionsProps {
+  app: Application;
+  manifest: IManifest;
+  securityGroup: IKubernetesSecurityGroup;
+}
+
+export class KubernetesSecurityGroupDetailsComponent extends React.Component<
+  IKubernetesSecurityGroupDetailsProps & IRouterInjectedProps,
+  IKubernetesSecurityGroupDetailsState
+> {
+  public static contextType = DeckRuntimeContext;
+  public declare context: React.ContextType<typeof DeckRuntimeContext>;
+
+  public state: IKubernetesSecurityGroupDetailsState = {
+    loading: true,
+  };
+
+  private isUnmounted = false;
+  private dataSourceReady = false;
+  private loadRequestId = 0;
+  private unsubscribeFromRefresh: () => void;
+
+  public componentDidMount(): void {
+    const dataSource = this.props.app.getDataSource('securityGroups');
+
+    if (!dataSource) {
+      this.dataSourceReady = true;
+      this.loadSecurityGroup();
+      return;
+    }
+
+    dataSource
+      .ready()
+      .then(() => {
+        if (this.isUnmounted) {
+          return;
+        }
+
+        this.dataSourceReady = true;
+        this.loadSecurityGroup();
+        this.unsubscribeFromRefresh = dataSource.onRefresh(this.loadSecurityGroup);
+      })
+      .catch(this.autoClose);
+  }
+
+  public componentDidUpdate(prevProps: IKubernetesSecurityGroupDetailsProps): void {
+    if (this.dataSourceReady && this.getCoordinatesKey(prevProps) !== this.getCoordinatesKey(this.props)) {
+      this.loadSecurityGroup();
+    }
+  }
+
+  public componentWillUnmount(): void {
+    this.isUnmounted = true;
+    if (this.unsubscribeFromRefresh) {
+      this.unsubscribeFromRefresh();
+    }
+  }
+
+  private getSecurityGroupReader(): SecurityGroupReader {
+    return this.props.securityGroupReader || this.context.services.securityGroupReader;
+  }
+
+  private getCoordinatesKey(props: IKubernetesSecurityGroupDetailsProps): string {
+    const { accountId, name, region } = props.resolvedSecurityGroup;
+    return [accountId, region, name].join(':');
+  }
+
+  private loadSecurityGroup = (): void => {
+    const { app, resolvedSecurityGroup } = this.props;
+    const { accountId, name, region } = resolvedSecurityGroup;
+    const requestId = ++this.loadRequestId;
+
+    this.setState({ loading: true });
+
+    Promise.all([
+      this.getSecurityGroupReader().getSecurityGroupDetails(app, accountId, 'kubernetes', region, '', name),
+      ManifestReader.getManifest(accountId, region, name),
+    ])
+      .then(([securityGroup, manifest]: [ISecurityGroupDetail, IManifest]) => {
+        if (!this.isCurrentLoad(requestId)) {
+          return;
+        }
+
+        if (!securityGroup) {
+          this.autoClose();
+          return;
+        }
+
+        this.setState({
+          loading: false,
+          manifest,
+          securityGroup: securityGroup as IKubernetesSecurityGroup,
+        });
+      })
+      .catch(() => {
+        if (this.isCurrentLoad(requestId)) {
+          this.autoClose();
+        }
+      });
+  };
+
+  private isCurrentLoad(requestId: number): boolean {
+    return !this.isUnmounted && requestId === this.loadRequestId;
+  }
+
+  private autoClose = (): void => {
+    if (this.isUnmounted) {
+      return;
+    }
+
+    if (this.props.autoClose) {
+      this.props.autoClose();
+      return;
+    }
+
+    this.props.stateService.params.allowModalToStayOpen = true;
+    this.props.stateService.go('^', null, { location: 'replace' });
+  };
+
+  private closeDetails = (): void => {
+    this.props.stateService.go('^');
+  };
+
+  public render(): JSX.Element {
+    const { app } = this.props;
+    const { loading, manifest, securityGroup } = this.state;
+
+    if (loading || !manifest || !securityGroup) {
+      return (
+        <div className="details-panel">
+          <div className="header">
+            <div className="close-button">
+              <a className="btn btn-link" onClick={this.closeDetails}>
+                <span className="glyphicon glyphicon-remove" />
+              </a>
+            </div>
+            <h4 className="text-center">Loading...</h4>
+          </div>
+        </div>
+      );
+    }
+
+    const manifestBody = manifest.manifest;
+
+    return (
+      <div className="details-panel">
+        <div className="header">
+          <div className="close-button">
+            <a className="btn btn-link" onClick={this.closeDetails}>
+              <span className="glyphicon glyphicon-remove" />
+            </a>
+          </div>
+          <div className="header-text horizontal middle">
+            <CloudProviderLogo provider="kubernetes" height="36px" width="36px" />
+            <h3 className="horizontal middle space-between flex-1">
+              {securityGroup.displayName}
+              {SETTINGS.feature.entityTags && (
+                <EntityNotifications
+                  entity={securityGroup}
+                  application={app}
+                  placement="bottom"
+                  hOffsetPercent="90%"
+                  entityType="securityGroup"
+                  pageLocation="details"
+                  onUpdate={() => app.securityGroups.refresh()}
+                />
+              )}
+            </h3>
+          </div>
+          <div className="actions">
+            <KubernetesSecurityGroupActions app={app} manifest={manifest} securityGroup={securityGroup} />
+          </div>
+        </div>
+
+        <div className="content">
+          <CollapsibleSection heading="Information" defaultExpanded={true}>
+            <dl className="dl-horizontal dl-narrow">
+              <dt>Created</dt>
+              <dd>{timestamp(securityGroup.createdTime)}</dd>
+              <dt>Account</dt>
+              <dd>
+                <AccountTag account={securityGroup.account} />
+              </dd>
+              <dt>Namespace</dt>
+              <dd>{securityGroup.namespace}</dd>
+              <dt>Kind</dt>
+              <dd>{securityGroup.kind}</dd>
+            </dl>
+          </CollapsibleSection>
+
+          <AnnotationCustomSections manifest={manifestBody} resource={securityGroup} />
+
+          <CollapsibleSection heading="Labels" defaultExpanded={true}>
+            <ManifestLabels manifest={manifestBody} />
+          </CollapsibleSection>
+        </div>
+      </div>
+    );
+  }
+}
+
+export const KubernetesSecurityGroupDetails = withRouter(KubernetesSecurityGroupDetailsComponent);
+
+export function KubernetesSecurityGroupActions({ app, manifest, securityGroup }: IKubernetesSecurityGroupActionsProps) {
+  const deleteModal = useModal();
+  const showEntityTags = SETTINGS.feature && SETTINGS.feature.entityTags;
+
+  if (!SETTINGS.kubernetesAdHocInfraWritesEnabled) {
+    return null;
+  }
+
+  const editSecurityGroup = (): void => {
+    KubernetesManifestCommandBuilder.buildNewManifestCommand(
+      app,
+      manifest.manifest,
+      securityGroup.moniker,
+      securityGroup.account,
+    ).then((builtCommand) => {
+      ManifestWizard.show({ title: 'Edit Manifest', application: app, command: builtCommand });
+    });
+  };
+
+  return (
+    <>
+      <Dropdown className="dropdown" id="security-group-actions-dropdown">
+        <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">
+          {robotToHuman(securityGroup.kind)} Actions
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <MenuItem onClick={deleteModal.show}>Delete {FirewallLabels.get('Firewall')}</MenuItem>
+          <MenuItem onClick={editSecurityGroup}>Edit {FirewallLabels.get('Firewall')}</MenuItem>
+          {showEntityTags && (
+            <AddEntityTagLinks
+              component={securityGroup}
+              application={app}
+              entityType="securityGroup"
+              onUpdate={() => app.securityGroups.refresh()}
+            />
+          )}
+        </Dropdown.Menu>
+      </Dropdown>
+      <DeleteModal
+        application={app}
+        resource={securityGroup}
+        manifestController={undefined}
+        isOpen={deleteModal.open}
+        dismissModal={deleteModal.close}
+      />
+    </>
+  );
+}

package/src/securityGroup/index.ts

@@ -1 +1,3 @@
-export * from './details/details.controller';
+export * from './details/KubernetesSecurityGroupDetails';
+export * from './securityGroup.reader';
+export * from './transformer';

package/src/securityGroup/transformer.ts

@@ -1,15 +1,7 @@
-import { module } from 'angular';
-
 import type { ISecurityGroup } from '@spinnaker/core';
 
-class KubernetesV2SecurityGroupTransformer {
-  public normalizeSecurityGroup(securityGroup: ISecurityGroup): PromiseLike<ISecurityGroup> {
+export class KubernetesV2SecurityGroupTransformer {
+  public normalizeSecurityGroup(securityGroup: ISecurityGroup): Promise<ISecurityGroup> {
     return Promise.resolve(securityGroup);
   }
 }
-
-export const KUBERNETES_SECURITY_GROUP_TRANSFORMER = 'spinnaker.kubernetes.securityGroupTransformer';
-module(KUBERNETES_SECURITY_GROUP_TRANSFORMER, []).service(
-  'kubernetesV2SecurityGroupTransformer',
-  KubernetesV2SecurityGroupTransformer,
-);