@spinnaker/google 2026.2.2 → 2026.3.0

package/src/pipeline/stages/resizeAsg/gceResizeAsgStage.js

@@ -1,125 +1,26 @@
-'use strict';
-
-import { module } from 'angular';
-
-import { AccountService, Registry, StageConstants } from '@spinnaker/core';
-
-export const GOOGLE_PIPELINE_STAGES_RESIZEASG_GCERESIZEASGSTAGE = 'spinnaker.gce.pipeline.stage..resizeAsgStage';
-export const name = GOOGLE_PIPELINE_STAGES_RESIZEASG_GCERESIZEASGSTAGE; // for backwards compatibility
-module(GOOGLE_PIPELINE_STAGES_RESIZEASG_GCERESIZEASGSTAGE, [])
-  .config(function () {
-    Registry.pipeline.registerStage({
-      provides: 'resizeServerGroup',
-      cloudProvider: 'gce',
-      templateUrl: require('./resizeAsgStage.html'),
-      executionStepLabelUrl: require('./resizeAsgStepLabel.html'),
-      accountExtractor: (stage) => [stage.context.credentials],
-      configAccountExtractor: (stage) => [stage.credentials],
-      supportsCustomTimeout: true,
-      validators: [
-        {
-          type: 'targetImpedance',
-          message:
-            'This pipeline will attempt to resize a server group without deploying a new version into the same cluster.',
-        },
-        { type: 'requiredField', fieldName: 'cluster' },
-        { type: 'requiredField', fieldName: 'target' },
-        { type: 'requiredField', fieldName: 'action' },
-        { type: 'requiredField', fieldName: 'regions' },
-        { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
-      ],
-    });
-  })
-  .controller('gceResizeAsgStageCtrl', [
-    '$scope',
-    function ($scope) {
-      const ctrl = this;
-
-      const stage = $scope.stage;
-
-      $scope.viewState = {
-        accountsLoaded: false,
-        regionsLoaded: false,
-      };
-
-      AccountService.listAccounts('gce').then(function (accounts) {
-        $scope.accounts = accounts;
-        $scope.viewState.accountsLoaded = true;
-      });
-
-      $scope.resizeTargets = StageConstants.TARGET_LIST;
-
-      $scope.scaleActions = [
-        {
-          label: 'Scale Up',
-          val: 'scale_up',
-        },
-        {
-          label: 'Scale Down',
-          val: 'scale_down',
-        },
-        {
-          label: 'Scale to Cluster Size',
-          val: 'scale_to_cluster',
-        },
-        {
-          label: 'Scale to Exact Size',
-          val: 'scale_exact',
-        },
-      ];
-
-      $scope.resizeTypes = [
-        {
-          label: 'Percentage',
-          val: 'pct',
-        },
-        {
-          label: 'Incremental',
-          val: 'incr',
-        },
-      ];
-
-      stage.capacity = stage.capacity || {};
-      stage.regions = stage.regions || [];
-      stage.target = stage.target || $scope.resizeTargets[0].val;
-      stage.action = stage.action || $scope.scaleActions[0].val;
-      stage.resizeType = stage.resizeType || $scope.resizeTypes[0].val;
-      if (!stage.action && stage.resizeType === 'exact') {
-        stage.action = 'scale_exact';
-      }
-      stage.cloudProvider = 'gce';
-      stage.cloudProviderType = 'gce';
-
-      if (
-        stage.isNew &&
-        $scope.application.attributes.platformHealthOnlyShowOverride &&
-        $scope.application.attributes.platformHealthOnly
-      ) {
-        stage.interestingHealthProviderNames = ['Google'];
-      }
-
-      if (!stage.credentials && $scope.application.defaultCredentials.gce) {
-        stage.credentials = $scope.application.defaultCredentials.gce;
-      }
-      if (!stage.regions.length && $scope.application.defaultRegions.gce) {
-        stage.regions.push($scope.application.defaultRegions.gce);
-      }
-
-      ctrl.updateResizeType = function () {
-        if (stage.action === 'scale_exact') {
-          stage.resizeType = 'exact';
-          delete stage.scalePct;
-          delete stage.scaleNum;
-        } else {
-          stage.capacity = {};
-          if (stage.resizeType === 'pct') {
-            delete stage.scaleNum;
-          } else {
-            stage.resizeType = 'incr';
-            delete stage.scalePct;
-            stage.scaleNum = stage.scaleNum || 0;
-          }
-        }
-      };
-    },
-  ]);
+import { Registry } from '@spinnaker/core';
+
+import { GceResizeServerGroupStageConfig } from '../googleStageConfig';
+
+export function registerGceResizeAsgStage() {
+  Registry.pipeline.registerStage({
+    provides: 'resizeServerGroup',
+    cloudProvider: 'gce',
+    component: GceResizeServerGroupStageConfig,
+    accountExtractor: (stage) => [stage.context.credentials],
+    configAccountExtractor: (stage) => [stage.credentials],
+    supportsCustomTimeout: true,
+    validators: [
+      {
+        type: 'targetImpedance',
+        message:
+          'This pipeline will attempt to resize a server group without deploying a new version into the same cluster.',
+      },
+      { type: 'requiredField', fieldName: 'cluster' },
+      { type: 'requiredField', fieldName: 'target' },
+      { type: 'requiredField', fieldName: 'action' },
+      { type: 'requiredField', fieldName: 'regions' },
+      { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
+    ],
+  });
+}

package/src/pipeline/stages/scaleDownCluster/gceScaleDownClusterStage.js

@@ -1,78 +1,24 @@
-'use strict';
-
-import { module } from 'angular';
-
-import { AccountService, Registry } from '@spinnaker/core';
-
-export const GOOGLE_PIPELINE_STAGES_SCALEDOWNCLUSTER_GCESCALEDOWNCLUSTERSTAGE =
-  'spinnaker.gce.pipeline.stage..scaleDownClusterStage';
-export const name = GOOGLE_PIPELINE_STAGES_SCALEDOWNCLUSTER_GCESCALEDOWNCLUSTERSTAGE; // for backwards compatibility
-module(GOOGLE_PIPELINE_STAGES_SCALEDOWNCLUSTER_GCESCALEDOWNCLUSTERSTAGE, [])
-  .config(function () {
-    Registry.pipeline.registerStage({
-      provides: 'scaleDownCluster',
-      cloudProvider: 'gce',
-      templateUrl: require('./scaleDownClusterStage.html'),
-      accountExtractor: (stage) => [stage.context.credentials],
-      configAccountExtractor: (stage) => [stage.credentials],
-      validators: [
-        { type: 'requiredField', fieldName: 'cluster' },
-        {
-          type: 'requiredField',
-          fieldName: 'remainingFullSizeServerGroups',
-          fieldLabel: 'Keep [X] full size Server Groups',
-        },
-        { type: 'requiredField', fieldName: 'regions' },
-        { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
-      ],
-      strategy: true,
-    });
-  })
-  .controller('gceScaleDownClusterStageCtrl', [
-    '$scope',
-    function ($scope) {
-      const ctrl = this;
-
-      const stage = $scope.stage;
-
-      $scope.state = {
-        accounts: false,
-        regionsLoaded: false,
-      };
-
-      AccountService.listAccounts('gce').then(function (accounts) {
-        $scope.accounts = accounts;
-        $scope.state.accounts = true;
-      });
-
-      stage.regions = stage.regions || [];
-      stage.cloudProvider = 'gce';
-
-      if (!stage.credentials && $scope.application.defaultCredentials.gce) {
-        stage.credentials = $scope.application.defaultCredentials.gce;
-      }
-      if (!stage.regions.length && $scope.application.defaultRegions.gce) {
-        stage.regions.push($scope.application.defaultRegions.gce);
-      }
-
-      if (stage.remainingFullSizeServerGroups === undefined) {
-        stage.remainingFullSizeServerGroups = 1;
-      }
-
-      if (stage.allowScaleDownActive === undefined) {
-        stage.allowScaleDownActive = false;
-      }
-
-      ctrl.pluralize = function (str, val) {
-        if (val === 1) {
-          return str;
-        }
-        return str + 's';
-      };
-
-      if (stage.preferLargerOverNewer === undefined) {
-        stage.preferLargerOverNewer = 'false';
-      }
-      stage.preferLargerOverNewer = stage.preferLargerOverNewer.toString();
-    },
-  ]);
+import { Registry } from '@spinnaker/core';
+
+import { GceScaleDownClusterStageConfig } from '../googleStageConfig';
+
+export function registerGceScaleDownClusterStage() {
+  Registry.pipeline.registerStage({
+    provides: 'scaleDownCluster',
+    cloudProvider: 'gce',
+    component: GceScaleDownClusterStageConfig,
+    accountExtractor: (stage) => [stage.context.credentials],
+    configAccountExtractor: (stage) => [stage.credentials],
+    validators: [
+      { type: 'requiredField', fieldName: 'cluster' },
+      {
+        type: 'requiredField',
+        fieldName: 'remainingFullSizeServerGroups',
+        fieldLabel: 'Keep [X] full size Server Groups',
+      },
+      { type: 'requiredField', fieldName: 'regions' },
+      { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
+    ],
+    strategy: true,
+  });
+}

package/src/pipeline/stages/shrinkCluster/gceShrinkClusterStage.js

@@ -1,73 +1,19 @@
-'use strict';
-
-import { module } from 'angular';
-
-import { AccountService, Registry } from '@spinnaker/core';
-
-export const GOOGLE_PIPELINE_STAGES_SHRINKCLUSTER_GCESHRINKCLUSTERSTAGE =
-  'spinnaker.gce.pipeline.stage..shrinkClusterStage';
-export const name = GOOGLE_PIPELINE_STAGES_SHRINKCLUSTER_GCESHRINKCLUSTERSTAGE; // for backwards compatibility
-module(GOOGLE_PIPELINE_STAGES_SHRINKCLUSTER_GCESHRINKCLUSTERSTAGE, [])
-  .config(function () {
-    Registry.pipeline.registerStage({
-      provides: 'shrinkCluster',
-      cloudProvider: 'gce',
-      templateUrl: require('./shrinkClusterStage.html'),
-      accountExtractor: (stage) => [stage.context.credentials],
-      configAccountExtractor: (stage) => [stage.credentials],
-      validators: [
-        { type: 'requiredField', fieldName: 'cluster' },
-        { type: 'requiredField', fieldName: 'shrinkToSize', fieldLabel: 'shrink to [X] Server Groups' },
-        { type: 'requiredField', fieldName: 'regions' },
-        { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
-      ],
-    });
-  })
-  .controller('gceShrinkClusterStageCtrl', [
-    '$scope',
-    function ($scope) {
-      const ctrl = this;
-
-      const stage = $scope.stage;
-
-      $scope.state = {
-        accounts: false,
-        regionsLoaded: false,
-      };
-
-      AccountService.listAccounts('gce').then(function (accounts) {
-        $scope.accounts = accounts;
-        $scope.state.accounts = true;
-      });
-
-      stage.regions = stage.regions || [];
-      stage.cloudProvider = 'gce';
-
-      if (!stage.credentials && $scope.application.defaultCredentials.gce) {
-        stage.credentials = $scope.application.defaultCredentials.gce;
-      }
-      if (!stage.regions.length && $scope.application.defaultRegions.gce) {
-        stage.regions.push($scope.application.defaultRegions.gce);
-      }
-
-      if (stage.shrinkToSize === undefined) {
-        stage.shrinkToSize = 1;
-      }
-
-      if (stage.allowDeleteActive === undefined) {
-        stage.allowDeleteActive = false;
-      }
-
-      ctrl.pluralize = function (str, val) {
-        if (val === 1) {
-          return str;
-        }
-        return str + 's';
-      };
-
-      if (stage.retainLargerOverNewer === undefined) {
-        stage.retainLargerOverNewer = 'false';
-      }
-      stage.retainLargerOverNewer = stage.retainLargerOverNewer.toString();
-    },
-  ]);
+import { Registry } from '@spinnaker/core';
+
+import { GceShrinkClusterStageConfig } from '../googleStageConfig';
+
+export function registerGceShrinkClusterStage() {
+  Registry.pipeline.registerStage({
+    provides: 'shrinkCluster',
+    cloudProvider: 'gce',
+    component: GceShrinkClusterStageConfig,
+    accountExtractor: (stage) => [stage.context.credentials],
+    configAccountExtractor: (stage) => [stage.credentials],
+    validators: [
+      { type: 'requiredField', fieldName: 'cluster' },
+      { type: 'requiredField', fieldName: 'shrinkToSize', fieldLabel: 'shrink to [X] Server Groups' },
+      { type: 'requiredField', fieldName: 'regions' },
+      { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
+    ],
+  });
+}

package/src/pipeline/stages/tagImage/gceTagImageStage.js

@@ -1,36 +1,165 @@
-'use strict';
-
-import { module } from 'angular';
-
-import { AccountService, PipelineConfigService, Registry, StageConstants } from '@spinnaker/core';
-
-export const GOOGLE_PIPELINE_STAGES_TAGIMAGE_GCETAGIMAGESTAGE = 'spinnaker.gce.pipeline.stage..tagImageStage';
-export const name = GOOGLE_PIPELINE_STAGES_TAGIMAGE_GCETAGIMAGESTAGE; // for backwards compatibility
-module(GOOGLE_PIPELINE_STAGES_TAGIMAGE_GCETAGIMAGESTAGE, [])
-  .config(function () {
-    Registry.pipeline.registerStage({
-      provides: 'upsertImageTags',
-      cloudProvider: 'gce',
-      templateUrl: require('./tagImageStage.html'),
-      executionDetailsUrl: require('./tagImageExecutionDetails.html'),
-      executionConfigSections: ['tagImageConfig', 'taskStatus'],
-    });
-  })
-  .controller('gceTagImageStageCtrl', [
-    '$scope',
-    ($scope) => {
-      AccountService.listAccounts('gce').then((accounts) => ($scope.accounts = accounts));
-
-      $scope.stage.tags = $scope.stage.tags || {};
-      $scope.stage.cloudProvider = $scope.stage.cloudProvider || 'gce';
-
-      const initUpstreamStages = () => {
-        const upstreamDependencies = PipelineConfigService.getAllUpstreamDependencies(
-          $scope.pipeline,
-          $scope.stage,
-        ).filter((stage) => StageConstants.IMAGE_PRODUCING_STAGES.includes(stage.type));
-        $scope.consideredStages = new Map(upstreamDependencies.map((stage) => [stage.refId, stage.name]));
-      };
-      $scope.$watch('pipeline.stages', initUpstreamStages);
-    },
-  ]);
+import React from 'react';
+
+import {
+  AccountService,
+  ExecutionDetailsSection,
+  ExecutionDetailsTasks,
+  MapEditor,
+  PipelineConfigService,
+  Registry,
+  StageConfigField,
+  StageConstants,
+  StageFailureMessage,
+} from '@spinnaker/core';
+
+const h = React.createElement;
+
+function selectOptions(accounts) {
+  return accounts.map((account) => h('option', { key: account.name, value: account.name }, account.name));
+}
+
+function toggleConsideredStage(stage, refId, checked) {
+  const current = stage.consideredStages || [];
+  if (checked && !current.includes(refId)) {
+    return current.concat(refId);
+  }
+  if (!checked) {
+    return current.filter((candidate) => candidate !== refId);
+  }
+  return current;
+}
+
+class GceTagImageStageConfig extends React.Component {
+  state = { accounts: [] };
+
+  componentDidMount() {
+    AccountService.listAccounts('gce').then((accounts) => this.setState({ accounts }));
+  }
+
+  render() {
+    const { pipeline, stage, updateStage } = this.props;
+    stage.tags = stage.tags || {};
+    stage.cloudProvider = stage.cloudProvider || 'gce';
+
+    const imageProducingStages = pipeline
+      ? PipelineConfigService.getAllUpstreamDependencies(pipeline, stage).filter((upstreamStage) =>
+          StageConstants.IMAGE_PRODUCING_STAGES.includes(upstreamStage.type),
+        )
+      : [];
+
+    return h(
+      'div',
+      { className: 'form-horizontal' },
+      h(
+        StageConfigField,
+        { label: 'Account' },
+        h(
+          'select',
+          {
+            className: 'form-control input-sm',
+            required: true,
+            value: stage.credentials || '',
+            onChange: (e) => updateStage({ ...stage, credentials: e.target.value }),
+          },
+          h('option', { value: '' }, 'Select...'),
+          selectOptions(this.state.accounts),
+        ),
+      ),
+      h(
+        StageConfigField,
+        { label: 'Tags' },
+        h(MapEditor, {
+          allowEmpty: true,
+          model: stage.tags,
+          onChange: (tags) => updateStage({ ...stage, tags }),
+        }),
+      ),
+      h(
+        StageConfigField,
+        { label: 'Stages (optional)' },
+        h(
+          'div',
+          { className: 'checkbox' },
+          imageProducingStages.map((upstreamStage) =>
+            h(
+              'label',
+              { key: upstreamStage.refId, style: { display: 'block' } },
+              h('input', {
+                checked: (stage.consideredStages || []).includes(upstreamStage.refId),
+                type: 'checkbox',
+                onChange: (e) =>
+                  updateStage({
+                    ...stage,
+                    consideredStages: toggleConsideredStage(stage, upstreamStage.refId, e.target.checked),
+                  }),
+              }),
+              ` ${upstreamStage.name || upstreamStage.refId}`,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+function stageName(execution, refId) {
+  const stage = execution?.stages?.find((candidate) => candidate.refId === refId);
+  return stage?.name || refId;
+}
+
+function GceTagImageExecutionDetails(props) {
+  const { current, execution, stage } = props;
+  const context = stage.context || {};
+  const targets = context.targets || [];
+  const tags = Object.entries(context.tags || {}).filter(([, value]) => value !== null);
+  const consideredStages = context.consideredStages || [];
+
+  return h(
+    ExecutionDetailsSection,
+    { name: props.name, current },
+    !!targets.length &&
+      h(
+        'div',
+        { className: 'row' },
+        h(
+          'div',
+          { className: 'col-md-12' },
+          h(
+            'dl',
+            { className: 'dl-narrow dl-horizontal' },
+            h('dt', null, 'Account'),
+            h('dd', null, context.credentials),
+            h('dt', null, 'Images'),
+            targets.map((target) => h('dd', { key: target.imageName }, target.imageName)),
+          ),
+        ),
+      ),
+    h(
+      'div',
+      { className: 'row' },
+      h(
+        'div',
+        { className: 'col-md-12' },
+        h(
+          'dl',
+          { className: 'dl-narrow dl-horizontal' },
+          h('dt', null, 'Tags'),
+          tags.map(([key, value]) => h('dd', { key }, `${key} = ${value}`)),
+          !!consideredStages.length && h('dt', null, 'Stages'),
+          consideredStages.map((refId) => h('dd', { key: refId }, stageName(execution, refId))),
+        ),
+      ),
+    ),
+    h(StageFailureMessage, { stage, message: stage.failureMessage }),
+  );
+}
+GceTagImageExecutionDetails.title = 'tagImageConfig';
+
+export function registerGceTagImageStage() {
+  Registry.pipeline.registerStage({
+    provides: 'upsertImageTags',
+    cloudProvider: 'gce',
+    component: GceTagImageStageConfig,
+    executionDetailsSections: [GceTagImageExecutionDetails, ExecutionDetailsTasks],
+  });
+}