Feature: Complex port filters (librenms#19596)

* Initial working

* Additional types and model trait WIP

* Fixes

* Backend filtering working

* Working

* Dark style closer

* Device page too, option to hard reload to apply filter

* forgot to filter to device

* forgot to filter to device

* Fix dropdown incorrect

* more fixes, restore urlParam and use Laravel

* Fix search bar and bare toggles

* Working graphs

* Auto-focus input

* Ports migrated to Laravel
Graphs mostly working, needs tidy

* Link cleanups

* Handle errors sorting correctly

* modern port link

* Add date-range-picker to graphs page

* Ability to save table filters WIP.  Some things hardcoded.

* Small cleanup

* One time filter migration

* Don't let menu go off left side of screen

* Cleanup WIP

* javascript cleanup

* Store sensor state to prevent odd behavior

* fixes

* port filter refinements

* small refactor

* Merge multi-select into select

* Fix population

* stupid state logic.  this is probably wrong.

* Fix cancel

* Add filter to graphs on device ports tabs

* Implement port groups

* Style fixes

* remove stupid import

* Fix syntax error

* Some types and rector

* Update and add device and port group filtering
Update links

* Some font and icon sizing adjustments

* tailwind cleanup, but fonts are messed

* Fix initial loading on ajax pages
fire filter:apply event (when reload not enabled)
fix format for filter:loaded and cache formated filter

* Make height match other ui elements

* Fix visual jumping around by reserving space for the remove button

* First try at vertical layout on small screens

* events add name

* style fixes

* Fix font oddities due to font-size: 12px on html body

* Some font size changes and a few more tweaks to the mobile vertical stack

* Missing import

* Types

* Style

* fix type

* more types

* types again, what fun

Author: murrant

LibreNMS/Util/Url.php

@@ -56,14 +56,36 @@ public static function modernDeviceLink(?Device $device, string $text = '', stri
             DeviceStatus::Disabled => 'device-link-disabled',
         };
 
-        return sprintf('<a href="%s" class="%s" x-data="deviceLink()">%s</a>%s',
-            route('device', $device->device_id),
+        return sprintf('<a href="%s" class="%s" x-data="deviceLink({device_id: %d})">%s</a>%s',
+            self::deviceUrl($device),
             $class,
+            $device->device_id,
             e($text ?: $device->displayName()),
             $extra ? '<br />' . e($extra) : $extra
         );
     }
 
+    /**
+     * Provisional port link generation
+     */
+    public static function modernPortLink(?Port $port, string $text = '', string $extra = ''): string
+    {
+        if ($port === null) {
+            return e($text);
+        }
+
+        $label = Rewrite::normalizeIfName($port->getLabel());
+        $text = $text ?: $label;
+
+        return sprintf('<a href="%s" class="%s" x-data="portLink({port_id: %d})">%s</a>%s',
+            self::portUrl($port),
+            self::portLinkDisplayClass($port),
+            $port->port_id,
+            e($text),
+            $extra ? '<br />' . e($extra) : $extra
+        );
+    }
+
     /**
      * @param  Device|null  $device
      * @param  string|null  $text
@@ -154,18 +176,10 @@ public static function deviceLink($device, $text = '', $vars = [], $start = 0, $
         return $link;
     }
 
-    /**
-     * @param  Port  $port
-     * @param  string  $text
-     * @param  string  $type
-     * @param  bool  $overlib
-     * @param  bool  $single_graph
-     * @return mixed|string
-     */
-    public static function portLink($port, $text = null, $type = null, $overlib = true, $single_graph = false)
+    public static function portLink(?Port $port, ?string $text = null, ?string $type = null, bool $overlib = true, bool $single_graph = false, ?string $url = null): string
     {
         if ($port === null) {
-            return $text;
+            return (string) $text;
         }
 
         $label = Rewrite::normalizeIfName($port->getLabel());
@@ -205,7 +219,7 @@ public static function portLink($port, $text = null, $type = null, $overlib = tr
         if (! $overlib) {
             return $content;
         } elseif (Gate::allows('view', $port)) {
-            return self::overlibLink(self::portUrl($port), $text, $content, self::portLinkDisplayClass($port));
+            return self::overlibLink($url ?? self::portUrl($port), $text, $content, self::portLinkDisplayClass($port));
         }
 
         return Rewrite::normalizeIfName($text);
@@ -375,7 +389,7 @@ public static function forExternalGraph($args): string
 
     public static function graphPageUrl(string $type, array $args = []): string
     {
-        return url('graphs', ['type' => $type, ...$args]);
+        return url()->query('graphs', ['type' => $type, ...$args]);
     }
 
     /**
@@ -422,15 +436,15 @@ public static function graphPopup($args, $content = null, $link = null)
         return self::overlibLink($args['link'], $graph, $popup, null);
     }
 
-    public static function lazyGraphTag($args)
+    public static function lazyGraphTag($args, string $class = 'img-responsive'): string
     {
         $urlargs = [];
 
         foreach ($args as $key => $arg) {
             $urlargs[] = $key . '=' . ($arg === null ? '' : urlencode($arg));
         }
 
-        $tag = '<img class="graph-image img-responsive" src="' . url('graph.php') . '?' . implode('&amp;', $urlargs) . '" style="border:0;"';
+        $tag = '<img class="graph-image ' . $class . '" src="' . url('graph.php') . '?' . implode('&amp;', $urlargs) . '" style="border:0;"';
 
         if (LibrenmsConfig::get('enable_lazy_load', true)) {
             return $tag . ' loading="lazy" />';

app/Http/Controllers/Device/Tabs/PortsController.php

@@ -36,6 +36,7 @@
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Http\Request;
 use Illuminate\Pagination\LengthAwarePaginator;
+use Illuminate\Support\Arr;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Validator;
@@ -49,10 +50,6 @@ class PortsController implements DeviceTab
         'perPage' => 32,
         'sort' => 'ifIndex',
         'order' => 'asc',
-        'disabled' => false,
-        'ignored' => false,
-        'admin' => 'up',
-        'status' => 'any',
     ];
 
     public function visible(Device $device): bool
@@ -82,14 +79,11 @@ public function data(Device $device, Request $request): array
             'perPage' => ['regex:/^(\d+|all)$/'],
             'sort' => 'in:media,mac,port,traffic,speed,index',
             'order' => 'in:asc,desc',
-            'disabled' => 'in:0,1',
-            'ignored' => 'in:0,1',
-            'admin' => 'in:up,down,testing,any',
-            'status' => 'in:up,down,testing,unknown,dormant,notPresent,lowerLayerDown,any',
-            'type' => 'in:bits,upkts,nupkts,errors,etherlike',
             'from' => ['regex:/^(int|[+-]\d+[hdmy])$/'],
             'to' => ['regex:/^(int|[+-]\d+[hdmy])$/'],
-            'searchPort' => 'nullable|string|max:255',
+            'filter' => ['nullable', 'array'],
+            'filter.*' => ['array'],
+            'filter.*.*' => ['nullable', 'max:255'],
         ]);
 
         $this->loadSettings($request);
@@ -107,11 +101,13 @@ public function data(Device $device, Request $request): array
         return array_merge([
             'tab' => $tab,
             'details' => $this->detail,
+            'filterFields' => $this->filterFields($device->device_id),
             'submenu' => [
                 $this->getTabs($device),
                 __('Graphs') => $this->getGraphLinks(),
             ],
-            'dropdownLinks' => $this->pageLinks($request),
+            'dropdownLinks' => [],
+            'filter' => UserPref::getPref($request->user(), 'filters.device.ports') ?: [],
             'perPage' => $this->settings['perPage'],
             'sort' => $this->settings['sort'],
             'next_order' => $this->settings['order'] == 'asc' ? 'desc' : 'asc',
@@ -139,8 +135,7 @@ private function portData(Device $device, Request $request): array
         /** @var Collection<int, Port>|LengthAwarePaginator<Port> $ports */
         $ports = $this->getFilteredPortsQuery($device, $relationships, $request)
             ->paginate(fn ($total) => $this->settings['perPage'] == 'all' ? $total : (int) $this->settings['perPage']) // @phpstan-ignore-line missing closure type
-            ->appends('perPage', $this->settings['perPage'])
-            ->appends('searchPort', $request->input('searchPort'));
+            ->appends('perPage', $this->settings['perPage']);
 
         $data = [
             'ports' => $ports,
@@ -296,8 +291,8 @@ private function portSecurityData(Device $device): array
     private function getTabs(Device $device): array
     {
         $tabs = [
-            ['name' => __('Basic'), 'url' => 'basic'],
-            ['name' => __('Detail'), 'url' => 'detail'],
+            ['name' => __('Basic'), 'url' => 'basic', 'class' => 'sync-filter-url'],
+            ['name' => __('Detail'), 'url' => 'detail', 'class' => 'sync-filter-url'],
         ];
 
         if ($device->macs()->exists()) {
@@ -340,24 +335,28 @@ private function getGraphLinks(): array
             [
                 'name' => __('port.graphs.bits'),
                 'url' => 'graphs?type=bits',
+                'class' => 'sync-filter-url',
                 'sub_name' => __('Mini'),
                 'sub_url' => 'mini_graphs?type=bits',
             ],
             [
                 'name' => __('port.graphs.upkts'),
                 'url' => 'graphs?type=upkts',
+                'class' => 'sync-filter-url',
                 'sub_name' => __('Mini'),
                 'sub_url' => 'mini_graphs?type=upkts',
             ],
             [
                 'name' => __('port.graphs.nupkts'),
                 'url' => 'graphs?type=nupkts',
+                'class' => 'sync-filter-url',
                 'sub_name' => __('Mini'),
                 'sub_url' => 'mini_graphs?type=nupkts',
             ],
             [
                 'name' => __('port.graphs.errors'),
                 'url' => 'graphs?type=errors',
+                'class' => 'sync-filter-url',
                 'sub_name' => __('Mini'),
                 'sub_url' => 'mini_graphs?type=errors',
             ],
@@ -377,8 +376,14 @@ private function getGraphLinks(): array
 
     private function loadSettings(Request $request): void
     {
-        $input = $request->only(['perPage', 'sort', 'order', 'disabled', 'ignored', 'admin', 'status']);
-        $saved = UserPref::getPref($request->user(), 'ports_ui_settings') ?? [];
+        $input = $request->only(['perPage', 'sort', 'order']);
+        $saved = UserPref::getPref($request->user(), 'ports_ui_settings');
+
+        if ($saved === null) {
+            $saved = [];
+        } elseif (array_key_exists('admin', $saved)) {
+            $saved = $this->migrateFilterSettings($saved);
+        }
 
         $this->settings = $input + $saved + $this->defaults;
 
@@ -402,21 +407,10 @@ private function getFilteredPortsQuery(Device $device, array $relationships = []
             default => 'ifIndex',
         };
 
-        // Get search parameter
-        $searchPort = $request?->input('searchPort');
-
         return Port::where('device_id', $device->device_id)
             ->isNotDeleted()
             ->hasAccess(Auth::user())->with($relationships)
-            ->when(! $this->settings['disabled'], fn (Builder $q, $disabled) => $q->where('disabled', 0))
-            ->when(! $this->settings['ignored'], fn (Builder $q, $disabled) => $q->where('ignore', 0))
-            ->when($this->settings['admin'] != 'any', fn (Builder $q, $admin) => $q->where('ifAdminStatus', $this->settings['admin']))
-            ->when($this->settings['status'] != 'any', fn (Builder $q, $admin) => $q->where('ifOperStatus', $this->settings['status']))
-            ->when($searchPort, fn (Builder $q) => $q->where(function (Builder $q) use ($searchPort): void {
-                $q->where('ifName', 'LIKE', '%' . $searchPort . '%')
-                    ->orWhere('ifDescr', 'LIKE', '%' . $searchPort . '%')
-                    ->orWhere('ifAlias', 'LIKE', '%' . $searchPort . '%');
-            }))
+            ->when($request->array('filter'), fn (Builder $q, $filters) => $q->applyFilters($filters))
             ->when($this->settings['sort'] == 'port', fn (Builder $q, $sort) => $q
                 ->orderByRaw('SOUNDEX(ifName) ' . $this->settings['order'])
                 ->orderByRaw('CHAR_LENGTH(ifName) ' . $this->settings['order'])
@@ -440,37 +434,89 @@ private function parseTab(Request $request): string
         return $request->route('vars', LibrenmsConfig::get('ports_page_default')); // fourth segment is called vars to handle legacy urls
     }
 
-    private function pageLinks(Request $request): array
+    private function migrateFilterSettings(array $saved): array
     {
-        $disabled = $this->settings['disabled'];
-        $ignored = $this->settings['ignored'];
-        $admin = $this->settings['admin'] == 'any';
-        $status = $this->settings['status'] == 'up';
+        $filter = [];
 
+        if (! $saved['disabled']) {  // 0: disabled hidden 1: not filtered
+            $filter['disabled'] = ['eq' => 0];
+        }
+
+        if (! $saved['ignored']) { // 0: ignored hidden 1: not filtered
+            $filter['ignore'] = ['eq' => 0];
+        }
+
+        if ($saved['status'] == 'up') { // up: only status up, any: not filtered
+            $filter['state'] = ['eq' => 'up'];
+        } elseif ($saved['admin'] == 'up') { // up: only != shutdown, any: not filtered
+            $filter['state'] = ['neq' => 'shutdown'];
+        }
+
+        Arr::forget($saved, ['admin', 'status', 'disabled', 'ignored']);
+        UserPref::setPref(request()->user(), 'ports_ui_settings', $saved);
+        UserPref::setPref(request()->user(), 'filters.device.ports', $filter);
+
+        return $saved;
+    }
+
+    private function filterFields(int $device_id): array
+    {
         return [
             [
-                'icon' => $status ? 'fa-regular fa-square-check' : 'fa-regular fa-square',
-                'url' => $request->fullUrlWithQuery(['status' => $status ? $this->defaults['status'] : 'up']),
-                'title' => __('port.filters.status_up'),
-                'external' => false,
+                'key' => 'search',
+                'label' => 'Description',
+                'type' => 'text',
+            ],
+            [
+                'key' => 'state',
+                'label' => 'Oper Status',
+                'type' => 'select',
+                'options' => ['up', 'down', 'shutdown'],
+            ],
+            [
+                'key' => 'ifSpeed',
+                'label' => 'Speed',
+                'type' => 'select',
+                'endpoint' => route('ajax.select.port-field'),
+                'params' => [
+                    'field' => 'ifSpeed',
+                    'device' => $device_id,
+                ],
+            ],
+            [
+                'key' => 'ifType',
+                'label' => 'Media',
+                'type' => 'select',
+                'endpoint' => route('ajax.select.port-field'),
+                'params' => [
+                    'field' => 'ifType',
+                    'device' => $device_id,
+                ],
+            ],
+            [
+                'key' => 'port_type',
+                'label' => 'Port Type',
+                'type' => 'select',
+                'endpoint' => route('ajax.select.port-field'),
+                'params' => [
+                    'field' => 'port_descr_type',
+                    'device' => $device_id,
+                ],
             ],
             [
-                'icon' => $admin ? 'fa-regular fa-square-check' : 'fa-regular fa-square',
-                'url' => $request->fullUrlWithQuery(['admin' => $admin ? $this->defaults['admin'] : 'any']),
-                'title' => __('port.filters.admin_down'),
-                'external' => false,
+                'key' => 'ignore',
+                'label' => 'Ignored',
+                'type' => 'boolean',
             ],
             [
-                'icon' => $disabled ? 'fa-regular fa-square-check' : 'fa-regular fa-square',
-                'url' => $request->fullUrlWithQuery(['disabled' => ! $disabled]),
-                'title' => __('port.filters.disabled'),
-                'external' => false,
+                'key' => 'disabled',
+                'label' => 'Disabled',
+                'type' => 'boolean',
             ],
             [
-                'icon' => $ignored ? 'fa-regular fa-square-check' : 'fa-regular fa-square',
-                'url' => $request->fullUrlWithQuery(['ignored' => ! $ignored]),
-                'title' => __('port.filters.ignored'),
-                'external' => false,
+                'key' => 'deleted',
+                'label' => 'Deleted',
+                'type' => 'boolean',
             ],
         ];
     }