@spinnaker/oracle 0.0.0-main-2

package/src/loadBalancer/configure/createLoadBalancerProperties.html

@@ -0,0 +1,167 @@
+<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 load balancer will be named:</strong>
+        <span>{{loadBalancerCmd.name}}</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="loadBalancerCmd.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 {{loadBalancerCmd.credentials}}:{{loadBalancerCmd.region}} with that name."
+        ></validation-error>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Shape</div>
+      <div class="col-md-7">
+        <ui-select class="form-control input-sm" required ng-model="loadBalancerCmd.shape">
+          <ui-select-match placeholder="Select Shape">{{$select.selected}}</ui-select-match>
+          <ui-select-choices repeat="shape in ctrl.shapes | filter: $select.search">
+            <span ng-bind-html="shape | highlight: $select.search"></span>
+          </ui-select-choices>
+        </ui-select>
+        <!-- <select class="form-control input-sm" ng-model="loadBalancer.shape" required ng-options="shape for shapes in shapes"></select> -->
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Private Load Balancer</div>
+      <div class="col-md-7 checkbox">
+        <label>
+          <input
+            type="checkbox"
+            name="isPrivate"
+            ng-model="loadBalancerCmd.isPrivate"
+            on-change="ctrl.isPrivateChanged()"
+          />
+        </label>
+      </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="loadBalancerCmd"
+          field="credentials"
+          accounts="accounts"
+          provider="'oracle'"
+          on-change="ctrl.accountUpdated()"
+        ></account-select-field>
+      </div>
+    </div>
+    <region-select-field
+      required
+      label-columns="3"
+      component="loadBalancerCmd"
+      field="region"
+      account="loadBalancerCmd.credentials"
+      provider="'oracle'"
+      on-change="ctrl.regionUpdated()"
+      regions="regions"
+    ></region-select-field>
+
+    <div class="form-group">
+      <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="ctrl.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="vnet in ctrl.filteredVnets | filter: $select.search">
+            <span ng-bind-html="vnet.name | highlight: $select.search"></span>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Subnets</div>
+      <div class="col-md-7">
+        <ui-select
+          multiple
+          required
+          limit="2"
+          name="subnets"
+          class="form-control input-sm"
+          ng-model="ctrl.selectedSubnets"
+          on-select="ctrl.selectedSubnetsChanged($item)"
+          on-remove="ctrl.selectedSubnetRemoved()"
+        >
+          <ui-select-match placeholder="Select from existing subnets">{{$item.name}}</ui-select-match>
+          <ui-select-choices repeat="subnet in ctrl.filteredSubnetsByType | filter: $select.search">
+            <span ng-bind-html="subnet.name | highlight: $select.search"></span>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+    </div>
+    <div ng-if="ctrl.filteredSubnetsByType.length > 0">
+      <div class="col-md-7 col-md-offset-3" ng-if="loadBalancerCmd.isPrivate && ctrl.selectedSubnets.length != 1">
+        <validation-error message="Exactly one subnet must be selected for a private load balancer."></validation-error>
+      </div>
+      <div
+        class="col-md-7 col-md-offset-3"
+        ng-if="!loadBalancerCmd.isPrivate && ctrl.selectedSubnets.length === 1 && ctrl.selectedSubnets[0].availabilityDomain"
+      >
+        <validation-error
+          message="Exactly 2 Availability Domain-specific subnets must be selected for a public load balancer."
+        ></validation-error>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Stack <help-field key="oracle.loadBalancer.stack"></help-field></div>
+      <div class="col-md-3">
+        <input
+          type="text"
+          class="form-control input-sm"
+          ng-model="loadBalancerCmd.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="oracle.loadBalancer.detail"></help-field> </label>
+        <input
+          type="text"
+          class="form-control input-sm"
+          ng-model="loadBalancerCmd.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" class="form-horizontal" novalidate validate-on-submit>
+  <v2-modal-wizard
+    heading="Edit Load Balancer {{ctrl.loadBalancer.name}}"
+    task-monitor="taskMonitor"
+    dismiss="$dismiss()"
+  >
+    <v2-wizard-page key="Certificates" label="SSL Certificates" done="true">
+      <ng-include src="ctrl.pages.certificates"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="Backend Sets" label="Backend Sets" done="true">
+      <ng-include src="ctrl.pages.backendSets"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="Listeners" label="Listeners" done="true">
+      <ng-include src="ctrl.pages.listeners"></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/listeners.html

@@ -0,0 +1,88 @@
+<div class="container-fluid form-horizontal">
+  <div class="form-group">
+    <div class="col-md-12">
+      <table class="table table-condensed packed">
+        <thead>
+          <tr>
+            <th>SSL</th>
+            <th>SSL Certificate Name</th>
+            <th>Protocol</th>
+            <th>Listening Port</th>
+            <th>Default Backend Set Name</th>
+            <!-- TODO <th>SSL config</th>
+            <th>Hostnames</th> -->
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="listener in ctrl.listeners">
+            <td>
+              <input
+                type="checkbox"
+                name="isSsl"
+                ng-model="listener.isSsl"
+                on-change="ctrl.listenerIsSslChanged(listener)"
+              />
+            </td>
+            <td>
+              <ui-select
+                ng-if="listener.isSsl"
+                class="form-control input-sm"
+                required
+                ng-model="listener.sslConfiguration.certificateName"
+              >
+                <ui-select-match placeholder="Select certificate name"
+                  >{{$select.selected.certificateName}}</ui-select-match
+                >
+                <ui-select-choices repeat="cert.certificateName as cert in ctrl.certificates | filter: $select.search">
+                  <span ng-bind-html="cert.certificateName | highlight: $select.search"></span>
+                </ui-select-choices>
+              </ui-select>
+              <div ng-if="!listener.isSsl">N/A</div>
+            </td>
+            <td>
+              <select
+                class="form-control input-sm"
+                ng-model="listener.protocol"
+                ng-options="protocol for protocol in ['HTTP', 'TCP']"
+              ></select>
+            </td>
+            <td>
+              <input class="form-control input-sm" type="number" ng-model="listener.port" required />
+            </td>
+            <td>
+              <ui-select class="form-control input-sm" required ng-model="listener.defaultBackendSetName">
+                <ui-select-match placeholder="Select default backend set name"
+                  >{{$select.selected.name}}</ui-select-match
+                >
+                <ui-select-choices repeat="backendSet.name as backendSet in ctrl.backendSets | filter: $select.search">
+                  <span ng-bind-html="backendSet.name | highlight: $select.search"></span>
+                </ui-select-choices>
+              </ui-select>
+              <!-- <select class="form-control input-sm" required ng-model="listener.defaultBackendSetName" ng-options="backendSetName as backendSet.name for backendSet in loadBalancerCmd.backendSets"></select> -->
+            </td>
+            <td>
+              <a href class="sm-label" ng-click="ctrl.removeListener($index)"
+                ><span class="glyphicon glyphicon-trash"></span
+              ></a>
+            </td>
+          </tr>
+          <tr ng-if="!ctrl.listenersUniqueProtocolPort()">
+            <td colspan="3">
+              <validation-error message="Listeners must have unique protocol and port"></validation-error>
+            </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 Listener
+              </button>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,62 @@
+import type { StateService } from '@uirouter/angularjs';
+import type { IControllerService, IRootScopeService, IScope } from 'angular';
+import { mock } from 'angular';
+
+import type { LoadBalancerReader, SecurityGroupReader } from '@spinnaker/core';
+import { ApplicationModelBuilder, LOAD_BALANCER_READ_SERVICE, SECURITY_GROUP_READER } from '@spinnaker/core';
+
+import type { OracleLoadBalancerDetailController } from './loadBalancerDetail.controller';
+import { ORACLE_LOAD_BALANCER_DETAIL_CONTROLLER } from './loadBalancerDetail.controller';
+
+describe('Controller: oracleLoadBalancerDetailCtrl', function () {
+  let controller: OracleLoadBalancerDetailController;
+  let $scope: IScope;
+  let $state: StateService;
+  let securityGroupReader: SecurityGroupReader;
+  let loadBalancerReader: LoadBalancerReader;
+
+  const loadBalancer = {
+    name: 'foo',
+    region: 'us-west-1',
+    account: 'test',
+    accountId: 'test',
+    vpcId: '1',
+  };
+
+  beforeEach(mock.module(ORACLE_LOAD_BALANCER_DETAIL_CONTROLLER, SECURITY_GROUP_READER, LOAD_BALANCER_READ_SERVICE));
+
+  beforeEach(
+    mock.inject(
+      (
+        $controller: IControllerService,
+        $rootScope: IRootScopeService,
+        _$state_: StateService,
+        _securityGroupReader_: SecurityGroupReader,
+        _loadBalancerReader_: LoadBalancerReader,
+      ) => {
+        $scope = $rootScope.$new();
+        $state = _$state_;
+        const app = ApplicationModelBuilder.createApplicationForTests('app', {
+          key: 'loadBalancers',
+          lazy: true,
+          defaultData: [],
+        });
+        app.loadBalancers.data.push(loadBalancer);
+        securityGroupReader = _securityGroupReader_;
+        loadBalancerReader = _loadBalancerReader_;
+        controller = $controller('oracleLoadBalancerDetailCtrl', {
+          $scope: $scope,
+          loadBalancer: loadBalancer,
+          app: app,
+          $state: $state,
+          securityGroupReader: securityGroupReader,
+          loadBalancerReader: loadBalancerReader,
+        });
+      },
+    ),
+  );
+
+  it('should have an instantiated controller', function () {
+    expect(controller).toBeDefined();
+  });
+});

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

@@ -0,0 +1,163 @@
+import type { StateService } from '@uirouter/angularjs';
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import type { IController } from 'angular';
+import angular, { module } from 'angular';
+import type { IModalService } from 'angular-ui-bootstrap';
+import ANGULAR_UI_BOOTSTRAP from 'angular-ui-bootstrap';
+import { sortBy } from 'lodash';
+
+import type { Application, ISecurityGroup, LoadBalancerReader, SecurityGroupReader } from '@spinnaker/core';
+import { ConfirmationModalService, FirewallLabels, LoadBalancerWriter } from '@spinnaker/core';
+
+import { OracleLoadBalancerController } from '../configure/createLoadBalancer.controller';
+import type { ILoadBalancerDetails, IOracleLoadBalancer } from '../../domain/IOracleLoadBalancer';
+
+export class OracleLoadBalancerDetailController implements IController {
+  public static $inject = [
+    '$scope',
+    '$state',
+    '$uibModal',
+    'loadBalancer',
+    'app',
+    'securityGroupReader',
+    'loadBalancerReader',
+    '$q',
+  ];
+  constructor(
+    private $scope: ng.IScope,
+    private $state: StateService,
+    private $uibModal: IModalService,
+    private loadBalancer: ILoadBalancerDetails,
+    private app: Application,
+    private securityGroupReader: SecurityGroupReader,
+    private loadBalancerReader: LoadBalancerReader,
+    private $q: angular.IQService,
+  ) {
+    $scope.state = {
+      loading: true,
+    };
+    $scope.firewallsLabel = FirewallLabels.get('Firewalls');
+
+    const extractLoadBalancer = (): PromiseLike<any> => {
+      $scope.loadBalancer = app.loadBalancers.data.filter((test: IOracleLoadBalancer) => {
+        return (
+          test.name === loadBalancer.name &&
+          test.region === loadBalancer.region &&
+          test.account === loadBalancer.accountId
+        );
+      })[0];
+
+      if ($scope.loadBalancer) {
+        const detailsLoader = this.loadBalancerReader.getLoadBalancerDetails(
+          $scope.loadBalancer.cloudProvider,
+          loadBalancer.accountId,
+          loadBalancer.region,
+          loadBalancer.name,
+        );
+
+        return detailsLoader.then((details) => {
+          // ILoadBalancerSourceData
+          $scope.state.loading = false;
+          const securityGroups: ISecurityGroup[] = [];
+
+          const filtered = details.filter((test: IOracleLoadBalancer) => {
+            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((securityGroupId: string) => {
+                const match = this.securityGroupReader.getApplicationSecurityGroup(
+                  this.app,
+                  loadBalancer.accountId,
+                  loadBalancer.region,
+                  securityGroupId,
+                );
+                if (match) {
+                  securityGroups.push(match);
+                }
+              });
+              this.$scope.securityGroups = sortBy(securityGroups, 'name');
+            }
+          }
+        });
+      }
+      if (!this.$scope.loadBalancer) {
+        this.$state.go('^');
+      }
+
+      return this.$q.when(null);
+    };
+
+    this.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 (!this.$scope.$$destroyed) {
+          this.app.onRefresh($scope, extractLoadBalancer);
+        }
+      });
+  }
+
+  public editLoadBalancer() {
+    this.$uibModal.open({
+      templateUrl: require('../configure/editLoadBalancer.html'),
+      controller: OracleLoadBalancerController,
+      controllerAs: 'ctrl',
+      size: 'lg',
+      resolve: {
+        application: () => {
+          return this.app;
+        },
+        loadBalancer: () => {
+          return angular.copy(this.$scope.loadBalancer);
+        },
+        isNew: () => {
+          return false;
+        },
+      },
+    });
+  }
+
+  public deleteLoadBalancer() {
+    if (this.$scope.loadBalancer.instances && this.$scope.loadBalancer.instances.length) {
+      return;
+    }
+
+    const taskMonitor = {
+      application: this.app,
+      title: 'Deleting ' + this.loadBalancer.name,
+    };
+
+    const command = {
+      cloudProvider: 'oracle',
+      loadBalancerName: this.$scope.loadBalancer.name,
+      credentials: this.$scope.loadBalancer.account,
+      region: this.loadBalancer.region,
+      application: this.app.name,
+      loadBalancerId: this.$scope.loadBalancer.id,
+    };
+
+    const submitMethod = () => LoadBalancerWriter.deleteLoadBalancer(command, this.app);
+
+    ConfirmationModalService.confirm({
+      header: 'Really delete ' + this.loadBalancer.name + '?',
+      buttonText: 'Delete ' + this.loadBalancer.name,
+      account: this.loadBalancer.accountId,
+      taskMonitorConfig: taskMonitor,
+      submitMethod: submitMethod,
+    });
+  }
+}
+
+export const ORACLE_LOAD_BALANCER_DETAIL_CONTROLLER = 'spinnaker.oracle.loadBalancerDetail.controller';
+module(ORACLE_LOAD_BALANCER_DETAIL_CONTROLLER, [UIROUTER_ANGULARJS, ANGULAR_UI_BOOTSTRAP as any]).controller(
+  'oracleLoadBalancerDetailCtrl',
+  OracleLoadBalancerDetailController,
+);

package/src/loadBalancer/details/loadBalancerDetail.html

@@ -0,0 +1,100 @@
+<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 ng-click="return">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>Created</dt>
+        <dd>{{loadBalancer.timeCreated}}</dd>
+        <dt>In</dt>
+        <dd>
+          <account-tag account="loadBalancer.account" pad="right" provider="loadBalancer.type"></account-tag>
+          {{loadBalancer.region}}
+        </dd>
+        <dt>Subnets</dt>
+        <dd ng-repeat="subnet in loadBalancer.subnets">{{subnet.name}}</dd>
+        <dt>Public IP</dt>
+        <dd ng-repeat="ip in loadBalancer.ipAddresses">{{ip.ipAddress}}</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: 'oracle'})"
+              >
+                {{serverGroup.name}}
+              </a>
+            </li>
+          </ul>
+        </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="Backend Sets">
+      <dd ng-repeat="backendSet in loadBalancer.backendSets">
+        <dl>
+          <dt>{{backendSet.name}}</dt>
+          <dd>{{backendSet.policy}}</dd>
+          <dd>Health Check: {{backendSet.healthChecker.urlPath}}</dd>
+        </dl>
+      </dd>
+    </collapsible-section>
+    <collapsible-section heading="Listeners">
+      <dl>
+        <dt>Listener &rarr; Backend Set</dt>
+        <dd ng-repeat="listener in loadBalancer.listeners">
+          {{listener.protocol}}:{{listener.port}} &rarr; {{listener.defaultBackendSetName}}
+        </dd>
+      </dl>
+    </collapsible-section>
+  </div>
+</div>