@spinnaker/google 2026.2.2 → 2026.3.0

package/src/pipeline/stages/bake/gceBakeStage.js

@@ -1,171 +1,378 @@
-'use strict';
-
-import { module } from 'angular';
-import _ from 'lodash';
+import React from 'react';
 
 import {
   ArtifactReferenceService,
   AuthenticationService,
   BakeExecutionLabel,
   BakeryReader,
+  ExecutionArtifactTab,
+  ExecutionDetailsSection,
+  ExecutionDetailsTasks,
   ExpectedArtifactService,
-  PipelineTemplates,
+  MapEditor,
   Registry,
   SETTINGS,
+  StageConfigField,
+  StageFailureMessage,
 } from '@spinnaker/core';
-import { GOOGLE_PIPELINE_STAGES_BAKE_BAKEEXECUTIONDETAILS_CONTROLLER } from './bakeExecutionDetails.controller';
-
-export const GOOGLE_PIPELINE_STAGES_BAKE_GCEBAKESTAGE = 'spinnaker.gce.pipeline.stage..bakeStage';
-export const name = GOOGLE_PIPELINE_STAGES_BAKE_GCEBAKESTAGE; // for backwards compatibility
-module(GOOGLE_PIPELINE_STAGES_BAKE_GCEBAKESTAGE, [GOOGLE_PIPELINE_STAGES_BAKE_BAKEEXECUTIONDETAILS_CONTROLLER])
-  .config(function () {
-    Registry.pipeline.registerStage({
-      provides: 'bake',
-      cloudProvider: 'gce',
-      label: 'Bake',
-      description: 'Bakes an image',
-      templateUrl: require('./bakeStage.html'),
-      executionDetailsUrl: require('./bakeExecutionDetails.html'),
-      executionLabelComponent: BakeExecutionLabel,
-      extraLabelLines: (stage) => {
-        return stage.masterStage.context.allPreviouslyBaked || stage.masterStage.context.somePreviouslyBaked ? 1 : 0;
+
+const h = React.createElement;
+
+function updateStage(stage, updateStage, changes) {
+  updateStage({ ...stage, ...changes });
+}
+
+function showAdvanced(stage) {
+  return !!(
+    stage.templateFileName ||
+    (stage.extendedAttributes && Object.keys(stage.extendedAttributes).length) ||
+    stage.varFileName ||
+    stage.baseAmi ||
+    stage.accountName
+  );
+}
+
+class GceBakeStageConfig extends React.Component {
+  state = {
+    baseLabelOptions: [],
+    baseOsOptions: [],
+    roscoMode: false,
+    showAdvancedOptions: showAdvanced(this.props.stage),
+  };
+
+  componentDidMount() {
+    const { stage, updateStage: update } = this.props;
+    stage.extendedAttributes = stage.extendedAttributes || {};
+    stage.region = 'global';
+    stage.cloudProvider = stage.cloudProvider || 'gce';
+    stage.user = stage.user || AuthenticationService.getAuthenticatedUser().name;
+
+    Promise.all([BakeryReader.getBaseOsOptions('gce'), BakeryReader.getBaseLabelOptions()]).then(
+      ([baseOsOptions, baseLabelOptions]) => {
+        const baseImages = baseOsOptions?.baseImages || [];
+        const changes = {};
+        if (!stage.baseOs && baseImages.length) {
+          changes.baseOs = baseImages[0].id;
+        }
+        if (!stage.baseLabel && baseLabelOptions?.length) {
+          changes.baseLabel = baseLabelOptions[0];
+        }
+        if (Object.keys(changes).length) {
+          update({ ...stage, ...changes });
+        }
+        this.setState({
+          baseLabelOptions: baseLabelOptions || [],
+          baseOsOptions: baseImages,
+          roscoMode:
+            SETTINGS.feature.roscoMode ||
+            (typeof SETTINGS.feature.roscoSelector === 'function' && SETTINGS.feature.roscoSelector(stage)),
+          showAdvancedOptions: showAdvanced({ ...stage, ...changes }),
+        });
       },
-      producesArtifacts: true,
-      supportsCustomTimeout: true,
-      validators: [
+    );
+  }
+
+  renderArtifactSelector() {
+    const { pipeline, stage, updateStage: update } = this.props;
+    const expectedArtifacts = ExpectedArtifactService.getExpectedArtifactsAvailableToStage(stage, pipeline);
+    const packageArtifactIds = stage.packageArtifactIds || [];
+
+    return h(
+      StageConfigField,
+      { label: 'Package Artifacts' },
+      h(
+        'select',
         {
-          type: 'anyFieldRequired',
-          fields: [
-            { fieldName: 'package', fieldLabel: 'Package' },
-            { fieldName: 'packageArtifactIds', fieldLabel: 'Package Artifacts' },
-          ],
+          className: 'form-control input-sm',
+          multiple: true,
+          value: packageArtifactIds,
+          onChange: (e) => {
+            const selected = Array.from(e.target.selectedOptions).map((option) => option.value);
+            updateStage(stage, update, { packageArtifactIds: selected });
+          },
         },
-      ],
-      restartable: true,
-      artifactExtractor: ExpectedArtifactService.accumulateArtifacts(['packageArtifactIds']),
-      artifactRemover: ArtifactReferenceService.removeArtifactFromFields(['packageArtifactIds']),
-    });
-  })
-  .controller('gceBakeStageCtrl', [
-    '$scope',
-    '$q',
-    '$uibModal',
-    function ($scope, $q, $uibModal) {
-      $scope.stage.extendedAttributes = $scope.stage.extendedAttributes || {};
-      $scope.stage.region = 'global';
-
-      if (!$scope.stage.cloudProvider) {
-        $scope.stage.cloudProvider = 'gce';
-      }
-
-      if (!$scope.stage.user) {
-        $scope.stage.user = AuthenticationService.getAuthenticatedUser().name;
-      }
-
-      $scope.viewState = {
-        loading: true,
-      };
-
-      function initialize() {
-        $scope.viewState.providerSelected = true;
-        $q.all([
-          BakeryReader.getBaseOsOptions('gce'),
-          BakeryReader.getBaseLabelOptions(),
-          ExpectedArtifactService.getExpectedArtifactsAvailableToStage($scope.stage, $scope.pipeline),
-        ]).then(function ([baseOsOptions, baseLabelOptions, expectedArtifacts]) {
-          $scope.baseOsOptions = baseOsOptions.baseImages;
-          $scope.baseLabelOptions = baseLabelOptions;
-          $scope.viewState.expectedArtifacts = expectedArtifacts;
-
-          if (!$scope.stage.baseOs && $scope.baseOsOptions && $scope.baseOsOptions.length) {
-            $scope.stage.baseOs = $scope.baseOsOptions[0].id;
-          }
-          if (!$scope.stage.baseLabel && $scope.baseLabelOptions && $scope.baseLabelOptions.length) {
-            $scope.stage.baseLabel = $scope.baseLabelOptions[0];
-          }
-          $scope.viewState.roscoMode =
-            SETTINGS.feature.roscoMode ||
-            (typeof SETTINGS.feature.roscoSelector === 'function' && SETTINGS.feature.roscoSelector($scope.stage));
-          $scope.showAdvancedOptions = showAdvanced();
-          $scope.viewState.loading = false;
-        });
-      }
-
-      function showAdvanced() {
-        const stage = $scope.stage;
-        return !!(
-          stage.templateFileName ||
-          (stage.extendedAttributes && _.size(stage.extendedAttributes) > 0) ||
-          stage.varFileName ||
-          stage.baseAmi ||
-          stage.accountName
-        );
-      }
-
-      function stageUpdated() {
-        deleteEmptyProperties();
-        // Since the selector computes using stage as an input, it needs to be able to recompute roscoMode on updates
-        if (typeof SETTINGS.feature.roscoSelector === 'function') {
-          $scope.viewState.roscoMode = SETTINGS.feature.roscoSelector($scope.stage);
-        }
-      }
+        expectedArtifacts.map((artifact) =>
+          h('option', { key: artifact.id, value: artifact.id }, artifact.displayName || artifact.id),
+        ),
+      ),
+    );
+  }
 
-      function deleteEmptyProperties() {
-        _.forOwn($scope.stage, function (val, key) {
-          if (val === '') {
-            delete $scope.stage[key];
-          }
-        });
-      }
+  renderAdvancedOptions() {
+    const { stage, updateStage: update } = this.props;
+    if (!this.state.showAdvancedOptions) {
+      return null;
+    }
 
-      this.addExtendedAttribute = function () {
-        if (!$scope.stage.extendedAttributes) {
-          $scope.stage.extendedAttributes = {};
-        }
-        $uibModal
-          .open({
-            templateUrl: PipelineTemplates.addExtendedAttributes,
-            controller: 'bakeStageAddExtendedAttributeController',
-            controllerAs: 'addExtendedAttribute',
-            resolve: {
-              extendedAttribute: function () {
-                return {
-                  key: '',
-                  value: '',
-                };
-              },
-            },
-          })
-          .result.then(function (extendedAttribute) {
-            $scope.stage.extendedAttributes[extendedAttribute.key] = extendedAttribute.value;
-          })
-          .catch(() => {});
-      };
-
-      this.removeExtendedAttribute = function (key) {
-        delete $scope.stage.extendedAttributes[key];
-      };
-
-      this.showTemplateFileName = function () {
-        return $scope.viewState.roscoMode || $scope.stage.templateFileName;
-      };
-
-      this.showAccountName = function () {
-        return $scope.viewState.roscoMode || $scope.stage.accountName;
-      };
-
-      this.showExtendedAttributes = function () {
-        return (
-          $scope.viewState.roscoMode || ($scope.stage.extendedAttributes && _.size($scope.stage.extendedAttributes) > 0)
-        );
-      };
-
-      this.showVarFileName = function () {
-        return $scope.viewState.roscoMode || $scope.stage.varFileName;
-      };
-
-      $scope.$watch('stage', stageUpdated, true);
-
-      initialize();
+    return h(
+      React.Fragment,
+      null,
+      h(
+        StageConfigField,
+        { label: 'Template File Name' },
+        h('input', {
+          className: 'form-control input-sm',
+          value: stage.templateFileName || '',
+          onChange: (e) => updateStage(stage, update, { templateFileName: e.target.value }),
+        }),
+      ),
+      h(
+        StageConfigField,
+        { label: 'Account Name' },
+        h('input', {
+          className: 'form-control input-sm',
+          value: stage.accountName || '',
+          onChange: (e) => updateStage(stage, update, { accountName: e.target.value }),
+        }),
+      ),
+      h(
+        StageConfigField,
+        { label: 'Extended Attributes' },
+        h(MapEditor, {
+          allowEmpty: true,
+          model: stage.extendedAttributes || {},
+          onChange: (extendedAttributes) => updateStage(stage, update, { extendedAttributes }),
+        }),
+      ),
+      h(
+        StageConfigField,
+        { label: 'Var File Name' },
+        h('input', {
+          className: 'form-control input-sm',
+          value: stage.varFileName || '',
+          onChange: (e) => updateStage(stage, update, { varFileName: e.target.value }),
+        }),
+      ),
+      h(
+        StageConfigField,
+        { label: 'Base Image' },
+        h('input', {
+          className: 'form-control input-sm',
+          value: stage.baseAmi || '',
+          onChange: (e) => updateStage(stage, update, { baseAmi: e.target.value }),
+        }),
+      ),
+    );
+  }
+
+  render() {
+    const { stage, updateStage: update } = this.props;
+    stage.extendedAttributes = stage.extendedAttributes || {};
+    stage.region = 'global';
+    stage.cloudProvider = stage.cloudProvider || 'gce';
+    stage.user = stage.user || AuthenticationService.getAuthenticatedUser().name;
+
+    return h(
+      'div',
+      null,
+      h(
+        StageConfigField,
+        { label: 'Package' },
+        h('input', {
+          className: 'form-control input-sm',
+          value: stage.package || '',
+          onChange: (e) => updateStage(stage, update, { package: e.target.value }),
+        }),
+      ),
+      this.renderArtifactSelector(),
+      h('hr'),
+      h(
+        StageConfigField,
+        { label: 'Base OS' },
+        h(
+          'select',
+          {
+            className: 'form-control input-sm',
+            value: stage.baseOs || '',
+            onChange: (e) => updateStage(stage, update, { baseOs: e.target.value }),
+          },
+          this.state.baseOsOptions.map((option) =>
+            h(
+              'option',
+              { key: option.id, value: option.id },
+              option.displayName || option.shortDescription || option.id,
+            ),
+          ),
+        ),
+      ),
+      h(
+        StageConfigField,
+        { label: 'Base Label' },
+        this.state.baseLabelOptions.map((baseLabel) =>
+          h(
+            'label',
+            { className: 'radio-inline', key: baseLabel },
+            h('input', {
+              checked: stage.baseLabel === baseLabel,
+              type: 'radio',
+              onChange: () => updateStage(stage, update, { baseLabel }),
+            }),
+            ` ${baseLabel}`,
+          ),
+        ),
+      ),
+      h('hr'),
+      (this.state.roscoMode || stage.rebake) &&
+        h(
+          StageConfigField,
+          { label: 'Rebake' },
+          h(
+            'div',
+            { className: 'checkbox', style: { marginBottom: 0 } },
+            h(
+              'label',
+              null,
+              h('input', {
+                checked: !!stage.rebake,
+                type: 'checkbox',
+                onChange: (e) => updateStage(stage, update, { rebake: e.target.checked }),
+              }),
+              ' Rebake image without regard to the status of any existing bake',
+            ),
+          ),
+        ),
+      h(
+        'div',
+        { className: 'form-group' },
+        h(
+          'div',
+          { className: 'col-md-9 col-md-offset-1' },
+          h(
+            'div',
+            { className: 'checkbox' },
+            h(
+              'label',
+              null,
+              h('input', {
+                checked: this.state.showAdvancedOptions,
+                type: 'checkbox',
+                onChange: (e) => this.setState({ showAdvancedOptions: e.target.checked }),
+              }),
+              h('strong', null, ' Show Advanced Options'),
+            ),
+          ),
+        ),
+      ),
+      this.renderAdvancedOptions(),
+    );
+  }
+}
+
+function valueForPath(source, path) {
+  const value = path.split('.').reduce((acc, key) => acc?.[key], source);
+  return value == null ? '' : String(value);
+}
+
+export function interpolatedBakeDetailUrl(stage) {
+  const context = stage.context || {};
+  const roscoMode =
+    SETTINGS.feature.roscoMode ||
+    (typeof SETTINGS.feature.roscoSelector === 'function' && SETTINGS.feature.roscoSelector(context));
+  const template = (roscoMode && SETTINGS.roscoDetailUrl ? SETTINGS.roscoDetailUrl : SETTINGS.bakeryDetailUrl) || '';
+  const source = { context };
+
+  return template.replace(/\{\{\s*([^}]+?)\s*\}\}/g, (_match, path) => valueForPath(source, path));
+}
+
+function GceBakeExecutionDetails(props) {
+  const { current, execution, stage } = props;
+  const context = stage.context || {};
+  const roscoMode =
+    SETTINGS.feature.roscoMode ||
+    (typeof SETTINGS.feature.roscoSelector === 'function' && SETTINGS.feature.roscoSelector(context));
+  const bakeDetailUrl = interpolatedBakeDetailUrl(stage);
+
+  return h(
+    ExecutionDetailsSection,
+    { name: props.name, current },
+    h(
+      'div',
+      { className: 'row' },
+      h(
+        'div',
+        { className: 'col-md-6' },
+        h(
+          'dl',
+          { className: 'dl-narrow dl-horizontal' },
+          h('dt', null, 'Image'),
+          h('dd', null, context.ami),
+          h('dt', null, 'Region'),
+          h('dd', null, context.region),
+          h('dt', null, 'Package'),
+          h('dd', null, context.package),
+        ),
+      ),
+      h(
+        'div',
+        { className: 'col-md-6' },
+        h(
+          'dl',
+          { className: 'dl-narrow dl-horizontal' },
+          h('dt', null, 'Base OS'),
+          h('dd', null, context.baseOs),
+          h('dt', null, 'Label'),
+          h('dd', null, context.baseLabel),
+          (roscoMode || execution.trigger?.rebake || context.rebake) && h('dt', null, 'Rebake'),
+          (roscoMode || execution.trigger?.rebake || context.rebake) &&
+            h('dd', null, String(execution.trigger?.rebake || context.rebake || false)),
+          context.templateFileName && h('dt', null, 'Template'),
+          context.templateFileName && h('dd', null, context.templateFileName),
+          context.accountName && h('dt', null, 'Account Name'),
+          context.accountName && h('dd', null, context.accountName),
+          context.varFileName && h('dt', null, 'Var File'),
+          context.varFileName && h('dd', null, context.varFileName),
+        ),
+      ),
+    ),
+    h(StageFailureMessage, { stage, message: stage.failureMessage }),
+    context.region &&
+      context.status?.resourceId &&
+      h(
+        'div',
+        { className: 'row' },
+        h(
+          'div',
+          { className: 'col-md-12' },
+          h(
+            'div',
+            { className: `alert alert-${stage.isFailed ? 'danger' : 'info'}` },
+            context.previouslyBaked && h('div', null, 'No changes detected; reused existing bake'),
+            bakeDetailUrl &&
+              h('a', { target: '_blank', rel: 'noopener noreferrer', href: bakeDetailUrl }, 'View Bakery Details'),
+            context.imageName &&
+              h('div', null, h('strong', null, 'Image:'), h('div', { className: 'break-word' }, context.imageName)),
+          ),
+        ),
+      ),
+  );
+}
+GceBakeExecutionDetails.title = 'bakeConfig';
+
+export function registerGceBakeStage() {
+  Registry.pipeline.registerStage({
+    provides: 'bake',
+    cloudProvider: 'gce',
+    label: 'Bake',
+    description: 'Bakes an image',
+    component: GceBakeStageConfig,
+    executionDetailsSections: [GceBakeExecutionDetails, ExecutionDetailsTasks, ExecutionArtifactTab],
+    executionLabelComponent: BakeExecutionLabel,
+    extraLabelLines: (stage) => {
+      return stage.masterStage.context.allPreviouslyBaked || stage.masterStage.context.somePreviouslyBaked ? 1 : 0;
     },
-  ]);
+    producesArtifacts: true,
+    supportsCustomTimeout: true,
+    validators: [
+      {
+        type: 'anyFieldRequired',
+        fields: [
+          { fieldName: 'package', fieldLabel: 'Package' },
+          { fieldName: 'packageArtifactIds', fieldLabel: 'Package Artifacts' },
+        ],
+      },
+    ],
+    restartable: true,
+    artifactExtractor: ExpectedArtifactService.accumulateArtifacts(['packageArtifactIds']),
+    artifactRemover: ArtifactReferenceService.removeArtifactFromFields(['packageArtifactIds']),
+  });
+}

package/src/pipeline/stages/cloneServerGroup/gceCloneServerGroupStage.js

@@ -1,83 +1,17 @@
-'use strict';
-
-import { module } from 'angular';
-import _ from 'lodash';
-
-import { AccountService, NameUtils, Registry, StageConstants } from '@spinnaker/core';
-
-export const GOOGLE_PIPELINE_STAGES_CLONESERVERGROUP_GCECLONESERVERGROUPSTAGE =
-  'spinnaker.gce.pipeline.stage..cloneServerGroupStage';
-export const name = GOOGLE_PIPELINE_STAGES_CLONESERVERGROUP_GCECLONESERVERGROUPSTAGE; // for backwards compatibility
-module(GOOGLE_PIPELINE_STAGES_CLONESERVERGROUP_GCECLONESERVERGROUPSTAGE, [])
-  .config(function () {
-    Registry.pipeline.registerStage({
-      provides: 'cloneServerGroup',
-      cloudProvider: 'gce',
-      templateUrl: require('./cloneServerGroupStage.html'),
-      executionStepLabelUrl: require('./cloneServerGroupStepLabel.html'),
-      validators: [
-        { type: 'requiredField', fieldName: 'targetCluster', fieldLabel: 'cluster' },
-        { type: 'requiredField', fieldName: 'target' },
-        { type: 'requiredField', fieldName: 'region' },
-        { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
-      ],
-    });
-  })
-  .controller('gceCloneServerGroupStageCtrl', [
-    '$scope',
-    function ($scope) {
-      const stage = $scope.stage;
-
-      $scope.viewState = {
-        accountsLoaded: false,
-      };
-
-      AccountService.listAccounts('gce').then((accounts) => {
-        $scope.accounts = accounts;
-        $scope.viewState.accountsLoaded = true;
-      });
-
-      this.cloneTargets = StageConstants.TARGET_LIST;
-      stage.target = stage.target || this.cloneTargets[0].val;
-      stage.application = $scope.application.name;
-      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;
-      }
-
-      this.targetClusterUpdated = () => {
-        if (stage.targetCluster) {
-          const clusterName = NameUtils.parseServerGroupName(stage.targetCluster);
-          stage.stack = clusterName.stack;
-          stage.freeFormDetails = clusterName.freeFormDetails;
-        } else {
-          stage.stack = '';
-          stage.freeFormDetails = '';
-        }
-      };
-
-      $scope.$watch('stage.targetCluster', this.targetClusterUpdated);
-
-      this.removeCapacity = () => {
-        delete stage.capacity;
-      };
-
-      if (!_.has(stage, 'useSourceCapacity')) {
-        stage.useSourceCapacity = true;
-      }
-
-      this.toggleDisableTraffic = () => {
-        stage.disableTraffic = !stage.disableTraffic;
-      };
-    },
-  ]);
+import { Registry } from '@spinnaker/core';
+
+import { GceCloneServerGroupStageConfig } from '../googleStageConfig';
+
+export function registerGceCloneServerGroupStage() {
+  Registry.pipeline.registerStage({
+    provides: 'cloneServerGroup',
+    cloudProvider: 'gce',
+    component: GceCloneServerGroupStageConfig,
+    validators: [
+      { type: 'requiredField', fieldName: 'targetCluster', fieldLabel: 'cluster' },
+      { type: 'requiredField', fieldName: 'target' },
+      { type: 'requiredField', fieldName: 'region' },
+      { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
+    ],
+  });
+}