TrafficShaper: Implement base_bootgrid_table and base_apply_button (#8524)

This commit is contained in:
Monviech 2025-04-03 16:08:04 +02:00 committed by GitHub
parent 368598eafc
commit 207bddcad5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 130 additions and 123 deletions

View File

@ -114,11 +114,7 @@ class SettingsController extends ApiMutableModelControllerBase
*/
public function searchPipesAction()
{
return $this->searchBase(
"pipes.pipe",
array("enabled","number", "bandwidth","bandwidthMetric","description","mask","origin"),
"number"
);
return $this->searchBase("pipes.pipe", null, "number");
}
@ -129,11 +125,7 @@ class SettingsController extends ApiMutableModelControllerBase
*/
public function searchQueuesAction()
{
return $this->searchBase(
"queues.queue",
array("enabled","number", "pipe","weight","description","mask","origin"),
"number"
);
return $this->searchBase("queues.queue", null, "number");
}
/**
@ -204,12 +196,7 @@ class SettingsController extends ApiMutableModelControllerBase
*/
public function searchRulesAction()
{
return $this->searchBase(
"rules.rule",
array("enabled", "interface", "proto", "source_not","source", "destination_not",
"destination", "description", "origin", "sequence", "target"),
"sequence"
);
return $this->searchBase("rules.rule", null, "sequence");
}
/**

View File

@ -44,8 +44,14 @@ class IndexController extends \OPNsense\Base\IndexController
{
// include dialog form definitions
$this->view->formDialogPipe = $this->getForm("dialogPipe");
$this->view->formGridPipe = $this->getFormGrid("dialogPipe");
$this->view->formDialogQueue = $this->getForm("dialogQueue");
$this->view->formGridQueue = $this->getFormGrid("dialogQueue");
$this->view->formDialogRule = $this->getForm("dialogRule");
$this->view->formGridRule = $this->getFormGrid("dialogRule");
// choose template
$this->view->pick('OPNsense/TrafficShaper/index');
}

View File

@ -4,6 +4,11 @@
<label>Enabled</label>
<type>checkbox</type>
<help>Enable this pipe and its related queues and rules</help>
<grid_view>
<width>6em</width>
<type>boolean</type>
<formatter>rowtoggle</formatter>
</grid_view>
</field>
<field>
<id>pipe.bandwidth</id>
@ -22,6 +27,9 @@
<type>text</type>
<help>number of dynamic queues, leave empty for default</help>
<advanced>true</advanced>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>pipe.mask</id>
@ -39,6 +47,9 @@
<type>text</type>
<help>Specifies the size of the hash table used for storing the various dynamic pipes configured with the mask setting</help>
<advanced>true</advanced>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>pipe.scheduler</id>
@ -46,12 +57,20 @@
<type>dropdown</type>
<advanced>true</advanced>
<help>Specify the scheduling algorithm to use</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>pipe.codel_enable</id>
<label>Enable CoDel</label>
<type>checkbox</type>
<help>Enable CoDel active queue management</help>
<grid_view>
<visible>false</visible>
<type>boolean</type>
<formatter>boolean</formatter>
</grid_view>
</field>
<field>
<id>pipe.codel_target</id>
@ -59,6 +78,9 @@
<type>text</type>
<advanced>true</advanced>
<help>Minimum acceptable persistent queue delay (in ms), leave empty for default</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>pipe.codel_interval</id>
@ -66,6 +88,9 @@
<type>text</type>
<advanced>true</advanced>
<help>Interval before dropping packets (in ms), leave empty for default</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>pipe.codel_ecn_enable</id>
@ -73,6 +98,11 @@
<type>checkbox</type>
<advanced>true</advanced>
<help>Explicit Congestion Notification</help>
<grid_view>
<visible>false</visible>
<type>boolean</type>
<formatter>boolean</formatter>
</grid_view>
</field>
<field>
<id>pipe.fqcodel_quantum</id>
@ -80,6 +110,9 @@
<type>text</type>
<advanced>true</advanced>
<help>The number of bytes a queue can serve before being moved to the tail of old queues list (bytes), leave empty for defaults</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>pipe.fqcodel_limit</id>
@ -87,6 +120,9 @@
<type>text</type>
<advanced>true</advanced>
<help>The hard size limit of all queues managed by this instance, leave empty for defaults</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>pipe.fqcodel_flows</id>
@ -94,12 +130,20 @@
<type>text</type>
<advanced>true</advanced>
<help>The number of flow queues that are created and managed, leave empty for defaults</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>pipe.pie_enable</id>
<label>Enable PIE</label>
<type>checkbox</type>
<help>Enable PIE active queue management</help>
<grid_view>
<visible>false</visible>
<type>boolean</type>
<formatter>boolean</formatter>
</grid_view>
</field>
<field>
<id>pipe.delay</id>
@ -107,6 +151,9 @@
<type>text</type>
<advanced>true</advanced>
<help>Add delay in ms to this pipe.</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>pipe.description</id>

View File

@ -4,6 +4,11 @@
<label>Enabled</label>
<type>checkbox</type>
<help>Enable this queue and its related rules</help>
<grid_view>
<width>6em</width>
<type>boolean</type>
<formatter>rowtoggle</formatter>
</grid_view>
</field>
<field>
<id>queue.pipe</id>
@ -26,6 +31,9 @@
<li>Choose source to evenly share every IP in the source field of rules the specified bandwidth. Normally this is used for upload queues.</li>
<li>Leave this value empty if you want to specify multiple queues with different weights.</li>
]]></help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>queue.buckets</id>
@ -33,12 +41,20 @@
<type>text</type>
<help>Specifies the size of the hash table used for storing the various dynamic queues configured with the mask setting</help>
<advanced>true</advanced>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>queue.codel_enable</id>
<label>Enable CoDel</label>
<type>checkbox</type>
<help>Enable CoDel active queue management</help>
<grid_view>
<visible>false</visible>
<type>boolean</type>
<formatter>boolean</formatter>
</grid_view>
</field>
<field>
<id>queue.codel_target</id>
@ -46,6 +62,9 @@
<type>text</type>
<advanced>true</advanced>
<help>Minimum acceptable persistent queue delay (in ms), leave empty for default</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>queue.codel_interval</id>
@ -53,6 +72,9 @@
<type>text</type>
<advanced>true</advanced>
<help>Interval before dropping packets (in ms), leave empty for default</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>queue.codel_ecn_enable</id>
@ -60,12 +82,22 @@
<type>checkbox</type>
<advanced>true</advanced>
<help>Explicit Congestion Notification</help>
<grid_view>
<visible>false</visible>
<type>boolean</type>
<formatter>boolean</formatter>
</grid_view>
</field>
<field>
<id>queue.pie_enable</id>
<label>Enable PIE</label>
<type>checkbox</type>
<help>Enable PIE active queue management</help>
<grid_view>
<visible>false</visible>
<type>boolean</type>
<formatter>boolean</formatter>
</grid_view>
</field>
<field>
<id>queue.description</id>

View File

@ -4,6 +4,11 @@
<label>Enabled</label>
<type>checkbox</type>
<help>enable this rule</help>
<grid_view>
<width>6em</width>
<type>boolean</type>
<formatter>rowtoggle</formatter>
</grid_view>
</field>
<field>
<id>rule.sequence</id>
@ -22,6 +27,9 @@
<type>dropdown</type>
<advanced>true</advanced>
<help>secondary interface, matches packets traveling to/from interface (1) to/from interface (2). can be combined with direction.</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>rule.proto</id>
@ -35,6 +43,9 @@
<advanced>true</advanced>
<type>text</type>
<help>Specifies the maximum size of packets to match in bytes</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>rule.source</id>
@ -49,12 +60,18 @@
<label>Invert source</label>
<type>checkbox</type>
<help>invert source (not)</help>
<grid_view>
<ignore>true</ignore>
</grid_view>
</field>
<field>
<id>rule.src_port</id>
<label>Src-port</label>
<type>text</type>
<help>Source port number or well known name (imap, imaps, http, https, ...), for ranges use a dash</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>rule.destination</id>
@ -69,12 +86,18 @@
<label>Invert destination</label>
<type>checkbox</type>
<help>invert destination (not)</help>
<grid_view>
<ignore>true</ignore>
</grid_view>
</field>
<field>
<id>rule.dst_port</id>
<label>Dst-port</label>
<type>text</type>
<help>Destination port number or well known name (imap, imaps, http, https, ...), for ranges use a dash</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>rule.dscp</id>
@ -82,6 +105,9 @@
<type>select_multiple</type>
<advanced>true</advanced>
<help>Match against one or multiple DSCP values.</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>rule.direction</id>
@ -89,6 +115,9 @@
<type>dropdown</type>
<advanced>true</advanced>
<help>matches incoming or outgoing packets or both (default)</help>
<grid_view>
<visible>false</visible>
</grid_view>
</field>
<field>
<id>rule.target</id>

View File

@ -39,7 +39,7 @@
* link grid actions
*************************************************************************************************************/
$("#grid-pipes").UIBootgrid(
$("#{{formGridPipe['table_id']}}").UIBootgrid(
{ search:'/api/trafficshaper/settings/searchPipes',
get:'/api/trafficshaper/settings/getPipe/',
set:'/api/trafficshaper/settings/setPipe/',
@ -49,7 +49,7 @@
}
);
$("#grid-queues").UIBootgrid(
$("#{{formGridQueue['table_id']}}").UIBootgrid(
{ search:'/api/trafficshaper/settings/searchQueues',
get:'/api/trafficshaper/settings/getQueue/',
set:'/api/trafficshaper/settings/setQueue/',
@ -59,7 +59,7 @@
}
);
$("#grid-rules").UIBootgrid(
$("#{{formGridRule['table_id']}}").UIBootgrid(
{ search:'/api/trafficshaper/settings/searchRules',
get:'/api/trafficshaper/settings/getRule/',
set:'/api/trafficshaper/settings/setRule/',
@ -129,8 +129,10 @@
$(window).on('hashchange', function(e) {
$('a[href="' + window.location.hash + '"]').click()
});
});
$('<button class="btn btn-primary pull-right" id="flushAct" type="button"><b>{{ lang._("Reset") }}</b> <i id="flushAct_progress" class=""></i></button>')
.insertAfter('#reconfigureAct');
});
</script>
@ -141,113 +143,17 @@
</ul>
<div class="tab-content content-box">
<div id="pipes" class="tab-pane fade in active">
<!-- tab page "pipes" -->
<table id="grid-pipes" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogPipe" data-editAlert="shaperChangeMessage">
<thead>
<tr>
<th data-column-id="origin" data-type="string" data-visible="false">{{ lang._('Origin') }}</th>
<th data-column-id="enabled" data-width="6em" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
<th data-column-id="number" data-type="number" data-visible="false">{{ lang._('Number') }}</th>
<th data-column-id="bandwidth" data-type="number">{{ lang._('Bandwidth') }}</th>
<th data-column-id="bandwidthMetric" data-type="string">{{ lang._('Metric') }}</th>
<!--<th data-column-id="burst" data-type="number">{{ lang._('Burst') }}</th>--> <!-- disabled, burst does not work -->
<th data-column-id="mask" data-type="string">{{ lang._('Mask') }}</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>
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</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 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', formGridPipe)}}
</div>
<div id="queues" class="tab-pane fade in">
<!-- tab page "queues" -->
<table id="grid-queues" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogQueue" data-editAlert="shaperChangeMessage">
<thead>
<tr>
<th data-column-id="origin" data-type="string" data-visible="false">{{ lang._('Origin') }}</th>
<th data-column-id="enabled" data-width="6em" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
<th data-column-id="number" data-type="number" data-visible="false">{{ lang._('Number') }}</th>
<th data-column-id="pipe" data-type="string">{{ lang._('Pipe') }}</th>
<th data-column-id="weight" data-type="string">{{ lang._('Weight') }}</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>
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</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 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', formGridQueue)}}
</div>
<div id="rules" class="tab-pane fade in">
<!-- tab page "rules" -->
<table id="grid-rules" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogRule" data-editAlert="shaperChangeMessage">
<thead>
<tr>
<th data-column-id="enabled" data-width="6em" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
<th data-column-id="sequence" data-width="6em" data-type="number">{{ lang._('#') }}</th>
<th data-column-id="origin" data-type="string" data-visible="false">{{ lang._('Origin') }}</th>
<th data-column-id="interface" data-type="string">{{ lang._('Interface') }}</th>
<th data-column-id="proto" data-type="string">{{ lang._('Protocol') }}</th>
<th data-column-id="displaysrc" data-type="notprefixable">{{ lang._('Source') }}</th>
<th data-column-id="displaydst" data-type="notprefixable">{{ lang._('Destination') }}</th>
<th data-column-id="target" data-type="string">{{ lang._('Target') }}</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>
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</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 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>
</div>
<div class="col-md-12">
<div id="shaperChangeMessage" class="alert alert-info" style="display: none" role="alert">
{{ lang._('After changing settings, please remember to apply them with the button below') }}
</div>
<hr/>
<button class="btn btn-primary" id="reconfigureAct"
data-endpoint='/api/trafficshaper/service/reconfigure'
data-label="{{ lang._('Apply') }}"
data-error-title="{{ lang._('Error reconfiguring trafficshaper') }}"
type="button"
></button>
<button class="btn btn-primary pull-right" id="flushAct" type="button"><b>{{ lang._('Reset') }}</b> <i id="flushAct_progress" class=""></i></button>
<br/><br/>
{{ partial('layout_partials/base_bootgrid_table', formGridRule)}}
</div>
</div>
{{ partial('layout_partials/base_apply_button', {'data_endpoint': '/api/trafficshaper/service/reconfigure'}) }}
{# include dialogs #}
{{ partial("layout_partials/base_dialog",['fields':formDialogPipe,'id':'DialogPipe','label':lang._('Edit pipe')])}}
{{ partial("layout_partials/base_dialog",['fields':formDialogQueue,'id':'DialogQueue','label':lang._('Edit queue')])}}
{{ partial("layout_partials/base_dialog",['fields':formDialogRule,'id':'DialogRule','label':lang._('Edit rule')])}}
{{ partial("layout_partials/base_dialog",['fields':formDialogPipe,'id':formGridPipe['edit_dialog_id'],'label':lang._('Edit pipe')])}}
{{ partial("layout_partials/base_dialog",['fields':formDialogQueue,'id':formGridQueue['edit_dialog_id'],'label':lang._('Edit queue')])}}
{{ partial("layout_partials/base_dialog",['fields':formDialogRule,'id':formGridRule['edit_dialog_id'],'label':lang._('Edit rule')])}}