@spinnaker/azure 0.0.0-main-2

package/src/logo/azure.icon.svg

@@ -0,0 +1,196 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#00A2D8;}
+	.st1{fill:#F79E1C;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#2ABAEC;}
+	.st3{fill:#F7B218;}
+	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:none;}
+	.st5{fill:#00A2D8;}
+	.st6{fill:#2ABAEC;}
+	.st7{fill:#323A45;}
+	.st8{fill:#88909B;}
+	.st9{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st10{fill:#A3BF3A;}
+	.st11{fill:#80A23E;}
+	.st12{fill:#7B4D87;}
+	.st13{fill:#2F75BB;}
+	.st14{fill-rule:evenodd;clip-rule:evenodd;fill:#85C9D5;}
+	.st15{opacity:0.15;fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st16{fill:#A5D9E2;}
+	.st17{fill:#85C9D5;}
+	.st18{fill-rule:evenodd;clip-rule:evenodd;fill:#323A45;}
+	.st19{fill:#FFFFFF;}
+	.st20{fill:#DAEFF3;}
+	.st21{fill:#2A65AF;}
+	.st22{fill:#F6ECF4;}
+	.st23{fill-rule:evenodd;clip-rule:evenodd;fill:#2F75BB;}
+	.st24{fill:none;}
+	.st25{fill-rule:evenodd;clip-rule:evenodd;fill:#F9BA19;}
+	.st26{fill-rule:evenodd;clip-rule:evenodd;fill:#A3BF3A;}
+	.st27{fill:#F6931D;}
+	.st28{fill:#5E6D80;}
+	.st29{fill-rule:evenodd;clip-rule:evenodd;}
+	.st30{fill:#00B8E2;}
+	.st31{fill-rule:evenodd;clip-rule:evenodd;fill:#5E6D80;}
+	.st32{fill:none;stroke:#85C9D5;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;}
+	.st33{fill:#2A89CA;}
+	.st34{fill-rule:evenodd;clip-rule:evenodd;fill:#7B4D87;}
+	.st35{opacity:0.3;fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st36{opacity:0.3;fill:#FFFFFF;}
+	.st37{fill-rule:evenodd;clip-rule:evenodd;fill:#78B843;}
+	.st38{fill:#78B843;}
+	.st39{fill-rule:evenodd;clip-rule:evenodd;fill:#EDF0F4;}
+	.st40{fill:#005BA3;}
+	.st41{fill:#0F80B0;}
+	.st42{fill:#005F87;}
+	.st43{fill:#B7D332;}
+	.st44{fill:#7FB900;}
+	.st45{opacity:0.6;fill:#FFFFFF;}
+	.st46{opacity:0.4;fill:#FFFFFF;}
+	.st47{opacity:0.1;clip-path:url(#XMLID_13_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st48{opacity:0.1;clip-path:url(#XMLID_64_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st49{opacity:0.1;clip-path:url(#XMLID_65_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st50{fill:#73BDCD;}
+	.st51{opacity:0.6;fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st52{fill-rule:evenodd;clip-rule:evenodd;fill:#80A23E;stroke:#FFFFFF;stroke-width:4;stroke-miterlimit:10;}
+	.st53{fill-rule:evenodd;clip-rule:evenodd;fill:#80A23E;}
+	.st54{clip-path:url(#XMLID_67_);fill:none;}
+	.st55{fill-rule:evenodd;clip-rule:evenodd;fill:#F7B218;}
+	.st56{opacity:0.35;clip-path:url(#XMLID_69_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st57{opacity:0.8;fill:#FFFFFF;}
+	.st58{opacity:0.35;clip-path:url(#XMLID_79_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st59{fill-rule:evenodd;clip-rule:evenodd;fill:#DB5B26;}
+	.st60{fill-rule:evenodd;clip-rule:evenodd;fill:#F58B1F;}
+	.st61{opacity:0.35;clip-path:url(#XMLID_84_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st62{fill-rule:evenodd;clip-rule:evenodd;fill:#404B59;}
+	.st63{opacity:0.1;clip-path:url(#XMLID_118_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st64{fill-rule:evenodd;clip-rule:evenodd;fill:#D1B0D3;}
+	.st65{opacity:0.15;clip-path:url(#XMLID_119_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st66{fill-rule:evenodd;clip-rule:evenodd;fill:#15B2E7;}
+	.st67{fill-rule:evenodd;clip-rule:evenodd;fill:#E1F3F8;}
+	.st68{opacity:0.15;clip-path:url(#XMLID_120_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st69{opacity:0.15;clip-path:url(#XMLID_124_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st70{opacity:0.3;clip-path:url(#XMLID_125_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st71{opacity:0.15;clip-path:url(#XMLID_126_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st72{fill-rule:evenodd;clip-rule:evenodd;fill:#7C8737;}
+	.st73{opacity:0.3;clip-path:url(#XMLID_127_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st74{opacity:0.15;clip-path:url(#XMLID_130_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st75{fill:#CCCBCB;}
+	.st76{fill-rule:evenodd;clip-rule:evenodd;fill:#88909B;}
+	.st77{opacity:0.1;fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st78{opacity:0.1;clip-path:url(#XMLID_131_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st79{opacity:0.1;clip-path:url(#XMLID_133_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st80{display:none;}
+	.st81{fill:#45B6F4;}
+	.st82{fill:#89919C;}
+	.st83{fill:#61ADD1;}
+	.st84{fill:#3899C6;}
+	.st85{fill:#F78F08;}
+	.st86{fill:#C1BFBC;}
+	.st87{fill:#7A7A7A;}
+	.st88{fill:#B3B4B5;}
+	.st89{opacity:0.48;}
+	.st90{fill:#A0A1A2;}
+	.st91{fill:#A1DEF0;}
+	.st92{fill:#804998;}
+	.st93{fill:#0072C6;}
+	.st94{fill:#59B4D9;}
+	.st95{fill:#3999C6;}
+	.st96{fill:#0078D7;}
+	.st97{fill:#D1B972;}
+	.st98{fill:#FEE087;}
+	.st99{fill:#B1CE2D;}
+	.st100{fill:#7FBA00;}
+	.st101{fill:#FCD116;}
+	.st102{fill:#719904;}
+	.st103{fill:#B8D432;}
+	.st104{fill-rule:evenodd;clip-rule:evenodd;fill:#804898;}
+	.st105{fill-rule:evenodd;clip-rule:evenodd;fill:#6B2980;}
+	.st106{fill:#6B2980;}
+	.st107{opacity:0.3;fill:#FFFFFF;enable-background:new    ;}
+	.st108{opacity:0.2;fill:#1E1E1E;enable-background:new    ;}
+	.st109{fill:#33BCF0;}
+	.st110{opacity:0.2;fill:#636363;}
+	.st111{opacity:0.1;clip-path:url(#XMLID_134_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st112{fill:#8B77B6;}
+	.st113{fill:#9B6CAC;}
+	.st114{fill:#874B94;}
+	.st115{opacity:0.4;fill:#7FBA00;enable-background:new    ;}
+	.st116{opacity:0.8;fill:#7FBA00;enable-background:new    ;}
+	.st117{opacity:0.6;fill:#7FBA00;enable-background:new    ;}
+	.st118{opacity:0.25;fill:#7FBA00;enable-background:new    ;}
+	.st119{fill:#DD5900;}
+	.st120{fill:#FF8C00;}
+	.st121{fill-rule:evenodd;clip-rule:evenodd;fill:#3E3E3E;}
+	.st122{fill:url(#path3060_1_);}
+	.st123{fill:#1870C5;}
+	.st124{fill:#72BFDF;}
+	.st125{fill:#3C3938;}
+	.st126{fill:#0072AC;}
+	.st127{fill:#0079B6;}
+	.st128{fill:#00A2D9;}
+	.st129{fill:#BFDC34;}
+	.st130{fill:#898989;}
+	.st131{fill:#EDF0F5;}
+	.st132{fill:#A3A4A7;}
+	.st133{fill:#353535;}
+	.st134{fill:#FF8C02;}
+	.st135{fill:#00AC8C;}
+	.st136{fill:#6EC2E9;}
+	.st137{fill:#442359;}
+	.st138{fill:#6DC0E6;}
+	.st139{fill:#432056;}
+	.st140{fill:#86CAD7;}
+	.st141{fill:#009E48;}
+	.st142{opacity:0.2;fill:#FFFFFF;enable-background:new    ;}
+	.st143{fill:#68217A;}
+	.st144{fill:#E5E5E5;}
+	.st145{opacity:0.15;fill:#FFFFFF;enable-background:new    ;}
+	.st146{fill:#3898C6;}
+	.st147{fill:#80BA42;}
+	.st148{fill:#B3D234;}
+	.st149{fill-rule:evenodd;clip-rule:evenodd;fill:#F9F9F9;}
+	.st150{fill-rule:evenodd;clip-rule:evenodd;fill:#008EBE;}
+	.st151{opacity:0.1;fill-rule:evenodd;clip-rule:evenodd;fill:#F1F1F2;}
+	.st152{fill:#BAD80A;}
+	.st153{clip-path:url(#SVGID_2_);}
+	.st154{fill:#00BCF2;}
+	.st155{fill:#5AB4DA;}
+	.st156{fill:none;stroke:#5AB4DA;stroke-width:0.75;stroke-miterlimit:10;}
+	.st157{fill:#3898C5;}
+	.st158{fill:#7A7B7B;}
+	.st159{fill:#545555;}
+	.st160{fill:#D6EAF3;}
+	.st161{fill:#009580;}
+	.st162{fill:#BA141A;}
+	.st163{fill:#7AC3E1;}
+	.st164{fill:#E27226;}
+	.st165{fill:#FF9D26;}
+	.st166{opacity:0.12;fill:#BA141A;}
+	.st167{fill:#3C98C5;}
+	.st168{fill:#5AB3D8;}
+	.st169{fill:#AAD8EB;}
+	.st170{fill:#797979;}
+	.st171{fill:#959595;}
+	.st172{fill:#D1D1D1;}
+	.st173{clip-path:url(#SVGID_4_);}
+	.st174{fill:#33A2E5;}
+	.st175{fill:#71C2EA;}
+	.st176{fill:#005091;}
+	.st177{clip-path:url(#SVGID_6_);}
+	.st178{fill:#ACD64D;}
+</style>
+<g>
+	<g>
+		<g>
+			<g>
+				<polygon class="st93" points="26.5,4.5 12.5,15.5 1.5,35.5 11.5,35.5 				"/>
+				<polygon class="st93" points="27.5,7.5 21.5,22.5 32.5,35.5 11.5,40.5 46.5,40.5 				"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

package/src/logo/azure.logo.less

@@ -0,0 +1,6 @@
+.cloud-provider-logo {
+  .icon-azure {
+    mask-image: url('azure.icon.svg');
+    background-color: #0078d4;
+  }
+}

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

@@ -0,0 +1,276 @@
+'use strict';
+
+import { module } from 'angular';
+import _ from 'lodash';
+
+import {
+  AccountService,
+  AuthenticationService,
+  BakeExecutionLabel,
+  BakeryReader,
+  PipelineTemplates,
+  Registry,
+  SETTINGS,
+} from '@spinnaker/core';
+
+import { AZURE_PIPELINE_STAGES_BAKE_BAKEEXECUTIONDETAILS_CONTROLLER } from './bakeExecutionDetails.controller';
+import { AZURE_IMAGE_IMAGE_READER } from '../../../image/image.reader';
+import { AZURE_SERVERGROUP_CONFIGURE_SERVERGROUPCOMMANDBUILDER_SERVICE } from './../../../serverGroup/configure/serverGroupCommandBuilder.service';
+
+export const AZURE_PIPELINE_STAGES_BAKE_AZUREBAKESTAGE = 'spinnaker.azure.pipeline.stage.bakeStage';
+export const name = AZURE_PIPELINE_STAGES_BAKE_AZUREBAKESTAGE; // for backwards compatibility
+module(AZURE_PIPELINE_STAGES_BAKE_AZUREBAKESTAGE, [
+  AZURE_SERVERGROUP_CONFIGURE_SERVERGROUPCOMMANDBUILDER_SERVICE,
+  AZURE_IMAGE_IMAGE_READER,
+  AZURE_PIPELINE_STAGES_BAKE_BAKEEXECUTIONDETAILS_CONTROLLER,
+])
+  .config(function () {
+    Registry.pipeline.registerStage({
+      provides: 'bake',
+      cloudProvider: 'azure',
+      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;
+      },
+      supportsCustomTimeout: true,
+      validators: [
+        { type: 'requiredField', fieldName: 'package' },
+        { type: 'requiredField', fieldName: 'regions' },
+        {
+          type: 'upstreamVersionProvided',
+          checkParentTriggers: true,
+          getMessage: (labels) =>
+            'Bake stages should always have a stage or trigger preceding them that provides version information: ' +
+            '<ul>' +
+            labels.map((label) => `<li>${label}</li>`).join('') +
+            '</ul>' +
+            'Otherwise, Spinnaker will bake and deploy the most-recently built package.',
+        },
+      ],
+      restartable: true,
+    });
+  })
+  .controller('azureBakeStageCtrl', [
+    '$scope',
+    '$q',
+    'azureImageReader',
+    '$uibModal',
+    function ($scope, $q, azureImageReader, $uibModal) {
+      $scope.stage.extendedAttributes = $scope.stage.extendedAttributes || {};
+      $scope.stage.regions = $scope.stage.regions || [];
+
+      if (!$scope.stage.user) {
+        $scope.stage.user = AuthenticationService.getAuthenticatedUser().name;
+      }
+
+      $scope.viewState = {
+        loading: true,
+      };
+
+      function initialize() {
+        $q.all([
+          AccountService.getCredentialsKeyedByAccount('azure'),
+          BakeryReader.getRegions('azure'),
+          BakeryReader.getBaseOsOptions('azure'),
+          BakeryReader.getBaseLabelOptions(),
+        ]).then(function ([credentialsKeyedByAccount, regions, baseOsOptions, baseLabelOptions]) {
+          $scope.accounts = Object.keys(credentialsKeyedByAccount);
+          $scope.regions = regions;
+          if ($scope.regions.length === 1) {
+            $scope.stage.region = $scope.regions[0];
+          } else if (!$scope.regions.includes($scope.stage.region)) {
+            delete $scope.stage.region;
+          }
+          if (!$scope.stage.regions.length && $scope.application.defaultRegions.azure) {
+            $scope.stage.regions.push($scope.application.defaultRegions.azure);
+          }
+          if (!$scope.stage.regions.length && $scope.application.defaultRegions.azure) {
+            $scope.stage.regions.push($scope.application.defaultRegions.azure);
+          }
+          $scope.baseOsOptions = baseOsOptions.baseImages;
+
+          $scope.baseLabelOptions = baseLabelOptions;
+          $scope.osTypeOptions = ['linux', 'windows'];
+          $scope.packageTypeOptions = ['DEB', 'RPM'];
+
+          $scope.viewState.roscoMode =
+            SETTINGS.feature.roscoMode ||
+            (typeof SETTINGS.feature.roscoSelector === 'function' && SETTINGS.feature.roscoSelector($scope.stage));
+          $scope.showAdvancedOptions = showAdvanced();
+          $scope.viewState.loading = false;
+
+          if ($scope.stage.managedImage != null) {
+            $scope.managedImagesWasChosen = true;
+            setManagedImages();
+          }
+          $scope.defaultImagesWasChosen = $scope.stage.baseOs != null;
+          $scope.customImagesWasChosen = $scope.stage.publisher != null;
+        });
+      }
+
+      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);
+        }
+      }
+
+      function showAdvanced() {
+        const stg = $scope.stage;
+        return !!(
+          stg.templateFileName ||
+          (stg.extendedAttributes && _.size(stg.extendedAttributes) > 0) ||
+          stg.varFileName
+        );
+      }
+
+      function deleteEmptyProperties() {
+        _.forOwn($scope.stage, function (val, key) {
+          if (val === '') {
+            delete $scope.stage[key];
+          }
+        });
+      }
+
+      function setManagedImages() {
+        azureImageReader
+          .findImages({ provider: 'azure', managedImages: true, account: $scope.stage.account })
+          .then(function (images) {
+            let managedImageOptions = [];
+            for (let i in images) {
+              let image = images[i];
+              let newImage = {
+                id: image.imageName,
+                osType: image.ostype,
+                name: image.imageName,
+              };
+              managedImageOptions.push(newImage);
+            }
+            $scope.managedImageOptions = managedImageOptions;
+          })
+          .catch(() => {});
+      }
+
+      function setRegions() {
+        AccountService.getRegionsForAccount($scope.stage.account)
+          .then(function (regions) {
+            $scope.regions = regions.map((r) => r.name);
+          })
+          .catch(() => {});
+      }
+
+      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.showExtendedAttributes = function () {
+        return (
+          $scope.viewState.roscoMode || ($scope.stage.extendedAttributes && _.size($scope.stage.extendedAttributes) > 0)
+        );
+      };
+
+      this.showVarFileName = function () {
+        return $scope.viewState.roscoMode || $scope.stage.varFileName;
+      };
+
+      this.showDefaultImages = function () {
+        $scope.managedImagesWasChosen = false;
+        $scope.defaultImagesWasChosen = true;
+        $scope.customImagesWasChosen = false;
+
+        $scope.stage.managedImage = null;
+        $scope.stage.publisher = null;
+        $scope.stage.offer = null;
+        $scope.stage.sku = null;
+        $scope.stage.osType = null;
+        $scope.stage.packageType = null;
+      };
+
+      this.showManagedImages = function () {
+        setManagedImages();
+
+        $scope.managedImagesWasChosen = true;
+        $scope.defaultImagesWasChosen = false;
+        $scope.customImagesWasChosen = false;
+
+        $scope.stage.osType = null;
+        $scope.stage.baseOs = null;
+        $scope.stage.publisher = null;
+        $scope.stage.offer = null;
+        $scope.stage.sku = null;
+        $scope.stage.packageType = null;
+      };
+
+      this.showCustomImages = function () {
+        $scope.managedImagesWasChosen = false;
+        $scope.defaultImagesWasChosen = false;
+        $scope.customImagesWasChosen = true;
+
+        $scope.stage.baseOs = null;
+        $scope.stage.managedImage = null;
+        $scope.stage.osType = null;
+        $scope.stage.packageType = null;
+      };
+
+      this.onChangeAccount = () => {
+        $scope.stage.osType = null;
+        $scope.stage.packageType = null;
+        $scope.stage.managedImage = null;
+
+        if ($scope.stage.account) {
+          setRegions();
+        }
+
+        if ($scope.managedImagesWasChosen) {
+          setManagedImages();
+        }
+      };
+
+      $scope.onChangeManagedImage = () => {
+        $scope.stage.packageType = null;
+        const selectedManagedImage = _.find($scope.managedImageOptions, { id: $scope.stage.managedImage });
+        $scope.stage.osType = selectedManagedImage.osType.toLowerCase();
+      };
+
+      this.onChangeOsType = function (e) {
+        $scope.stage.packageType = null;
+      };
+
+      $scope.$watch('stage', stageUpdated, true);
+
+      initialize();
+    },
+  ]);

package/src/pipeline/stages/bake/bakeExecutionDetails.controller.js

@@ -0,0 +1,40 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import { module } from 'angular';
+
+import { SETTINGS } from '@spinnaker/core';
+
+export const AZURE_PIPELINE_STAGES_BAKE_BAKEEXECUTIONDETAILS_CONTROLLER =
+  'spinnaker.azure.pipeline.stage.bake.executionDetails.controller';
+export const name = AZURE_PIPELINE_STAGES_BAKE_BAKEEXECUTIONDETAILS_CONTROLLER; // for backwards compatibility
+module(AZURE_PIPELINE_STAGES_BAKE_BAKEEXECUTIONDETAILS_CONTROLLER, [UIROUTER_ANGULARJS]).controller(
+  'azureBakeExecutionDetailsCtrl',
+  [
+    '$scope',
+    '$stateParams',
+    'executionDetailsSectionService',
+    '$interpolate',
+    function ($scope, $stateParams, executionDetailsSectionService, $interpolate) {
+      $scope.configSections = ['bakeConfig', 'taskStatus'];
+
+      const initialized = () => {
+        $scope.detailsSection = $stateParams.details;
+        $scope.provider = $scope.stage.context.cloudProviderType || 'azure';
+        $scope.roscoMode =
+          SETTINGS.feature.roscoMode ||
+          (typeof SETTINGS.feature.roscoSelector === 'function' &&
+            SETTINGS.feature.roscoSelector($scope.stage.context));
+        $scope.bakeryDetailUrl = $interpolate(
+          $scope.roscoMode && SETTINGS.roscoDetailUrl ? SETTINGS.roscoDetailUrl : SETTINGS.bakeryDetailUrl,
+        );
+      };
+
+      const initialize = () => executionDetailsSectionService.synchronizeSection($scope.configSections, initialized);
+
+      initialize();
+
+      $scope.$on('$stateChangeSuccess', initialize);
+    },
+  ],
+);

package/src/pipeline/stages/bake/bakeExecutionDetails.html

@@ -0,0 +1,50 @@
+<div ng-controller="azureBakeExecutionDetailsCtrl">
+  <execution-details-section-nav sections="configSections"></execution-details-section-nav>
+  <div class="step-section-details" ng-if="detailsSection === 'bakeConfig'">
+    <div class="row">
+      <div class="col-md-6">
+        <dl class="dl-narrow dl-horizontal">
+          <dt if-multiple-providers>Provider</dt>
+          <dd if-multiple-providers>Azure</dd>
+          <dt>Image</dt>
+          <dd>{{stage.context.ami}}</dd>
+          <dt>Region</dt>
+          <dd>{{stage.context.region}}</dd>
+          <dt>Package</dt>
+          <dd>{{stage.context.package}}</dd>
+        </dl>
+      </div>
+      <div class="col-md-6">
+        <dl class="dl-narrow dl-horizontal">
+          <dt>Base OS</dt>
+          <dd>{{stage.context.baseOs}}</dd>
+          <dt>Label</dt>
+          <dd>{{stage.context.baseLabel}}</dd>
+          <dt ng-if="roscoMode || execution.trigger.rebake || stage.context.rebake">Rebake</dt>
+          <dd ng-if="roscoMode || execution.trigger.rebake || stage.context.rebake">
+            {{execution.trigger.rebake || stage.context.rebake || false}}
+          </dd>
+          <dt ng-if="stage.context.templateFileName">Template</dt>
+          <dd ng-if="stage.context.templateFileName">{{stage.context.templateFileName}}</dd>
+          <dt ng-if="stage.context.varFileName">Var File</dt>
+          <dd ng-if="stage.context.varFileName">{{stage.context.varFileName}}</dd>
+        </dl>
+      </div>
+    </div>
+    <stage-failure-message stage="stage" message="stage.failureMessage"></stage-failure-message>
+
+    <div class="row" ng-if="stage.context.region && stage.context.status.resourceId">
+      <div class="col-md-12">
+        <div class="alert alert-{{stage.isFailed ? 'danger' : 'info'}}">
+          <div ng-if="stage.context.previouslyBaked">No changes detected; reused existing bake</div>
+          <a target="_blank" href="{{ bakeryDetailUrl(stage) }}"> View Bakery Details </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="step-section-details" ng-if="detailsSection === 'taskStatus'">
+    <div class="row">
+      <execution-step-details item="stage"></execution-step-details>
+    </div>
+  </div>
+</div>