@spinnaker/google 0.0.0-main-2

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

@@ -0,0 +1,162 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import { module } from 'angular';
+import ANGULAR_UI_BOOTSTRAP from 'angular-ui-bootstrap';
+
+import { TaskMonitor } from '@spinnaker/core';
+
+import { GOOGLE_LOADBALANCER_CONFIGURE_HTTP_BACKENDSERVICE_BACKENDSERVICE_COMPONENT } from './backendService/backendService.component';
+import { GOOGLE_LOADBALANCER_CONFIGURE_HTTP_BASICSETTINGS_BASICSETTINGS_COMPONENT } from './basicSettings/basicSettings.component';
+import { GCE_CACHE_REFRESH } from '../../../cache/cacheRefresh.component';
+import { GOOGLE_LOADBALANCER_CONFIGURE_HTTP_COMMANDBUILDER_SERVICE } from './commandBuilder.service';
+import { GOOGLE_LOADBALANCER_DETAILS_HOSTANDPATHRULES_HOSTANDPATHRULESBUTTON_COMPONENT } from '../../details/hostAndPathRules/hostAndPathRulesButton.component';
+import { GOOGLE_LOADBALANCER_CONFIGURE_HTTP_HEALTHCHECK_HEALTHCHECK_COMPONENT } from './healthCheck/healthCheck.component';
+import { GOOGLE_LOADBALANCER_CONFIGURE_HTTP_HOSTRULE_HOSTRULE_COMPONENT } from './hostRule/hostRule.component';
+import { GOOGLE_LOADBALANCER_CONFIGURE_HTTP_HTTPLOADBALANCER_WRITE_SERVICE } from './httpLoadBalancer.write.service';
+import { GOOGLE_LOADBALANCER_CONFIGURE_HTTP_LISTENERS_LISTENER_COMPONENT } from './listeners/listener.component';
+import { BackendServiceTemplate, HealthCheckTemplate, HostRuleTemplate, ListenerTemplate } from './templates';
+import { GOOGLE_LOADBALANCER_CONFIGURE_HTTP_TRANSFORMER_SERVICE } from './transformer.service';
+
+import './httpLoadBalancerWizard.component.less';
+
+export const GOOGLE_LOADBALANCER_CONFIGURE_HTTP_CREATEHTTPLOADBALANCER_CONTROLLER =
+  'spinnaker.deck.gce.loadBalancer.createHttp.controller';
+export const name = GOOGLE_LOADBALANCER_CONFIGURE_HTTP_CREATEHTTPLOADBALANCER_CONTROLLER; // for backwards compatibility
+module(GOOGLE_LOADBALANCER_CONFIGURE_HTTP_CREATEHTTPLOADBALANCER_CONTROLLER, [
+  ANGULAR_UI_BOOTSTRAP,
+  UIROUTER_ANGULARJS,
+  GOOGLE_LOADBALANCER_CONFIGURE_HTTP_BACKENDSERVICE_BACKENDSERVICE_COMPONENT,
+  GOOGLE_LOADBALANCER_CONFIGURE_HTTP_BASICSETTINGS_BASICSETTINGS_COMPONENT,
+  GCE_CACHE_REFRESH,
+  GOOGLE_LOADBALANCER_CONFIGURE_HTTP_COMMANDBUILDER_SERVICE,
+  GOOGLE_LOADBALANCER_DETAILS_HOSTANDPATHRULES_HOSTANDPATHRULESBUTTON_COMPONENT,
+  GOOGLE_LOADBALANCER_CONFIGURE_HTTP_HEALTHCHECK_HEALTHCHECK_COMPONENT,
+  GOOGLE_LOADBALANCER_CONFIGURE_HTTP_HOSTRULE_HOSTRULE_COMPONENT,
+  GOOGLE_LOADBALANCER_CONFIGURE_HTTP_HTTPLOADBALANCER_WRITE_SERVICE,
+  GOOGLE_LOADBALANCER_CONFIGURE_HTTP_LISTENERS_LISTENER_COMPONENT,
+  GOOGLE_LOADBALANCER_CONFIGURE_HTTP_TRANSFORMER_SERVICE,
+]).controller('gceCreateHttpLoadBalancerCtrl', [
+  '$scope',
+  '$uibModal',
+  '$uibModalInstance',
+  'application',
+  'loadBalancer',
+  'isNew',
+  'gceHttpLoadBalancerWriter',
+  '$state',
+  'wizardSubFormValidation',
+  'gceHttpLoadBalancerCommandBuilder',
+  'gceHttpLoadBalancerTransformer',
+  function (
+    $scope,
+    $uibModal,
+    $uibModalInstance,
+    application,
+    loadBalancer,
+    isNew,
+    gceHttpLoadBalancerWriter,
+    $state,
+    wizardSubFormValidation,
+    gceHttpLoadBalancerCommandBuilder,
+    gceHttpLoadBalancerTransformer,
+  ) {
+    this.application = application;
+    this.isNew = isNew;
+    this.modalDescriptor = this.isNew
+      ? 'Create HTTP(S) load balancer'
+      : `Edit ${loadBalancer.name}:global:${loadBalancer.account}`;
+
+    this.pages = {
+      location: require('./basicSettings/basicSettings.html'),
+      listeners: require('./listeners/listeners.html'),
+      defaultService: require('./defaultService/defaultService.html'),
+      backendServices: require('./backendService/backendServices.html'),
+      healthChecks: require('./healthCheck/healthChecks.html'),
+      hostRules: require('./hostRule/hostRules.html'),
+    };
+
+    const keyToTemplateMap = {
+      backendServices: BackendServiceTemplate,
+      healthChecks: HealthCheckTemplate,
+      hostRules: HostRuleTemplate,
+      listeners: ListenerTemplate,
+    };
+
+    this.add = (key) => {
+      this.command.loadBalancer[key].push(new keyToTemplateMap[key]());
+    };
+
+    this.remove = (key, index) => {
+      this.command.loadBalancer[key].splice(index, 1);
+    };
+
+    const onApplicationRefresh = () => {
+      // If the user has already closed the modal, do not navigate to the new details view
+      if ($scope.$$destroyed) {
+        return;
+      }
+      $uibModalInstance.close();
+
+      const lb = this.command.loadBalancer;
+      const newStateParams = {
+        name: lb.urlMapName,
+        accountId: lb.credentials,
+        region: lb.region,
+        provider: 'gce',
+      };
+
+      if (!$state.includes('**.loadBalancerDetails')) {
+        $state.go('.loadBalancerDetails', newStateParams);
+      } else {
+        $state.go('^.loadBalancerDetails', newStateParams);
+      }
+    };
+
+    const onTaskComplete = () => {
+      application.loadBalancers.refresh();
+      application.loadBalancers.onNextRefresh($scope, onApplicationRefresh);
+    };
+
+    $scope.taskMonitor = this.taskMonitor = new TaskMonitor({
+      application: this.application,
+      title: (this.isNew ? 'Creating ' : 'Updating ') + 'your load balancer',
+      modalInstance: $uibModalInstance,
+      onTaskComplete: onTaskComplete,
+    });
+
+    this.submit = () => {
+      const serializedCommands = gceHttpLoadBalancerTransformer.serialize(this.command, loadBalancer);
+      const descriptor = this.isNew ? 'Create' : 'Update';
+
+      this.taskMonitor.submit(() =>
+        gceHttpLoadBalancerWriter.upsertLoadBalancers(serializedCommands, application, descriptor),
+      );
+    };
+
+    gceHttpLoadBalancerCommandBuilder.buildCommand({ isNew, originalLoadBalancer: loadBalancer }).then((command) => {
+      this.command = command;
+
+      wizardSubFormValidation
+        .config({ scope: $scope, form: 'form' })
+        .register({ page: 'location', subForm: 'location' })
+        .register({
+          page: 'listeners',
+          subForm: 'listeners',
+          validators: [
+            {
+              watchString: 'ctrl.command.loadBalancer.listeners',
+              validator: (listeners) => listeners.length > 0,
+              collection: true,
+            },
+          ],
+        })
+        .register({ page: 'default-service', subForm: 'defaultService' })
+        .register({ page: 'health-checks', subForm: 'healthChecks' })
+        .register({ page: 'backend-services', subForm: 'backendServices' })
+        .register({ page: 'host-rules', subForm: 'hostRules' });
+    });
+
+    this.cancel = $uibModalInstance.dismiss;
+  },
+]);

package/src/loadBalancer/configure/http/createHttpLoadBalancer.html

@@ -0,0 +1,39 @@
+<form name="form" novalidate class="form-horizontal gce-http-lb">
+  <div ng-if="!ctrl.command" style="height: 200px" class="horizontal center middle">
+    <loading-spinner size="'small'"></loading-spinner>
+  </div>
+  <v2-modal-wizard
+    heading="{{:: ctrl.modalDescriptor}}"
+    ng-if="ctrl.command"
+    task-monitor="taskMonitor"
+    dismiss="$dismiss()"
+  >
+    <v2-wizard-page key="location" label="Location" mark-complete-on-view="false">
+      <ng-include src="ctrl.pages.location"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="listeners" label="Listeners" mark-complete-on-view="false">
+      <ng-include src="ctrl.pages.listeners"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="default-service" label="Default Service" mark-complete-on-view="false">
+      <ng-include src="ctrl.pages.defaultService"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="host-rules" label="Host Rules" mark-complete-on-view="false">
+      <ng-include src="ctrl.pages.hostRules"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="backend-services" label="Backend Services" mark-complete-on-view="false">
+      <ng-include src="ctrl.pages.backendServices"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="health-checks" label="Health Checks" mark-complete-on-view="false">
+      <ng-include src="ctrl.pages.healthChecks"></ng-include>
+    </v2-wizard-page>
+  </v2-modal-wizard>
+  <div class="modal-footer">
+    <button ng-disabled="taskMonitor.submitting" class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+    <submit-button
+      is-disabled="form.$invalid || taskMonitor.submitting"
+      submitting="taskMonitor.submitting"
+      on-click="ctrl.submit()"
+      is-new="ctrl.isNew"
+    ></submit-button>
+  </div>
+</form>

package/src/loadBalancer/configure/http/defaultService/defaultService.html

@@ -0,0 +1,24 @@
+<ng-form name="defaultService">
+  <div class="container-fluid form-horizontal">
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Default Service</b><help-field key="gce.httpLoadBalancer.defaultService"></help-field>
+      </div>
+      <div class="col-md-4">
+        <ui-select
+          ng-model="ctrl.command.loadBalancer.defaultService"
+          required
+          on-select="ctrl.command.onBackendServiceSelected($item, ctrl.command)"
+          class="form-control input-sm"
+        >
+          <ui-select-match placeholder="Select..."> {{$select.selected}} </ui-select-match>
+          <ui-select-choices
+            repeat="backendService in ctrl.command.getAllBackendServices(ctrl.command) | filter: $select.search"
+          >
+            <div ng-bind-html="backendService | highlight: $select.search"></div>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+    </div>
+  </div>
+</ng-form>

package/src/loadBalancer/configure/http/editHttpLoadBalancer.html

@@ -0,0 +1,36 @@
+<form name="form" novalidate class="form-horizontal gce-http-lb">
+  <div ng-if="!ctrl.command" style="height: 200px" class="horizontal center middle">
+    <loading-spinner size="'small'"></loading-spinner>
+  </div>
+  <v2-modal-wizard
+    heading="{{:: ctrl.modalDescriptor}}"
+    ng-if="ctrl.command"
+    task-monitor="taskMonitor"
+    dismiss="$dismiss()"
+  >
+    <v2-wizard-page key="listeners" label="Listeners" done="true">
+      <ng-include src="ctrl.pages.listeners"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="default-service" label="Default Service" mark-complete-on-view="false">
+      <ng-include src="ctrl.pages.defaultService"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="host-rules" label="Host Rules" mark-complete-on-view="false">
+      <ng-include src="ctrl.pages.hostRules"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="backend-services" label="Backend Services" mark-complete-on-view="false">
+      <ng-include src="ctrl.pages.backendServices"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="health-checks" label="Health Checks" mark-complete-on-view="false">
+      <ng-include src="ctrl.pages.healthChecks"></ng-include>
+    </v2-wizard-page>
+  </v2-modal-wizard>
+  <div class="modal-footer">
+    <button ng-disabled="taskMonitor.submitting" class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+    <submit-button
+      is-disabled="form.$invalid || taskMonitor.submitting"
+      submitting="taskMonitor.submitting"
+      on-click="ctrl.submit()"
+      is-new="ctrl.isNew"
+    ></submit-button>
+  </div>
+</form>

package/src/loadBalancer/configure/http/healthCheck/healthCheck.component.html

@@ -0,0 +1,169 @@
+<hr ng-if="$ctrl.index > 0" />
+<ng-form name="healthCheck">
+  <div class="container-fluid form-horizontal">
+    <div class="form-group">
+      <div class="col-md-12 well alert-danger" ng-if="healthCheck.healthCheckName.$error.validateUnique">
+        <validation-error message="There is already a health check with that name."></validation-error>
+      </div>
+      <div
+        class="col-md-12 well alert-danger"
+        ng-if="healthCheck.healthCheckName.$error.pattern || healthCheck.healthCheckName.$error.max"
+      >
+        <validation-error
+          message="Name must start with a lowercase letter followed by up to 62 lowercase letters, numbers, or hyphens, and cannot end with a hyphen."
+        >
+        </validation-error>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">Protocol</div>
+      <div class="col-md-4">
+        <select
+          class="form-control input-sm"
+          ng-change="$ctrl.onProtocolChange()"
+          ng-model="$ctrl.healthCheckType"
+          ng-options="protocol as protocol for protocol in ['HTTP', 'HTTPS', 'TCP', 'SSL']"
+        ></select>
+      </div>
+      <div class="col-md-2">
+        <button class="btn btn-sm btn-default" ng-click="$ctrl.deleteHealthCheck()">
+          <span class="glyphicon glyphicon-trash visible-lg-inline"></span>
+          <span>Delete</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">Name</div>
+
+      <div class="col-md-4" ng-if="$ctrl.editExisting">
+        <ui-select
+          ng-model="$ctrl.healthCheck"
+          on-select="$ctrl.onHealthCheckSelect($item)"
+          class="form-control input-sm"
+        >
+          <ui-select-match placeholder="Select...">
+            {{ $select.selected.name }}
+          </ui-select-match>
+          <ui-select-choices
+            repeat="healthCheck in $ctrl.backingData.healthChecks | filter: {name: $select.search, account: $ctrl.loadBalancer.credentials, healthCheckType: $ctrl.healthCheckType}"
+          >
+            <div ng-bind-html="healthCheck.name | highlight: $select.search"></div>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+
+      <div class="col-md-4" ng-if="!$ctrl.editExisting">
+        <input
+          class="form-control input-sm"
+          type="text"
+          ng-pattern="/^[a-z]([-a-z0-9]*[a-z0-9])?$/"
+          name="healthCheckName"
+          max="63"
+          required
+          validate-unique="$ctrl.getAllHealthCheckNames()"
+          ng-model-options="{ debounce: 250 }"
+          ng-model="$ctrl.healthCheck.name"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-6 col-md-offset-4">
+        <a href class="small" ng-if="!$ctrl.editExisting" ng-click="$ctrl.toggleEditExisting()"
+          >Toggle for list of existing health checks</a
+        >
+        <a href class="small" ng-if="$ctrl.editExisting" ng-click="$ctrl.toggleEditExisting()">Toggle for text input</a>
+      </div>
+    </div>
+
+    <div
+      class="form-group"
+      ng-if="$ctrl.healthCheck.healthCheckType === 'HTTP' || $ctrl.healthCheck.healthCheckType === 'HTTPS'"
+    >
+      <div class="col-md-4 sm-label-right">Request Path</div>
+      <div class="col-md-4">
+        <input class="form-control input-sm" required ng-model="$ctrl.healthCheck.requestPath" />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">Port</div>
+      <div class="col-md-4">
+        <input
+          type="number"
+          class="form-control input-sm"
+          required
+          min="1"
+          max="65535"
+          ng-model="$ctrl.healthCheck.port"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Timeout</b><help-field key="loadBalancer.advancedSettings.healthTimeout"></help-field>
+      </div>
+      <div class="col-md-4">
+        <input
+          class="form-control input-sm"
+          type="number"
+          min="0"
+          max="{{:: $ctrl.max}}"
+          required
+          ng-model="$ctrl.healthCheck.timeoutSec"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Interval</b><help-field key="gce.loadBalancer.advancedSettings.healthInterval"></help-field>
+      </div>
+      <div class="col-md-4">
+        <input
+          class="form-control input-sm"
+          type="number"
+          min="0"
+          max="{{:: $ctrl.max}}"
+          required
+          ng-model="$ctrl.healthCheck.checkIntervalSec"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Healthy Threshold</b><help-field key="gce.loadBalancer.advancedSettings.healthyThreshold"></help-field>
+      </div>
+      <div class="col-md-4">
+        <input
+          class="form-control input-sm"
+          type="number"
+          min="0"
+          max="{{:: $ctrl.max}}"
+          required
+          ng-model="$ctrl.healthCheck.healthyThreshold"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Unhealthy Threshold</b><help-field key="gce.loadBalancer.advancedSettings.unhealthyThreshold"></help-field>
+      </div>
+      <div class="col-md-4">
+        <input
+          class="form-control input-sm"
+          type="number"
+          min="0"
+          max="{{:: $ctrl.max}}"
+          required
+          ng-model="$ctrl.healthCheck.unhealthyThreshold"
+        />
+      </div>
+    </div>
+  </div>
+</ng-form>

package/src/loadBalancer/configure/http/healthCheck/healthCheck.component.js

@@ -0,0 +1,69 @@
+'use strict';
+
+import { module } from 'angular';
+import _ from 'lodash';
+
+import { HealthCheckTemplate } from '../templates';
+
+export const GOOGLE_LOADBALANCER_CONFIGURE_HTTP_HEALTHCHECK_HEALTHCHECK_COMPONENT =
+  'spinnaker.deck.httpLoadBalancer.healthCheck.component';
+export const name = GOOGLE_LOADBALANCER_CONFIGURE_HTTP_HEALTHCHECK_HEALTHCHECK_COMPONENT; // for backwards compatibility
+module(GOOGLE_LOADBALANCER_CONFIGURE_HTTP_HEALTHCHECK_HEALTHCHECK_COMPONENT, []).component(
+  'gceHttpLoadBalancerHealthCheck',
+  {
+    bindings: {
+      command: '=',
+      deleteHealthCheck: '&',
+      healthCheck: '=',
+      index: '=',
+    },
+    templateUrl: require('./healthCheck.component.html'),
+    controller: function () {
+      this.$onInit = () => {
+        this.max = Number.MAX_SAFE_INTEGER;
+        this.backingData = this.command.backingData;
+        this.loadBalancer = this.command.loadBalancer;
+        const healthChecksByName = this.backingData.healthChecksKeyedByName;
+
+        this.onHealthCheckSelect = (selectedHealthCheck) => {
+          assign(selectedHealthCheck);
+        };
+
+        this.getAllHealthCheckNames = () => {
+          return this.command.backingData.healthChecks
+            .filter((hc) => hc.account === this.loadBalancer.credentials)
+            .map((hc) => hc.name);
+        };
+
+        this.toggleEditExisting = () => {
+          this.editExisting = !this.editExisting;
+          if (!this.editExisting) {
+            assign(new HealthCheckTemplate());
+          } else {
+            delete this.healthCheck.name;
+          }
+        };
+
+        const assign = (toAssign) => {
+          this.loadBalancer.healthChecks[this.index] = this.healthCheck = toAssign;
+        };
+
+        const getHealthCheckName = () => {
+          return _.get(this, 'healthCheck.name');
+        };
+
+        this.onProtocolChange = () => {
+          if (this.healthCheck.healthCheckType !== this.healthCheckType) {
+            assign(Object.assign({}, new HealthCheckTemplate(), { healthCheckType: this.healthCheckType }));
+          }
+        };
+
+        if (healthChecksByName[getHealthCheckName()]) {
+          this.editExisting = true;
+        }
+
+        this.healthCheckType = this.healthCheck.healthCheckType;
+      };
+    },
+  },
+);

package/src/loadBalancer/configure/http/healthCheck/healthChecks.html

@@ -0,0 +1,55 @@
+<ng-form name="healthChecks">
+  <div class="col-md-12" ng-if="ctrl.command.getUnusedHealthChecks(ctrl.command).length">
+    <div class="alert alert-warning">
+      <p>
+        <i class="fa fa-exclamation-triangle"></i>
+        The following health checks have not been associated with a backend service:
+      </p>
+      <ul>
+        <li ng-repeat="service in ctrl.command.getUnusedHealthChecks(ctrl.command)" ng-bind-html="service"></li>
+      </ul>
+      <p class="text-right">
+        <a
+          class="btn btn-sm btn-default dirty-flag-dismiss"
+          href
+          ng-click="ctrl.command.removeUnusedHealthChecks(ctrl.command)"
+          >Remove health checks</a
+        >
+      </p>
+    </div>
+  </div>
+  <div
+    class="col-md-12"
+    ng-if="!ctrl.command.loadBalancer.healthChecks.length && !ctrl.command.backingData.healthChecks.length"
+  >
+    <div class="alert alert-warning">
+      <p>
+        <i class="fa fa-exclamation-triangle"></i>
+        You have not configured any health checks.
+      </p>
+    </div>
+  </div>
+  <gce-http-load-balancer-health-check
+    ng-repeat="healthCheck in ctrl.command.loadBalancer.healthChecks"
+    index="$index"
+    command="ctrl.command"
+    delete-health-check="ctrl.remove('healthChecks', $index)"
+    health-check="healthCheck"
+  ></gce-http-load-balancer-health-check>
+  <div class="row">
+    <div class="col-md-12">
+      <button class="add-new btn btn-block" ng-click="ctrl.add('healthChecks')">
+        <span class="glyphicon glyphicon-plus-sign"></span> Add health check
+      </button>
+    </div>
+  </div>
+  <div class="form-group small" style="margin-top: 20px">
+    <div class="col-md-offset-2 col-md-6">
+      <gce-cache-refresh
+        cache-key="healthChecks"
+        cache-key-alias="health checks"
+        on-refresh="ctrl.command.onHealthCheckRefresh(ctrl.command)"
+      ></gce-cache-refresh>
+    </div>
+  </div>
+</ng-form>

package/src/loadBalancer/configure/http/hostRule/hostRule.component.html

@@ -0,0 +1,60 @@
+<hr class="host-rule" ng-if="$ctrl.index > 0" />
+<div class="container-fluid form-horizontal">
+  <div class="form-group">
+    <div class="col-md-4 sm-label-right">
+      Host Patterns
+      <help-field key="gce.httpLoadBalancer.hostRule.hostPattern"> </help-field>
+    </div>
+    <div class="col-md-4">
+      <ui-select multiple tagging tagging-label="" ng-model="$ctrl.hostRule.hostPatterns" class="form-control input-sm">
+        <ui-select-match>{{ $item }}</ui-select-match>
+        <ui-select-choices repeat="hostPattern in []">
+          {{ hostPattern }}
+        </ui-select-choices>
+      </ui-select>
+    </div>
+    <div class="col-md-1">
+      <button class="btn btn-sm btn-default" ng-click="$ctrl.deleteHostRule()">
+        <span class="glyphicon glyphicon-trash visible-lg-inline"></span>
+        <span>Delete</span>
+      </button>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-md-4 sm-label-right">
+      <b>Default Service</b>
+    </div>
+    <div class="col-md-4">
+      <ui-select
+        ng-model="$ctrl.hostRule.pathMatcher.defaultService"
+        on-select="$ctrl.command.onBackendServiceSelected($item, $ctrl.command)"
+        class="form-control input-sm"
+      >
+        <ui-select-match placeholder="Select...">
+          {{ $select.selected }}
+        </ui-select-match>
+        <ui-select-choices
+          repeat="backendService in $ctrl.command.getAllBackendServices($ctrl.command) | filter: $select.search"
+        >
+          <div ng-bind-html="backendService | highlight: $select.search"></div>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+  </div>
+  <gce-path-rule
+    path-rule="pathRule"
+    index="$index"
+    command="$ctrl.command"
+    delete-path-rule="$ctrl.deletePathRule($index)"
+    ng-repeat="pathRule in $ctrl.hostRule.pathMatcher.pathRules"
+  >
+  </gce-path-rule>
+  <div class="row">
+    <div class="col-md-12">
+      <button class="add-new btn btn-block" ng-click="$ctrl.addPathRule()">
+        <span class="glyphicon glyphicon-plus-sign"></span> Add path rule
+      </button>
+    </div>
+  </div>
+</div>

package/src/loadBalancer/configure/http/hostRule/hostRule.component.js

@@ -0,0 +1,35 @@
+'use strict';
+
+import { module } from 'angular';
+
+import { GOOGLE_LOADBALANCER_CONFIGURE_HTTP_PATHRULE_PATHRULE_COMPONENT } from '../pathRule/pathRule.component';
+import { PathRuleTemplate } from '../templates';
+
+export const GOOGLE_LOADBALANCER_CONFIGURE_HTTP_HOSTRULE_HOSTRULE_COMPONENT =
+  'spinnaker.deck.gce.httpLoadBalancer.hostRule.component';
+export const name = GOOGLE_LOADBALANCER_CONFIGURE_HTTP_HOSTRULE_HOSTRULE_COMPONENT; // for backwards compatibility
+module(GOOGLE_LOADBALANCER_CONFIGURE_HTTP_HOSTRULE_HOSTRULE_COMPONENT, [
+  GOOGLE_LOADBALANCER_CONFIGURE_HTTP_PATHRULE_PATHRULE_COMPONENT,
+]).component('gceHostRule', {
+  bindings: {
+    hostRule: '=',
+    index: '=',
+    command: '=',
+    deleteHostRule: '&',
+  },
+  templateUrl: require('./hostRule.component.html'),
+  controller: function () {
+    this.$onInit = () => {
+      this.loadBalancer = this.command.loadBalancer;
+      const pathRules = this.hostRule.pathMatcher.pathRules;
+
+      this.addPathRule = () => {
+        pathRules.push(new PathRuleTemplate());
+      };
+
+      this.deletePathRule = (index) => {
+        pathRules.splice(index, 1);
+      };
+    };
+  },
+});

package/src/loadBalancer/configure/http/hostRule/hostRules.html

@@ -0,0 +1,16 @@
+<ng-form name="hostRules">
+  <gce-host-rule
+    ng-repeat="hostRule in ctrl.command.loadBalancer.hostRules"
+    host-rule="hostRule"
+    index="$index"
+    command="ctrl.command"
+    delete-host-rule="ctrl.remove('hostRules', $index)"
+  ></gce-host-rule>
+  <div class="row">
+    <div class="col-md-12">
+      <button class="add-new btn btn-block" ng-click="ctrl.add('hostRules')">
+        <span class="glyphicon glyphicon-plus-sign"></span> Add host rule
+      </button>
+    </div>
+  </div>
+</ng-form>