@spinnaker/azure 0.0.0-main-2

package/src/securityGroup/configure/configSecurityGroup.mixin.controller.js

@@ -0,0 +1,262 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import { module } from 'angular';
+import _ from 'lodash';
+
+import {
+  AccountService,
+  FirewallLabels,
+  SECURITY_GROUP_READER,
+  SecurityGroupWriter,
+  TaskMonitor,
+} from '@spinnaker/core';
+
+export const AZURE_SECURITYGROUP_CONFIGURE_CONFIGSECURITYGROUP_MIXIN_CONTROLLER =
+  'spinnaker.azure.securityGroup.baseConfig.controller';
+export const name = AZURE_SECURITYGROUP_CONFIGURE_CONFIGSECURITYGROUP_MIXIN_CONTROLLER; // for backwards compatibility
+module(AZURE_SECURITYGROUP_CONFIGURE_CONFIGSECURITYGROUP_MIXIN_CONTROLLER, [
+  UIROUTER_ANGULARJS,
+  SECURITY_GROUP_READER,
+]).controller('azureConfigSecurityGroupMixin', [
+  '$scope',
+  '$state',
+  '$uibModalInstance',
+  'application',
+  'securityGroup',
+  'securityGroupReader',
+  'modalWizardService',
+  'cacheInitializer',
+  function (
+    $scope,
+    $state,
+    $uibModalInstance,
+    application,
+    securityGroup,
+    securityGroupReader,
+    modalWizardService,
+    cacheInitializer,
+  ) {
+    let allSecurityGroups;
+    const ctrl = this;
+
+    $scope.isNew = true;
+
+    $scope.state = {
+      submitting: false,
+      refreshingSecurityGroups: false,
+      removedRules: [],
+      infiniteScroll: {
+        numToAdd: 20,
+        currentItems: 20,
+      },
+    };
+
+    ctrl.addMoreItems = function () {
+      $scope.state.infiniteScroll.currentItems += $scope.state.infiniteScroll.numToAdd;
+    };
+
+    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.securityGroup.name,
+        accountId: $scope.securityGroup.credentials || $scope.securityGroup.accountName,
+        region: $scope.securityGroup.regions[0],
+        vpcId: $scope.securityGroup.vpcId,
+        provider: 'azure',
+      };
+      if (!$state.includes('**.firewallDetails')) {
+        $state.go('.firewallDetails', newStateParams);
+      } else {
+        $state.go('^.firewallDetails', newStateParams);
+      }
+    }
+
+    function onTaskComplete() {
+      application.securityGroups.refresh();
+      application.securityGroups.onNextRefresh($scope, onApplicationRefresh);
+    }
+
+    $scope.taskMonitor = new TaskMonitor({
+      application: application,
+      title: `Creating your ${FirewallLabels.get('firewall')}`,
+      modalInstance: $uibModalInstance,
+      onTaskComplete: onTaskComplete,
+    });
+
+    $scope.securityGroup = securityGroup;
+
+    ctrl.upsert = function () {
+      $scope.taskMonitor.submit(function () {
+        return SecurityGroupWriter.upsertSecurityGroup($scope.securityGroup, application, 'Create');
+      });
+    };
+
+    function clearSecurityGroups() {
+      $scope.availableSecurityGroups = [];
+      $scope.existingSecurityGroupNames = [];
+    }
+
+    ctrl.accountUpdated = function () {
+      const account = $scope.securityGroup.credentials || $scope.securityGroup.accountName;
+      AccountService.getRegionsForAccount(account).then(function (regions) {
+        $scope.regions = _.map(regions, 'name');
+        clearSecurityGroups();
+        ctrl.regionUpdated();
+        ctrl.updateName();
+      });
+    };
+
+    //ctrl.ifVcsFoundInAllRegions = function() {
+    //  var foundInAllRegions = true;
+    //  _.forEach($scope.securityGroup.regions, function(region) {
+    //    if (!_.some(vpcsToTest, { region: region, account: $scope.securityGroup.credentials })) {
+    //      foundInAllRegions = false;
+    //    }
+    //  });
+    //  return foundInAllRegions;
+    //};
+
+    ctrl.regionUpdated = function () {};
+
+    this.vpcUpdated = function () {
+      const account = $scope.securityGroup.credentials || $scope.securityGroup.accountName;
+      const regions = $scope.securityGroup.regions;
+      if (account && regions && regions.length) {
+        configureFilteredSecurityGroups();
+      } else {
+        clearSecurityGroups();
+      }
+    };
+
+    function configureFilteredSecurityGroups() {
+      const vpcId = $scope.securityGroup.vpcId || null;
+      const account = $scope.securityGroup.credentials || $scope.securityGroup.accountName;
+      const regions = $scope.securityGroup.regions || [];
+      let existingSecurityGroupNames = [];
+      let availableSecurityGroups = [];
+
+      regions.forEach(function (region) {
+        let regionalVpcId = null;
+        if (vpcId) {
+          const baseVpc = _.find($scope.allVpcs, { id: vpcId });
+          regionalVpcId = _.find($scope.allVpcs, { account: account, region: region, name: baseVpc.name }).id;
+        }
+
+        const regionalSecurityGroups = _.filter(allSecurityGroups[account].azure[region], { vpcId: regionalVpcId });
+        const regionalGroupNames = _.map(regionalSecurityGroups, 'name');
+
+        existingSecurityGroupNames = _.uniq(existingSecurityGroupNames.concat(regionalGroupNames));
+
+        if (!availableSecurityGroups.length) {
+          availableSecurityGroups = existingSecurityGroupNames;
+        } else {
+          availableSecurityGroups = _.intersection(availableSecurityGroups, regionalGroupNames);
+        }
+      });
+
+      $scope.availableSecurityGroups = availableSecurityGroups;
+      $scope.existingSecurityGroupNames = existingSecurityGroupNames;
+      clearInvalidSecurityGroups();
+    }
+
+    ctrl.mixinUpsert = function (descriptor) {
+      $scope.taskMonitor.submit(function () {
+        return SecurityGroupWriter.upsertSecurityGroup($scope.securityGroup, application, descriptor);
+      });
+    };
+
+    function clearInvalidSecurityGroups() {
+      const removed = $scope.state.removedRules;
+      $scope.securityGroup.securityGroupIngress = $scope.securityGroup.securityGroupIngress.filter(function (rule) {
+        if (rule.name && !$scope.availableSecurityGroups.includes(rule.name) && !removed.includes(rule.name)) {
+          removed.push(rule.name);
+          return false;
+        }
+        return true;
+      });
+      if (removed.length) {
+        modalWizardService.getWizard().markDirty('Ingress');
+      }
+    }
+
+    ctrl.refreshSecurityGroups = function () {
+      $scope.state.refreshingSecurityGroups = true;
+      return cacheInitializer.refreshCache('securityGroups').then(function () {
+        return ctrl.initializeSecurityGroups().then(function () {
+          ctrl.vpcUpdated();
+          $scope.state.refreshingSecurityGroups = false;
+        });
+      });
+    };
+
+    allSecurityGroups = {};
+
+    ctrl.initializeSecurityGroups = function () {
+      return securityGroupReader.getAllSecurityGroups().then(function (securityGroups) {
+        allSecurityGroups = securityGroups;
+        const account = $scope.securityGroup.credentials || $scope.securityGroup.accountName;
+        const region = $scope.securityGroup.regions[0];
+        const vpcId = $scope.securityGroup.vpcId || null;
+
+        let availableGroups;
+        if (account && region) {
+          availableGroups = _.filter(securityGroups[account].azure[region], { vpcId: vpcId });
+        } else {
+          availableGroups = securityGroups;
+        }
+
+        $scope.availableSecurityGroups = _.map(availableGroups, 'name');
+      });
+    };
+
+    ctrl.cancel = function () {
+      $uibModalInstance.dismiss();
+    };
+
+    const classicPattern = /^[\x20-\x7F]+$/;
+    const vpcPattern = /^[a-zA-Z0-9\s._\-:/()#,@[\]+=&;{}!$*]+$/;
+
+    ctrl.getCurrentNamePattern = function () {
+      return $scope.securityGroup.vpcId ? vpcPattern : classicPattern;
+    };
+
+    ctrl.updateName = function () {
+      const securityGroup = $scope.securityGroup;
+      let name = application.name;
+      if (securityGroup.detail) {
+        name += '-' + securityGroup.detail;
+      }
+      securityGroup.name = name;
+      $scope.namePreview = name;
+    };
+
+    ctrl.namePattern = {
+      test: function (name) {
+        return ctrl.getCurrentNamePattern().test(name);
+      },
+    };
+
+    ctrl.addRule = function (ruleset) {
+      ruleset.push({
+        type: 'tcp',
+        startPort: 7001,
+        endPort: 7001,
+      });
+    };
+
+    ctrl.removeRule = function (ruleset, index) {
+      ruleset.splice(index, 1);
+    };
+
+    ctrl.dismissRemovedRules = function () {
+      $scope.state.removedRules = [];
+      modalWizardService.getWizard().markClean('Ingress');
+      modalWizardService.getWizard().markComplete('Ingress');
+    };
+  },
+]);

package/src/securityGroup/configure/createSecurityGroup.html

@@ -0,0 +1,20 @@
+<form name="form" class="form-horizontal" novalidate validate-on-submit>
+  <v2-modal-wizard heading="Create New {{firewallLabel}}" 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="Ingress" label="Ingress" done="true">
+      <ng-include src="pages.ingress"></ng-include>
+    </v2-wizard-page>
+  </v2-modal-wizard>
+  <div class="modal-footer">
+    <button class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+    <submit-button
+      is-disabled="state.submitting"
+      submitting="state.submitting"
+      on-click="form.$valid && ctrl.upsert()"
+      is-new="isNew"
+    >
+    </submit-button>
+  </div>
+</form>

package/src/securityGroup/configure/createSecurityGroupIngress.html

@@ -0,0 +1,75 @@
+<div class="modal-body">
+  <div class="row"></div>
+  <div class="form-group">
+    <div class="form-group">
+      <div class="col-md-12">
+        <table class="table table-condensed packed">
+          <thead>
+            <tr>
+              <th style="width: 21%">Protocol</th>
+              <th style="width: 32%">
+                Source IP/CIDR ranges<help-field key="azure.securityGroup.ingress.sourceIPCIDRRanges"></help-field>
+              </th>
+              <th style="width: 32%">
+                Destination port ranges<help-field key="azure.securityGroup.ingress.destPortRanges"></help-field>
+              </th>
+              <th style width="15%">Actions<help-field key="azure.securityGroup.ingress.actions"></help-field></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="rule in securityGroup.securityRules">
+              <td>
+                <select class="form-control input-sm" ng-model="rule.protocolUI">
+                  <option value="tcp">TCP</option>
+                  <option value="udp">UDP</option>
+                  <option value="*">ANY</option>
+                </select>
+              </td>
+              <td>
+                <input
+                  class="form-control input-sm"
+                  type="text"
+                  value="*"
+                  pattern="^\*$|^((25[0-5]|2[0-4]\d|[01]?\d\d?)[.]){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]|[1-2]\d|3[0-2]))?(,((25[0-5]|2[0-4]\d|[01]?\d\d?)[.]){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]|[1-2]\d|3[0-2]))?)*$"
+                  ng-model="rule.sourceIPCIDRRanges"
+                  ng-change="ctrl.sourceIPCIDRUpdated(securityGroup.securityRules, $index)"
+                  required
+                />
+              </td>
+              <td>
+                <input
+                  class="form-control input-sm"
+                  type="text"
+                  value="80"
+                  pattern="^\*$|^((\d|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])|(\d|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])-(\d|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5]))(,((\d|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])|(\d|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])-(\d|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])))*$"
+                  ng-model="rule.destPortRanges"
+                  ng-change="ctrl.portUpdated(securityGroup.securityRules, $index)"
+                  required
+                />
+              </td>
+              <td>
+                <a class="btn-link sm-label" ng-click="ctrl.moveUp(securityGroup.securityRules, $index)"
+                  ><span class="glyphicon glyphicon-arrow-up"></span>
+                </a>
+                <a class="btn-link sm-label" ng-click="ctrl.moveDown(securityGroup.securityRules, $index)"
+                  ><span class="glyphicon glyphicon-arrow-down"></span>
+                </a>
+                <a class="btn-link sm-label" ng-click="ctrl.removeRule(securityGroup.securityRules, $index)"
+                  ><span class="glyphicon glyphicon-trash"></span>
+                </a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="form-group small" style="margin-top: 20px">
+      <div class="col-md-12">
+        <button class="add-new col-md-12" ng-click="ctrl.addRule(securityGroup.securityRules)">
+          <span class="glyphicon glyphicon-plus-sign"></span> Add new
+          <firewall-label label="Firewall"></firewall-label> Rule
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/securityGroup/configure/createSecurityGroupProperties.html

@@ -0,0 +1,88 @@
+<div class="modal-body">
+  <div class="form-group">
+    <div
+      class="col-md-12 well"
+      ng-class="{'alert-danger': form.securityGroupName.$error.validateUnique, 'alert-info': !form.securityGroupName.$error.validateUnique}"
+    >
+      <strong>Your <firewall-label label="firewall"></firewall-label> will be named:</strong>
+      <span ng-bind="namePreview"></span>
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-md-4 sm-label-right">Detail</div>
+    <div class="col-md-4">
+      <input
+        type="text"
+        class="form-control input-sm"
+        required
+        ng-model="securityGroup.detail"
+        ng-change="ctrl.updateName()"
+      />
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-md-4 sm-label-right">Description</div>
+    <div class="col-md-8">
+      <input type="text" class="form-control input-sm" ng-model="securityGroup.description" />
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-md-4 sm-label-right">Account</div>
+    <div class="col-md-8">
+      <account-select-field
+        required
+        component="securityGroup"
+        field="credentials"
+        accounts="accounts"
+        provider="'azure'"
+        on-change="ctrl.accountUpdated()"
+      ></account-select-field>
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-md-12">
+      <region-select-field
+        label-columns="4"
+        component="securityGroup"
+        field="region"
+        field-columns="8"
+        account="securityGroup.credentials"
+        provider="'azure'"
+        on-change="ctrl.regionUpdated()"
+        regions="regions"
+      ></region-select-field>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-md-4 sm-label-right">Virtual Network</div>
+    <div class="col-md-7">
+      <ui-select
+        class="form-control input-sm"
+        ng-model="securityGroup.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">
+    <div class="col-md-4 sm-label-right">Subnet</div>
+    <div class="col-md-7">
+      <ui-select
+        class="form-control input-sm"
+        ng-model="securityGroup.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>

package/src/securityGroup/configure/editSecurityGroup.html

@@ -0,0 +1,19 @@
+<form name="form" novalidate validate-on-submit>
+  <v2-modal-wizard
+    heading="Edit {{securityGroup.name}}: {{securityGroup.region}}: {{securityGroup.credentials}}"
+    task-monitor="taskMonitor"
+    dismiss="$dismiss()"
+  >
+    <v2-wizard-page key="Ingress" label="Ingress" done="true">
+      <ng-include src="pages.ingress"></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.upsert()"
+    ></submit-button>
+  </div>
+</form>

package/src/securityGroup/details/securityGroupDetail.controller.js

@@ -0,0 +1,142 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import * as angular from 'angular';
+import _ from 'lodash';
+
+import { ConfirmationModalService, FirewallLabels, SECURITY_GROUP_READER } from '@spinnaker/core';
+
+import { AZURE_SECURITYGROUP_CLONE_CLONESECURITYGROUP_CONTROLLER } from '../clone/cloneSecurityGroup.controller';
+import { AZURE_SECURITYGROUP_SECURITYGROUP_WRITE_SERVICE } from '../securityGroup.write.service';
+
+export const AZURE_SECURITYGROUP_DETAILS_SECURITYGROUPDETAIL_CONTROLLER =
+  'spinnaker.azure.securityGroup.azure.details.controller';
+export const name = AZURE_SECURITYGROUP_DETAILS_SECURITYGROUPDETAIL_CONTROLLER; // for backwards compatibility
+angular
+  .module(AZURE_SECURITYGROUP_DETAILS_SECURITYGROUPDETAIL_CONTROLLER, [
+    UIROUTER_ANGULARJS,
+    SECURITY_GROUP_READER,
+    AZURE_SECURITYGROUP_SECURITYGROUP_WRITE_SERVICE,
+    AZURE_SECURITYGROUP_CLONE_CLONESECURITYGROUP_CONTROLLER,
+  ])
+  .controller('azureSecurityGroupDetailsCtrl', [
+    '$scope',
+    '$state',
+    'resolvedSecurityGroup',
+    'app',
+    'azureSecurityGroupWriter',
+    'securityGroupReader',
+    '$uibModal',
+    function ($scope, $state, resolvedSecurityGroup, app, azureSecurityGroupWriter, securityGroupReader, $uibModal) {
+      const application = app;
+      const securityGroup = resolvedSecurityGroup;
+
+      $scope.state = {
+        loading: true,
+      };
+
+      $scope.firewallLabel = FirewallLabels.get('Firewall');
+
+      function extractSecurityGroup() {
+        return securityGroupReader
+          .getSecurityGroupDetails(
+            application,
+            securityGroup.accountId,
+            securityGroup.provider,
+            securityGroup.region,
+            securityGroup.vpcId,
+            securityGroup.name,
+          )
+          .then(
+            function (details) {
+              $scope.state.loading = false;
+
+              if (!details || _.isEmpty(details)) {
+                fourOhFour();
+              } else {
+                $scope.securityGroup = details;
+              }
+            },
+            function () {
+              fourOhFour();
+            },
+          );
+      }
+
+      function fourOhFour() {
+        $state.go('^');
+      }
+
+      extractSecurityGroup().then(() => {
+        // If the user navigates away from the view before the initial extractSecurityGroup call completes,
+        // do not bother subscribing to the refresh
+        if (!$scope.$$destroyed) {
+          app.securityGroups.onRefresh($scope, extractSecurityGroup);
+        }
+      });
+
+      this.editInboundRules = function editInboundRules() {
+        $uibModal.open({
+          templateUrl: require('../configure/editSecurityGroup.html'),
+          controller: 'azureEditSecurityGroupCtrl as ctrl',
+          resolve: {
+            securityGroup: function () {
+              return angular.copy($scope.securityGroup);
+            },
+            application: function () {
+              return application;
+            },
+          },
+        });
+      };
+
+      this.cloneSecurityGroup = function cloneSecurityGroup() {
+        $uibModal.open({
+          templateUrl: require('../clone/cloneSecurityGroup.html'),
+          controller: 'azureCloneSecurityGroupController as ctrl',
+          resolve: {
+            securityGroup: function () {
+              const securityGroup = angular.copy($scope.securityGroup);
+              if (securityGroup.region) {
+                securityGroup.regions = [securityGroup.region];
+              }
+              return securityGroup;
+            },
+            application: function () {
+              return application;
+            },
+          },
+        });
+      };
+
+      this.deleteSecurityGroup = function deleteSecurityGroup() {
+        const taskMonitor = {
+          application: application,
+          title: 'Deleting ' + securityGroup.name,
+        };
+
+        const submitMethod = function () {
+          $scope.securityGroup.type = 'deleteSecurityGroup';
+          return azureSecurityGroupWriter.deleteSecurityGroup(securityGroup, application, {
+            cloudProvider: 'azure',
+            vpcId: $scope.securityGroup.vpcId,
+          });
+        };
+
+        ConfirmationModalService.confirm({
+          header: 'Really delete ' + securityGroup.name + '?',
+          buttonText: 'Delete ' + securityGroup.name,
+          account: securityGroup.accountId,
+          taskMonitorConfig: taskMonitor,
+          submitMethod: submitMethod,
+        });
+      };
+
+      if (app.isStandalone) {
+        // we still want the edit to refresh the firewall details when the modal closes
+        app.securityGroups = {
+          refresh: extractSecurityGroup,
+        };
+      }
+    },
+  ]);

package/src/securityGroup/details/securityGroupDetail.html

@@ -0,0 +1,78 @@
+<div class="details-panel">
+  <div class="header">
+    <div class="close-button">
+      <a class="btn btn-link" ui-sref="^">
+        <span class="glyphicon glyphicon-remove"></span>
+      </a>
+    </div>
+    <div ng-if="state.loading" class="horizontal center middle">
+      <loading-spinner size="'small'"></loading-spinner>
+    </div>
+    <div class="header-text horizontal middle" ng-if="!state.loading">
+      <span class="glyphicon glyphicon-transfer"></span>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
+        {{securityGroup.name || '(not found)'}}
+      </h3>
+    </div>
+    <div class="actions">
+      <div class="dropdown" uib-dropdown dropdown-append-to-body>
+        <button type="button" class="btn btn-sm btn-primary dropdown-toggle" ng-disabled="disabled" uib-dropdown-toggle>
+          <firewall-label label="Firewall"></firewall-label> Actions <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu" uib-dropdown-menu role="menu">
+          <li>
+            <a href ng-click="ctrl.deleteSecurityGroup()">Delete <firewall-label label="Firewall"></firewall-label></a>
+          </li>
+          <li><a href ng-click="ctrl.editInboundRules()">Edit Inbound Rules</a></li>
+          <li>
+            <a href ng-click="ctrl.cloneSecurityGroup()">Clone <firewall-label label="Firewall"></firewall-label></a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="content" ng-if="!state.loading">
+    <collapsible-section heading="{{firewallLabel}} Details" expanded="true">
+      <dl class="dl-horizontal dl-medium">
+        <dt>ID</dt>
+        <dd>{{securityGroup.id}}</dd>
+        <dt>Account</dt>
+        <dd><account-tag account="securityGroup.accountName"></account-tag></dd>
+        <dt>Region</dt>
+        <dd>{{securityGroup.region}}</dd>
+        <dt>Description:</dt>
+        <dd>{{securityGroup.description}}</dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section
+      heading="Security Rules ({{securityGroup.securityRules.length || 0}})"
+      expanded="{{!!(securityGroup.securityRules && securityGroup.securityRules.length)}}"
+    >
+      <div ng-if="!securityGroup.securityRules.length">None</div>
+      <dl
+        ng-class="insightCtrl.vm.filtersExpanded ? '' : 'dl-horizontal dl-medium'"
+        ng-repeat="rule in securityGroup.securityRules | orderBy: 'rule.priority'"
+      >
+        <dt>Name</dt>
+        <dd>{{rule.name}}</dd>
+        <dt>Priority</dt>
+        <dd>{{rule.priority}}</dd>
+        <dt>Direction</dt>
+        <dd>{{rule.direction}}</dd>
+        <dt>Access</dt>
+        <dd>{{rule.access}}</dd>
+        <dt>Protocol</dt>
+        <dd>{{rule.protocol}}</dd>
+        <dt>Src Addr Prefix</dt>
+        <dd>{{rule.sourceAddressPrefixModel}}</dd>
+        <dt>Src Port Range</dt>
+        <dd>{{rule.sourcePortRange}}</dd>
+        <dt>Dest Addr Prefix</dt>
+        <dd>{{rule.destinationAddressPrefix}}</dd>
+        <dt>Dest Port Range</dt>
+        <dd>{{rule.destinationPortRangeModel}}</dd>
+        <hr />
+      </dl>
+    </collapsible-section>
+  </div>
+</div>