@spinnaker/google 0.0.0-main-2

package/src/loadBalancer/details/loadBalancerDetails.html

@@ -0,0 +1,202 @@
+<div class="details-panel">
+  <div ng-if="state.loading" class="header">
+    <div class="close-button">
+      <a class="btn btn-link" ui-sref="^">
+        <span class="glyphicon glyphicon-remove"></span>
+      </a>
+    </div>
+    <div class="horizontal center middle">
+      <loading-spinner size="'small'"></loading-spinner>
+    </div>
+  </div>
+
+  <div ng-if="!state.loading" class="header">
+    <div class="close-button">
+      <a class="btn btn-link" ui-sref="^">
+        <span class="glyphicon glyphicon-remove"></span>
+      </a>
+    </div>
+    <div class="header-text horizontal middle">
+      <span class="fa icon-sitemap"></span>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
+        {{loadBalancer.name}}
+        <render-if-feature feature="entityTags">
+          <entity-notifications
+            entity="loadBalancer"
+            application="ctrl.application"
+            placement="bottom"
+            h-offset-percent="90%"
+            entity-type="loadBalancer"
+            page-location="details"
+            on-update="ctrl.application.loadBalancers.refresh()"
+          ></entity-notifications>
+        </render-if-feature>
+      </h3>
+    </div>
+    <div>
+      <div class="actions">
+        <div class="dropdown" uib-dropdown dropdown-append-to-body>
+          <button type="button" class="btn btn-sm btn-primary dropdown-toggle" uib-dropdown-toggle>
+            Load Balancer Actions <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" uib-dropdown-menu role="menu">
+            <li><a href ng-click="ctrl.editLoadBalancer()">Edit Load Balancer</a></li>
+            <li ng-if="!loadBalancer.instances.length">
+              <a href ng-click="ctrl.deleteLoadBalancer()">Delete Load Balancer</a>
+            </li>
+            <li
+              ng-if="loadBalancer.instances.length"
+              class="disabled"
+              uib-tooltip="You must detach all instances before you can delete this load balancer."
+            >
+              <a href ng-click="ctrl.deleteLoadBalancer()">Delete Load Balancer</a>
+            </li>
+            <render-if-feature feature="entityTags">
+              <add-entity-tag-links
+                component="loadBalancer"
+                application="ctrl.application"
+                entity-type="loadBalancer"
+                on-update="ctrl.application.loadBalancers.refresh"
+              ></add-entity-tag-links>
+            </render-if-feature>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div ng-if="!state.loading" class="content">
+    <collapsible-section heading="Load Balancer Details" expanded="true">
+      <dl class="dl-horizontal dl-narrow">
+        <dt>Created</dt>
+        <dd>{{loadBalancer.elb.createdTime | timestamp}}</dd>
+        <dt>In</dt>
+        <dd><account-tag account="loadBalancer.account" pad="right"></account-tag></dd>
+        <dt>Region</dt>
+        <dd>{{loadBalancer.region}}</dd>
+        <dt>Type</dt>
+        <dd>
+          <gce-load-balancer-type load-balancer="loadBalancer"></gce-load-balancer-type>
+        </dd>
+        <dt ng-if="loadBalancer.network">Network</dt>
+        <dd ng-if="loadBalancer.network">{{ctrl.getNetworkId(loadBalancer)}}</dd>
+        <dt ng-if="loadBalancer.subnet">Subnet</dt>
+        <dd ng-if="loadBalancer.subnet">{{ctrl.getSubnetId(loadBalancer)}}</dd>
+        <dt ng-if="loadBalancer.serverGroups.length">Server Groups</dt>
+        <dd ng-if="loadBalancer.serverGroups.length">
+          <ul>
+            <li ng-repeat="serverGroup in loadBalancer.serverGroups | orderBy: ['isDisabled', '-name']">
+              <a
+                ui-sref="^.serverGroup({region: serverGroup.region,
+                                          accountId: serverGroup.account,
+                                          serverGroup: serverGroup.name,
+                                          provider: 'gce'})"
+              >
+                {{serverGroup.name}}
+              </a>
+            </li>
+          </ul>
+        </dd>
+        <div ng-if="!ctrl.isHttpLoadBalancer(loadBalancer) && loadBalancer.elb.dnsname">
+          <dt>DNS Name</dt>
+          <dd>
+            <a target="_blank" href="{{loadBalancer.elb.dns.protocol}}//{{loadBalancer.elb.dns.dnsname}}"
+              >{{loadBalancer.elb.dns.dnsname}}</a
+            >
+            <copy-to-clipboard
+              class="copy-to-clipboard copy-to-clipboard-sm"
+              text="loadBalancer.elb.dns.dnsname"
+              tool-tip="'Copy DNS Name to clipboard'"
+            >
+            </copy-to-clipboard>
+          </dd>
+        </div>
+        <div ng-if="ctrl.loadBalancer.loadBalancerType === 'HTTP'">
+          <dt>DNS Names</dt>
+          <dd>
+            <ul>
+              <li ng-repeat="dns in loadBalancer.elb.dns">
+                <a target="_blank" href="{{dns.protocol}}//{{dns.dnsname}}">{{dns.dnsname}}</a>
+                <copy-to-clipboard
+                  class="copy-to-clipboard copy-to-clipboard-sm"
+                  text="dns.dnsname"
+                  tool-tip="'Copy DNS Name to clipboard'"
+                >
+                </copy-to-clipboard>
+              </li>
+            </ul>
+          </dd>
+        </div>
+        <div ng-if="ctrl.isHttpLoadBalancer(loadBalancer)">
+          <gce-host-and-path-rules-button
+            default-service="loadBalancer.defaultService"
+            load-balancer-name="loadBalancer.name"
+            host-rules="loadBalancer.hostRules"
+          >
+          </gce-host-and-path-rules-button>
+        </div>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Status" expanded="true">
+      <health-counts class="pull-left" container="loadBalancer.instanceCounts"></health-counts>
+    </collapsible-section>
+    <collapsible-section heading="Listeners">
+      <dl>
+        <dt>
+          Load Balancer &rarr; Instance
+          <help-field
+            ng-if="ctrl.isHttpLoadBalancer(loadBalancer) || loadBalancer.loadBalancerType === 'SSL' || loadBalancer.loadBalancerType === 'TCP'"
+            key="gce.httpLoadBalancer.namedPort"
+          ></help-field>
+        </dt>
+        <dd ng-repeat="listener in loadBalancer.elb.listenerDescriptions">
+          {{listener.listener.protocol}}:{{listener.listener.loadBalancerPort}} &rarr;
+          {{listener.listener.instanceProtocol}}:{{listener.listener.instancePort}}
+        </dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section
+      heading="Backend Services"
+      ng-if="ctrl.isHttpLoadBalancer(loadBalancer) || loadBalancer.backendService"
+    >
+      <dl class="horizontal-when-filters-collapsed" ng-switch on="loadBalancer.loadBalancerType">
+        <div ng-repeat="service in loadBalancer.elb.backendServices" ng-switch-when="HTTP">
+          <hr ng-if="$index > 0" />
+          <gce-backend-service-details backend-service="service"></gce-backend-service-details>
+        </div>
+
+        <gce-backend-service-details
+          backend-service="loadBalancer.backendService"
+          ng-switch-default
+        ></gce-backend-service-details>
+      </dl>
+    </collapsible-section>
+    <collapsible-section
+      ng-if="ctrl.isHttpLoadBalancer(loadBalancer) || loadBalancer.healthCheck || loadBalancer.backendService.healthCheck"
+      heading="Health Checks"
+    >
+      <dl class="horizontal-when-filters-collapsed" ng-switch on="loadBalancer.loadBalancerType">
+        <gce-health-check ng-switch-when="NETWORK" health-check="loadBalancer.healthCheck"></gce-health-check>
+
+        <div ng-switch-when="HTTP" ng-repeat="healthCheck in loadBalancer.elb.healthChecks">
+          <hr ng-if="$index > 0" />
+          <gce-health-check health-check="healthCheck"></gce-health-check>
+        </div>
+
+        <gce-health-check ng-switch-default health-check="loadBalancer.backendService.healthCheck"></gce-health-check>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Logs">
+      <ul>
+        <li ng-if="loadBalancer.logsLink">
+          <a href="{{loadBalancer.logsLink}}" target="_blank">Cloud Console Logs</a>
+          <copy-to-clipboard
+            class="copy-to-clipboard copy-to-clipboard-sm"
+            text="loadBalancer.logsLink"
+            tool-tip="'Copy to clipboard'"
+          >
+          </copy-to-clipboard>
+        </li>
+      </ul>
+    </collapsible-section>
+  </div>
+</div>

package/src/loadBalancer/details/loadBalancerType/loadBalancerType.component.js

@@ -0,0 +1,29 @@
+'use strict';
+
+import { module } from 'angular';
+import _ from 'lodash';
+
+export const GOOGLE_LOADBALANCER_DETAILS_LOADBALANCERTYPE_LOADBALANCERTYPE_COMPONENT =
+  'spinnaker.deck.gce.loadBalancer.loadBalancerType';
+export const name = GOOGLE_LOADBALANCER_DETAILS_LOADBALANCERTYPE_LOADBALANCERTYPE_COMPONENT; // for backwards compatibility
+module(GOOGLE_LOADBALANCER_DETAILS_LOADBALANCERTYPE_LOADBALANCERTYPE_COMPONENT, []).component('gceLoadBalancerType', {
+  template: '<span>{{ $ctrl.type }}</span>',
+  bindings: {
+    loadBalancer: '=',
+  },
+  controller: function () {
+    this.$onInit = () => {
+      this.type = (function (lb) {
+        if (lb.loadBalancerType === 'HTTP') {
+          if (_.isString(lb.certificate)) {
+            return 'HTTPS';
+          } else {
+            return 'HTTP';
+          }
+        } else {
+          return lb.loadBalancerType;
+        }
+      })(this.loadBalancer);
+    };
+  },
+});

package/src/loadBalancer/httpLoadBalancerUtils.service.ts

@@ -0,0 +1,42 @@
+import { module } from 'angular';
+import { uniq } from 'lodash';
+
+import type { IGceHttpLoadBalancer, IGceLoadBalancer } from '../domain/loadBalancer';
+
+export class GceHttpLoadBalancerUtils {
+  public static REGION = 'global';
+
+  public isHttpLoadBalancer(lb: IGceLoadBalancer): lb is IGceHttpLoadBalancer {
+    return (
+      (lb.provider === 'gce' || lb.type === 'gce') &&
+      (lb.loadBalancerType === 'HTTP' || lb.loadBalancerType === 'INTERNAL_MANAGED')
+    );
+  }
+
+  public normalizeLoadBalancerNamesForAccount(
+    loadBalancerNames: string[],
+    account: string,
+    loadBalancers: IGceLoadBalancer[],
+  ): string[] {
+    // Assume that loadBalancers is a list of all GCE load balancers in an application
+    // (but possibly from several accounts), and has already been normalized (listener names mapped to URL map names).
+    const normalizedLoadBalancerNames: string[] = [];
+    loadBalancerNames.forEach((loadBalancerName) => {
+      const matchingUrlMap = loadBalancers.find((loadBalancer) => {
+        return (
+          account === loadBalancer.account &&
+          this.isHttpLoadBalancer(loadBalancer) &&
+          loadBalancer.listeners.map((listener) => listener.name).includes(loadBalancerName)
+        );
+      });
+
+      matchingUrlMap
+        ? normalizedLoadBalancerNames.push(matchingUrlMap.name)
+        : normalizedLoadBalancerNames.push(loadBalancerName);
+    });
+    return uniq(normalizedLoadBalancerNames);
+  }
+}
+
+export const GCE_HTTP_LOAD_BALANCER_UTILS = 'spinnaker.gce.httpLoadBalancerUtils.service';
+module(GCE_HTTP_LOAD_BALANCER_UTILS, []).service('gceHttpLoadBalancerUtils', GceHttpLoadBalancerUtils);

package/src/loadBalancer/loadBalancer.setTransformer.ts

@@ -0,0 +1,55 @@
+import { module } from 'angular';
+import { cloneDeep, groupBy, map, partition } from 'lodash';
+
+import type { IGceHttpLoadBalancer, IGceLoadBalancer } from '../domain/loadBalancer';
+
+import type { GceHttpLoadBalancerUtils } from './httpLoadBalancerUtils.service';
+import { GCE_HTTP_LOAD_BALANCER_UTILS } from './httpLoadBalancerUtils.service';
+
+export class GceLoadBalancerSetTransformer {
+  private static normalizeHttpLoadBalancerGroup(group: IGceHttpLoadBalancer[]): IGceHttpLoadBalancer {
+    const normalized = cloneDeep(group[0]);
+
+    normalized.listeners = group.map((loadBalancer) => {
+      const port = loadBalancer.portRange ? GceLoadBalancerSetTransformer.parsePortRange(loadBalancer.portRange) : null;
+      return {
+        port,
+        name: loadBalancer.name,
+        certificate: loadBalancer.certificate,
+        ipAddress: loadBalancer.ipAddress,
+        subnet: loadBalancer.subnet,
+      };
+    });
+
+    normalized.name = normalized.urlMapName;
+    delete normalized.subnet;
+    return normalized;
+  }
+
+  private static parsePortRange(portRange: string): string {
+    return portRange.split('-')[0];
+  }
+
+  public static $inject = ['gceHttpLoadBalancerUtils'];
+  constructor(private gceHttpLoadBalancerUtils: GceHttpLoadBalancerUtils) {}
+
+  public normalizeLoadBalancerSet = (loadBalancers: IGceLoadBalancer[]): IGceLoadBalancer[] => {
+    const [httpLoadBalancers, otherLoadBalancers] = partition(loadBalancers, (lb) =>
+      this.gceHttpLoadBalancerUtils.isHttpLoadBalancer(lb),
+    );
+
+    const groupedByUrlMap = groupBy(httpLoadBalancers, 'urlMapName');
+    const normalizedElSevenLoadBalancers = map(
+      groupedByUrlMap,
+      GceLoadBalancerSetTransformer.normalizeHttpLoadBalancerGroup,
+    );
+
+    return (normalizedElSevenLoadBalancers as IGceLoadBalancer[]).concat(otherLoadBalancers);
+  };
+}
+
+export const LOAD_BALANCER_SET_TRANSFORMER = 'spinnaker.gce.loadBalancer.setTransformer.service';
+module(LOAD_BALANCER_SET_TRANSFORMER, [GCE_HTTP_LOAD_BALANCER_UTILS]).service(
+  'gceLoadBalancerSetTransformer',
+  GceLoadBalancerSetTransformer,
+);

package/src/loadBalancer/loadBalancer.transformer.js

@@ -0,0 +1,168 @@
+'use strict';
+
+import { module } from 'angular';
+import _ from 'lodash';
+
+import { GCEProviderSettings } from '../gce.settings';
+
+export const GOOGLE_LOADBALANCER_LOADBALANCER_TRANSFORMER = 'spinnaker.gce.loadBalancer.transformer';
+export const name = GOOGLE_LOADBALANCER_LOADBALANCER_TRANSFORMER; // for backwards compatibility
+module(GOOGLE_LOADBALANCER_LOADBALANCER_TRANSFORMER, []).factory('gceLoadBalancerTransformer', [
+  '$q',
+  function ($q) {
+    function updateHealthCounts(container) {
+      const instances = container.instances;
+      const serverGroups = container.serverGroups || [container];
+      container.instanceCounts = {
+        up: instances.filter((instance) => {
+          return instance.health[0].state === 'InService';
+        }).length,
+        down: instances.filter((instance) => {
+          return instance.health[0].state === 'OutOfService';
+        }).length,
+        outOfService: serverGroups.reduce((acc, serverGroup) => {
+          return (
+            serverGroup.instances.filter((instance) => {
+              return instance.healthState === 'OutOfService';
+            }).length + acc
+          );
+        }, 0),
+      };
+    }
+
+    function transformInstance(instance, loadBalancer) {
+      instance.health = instance.health || {};
+      instance.provider = loadBalancer.type;
+      instance.account = loadBalancer.account;
+      instance.region = loadBalancer.region;
+      instance.health.type = 'LoadBalancer';
+      instance.healthState = instance.health.state
+        ? instance.health.state === 'InService'
+          ? 'Up'
+          : 'Down'
+        : 'OutOfService';
+      instance.health = [instance.health];
+      instance.loadBalancers = [loadBalancer.name];
+    }
+
+    function normalizeLoadBalancer(loadBalancer) {
+      loadBalancer.serverGroups.forEach(function (serverGroup) {
+        serverGroup.account = loadBalancer.account;
+        if (serverGroup.detachedInstances) {
+          serverGroup.detachedInstances = serverGroup.detachedInstances.map(function (instanceId) {
+            return { id: instanceId };
+          });
+          serverGroup.instances = serverGroup.instances.concat(serverGroup.detachedInstances);
+        } else {
+          serverGroup.detachedInstances = [];
+        }
+
+        serverGroup.instances.forEach(function (instance) {
+          transformInstance(instance, loadBalancer);
+        });
+        updateHealthCounts(serverGroup);
+      });
+      const activeServerGroups = _.filter(loadBalancer.serverGroups, { isDisabled: false });
+      loadBalancer.provider = loadBalancer.type;
+      loadBalancer.instances = _.chain(activeServerGroups).map('instances').flatten().value();
+      loadBalancer.detachedInstances = _.chain(activeServerGroups).map('detachedInstances').flatten().value();
+      if (_.get(loadBalancer, 'backendService.healthCheck')) {
+        loadBalancer.backendService.healthCheck.timeout = loadBalancer.backendService.healthCheck.timeoutSec;
+        loadBalancer.backendService.healthCheck.interval = loadBalancer.backendService.healthCheck.checkIntervalSec;
+      }
+      updateHealthCounts(loadBalancer);
+      return $q.when(loadBalancer);
+    }
+
+    function convertLoadBalancerForEditing(loadBalancer) {
+      const toEdit = {
+        provider: 'gce',
+        region: loadBalancer.region,
+        credentials: loadBalancer.account,
+        listeners: [],
+        name: loadBalancer.name,
+        regionZones: loadBalancer.availabilityZones,
+      };
+
+      if (loadBalancer.elb) {
+        const elb = loadBalancer.elb;
+
+        toEdit.vpcId = elb.vpcid;
+
+        if (elb.listenerDescriptions) {
+          toEdit.listeners = elb.listenerDescriptions.map(function (description) {
+            const listener = description.listener;
+            return {
+              protocol: listener.protocol,
+              portRange: listener.loadBalancerPort,
+              healthCheck: elb.healthCheck !== undefined,
+            };
+          });
+        }
+
+        if (elb.healthCheck && elb.healthCheck.target) {
+          toEdit.healthTimeout = elb.healthCheck.timeout;
+          toEdit.healthInterval = elb.healthCheck.interval;
+          toEdit.healthyThreshold = elb.healthCheck.healthyThreshold;
+          toEdit.unhealthyThreshold = elb.healthCheck.unhealthyThreshold;
+
+          const healthCheck = loadBalancer.elb.healthCheck.target;
+          const protocolIndex = healthCheck.indexOf(':');
+          const pathIndex = healthCheck.indexOf('/');
+
+          if (protocolIndex !== -1 && pathIndex !== -1) {
+            toEdit.healthCheckProtocol = healthCheck.substring(0, protocolIndex);
+            toEdit.healthCheckPort = healthCheck.substring(protocolIndex + 1, pathIndex);
+            toEdit.healthCheckPath = healthCheck.substring(pathIndex);
+            if (!isNaN(toEdit.healthCheckPort)) {
+              toEdit.healthCheckPort = Number(toEdit.healthCheckPort);
+            }
+          }
+        } else {
+          toEdit.healthCheckProtocol = 'HTTP';
+          toEdit.healthCheckPort = 80;
+          toEdit.healthCheckPath = '/';
+          toEdit.healthTimeout = 5;
+          toEdit.healthInterval = 10;
+          toEdit.healthyThreshold = 10;
+          toEdit.unhealthyThreshold = 2;
+        }
+
+        toEdit.sessionAffinity = loadBalancer.sessionAffinity || 'None';
+      }
+      return toEdit;
+    }
+
+    function constructNewLoadBalancerTemplate() {
+      return {
+        provider: 'gce',
+        stack: '',
+        detail: '',
+        credentials: GCEProviderSettings.defaults.account,
+        region: GCEProviderSettings.defaults.region,
+        healthCheckProtocol: 'HTTP',
+        healthCheckPort: 80,
+        healthCheckPath: '/',
+        healthTimeout: 5,
+        healthInterval: 10,
+        healthyThreshold: 10,
+        unhealthyThreshold: 2,
+        sessionAffinity: 'NONE',
+        regionZones: [],
+        listeners: [
+          {
+            protocol: 'TCP',
+            portRange: '8080',
+            healthCheck: true,
+          },
+        ],
+      };
+    }
+
+    return {
+      normalizeLoadBalancer: normalizeLoadBalancer,
+      convertLoadBalancerForEditing: convertLoadBalancerForEditing,
+      constructNewLoadBalancerTemplate: constructNewLoadBalancerTemplate,
+    };
+  },
+]);

package/src/logo/gce.logo.less

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

package/src/logo/gce.logo.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.1 (15681) - http://www.bohemiancoding.com/sketch -->
+    <title>shaded-32/compute-engine</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="shaded-32/compute-engine" sketch:type="MSArtboardGroup">
+            <rect id="Container" sketch:type="MSShapeGroup" x="0" y="0" width="32" height="32"></rect>
+            <g id="shape" sketch:type="MSLayerGroup" transform="translate(1.000000, 1.000000)">
+                <rect id="Rectangle-path" fill="#616161" sketch:type="MSShapeGroup" x="0" y="8" width="4" height="3"></rect>
+                <rect id="Rectangle-path" fill="#616161" sketch:type="MSShapeGroup" x="0" y="13" width="4" height="3"></rect>
+                <rect id="Rectangle-path" fill="#616161" sketch:type="MSShapeGroup" x="0" y="18" width="4" height="3"></rect>
+                <rect id="Rectangle-path" fill="#616161" sketch:type="MSShapeGroup" x="25" y="8" width="4" height="3"></rect>
+                <rect id="Rectangle-path" fill="#616161" sketch:type="MSShapeGroup" x="25" y="13" width="4" height="3"></rect>
+                <rect id="Rectangle-path" fill="#616161" sketch:type="MSShapeGroup" x="25" y="18" width="4" height="3"></rect>
+                <rect id="Rectangle-path" fill="#616161" sketch:type="MSShapeGroup" x="18" y="0" width="3" height="4"></rect>
+                <rect id="Rectangle-path" fill="#616161" sketch:type="MSShapeGroup" x="13" y="0" width="3" height="4"></rect>
+                <rect id="Rectangle-path" fill="#616161" sketch:type="MSShapeGroup" x="8" y="0" width="3" height="4"></rect>
+                <rect id="Rectangle-path" fill="#616161" sketch:type="MSShapeGroup" x="18" y="25" width="3" height="4"></rect>
+                <rect id="Rectangle-path" fill="#616161" sketch:type="MSShapeGroup" x="13" y="25" width="3" height="4"></rect>
+                <rect id="Rectangle-path" fill="#616161" sketch:type="MSShapeGroup" x="8" y="25" width="3" height="4"></rect>
+                <path d="M4,4 L4,25 L25,25 L25,4 L4,4 L4,4 Z M22,22 L7,22 L7,7 L22,7 L22,22 L22,22 Z" id="Shape" fill="#757575" sketch:type="MSShapeGroup"></path>
+                <rect id="Rectangle-path" fill="#757575" sketch:type="MSShapeGroup" x="10" y="10" width="9" height="9"></rect>
+                <path d="M19,19 L14.5,19 L14.5,14.4998 L19,9.9997 L19,19 Z" id="Shape" fill="#424242" sketch:type="MSShapeGroup"></path>
+                <path d="M19,19 L10,19 L14.5,14.4998 L19,19 Z" id="Shape" fill="#616161" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/networkSelectField.directive.html

@@ -0,0 +1,14 @@
+<div class="form-group">
+  <div class="col-md-{{labelColumns}} sm-label-right">
+    Network <help-field ng-if="helpKey" key="{{helpKey}}"></help-field>
+  </div>
+  <div class="col-md-{{fieldColumns || 7}}" ng-if="!account">(Select an account)</div>
+  <div class="col-md-{{fieldColumns || 7}}">
+    <select class="form-control input-sm" ng-if="account" ng-model="component.network" ng-change="onChange()" required>
+      <option ng-repeat="network in networks" value="{{network}}" ng-selected="component[field] === network">
+        {{network}}
+      </option>
+    </select>
+    <p ng-if="readOnly" class="form-control-static">{{component[field]}}</p>
+  </div>
+</div>

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 GOOGLE_PIPELINE_STAGES_BAKE_BAKEEXECUTIONDETAILS_CONTROLLER =
+  'spinnaker.gce.pipeline.stage.bake.executionDetails.controller';
+export const name = GOOGLE_PIPELINE_STAGES_BAKE_BAKEEXECUTIONDETAILS_CONTROLLER; // for backwards compatibility
+module(GOOGLE_PIPELINE_STAGES_BAKE_BAKEEXECUTIONDETAILS_CONTROLLER, [UIROUTER_ANGULARJS]).controller(
+  'gceBakeExecutionDetailsCtrl',
+  [
+    '$scope',
+    '$stateParams',
+    'executionDetailsSectionService',
+    '$interpolate',
+    function ($scope, $stateParams, executionDetailsSectionService, $interpolate) {
+      $scope.configSections = ['bakeConfig', 'taskStatus', 'artifactStatus'];
+
+      const initialized = () => {
+        $scope.detailsSection = $stateParams.details;
+        $scope.provider = $scope.stage.context.cloudProviderType || 'gce';
+        $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,60 @@
+<div ng-controller="gceBakeExecutionDetailsCtrl">
+  <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>Google</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.accountName">Account Name</dt>
+          <dd ng-if="stage.context.accountName">{{stage.context.accountName}}</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>
+          <div ng-if="stage.context.imageName">
+            <strong>Image:</strong>
+            <div select-on-dbl-click>{{stage.context.imageName}}</div>
+          </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 class="step-section-details" ng-if="detailsSection === 'artifactStatus'">
+    <execution-artifact-tab stage="stage" execution="execution" config="config"></execution-artifact-tab>
+  </div>
+</div>