@spinnaker/kubernetes 2026.2.3 → 2026.3.0

package/src/serverGroup/details/KubernetesServerGroupActions.tsx

@@ -2,17 +2,14 @@ import React from 'react';
 import { Dropdown, MenuItem } from 'react-bootstrap';
 
 import type { IOwnerOption, IServerGroupActionsProps } from '@spinnaker/core';
-import {
-  AddEntityTagLinks,
-  ClusterTargetBuilder,
-  ConfirmationModalService,
-  ModalInjector,
-  robotToHuman,
-  SETTINGS,
-} from '@spinnaker/core';
+import { ConfirmationModalService } from '@spinnaker/core';
+import { AddEntityTagLinks, ClusterTargetBuilder, robotToHuman, SETTINGS } from '@spinnaker/core';
 
 import type { IKubernetesServerGroupView } from '../../interfaces';
 import { KubernetesManifestCommandBuilder } from '../../manifest';
+import { Delete } from '../../manifest/delete/Delete';
+import { RollingRestart } from '../../manifest/rollout/RollingRestart';
+import { Scale } from '../../manifest/scale/Scale';
 import { ManifestTrafficService } from '../../manifest/traffic/ManifestTrafficService';
 import { ManifestWizard } from '../../manifest/wizard/ManifestWizard';
 import { useManifest } from './useManifest';
@@ -31,22 +28,6 @@ export function KubernetesServerGroupActions({ app, serverGroup }: IKubernetesSe
     return serverGroup.kind !== 'daemonSet' && manifestController === null;
   };
 
-  const scaleServerGroup = () => {
-    ModalInjector.modalService.open({
-      templateUrl: require('../../manifest/scale/scale.html'),
-      controller: 'kubernetesV2ManifestScaleCtrl as ctrl',
-      resolve: {
-        coordinates: {
-          name: serverGroup.name,
-          namespace: serverGroup.namespace,
-          account: serverGroup.account,
-        },
-        currentReplicas: manifest.manifest.spec.replicas,
-        application: app,
-      },
-    });
-  };
-
   const canEditServerGroup = (): boolean => {
     return manifestController === null;
   };
@@ -62,22 +43,6 @@ export function KubernetesServerGroupActions({ app, serverGroup }: IKubernetesSe
     });
   };
 
-  const deleteServerGroup = () => {
-    ModalInjector.modalService.open({
-      templateUrl: require('../../manifest/delete/delete.html'),
-      controller: 'kubernetesV2ManifestDeleteCtrl as ctrl',
-      resolve: {
-        coordinates: {
-          name: serverGroup.name,
-          namespace: serverGroup.namespace,
-          account: serverGroup.account,
-        },
-        manifestController: () => manifestController,
-        application: app,
-      },
-    });
-  };
-
   const canDisable = () => ManifestTrafficService.canDisableServerGroup(serverGroup);
 
   const disableServerGroup = (): void => {
@@ -113,26 +78,31 @@ export function KubernetesServerGroupActions({ app, serverGroup }: IKubernetesSe
   };
 
   return (
-    <Dropdown className="dropdown" id="server-group-actions-dropdown">
-      <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">
-        {robotToHuman(serverGroup.kind)} Actions
-      </Dropdown.Toggle>
-      <Dropdown.Menu>
-        {canEditServerGroup() && <MenuItem onClick={editServerGroup}>Edit</MenuItem>}
-        {canScaleServerGroup() && <MenuItem onClick={scaleServerGroup}>Scale</MenuItem>}
-        {canEnable() && <MenuItem onClick={enableServerGroup}>Enable</MenuItem>}
-        {canDisable() && <MenuItem onClick={disableServerGroup}>Disable</MenuItem>}
-        <MenuItem onClick={deleteServerGroup}>Delete</MenuItem>
-        {showEntityTags && (
-          <AddEntityTagLinks
-            component={serverGroup}
-            application={app}
-            entityType="serverGroup"
-            ownerOptions={entityTagTargets}
-            onUpdate={() => app.serverGroups.refresh()}
-          />
-        )}
-      </Dropdown.Menu>
-    </Dropdown>
+    <>
+      <Dropdown className="dropdown" id="server-group-actions-dropdown">
+        <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">
+          {robotToHuman(serverGroup.kind)} Actions
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          {canEditServerGroup() && <MenuItem onClick={editServerGroup}>Edit</MenuItem>}
+          {canScaleServerGroup() && (
+            <Scale application={app} resource={serverGroup} currentReplicas={manifest.manifest.spec.replicas} />
+          )}
+          {canEnable() && <MenuItem onClick={enableServerGroup}>Enable</MenuItem>}
+          {canDisable() && <MenuItem onClick={disableServerGroup}>Disable</MenuItem>}
+          <Delete application={app} resource={serverGroup} manifestController={manifestController} />
+          {!manifest.status.paused.state && <RollingRestart application={app} serverGroup={serverGroup} />}
+          {showEntityTags && (
+            <AddEntityTagLinks
+              component={serverGroup}
+              application={app}
+              entityType="serverGroup"
+              ownerOptions={entityTagTargets}
+              onUpdate={() => app.serverGroups.refresh()}
+            />
+          )}
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
   );
 }

package/src/serverGroup/details/kubernetesServerGroupDetailsGetter.ts

@@ -5,7 +5,7 @@ import type { IManifest, IServerGroupDetailsProps } from '@spinnaker/core';
 import { ManifestReader, ServerGroupReader } from '@spinnaker/core';
 import type { IKubernetesLoadBalancer, IKubernetesServerGroup, IKubernetesServerGroupView } from '../../interfaces';
 
-function extractServerGroupSummary(props: IServerGroupDetailsProps): PromiseLike<IKubernetesServerGroup> {
+function extractServerGroupSummary(props: IServerGroupDetailsProps): Promise<IKubernetesServerGroup> {
   const { app, serverGroup } = props;
   return app.ready().then(() => {
     let summary: IKubernetesServerGroup = app.serverGroups.data.find((toCheck: IKubernetesServerGroup) => {

package/src/serverGroup/details/sections/ServerGroupAnnotationCustomSection.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
 import type { IKubernetesServerGroupDetailsSectionProps } from './IKubernetesServerGroupDetailsSectionProps';
-import { KubernetesReactInjector } from '../../../reactShims';
+import { AnnotationCustomSections } from '../../../manifest/AnnotationCustomSections';
 
 export function ServerGroupAnnotationCustomSection({ serverGroup }: IKubernetesServerGroupDetailsSectionProps) {
   const { manifest } = serverGroup;
-  const { KubernetesAnnotationCustomSections } = KubernetesReactInjector;
 
-  return <KubernetesAnnotationCustomSections manifest={manifest.manifest} resource={serverGroup} />;
+  return <AnnotationCustomSections manifest={manifest.manifest} resource={serverGroup} />;
 }

package/src/serverGroup/serverGroupCommandBuilder.ts

@@ -3,7 +3,7 @@ import type { IKubernetesManifestCommandData } from '../manifest/manifestCommand
 import { KubernetesManifestCommandBuilder } from '../manifest/manifestCommandBuilder.service';
 
 export class KubernetesV2ServerGroupCommandBuilder {
-  public buildNewServerGroupCommand(app: Application): PromiseLike<IKubernetesManifestCommandData> {
+  public buildNewServerGroupCommand(app: Application): Promise<IKubernetesManifestCommandData> {
     return KubernetesManifestCommandBuilder.buildNewManifestCommand(app);
   }
 }

package/src/serverGroup/serverGroupTransformer.ts

@@ -5,7 +5,7 @@ export class KubernetesV2ServerGroupTransformer {
   public normalizeServerGroup(
     serverGroup: IKubernetesServerGroup,
     application: Application,
-  ): PromiseLike<IKubernetesServerGroup> {
+  ): Promise<IKubernetesServerGroup> {
     return application
       .getDataSource('serverGroupManagers')
       .ready()

package/src/serverGroupManager/details/ServerGroupManagerActions.tsx

@@ -1,22 +1,19 @@
-import { orderBy } from 'lodash';
 import React from 'react';
 import { Dropdown, MenuItem } from 'react-bootstrap';
 
 import type { Application, IManifest } from '@spinnaker/core';
-import {
-  AddEntityTagLinks,
-  ClusterTargetBuilder,
-  IfFeatureEnabled,
-  ModalInjector,
-  NameUtils,
-  robotToHuman,
-  SETTINGS,
-} from '@spinnaker/core';
+import { AddEntityTagLinks, ClusterTargetBuilder, IfFeatureEnabled, robotToHuman, SETTINGS } from '@spinnaker/core';
 
 import type { IKubernetesServerGroupManager } from '../../interfaces';
 import { KubernetesManifestCommandBuilder } from '../../manifest';
+import { Delete } from '../../manifest/delete/Delete';
+import { PauseRollout } from '../../manifest/rollout/PauseRollout';
+import { ResumeRollout } from '../../manifest/rollout/ResumeRollout';
 import { RollingRestart } from '../../manifest/rollout/RollingRestart';
+import { UndoRollout } from '../../manifest/rollout/UndoRollout';
+import { Scale } from '../../manifest/scale/Scale';
 import { ManifestWizard } from '../../manifest/wizard/ManifestWizard';
+import { useManifest } from '../../serverGroup/details/useManifest';
 
 export interface IServerGroupManagerActionsProps {
   application: Application;
@@ -31,79 +28,12 @@ export function ServerGroupManagerActions({
 }: IServerGroupManagerActionsProps) {
   const isEnabled = SETTINGS.kubernetesAdHocInfraWritesEnabled;
   const entityTagTargets = ClusterTargetBuilder.buildManagerClusterTargets(serverGroupManager);
-
-  const pauseRolloutServerGroupManager = (): void => {
-    ModalInjector.modalService.open({
-      templateUrl: require('../../manifest/rollout/pause.html'),
-      controller: 'kubernetesV2ManifestPauseRolloutCtrl as ctrl',
-      resolve: {
-        coordinates: {
-          name: serverGroupManager.name,
-          namespace: serverGroupManager.namespace,
-          account: serverGroupManager.account,
-        },
-        application: application,
-      },
-    });
-  };
-
-  const resumeRolloutServerGroupManager = (): void => {
-    ModalInjector.modalService.open({
-      templateUrl: require('../../manifest/rollout/resume.html'),
-      controller: 'kubernetesV2ManifestResumeRolloutCtrl as ctrl',
-      resolve: {
-        coordinates: {
-          name: serverGroupManager.name,
-          namespace: serverGroupManager.namespace,
-          account: serverGroupManager.account,
-        },
-        application: application,
-      },
-    });
-  };
+  const { manifestController } = useManifest({ manifest });
 
   const canUndoRolloutServerGroupManager = (): boolean => {
     return serverGroupManager && serverGroupManager.serverGroups && serverGroupManager.serverGroups.length > 0;
   };
 
-  const undoRolloutServerGroupManager = (): void => {
-    ModalInjector.modalService.open({
-      templateUrl: require('../../manifest/rollout/undo.html'),
-      controller: 'kubernetesV2ManifestUndoRolloutCtrl as ctrl',
-      resolve: {
-        coordinates: {
-          name: serverGroupManager.name,
-          namespace: serverGroupManager.namespace,
-          account: serverGroupManager.account,
-        },
-        revisions: () => {
-          const [, ...rest] = orderBy(serverGroupManager.serverGroups, ['moniker.sequence'], ['desc']);
-          return rest.map((serverGroup, index) => ({
-            label: `${NameUtils.getSequence(serverGroup.moniker.sequence)}${index > 0 ? '' : ' - previous revision'}`,
-            revision: serverGroup.moniker.sequence,
-          }));
-        },
-        application: application,
-      },
-    });
-  };
-
-  const scaleServerGroupManager = () => {
-    ModalInjector.modalService.open({
-      templateUrl: require('../../manifest/scale/scale.html'),
-      controller: 'kubernetesV2ManifestScaleCtrl as ctrl',
-      resolve: {
-        coordinates: {
-          name: serverGroupManager.name,
-          namespace: serverGroupManager.namespace,
-          account: serverGroupManager.account,
-        },
-        currentReplicas: manifest.manifest.spec.replicas,
-        application: application,
-      },
-    });
-  };
-
   const editServerGroupManager = (): void => {
     KubernetesManifestCommandBuilder.buildNewManifestCommand(
       application,
@@ -115,57 +45,47 @@ export function ServerGroupManagerActions({
     });
   };
 
-  const deleteServerGroupManager = (): void => {
-    ModalInjector.modalService.open({
-      templateUrl: require('../../manifest/delete/delete.html'),
-      controller: 'kubernetesV2ManifestDeleteCtrl as ctrl',
-      resolve: {
-        coordinates: {
-          name: serverGroupManager.name,
-          namespace: serverGroupManager.namespace,
-          account: serverGroupManager.account,
-        },
-        application: application,
-        manifestController: (): string => null,
-      },
-    });
-  };
-
   return (
-    <Dropdown className="dropdown" id="server-group-manager-actions-dropdown">
-      {isEnabled && (
-        <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">
-          {robotToHuman(serverGroupManager.kind)} Actions
-        </Dropdown.Toggle>
-      )}
-      <Dropdown.Menu>
-        <MenuItem onClick={scaleServerGroupManager}>Scale</MenuItem>
-        {canUndoRolloutServerGroupManager() && (
-          <MenuItem onClick={undoRolloutServerGroupManager}>Undo Rollout</MenuItem>
-        )}
-        {manifest.status.paused.state && <MenuItem onClick={resumeRolloutServerGroupManager}>Resume Rollout</MenuItem>}
-        {!manifest.status.paused.state && !manifest.status.stable.state && (
-          <MenuItem onClick={pauseRolloutServerGroupManager}>Pause Rollout</MenuItem>
-        )}
-        {!manifest.status.paused.state && (
-          <RollingRestart application={application} serverGroupManager={serverGroupManager} />
+    <>
+      <Dropdown className="dropdown" id="server-group-manager-actions-dropdown">
+        {isEnabled && (
+          <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">
+            {robotToHuman(serverGroupManager.kind)} Actions
+          </Dropdown.Toggle>
         )}
-        <MenuItem className="divider" />
-        <MenuItem onClick={editServerGroupManager}>Edit</MenuItem>
-        <MenuItem onClick={deleteServerGroupManager}>Delete</MenuItem>
-        <IfFeatureEnabled
-          feature="entityTags"
-          render={
-            <AddEntityTagLinks
-              component={serverGroupManager}
-              application={application}
-              entityType="serverGroupManager"
-              ownerOptions={entityTagTargets}
-              onUpdate={() => application.serverGroupManagers.refresh()}
-            />
-          }
-        />
-      </Dropdown.Menu>
-    </Dropdown>
+        <Dropdown.Menu>
+          <Scale
+            application={application}
+            resource={serverGroupManager}
+            currentReplicas={manifest.manifest.spec.replicas}
+          />
+          {canUndoRolloutServerGroupManager() && (
+            <UndoRollout application={application} resource={serverGroupManager} />
+          )}
+          {manifest.status.paused.state && <ResumeRollout application={application} resource={serverGroupManager} />}
+          {!manifest.status.paused.state && !manifest.status.stable.state && (
+            <PauseRollout application={application} resource={serverGroupManager} />
+          )}
+          {!manifest.status.paused.state && (
+            <RollingRestart application={application} serverGroupManager={serverGroupManager} />
+          )}
+          <MenuItem className="divider" />
+          <MenuItem onClick={editServerGroupManager}>Edit</MenuItem>
+          <Delete application={application} resource={serverGroupManager} manifestController={manifestController} />
+          <IfFeatureEnabled
+            feature="entityTags"
+            render={
+              <AddEntityTagLinks
+                component={serverGroupManager}
+                application={application}
+                entityType="serverGroupManager"
+                ownerOptions={entityTagTargets}
+                onUpdate={() => application.serverGroupManagers.refresh()}
+              />
+            }
+          />
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
   );
 }

package/src/serverGroupManager/details/ServerGroupManagerDetails.spec.ts

@@ -0,0 +1,12 @@
+import { closeServerGroupManagerDetails } from './ServerGroupManagerDetails';
+
+describe('closeServerGroupManagerDetails', () => {
+  it('replaces details through the injected state service', () => {
+    const stateService = { go: jasmine.createSpy('go'), params: {} };
+
+    closeServerGroupManagerDetails(stateService as any);
+
+    expect(stateService.params.allowModalToStayOpen).toBe(true);
+    expect(stateService.go).toHaveBeenCalledWith('^', null, { location: 'replace' });
+  });
+});

package/src/serverGroupManager/details/ServerGroupManagerDetails.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 
-import type { Application, IServerGroupManagerDetailsProps, IServerGroupManagerStateParams } from '@spinnaker/core';
-import { CloudProviderLogo, Details, EntityNotifications, IfFeatureEnabled, ReactInjector } from '@spinnaker/core';
+import type {
+  Application,
+  IRouterInjectedProps,
+  IServerGroupManagerDetailsProps,
+  IServerGroupManagerStateParams,
+} from '@spinnaker/core';
+import { CloudProviderLogo, Details, EntityNotifications, IfFeatureEnabled, withRouter } from '@spinnaker/core';
 
 import { ServerGroupManagerActions } from './ServerGroupManagerActions';
 import {
@@ -20,14 +25,18 @@ export interface IKubernetesServerGroupManagerDetailsProps extends IServerGroupM
   serverGroupManager: IServerGroupManagerStateParams;
 }
 
-export function ServerGroupManagerDetails(props: IKubernetesServerGroupManagerDetailsProps) {
-  const autoClose = () => {
-    ReactInjector.$state.params.allowModalToStayOpen = true;
-    ReactInjector.$state.go('^', null, { location: 'replace' });
-  };
+export function closeServerGroupManagerDetails(stateService: IRouterInjectedProps['stateService']): void {
+  stateService.params.allowModalToStayOpen = true;
+  stateService.go('^', null, { location: 'replace' });
+}
+
+export function ServerGroupManagerDetailsComponent(
+  props: IKubernetesServerGroupManagerDetailsProps & IRouterInjectedProps,
+) {
+  const autoClose = () => closeServerGroupManagerDetails(props.stateService);
   const [serverGroupManager, manifest, loading] = useKubernetesServerGroupManagerDetails(props, autoClose);
 
-  if (loading) return <Details loading={loading} />;
+  if (loading || !serverGroupManager || !manifest) return <Details loading={true} />;
 
   return (
     <Details loading={loading}>
@@ -70,3 +79,5 @@ export function ServerGroupManagerDetails(props: IKubernetesServerGroupManagerDe
     </Details>
   );
 }
+
+export const ServerGroupManagerDetails = withRouter(ServerGroupManagerDetailsComponent);

package/src/serverGroupManager/details/sections/ServerGroupManagerAnnotationCustomSection.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 
 import type { IKubernetesServerGroupManagerDetailsSectionProps } from './IKubernetesServerGroupManagerDetailsSectionProps';
-import { KubernetesReactInjector } from '../../../reactShims';
+import { AnnotationCustomSections } from '../../../manifest/AnnotationCustomSections';
 
 export function ServerGroupManagerAnnotationCustomSection({
   serverGroupManager,
   manifest,
 }: IKubernetesServerGroupManagerDetailsSectionProps) {
-  const { KubernetesAnnotationCustomSections } = KubernetesReactInjector;
-  return <KubernetesAnnotationCustomSections manifest={manifest.manifest} resource={serverGroupManager} />;
+  return <AnnotationCustomSections manifest={manifest.manifest} resource={serverGroupManager} />;
 }

package/src/serverGroupManager/details/useKubernetesServerGroupManagerDetails.spec.tsx

@@ -0,0 +1,112 @@
+import { mount } from 'enzyme';
+import React from 'react';
+
+import { ManifestReader } from '@spinnaker/core';
+
+import { useKubernetesServerGroupManagerDetails } from './useKubernetesServerGroupManagerDetails';
+import type { IKubernetesServerGroupManagerDetailsProps } from './ServerGroupManagerDetails';
+
+describe('useKubernetesServerGroupManagerDetails', () => {
+  beforeEach(() => {
+    spyOn(ManifestReader, 'getManifest').and.returnValue(Promise.resolve(manifestDetails()) as any);
+  });
+
+  it('waits for the server group manager data source before loading manifest details', async () => {
+    let resolveReady: () => void;
+    const ready = new Promise<void>((resolve) => {
+      resolveReady = resolve;
+    });
+    const autoClose = jasmine.createSpy('autoClose');
+    const dataSource = {
+      data: [] as any[],
+      ready: jasmine.createSpy('ready').and.returnValue(ready),
+    };
+    const component = mount(<HookHarness {...props(dataSource)} autoClose={autoClose} />);
+
+    await settle();
+    component.update();
+
+    expect(dataSource.ready).toHaveBeenCalled();
+    expect(autoClose).not.toHaveBeenCalled();
+    expect(ManifestReader.getManifest).not.toHaveBeenCalled();
+    expect(component.find('.hook-state').prop('data-loading')).toBe(true);
+
+    dataSource.data = [serverGroupManagerDetails()];
+    resolveReady!();
+    await settle();
+    await settle();
+    component.update();
+
+    expect(ManifestReader.getManifest).toHaveBeenCalledWith('k8s-local', 'dev', 'deployment backend');
+    expect(component.find('.hook-state').prop('data-loading')).toBe(false);
+    expect(component.find('.hook-state').prop('data-manager')).toBe('backend');
+    expect(component.find('.hook-state').prop('data-manifest')).toBe('deployment backend');
+  });
+
+  it('auto-closes when manifest details fail to load', async () => {
+    (ManifestReader.getManifest as jasmine.Spy).and.returnValue(Promise.reject(new Error('manifest failed')));
+    spyOn(console, 'error').and.stub();
+    const autoClose = jasmine.createSpy('autoClose');
+    const dataSource = {
+      data: [serverGroupManagerDetails()],
+      ready: jasmine.createSpy('ready').and.returnValue(Promise.resolve()),
+    };
+
+    const component = mount(<HookHarness {...props(dataSource)} autoClose={autoClose} />);
+
+    await settle();
+    await settle();
+    component.update();
+
+    expect(autoClose).toHaveBeenCalled();
+
+    component.unmount();
+  });
+});
+
+function HookHarness({ autoClose, ...props }: IKubernetesServerGroupManagerDetailsProps & { autoClose: () => void }) {
+  const [serverGroupManager, manifest, loading] = useKubernetesServerGroupManagerDetails(props, autoClose);
+
+  return (
+    <div
+      className="hook-state"
+      data-loading={loading}
+      data-manager={serverGroupManager?.displayName || ''}
+      data-manifest={manifest?.name || ''}
+    />
+  );
+}
+
+function props(dataSource: any): IKubernetesServerGroupManagerDetailsProps {
+  return {
+    app: {
+      getDataSource: () => dataSource,
+    } as any,
+    serverGroupManager: {
+      accountId: 'k8s-local',
+      provider: 'kubernetes',
+      region: 'dev',
+      name: 'deployment backend',
+    },
+  } as IKubernetesServerGroupManagerDetailsProps;
+}
+
+function serverGroupManagerDetails() {
+  return {
+    account: 'k8s-local',
+    cloudProvider: 'kubernetes',
+    displayName: 'backend',
+    name: 'deployment backend',
+    region: 'dev',
+  } as any;
+}
+
+function manifestDetails() {
+  return {
+    account: 'k8s-local',
+    location: 'dev',
+    name: 'deployment backend',
+  } as any;
+}
+
+const settle = () => new Promise((resolve) => setTimeout(resolve));

package/src/serverGroupManager/details/useKubernetesServerGroupManagerDetails.tsx

@@ -6,48 +6,69 @@ import { ManifestReader } from '@spinnaker/core';
 import type { IKubernetesServerGroupManagerDetailsProps } from './ServerGroupManagerDetails';
 import type { IKubernetesServerGroupManager } from '../../interfaces';
 
+interface IServerGroupManagerDetailsState {
+  serverGroupManager?: IKubernetesServerGroupManager;
+  manifest?: IManifest;
+  loading: boolean;
+}
+
 export function useKubernetesServerGroupManagerDetails(
   props: IKubernetesServerGroupManagerDetailsProps,
   autoClose: () => void,
 ): [IKubernetesServerGroupManager | undefined, IManifest | undefined, boolean] {
-  const [serverGroupManager, setServerGroupManager] = useState<IKubernetesServerGroupManager | undefined>();
-  const [manifest, setManifest] = useState<IManifest | undefined>();
-  const [loading, setLoading] = useState(true);
+  const [state, setState] = useState<IServerGroupManagerDetailsState>({ loading: true });
+  const { serverGroupManager: params, app } = props;
+  const { accountId, region, name } = params;
+  const loadedRequestedManager =
+    state.serverGroupManager?.name === name &&
+    state.serverGroupManager?.region === region &&
+    state.serverGroupManager?.account === accountId;
 
   useEffect(() => {
-    if (serverGroupManager) {
-      return;
+    if (loadedRequestedManager) {
+      return undefined;
     }
 
-    const { serverGroupManager: params, app } = props;
-    const { accountId, region, name } = params;
+    let cancelled = false;
+    const dataSource = app.getDataSource('serverGroupManagers');
+
+    setState((current) =>
+      current.loading && !current.serverGroupManager && !current.manifest ? current : { loading: true },
+    );
 
-    setLoading(true);
+    dataSource.ready().then(() => {
+      if (cancelled) {
+        return;
+      }
 
-    const serverGroupManagerDetails = app
-      .getDataSource('serverGroupManagers')
-      .data.find(
+      const serverGroupManagerDetails = dataSource.data.find(
         (manager: IServerGroupManager) =>
           manager.name === name && manager.region === region && manager.account === accountId,
       );
 
-    if (!serverGroupManagerDetails) {
-      autoClose();
-      return;
-    }
+      if (!serverGroupManagerDetails) {
+        autoClose();
+        return;
+      }
+
+      ManifestReader.getManifest(accountId, region, name)
+        .then((manifest: IManifest) => {
+          if (!cancelled) {
+            setState({ manifest, serverGroupManager: serverGroupManagerDetails, loading: false });
+          }
+        })
+        .catch((error) => {
+          if (!cancelled) {
+            console.error('Error fetching manifest:', error);
+            autoClose();
+          }
+        });
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [accountId, app, autoClose, loadedRequestedManager, name, region]);
 
-    ManifestReader.getManifest(accountId, region, name)
-      .then((manifest: IManifest) => {
-        setManifest(manifest);
-        setServerGroupManager(serverGroupManagerDetails);
-      })
-      .catch((error) => {
-        console.error('Error fetching manifest:', error);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }, [autoClose, props, serverGroupManager]);
-
-  return [serverGroupManager, manifest, loading];
+  return [state.serverGroupManager, state.manifest, state.loading];
 }

package/dist/instance/details/details.controller.d.ts

@@ -1 +0,0 @@
-export declare const KUBERNETES_INSTANCE_DETAILS_CTRL = "spinnaker.kubernetes.instanceDetails.controller";