<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th translate>IP protocol</th>
        <th translate>Port range</th>
        <th translate>Remote CIDR</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="rule in $ctrl.resource.rules">
        <td>{{ rule.protocol | securityGroupProtocol }}</td>
        <td>{{ rule | securityGroupRulePortRange }}</td>
        <td>{{ rule | securityGroupCIDR }}</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th translate>IP protocol</th>
        <th translate>Port range</th>
        <th translate>Remote CIDR</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="rule in $ctrl.resource.rules">
        <td>{{ rule | securityGroupProtocol }}</td>
        <td>{{ rule | securityGroupRulePortRange }}</td>
        <td>{{ rule | securityGroupCIDR }}</td>
      </tr>
    </tbody>
  </table>
</div>

Fix security group protocol rendering.
Fix security group protocol rendering.
