@spinnaker/azure 0.0.0-main-2

package/src/loadBalancer/configure/listeners.html

@@ -0,0 +1,50 @@
+<div class="container-fluid form-horizontal">
+  <div class="form-group">
+    <div class="col-md-12">
+      <table class="table table-condensed packed">
+        <thead>
+          <tr>
+            <th>Protocol</th>
+            <th>External Port</th>
+            <th></th>
+            <th>Internal Port</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="rule in loadBalancer.loadBalancingRules">
+            <td>
+              <select
+                class="form-control input-sm"
+                ng-model="rule.protocol"
+                ng-init="rule.protocol = (isALB ? 'TCP' : 'HTTP')"
+                ng-options="protocol for protocol in (isALB ? ['TCP', 'UDP'] : ['HTTP'])"
+              ></select>
+            </td>
+            <td>
+              <input class="form-control input-sm" type="number" min="0" ng-model="rule.externalPort" required />
+            </td>
+            <td class="small" style="padding-top: 10px">&rarr;</td>
+            <td>
+              <input class="form-control input-sm" type="number" min="0" ng-model="rule.backendPort" required />
+            </td>
+            <td>
+              <a href class="sm-label" ng-click="ctrl.removeListener($index)"
+                ><span class="glyphicon glyphicon-trash"></span
+              ></a>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="5">
+              <button class="add-new col-md-12" ng-click="ctrl.addListener()">
+                <span class="glyphicon glyphicon-plus-sign"></span> Add new port mapping
+              </button>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+</div>

package/src/loadBalancer/details/loadBalancerDetail.controller.js

@@ -0,0 +1,181 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import * as angular from 'angular';
+import ANGULAR_UI_BOOTSTRAP from 'angular-ui-bootstrap';
+import _ from 'lodash';
+
+import {
+  ConfirmationModalService,
+  FirewallLabels,
+  LOAD_BALANCER_READ_SERVICE,
+  LoadBalancerWriter,
+  SECURITY_GROUP_READER,
+} from '@spinnaker/core';
+
+export const AZURE_LOADBALANCER_DETAILS_LOADBALANCERDETAIL_CONTROLLER =
+  'spinnaker.azure.loadBalancer.details.controller';
+export const name = AZURE_LOADBALANCER_DETAILS_LOADBALANCERDETAIL_CONTROLLER; // for backwards compatibility
+angular
+  .module(AZURE_LOADBALANCER_DETAILS_LOADBALANCERDETAIL_CONTROLLER, [
+    ANGULAR_UI_BOOTSTRAP,
+    UIROUTER_ANGULARJS,
+    SECURITY_GROUP_READER,
+    LOAD_BALANCER_READ_SERVICE,
+  ])
+  .controller('azureLoadBalancerDetailsCtrl', [
+    '$scope',
+    '$state',
+    '$exceptionHandler',
+    '$uibModal',
+    'loadBalancer',
+    'app',
+    'securityGroupReader',
+    'loadBalancerReader',
+    '$q',
+    function (
+      $scope,
+      $state,
+      $exceptionHandler,
+      $uibModal,
+      loadBalancer,
+      app,
+      securityGroupReader,
+      loadBalancerReader,
+      $q,
+    ) {
+      $scope.state = {
+        loading: true,
+      };
+
+      $scope.firewallsLabel = FirewallLabels.get('Firewalls');
+
+      function extractLoadBalancer() {
+        $scope.loadBalancer = app.loadBalancers.data.filter(function (test) {
+          return (
+            test.name === loadBalancer.name &&
+            test.region === loadBalancer.region &&
+            test.account === loadBalancer.accountId
+          );
+        })[0];
+
+        if ($scope.loadBalancer) {
+          const detailsLoader = loadBalancerReader.getLoadBalancerDetails(
+            $scope.loadBalancer.provider,
+            loadBalancer.accountId,
+            loadBalancer.region,
+            loadBalancer.name,
+          );
+
+          return detailsLoader.then(function (details) {
+            $scope.state.loading = false;
+            const securityGroups = [];
+
+            const filtered = details.filter(function (test) {
+              return test.name === loadBalancer.name;
+            });
+
+            if (filtered.length) {
+              $scope.loadBalancer.elb = filtered[0];
+
+              $scope.loadBalancer.account = loadBalancer.accountId;
+
+              if ($scope.loadBalancer.elb.securityGroups) {
+                $scope.loadBalancer.elb.securityGroups.forEach(function (securityGroupId) {
+                  const match = securityGroupReader.getApplicationSecurityGroup(
+                    app,
+                    loadBalancer.accountId,
+                    loadBalancer.region,
+                    securityGroupId,
+                  );
+                  if (match) {
+                    securityGroups.push(match);
+                  }
+                });
+                $scope.securityGroups = _.sortBy(securityGroups, 'name');
+              }
+
+              if ($scope.loadBalancer.loadBalancerType && $scope.loadBalancer.loadBalancerType.includes('_')) {
+                const type = $scope.loadBalancer.loadBalancerType;
+                $scope.loadBalancer.loadBalancerType = type
+                  .split('_')
+                  .map((s) => {
+                    const ss = s.toLowerCase();
+                    return ss.substring(0, 1).toUpperCase() + ss.substring(1);
+                  })
+                  .join(' ');
+              }
+            }
+          });
+        }
+        if (!$scope.loadBalancer) {
+          $state.go('^');
+        }
+
+        return $q.when(null);
+      }
+
+      app
+        .ready()
+        .then(extractLoadBalancer)
+        .then(() => {
+          // If the user navigates away from the view before the initial extractLoadBalancer call completes,
+          // do not bother subscribing to the refresh
+          if (!$scope.$$destroyed) {
+            app.onRefresh($scope, extractLoadBalancer);
+          }
+        });
+
+      this.editLoadBalancer = function editLoadBalancer() {
+        $uibModal.open({
+          templateUrl: require('../configure/editLoadBalancer.html'),
+          controller: 'azureCreateLoadBalancerCtrl as ctrl',
+          size: 'lg',
+          resolve: {
+            application: function () {
+              return app;
+            },
+            loadBalancer: function () {
+              return angular.copy($scope.loadBalancer);
+            },
+            isNew: function () {
+              return false;
+            },
+            loadBalancerType: function () {
+              return { type: $scope.loadBalancer.loadBalancerType };
+            },
+          },
+        });
+      };
+
+      this.deleteLoadBalancer = function deleteLoadBalancer() {
+        if ($scope.loadBalancer.instances && $scope.loadBalancer.instances.length) {
+          return;
+        }
+
+        const taskMonitor = {
+          application: app,
+          title: 'Deleting ' + loadBalancer.name,
+        };
+
+        const command = {
+          cloudProvider: 'azure',
+          loadBalancerName: $scope.loadBalancer.name,
+          loadBalancerType: $scope.loadBalancer.loadBalancerType,
+          credentials: $scope.loadBalancer.account,
+          region: loadBalancer.region,
+          appName: app.name,
+        };
+
+        const submitMethod = () => LoadBalancerWriter.deleteLoadBalancer(command, app);
+
+        ConfirmationModalService.confirm({
+          header: 'Really delete ' + loadBalancer.name + '?',
+          buttonText: 'Delete ' + loadBalancer.name,
+          account: loadBalancer.accountId,
+          taskMonitorConfig: taskMonitor,
+          submitMethod: submitMethod,
+        });
+      };
+    },
+  ]);

package/src/loadBalancer/details/loadBalancerDetail.controller.spec.js

@@ -0,0 +1,39 @@
+import { ApplicationModelBuilder } from '@spinnaker/core';
+
+describe('Controller: azureLoadBalancerDetailsCtrl', function () {
+  var controller;
+  var $scope;
+  var $state;
+  var loadBalancer = {
+    name: 'foo',
+    region: 'us-west-1',
+    account: 'test',
+    accountId: 'test',
+    vpcId: '1',
+  };
+
+  beforeEach(window.module(require('./loadBalancerDetail.controller').name));
+
+  beforeEach(
+    window.inject(function ($controller, $rootScope, _$state_) {
+      $scope = $rootScope.$new();
+      $state = _$state_;
+      let app = ApplicationModelBuilder.createApplicationForTests('app', {
+        key: 'loadBalancers',
+        lazy: true,
+        defaultData: [],
+      });
+      app.loadBalancers.data.push(loadBalancer);
+      controller = $controller('azureLoadBalancerDetailsCtrl', {
+        $scope: $scope,
+        loadBalancer: loadBalancer,
+        app: app,
+        $state: $state,
+      });
+    }),
+  );
+
+  it('should have an instantiated controller', function () {
+    expect(controller).toBeDefined();
+  });
+});

package/src/loadBalancer/details/loadBalancerDetail.html

@@ -0,0 +1,128 @@
+<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">
+      <i class="fa icon-sitemap"></i>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>{{loadBalancer.name}}</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.serverGroups.length">
+              <a href ng-click="ctrl.deleteLoadBalancer()">Delete Load Balancer</a>
+            </li>
+            <li
+              ng-if="loadBalancer.serverGroups.length"
+              class="disabled"
+              tooltip="You must detach all server groups before you can delete this load balancer."
+            >
+              <a href>Delete Load Balancer</a>
+            </li>
+          </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>Type</dt>
+        <dd>{{loadBalancer.loadBalancerType}}</dd>
+        <dt>Created</dt>
+        <dd>{{loadBalancer.elb.createdTime | timestamp}}</dd>
+        <dt>In</dt>
+        <dd>
+          <account-tag account="loadBalancer.account" pad="right" provider="loadBalancer.type"></account-tag>
+          {{loadBalancer.region}}
+        </dd>
+        <dt ng-if="loadBalancer.loadBalancerType === 'Azure Application Gateway'">VNet</dt>
+        <dd ng-if="loadBalancer.loadBalancerType === 'Azure Application Gateway'">{{loadBalancer.elb.vnet}}</dd>
+        <dt ng-if="loadBalancer.loadBalancerType === 'Azure Application Gateway'">Subnet</dt>
+        <dd ng-if="loadBalancer.loadBalancerType === 'Azure Application Gateway'">{{loadBalancer.elb.subnet}}</dd>
+      </dl>
+      <dl class="horizontal-when-filters-collapsed">
+        <dt ng-if="loadBalancer.serverGroups">Server Groups</dt>
+        <dd ng-if="loadBalancer.serverGroups">
+          <ul class="collapse-margin-on-filter-collapse">
+            <li ng-repeat="serverGroup in loadBalancer.serverGroups | orderBy: ['isDisabled', '-name']">
+              <a
+                ui-sref="^.serverGroup({region: serverGroup.region,
+                                          accountId: serverGroup.account,
+                                          serverGroup: serverGroup.name,
+                                          provider: 'azure'})"
+              >
+                {{serverGroup.name}}
+              </a>
+            </li>
+          </ul>
+        </dd>
+      </dl>
+      <dl class="horizontal-when-filters-collapsed">
+        <dt ng-if="loadBalancer.elb.dnsName">DNS Name:</dt>
+        <dd>
+          <a target="_blank" href="//{{loadBalancer.elb.dnsName}}">{{loadBalancer.elb.dnsName}}</a>
+          <copy-to-clipboard
+            class="copy-to-clipboard copy-to-clipboard-sm"
+            text="loadBalancer.elb.dnsName"
+            tool-tip="'Copy DNS Name to clipboard'"
+          >
+          </copy-to-clipboard>
+        </dd>
+      </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</dt>
+        <dd ng-repeat="loadBalancingRule in loadBalancer.elb.loadBalancingRules">
+          {{loadBalancingRule.protocol}}:{{loadBalancingRule.externalPort}} &rarr; {{loadBalancingRule.backendPort}}
+        </dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="{{firewallsLabel}}">
+      <ul>
+        <li ng-repeat="securityGroup in securityGroups | orderBy:'name'">
+          <a
+            ui-sref="^.firewallDetails({name:securityGroup.name, accountId: loadBalancer.account, region: loadBalancer.region, vpcId: loadBalancer.vpcId, provider: loadBalancer.provider})"
+          >
+            {{securityGroup.name}} ({{securityGroup.id}})
+          </a>
+        </li>
+      </ul>
+    </collapsible-section>
+    <collapsible-section heading="Health Checks">
+      <dl class="horizontal-when-filters-collapsed">
+        <dt>Target</dt>
+        <dd>{{loadBalancer.elb.probes[0].probeProtocol}}</dd>
+        <dt>Interval</dt>
+        <dd>{{loadBalancer.elb.probes[0].probeInterval}} seconds</dd>
+        <dt>Unhealthy Threshold</dt>
+        <dd>{{loadBalancer.elb.probes[0].unhealthyThreshold}}</dd>
+        <dt>Timeout</dt>
+        <dd>{{loadBalancer.elb.probes[0].timeout}} seconds</dd>
+      </dl>
+    </collapsible-section>
+  </div>
+</div>

package/src/loadBalancer/loadBalancer.transformer.js

@@ -0,0 +1,109 @@
+'use strict';
+
+import { module } from 'angular';
+import _ from 'lodash';
+
+import { AzureProviderSettings } from '../azure.settings';
+
+export const AZURE_LOADBALANCER_LOADBALANCER_TRANSFORMER = 'spinnaker.azure.loadBalancer.transformer';
+export const name = AZURE_LOADBALANCER_LOADBALANCER_TRANSFORMER; // for backwards compatibility
+module(AZURE_LOADBALANCER_LOADBALANCER_TRANSFORMER, []).factory('azureLoadBalancerTransformer', [
+  '$q',
+  function ($q) {
+    function normalizeLoadBalancer(loadBalancer) {
+      loadBalancer.serverGroups.forEach(function (serverGroup) {
+        serverGroup.account = loadBalancer.account;
+        serverGroup.region = loadBalancer.region;
+
+        if (serverGroup.detachedInstances) {
+          serverGroup.detachedInstances = serverGroup.detachedInstances.map(function (instanceId) {
+            return { id: instanceId };
+          });
+          serverGroup.instances = serverGroup.instances.concat(serverGroup.detachedInstances);
+        } else {
+          serverGroup.detachedInstances = [];
+        }
+      });
+      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();
+      return $q.resolve(loadBalancer);
+    }
+
+    function convertLoadBalancerForEditing(loadBalancer) {
+      const toEdit = {
+        region: loadBalancer.region,
+        credentials: loadBalancer.account,
+        name: loadBalancer.name,
+        stack: loadBalancer.stack,
+        detail: loadBalancer.detail,
+        vnet: loadBalancer.vnet,
+        subnet: loadBalancer.subnet,
+        probes: [],
+        loadBalancingRules: [],
+      };
+
+      if (loadBalancer.elb) {
+        const elb = loadBalancer.elb;
+
+        toEdit.securityGroups = elb.securityGroups;
+        toEdit.vnet = elb.vnet;
+
+        if (elb.loadBalancingRules) {
+          toEdit.loadBalancingRules = elb.loadBalancingRules;
+        }
+
+        toEdit.probes = elb.probes;
+        if (elb.dnsName && elb.dnsName !== 'dns-not-found') {
+          toEdit.dnsName = elb.dnsName.split('.')[0];
+        }
+      }
+      return toEdit;
+    }
+
+    function constructNewLoadBalancerTemplate(application) {
+      const defaultCredentials = application.defaultCredentials.azure || AzureProviderSettings.defaults.account;
+      const defaultRegion = application.defaultRegions.azure || AzureProviderSettings.defaults.region;
+      return {
+        stack: '',
+        detail: 'frontend',
+        credentials: defaultCredentials,
+        region: defaultRegion,
+        cloudProvider: 'azure',
+        vnet: null,
+        subnet: null,
+        probes: [
+          {
+            probeName: '',
+            probeProtocol: 'HTTP',
+            probePort: '80',
+            probePath: '/',
+            probeInterval: 30,
+            unhealthyThreshold: 8,
+            timeout: 120,
+          },
+        ],
+        securityGroups: [],
+        loadBalancingRules: [
+          {
+            ruleName: '',
+            protocol: 'HTTP',
+            externalPort: 80,
+            backendPort: 80,
+            probeName: '',
+            persistence: 'None',
+            idleTimeout: 4,
+          },
+        ],
+        sku: 'Standard_v2',
+      };
+    }
+
+    return {
+      normalizeLoadBalancer: normalizeLoadBalancer,
+      convertLoadBalancerForEditing: convertLoadBalancerForEditing,
+      constructNewLoadBalancerTemplate: constructNewLoadBalancerTemplate,
+    };
+  },
+]);