dhcp/kea: Integrate layout_partials/base_bootgrid_table (#8253)

* dhcp/kea: dhcpv4.volt - Integrate layout_partials/base_bootgrid_table

* Fix whitespace

* dhcp/kea: Change location of Configuration Change Message above Apply

src/opnsense/mvc/app/controllers/OPNsense/Kea/DhcpController.php

@@ -50,9 +50,15 @@ class DhcpController extends \OPNsense\Base\IndexController
     {
         $this->view->pick('OPNsense/Kea/dhcpv4');
         $this->view->formGeneralSettings = $this->getForm("generalSettings4");
+
         $this->view->formDialogSubnet = $this->getForm("dialogSubnet4");
+        $this->view->formGridSubnet = $this->getFormGrid("dialogSubnet4", null, "keaChangeMessage");
+
         $this->view->formDialogReservation = $this->getForm("dialogReservation4");
+        $this->view->formGridReservation = $this->getFormGrid("dialogReservation4", null, "keaChangeMessage");
+
         $this->view->formDialogPeer = $this->getForm("dialogPeer4");
+        $this->view->formGridPeer = $this->getFormGrid("dialogPeer4", null, "keaChangeMessage");
     }
 
     public function leases4Action()

src/opnsense/mvc/app/controllers/OPNsense/Kea/forms/dialogSubnet4.xml

@@ -23,6 +23,11 @@
         <type>checkbox</type>
         <help>By default KEA uses client-identifiers in stead of MAC addresses to locate clients, disabling this option
         changes back to matching on MAC address which is used by most dhcp implementations.</help>
+        <grid_view>
+            <type>boolean</type>
+            <formatter>boolean</formatter>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <type>header</type>
@@ -33,6 +38,11 @@
         <label>Auto collect option data</label>
         <type>checkbox</type>
         <help>Automatically update option data for relevant attributes as routers, dns servers and ntp servers when applying settings from the gui.</help>
+        <grid_view>
+            <type>boolean</type>
+            <formatter>boolean</formatter>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>subnet4.option_data.routers</id>
@@ -41,12 +51,18 @@
         <style>tokenize option_data_autocollect</style>
         <allownew>true</allownew>
         <help>Default gateways to offer to the clients</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>subnet4.option_data.static_routes</id>
         <label>Static routes</label>
         <type>text</type>
         <help>Static routes that the client should install in its routing cache, defined as dest-ip1,router-ip1;dest-ip2,router-ip2</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>subnet4.option_data.domain_name_servers</id>
@@ -55,12 +71,18 @@
         <style>tokenize option_data_autocollect</style>
         <allownew>true</allownew>
         <help>DNS servers to offer to the clients</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>subnet4.option_data.domain_name</id>
         <label>Domain name</label>
         <type>text</type>
         <help>The domain name to offer to the client, set to this firewall's domain name when left empty</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>subnet4.option_data.domain_search</id>
@@ -70,6 +92,9 @@
         <allownew>true</allownew>
         <separator>,</separator>
         <help>Specifies a ´search list´ of Domain Names to be used by the client to locate not-fully-qualified domain names.</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>subnet4.option_data.ntp_servers</id>
@@ -78,6 +103,9 @@
         <style>tokenize option_data_autocollect</style>
         <allownew>true</allownew>
         <help>Specifies a list of IP addresses indicating NTP (RFC 5905) servers available to the client.</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>subnet4.option_data.time_servers</id>
@@ -86,23 +114,35 @@
         <style>tokenize</style>
         <allownew>true</allownew>
         <help>Specifies a list of RFC 868 time servers available to the client.</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>subnet4.next_server</id>
         <label>Next server</label>
         <type>text</type>
         <help>Next server IP address</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>subnet4.option_data.tftp_server_name</id>
         <label>TFTP server</label>
         <type>text</type>
         <help>TFTP server address or fqdn</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>subnet4.option_data.boot_file_name</id>
         <label>TFTP bootfile name</label>
         <type>text</type>
         <help>Boot filename to request</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
 </form>

src/opnsense/mvc/app/views/OPNsense/Kea/dhcpv4.volt

@@ -26,7 +26,7 @@
 
 <script>
     $( document ).ready(function() {
-        let data_get_map = {'frm_generalsettings':"/api/kea/dhcpv4/get"};
+        const data_get_map = {'frm_generalsettings':"/api/kea/dhcpv4/get"};
         mapDataToFormUI(data_get_map).done(function(data){
             try {
                 $("#dhcpv4\\.ha\\.this_server_name").attr(
@@ -42,7 +42,7 @@
         });
 
 
-        $("#grid-subnets").UIBootgrid(
+        $("#{{formGridSubnet['table_id']}}").UIBootgrid(
             {   search:'/api/kea/dhcpv4/search_subnet',
                 get:'/api/kea/dhcpv4/get_subnet/',
                 set:'/api/kea/dhcpv4/set_subnet/',
@@ -51,7 +51,7 @@
             }
         );
 
-        let grid_reservations = $("#grid-reservations").UIBootgrid(
+        const grid_reservations = $("#{{formGridReservation['table_id']}}").UIBootgrid(
             {   search:'/api/kea/dhcpv4/search_reservation',
                 get:'/api/kea/dhcpv4/get_reservation/',
                 set:'/api/kea/dhcpv4/set_reservation/',
@@ -60,7 +60,7 @@
             }
         );
 
-        $("#grid-ha-peers").UIBootgrid(
+        $("#{{formGridPeer['table_id']}}").UIBootgrid(
             {   search:'/api/kea/dhcpv4/search_peer',
                 get:'/api/kea/dhcpv4/get_peer/',
                 set:'/api/kea/dhcpv4/set_peer/',
@@ -83,6 +83,32 @@
         /**
          * Reservations csv download and upload
          */
+        const $tfoot = grid_reservations.find("tfoot td:last");
+        $tfoot.append(`
+            <button
+                id="upload_reservations"
+                type="button"
+                data-title="{{ lang._('Import reservations') }}"
+                data-endpoint='/api/kea/dhcpv4/upload_reservations'
+                title="{{ lang._('Import csv') }}"
+                data-toggle="tooltip"
+                class="btn btn-xs"
+            >
+                <span class="fa fa-fw fa-upload"></span>
+            </button>
+        `);
+        $tfoot.append(`
+            <button
+                id="download_reservations"
+                type="button"
+                title="{{ lang._('Export as csv') }}"
+                data-toggle="tooltip"
+                class="btn btn-xs"
+            >
+                <span class="fa fa-fw fa-table"></span>
+            </button>
+        `);
+
         $("#download_reservations").click(function(e){
             e.preventDefault();
             window.open("/api/kea/dhcpv4/download_reservations");
@@ -120,85 +146,15 @@
     </div>
     <!-- subnets / pools  -->
     <div id="subnets" class="tab-pane fade in">
-        <table id="grid-subnets" class="table table-condensed table-hover table-striped" data-editDialog="DialogSubnet" data-editAlert="keaChangeMessage">
-            <thead>
-                <tr>
-                  <th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
-                  <th data-column-id="subnet" data-type="string">{{ lang._('Subnet') }}</th>
-                  <th data-column-id="description" data-type="string">{{ lang._('Description') }}</th>
-                  <th data-column-id="commands" data-width="7em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-            <tfoot>
-                <tr>
-                    <td></td>
-                    <td>
-                        <button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-fw fa-plus"></span></button>
-                    </td>
-                </tr>
-            </tfoot>
-        </table>
+        {{ partial('layout_partials/base_bootgrid_table', formGridSubnet)}}
     </div>
     <!-- reservations -->
     <div id="reservations" class="tab-pane fade in">
-        <table id="grid-reservations" class="table table-condensed table-hover table-striped" data-editDialog="DialogReservation" data-editAlert="keaChangeMessage">
-            <thead>
-                <tr>
-                  <th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
-                  <th data-column-id="subnet" data-type="string">{{ lang._('Subnet') }}</th>
-                  <th data-column-id="ip_address" data-type="string">{{ lang._('IP Address') }}</th>
-                  <th data-column-id="hw_address" data-type="string">{{ lang._('MAC') }}</th>
-                  <th data-column-id="hostname" data-type="string">{{ lang._('Hostname') }}</th>
-                  <th data-column-id="description" data-type="string">{{ lang._('Description') }}</th>
-                  <th data-column-id="commands" data-width="7em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-            <tfoot>
-                <tr>
-                    <td></td>
-                    <td>
-                        <button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-fw fa-plus"></span></button>
-                        <button
-                            id="upload_reservations"
-                            type="button"
-                            data-title="{{ lang._('Import reservations') }}"
-                            data-endpoint='/api/kea/dhcpv4/upload_reservations'
-                            title="{{ lang._('Import csv') }}"
-                            data-toggle="tooltip"
-                            class="btn btn-xs"
-                        ><span class="fa fa-fw fa-upload"></span></button>
-                        <button id="download_reservations" type="button" title="{{ lang._('Export as csv') }}" data-toggle="tooltip"  class="btn btn-xs"><span class="fa fa-fw fa-table"></span></button>
-                    </td>
-                </tr>
-            </tfoot>
-        </table>
+        {{ partial('layout_partials/base_bootgrid_table', formGridReservation)}}
     </div>
     <!-- HA - peers -->
     <div id="ha-peers" class="tab-pane fade in">
-        <table id="grid-ha-peers" class="table table-condensed table-hover table-striped" data-editDialog="DialogPeer" data-editAlert="keaChangeMessage">
-            <thead>
-                <tr>
-                  <th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
-                  <th data-column-id="name" data-type="string">{{ lang._('Name') }}</th>
-                  <th data-column-id="role" data-type="string">{{ lang._('Role') }}</th>
-                  <th data-column-id="commands" data-width="7em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-            <tfoot>
-                <tr>
-                    <td></td>
-                    <td>
-                        <button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-fw fa-plus"></span></button>
-                    </td>
-                </tr>
-            </tfoot>
-        </table>
+       {{ partial('layout_partials/base_bootgrid_table', formGridPeer)}}
     </div>
 </div>
 
@@ -207,7 +163,7 @@
         <div class="col-md-12">
             <br/>
             <div id="keaChangeMessage" class="alert alert-info" style="display: none" role="alert">
-                {{ lang._('After changing settings, please remember to apply them') }}
+                {{ lang._('After changing settings, please remember to apply them.') }}
             </div>
             <button class="btn btn-primary" id="reconfigureAct"
                     data-endpoint='/api/kea/service/reconfigure'
@@ -220,6 +176,6 @@
     </div>
 </section>
 
-{{ partial("layout_partials/base_dialog",['fields':formDialogSubnet,'id':'DialogSubnet','label':lang._('Edit Subnet')])}}
-{{ partial("layout_partials/base_dialog",['fields':formDialogReservation,'id':'DialogReservation','label':lang._('Edit Reservation')])}}
-{{ partial("layout_partials/base_dialog",['fields':formDialogPeer,'id':'DialogPeer','label':lang._('Edit Peer')])}}
+{{ partial("layout_partials/base_dialog",['fields':formDialogSubnet,'id':formGridSubnet['edit_dialog_id'],'label':lang._('Edit Subnet')])}}
+{{ partial("layout_partials/base_dialog",['fields':formDialogReservation,'id':formGridReservation['edit_dialog_id'],'label':lang._('Edit Reservation')])}}
+{{ partial("layout_partials/base_dialog",['fields':formDialogPeer,'id':formGridPeer['edit_dialog_id'],'label':lang._('Edit Peer')])}}