@spinnaker/kubernetes 2026.2.2 → 2026.3.0

package/src/instance/details/KubernetesInstanceDetails.tsx

@@ -0,0 +1,342 @@
+import React from 'react';
+import { Dropdown, MenuItem } from 'react-bootstrap';
+
+import type { Application, IManifest, IMoniker, IRouterInjectedProps } from '@spinnaker/core';
+import {
+  AccountTag,
+  CollapsibleSection,
+  ConsoleOutputLink,
+  InstanceDetailsHeader,
+  InstanceLinks,
+  InstanceReader,
+  ManifestReader,
+  RecentHistoryService,
+  robotToHuman,
+  SETTINGS,
+  timestamp,
+  useModal,
+  withRouter,
+} from '@spinnaker/core';
+
+import type { IKubernetesInstance } from '../../interfaces';
+import { findKubernetesInstanceIdentifier } from './kubernetesInstanceDetails.utils';
+import { AnnotationCustomSections } from '../../manifest/AnnotationCustomSections';
+import { ManifestLabels } from '../../manifest/ManifestLabels';
+import { ManifestQos } from '../../manifest/ManifestQos';
+import { ManifestResources } from '../../manifest/ManifestResources';
+import { DeleteModal } from '../../manifest/delete/DeleteModal';
+import { KubernetesManifestCommandBuilder } from '../../manifest/manifestCommandBuilder.service';
+import { ManifestCondition } from '../../manifest/status/ManifestCondition';
+import { ManifestWizard } from '../../manifest/wizard/ManifestWizard';
+import { ManifestEvents } from '../../pipelines/stages/deployManifest/manifestStatus/ManifestEvents';
+
+interface IInstanceFromStateParams {
+  instanceId: string;
+}
+
+export interface IKubernetesInstanceDetailsProps {
+  $stateParams?: {
+    instanceId?: string;
+  };
+  app: Application;
+  autoClose?: () => void;
+  environment?: string;
+  instance?: IInstanceFromStateParams;
+  moniker?: IMoniker;
+}
+
+interface IConsoleOutputInstance {
+  account: string;
+  region: string;
+  id: string;
+  provider: string;
+}
+
+interface IKubernetesInstanceDetailsState {
+  instance?: IKubernetesInstance;
+  loading: boolean;
+  manifest?: IKubernetesInstanceManifest;
+}
+
+interface IKubernetesInstanceManifest extends IManifest {
+  metrics?: any;
+}
+
+export interface IKubernetesInstanceActionsProps {
+  app: Application;
+  instance: IKubernetesInstance;
+  manifest: IManifest;
+}
+
+export class KubernetesInstanceDetailsComponent extends React.Component<
+  IKubernetesInstanceDetailsProps & IRouterInjectedProps,
+  IKubernetesInstanceDetailsState
+> {
+  protected readonly renderActions: boolean = true;
+  protected readonly instanceLinksPlacement: 'afterInformation' | 'afterSections' = 'afterSections';
+
+  public state: IKubernetesInstanceDetailsState = {
+    loading: true,
+  };
+
+  private isUnmounted = false;
+  private appReady = false;
+  private loadRequestId = 0;
+  private unsubscribeFromRefresh: () => void;
+
+  public componentDidMount(): void {
+    this.props.app
+      .ready()
+      .then(() => {
+        if (this.isUnmounted) {
+          return;
+        }
+
+        this.appReady = true;
+        this.loadInstance();
+        this.unsubscribeFromRefresh = this.props.app.onRefresh(this.loadInstance);
+      })
+      .catch(this.autoClose);
+  }
+
+  public componentDidUpdate(prevProps: IKubernetesInstanceDetailsProps): void {
+    if (this.appReady && this.getInstanceId(prevProps) !== this.getInstanceId(this.props)) {
+      this.loadInstance();
+    }
+  }
+
+  public componentWillUnmount(): void {
+    this.isUnmounted = true;
+    if (this.unsubscribeFromRefresh) {
+      this.unsubscribeFromRefresh();
+    }
+  }
+
+  private getInstanceId = (props: IKubernetesInstanceDetailsProps): string =>
+    props.instance?.instanceId || props.$stateParams?.instanceId;
+
+  private loadInstance = (): void => {
+    const { app } = this.props;
+    const instanceId = this.getInstanceId(this.props);
+    const requestId = ++this.loadRequestId;
+    const identifier = findKubernetesInstanceIdentifier(app, instanceId, (extraData) =>
+      RecentHistoryService.addExtraDataToLatest('instances', extraData),
+    );
+
+    if (!identifier) {
+      this.autoClose();
+      return;
+    }
+
+    this.setState({ loading: true });
+
+    Promise.all([
+      InstanceReader.getInstanceDetails(identifier.account, identifier.namespace, identifier.name).then(
+        (instanceDetails: IKubernetesInstance) => ({
+          ...instanceDetails,
+          id: identifier.id,
+          name: identifier.name,
+          provider: 'kubernetes',
+        }),
+      ),
+      ManifestReader.getManifest(identifier.account, identifier.namespace, identifier.name).then(
+        (manifest) => manifest as IKubernetesInstanceManifest,
+      ),
+    ])
+      .then(([instance, manifest]) => {
+        if (this.isCurrentLoad(requestId)) {
+          this.setState({ instance, manifest, loading: false });
+        }
+      })
+      .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 buildConsoleOutputInstance(instance: IKubernetesInstance): IConsoleOutputInstance {
+    return {
+      account: instance.account,
+      region: instance.zone || instance.namespace,
+      id: instance.humanReadableName || instance.name,
+      provider: instance.provider || instance.cloudProvider || 'kubernetes',
+    };
+  }
+
+  public render(): JSX.Element {
+    const { app } = this.props;
+    const { instance, loading, manifest } = this.state;
+
+    if (loading || !instance || !manifest) {
+      return (
+        <div className="details-panel">
+          <div className="header">
+            <InstanceDetailsHeader
+              cloudProvider="kubernetes"
+              healthState=""
+              instanceId={this.getInstanceId(this.props)}
+              loading={true}
+              standalone={app.isStandalone}
+            />
+          </div>
+        </div>
+      );
+    }
+
+    const manifestBody = manifest.manifest;
+    const statusConditions = manifestBody?.status?.conditions || [];
+
+    return (
+      <div className="details-panel">
+        <div className="header">
+          <InstanceDetailsHeader
+            cloudProvider={instance.cloudProvider || instance.provider || 'kubernetes'}
+            healthState={instance.healthState}
+            instanceId={instance.displayName || instance.humanReadableName || instance.name}
+            loading={false}
+            standalone={app.isStandalone}
+          />
+          {this.renderActions && (
+            <div className="actions">
+              <KubernetesInstanceActions app={app} instance={instance} manifest={manifest} />
+            </div>
+          )}
+        </div>
+
+        <div className="content">
+          {this.renderInformationSection(instance, manifest)}
+          {this.renderInstanceLinks('afterInformation', instance)}
+          <CollapsibleSection heading="Status" defaultExpanded={true}>
+            {statusConditions.map((condition: any, index: number) => (
+              <ul key={`${condition.type || 'condition'}-${index}`}>
+                <ManifestCondition condition={condition} />
+              </ul>
+            ))}
+          </CollapsibleSection>
+          <AnnotationCustomSections manifest={manifestBody} resource={instance} />
+          <CollapsibleSection heading="Events" defaultExpanded={true}>
+            <ManifestEvents manifest={manifest} />
+          </CollapsibleSection>
+          <CollapsibleSection heading="Resources" defaultExpanded={true}>
+            <ManifestResources manifest={manifestBody} metrics={manifest.metrics as any} />
+          </CollapsibleSection>
+          <CollapsibleSection heading="Labels" defaultExpanded={true}>
+            <ManifestLabels manifest={manifestBody} />
+          </CollapsibleSection>
+          {this.renderInstanceLinks('afterSections', instance)}
+        </div>
+      </div>
+    );
+  }
+
+  private renderInstanceLinks(
+    placement: 'afterInformation' | 'afterSections',
+    instance: IKubernetesInstance,
+  ): JSX.Element | null {
+    const { app, environment } = this.props;
+
+    if (this.instanceLinksPlacement !== placement) {
+      return null;
+    }
+
+    return (
+      <InstanceLinks
+        address={instance.publicDnsName}
+        application={app}
+        instance={instance}
+        moniker={instance.moniker}
+        environment={environment}
+      />
+    );
+  }
+
+  private renderInformationSection(instance: IKubernetesInstance, manifest: IManifest): JSX.Element {
+    const manifestBody = manifest.manifest;
+
+    return (
+      <CollapsibleSection heading="Information" defaultExpanded={true}>
+        <dl className="dl-horizontal dl-narrow">
+          <dt>Created</dt>
+          <dd>{timestamp(instance.createdTime)}</dd>
+          <dt>Account</dt>
+          <dd>
+            <AccountTag account={instance.account} />
+          </dd>
+          <dt>Namespace</dt>
+          <dd>{instance.namespace}</dd>
+          <dt>Kind</dt>
+          <dd>{instance.kind}</dd>
+          <dt>QOS Class</dt>
+          <dd>
+            <ManifestQos manifest={manifestBody} />
+          </dd>
+          <dt>Logs</dt>
+          <dd>
+            <ConsoleOutputLink instance={this.buildConsoleOutputInstance(instance) as any} usesMultiOutput={true} />
+          </dd>
+        </dl>
+      </CollapsibleSection>
+    );
+  }
+}
+
+export const KubernetesInstanceDetails = withRouter(KubernetesInstanceDetailsComponent);
+
+export function KubernetesInstanceActions({ app, instance, manifest }: IKubernetesInstanceActionsProps) {
+  const deleteModal = useModal();
+
+  if (!SETTINGS.kubernetesAdHocInfraWritesEnabled) {
+    return null;
+  }
+
+  const editInstance = (): void => {
+    KubernetesManifestCommandBuilder.buildNewManifestCommand(
+      app,
+      manifest.manifest,
+      instance.moniker,
+      instance.account,
+    ).then((builtCommand) => {
+      ManifestWizard.show({ title: 'Edit Manifest', application: app, command: builtCommand });
+    });
+  };
+
+  return (
+    <>
+      <Dropdown className="dropdown" id="instance-actions-dropdown">
+        <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">
+          {robotToHuman(instance.kind)} Actions
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <MenuItem onClick={deleteModal.show}>Delete</MenuItem>
+          <MenuItem onClick={editInstance}>Edit</MenuItem>
+        </Dropdown.Menu>
+      </Dropdown>
+      <DeleteModal
+        application={app}
+        resource={instance}
+        manifestController={undefined}
+        isOpen={deleteModal.open}
+        dismissModal={deleteModal.close}
+      />
+    </>
+  );
+}

package/src/instance/details/kubernetesInstanceDetails.utils.ts

@@ -0,0 +1,77 @@
+import { flattenDeep } from 'lodash';
+
+import type { Application, ILoadBalancer } from '@spinnaker/core';
+
+import type { IKubernetesInstance } from '../../interfaces';
+
+export interface IKubernetesInstanceIdentifier {
+  account: string;
+  id: string;
+  name: string;
+  namespace: string;
+}
+
+export interface IKubernetesInstanceRecentHistoryData {
+  account: string;
+  region: string;
+  serverGroup?: string;
+}
+
+interface InstanceManager {
+  account: string;
+  region: string;
+  category: string;
+  name: string;
+  instances?: IKubernetesInstance[];
+}
+
+export function findKubernetesInstanceIdentifier(
+  app: Application,
+  instanceId: string,
+  addRecentHistoryData: (extraData: IKubernetesInstanceRecentHistoryData) => void = () => null,
+): IKubernetesInstanceIdentifier | null {
+  const instanceManager = getInstanceManagers(app).find((dataSource) =>
+    (dataSource.instances || []).some((possibleMatch) => possibleMatch.id === instanceId),
+  );
+
+  if (!instanceManager) {
+    return null;
+  }
+
+  const instance = (instanceManager.instances || []).find((possibleMatch) => possibleMatch.id === instanceId);
+  if (!instance) {
+    return null;
+  }
+
+  const recentHistoryExtraData: IKubernetesInstanceRecentHistoryData = {
+    region: instanceManager.region,
+    account: instanceManager.account,
+  };
+
+  if (instanceManager.category === 'serverGroup') {
+    recentHistoryExtraData.serverGroup = instanceManager.name;
+  }
+
+  addRecentHistoryData(recentHistoryExtraData);
+
+  return {
+    id: instance.id,
+    name: instance.name,
+    namespace: instanceManager.region,
+    account: instanceManager.account,
+  };
+}
+
+function getInstanceManagers(app: Application): InstanceManager[] {
+  const loadBalancers = getDataSourceData<ILoadBalancer>(app, 'loadBalancers');
+
+  return flattenDeep([
+    getDataSourceData<InstanceManager>(app, 'serverGroups'),
+    loadBalancers,
+    loadBalancers.map((loadBalancer) => loadBalancer.serverGroups || []),
+  ]).filter(Boolean) as InstanceManager[];
+}
+
+function getDataSourceData<T>(app: Application, key: string): T[] {
+  return (app.getDataSource(key)?.data || []) as T[];
+}

package/src/instance/index.ts

@@ -1 +1 @@
-export * from './details/details.controller';
+export * from './details/KubernetesInstanceDetails';

package/src/kubernetes.module.spec.ts

@@ -0,0 +1,25 @@
+import { CloudProviderRegistry } from '@spinnaker/core';
+
+import { KubernetesInstanceDetails } from './instance';
+import { registerKubernetesProvider } from './kubernetes.module';
+import { ManifestWizard } from './manifest/wizard/ManifestWizard';
+import { KubernetesSecurityGroupDetails, KubernetesV2SecurityGroupTransformer } from './securityGroup';
+
+describe('Kubernetes provider registration', () => {
+  it('registers the provider configuration', () => {
+    registerKubernetesProvider();
+
+    expect(CloudProviderRegistry.getValue('kubernetes', 'instance.details').displayName).toBe(
+      KubernetesInstanceDetails.displayName,
+    );
+    expect(CloudProviderRegistry.getValue('kubernetes', 'securityGroup.CreateSecurityGroupModal')).toBe(ManifestWizard);
+    expect(CloudProviderRegistry.getValue('kubernetes', 'securityGroup.details').displayName).toBe(
+      KubernetesSecurityGroupDetails.displayName,
+    );
+    expect(CloudProviderRegistry.getValue('kubernetes', 'securityGroup.transformer')).toBe(
+      KubernetesV2SecurityGroupTransformer,
+    );
+    expect(CloudProviderRegistry.getValue('kubernetes', 'instance.detailsController')).toBeNull();
+    expect(CloudProviderRegistry.getValue('kubernetes', 'securityGroup.detailsController')).toBeNull();
+  });
+});

package/src/kubernetes.module.ts

@@ -1,14 +1,7 @@
-import { module } from 'angular';
-
-import {
-  CloudProviderRegistry,
-  SETTINGS,
-  STAGE_ARTIFACT_SELECTOR_COMPONENT_REACT,
-  YAML_EDITOR_COMPONENT,
-} from '@spinnaker/core';
+import { CloudProviderRegistry, SETTINGS } from '@spinnaker/core';
 
 import './help/kubernetes.help';
-import { KUBERNETES_INSTANCE_DETAILS_CTRL } from './instance/details/details.controller';
+import { KubernetesInstanceDetails } from './instance';
 import {
   KubernetesLoadBalancerActions,
   KubernetesLoadBalancerTransformer,
@@ -20,39 +13,18 @@ import {
   useKubernetesLoadBalancerDetails,
 } from './loadBalancer';
 import kubernetesLogo from './logo/kubernetes.logo.svg';
-import { KUBERNETES_ANNOTATION_CUSTOM_SECTIONS } from './manifest/annotationCustomSections.component';
-import { KUBERNETES_DELETE } from './manifest/delete/Delete';
-import { KUBERNETES_MANIFEST_DELETE_CTRL } from './manifest/delete/delete.controller';
-import { JSON_EDITOR_COMPONENT } from './manifest/editor/json/jsonEditor.component';
-import { KUBERNETES_MANIFEST_EVENTS } from './manifest/manifestEvents.component';
-import { KUBERNETES_MANIFEST_IMAGE_DETAILS } from './manifest/manifestImageDetails.component';
-import { KUBERNETES_MANIFEST_LABELS } from './manifest/manifestLabels.component';
-import { KUBERNETES_MANIFEST_QOS } from './manifest/manifestQos.component';
-import { KUBERNETES_MANIFEST_RESOURCES } from './manifest/manifestResources.component';
-import { KUBERNETES_PAUSE_ROLLOUT } from './manifest/rollout/PauseRollout';
-import { KUBERNETES_RESUME_ROLLOUT } from './manifest/rollout/ResumeRollout';
-import { KUBERNETES_UNDO_ROLLOUT } from './manifest/rollout/UndoRollout';
-import { KUBERNETES_MANIFEST_PAUSE_ROLLOUT_CTRL } from './manifest/rollout/pause.controller';
-import { KUBERNETES_MANIFEST_RESUME_ROLLOUT_CTRL } from './manifest/rollout/resume.controller';
-import { KUBERNETES_MANIFEST_UNDO_ROLLOUT_CTRL } from './manifest/rollout/undo.controller';
-import { KUBERNETES_SCALE } from './manifest/scale/Scale';
-import { KUBERNETES_MANIFEST_SCALE_CTRL } from './manifest/scale/scale.controller';
-import { KUBERNETES_MANIFEST_SELECTOR } from './manifest/selector/selector.component';
-import { KUBERNETES_MANIFEST_CONDITION } from './manifest/status/condition.component';
-import { KUBERNETES_MANIFEST_STATUS } from './manifest/status/status.component';
 import { ManifestWizard } from './manifest/wizard/ManifestWizard';
 import './pipelines/stages';
-import { KUBERNETES_DISABLE_MANIFEST_STAGE } from './pipelines/stages/traffic/disableManifest.stage';
-import { KUBERNETES_ENABLE_MANIFEST_STAGE } from './pipelines/stages/traffic/enableManifest.stage';
+import './pipelines/stages/traffic/disableManifest.stage';
+import './pipelines/stages/traffic/enableManifest.stage';
 import './pipelines/validation/manifestSelector.validator';
-import { KUBERNETS_RAW_RESOURCE_MODULE } from './rawResource';
-import { KUBERNETES_REACT_MODULE } from './reactShims/kubernetes.react.module';
-import { KUBERNETES_RESOURCE_STATES } from './resources/resources.state';
-import { KUBERNETES_SECURITY_GROUP_DETAILS_CTRL } from './securityGroup/details/details.controller';
-import { KubernetesSecurityGroupReader } from './securityGroup/securityGroup.reader';
-import { KUBERNETES_SECURITY_GROUP_TRANSFORMER } from './securityGroup/transformer';
-import { KubernetesServerGroupActions } from './serverGroup/details/KubernetesServerGroupActions';
-import { kubernetesServerGroupDetailsGetter } from './serverGroup/details/kubernetesServerGroupDetailsGetter';
+import './rawResource';
+import './resources/resources.state';
+import {
+  KubernetesSecurityGroupDetails,
+  KubernetesSecurityGroupReader,
+  KubernetesV2SecurityGroupTransformer,
+} from './securityGroup';
 import {
   ServerGroupAnnotationCustomSection,
   ServerGroupEventsSection,
@@ -62,53 +34,17 @@ import {
   ServerGroupLabelsSection,
   ServerGroupManifestStatusSection,
   ServerGroupSizeSection,
-} from './serverGroup/details/sections';
-import { KubernetesV2ServerGroupCommandBuilder } from './serverGroup/serverGroupCommandBuilder';
-import { KubernetesV2ServerGroupTransformer } from './serverGroup/serverGroupTransformer';
+} from './serverGroup';
+import { KubernetesV2ServerGroupCommandBuilder } from './serverGroup';
+import { KubernetesV2ServerGroupTransformer } from './serverGroup';
+import { KubernetesServerGroupActions } from './serverGroup/details/KubernetesServerGroupActions';
+import { kubernetesServerGroupDetailsGetter } from './serverGroup/details/kubernetesServerGroupDetailsGetter';
 import { ServerGroupManagerDetails } from './serverGroupManager/details/ServerGroupManagerDetails';
 import './validation/applicationName.validator';
 
 import './logo/kubernetes.logo.less';
 
-export const KUBERNETES_MODULE = 'spinnaker.kubernetes';
-
-const requires = [
-  KUBERNETES_DELETE,
-  KUBERNETES_PAUSE_ROLLOUT,
-  KUBERNETES_RESUME_ROLLOUT,
-  KUBERNETES_UNDO_ROLLOUT,
-  KUBERNETES_SCALE,
-  KUBERNETES_REACT_MODULE,
-  KUBERNETES_INSTANCE_DETAILS_CTRL,
-  KUBERNETES_SECURITY_GROUP_DETAILS_CTRL,
-  KUBERNETES_MANIFEST_DELETE_CTRL,
-  KUBERNETES_MANIFEST_SCALE_CTRL,
-  KUBERNETES_MANIFEST_UNDO_ROLLOUT_CTRL,
-  KUBERNETES_MANIFEST_PAUSE_ROLLOUT_CTRL,
-  KUBERNETES_MANIFEST_RESUME_ROLLOUT_CTRL,
-  KUBERNETES_MANIFEST_STATUS,
-  KUBERNETES_MANIFEST_CONDITION,
-  KUBERNETES_SECURITY_GROUP_TRANSFORMER,
-  KUBERNETES_MANIFEST_SELECTOR,
-  KUBERNETES_MANIFEST_LABELS,
-  KUBERNETES_MANIFEST_EVENTS,
-  KUBERNETES_MANIFEST_RESOURCES,
-  KUBERNETES_MANIFEST_QOS,
-  KUBERNETES_ANNOTATION_CUSTOM_SECTIONS,
-  KUBERNETES_MANIFEST_IMAGE_DETAILS,
-  KUBERNETES_RESOURCE_STATES,
-  YAML_EDITOR_COMPONENT,
-  JSON_EDITOR_COMPONENT,
-  KUBERNETES_ENABLE_MANIFEST_STAGE,
-  KUBERNETES_DISABLE_MANIFEST_STAGE,
-  STAGE_ARTIFACT_SELECTOR_COMPONENT_REACT,
-];
-
-if (SETTINGS.feature.kubernetesRawResources) {
-  requires.push(KUBERNETS_RAW_RESOURCE_MODULE);
-}
-
-module(KUBERNETES_MODULE, requires).config(() => {
+export function registerKubernetesProvider(): void {
   CloudProviderRegistry.registerProvider('kubernetes', {
     name: 'Kubernetes',
     adHocInfrastructureWritesEnabled: SETTINGS.kubernetesAdHocInfraWritesEnabled,
@@ -151,13 +87,11 @@ module(KUBERNETES_MODULE, requires).config(() => {
     securityGroup: {
       reader: KubernetesSecurityGroupReader,
       CreateSecurityGroupModal: ManifestWizard,
-      detailsController: 'kubernetesV2SecurityGroupDetailsCtrl',
-      detailsTemplateUrl: require('./securityGroup/details/details.html'),
-      transformer: 'kubernetesV2SecurityGroupTransformer',
+      details: KubernetesSecurityGroupDetails,
+      transformer: KubernetesV2SecurityGroupTransformer,
     },
     instance: {
-      detailsController: 'kubernetesV2InstanceDetailsCtrl',
-      detailsTemplateUrl: require('./instance/details/details.html'),
+      details: KubernetesInstanceDetails,
     },
     unsupportedStageTypes: [
       'deploy',
@@ -175,4 +109,6 @@ module(KUBERNETES_MODULE, requires).config(() => {
       'upsertLoadBalancers',
     ],
   });
-});
+}
+
+registerKubernetesProvider();

package/src/loadBalancer/details/KubernetesLoadBalancerActions.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { Dropdown, MenuItem } from 'react-bootstrap';
 
 import type { ILoadBalancerActionsProps } from '@spinnaker/core';
-import { AddEntityTagLinks, ModalInjector, robotToHuman, SETTINGS } from '@spinnaker/core';
+import { AddEntityTagLinks, robotToHuman, SETTINGS, useModal } from '@spinnaker/core';
 
 import type { IKubernetesLoadBalancerView } from '../../interfaces';
 import { KubernetesManifestCommandBuilder } from '../../manifest';
+import { DeleteModal } from '../../manifest/delete/DeleteModal';
 import { ManifestWizard } from '../../manifest/wizard/ManifestWizard';
 
 export interface IKubernetesLoadBalancerActionsProps extends ILoadBalancerActionsProps {
@@ -16,22 +17,7 @@ export function KubernetesLoadBalancerActions({ app, loadBalancer }: IKubernetes
   const showEntityTags = SETTINGS.feature && SETTINGS.feature.entityTags;
   const isEnabled = SETTINGS.kubernetesAdHocInfraWritesEnabled;
   const { manifest } = loadBalancer;
-
-  const deleteLoadBalancer = (): void => {
-    ModalInjector.modalService.open({
-      templateUrl: require('../../manifest/delete/delete.html'),
-      controller: 'kubernetesV2ManifestDeleteCtrl as ctrl',
-      resolve: {
-        coordinates: {
-          name: loadBalancer.name,
-          namespace: loadBalancer.namespace,
-          account: loadBalancer.account,
-        },
-        application: app,
-        manifestController: (): string => null,
-      },
-    });
-  };
+  const deleteModal = useModal();
 
   const editLoadBalancer = (): void => {
     KubernetesManifestCommandBuilder.buildNewManifestCommand(
@@ -45,24 +31,33 @@ export function KubernetesLoadBalancerActions({ app, loadBalancer }: IKubernetes
   };
 
   return (
-    <Dropdown className="dropdown" id="load-balancer-actions-dropdown">
-      {isEnabled && (
-        <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">
-          {robotToHuman(loadBalancer.kind)} Actions
-        </Dropdown.Toggle>
-      )}
-      <Dropdown.Menu>
-        <MenuItem onClick={deleteLoadBalancer}>Delete</MenuItem>
-        <MenuItem onClick={editLoadBalancer}>Edit</MenuItem>
-        {showEntityTags && (
-          <AddEntityTagLinks
-            component={loadBalancer}
-            application={app}
-            entityType="loadBalancer"
-            onUpdate={() => app.loadBalancers.refresh()}
-          />
+    <>
+      <Dropdown className="dropdown" id="load-balancer-actions-dropdown">
+        {isEnabled && (
+          <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">
+            {robotToHuman(loadBalancer.kind)} Actions
+          </Dropdown.Toggle>
         )}
-      </Dropdown.Menu>
-    </Dropdown>
+        <Dropdown.Menu>
+          <MenuItem onClick={deleteModal.show}>Delete</MenuItem>
+          <MenuItem onClick={editLoadBalancer}>Edit</MenuItem>
+          {showEntityTags && (
+            <AddEntityTagLinks
+              component={loadBalancer}
+              application={app}
+              entityType="loadBalancer"
+              onUpdate={() => app.loadBalancers.refresh()}
+            />
+          )}
+        </Dropdown.Menu>
+      </Dropdown>
+      <DeleteModal
+        application={app}
+        resource={loadBalancer}
+        manifestController={null}
+        isOpen={deleteModal.open}
+        dismissModal={deleteModal.close}
+      />
+    </>
   );
 }