@spinnaker/appengine 2026.2.2 → 2026.3.0

package/src/pipeline/stages/startServerGroup/appengineStartServerGroupStage.ts

@@ -1,54 +1,17 @@
-import { module } from 'angular';
-
-import { Registry } from '@spinnaker/core';
-
-import { AppengineStageCtrl } from '../appengineStage.controller';
-import { AppengineHealth } from '../../../common/appengineHealth';
-import type { IAppengineStageScope } from '../../../domain';
-
-class AppengineStartServerGroupStageCtrl extends AppengineStageCtrl {
-  public static $inject = ['$scope'];
-  constructor(public $scope: IAppengineStageScope) {
-    super($scope);
-
-    super.setAccounts().then(() => {
-      super.setStageRegion();
-    });
-
-    super.setStageCloudProvider();
-    super.setTargets();
-    super.setStageCredentials();
-
-    if (
-      $scope.stage.isNew &&
-      $scope.application.attributes.platformHealthOnlyShowOverride &&
-      $scope.application.attributes.platformHealthOnly
-    ) {
-      $scope.stage.interestingHealthProviderNames = [AppengineHealth.PLATFORM];
-    }
-  }
-}
-
-export const APPENGINE_START_SERVER_GROUP_STAGE = 'spinnaker.appengine.pipeline.stage.startServerGroupStage';
-
-module(APPENGINE_START_SERVER_GROUP_STAGE, [])
-  .config(() => {
-    Registry.pipeline.registerStage({
-      label: 'Start Server Group',
-      description: 'Starts a server group.',
-      key: 'startAppEngineServerGroup',
-      templateUrl: require('./startServerGroupStage.html'),
-      executionDetailsUrl: require('./startServerGroupExecutionDetails.html'),
-      executionConfigSections: ['startServerGroupConfig', 'taskStatus'],
-      executionStepLabelUrl: require('./startServerGroupStepLabel.html'),
-      controller: 'appengineStartServerGroupStageCtrl',
-      controllerAs: 'startServerGroupStageCtrl',
-      validators: [
-        { type: 'requiredField', fieldName: 'cluster' },
-        { type: 'requiredField', fieldName: 'target' },
-        { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
-      ],
-      cloudProvider: 'appengine',
-    });
-  })
-  .controller('appengineStartServerGroupStageCtrl', AppengineStartServerGroupStageCtrl);
+import { ExecutionDetailsTasks, Registry } from '@spinnaker/core';
+import { AppengineStartServerGroupExecutionDetails } from '../AppengineExecutionDetails';
+import { AppengineServerGroupStageConfigWithHealthOverride } from '../AppengineServerGroupStageConfig';
+
+Registry.pipeline.registerStage({
+  label: 'Start Server Group',
+  description: 'Starts a server group.',
+  key: 'startAppEngineServerGroup',
+  component: AppengineServerGroupStageConfigWithHealthOverride,
+  executionDetailsSections: [AppengineStartServerGroupExecutionDetails, ExecutionDetailsTasks],
+  validators: [
+    { type: 'requiredField', fieldName: 'cluster' },
+    { type: 'requiredField', fieldName: 'target' },
+    { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
+  ],
+  cloudProvider: 'appengine',
+});

package/src/pipeline/stages/stopServerGroup/appengineStopServerGroupStage.ts

@@ -1,54 +1,17 @@
-import { module } from 'angular';
-
-import { Registry } from '@spinnaker/core';
-
-import { AppengineStageCtrl } from '../appengineStage.controller';
-import { AppengineHealth } from '../../../common/appengineHealth';
-import type { IAppengineStageScope } from '../../../domain/index';
-
-class AppengineStopServerGroupStageCtrl extends AppengineStageCtrl {
-  public static $inject = ['$scope'];
-  constructor(public $scope: IAppengineStageScope) {
-    super($scope);
-
-    super.setAccounts().then(() => {
-      super.setStageRegion();
-    });
-
-    super.setStageCloudProvider();
-    super.setTargets();
-    super.setStageCredentials();
-
-    if (
-      $scope.stage.isNew &&
-      $scope.application.attributes.platformHealthOnlyShowOverride &&
-      $scope.application.attributes.platformHealthOnly
-    ) {
-      $scope.stage.interestingHealthProviderNames = [AppengineHealth.PLATFORM];
-    }
-  }
-}
-
-export const APPENGINE_STOP_SERVER_GROUP_STAGE = 'spinnaker.appengine.pipeline.stage.stopServerGroupStage';
-
-module(APPENGINE_STOP_SERVER_GROUP_STAGE, [])
-  .config(() => {
-    Registry.pipeline.registerStage({
-      label: 'Stop Server Group',
-      description: 'Stops a server group.',
-      key: 'stopAppEngineServerGroup',
-      templateUrl: require('./stopServerGroupStage.html'),
-      executionDetailsUrl: require('./stopServerGroupExecutionDetails.html'),
-      executionConfigSections: ['stopServerGroupConfig', 'taskStatus'],
-      executionStepLabelUrl: require('./stopServerGroupStepLabel.html'),
-      controller: 'appengineStopServerGroupStageCtrl',
-      controllerAs: 'stopServerGroupStageCtrl',
-      validators: [
-        { type: 'requiredField', fieldName: 'cluster' },
-        { type: 'requiredField', fieldName: 'target' },
-        { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
-      ],
-      cloudProvider: 'appengine',
-    });
-  })
-  .controller('appengineStopServerGroupStageCtrl', AppengineStopServerGroupStageCtrl);
+import { ExecutionDetailsTasks, Registry } from '@spinnaker/core';
+import { AppengineStopServerGroupExecutionDetails } from '../AppengineExecutionDetails';
+import { AppengineServerGroupStageConfigWithHealthOverride } from '../AppengineServerGroupStageConfig';
+
+Registry.pipeline.registerStage({
+  label: 'Stop Server Group',
+  description: 'Stops a server group.',
+  key: 'stopAppEngineServerGroup',
+  component: AppengineServerGroupStageConfigWithHealthOverride,
+  executionDetailsSections: [AppengineStopServerGroupExecutionDetails, ExecutionDetailsTasks],
+  validators: [
+    { type: 'requiredField', fieldName: 'cluster' },
+    { type: 'requiredField', fieldName: 'target' },
+    { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
+  ],
+  cloudProvider: 'appengine',
+});

package/src/serverGroup/configure/serverGroupCommandBuilder.service.ts

@@ -1,6 +1,3 @@
-import type { IQService } from 'angular';
-import { module } from 'angular';
-
 import type {
   Application,
   IArtifact,
@@ -95,14 +92,11 @@ export class AppengineServerGroupCommandBuilder {
     return pipeline.expectedArtifacts || [];
   }
 
-  public static $inject = ['$q'];
-  constructor(private $q: IQService) {}
-
   public buildNewServerGroupCommand(
     app: Application,
     selectedProvider: string,
     mode = 'create',
-  ): PromiseLike<IAppengineServerGroupCommand> {
+  ): Promise<IAppengineServerGroupCommand> {
     if (selectedProvider == null) {
       selectedProvider = 'appengine';
     }
@@ -117,7 +111,7 @@ export class AppengineServerGroupCommandBuilder {
       disableStrategySelection: mode === 'create',
     };
 
-    return this.$q.all(dataToFetch).then((backingData: any) => {
+    return this.resolveAll(dataToFetch).then((backingData: any) => {
       const credentials = this.getCredentials(backingData.accounts);
       const region = this.getRegion(backingData.accounts, credentials);
 
@@ -129,6 +123,9 @@ export class AppengineServerGroupCommandBuilder {
         credentials,
         region,
         selectedProvider,
+        configArtifacts: [],
+        configFilepaths: [],
+        configFiles: [],
         interestingHealthProviderNames: [],
         sourceType: AppengineSourceType.GIT,
       } as IAppengineServerGroupCommand;
@@ -138,7 +135,7 @@ export class AppengineServerGroupCommandBuilder {
   public buildServerGroupCommandFromExisting(
     app: Application,
     serverGroup: IAppengineServerGroup,
-  ): PromiseLike<IAppengineServerGroupCommand> {
+  ): Promise<IAppengineServerGroupCommand> {
     return this.buildNewServerGroupCommand(app, 'appengine', 'clone').then((command) => {
       command.stack = serverGroup.stack;
       command.freeFormDetails = serverGroup.detail;
@@ -149,7 +146,7 @@ export class AppengineServerGroupCommandBuilder {
   public buildNewServerGroupCommandForPipeline(
     _stage: IStage,
     pipeline: IPipeline,
-  ): PromiseLike<{
+  ): Promise<{
     viewState: {
       stage: IStage;
       pipeline: IPipeline;
@@ -161,7 +158,7 @@ export class AppengineServerGroupCommandBuilder {
   }> {
     // We can't copy server group configuration for App Engine, and can't build the full command here because we don't have
     // access to the application.
-    return this.$q.when({
+    return Promise.resolve({
       viewState: {
         pipeline,
         stage: _stage,
@@ -178,7 +175,7 @@ export class AppengineServerGroupCommandBuilder {
     cluster: AppengineDeployDescription,
     _stage: IStage,
     pipeline: IPipeline,
-  ): PromiseLike<IAppengineServerGroupCommand> {
+  ): Promise<IAppengineServerGroupCommand> {
     return this.buildNewServerGroupCommand(app, 'appengine', 'editPipeline').then(
       (command: IAppengineServerGroupCommand) => {
         command = {
@@ -225,11 +222,15 @@ export class AppengineServerGroupCommandBuilder {
         return 'Create';
     }
   }
-}
-
-export const APPENGINE_SERVER_GROUP_COMMAND_BUILDER = 'spinnaker.appengine.serverGroupCommandBuilder.service';
 
-module(APPENGINE_SERVER_GROUP_COMMAND_BUILDER, []).service(
-  'appengineServerGroupCommandBuilder',
-  AppengineServerGroupCommandBuilder,
-);
+  private resolveAll<T extends Record<string, PromiseLike<any>>>(
+    dataToFetch: T,
+  ): Promise<{ [K in keyof T]: Awaited<T[K]> }> {
+    const entries = Object.entries(dataToFetch);
+    return Promise.all(entries.map(([, promise]) => promise)).then((values) => {
+      return entries.reduce((result, [key], index) => ({ ...result, [key]: values[index] }), {}) as {
+        [K in keyof T]: Awaited<T[K]>;
+      };
+    });
+  }
+}

package/src/serverGroup/configure/wizard/AppengineCloneServerGroupModal.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+
+import type { Application, IModalComponentProps } from '@spinnaker/core';
+import { ModalClose, noop, ReactModal, TaskMonitor, TaskMonitorWrapper } from '@spinnaker/core';
+
+import type { IAppengineServerGroupCommand } from '../serverGroupCommandBuilder.service';
+import { AppengineSourceType } from '../serverGroupCommandBuilder.service';
+import { AppengineServerGroupWriter } from '../../writer/serverGroup.write.service';
+
+export interface IAppengineCloneServerGroupModalProps extends Partial<IModalComponentProps> {
+  application: Application;
+  command: IAppengineServerGroupCommand;
+  title: string;
+}
+
+interface IAppengineCloneServerGroupModalState {
+  taskMonitor: TaskMonitor;
+}
+
+const writer = new AppengineServerGroupWriter();
+
+export function normalizeAppengineServerGroupCommandForSubmit(
+  command: IAppengineServerGroupCommand,
+): IAppengineServerGroupCommand {
+  return {
+    ...command,
+    configArtifacts: command.configArtifacts || [],
+    configFilepaths: command.configFilepaths || [],
+    configFiles: command.configFiles || [],
+    interestingHealthProviderNames: command.interestingHealthProviderNames || [],
+    fromArtifact: command.fromArtifact || false,
+    sourceType: command.sourceType || AppengineSourceType.GIT,
+  };
+}
+
+export class AppengineCloneServerGroupModal extends React.Component<
+  IAppengineCloneServerGroupModalProps,
+  IAppengineCloneServerGroupModalState
+> {
+  public static defaultProps: Partial<IAppengineCloneServerGroupModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  public static show(props: IAppengineCloneServerGroupModalProps): Promise<IAppengineServerGroupCommand> {
+    return ReactModal.show(AppengineCloneServerGroupModal, props, { dialogClassName: 'modal-lg' });
+  }
+
+  public state: IAppengineCloneServerGroupModalState = {
+    taskMonitor: new TaskMonitor({
+      application: this.props.application,
+      title: 'Creating your server group',
+      onDismiss: () => this.props.dismissModal(),
+      onTaskComplete: () => this.props.application.serverGroups.refresh(),
+    }),
+  };
+
+  private update = (field: keyof IAppengineServerGroupCommand, value: any) => {
+    (this.props.command as any)[field] = value;
+    this.forceUpdate();
+  };
+
+  private submit = () => {
+    const { command } = this.props;
+    if (command.viewState.mode === 'editPipeline' || command.viewState.mode === 'createPipeline') {
+      this.props.closeModal(command);
+      return;
+    }
+
+    this.state.taskMonitor.submit(() =>
+      writer.cloneServerGroup(normalizeAppengineServerGroupCommandForSubmit(command), this.props.application),
+    );
+  };
+
+  public render() {
+    const { command, dismissModal, title } = this.props;
+
+    return (
+      <div>
+        <ModalClose dismiss={dismissModal} />
+        <Modal.Header>
+          <Modal.Title>{title}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="form-horizontal">
+            <label>Account</label>
+            <input
+              className="form-control input-sm"
+              onChange={(event) => this.update('credentials', event.target.value)}
+              value={command.credentials || ''}
+            />
+            <label>Region</label>
+            <input
+              className="form-control input-sm"
+              onChange={(event) => this.update('region', event.target.value)}
+              value={command.region || ''}
+            />
+            <label>Branch</label>
+            <input
+              className="form-control input-sm"
+              onChange={(event) => this.update('branch', event.target.value)}
+              value={command.branch || ''}
+            />
+          </div>
+        </Modal.Body>
+        <TaskMonitorWrapper monitor={this.state.taskMonitor} />
+        <Modal.Footer>
+          <button className="btn btn-default" onClick={() => dismissModal()} type="button">
+            Cancel
+          </button>
+          <button className="btn btn-primary" onClick={this.submit} type="button">
+            {command.viewState?.submitButtonLabel || 'Clone'}
+          </button>
+        </Modal.Footer>
+      </div>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/serverGroupWizard.less

@@ -3,14 +3,6 @@
     margin-top: 0.75rem;
   }
 
-  help-field.help-field-absolute {
-    span {
-      position: absolute;
-      top: 7px;
-      right: 2px;
-    }
-  }
-
   .artifact-configuration-section {
     border-bottom: 1px solid #eee;
     padding: 0 0 4px 0;

package/src/serverGroup/details/AppengineServerGroupActions.tsx

@@ -0,0 +1,245 @@
+import React from 'react';
+
+import type { Application, IConfirmationModalParams, IServerGroup, IServerGroupActionsProps } from '@spinnaker/core';
+import { ConfirmationModalService, ServerGroupWarningMessageService } from '@spinnaker/core';
+
+import { AppengineHealth } from '../../common/appengineHealth';
+import { AppengineServerGroupCommandBuilder } from '../configure/serverGroupCommandBuilder.service';
+import { AppengineCloneServerGroupModal } from '../configure/wizard/AppengineCloneServerGroupModal';
+import type { IAppengineServerGroup } from '../../domain';
+import { AppengineServerGroupWriter } from '../writer/serverGroup.write.service';
+
+const writer = new AppengineServerGroupWriter();
+const commandBuilder = new AppengineServerGroupCommandBuilder();
+
+export function canStartOrStopServerGroup(serverGroup: IAppengineServerGroup): boolean {
+  return serverGroup.env === 'FLEXIBLE' || ['MANUAL', 'BASIC'].includes(serverGroup.scalingPolicy?.type);
+}
+
+export function canStartServerGroup(serverGroup: IAppengineServerGroup): boolean {
+  return canStartOrStopServerGroup(serverGroup) && serverGroup.servingStatus === 'STOPPED';
+}
+
+export function canStopServerGroup(serverGroup: IAppengineServerGroup): boolean {
+  return canStartOrStopServerGroup(serverGroup) && serverGroup.servingStatus === 'SERVING';
+}
+
+export function expectedAllocationsAfterDisableOperation(
+  serverGroup: IServerGroup,
+  loadBalancers: any[] = [],
+): { [key: string]: number } {
+  const loadBalancer = loadBalancers.find((toCheck) => {
+    return Object.keys(toCheck.split?.allocations || {}).includes(serverGroup.name);
+  });
+
+  if (!loadBalancer) {
+    return null;
+  }
+
+  const allocations: { [key: string]: number } = { ...loadBalancer.split.allocations };
+  delete allocations[serverGroup.name];
+  const denominator = Object.values(allocations).reduce((sum, allocation) => sum + allocation, 0);
+  if (!denominator) {
+    return {};
+  }
+
+  const precision = loadBalancer.split.shardBy === 'COOKIE' ? 1000 : 100;
+  Object.keys(allocations).forEach((serverGroupName) => {
+    allocations[serverGroupName] = Math.round((allocations[serverGroupName] / denominator) * precision) / precision;
+  });
+  return allocations;
+}
+
+export function canDisableServerGroup(serverGroup: IAppengineServerGroup, loadBalancers: any[] = []): boolean {
+  if (!serverGroup || serverGroup.disabled) {
+    return false;
+  }
+
+  return Object.keys(expectedAllocationsAfterDisableOperation(serverGroup, loadBalancers) || {}).length > 0;
+}
+
+export function canDestroyServerGroup(serverGroup: IAppengineServerGroup, loadBalancers: any[] = []): boolean {
+  if (!serverGroup) {
+    return false;
+  }
+
+  return (
+    serverGroup.disabled ||
+    Object.keys(expectedAllocationsAfterDisableOperation(serverGroup, loadBalancers) || {}).length > 0
+  );
+}
+
+function buildExpectedAllocationsTable(expectedAllocations: { [key: string]: number }): string {
+  const rows = Object.keys(expectedAllocations || {})
+    .map(
+      (serverGroupName) =>
+        `<tr><td>${serverGroupName}</td><td>${expectedAllocations[serverGroupName] * 100}%</td></tr>`,
+    )
+    .join('');
+
+  return `<table class="table table-condensed"><thead><tr><th>Server Group</th><th>Allocation</th></tr></thead><tbody>${rows}</tbody></table>`;
+}
+
+function getLoadBalancers(app: Application): any[] {
+  return app.getDataSource?.('loadBalancers')?.data || [];
+}
+
+function platformHealthParams(app: Application): Partial<IConfirmationModalParams> {
+  const params: Partial<IConfirmationModalParams> = {
+    platformHealthOnlyShowOverride: app.attributes?.platformHealthOnlyShowOverride,
+    platformHealthType: AppengineHealth.PLATFORM,
+    interestingHealthProviderNames: [],
+  };
+  if (app.attributes?.platformHealthOnlyShowOverride && app.attributes?.platformHealthOnly) {
+    params.interestingHealthProviderNames = [AppengineHealth.PLATFORM];
+  }
+  return params;
+}
+
+function getDisableBody(serverGroup: IAppengineServerGroup, loadBalancers: any[]): string {
+  const expectedAllocations = expectedAllocationsAfterDisableOperation(serverGroup, loadBalancers);
+  return `<div class="well well-sm">
+    <p>For App Engine, a disable operation sets this server group's allocation to 0% and redistributes traffic to the other enabled server groups.</p>
+    <p>If you would like more fine-grained control, edit <b>${
+      serverGroup.loadBalancers?.[0]
+    }</b> under the <b>Load Balancers</b> tab.</p>
+    <div class="row"><div class="col-md-12">${buildExpectedAllocationsTable(expectedAllocations)}</div></div>
+  </div>`;
+}
+
+function getDestroyBody(app: Application, serverGroup: IAppengineServerGroup, loadBalancers: any[]): string {
+  let body = '';
+  const params: IConfirmationModalParams = {} as IConfirmationModalParams;
+  ServerGroupWarningMessageService.addDestroyWarningMessage(app, serverGroup, params);
+  if (params.body) {
+    body += params.body;
+  }
+  if (!serverGroup.disabled) {
+    body += `<div class="well well-sm">
+      <p>A destroy operation will first disable this server group.</p>
+      <p>For App Engine, a disable operation sets this server group's allocation to 0% and redistributes traffic to the other enabled server groups.</p>
+      <p>If you would like more fine-grained control, edit <b>${
+        serverGroup.loadBalancers?.[0]
+      }</b> under the <b>Load Balancers</b> tab.</p>
+      <div class="row"><div class="col-md-12">${buildExpectedAllocationsTable(
+        expectedAllocationsAfterDisableOperation(serverGroup, loadBalancers),
+      )}</div></div>
+    </div>`;
+  }
+  return body;
+}
+
+export function AppengineServerGroupActions({ app, serverGroup }: IServerGroupActionsProps) {
+  const appengineServerGroup = serverGroup as IAppengineServerGroup;
+  const loadBalancers = getLoadBalancers(app);
+
+  const clone = () => {
+    commandBuilder.buildServerGroupCommandFromExisting(app, appengineServerGroup).then((command) => {
+      AppengineCloneServerGroupModal.show({ application: app, command, title: `Clone ${serverGroup.name}` });
+    });
+  };
+
+  const start = () =>
+    ConfirmationModalService.confirm({
+      header: `Really start ${serverGroup.name}?`,
+      buttonText: `Start ${serverGroup.name}`,
+      account: appengineServerGroup.account,
+      taskMonitorConfig: { application: app, title: `Starting ${serverGroup.name}` },
+      submitMethod: () => writer.startServerGroup(appengineServerGroup, app),
+      askForReason: true,
+      ...platformHealthParams(app),
+    });
+
+  const stop = () =>
+    ConfirmationModalService.confirm({
+      header: `Really stop ${serverGroup.name}?`,
+      buttonText: `Stop ${serverGroup.name}`,
+      account: appengineServerGroup.account,
+      body: !appengineServerGroup.disabled
+        ? `<div class="alert alert-danger"><p>Stopping this server group will scale it down to zero instances.</p><p>This server group is currently serving traffic from <b>${appengineServerGroup.loadBalancers?.[0]}</b>. Traffic directed to this server group after it has been stopped will not be handled.</p></div>`
+        : undefined,
+      taskMonitorConfig: { application: app, title: `Stopping ${serverGroup.name}` },
+      submitMethod: () => writer.stopServerGroup(appengineServerGroup, app),
+      askForReason: true,
+      ...platformHealthParams(app),
+    });
+
+  const enable = () =>
+    ConfirmationModalService.confirm({
+      header: `Really enable ${serverGroup.name}?`,
+      buttonText: `Enable ${serverGroup.name}`,
+      account: appengineServerGroup.account,
+      body: `<div class="well well-sm"><p>Enabling <b>${serverGroup.name}</b> will set its traffic allocation for <b>${appengineServerGroup.loadBalancers?.[0]}</b> to 100%.</p><p>If you would like more fine-grained control, edit <b>${appengineServerGroup.loadBalancers?.[0]}</b> under the <b>Load Balancers</b> tab.</p></div>`,
+      taskMonitorConfig: { application: app, title: `Enabling ${serverGroup.name}` },
+      submitMethod: (params: any) => writer.enableServerGroup(appengineServerGroup, app, params),
+      askForReason: true,
+      ...platformHealthParams(app),
+    });
+
+  const disable = () =>
+    ConfirmationModalService.confirm({
+      header: `Really disable ${serverGroup.name}?`,
+      buttonText: `Disable ${serverGroup.name}`,
+      account: appengineServerGroup.account,
+      body: getDisableBody(appengineServerGroup, loadBalancers),
+      taskMonitorConfig: { application: app, title: `Disabling ${serverGroup.name}` },
+      submitMethod: (params: any) => writer.disableServerGroup(appengineServerGroup, app, params),
+      askForReason: true,
+      ...platformHealthParams(app),
+    });
+
+  const destroy = () =>
+    ConfirmationModalService.confirm({
+      header: `Really destroy ${serverGroup.name}?`,
+      buttonText: `Destroy ${serverGroup.name}`,
+      account: appengineServerGroup.account,
+      body: getDestroyBody(app, appengineServerGroup, loadBalancers),
+      taskMonitorConfig: { application: app, title: `Destroying ${serverGroup.name}` },
+      submitMethod: (params: any) => writer.destroyServerGroup(appengineServerGroup, app, params),
+      askForReason: true,
+      ...platformHealthParams(app),
+    });
+
+  return (
+    <div className="actions">
+      <button className="btn btn-sm btn-default" onClick={clone} type="button">
+        Clone
+      </button>
+      <button
+        className="btn btn-sm btn-default"
+        disabled={!canStartServerGroup(appengineServerGroup)}
+        onClick={start}
+        type="button"
+      >
+        Start
+      </button>
+      <button
+        className="btn btn-sm btn-default"
+        disabled={!canStopServerGroup(appengineServerGroup)}
+        onClick={stop}
+        type="button"
+      >
+        Stop
+      </button>
+      <button className="btn btn-sm btn-default" onClick={enable} type="button">
+        Enable
+      </button>
+      <button
+        className="btn btn-sm btn-default"
+        disabled={!canDisableServerGroup(appengineServerGroup, loadBalancers)}
+        onClick={disable}
+        type="button"
+      >
+        Disable
+      </button>
+      <button
+        className="btn btn-sm btn-default"
+        disabled={!canDestroyServerGroup(appengineServerGroup, loadBalancers)}
+        onClick={destroy}
+        type="button"
+      >
+        Destroy
+      </button>
+    </div>
+  );
+}

package/src/serverGroup/details/AppengineServerGroupDetailsSection.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import type { IServerGroupDetailsSectionProps } from '@spinnaker/core';
+
+import type { IAppengineServerGroup } from '../../domain';
+
+export function AppengineServerGroupDetailsSection({ serverGroup }: IServerGroupDetailsSectionProps) {
+  const appengineServerGroup = serverGroup as IAppengineServerGroup;
+
+  return (
+    <div className="content-section">
+      <div className="content-section-heading">App Engine Details</div>
+      <dl className="dl-horizontal dl-narrow">
+        <dt>Account</dt>
+        <dd>{appengineServerGroup.account}</dd>
+        <dt>Region</dt>
+        <dd>{appengineServerGroup.region}</dd>
+        <dt>Status</dt>
+        <dd>{appengineServerGroup.servingStatus || appengineServerGroup.status || 'Unknown'}</dd>
+        <dt>Environment</dt>
+        <dd>{appengineServerGroup.env || 'Unknown'}</dd>
+        <dt>Scaling</dt>
+        <dd>{appengineServerGroup.scalingPolicy?.type || 'Unknown'}</dd>
+      </dl>
+    </div>
+  );
+}