vpn/wireguard: Integrate base_bootgrid_table and base_apply_button (#8313)

* vpn/wireguard: Integrate layout_partials/base_bootgrid_table and layout_partials/base_apply_button

* vpn/wireguard: Change spot of base_form, add formatter for Instance so that wg0,wg1 etc is displayed again in the grid as before the change

* Fix whitespace

src/opnsense/mvc/app/controllers/OPNsense/Wireguard/Api/ClientController.php

@@ -67,12 +67,7 @@ class ClientController extends ApiMutableModelControllerBase
             return empty($servers) || array_intersect(explode(',', $record->servers), $servers);
         };
 
-        return $this->searchBase(
-            'clients.client',
-            ["enabled", "name", "pubkey", "tunneladdress", "serveraddress", "serverport", "servers"],
-            null,
-            $filter_funct
-        );
+        return $this->searchBase('clients.client', null, null, $filter_funct);
     }
 
     public function getClientAction($uuid = null)

src/opnsense/mvc/app/controllers/OPNsense/Wireguard/Api/ServerController.php

@@ -44,11 +44,7 @@ class ServerController extends ApiMutableModelControllerBase
 
     public function searchServerAction()
     {
-        $search = $this->searchBase(
-            'servers.server',
-            ["enabled", "instance", "peers", "name", "networks", "pubkey", "port", "tunneladdress", 'interface']
-        );
-        return $search;
+        return $this->searchBase('servers.server');
     }
 
     public function getServerAction($uuid = null)

src/opnsense/mvc/app/controllers/OPNsense/Wireguard/GeneralController.php

@@ -41,8 +41,13 @@ class GeneralController extends \OPNsense\Base\IndexController
     public function indexAction()
     {
         $this->view->generalForm = $this->getForm("general");
+
         $this->view->formDialogEditWireguardClient = $this->getForm("dialogEditWireguardClient");
+        $this->view->formGridWireguardClient = $this->getFormGrid("dialogEditWireguardClient");
+
         $this->view->formDialogEditWireguardServer = $this->getForm("dialogEditWireguardServer");
+        $this->view->formGridWireguardServer = $this->getFormGrid("dialogEditWireguardServer");
+
         $this->view->formDialogConfigBuilder = $this->getForm("dialogConfigBuilder");
         $this->view->pick('OPNsense/Wireguard/general');
     }

src/opnsense/mvc/app/controllers/OPNsense/Wireguard/forms/dialogEditWireguardClient.xml

@@ -4,6 +4,11 @@
         <label>Enabled</label>
         <type>checkbox</type>
         <help>This will enable or disable the peer.</help>
+        <grid_view>
+            <width>6em</width>
+            <type>boolean</type>
+            <formatter>rowtoggle</formatter>
+        </grid_view>
     </field>
     <field>
         <id>client.name</id>
@@ -16,12 +21,18 @@
         <label>Public key</label>
         <type>text</type>
         <help>Public key of this peer. You can generate the key using the private key piped to "wg pubkey".</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>client.psk</id>
         <label>Pre-shared key</label>
         <type>text</type>
         <help>Shared secret (PSK) for this peer. You can generate a key using "wg genpsk".</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>client.tunneladdress</id>
@@ -54,5 +65,8 @@
         <label>Keepalive interval</label>
         <type>text</type>
         <help>Set persistent keepalive interval in seconds.</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
 </form>

src/opnsense/mvc/app/controllers/OPNsense/Wireguard/forms/dialogEditWireguardServer.xml

@@ -4,6 +4,11 @@
         <label>Enabled</label>
         <type>checkbox</type>
         <help>This will enable or disable the instance.</help>
+        <grid_view>
+            <width>6em</width>
+            <type>boolean</type>
+            <formatter>rowtoggle</formatter>
+        </grid_view>
     </field>
     <field>
         <id>server.name</id>
@@ -16,18 +21,27 @@
         <label>Instance</label>
         <type>info</type>
         <help>This is the instance number to give the WireGuard device a unique name (wgX).</help>
+        <grid_view>
+            <formatter>wgformatter</formatter>
+        </grid_view>
     </field>
     <field>
         <id>server.pubkey</id>
         <label>Public key</label>
         <type>text</type>
         <help>Public key of this instance. You can specify your own one, or a key will be generated after saving.</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>server.privkey</id>
         <label>Private key</label>
         <type>text</type>
         <help>Private key of this instance. You can specify your own one, or a key will be generated after saving. Please keep this key safe.</help>
+        <grid_view>
+            <ignore>true</ignore>
+        </grid_view>
     </field>
     <field>
         <id>server.port</id>
@@ -41,6 +55,9 @@
         <type>text</type>
         <advanced>true</advanced>
         <help>Set a specific device MTU for this instance.</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>server.dns</id>
@@ -50,6 +67,9 @@
         <allownew>true</allownew>
         <advanced>true</advanced>
         <help>Set specific DNS servers for this instance. Use with care.</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>server.tunneladdress</id>
@@ -64,6 +84,9 @@
         <label>Depend on (CARP)</label>
         <type>dropdown</type>
         <help>The CARP VHID to depend on. When this virtual address is not in master state, then the instance will be shutdown.</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>server.peers</id>
@@ -76,6 +99,11 @@
         <label>Disable routes</label>
         <type>checkbox</type>
         <help>This will prevent installing routes. Usually you only enable this to do own routing decisions via a local gateway and gateway rules.</help>
+        <grid_view>
+            <visible>false</visible>
+            <type>boolean</type>
+            <formatter>boolean</formatter>
+        </grid_view>
     </field>
     <field>
         <id>server.gateway</id>
@@ -83,5 +111,8 @@
         <type>text</type>
         <advanced>true</advanced>
         <help>Set the gateway IP here when using "Disable routes" feature. You also have to add this as a system gateway.</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
 </form>

src/opnsense/mvc/app/views/OPNsense/Wireguard/general.volt

@@ -27,13 +27,13 @@
 
  <script>
     $( document ).ready(function() {
-        var data_get_map = {'frm_general_settings':"/api/wireguard/general/get"};
+        const data_get_map = {'frm_general_settings':"/api/wireguard/general/get"};
         mapDataToFormUI(data_get_map).done(function(data){
             formatTokenizersUI();
             $('.selectpicker').selectpicker('refresh');
         });
 
-        let grid_peers = $("#grid-peers").UIBootgrid({
+        const grid_peers = $("#{{formGridWireguardClient['table_id']}}").UIBootgrid({
                 search: '/api/wireguard/client/searchClient',
                 get: '/api/wireguard/client/getClient/',
                 set: '/api/wireguard/client/setClient/',
@@ -65,16 +65,22 @@
             }
         });
 
-        $("#grid-instances").UIBootgrid({
+        $("#{{formGridWireguardServer['table_id']}}").UIBootgrid({
             search: '/api/wireguard/server/searchServer',
             get: '/api/wireguard/server/getServer/',
             set: '/api/wireguard/server/setServer/',
             add: '/api/wireguard/server/addServer/',
             del: '/api/wireguard/server/delServer/',
-            toggle: '/api/wireguard/server/toggleServer/'
+            toggle: '/api/wireguard/server/toggleServer/',
+            options: {
+                formatters: {
+                    "wgformatter": function (column, row) {
+                        return "wg" + row[column.id];
+                    }
+                }
+            }
         });
 
-
         $("#reconfigureAct").SimpleActionButton({
             onPreAction: function() {
                 const dfObj = new $.Deferred();
@@ -109,9 +115,9 @@
         /**
          * Quick instance filter on top
          */
-        $("#filter_container").detach().prependTo('#grid-peers-header > .row > .actionBar > .actions');
+        $("#filter_container").detach().prependTo('#{{formGridWireguardClient["table_id"]}}-header > .row > .actionBar > .actions');
         $("#server_filter").change(function(){
-            $('#grid-peers').bootgrid('reload');
+            $('#{{formGridWireguardClient['table_id']}}').bootgrid('reload');
         });
 
         /**
@@ -250,7 +256,7 @@
             if (e.target.id == 'tab_configbuilder'){
                 configbuilder_new();
             } else if (e.target.id == 'tab_peers') {
-                $('#grid-peers').bootgrid('reload');
+                $('#{{formGridWireguardClient['table_id']}}').bootgrid('reload');
             }
         });
 
@@ -288,32 +294,7 @@
                 </select>
             </div>
         </div>
-
-        <table id="grid-peers" class="table table-condensed table-hover table-striped" data-editDialog="dialogEditWireguardClient">
-            <thead>
-                <tr>
-                    <th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
-                    <th data-column-id="enabled" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
-                    <th data-column-id="name" data-type="string" data-visible="true">{{ lang._('Name') }}</th>
-                    <th data-column-id="serveraddress" data-type="string" data-visible="true">{{ lang._('Endpoint address') }}</th>
-                    <th data-column-id="serverport" data-type="string" data-visible="true">{{ lang._('Endpoint port') }}</th>
-                    <th data-column-id="tunneladdress" data-type="string" data-visible="true">{{ lang._('Allowed IPs') }}</th>
-                    <th data-column-id="servers" data-type="string" data-visible="true">{{ lang._('Instances') }}</th>
-                    <th data-column-id="commands" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-            <tfoot>
-                <tr>
-                    <td colspan="6"></td>
-                    <td>
-                        <button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-plus"></span></button>
-                        <button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-fw fa-trash-o"></span></button>
-                    </td>
-                </tr>
-            </tfoot>
-        </table>
+        {{ partial('layout_partials/base_bootgrid_table', formGridWireguardClient)}}
     </div>
     <div id="instances" class="tab-pane fade in active">
         <span id="keygen_div" style="display:none" class="pull-right">
@@ -321,31 +302,7 @@
               <i class="fa fa-fw fa-gear"></i>
             </button>
         </span>
-        <table id="grid-instances" class="table table-condensed table-hover table-striped" data-editDialog="dialogEditWireguardServer">
-            <thead>
-                <tr>
-                    <th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
-                    <th data-column-id="enabled" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
-                    <th data-column-id="name" data-type="string" data-visible="true">{{ lang._('Name') }}</th>
-                    <th data-column-id="interface" data-type="string" data-visible="true">{{ lang._('Device') }}</th>
-                    <th data-column-id="tunneladdress" data-type="string" data-visible="true">{{ lang._('Tunnel Address') }}</th>
-                    <th data-column-id="port" data-type="string" data-visible="true">{{ lang._('Port') }}</th>
-                    <th data-column-id="peers" data-type="string" data-visible="true">{{ lang._('Peers') }}</th>
-                    <th data-column-id="commands" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-            <tfoot>
-                <tr>
-                    <td colspan="7"></td>
-                    <td>
-                        <button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-plus"></span></button>
-                        <button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-fw fa-trash-o"></span></button>
-                    </td>
-                </tr>
-            </tfoot>
-        </table>
+        {{ partial('layout_partials/base_bootgrid_table', formGridWireguardServer)}}
     </div>
     <div id="configbuilder" class="tab-pane fade in">
         <span id="pskgen_cb_div" style="display:none" class="pull-right">
@@ -360,19 +317,8 @@
         </span>
         {{ partial("layout_partials/base_form",['fields':formDialogConfigBuilder,'id':'frm_config_builder'])}}
     </div>
+    {{ partial("layout_partials/base_form",['fields':generalForm,'id':'frm_general_settings'])}}
 </div>
-
-<section class="page-content-main">
-    <div class="content-box">
-        {{ partial("layout_partials/base_form",['fields':generalForm,'id':'frm_general_settings'])}}
-        <button class="btn btn-primary __mt __mb __ml" id="reconfigureAct"
-            data-endpoint='/api/wireguard/service/reconfigure'
-            data-label="{{ lang._('Apply') }}"
-            data-error-title="{{ lang._('Error reconfiguring WireGuard') }}"
-            type="button"
-        ></button>
-    </div>
-</section>
-
-{{ partial("layout_partials/base_dialog",['fields':formDialogEditWireguardClient,'id':'dialogEditWireguardClient','label':lang._('Edit peer')])}}
-{{ partial("layout_partials/base_dialog",['fields':formDialogEditWireguardServer,'id':'dialogEditWireguardServer','label':lang._('Edit instance')])}}
+{{ partial('layout_partials/base_apply_button', {'data_endpoint': '/api/wireguard/service/reconfigure'}) }}
+{{ partial("layout_partials/base_dialog",['fields':formDialogEditWireguardClient,'id':formGridWireguardClient['edit_dialog_id'],'label':lang._('Edit peer')])}}
+{{ partial("layout_partials/base_dialog",['fields':formDialogEditWireguardServer,'id':formGridWireguardServer['edit_dialog_id'],'label':lang._('Edit instance')])}}