[IM] Make allowed MAC address editing more intuitive (inex#824)

* [BF] IP Addresses not shown

Fix typo so IP addresses display. Better description: "IP Addresses" as opposed to MAC Addresses (sometimes there are no IP addresses, so this will be blank)

* [IM] Make MAC address editing more intuitive.

- Move the "+" button to the MAC address table heading.
- customer page: Don't hide the "+" button if maximum MACs reached, grey out.
- customer page: Add message explaining what to do when maximum MACs reached.
- reduce table clutter on customer mac edit page.

resources/views/layer2-address/vlan-interface-cust.foil.php

@@ -8,13 +8,6 @@
 <?php $this->append() ?>
 
 <?php $this->section( 'page-header-postamble' ) ?>
-    <?php if( $t->vli->layer2Addresses()->count() < config( 'ixp_fe.layer2-addresses.customer_params.max_addresses' ) ): ?>
-        <div class="btn-group btn-group-sm" id="add-btn" role="group">
-            <a class="btn btn-white" id="add-l2a">
-                <span class="fa fa-plus"></span>
-            </a>
-        </div>
-    <?php endif; ?>
 <?php $this->append() ?>
 
 <?php $this->section( 'content' ) ?>
@@ -26,22 +19,47 @@
                 <?= $t->insert( 'layer2-address/customer-edit-msg.foil.php' ) ?>
             <?php endif; ?>
 
+            <?php if( $t->vli->layer2Addresses()->count() >= config( 'ixp_fe.layer2-addresses.customer_params.max_addresses' ) ): ?>
+               <div class="alert alert-warning" role="alert">
+                <div class="d-flex align-items-center">
+                 <div class="text-center">
+                 <i class="fa fa-exclamation-circle fa-2x "></i>
+                 </div>
+                <div class="col-sm-12">
+                 You have reached the maximum number of allowed MAC addresses for this port.
+                 Delete a MAC address to enable adding new MAC addresses.
+                </div>
+               </div>
+             </div>
+            <?php endif; ?>
+
             <div id="list-area" class="collapse">
-                <table id='layer-2-interface-list' class="table table-striped" width="100%">
+                <table id='layer-2-interface-list' class="table table-striped w-100" data-searching="false" data-paging="false" data-ordering="false" data-info="false">
                     <thead class="thead-dark">
                         <tr>
-                            <th>
+                            <th style="vertical-align: middle;">
                                 MAC Address
                             </th>
-                            <th>
+                            <th style="vertical-align: middle;">
                                 Created At
                             </th>
-                            <th>
+                            <th style="vertical-align: middle;">
                                 Action
+                                <?php if( $t->vli->layer2Addresses()->count() < config( 'ixp_fe.layer2-addresses.customer_params.max_addresses' ) ): ?>
+                                    &nbsp;<div class="btn-group btn-group-sm" id="add-btn" role="group">
+                                     <a class="btn btn-white" id="add-l2a" title="Add a new MAC address">
+                                    <span class="fa fa-plus"></span>
+                                   </a>
+                                  </div>
+                                <?php else: ?>
+                                    &nbsp;<div class="btn-group btn-group-sm" id="add-btn" role="group">
+                                    <span class="btn btn-white disabled fa fa-plus" title="Maximum allowed MACs. Delete a MAC address first."></span>
+                                  </div>
+                                <?php endif; ?>
                             </th>
                         </tr>
-                    <thead>
-                    <tbody >
+                    </thead>
+                    <tbody>
                         <?php foreach( $t->vli->layer2Addresses as $l2a ):?>
                             <tr>
                                 <td>
@@ -56,15 +74,15 @@
                                             <i class="fa fa-eye"></i>
                                         </a>
                                         <?php if( $t->vli->layer2Addresses()->count() > config( 'ixp_fe.layer2-addresses.customer_params.min_addresses' ) ): ?>
-                                            <a class="btn btn-white btn-delete" id='d2f-list-delete-<?= $l2a->id ?>' data-object-id="<?= $l2a->id ?>" href="<?= route( 'l2-address@delete' , [ 'l2a' => $l2a->id, 'showFeMessage' => true  ]  )  ?>"  title="Delete">
+                                           <a class="btn btn-white btn-delete" id='d2f-list-delete-<?= $l2a->id ?>' data-object-id="<?= $l2a->id ?>" href="<?= route( 'l2-address@delete' , [ 'l2a' => $l2a->id, 'showFeMessage' => true  ]  )  ?>"  title="Delete">
                                                 <i class="fa fa-trash"></i>
                                             </a>
                                         <?php endif; ?>
                                     </div>
                                 </td>
                             </tr>
                         <?php endforeach;?>
-                    <tbody>
+                   </tbody>
                 </table>
             </div>
             <?= $t->insert( 'layer2-address/modal-mac' ); ?>

resources/views/layer2-address/vlan-interface.foil.php

@@ -12,9 +12,6 @@
         <a href="<?= route( 'virtual-interface@edit' , [ "vi" => $t->vli->virtualInterface->id ] ) ?>" class="btn btn-sm btn-white">
             Virtual Interface Details
         </a>
-        <a class="btn btn-sm btn-white" href="#" id="add-l2a">
-            <i class="fa fa-plus"></i>
-        </a>
     </div>
 <?php $this->append() ?>
 
@@ -64,11 +61,11 @@
                                 Updated
                             </th>
                             <th>
-                                Action
+                                Action <a class="btn btn-sm btn-white" href="#" id="add-l2a"><i class="fa fa-plus"></i></a>
                             </th>
-                        </tr>
-                    <thead>
-                    <tbody >
+                            </tr>
+                    </thead>
+                    <tbody>
                         <?php foreach( $t->vli->layer2Addresses as $l2a ):?>
                             <tr>
                                 <td>
@@ -92,7 +89,7 @@
                                 </td>
                             </tr>
                         <?php endforeach;?>
-                    <tbody>
+                    </tbody>
                 </table>
             </div>
             <?= $t->insert( 'layer2-address/modal-mac' ); ?>