@spinnaker/azure 0.0.0-2025.1-0

package/src/loadBalancer/configure/advancedSettings.html

@@ -0,0 +1,95 @@
+<div class="container-fluid form-horizontal">
+  <div class="form-group">
+    <div class="col-md-12">
+      <div class="form-group">
+        <div class="col-md-3">
+          <b>Custom DNS Label</b>
+          <help-field key="azure.loadBalancer.dnsName"></help-field>
+        </div>
+        <div class="col-md-6">
+          <input class="form-control input-sm" type="text" ng-model="loadBalancer.dnsName" />
+          <span>.{{loadBalancer.region}}.cloudapp.azure.com</span>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="col-md-3">
+          <b>Health Check</b>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="col-md-4 sm-label-right">
+          <b>Interval</b>
+          <help-field key="azure.loadBalancer.probes.probeInterval"></help-field>
+        </div>
+        <div class="col-md-4">
+          <input class="form-control input-sm" type="number" min="0" ng-model="loadBalancer.probes[0].probeInterval" />
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="col-md-4 sm-label-right">
+          <b>Unhealthy Threshold</b>
+          <help-field key="azure.loadBalancer.probes.unhealthyThreshold"></help-field>
+        </div>
+        <div class="col-md-4">
+          <input
+            class="form-control input-sm"
+            type="number"
+            min="0"
+            ng-model="loadBalancer.probes[0].unhealthyThreshold"
+          />
+        </div>
+      </div>
+      <div class="form-group" ng-if="isALB">
+        <div class="col-md-4 sm-label-right">
+          <b>Idle Timeout</b>
+          <help-field key="azure.loadBalancer.loadBalancingRules.idleTimeout"></help-field>
+        </div>
+        <div class="col-md-4">
+          <input
+            class="form-control input-sm"
+            type="number"
+            min="0"
+            ng-model="loadBalancer.loadBalancingRules[0].idleTimeout"
+          />
+        </div>
+      </div>
+      <div class="form-group" ng-if="!isALB">
+        <div class="col-md-4 sm-label-right">
+          <b>Timeout</b>
+          <help-field key="azure.loadBalancer.probes.timeout"></help-field>
+        </div>
+        <div class="col-md-4">
+          <input class="form-control input-sm" type="number" min="0" ng-model="loadBalancer.probes[0].timeout" />
+        </div>
+      </div>
+      <div class="form-group" ng-if="isNew && !isALB">
+        <div class="col-md-4 sm-label-right">
+          <b>SKU</b>
+          <help-field key="azure.loadBalancer.sku"></help-field>
+        </div>
+        <div class="col-md-4">
+          <select
+            class="form-control input-sm"
+            ng-model="loadBalancer.sku"
+            ng-options="sku for sku in validSkus"
+          ></select>
+        </div>
+      </div>
+      <div class="form-group" ng-if="isALB">
+        <div class="col-md-4 sm-label-right">
+          <b>Session persistence</b>
+          <help-field key="azure.loadBalancer.loadBalancingRules.sessionPersistence"></help-field>
+        </div>
+        <div class="col-md-4">
+          <select
+            class="form-control input-sm"
+            ng-model="loadBalancer.sessionPersistence"
+            ng-init="loadBalancer.sessionPersistence = 'None'"
+            required
+            ng-options="p for p in ['None', 'Client IP', 'Client IP and protocol']"
+          ></select>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/loadBalancer/configure/createLoadBalancer.controller.js

@@ -0,0 +1,275 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import { module } from 'angular';
+import _ from 'lodash';
+
+import { AccountService, LoadBalancerWriter, NameUtils, NetworkReader, TaskMonitor } from '@spinnaker/core';
+
+import { AZURE_LOADBALANCER_LOADBALANCER_TRANSFORMER } from '../loadBalancer.transformer';
+
+export const AZURE_LOADBALANCER_CONFIGURE_CREATELOADBALANCER_CONTROLLER =
+  'spinnaker.azure.loadBalancer.create.controller';
+export const name = AZURE_LOADBALANCER_CONFIGURE_CREATELOADBALANCER_CONTROLLER; // for backwards compatibility
+module(AZURE_LOADBALANCER_CONFIGURE_CREATELOADBALANCER_CONTROLLER, [
+  UIROUTER_ANGULARJS,
+  AZURE_LOADBALANCER_LOADBALANCER_TRANSFORMER,
+]).controller('azureCreateLoadBalancerCtrl', [
+  '$scope',
+  '$uibModalInstance',
+  '$state',
+  'azureLoadBalancerTransformer',
+  'application',
+  'loadBalancer',
+  'isNew',
+  'loadBalancerType',
+  function (
+    $scope,
+    $uibModalInstance,
+    $state,
+    azureLoadBalancerTransformer,
+    application,
+    loadBalancer,
+    isNew,
+    loadBalancerType,
+  ) {
+    const ctrl = this;
+
+    $scope.regions = [];
+
+    $scope.pages = {
+      location: require('./createLoadBalancerProperties.html'),
+      listeners: require('./listeners.html'),
+      healthCheck: require('./healthCheck.html'),
+      advancedSettings: require('./advancedSettings.html'),
+    };
+
+    $scope.isNew = isNew;
+    $scope.loadBalancerType = loadBalancerType.type;
+    $scope.isALB = loadBalancerType.type === 'Azure Load Balancer';
+
+    $scope.state = {
+      accountsLoaded: false,
+      submitting: false,
+    };
+
+    $scope.validSkus = ['Standard_v2', 'Standard_Small'];
+
+    function onApplicationRefresh() {
+      // If the user has already closed the modal, do not navigate to the new details view
+      if ($scope.$$destroyed) {
+        return;
+      }
+      $uibModalInstance.close();
+      const newStateParams = {
+        name: $scope.loadBalancer.name,
+        accountId: $scope.loadBalancer.credentials,
+        region: $scope.loadBalancer.region,
+        provider: 'azure',
+      };
+
+      if (!$state.includes('**.loadBalancerDetails')) {
+        $state.go('.loadBalancerDetails', newStateParams);
+      } else {
+        $state.go('^.loadBalancerDetails', newStateParams);
+      }
+    }
+
+    function onTaskComplete() {
+      application.loadBalancers.refresh();
+      application.loadBalancers.onNextRefresh($scope, onApplicationRefresh);
+    }
+
+    $scope.taskMonitor = new TaskMonitor({
+      application: application,
+      title: (isNew ? 'Creating ' : 'Updating ') + 'your load balancer',
+      modalInstance: $uibModalInstance,
+      onTaskComplete: onTaskComplete,
+    });
+
+    function initializeCreateMode() {
+      AccountService.listAccounts('azure').then(function (accounts) {
+        $scope.accounts = accounts;
+        $scope.state.accountsLoaded = true;
+        ctrl.accountUpdated();
+      });
+    }
+
+    function initializeController() {
+      if (loadBalancer) {
+        $scope.loadBalancer = azureLoadBalancerTransformer.convertLoadBalancerForEditing(loadBalancer);
+        if (isNew) {
+          const nameParts = NameUtils.parseLoadBalancerName($scope.loadBalancer.name);
+          $scope.loadBalancer.stack = nameParts.stack;
+          $scope.loadBalancer.detail = nameParts.freeFormDetails;
+          delete $scope.loadBalancer.name;
+        }
+      } else {
+        $scope.loadBalancer = azureLoadBalancerTransformer.constructNewLoadBalancerTemplate(application);
+      }
+      if (isNew) {
+        updateLoadBalancerNames();
+        initializeCreateMode();
+      }
+    }
+
+    function updateLoadBalancerNames() {
+      const account = $scope.loadBalancer.credentials;
+      const region = $scope.loadBalancer.region;
+
+      const accountLoadBalancersByRegion = {};
+      application
+        .getDataSource('loadBalancers')
+        .refresh(true)
+        .then(() => {
+          application.getDataSource('loadBalancers').data.forEach((loadBalancer) => {
+            if (loadBalancer.account === account) {
+              accountLoadBalancersByRegion[loadBalancer.region] =
+                accountLoadBalancersByRegion[loadBalancer.region] || [];
+              accountLoadBalancersByRegion[loadBalancer.region].push(loadBalancer.name);
+            }
+          });
+
+          $scope.existingLoadBalancerNames = accountLoadBalancersByRegion[region] || [];
+        });
+    }
+
+    initializeController();
+
+    this.requiresHealthCheckPath = function () {
+      return (
+        $scope.loadBalancer.probes[0].probeProtocol && $scope.loadBalancer.probes[0].probeProtocol.indexOf('HTTP') === 0
+      );
+    };
+
+    this.updateName = function () {
+      $scope.loadBalancer.name = this.getName();
+    };
+
+    this.getName = function () {
+      const elb = $scope.loadBalancer;
+      const elbName = [application.name, elb.stack || '', elb.detail || ''].join('-');
+      return _.trimEnd(elbName, '-');
+    };
+
+    this.accountUpdated = function () {
+      AccountService.getRegionsForAccount($scope.loadBalancer.credentials).then(function (regions) {
+        $scope.regions = regions;
+        ctrl.regionUpdated();
+      });
+    };
+
+    this.regionUpdated = function () {
+      updateLoadBalancerNames();
+      ctrl.updateName();
+      ctrl.vnetUpdated();
+    };
+
+    this.vnetUpdated = function () {
+      const account = $scope.loadBalancer.credentials;
+      const region = $scope.loadBalancer.region;
+      $scope.loadBalancer.selectedVnet = null;
+      $scope.loadBalancer.vnet = null;
+      $scope.loadBalancer.vnetResourceGroup = null;
+      ctrl.selectedVnets = [];
+
+      NetworkReader.listNetworks().then(function (vnets) {
+        if (vnets.azure) {
+          vnets.azure.forEach((vnet) => {
+            if (vnet.account === account && vnet.region === region) {
+              ctrl.selectedVnets.push(vnet);
+            }
+          });
+        }
+      });
+
+      ctrl.subnetUpdated();
+    };
+
+    this.subnetUpdated = function () {
+      $scope.loadBalancer.selectedSubnet = null;
+      $scope.loadBalancer.subnet = null;
+      ctrl.selectedSubnets = [];
+    };
+
+    this.selectedVnetChanged = function (item) {
+      $scope.loadBalancer.vnet = item.name;
+      $scope.loadBalancer.vnetResourceGroup = item.resourceGroup;
+      $scope.loadBalancer.selectedSubnet = null;
+      $scope.loadBalancer.subnet = null;
+      ctrl.selectedSubnets = [];
+      if (item.subnets) {
+        item.subnets.map(function (subnet) {
+          let addSubnet = true;
+          if (subnet.devices) {
+            subnet.devices.map(function (device) {
+              if (device && device.type !== 'applicationGateways') {
+                addSubnet = false;
+              }
+            });
+          }
+          if (addSubnet) {
+            ctrl.selectedSubnets.push(subnet);
+          }
+        });
+      }
+    };
+
+    this.removeListener = function (index) {
+      $scope.loadBalancer.loadBalancingRules.splice(index, 1);
+    };
+
+    this.addListener = function () {
+      $scope.loadBalancer.loadBalancingRules.push({ protocol: 'HTTP' });
+    };
+
+    this.submit = function () {
+      const descriptor = isNew ? 'Create' : 'Update';
+
+      $scope.taskMonitor.submit(function () {
+        const params = {
+          cloudProvider: 'azure',
+          appName: application.name,
+          clusterName: $scope.loadBalancer.clusterName,
+          resourceGroupName: $scope.loadBalancer.clusterName,
+          loadBalancerName: $scope.loadBalancer.name,
+        };
+
+        if ($scope.loadBalancer.selectedVnet) {
+          $scope.loadBalancer.vnet = $scope.loadBalancer.selectedVnet.name;
+          $scope.loadBalancer.vnetResourceGroup = $scope.loadBalancer.selectedVnet.resourceGroup;
+        }
+
+        if ($scope.loadBalancer.selectedSubnet) {
+          $scope.loadBalancer.subnet = $scope.loadBalancer.selectedSubnet.name;
+        }
+
+        const name = $scope.loadBalancer.clusterName || $scope.loadBalancer.name;
+        const probeName = name + '-probe';
+        const ruleNameBase = name + '-rule';
+        $scope.loadBalancer.type = 'upsertLoadBalancer';
+        $scope.loadBalancer.loadBalancerType = $scope.loadBalancerType;
+        if (!$scope.loadBalancer.vnet && !$scope.loadBalancer.subnetType) {
+          $scope.loadBalancer.securityGroups = null;
+        }
+
+        $scope.loadBalancer.probes[0].probeName = probeName;
+
+        $scope.loadBalancer.loadBalancingRules.forEach((rule, index) => {
+          rule.ruleName = ruleNameBase + index;
+          rule.probeName = probeName;
+        });
+
+        if ($scope.loadBalancer.probes[0].probeProtocol === 'TCP') {
+          $scope.loadBalancer.probes[0].probePath = undefined;
+        }
+
+        return LoadBalancerWriter.upsertLoadBalancer($scope.loadBalancer, application, descriptor, params);
+      });
+    };
+
+    this.cancel = function () {
+      $uibModalInstance.dismiss();
+    };
+  },
+]);

package/src/loadBalancer/configure/createLoadBalancer.controller.spec.js

@@ -0,0 +1,39 @@
+'use strict';
+import { ApplicationModelBuilder } from '@spinnaker/core';
+
+describe('Controller: azureCreateLoadBalancerCtrl', function () {
+  // load the controller's module
+  beforeEach(window.module(require('./createLoadBalancer.controller').name));
+
+  // Initialize the controller and a mock scope
+  beforeEach(
+    window.inject(function ($controller, $rootScope) {
+      const app = ApplicationModelBuilder.createApplicationForTests('app', {
+        key: 'loadBalancers',
+        lazy: true,
+        defaultData: [],
+      });
+      this.$scope = $rootScope.$new();
+      this.ctrl = $controller('azureCreateLoadBalancerCtrl', {
+        $scope: this.$scope,
+        $uibModalInstance: { dismiss: angular.noop, result: { then: angular.noop } },
+        application: app,
+        loadBalancer: null,
+        isNew: true,
+        loadBalancerType: 'Azure Load Balancer',
+      });
+    }),
+  );
+
+  it('correctly creates a default loadbalancer', function () {
+    var lb = this.$scope.loadBalancer;
+
+    expect(lb.probes.length).toEqual(1);
+    expect(lb.loadBalancingRules.length).toEqual(1);
+
+    expect(lb.loadBalancingRules[0].protocol).toEqual('HTTP');
+
+    expect(this.$scope.existingLoadBalancerNames).toEqual(undefined);
+    expect(lb.providerType).toEqual(undefined);
+  });
+});

package/src/loadBalancer/configure/createLoadBalancer.html

@@ -0,0 +1,25 @@
+<form name="form" class="form-horizontal" novalidate validate-on-submit>
+  <v2-modal-wizard heading="Create New {{loadBalancerType}}" task-monitor="taskMonitor" dismiss="$dismiss()">
+    <v2-wizard-page key="Location" label="Location">
+      <ng-include src="pages.location"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="Listeners" label="Listeners" done="true">
+      <ng-include src="pages.listeners"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="Health Check" label="Health Check" done="true" hide-subheading="true">
+      <ng-include src="pages.healthCheck"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="Advanced Settings" label="Advanced Settings" done="true">
+      <ng-include src="pages.advancedSettings"></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="!state.accountsLoaded || taskMonitor.submitting"
+      submitting="taskMonitor.submitting"
+      on-click="form.$valid && ctrl.submit()"
+      is-new="isNew"
+    ></submit-button>
+  </div>
+</form>

package/src/loadBalancer/configure/createLoadBalancerProperties.html

@@ -0,0 +1,128 @@
+<div>
+  <div ng-if="!state.accountsLoaded" style="height: 200px" class="horizontal center middle">
+    <loading-spinner size="'small'"></loading-spinner>
+  </div>
+  <div class="modal-body" ng-if="state.accountsLoaded">
+    <div class="form-group">
+      <div
+        class="col-md-12 well"
+        ng-class="{'alert-danger': form.loadBalancerName.$error.validateUnique, 'alert-info': !form.loadBalancerName.$error.validateUnique}"
+      >
+        <strong>Your {{loadBalancerType}} will be named:</strong>
+        <span>{{ctrl.getName()}}</span>
+        <!-- Angular does not seem to run length validation on hidden inputs, hence the text + display:none -->
+        <input
+          type="text"
+          style="display: none"
+          ng-maxlength="32"
+          class="form-control input-sm"
+          ng-model="loadBalancer.name"
+          validate-unique="existingLoadBalancerNames"
+          validate-ignore-case="true"
+          name="loadBalancerName"
+        />
+        <validation-error
+          ng-if="form.loadBalancerName.$error.validateUnique"
+          message="There is already a load balancer in {{loadBalancer.credentials}}:{{loadBalancer.region}} with that name."
+        ></validation-error>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Account</div>
+      <div class="col-md-7">
+        <account-select-field
+          required
+          component="loadBalancer"
+          field="credentials"
+          accounts="accounts"
+          provider="'azure'"
+          on-change="ctrl.accountUpdated()"
+        ></account-select-field>
+      </div>
+    </div>
+    <region-select-field
+      required
+      label-columns="3"
+      component="loadBalancer"
+      field="region"
+      account="loadBalancer.credentials"
+      provider="'azure'"
+      on-change="ctrl.regionUpdated()"
+      regions="regions"
+    ></region-select-field>
+
+    <div class="form-group" ng-if="!isALB">
+      <div class="col-md-3 sm-label-right">Virtual Network</div>
+      <div class="col-md-7">
+        <ui-select
+          class="form-control input-sm"
+          required
+          ng-model="loadBalancer.selectedVnet"
+          on-select="ctrl.selectedVnetChanged($item)"
+        >
+          <ui-select-match placeholder="Select from existing virtual networks"
+            >{{$select.selected.name}}</ui-select-match
+          >
+          <ui-select-choices repeat="selectVnet in ctrl.selectedVnets | filter: $select.search">
+            <span ng-bind-html="selectVnet.name | highlight: $select.search"></span>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+    </div>
+
+    <div class="form-group" ng-if="!isALB">
+      <div class="col-md-3 sm-label-right">Subnet</div>
+      <div class="col-md-7">
+        <ui-select
+          class="form-control input-sm"
+          required
+          ng-model="loadBalancer.selectedSubnet"
+          on-select="ctrl.selectedSubnetChanged($item)"
+        >
+          <ui-select-match placeholder="Select from existing subnets">{{$select.selected.name}}</ui-select-match>
+          <ui-select-choices repeat="selectSubnet in ctrl.selectedSubnets | filter: $select.search">
+            <span ng-bind-html="selectSubnet.name | highlight: $select.search"></span>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Stack <help-field key="azure.loadBalancer.stack"></help-field></div>
+      <div class="col-md-3">
+        <input
+          required
+          type="text"
+          class="form-control input-sm"
+          ng-model="loadBalancer.stack"
+          name="stackName"
+          ng-change="ctrl.updateName()"
+          ng-pattern="/^[a-zA-Z0-9]*$/"
+        />
+      </div>
+      <div class="col-md-6 form-inline">
+        <label class="sm-label-right"> Detail <help-field key="azure.loadBalancer.detail"></help-field> </label>
+        <input
+          required
+          type="text"
+          class="form-control input-sm"
+          ng-model="loadBalancer.detail"
+          name="detailName"
+          ng-change="ctrl.updateName()"
+          ng-pattern="/^[a-zA-Z0-9-]*$/"
+        />
+      </div>
+      <div class="col-md-7 col-md-offset-3" ng-if="form.stackName.$error.pattern">
+        <validation-error message="Stack can only contain letters and numbers."></validation-error>
+      </div>
+      <div class="col-md-7 col-md-offset-3" ng-if="form.detailName.$error.pattern">
+        <validation-error message="Detail can only contain letters, numbers, and dashes."></validation-error>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-9 col-md-offset-3" ng-if="form.loadBalancerName.$error.maxlength">
+        <validation-error message="Load Balancer name can only be 32 characters."></validation-error>
+      </div>
+    </div>
+  </div>
+</div>

package/src/loadBalancer/configure/editLoadBalancer.html

@@ -0,0 +1,26 @@
+<form name="form" novalidate validate-on-submit>
+  <v2-modal-wizard
+    heading="Edit {{loadBalancerType}} {{loadBalancer.name}}"
+    task-monitor="taskMonitor"
+    dismiss="$dismiss()"
+  >
+    <v2-wizard-page key="Listeners" label="Listeners" done="true">
+      <ng-include src="pages.listeners"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="Health Check" label="Health Check" done="true" hide-subheading="true">
+      <ng-include src="pages.healthCheck"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="Advanced Settings" label="Advanced Settings" done="true">
+      <ng-include src="pages.advancedSettings"></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="taskMonitor.submitting"
+      submitting="taskMonitor.submitting"
+      on-click="form.$valid && ctrl.submit()"
+      is-new="isNew"
+    ></submit-button>
+  </div>
+</form>

package/src/loadBalancer/configure/healthCheck.html

@@ -0,0 +1,74 @@
+<div class="container-fluid form-horizontal">
+  <div class="form-group">
+    <div class="col-md-12">
+      <table class="table table-condensed packed" ng-if="!isALB">
+        <thead>
+          <tr>
+            <th width="35%">Protocol</th>
+            <th width="30%">Host</th>
+            <th><span ng-if="ctrl.requiresHealthCheckPath()">Path</span></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <select
+                class="form-control input-sm"
+                ng-model="loadBalancer.probes[0].probeProtocol"
+                required
+                ng-options="protocol for protocol in ['HTTP']"
+              ></select>
+            </td>
+            <td>
+              <input class="form-control input-sm" type="text" ng-model="loadBalancer.probes[0].probePort" />
+            </td>
+            <td>
+              <input
+                ng-if="ctrl.requiresHealthCheckPath()"
+                class="form-control input-sm"
+                type="text"
+                ng-model="loadBalancer.probes[0].probePath"
+                required
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <table class="table table-condensed packed" ng-if="isALB">
+        <thead>
+          <tr>
+            <th width="35%">Protocol</th>
+            <th width="30%">Port</th>
+            <th><span ng-if="ctrl.requiresHealthCheckPath()">Path</span></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <select
+                class="form-control input-sm"
+                ng-model="loadBalancer.probes[0].probeProtocol"
+                ng-init="loadBalancer.probes[0].probeProtocol = 'TCP'"
+                required
+                ng-options="protocol for protocol in ['TCP', 'HTTP']"
+              ></select>
+            </td>
+            <td>
+              <input class="form-control input-sm" type="text" ng-model="loadBalancer.probes[0].probePort" />
+            </td>
+            <td>
+              <input
+                ng-if="ctrl.requiresHealthCheckPath()"
+                class="form-control input-sm"
+                type="text"
+                ng-model="loadBalancer.probes[0].probePath"
+                required
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>