@spinnaker/appengine 2026.2.2 → 2026.3.0

package/src/pipeline/stages/AppengineServerGroupStageConfig.tsx

@@ -0,0 +1,190 @@
+import React, { useEffect, useState } from 'react';
+
+import type { IStageConfigProps } from '@spinnaker/core';
+import {
+  AccountRegionClusterSelector,
+  AccountService,
+  PlatformHealthOverride,
+  StageConfigField,
+  StageConstants,
+  TargetSelect,
+} from '@spinnaker/core';
+
+import { AppengineHealth } from '../../common/appengineHealth';
+import type { IAppengineAccount } from '../../domain';
+
+export function getAppengineAccountRegion(accounts: IAppengineAccount[], credentials: string): string {
+  return accounts.find((account) => account.name === credentials)?.region;
+}
+
+export function initializeAppengineServerGroupStage(stage: any, application: any): void {
+  stage.cloudProvider = 'appengine';
+  stage.cloudProviderType = 'appengine';
+
+  if (
+    stage.isNew &&
+    application?.attributes?.platformHealthOnlyShowOverride &&
+    application?.attributes?.platformHealthOnly
+  ) {
+    stage.interestingHealthProviderNames = [AppengineHealth.PLATFORM];
+  }
+}
+
+type AppengineStageConfigProps = Pick<IStageConfigProps, 'application' | 'pipeline' | 'stage' | 'updateStage'> & {
+  showHealthOverride?: boolean;
+};
+
+export function AppengineServerGroupStageConfig({
+  application,
+  pipeline,
+  stage,
+  updateStage,
+  showHealthOverride = false,
+}: AppengineStageConfigProps) {
+  const [accounts, setAccounts] = useState<IAppengineAccount[]>([]);
+
+  useEffect(() => {
+    initializeAppengineServerGroupStage(stage, application);
+    AccountService.listAccounts('appengine').then((loadedAccounts: IAppengineAccount[]) => {
+      setAccounts(loadedAccounts);
+      const credentials = stage.credentials || application?.defaultCredentials?.appengine;
+      const region = getAppengineAccountRegion(loadedAccounts, credentials);
+      if (credentials || region) {
+        stage.credentials = credentials || stage.credentials;
+        stage.region = region || stage.region;
+        updateStage(stage);
+      }
+    });
+  }, []);
+
+  const onAccountUpdate = (credentials: string) => {
+    AccountService.getAccountDetails(credentials).then((accountDetails: IAppengineAccount) => {
+      stage.region = accountDetails?.region || stage.region;
+      updateStage(stage);
+    });
+  };
+
+  return (
+    <div className="form-horizontal">
+      {!pipeline?.strategy && (
+        <AccountRegionClusterSelector
+          accounts={accounts}
+          application={application}
+          component={stage}
+          disableRegionSelect={true}
+          onAccountUpdate={onAccountUpdate}
+          onComponentUpdate={updateStage}
+          singleRegion="true"
+        />
+      )}
+      <StageConfigField label="Target">
+        <TargetSelect
+          model={{ target: stage.target }}
+          onChange={(target: string) => {
+            stage.target = target;
+            updateStage(stage);
+          }}
+          options={StageConstants.TARGET_LIST}
+        />
+      </StageConfigField>
+      {showHealthOverride && application?.attributes?.platformHealthOnlyShowOverride && (
+        <PlatformHealthOverride
+          interestingHealthProviderNames={stage.interestingHealthProviderNames || []}
+          onChange={(interestingHealthProviderNames) => {
+            stage.interestingHealthProviderNames = interestingHealthProviderNames;
+            updateStage(stage);
+          }}
+          platformHealthType={AppengineHealth.PLATFORM}
+        />
+      )}
+    </div>
+  );
+}
+
+export function AppengineServerGroupStageConfigWithHealthOverride(props: AppengineStageConfigProps) {
+  return <AppengineServerGroupStageConfig {...props} showHealthOverride={true} />;
+}
+
+export function AppengineShrinkClusterStageConfig({
+  application,
+  pipeline,
+  stage,
+  updateStage,
+}: AppengineStageConfigProps) {
+  useEffect(() => {
+    initializeAppengineServerGroupStage(stage, application);
+    if (stage.shrinkToSize === undefined) {
+      stage.shrinkToSize = 1;
+    }
+    if (stage.allowDeleteActive === undefined) {
+      stage.allowDeleteActive = false;
+    }
+    if (stage.retainLargerOverNewer === undefined) {
+      stage.retainLargerOverNewer = 'false';
+    }
+    stage.retainLargerOverNewer = stage.retainLargerOverNewer.toString();
+    updateStage(stage);
+  }, []);
+
+  const update = (field: string, value: any) => {
+    stage[field] = value;
+    updateStage(stage);
+  };
+
+  return (
+    <div className="form-horizontal">
+      <AppengineServerGroupStageConfig
+        application={application}
+        pipeline={pipeline}
+        stage={stage}
+        updateStage={updateStage}
+      />
+      <div className="form-group">
+        <label className="col-md-3 sm-label-right">Shrink Options</label>
+        <div className="col-md-7 form-inline">
+          Shrink to{' '}
+          <input
+            className="form-control input-sm"
+            min={0}
+            onChange={(event) => update('shrinkToSize', Number(event.target.value))}
+            style={{ width: 60 }}
+            type="number"
+            value={stage.shrinkToSize || 0}
+          />{' '}
+          server groups, keeping the{' '}
+          <select
+            className="form-control input-sm"
+            onChange={(event) => update('retainLargerOverNewer', event.target.value)}
+            style={{ width: 100 }}
+            value={stage.retainLargerOverNewer || 'false'}
+          >
+            <option value="true">largest</option>
+            <option value="false">newest</option>
+          </select>
+        </div>
+      </div>
+      <div className="form-group">
+        <div className="col-md-offset-3 col-md-7 checkbox">
+          <label>
+            <input
+              checked={!!stage.allowDeleteActive}
+              onChange={(event) => update('allowDeleteActive', event.target.checked)}
+              type="checkbox"
+            />{' '}
+            Allow deletion of active server groups
+          </label>
+        </div>
+      </div>
+      {application?.attributes?.platformHealthOnlyShowOverride && (
+        <PlatformHealthOverride
+          interestingHealthProviderNames={stage.interestingHealthProviderNames || []}
+          onChange={(interestingHealthProviderNames) => {
+            stage.interestingHealthProviderNames = interestingHealthProviderNames;
+            updateStage(stage);
+          }}
+          platformHealthType={AppengineHealth.PLATFORM}
+        />
+      )}
+    </div>
+  );
+}

package/src/pipeline/stages/destroyAsg/appengineDestroyAsgStage.ts

@@ -1,45 +1,19 @@
-import { module } from 'angular';
-
 import { Registry } from '@spinnaker/core';
+import { AppengineServerGroupStageConfig } from '../AppengineServerGroupStageConfig';
 
-import { AppengineStageCtrl } from '../appengineStage.controller';
-import type { IAppengineStageScope } from '../../../domain';
-
-class AppengineDestroyAsgStageCtrl extends AppengineStageCtrl {
-  public static $inject = ['$scope'];
-  constructor(protected $scope: IAppengineStageScope) {
-    super($scope);
-
-    super.setAccounts().then(() => {
-      super.setStageRegion();
-    });
-
-    super.setStageCloudProvider();
-    super.setTargets();
-    super.setStageCredentials();
-  }
-}
-
-export const APPENGINE_DESTROY_ASG_STAGE = 'spinnaker.appengine.pipeline.stage.destroyAsgStage';
-
-module(APPENGINE_DESTROY_ASG_STAGE, [])
-  .config(() => {
-    Registry.pipeline.registerStage({
-      provides: 'destroyServerGroup',
-      key: 'destroyServerGroup',
-      cloudProvider: 'appengine',
-      templateUrl: require('./destroyAsgStage.html'),
-      executionStepLabelUrl: require('./destroyAsgStepLabel.html'),
-      validators: [
-        {
-          type: 'targetImpedance',
-          message:
-            'This pipeline will attempt to destroy a server group without deploying a new version into the same cluster.',
-        },
-        { type: 'requiredField', fieldName: 'cluster' },
-        { type: 'requiredField', fieldName: 'target' },
-        { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
-      ],
-    });
-  })
-  .controller('appengineDestroyAsgStageCtrl', AppengineDestroyAsgStageCtrl);
+Registry.pipeline.registerStage({
+  provides: 'destroyServerGroup',
+  key: 'destroyServerGroup',
+  cloudProvider: 'appengine',
+  component: AppengineServerGroupStageConfig,
+  validators: [
+    {
+      type: 'targetImpedance',
+      message:
+        'This pipeline will attempt to destroy a server group without deploying a new version into the same cluster.',
+    },
+    { type: 'requiredField', fieldName: 'cluster' },
+    { type: 'requiredField', fieldName: 'target' },
+    { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
+  ],
+});

package/src/pipeline/stages/disableAsg/appengineDisableAsgStage.ts

@@ -1,54 +1,19 @@
-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 AppengineDisableAsgStageCtrl extends AppengineStageCtrl {
-  public static $inject = ['$scope'];
-  constructor(protected $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_DISABLE_ASG_STAGE = 'spinnaker.appengine.pipeline.stage.disableAsgStage';
-
-module(APPENGINE_DISABLE_ASG_STAGE, [])
-  .config(() => {
-    Registry.pipeline.registerStage({
-      provides: 'disableServerGroup',
-      key: 'disableServerGroup',
-      cloudProvider: 'appengine',
-      templateUrl: require('./disableAsgStage.html'),
-      executionStepLabelUrl: require('./disableAsgStepLabel.html'),
-      validators: [
-        {
-          type: 'targetImpedance',
-          message:
-            'This pipeline will attempt to disable a server group without deploying a new version into the same cluster.',
-        },
-        { type: 'requiredField', fieldName: 'cluster' },
-        { type: 'requiredField', fieldName: 'target' },
-        { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
-      ],
-    });
-  })
-  .controller('appengineDisableAsgStageCtrl', AppengineDisableAsgStageCtrl);
+import { AppengineServerGroupStageConfigWithHealthOverride } from '../AppengineServerGroupStageConfig';
+
+Registry.pipeline.registerStage({
+  provides: 'disableServerGroup',
+  key: 'disableServerGroup',
+  cloudProvider: 'appengine',
+  component: AppengineServerGroupStageConfigWithHealthOverride,
+  validators: [
+    {
+      type: 'targetImpedance',
+      message:
+        'This pipeline will attempt to disable a server group without deploying a new version into the same cluster.',
+    },
+    { type: 'requiredField', fieldName: 'cluster' },
+    { type: 'requiredField', fieldName: 'target' },
+    { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
+  ],
+});

package/src/pipeline/stages/editLoadBalancer/AppengineEditLoadBalancerStageConfig.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect } from 'react';
+
+import type { ILoadBalancer, IStageConfigProps } from '@spinnaker/core';
+
+import { AppengineCreateLoadBalancerModal } from '../../../loadBalancer/configure/AppengineCreateLoadBalancerModal';
+
+export function AppengineEditLoadBalancerStageConfig({ application, stage, updateStage }: IStageConfigProps) {
+  useEffect(() => {
+    stage.loadBalancers = stage.loadBalancers || [];
+    stage.cloudProvider = 'appengine';
+    updateStage(stage);
+  }, []);
+
+  const setLoadBalancers = (loadBalancers: ILoadBalancer[]) => {
+    stage.loadBalancers = loadBalancers;
+    updateStage(stage);
+  };
+
+  const addLoadBalancer = () => {
+    AppengineCreateLoadBalancerModal.show({
+      app: application,
+      loadBalancer: null,
+      forPipelineConfig: true,
+      isNew: true,
+    } as any)
+      .then((loadBalancer) => setLoadBalancers([...(stage.loadBalancers || []), loadBalancer]))
+      .catch(() => {});
+  };
+
+  const editLoadBalancer = (index: number) => {
+    AppengineCreateLoadBalancerModal.show({
+      app: application,
+      loadBalancer: stage.loadBalancers[index],
+      forPipelineConfig: true,
+      isNew: false,
+    } as any)
+      .then((loadBalancer) => {
+        const loadBalancers = [...stage.loadBalancers];
+        loadBalancers[index] = loadBalancer;
+        setLoadBalancers(loadBalancers);
+      })
+      .catch(() => {});
+  };
+
+  const removeLoadBalancer = (index: number) => {
+    setLoadBalancers(stage.loadBalancers.filter((_loadBalancer: ILoadBalancer, i: number) => i !== index));
+  };
+
+  return (
+    <div className="well well-sm clearfix">
+      <h4>Load Balancers</h4>
+      <table className="table table-condensed">
+        <thead>
+          <tr>
+            <th>Account</th>
+            <th>Name</th>
+            <th>Region</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {(stage.loadBalancers || []).map((loadBalancer: any, index: number) => (
+            <tr key={`${loadBalancer.name}-${index}`}>
+              <td>{loadBalancer.credentials || loadBalancer.account}</td>
+              <td>{loadBalancer.name}</td>
+              <td>{loadBalancer.region}</td>
+              <td className="condensed-actions">
+                <button className="btn btn-sm btn-link" onClick={() => editLoadBalancer(index)} type="button">
+                  <span className="glyphicon glyphicon-edit" />
+                </button>
+                <button
+                  className="btn btn-sm btn-link pad-left"
+                  onClick={() => removeLoadBalancer(index)}
+                  type="button"
+                >
+                  <span className="glyphicon glyphicon-trash" />
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colSpan={4}>
+              <button className="btn btn-block btn-sm add-new" onClick={addLoadBalancer} type="button">
+                <span className="glyphicon glyphicon-plus-sign" /> Add load balancer
+              </button>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  );
+}

package/src/pipeline/stages/editLoadBalancer/appengineEditLoadBalancerStage.ts

@@ -1,74 +1,14 @@
-import type { IController } from 'angular';
-import { module } from 'angular';
-import type { IModalService } from 'angular-ui-bootstrap';
-import { cloneDeep } from 'lodash';
-
-import type { ILoadBalancer } from '@spinnaker/core';
-import { CloudProviderRegistry, Registry } from '@spinnaker/core';
-
-import { APPENGINE_LOAD_BALANCER_CHOICE_MODAL_CTRL } from './loadBalancerChoice.modal.controller';
-
-class AppengineEditLoadBalancerStageCtrl implements IController {
-  public static $inject = ['$scope', '$uibModal'];
-  constructor(public $scope: any, private $uibModal: IModalService) {
-    $scope.stage.loadBalancers = $scope.stage.loadBalancers || [];
-    $scope.stage.cloudProvider = 'appengine';
-  }
-
-  public addLoadBalancer(): void {
-    this.$uibModal
-      .open({
-        templateUrl: require('./loadBalancerChoice.modal.html'),
-        controller: `appengineLoadBalancerChoiceModelCtrl as ctrl`,
-        resolve: {
-          application: () => this.$scope.application,
-        },
-      })
-      .result.then((newLoadBalancer: ILoadBalancer) => {
-        this.$scope.stage.loadBalancers.push(newLoadBalancer);
-      })
-      .catch(() => {});
-  }
-
-  public editLoadBalancer(index: number) {
-    const config = CloudProviderRegistry.getValue('appengine', 'loadBalancer');
-    this.$uibModal
-      .open({
-        templateUrl: config.createLoadBalancerTemplateUrl,
-        controller: `${config.createLoadBalancerController} as ctrl`,
-        size: 'lg',
-        resolve: {
-          application: () => this.$scope.application,
-          loadBalancer: () => cloneDeep(this.$scope.stage.loadBalancers[index]),
-          isNew: () => false,
-          forPipelineConfig: () => true,
-        },
-      })
-      .result.then((updatedLoadBalancer: ILoadBalancer) => {
-        this.$scope.stage.loadBalancers[index] = updatedLoadBalancer;
-      })
-      .catch(() => {});
-  }
-
-  public removeLoadBalancer(index: number): void {
-    this.$scope.stage.loadBalancers.splice(index, 1);
-  }
-}
-
-export const APPENGINE_EDIT_LOAD_BALANCER_STAGE = 'spinnaker.appengine.pipeline.stage.editLoadBalancerStage';
-module(APPENGINE_EDIT_LOAD_BALANCER_STAGE, [APPENGINE_LOAD_BALANCER_CHOICE_MODAL_CTRL])
-  .config(() => {
-    Registry.pipeline.registerStage({
-      label: 'Edit Load Balancer',
-      description: 'Edits a load balancer',
-      key: 'upsertAppEngineLoadBalancers',
-      cloudProvider: 'appengine',
-      templateUrl: require('./editLoadBalancerStage.html'),
-      executionDetailsUrl: require('./editLoadBalancerExecutionDetails.html'),
-      executionConfigSections: ['editLoadBalancerConfig', 'taskStatus'],
-      controller: 'appengineEditLoadBalancerStageCtrl',
-      controllerAs: 'editLoadBalancerStageCtrl',
-      validators: [],
-    });
-  })
-  .controller('appengineEditLoadBalancerStageCtrl', AppengineEditLoadBalancerStageCtrl);
+import { ExecutionDetailsTasks, Registry } from '@spinnaker/core';
+
+import { AppengineEditLoadBalancerStageConfig } from './AppengineEditLoadBalancerStageConfig';
+import { AppengineEditLoadBalancerExecutionDetails } from '../AppengineExecutionDetails';
+
+Registry.pipeline.registerStage({
+  label: 'Edit Load Balancer',
+  description: 'Edits a load balancer',
+  key: 'upsertAppEngineLoadBalancers',
+  cloudProvider: 'appengine',
+  component: AppengineEditLoadBalancerStageConfig,
+  executionDetailsSections: [AppengineEditLoadBalancerExecutionDetails, ExecutionDetailsTasks],
+  validators: [],
+});

package/src/pipeline/stages/enableAsg/appengineEnableAsgStage.ts

@@ -1,49 +1,14 @@
-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 AppengineEnableAsgStageCtrl extends AppengineStageCtrl {
-  public static $inject = ['$scope'];
-  constructor(protected $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_ENABLE_ASG_STAGE = 'spinnaker.appengine.pipeline.stage.enableAsgStage';
-
-module(APPENGINE_ENABLE_ASG_STAGE, [])
-  .config(() => {
-    Registry.pipeline.registerStage({
-      provides: 'enableServerGroup',
-      key: 'enableServerGroup',
-      cloudProvider: 'appengine',
-      templateUrl: require('./enableAsgStage.html'),
-      executionStepLabelUrl: require('./enableAsgStepLabel.html'),
-      validators: [
-        { type: 'requiredField', fieldName: 'cluster' },
-        { type: 'requiredField', fieldName: 'target' },
-        { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
-      ],
-    });
-  })
-  .controller('appengineEnableAsgStageCtrl', AppengineEnableAsgStageCtrl);
+import { AppengineServerGroupStageConfigWithHealthOverride } from '../AppengineServerGroupStageConfig';
+
+Registry.pipeline.registerStage({
+  provides: 'enableServerGroup',
+  key: 'enableServerGroup',
+  cloudProvider: 'appengine',
+  component: AppengineServerGroupStageConfigWithHealthOverride,
+  validators: [
+    { type: 'requiredField', fieldName: 'cluster' },
+    { type: 'requiredField', fieldName: 'target' },
+    { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
+  ],
+});

package/src/pipeline/stages/shrinkCluster/appengineShrinkClusterStage.ts

@@ -1,62 +1,14 @@
-import { module } from 'angular';
-
 import { Registry } from '@spinnaker/core';
-
-import { AppengineStageCtrl } from '../appengineStage.controller';
-import type { IAppengineStage, IAppengineStageScope } from '../../../domain/index';
-
-interface IAppengineShrinkClusterStage extends IAppengineStage {
-  shrinkToSize: number;
-  allowDeleteActive: boolean;
-  retainLargerOverNewer: string | boolean;
-}
-
-class AppengineShrinkClusterStageCtrl extends AppengineStageCtrl {
-  public static $inject = ['$scope'];
-  constructor(public $scope: IAppengineStageScope) {
-    super($scope);
-
-    super.setAccounts().then(() => {
-      super.setStageRegion();
-    });
-    super.setStageCloudProvider();
-    super.setStageCredentials();
-
-    const stage = $scope.stage as IAppengineShrinkClusterStage;
-    if (stage.shrinkToSize === undefined) {
-      stage.shrinkToSize = 1;
-    }
-
-    if (stage.allowDeleteActive === undefined) {
-      stage.allowDeleteActive = false;
-    }
-
-    if (stage.retainLargerOverNewer === undefined) {
-      stage.retainLargerOverNewer = 'false';
-    }
-
-    stage.retainLargerOverNewer = stage.retainLargerOverNewer.toString();
-  }
-
-  public pluralize(str: string, val: number): string {
-    return val === 1 ? str : str + 's';
-  }
-}
-
-export const APPENGINE_SHRINK_CLUSTER_STAGE = 'spinnaker.appengine.pipeline.stage.shrinkClusterStage';
-
-module(APPENGINE_SHRINK_CLUSTER_STAGE, [])
-  .config(function () {
-    Registry.pipeline.registerStage({
-      provides: 'shrinkCluster',
-      key: 'shrinkCluster',
-      cloudProvider: 'appengine',
-      templateUrl: require('./shrinkClusterStage.html'),
-      validators: [
-        { type: 'requiredField', fieldName: 'cluster' },
-        { type: 'requiredField', fieldName: 'shrinkToSize', fieldLabel: 'shrink to [X] Server Groups' },
-        { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
-      ],
-    });
-  })
-  .controller('appengineShrinkClusterStageCtrl', AppengineShrinkClusterStageCtrl);
+import { AppengineShrinkClusterStageConfig } from '../AppengineServerGroupStageConfig';
+
+Registry.pipeline.registerStage({
+  provides: 'shrinkCluster',
+  key: 'shrinkCluster',
+  cloudProvider: 'appengine',
+  component: AppengineShrinkClusterStageConfig,
+  validators: [
+    { type: 'requiredField', fieldName: 'cluster' },
+    { type: 'requiredField', fieldName: 'shrinkToSize', fieldLabel: 'shrink to [X] Server Groups' },
+    { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
+  ],
+});