Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vpn/wireguard: Integrate base_bootgrid_table and base_apply_button #8313

Merged
merged 3 commits into from
Feb 18, 2025
Merged

vpn/wireguard: Integrate base_bootgrid_table and base_apply_button #8313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c9e1312
vpn/wireguard: Integrate layout_partials/base_bootgrid_table and layo…
Monviech Feb 11, 2025
502303a
vpn/wireguard: Change spot of base_form, add formatter for Instance s…
Monviech Feb 13, 2025
de7af75
Fix whitespace
Monviech Feb 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions src/opnsense/mvc/app/controllers/OPNsense/Wireguard/Api/ClientController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,7 @@ public function searchClientAction()
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)
Expand Down
6 changes: 1 addition & 5 deletions src/opnsense/mvc/app/controllers/OPNsense/Wireguard/Api/ServerController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,7 @@ public function keyPairAction()

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)
Expand Down
5 changes: 5 additions & 0 deletions src/opnsense/mvc/app/controllers/OPNsense/Wireguard/GeneralController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,13 @@ protected function templateJSIncludes()
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');
}
Expand Down
14 changes: 14 additions & 0 deletions src/opnsense/mvc/app/controllers/OPNsense/Wireguard/forms/dialogEditWireguardClient.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
31 changes: 31 additions & 0 deletions src/opnsense/mvc/app/controllers/OPNsense/Wireguard/forms/dialogEditWireguardServer.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -76,12 +99,20 @@
<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>
<label>Gateway</label>
<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>
94 changes: 20 additions & 74 deletions src/opnsense/mvc/app/views/OPNsense/Wireguard/general.volt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/',
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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');
});

/**
Expand Down Expand Up @@ -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');
}
});

Expand Down Expand Up @@ -288,64 +294,15 @@
</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">
<button id="keygen" type="button" class="btn btn-secondary" title="{{ lang._('Generate new keypair.') }}" data-toggle="tooltip">
<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">
Expand All @@ -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'])}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like this creates a separate form now? not overly attached, just wondering

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah its not in the same div as the apply button anymore but attached just below the grid.

</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')])}}