@spinnaker/google 2026.0.1 → 2026.1.0

package/dist/loadBalancer/configure/choice/gceLoadBalancerPipelineModal.d.ts

@@ -0,0 +1,9 @@
+import type { IModalService } from 'angular-ui-bootstrap';
+import type { Application } from '@spinnaker/core';
+export interface IGCEPipelineLoadBalancerModalOptions {
+    application: Application;
+    loadBalancer: any;
+    isNew: boolean;
+    $uibModal: IModalService;
+}
+export declare const openGCEPipelineLoadBalancerModal: ({ application, loadBalancer, isNew, $uibModal, }: IGCEPipelineLoadBalancerModalOptions) => PromiseLike<any>;

package/dist/loadBalancer/configure/http/templates.d.ts

@@ -6,6 +6,7 @@ export declare class HttpLoadBalancerTemplate {
     region: string;
     loadBalancerType: string;
     certificate: string;
+    certificateMap: string;
     defaultService: BackendServiceTemplate;
     hostRules: HostRuleTemplate[];
     listeners: ListenerTemplate[];
@@ -39,4 +40,6 @@ export declare class ListenerTemplate {
     name: string;
     port: number;
     certificate: string | null;
+    certificateMap: string | null;
+    certificateSource: 'certificate' | 'certificateMap';
 }

package/package.json

@@ -5,7 +5,7 @@
     "url": "https://github.com/spinnaker/spinnaker.git"
   },
   "license": "Apache-2.0",
-  "version": "2026.0.1",
+  "version": "2026.1.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "publishConfig": {
@@ -25,7 +25,7 @@
     "@uirouter/angularjs": "1.0.26",
     "angular": "1.6.10",
     "angular-ui-bootstrap": "2.5.0",
-    "lodash": "4.17.21",
+    "lodash": "4.18.1",
     "ngimport": "0.6.1",
     "react": "16.14.0",
     "react-select": "1.2.1",
@@ -45,5 +45,5 @@
     "shx": "0.3.3",
     "typescript": "5.0.4"
   },
-  "gitHead": "230864a7fc8b5dfb38edb1164c7719671f7b4fa3"
+  "gitHead": "b43289872672de89234911de45d1cba0dd18373f"
 }

package/src/domain/loadBalancer.ts

@@ -14,7 +14,8 @@ export interface IGceLoadBalancer extends ILoadBalancer {
 }
 
 export interface IGceHttpLoadBalancer extends IGceLoadBalancer {
-  certificate: string;
+  certificate?: string;
+  certificateMap?: string;
   defaultService: IGceBackendService;
   detail: string;
   hostRules: IGceHostRule;
@@ -42,7 +43,8 @@ export interface IGcePathRule {
 }
 
 export interface IGceListener {
-  certificate: string;
+  certificate?: string | null;
+  certificateMap?: string | null;
   name: string;
   port: string;
   ipAddress: string;

package/src/gce.module.ts

@@ -13,6 +13,7 @@ import { GOOGLE_INSTANCE_GCEINSTANCETYPE_SERVICE } from './instance/gceInstanceT
 import { GOOGLE_INSTANCE_GCEMULTIINSTANCETASK_TRANSFORMER } from './instance/gceMultiInstanceTask.transformer';
 import { IAP_INTERCEPTOR } from './interceptors/iap.interceptor';
 import { GCE_LOAD_BALANCER_CHOICE_MODAL } from './loadBalancer/configure/choice/gceLoadBalancerChoice.modal';
+import { openGCEPipelineLoadBalancerModal } from './loadBalancer/configure/choice/gceLoadBalancerPipelineModal';
 import { GOOGLE_LOADBALANCER_CONFIGURE_HTTP_CREATEHTTPLOADBALANCER_CONTROLLER } from './loadBalancer/configure/http/createHttpLoadBalancer.controller';
 import { GCE_INTERNAL_LOAD_BALANCER_CTRL } from './loadBalancer/configure/internal/gceCreateInternalLoadBalancer.controller';
 import { GOOGLE_LOADBALANCER_CONFIGURE_INTERNAL_HTTP_CREATEHTTPLOADBALANCER_CONTROLLER } from './loadBalancer/configure/internalhttp/createInternalHttpLoadBalancer.controller';
@@ -133,6 +134,7 @@ module(GOOGLE_MODULE, [
       detailsController: 'gceLoadBalancerDetailsCtrl',
       createLoadBalancerTemplateUrl: require('./loadBalancer/configure/choice/gceLoadBalancerChoice.modal.html'),
       createLoadBalancerController: 'gceLoadBalancerChoiceCtrl',
+      pipelineCreateLoadBalancerModal: openGCEPipelineLoadBalancerModal,
     },
     securityGroup: {
       transformer: 'gceSecurityGroupTransformer',

package/src/help/gce.help.ts

@@ -3,6 +3,8 @@ import { HelpContentsRegistry } from '@spinnaker/core';
 const helpContents: { [key: string]: string } = {
   'gce.httpLoadBalancer.certificate':
     'The name of an SSL certificate. If specified, Spinnaker will create an HTTPS load balancer.',
+  'gce.httpLoadBalancer.certificateMap':
+    'A Certificate Manager certificate map name. Certificate maps let GCP manage and auto-rotate TLS certificates, replacing individual certificate selection.',
   'gce.httpLoadBalancer.defaultService':
     'A default service handles any requests that do not match a specified host rule or path matching rule.',
   'gce.httpLoadBalancer.externalIP':

package/src/loadBalancer/configure/choice/gceLoadBalancerChoice.modal.spec.js

@@ -0,0 +1,66 @@
+import { GCE_LOAD_BALANCER_CHOICE_MODAL } from './gceLoadBalancerChoice.modal';
+
+describe('Controller: gceLoadBalancerChoiceCtrl', () => {
+  beforeEach(() => {
+    window.module(GCE_LOAD_BALANCER_CHOICE_MODAL);
+  });
+
+  const buildController = (overrides = {}) => {
+    let result;
+    window.inject(function ($controller, $rootScope, $q) {
+      const $scope = $rootScope.$new();
+      const modalInstance = {
+        close: jasmine.createSpy('close'),
+        dismiss: jasmine.createSpy('dismiss'),
+      };
+      const wizardResult = $q.when('wizard');
+      const $uibModal = {
+        open: jasmine.createSpy('open').and.returnValue({ result: wizardResult }),
+      };
+      const ctrl = $controller('gceLoadBalancerChoiceCtrl', {
+        $scope,
+        $uibModal,
+        $uibModalInstance: modalInstance,
+        application: { name: 'app' },
+        loadBalancerTypeToWizardMap: {
+          NETWORK: { label: 'Network', createTemplateUrl: 'template', controller: 'ctrl' },
+        },
+        forPipelineConfig: true,
+        ...overrides,
+      });
+
+      result = { ctrl, $uibModal, modalInstance, wizardResult };
+    });
+
+    return result;
+  };
+
+  it('closes with wizard config in pipeline mode', function () {
+    const { ctrl, $uibModal, modalInstance } = buildController();
+
+    ctrl.choose('Network');
+
+    expect($uibModal.open).not.toHaveBeenCalled();
+    expect(modalInstance.close).toHaveBeenCalledWith(jasmine.objectContaining({ controller: 'ctrl' }));
+    expect(modalInstance.dismiss).not.toHaveBeenCalled();
+  });
+
+  it('opens wizard in non-pipeline mode', function () {
+    const { ctrl, $uibModal, modalInstance, wizardResult } = buildController({ forPipelineConfig: false });
+
+    ctrl.choose('Network');
+
+    expect($uibModal.open).toHaveBeenCalled();
+    expect(modalInstance.close).toHaveBeenCalledWith(wizardResult);
+  });
+
+  it('dismisses when choice has no wizard config', function () {
+    const { ctrl, $uibModal, modalInstance } = buildController();
+
+    ctrl.choose('Missing');
+
+    expect($uibModal.open).not.toHaveBeenCalled();
+    expect(modalInstance.close).not.toHaveBeenCalled();
+    expect(modalInstance.dismiss).toHaveBeenCalled();
+  });
+});

package/src/loadBalancer/configure/choice/gceLoadBalancerChoice.modal.ts

@@ -12,12 +12,19 @@ class GceLoadBalancerChoiceCtrl implements IController {
   public choices: string[];
   public choice = 'Network';
 
-  public static $inject = ['$uibModal', '$uibModalInstance', 'application', 'loadBalancerTypeToWizardMap'];
+  public static $inject = [
+    '$uibModal',
+    '$uibModalInstance',
+    'application',
+    'loadBalancerTypeToWizardMap',
+    'forPipelineConfig',
+  ];
   constructor(
     public $uibModal: IModalService,
     public $uibModalInstance: IModalInstanceService,
     private application: Application,
     private loadBalancerTypeToWizardMap: IGceLoadBalancerToWizardMap,
+    private forPipelineConfig: boolean,
   ) {}
 
   public $onInit(): void {
@@ -26,8 +33,15 @@ class GceLoadBalancerChoiceCtrl implements IController {
 
   public choose(choice: string): void {
     const wizard = find(this.loadBalancerTypeToWizardMap, (wizardConfig) => wizardConfig.label === choice);
-    this.$uibModalInstance.dismiss();
-    this.$uibModal.open({
+    if (!wizard) {
+      this.$uibModalInstance.dismiss('No wizard config for choice');
+      return;
+    }
+    if (this.forPipelineConfig) {
+      this.$uibModalInstance.close(wizard);
+      return;
+    }
+    const wizardResult = this.$uibModal.open({
       templateUrl: wizard.createTemplateUrl,
       controller: `${wizard.controller} as ctrl`,
       size: 'lg',
@@ -35,9 +49,10 @@ class GceLoadBalancerChoiceCtrl implements IController {
         application: () => this.application,
         loadBalancer: (): null => null,
         isNew: () => true,
-        forPipelineConfig: () => false,
+        forPipelineConfig: () => this.forPipelineConfig,
       },
-    });
+    }).result;
+    this.$uibModalInstance.close(wizardResult);
   }
 }
 

package/src/loadBalancer/configure/choice/gceLoadBalancerPipelineModal.ts

@@ -0,0 +1,47 @@
+import type { IModalService } from 'angular-ui-bootstrap';
+
+import type { Application } from '@spinnaker/core';
+
+import type { IGceLoadBalancerWizardConfig } from './loadBalancerTypeToWizardMap.constant';
+
+export interface IGCEPipelineLoadBalancerModalOptions {
+  application: Application;
+  loadBalancer: any;
+  isNew: boolean;
+  $uibModal: IModalService;
+}
+
+export const openGCEPipelineLoadBalancerModal = ({
+  application,
+  loadBalancer,
+  isNew,
+  $uibModal,
+}: IGCEPipelineLoadBalancerModalOptions): PromiseLike<any> => {
+  return $uibModal
+    .open({
+      templateUrl: require('./gceLoadBalancerChoice.modal.html'),
+      controller: 'gceLoadBalancerChoiceCtrl as ctrl',
+      size: 'lg',
+      resolve: {
+        application: () => application,
+        forPipelineConfig: () => true,
+      },
+    })
+    .result.then((wizardConfig: IGceLoadBalancerWizardConfig) => {
+      if (!wizardConfig) {
+        return null;
+      }
+      const templateUrl = isNew ? wizardConfig.createTemplateUrl : wizardConfig.editTemplateUrl;
+      return $uibModal.open({
+        templateUrl,
+        controller: `${wizardConfig.controller} as ctrl`,
+        size: 'lg',
+        resolve: {
+          application: () => application,
+          loadBalancer: () => loadBalancer,
+          isNew: () => isNew,
+          forPipelineConfig: () => true,
+        },
+      }).result;
+    });
+};

package/src/loadBalancer/configure/gceL4LoadBalancerPipeline.spec.js

@@ -0,0 +1,143 @@
+import { ApplicationModelBuilder } from '@spinnaker/core';
+import { GCE_INTERNAL_LOAD_BALANCER_CTRL } from './internal/gceCreateInternalLoadBalancer.controller';
+import { GCE_SSL_LOAD_BALANCER_CTRL } from './ssl/gceCreateSslLoadBalancer.controller';
+import { GCE_TCP_LOAD_BALANCER_CTRL } from './tcp/gceCreateTcpLoadBalancer.controller';
+
+function buildApp() {
+  return ApplicationModelBuilder.createApplicationForTests('app', {
+    key: 'loadBalancers',
+    lazy: true,
+    defaultData: [],
+  });
+}
+
+describe('GCE L4 load balancer controllers (pipeline mode)', function () {
+  describe('gceSslLoadBalancerCtrl', function () {
+    beforeEach(() => {
+      window.module(GCE_SSL_LOAD_BALANCER_CTRL);
+    });
+
+    it(
+      'closes with a pipeline command',
+      window.inject(function ($controller, $rootScope) {
+        const modalInstance = { close: jasmine.createSpy('close'), dismiss: jasmine.createSpy('dismiss') };
+        const loadBalancer = {
+          loadBalancerName: 'ssl-lb',
+          backendService: { healthCheck: { healthCheckType: 'TCP' } },
+          instances: [],
+          credentials: 'test',
+          region: 'global',
+        };
+
+        const ctrl = $controller('gceSslLoadBalancerCtrl', {
+          $scope: $rootScope.$new(),
+          application: buildApp(),
+          $uibModalInstance: modalInstance,
+          loadBalancer,
+          gceCommonLoadBalancerCommandBuilder: {},
+          isNew: true,
+          forPipelineConfig: true,
+          wizardSubFormValidation: {},
+          $state: {},
+        });
+
+        ctrl.submit();
+
+        expect(modalInstance.close).toHaveBeenCalledWith(
+          jasmine.objectContaining({
+            loadBalancerName: 'ssl-lb',
+            cloudProvider: 'gce',
+            healthCheck: {},
+          }),
+        );
+      }),
+    );
+  });
+
+  describe('gceTcpLoadBalancerCtrl', function () {
+    beforeEach(() => {
+      window.module(GCE_TCP_LOAD_BALANCER_CTRL);
+    });
+
+    it(
+      'closes with a pipeline command',
+      window.inject(function ($controller, $rootScope) {
+        const modalInstance = { close: jasmine.createSpy('close'), dismiss: jasmine.createSpy('dismiss') };
+        const loadBalancer = {
+          loadBalancerName: 'tcp-lb',
+          backendService: { healthCheck: { healthCheckType: 'TCP' } },
+          instances: [],
+          credentials: 'test',
+          region: 'global',
+        };
+
+        const ctrl = $controller('gceTcpLoadBalancerCtrl', {
+          $scope: $rootScope.$new(),
+          application: buildApp(),
+          $uibModalInstance: modalInstance,
+          loadBalancer,
+          gceCommonLoadBalancerCommandBuilder: {},
+          isNew: true,
+          forPipelineConfig: true,
+          wizardSubFormValidation: {},
+          $state: {},
+        });
+
+        ctrl.submit();
+
+        expect(modalInstance.close).toHaveBeenCalledWith(
+          jasmine.objectContaining({
+            loadBalancerName: 'tcp-lb',
+            cloudProvider: 'gce',
+            healthCheck: {},
+          }),
+        );
+      }),
+    );
+  });
+
+  describe('gceInternalLoadBalancerCtrl', function () {
+    beforeEach(() => {
+      window.module(GCE_INTERNAL_LOAD_BALANCER_CTRL);
+    });
+
+    it(
+      'closes with a pipeline command',
+      window.inject(function ($controller, $rootScope) {
+        const modalInstance = { close: jasmine.createSpy('close'), dismiss: jasmine.createSpy('dismiss') };
+        const loadBalancer = {
+          loadBalancerName: 'internal-lb',
+          backendService: { healthCheck: { healthCheckType: 'TCP' } },
+          instances: [],
+          ports: '80, 8080',
+          credentials: 'test',
+          region: 'us-west-2',
+        };
+
+        const ctrl = $controller('gceInternalLoadBalancerCtrl', {
+          $scope: $rootScope.$new(),
+          application: buildApp(),
+          $uibModalInstance: modalInstance,
+          loadBalancer,
+          gceCommonLoadBalancerCommandBuilder: {},
+          isNew: true,
+          forPipelineConfig: true,
+          wizardSubFormValidation: {},
+          gceXpnNamingService: {},
+          $state: {},
+        });
+
+        ctrl.submit();
+
+        expect(modalInstance.close).toHaveBeenCalledWith(
+          jasmine.objectContaining({
+            loadBalancerName: 'internal-lb',
+            cloudProvider: 'gce',
+            healthCheck: {},
+            ports: ['80', '8080'],
+          }),
+        );
+      }),
+    );
+  });
+});

package/src/loadBalancer/configure/http/createHttpLoadBalancer.controller.js

@@ -43,6 +43,7 @@ module(GOOGLE_LOADBALANCER_CONFIGURE_HTTP_CREATEHTTPLOADBALANCER_CONTROLLER, [
   'application',
   'loadBalancer',
   'isNew',
+  'forPipelineConfig',
   'gceHttpLoadBalancerWriter',
   '$state',
   'wizardSubFormValidation',
@@ -55,6 +56,7 @@ module(GOOGLE_LOADBALANCER_CONFIGURE_HTTP_CREATEHTTPLOADBALANCER_CONTROLLER, [
     application,
     loadBalancer,
     isNew,
+    forPipelineConfig,
     gceHttpLoadBalancerWriter,
     $state,
     wizardSubFormValidation,
@@ -129,6 +131,26 @@ module(GOOGLE_LOADBALANCER_CONFIGURE_HTTP_CREATEHTTPLOADBALANCER_CONTROLLER, [
       const serializedCommands = gceHttpLoadBalancerTransformer.serialize(this.command, loadBalancer);
       const descriptor = this.isNew ? 'Create' : 'Update';
 
+      if (forPipelineConfig) {
+        const pipelineCommands = serializedCommands.map((command) => ({
+          ...command,
+          cloudProvider: 'gce',
+          loadBalancerName: command.name,
+          listeners: [
+            {
+              name: command.name,
+              port: command.portRange,
+              certificate: command.certificate || null,
+              certificateMap: command.certificateMap || null,
+              ipAddress: command.ipAddress,
+              subnet: command.subnet,
+            },
+          ],
+        }));
+        $uibModalInstance.close(pipelineCommands);
+        return;
+      }
+
       this.taskMonitor.submit(() =>
         gceHttpLoadBalancerWriter.upsertLoadBalancers(serializedCommands, application, descriptor),
       );

package/src/loadBalancer/configure/http/createHttpLoadBalancer.controller.spec.js

@@ -0,0 +1,96 @@
+import { ApplicationModelBuilder } from '@spinnaker/core';
+
+describe('Controller: gceCreateHttpLoadBalancerCtrl (pipeline mode)', function () {
+  beforeEach(function () {
+    this.serializedCommands = [
+      {
+        name: 'app-http',
+        portRange: '443',
+        certificate: null,
+        certificateMap: 'map',
+        ipAddress: null,
+        subnet: null,
+        urlMapName: 'app-http',
+        credentials: 'test',
+        region: 'global',
+        loadBalancerType: 'HTTP',
+      },
+    ];
+    this.transformer = {
+      serialize: jasmine.createSpy('serialize').and.returnValue(this.serializedCommands),
+    };
+    this.writer = {
+      upsertLoadBalancers: jasmine.createSpy('upsertLoadBalancers'),
+    };
+  });
+
+  beforeEach(function () {
+    window.module(require('./createHttpLoadBalancer.controller').name, ($provide) => {
+      $provide.factory('gceHttpLoadBalancerCommandBuilder', ($q) => ({
+        buildCommand: () =>
+          $q.when({
+            loadBalancer: {
+              listeners: [{ name: 'app-http', port: 443 }],
+              credentials: 'test',
+              region: 'global',
+              urlMapName: 'app-http',
+            },
+          }),
+      }));
+      const wizardSubFormValidation = {
+        config: () => wizardSubFormValidation,
+        register: () => wizardSubFormValidation,
+      };
+      $provide.value('wizardSubFormValidation', wizardSubFormValidation);
+      $provide.value('gceHttpLoadBalancerTransformer', this.transformer);
+      $provide.value('gceHttpLoadBalancerWriter', this.writer);
+    });
+  });
+
+  beforeEach(
+    window.inject(function ($controller, $rootScope) {
+      this.$scope = $rootScope.$new();
+      this.modalInstance = {
+        close: jasmine.createSpy('close'),
+        dismiss: jasmine.createSpy('dismiss'),
+        result: { then: () => {} },
+      };
+      const app = ApplicationModelBuilder.createApplicationForTests('app', {
+        key: 'loadBalancers',
+        lazy: true,
+        defaultData: [],
+      });
+      this.ctrl = $controller('gceCreateHttpLoadBalancerCtrl', {
+        $scope: this.$scope,
+        $uibModal: {},
+        $uibModalInstance: this.modalInstance,
+        application: app,
+        loadBalancer: null,
+        isNew: true,
+        forPipelineConfig: true,
+        $state: {},
+      });
+      $rootScope.$digest();
+    }),
+  );
+
+  it('returns pipeline commands without submitting', function () {
+    this.ctrl.submit();
+
+    expect(this.writer.upsertLoadBalancers).not.toHaveBeenCalled();
+    expect(this.modalInstance.close).toHaveBeenCalledWith([
+      jasmine.objectContaining({
+        name: 'app-http',
+        loadBalancerName: 'app-http',
+        cloudProvider: 'gce',
+        listeners: [
+          jasmine.objectContaining({
+            name: 'app-http',
+            port: '443',
+            certificateMap: 'map',
+          }),
+        ],
+      }),
+    ]);
+  });
+});

package/src/loadBalancer/configure/http/listeners/listener.component.html

@@ -112,6 +112,7 @@
           <ui-select
             ng-model="$ctrl.listener.port"
             ng-disabled="$ctrl.listener.created"
+            ng-change="$ctrl.onPortChanged($ctrl.listener)"
             required
             class="form-control input-sm"
           >
@@ -123,31 +124,80 @@
             </ui-select-choices>
           </ui-select>
         </div>
-        <div ng-if="$ctrl.isHttps($ctrl.listener.port)">
-          <div class="col-md-2 sm-label-right">
+      </div>
+      <!-- Certificate controls on a separate row to avoid exceeding Bootstrap's 12-column
+           grid when cert-source radios are visible (Port 2+3 + CertSrc 2+3 + Cert 2+3+1 = 16). -->
+      <div class="form-group" ng-if="$ctrl.isHttps($ctrl.listener.port)">
+        <div class="col-md-2 sm-label-right" ng-if="$ctrl.supportsCertificateMap()">Certificate Source</div>
+        <div class="col-md-3" ng-if="$ctrl.supportsCertificateMap()">
+          <label class="radio-inline">
+            <input
+              type="radio"
+              ng-model="$ctrl.listener.certificateSource"
+              value="certificate"
+              ng-change="$ctrl.onCertificateSourceChanged($ctrl.listener)"
+            />
             Certificate
-            <help-field key="gce.httpLoadBalancer.certificate" class="help-field-absolute"></help-field>
-          </div>
-          <div class="col-md-3">
-            <ui-select
-              ng-model="$ctrl.listener.certificate"
-              ng-disabled="$ctrl.listener.created && !$ctrl.listener.certificate"
-              required
-              class="form-control input-sm"
-            >
-              <ui-select-match allow-clear placeholder="Select...">{{ $select.selected }}</ui-select-match>
-              <ui-select-choices repeat="certificate in $ctrl.getCertificates() | filter: $select.search">
-                <span ng-bind-html="certificate | highlight: $select.search"></span>
-              </ui-select-choices>
-            </ui-select>
-          </div>
-          <div class="col-md-1" style="padding-left: 0; margin-top: 4px">
-            <gce-cache-refresh
-              cache-key="certificates"
-              render-compact="true"
-              on-refresh="$ctrl.command.onCertificateRefresh($ctrl.command)"
-            ></gce-cache-refresh>
-          </div>
+          </label>
+          <label class="radio-inline">
+            <input
+              type="radio"
+              ng-model="$ctrl.listener.certificateSource"
+              value="certificateMap"
+              ng-change="$ctrl.onCertificateSourceChanged($ctrl.listener)"
+            />
+            Certificate Map
+          </label>
+        </div>
+        <div class="col-md-2 sm-label-right">
+          <span ng-if="$ctrl.listener.certificateSource !== 'certificateMap'">Certificate</span>
+          <span ng-if="$ctrl.listener.certificateSource === 'certificateMap'">Certificate Map</span>
+          <help-field
+            ng-if="$ctrl.listener.certificateSource !== 'certificateMap'"
+            key="gce.httpLoadBalancer.certificate"
+            class="help-field-absolute"
+          ></help-field>
+          <help-field
+            ng-if="$ctrl.listener.certificateSource === 'certificateMap'"
+            key="gce.httpLoadBalancer.certificateMap"
+            class="help-field-absolute"
+          ></help-field>
+        </div>
+        <div class="col-md-3" ng-if="$ctrl.listener.certificateSource !== 'certificateMap'">
+          <ui-select
+            ng-model="$ctrl.listener.certificate"
+            ng-change="$ctrl.onCertificateSelected($ctrl.listener)"
+            ng-required="$ctrl.isHttps($ctrl.listener.port) && $ctrl.listener.certificateSource !== 'certificateMap'"
+            class="form-control input-sm"
+          >
+            <ui-select-match allow-clear placeholder="Select...">{{ $select.selected }}</ui-select-match>
+            <ui-select-choices repeat="certificate in $ctrl.getCertificates() | filter: $select.search">
+              <span ng-bind-html="certificate | highlight: $select.search"></span>
+            </ui-select-choices>
+          </ui-select>
+        </div>
+        <div class="col-md-3" ng-if="$ctrl.listener.certificateSource === 'certificateMap'">
+          <input
+            type="text"
+            class="form-control input-sm"
+            name="certificateMap"
+            ng-model="$ctrl.listener.certificateMap"
+            ng-change="$ctrl.onCertificateMapChanged($ctrl.listener)"
+            ng-required="$ctrl.isHttps($ctrl.listener.port) && $ctrl.listener.certificateSource === 'certificateMap'"
+            ng-pattern="$ctrl.certificateMapPattern"
+            placeholder="certificate-map-name"
+          />
+        </div>
+        <div
+          class="col-md-1"
+          style="padding-left: 0; margin-top: 4px"
+          ng-if="$ctrl.listener.certificateSource !== 'certificateMap'"
+        >
+          <gce-cache-refresh
+            cache-key="certificates"
+            render-compact="true"
+            on-refresh="$ctrl.command.onCertificateRefresh($ctrl.command)"
+          ></gce-cache-refresh>
         </div>
       </div>
 
@@ -184,6 +234,11 @@
             message="Detail can only contain lowercase letters, numbers, and dashes(-)."
           ></validation-error>
         </div>
+        <div class="col-md-7 col-md-offset-2" ng-if="listener.certificateMap.$error.pattern">
+          <validation-error
+            message="Certificate map can only contain lowercase letters, numbers, and dashes(-), and must start with a letter."
+          ></validation-error>
+        </div>
       </div>
     </div>
   </ng-form>