@spotinst/spinnaker-deck/app/scripts/modules/azure/src/securityGroup/details/securityGroupDetail.html

Spinnaker-Deck service, forked with support to Spotinst

<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>