Replace legacy ossuggest Ajax call with select2 (librenms#18451)

* Replace OS suggest
Use select2 instead of typeahead

* Include prefix matching for better results

* Style

* Apply fixes from StyleCI

---------

Co-authored-by: StyleCI Bot <[email protected]>

Author: murrant

app/Http/Controllers/Select/OsController.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Http\Controllers\Select;
+
+use App\Facades\LibrenmsConfig;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class OsController
+{
+    public function __invoke(Request $request): JsonResponse
+    {
+        $request->validate([
+            'limit' => 'int',
+            'page' => 'int',
+            'term' => 'nullable|string',
+        ]);
+
+        $results = array_map(
+            fn ($os) => ['id' => $os['os'], 'text' => $os['text']],
+            LibrenmsConfig::get('os', [])
+        );
+
+        if ($term = $request->string('term')->trim()->value()) {
+            $results = $this->sortAndFilterBySimilarity($term, $results);
+        }
+
+        return response()->json([
+            'results' => array_values($results),
+            'pagination' => ['more' => false],
+        ]);
+    }
+
+    private function sortAndFilterBySimilarity(string $term, array $items): array
+    {
+        $term = strtolower($term);
+
+        $scored = array_map(function ($item) use ($term) {
+            $id = strtolower($item['id']);
+            $text = strtolower($item['text']);
+
+            return [
+                'item' => $item,
+                'hasPrefix' => str_starts_with($id, $term) || str_starts_with($text, $term),
+                'distance' => min(
+                    levenshtein($term, $id, 1, 10, 10),
+                    levenshtein($term, $text, 1, 10, 10)
+                ),
+            ];
+        }, $items);
+
+        usort($scored, fn ($a, $b) => ($b['hasPrefix'] <=> $a['hasPrefix'])
+            ?: ($a['distance'] <=> $b['distance']));
+
+        return array_column($scored, 'item');
+    }
+}

html/ajax_ossuggest.php

@@ -42,7 +42,7 @@
             $additional = [];
             if (! $snmp_enabled) {
                 $new_device->snmp_disable = 1;
-                $new_device->os = $_POST['os'] ? strip_tags($_POST['os_id']) : 'ping';
+                $new_device->os = $_POST['os'] ? strip_tags($_POST['os']) : 'ping';
                 $new_device->hardware = strip_tags($_POST['hardware']);
                 $new_device->sysName = strip_tags($_POST['sysName']);
             } elseif ($_POST['snmpver'] === 'v2c' || $_POST['snmpver'] === 'v1') {
@@ -137,8 +137,7 @@
         <div class='form-group'>
             <label for='os' class='col-sm-3 control-label'>OS (optional)</label>
             <div class='col-sm-9'>
-                <input id='os' class='form-control' name='os' placeholder="OS (optional)"/>
-                <input type='hidden' id='os_id' class='form-control' name='os_id' />
+                <select id='os' class='form-control' name='os' placeholder="OS (optional)"></select>
             </div>
         </div>
     </div>
@@ -329,46 +328,7 @@ function disableSnmp(e) {
         }
     }
 
-    var os_suggestions = new Bloodhound({
-        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
-        queryTokenizer: Bloodhound.tokenizers.whitespace,
-        remote: {
-            url: "ajax_ossuggest.php?term=%QUERY",
-            filter: function (output) {
-                return $.map(output, function (item) {
-                    return {
-                        text: item.text,
-                        os: item.os,
-                    };
-                });
-            },
-            wildcard: "%QUERY"
-        }
-    });
-    os_suggestions.initialize();
-    $('#os').typeahead({
-            hint: true,
-            highlight: true,
-            minLength: 1,
-            classNames: {
-                menu: 'typeahead-left'
-            }
-        },
-        {
-            source: os_suggestions.ttAdapter(),
-            async: true,
-            displayKey: 'text',
-            valueKey: 'os',
-            templates: {
-                suggestion: Handlebars.compile('<p>&nbsp;{{text}}</p>')
-            },
-            limit: 20
-        });
-
-    $("#os").on("typeahead:selected typeahead:autocompleted", function(e,datum) {
-        $("#os_id").val(datum.os);
-        $("#os").html('<mark>' + datum.text + '</mark>');
-    });
+    init_select2('#os', 'os', {}, null, 'OS (optional)');
 
     $("[name='snmp']").bootstrapSwitch('offColor','danger');
     $("[name='force_add']").bootstrapSwitch();

includes/html/pages/addhost.inc.php

@@ -39,7 +39,7 @@
             $device->features = null;
             $device->hardware = $_POST['hardware'];
             $device->icon = null;
-            $device->os = $_POST['os'] ? strip_tags($_POST['os_id']) : 'ping';
+            $device->os = $_POST['os'] ? strip_tags($_POST['os']) : 'ping';
             $device->snmp_disable = 1;
             $device->sysName = $_POST['sysName'] ?: null;
             $device->version = null;
@@ -209,8 +209,7 @@
     <div class='form-group'>
     <label for='os' class='col-sm-2 control-label'>OS (optional)</label>
     <div class='col-sm-4'>
-    <input id='os' class='form-control' name='os' value='" . htmlspecialchars(LibrenmsConfig::get("os.{$device->os}.text")) . "'/>
-    <input type='hidden' id='os_id' class='form-control' name='os_id' value='" . htmlspecialchars($device->os) . "'/>
+    <select id='os' class='form-control' name='os'></select>
     </div>
     </div>
     </div>
@@ -427,46 +426,8 @@ function disableSnmp(e) {
     }
 }
 
-var os_suggestions = new Bloodhound({
-    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
-    queryTokenizer: Bloodhound.tokenizers.whitespace,
-    remote: {
-        url: "ajax_ossuggest.php?term=%QUERY",
-        filter: function (output) {
-            return $.map(output, function (item) {
-                return {
-                    text: item.text,
-                    os: item.os,
-                };
-            });
-        },
-        wildcard: "%QUERY"
-    }
-});
-os_suggestions.initialize();
-$('#os').typeahead({
-        hint: true,
-        highlight: true,
-        minLength: 1,
-        classNames: {
-            menu: 'typeahead-left'
-        }
-    },
-    {
-        source: os_suggestions.ttAdapter(),
-        async: true,
-        displayKey: 'text',
-        valueKey: 'os',
-        templates: {
-            suggestion: Handlebars.compile('<p>&nbsp;{{text}}</p>')
-        },
-        limit: 20
-    });
-
-$("#os").on("typeahead:selected typeahead:autocompleted", function(e,datum) {
-    $("#os_id").val(datum.os);
-    $("#os").html('<mark>' + datum.text + '</mark>');
-});
+var current_os = <?php echo json_encode(['id' => $device->os, 'text' => LibrenmsConfig::get("os.{$device->os}.text")], JSON_HEX_QUOT|JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS) ?>;
+init_select2('#os', 'os', {}, current_os, 'OS (optional)');
 
 $("[name='snmp']").bootstrapSwitch('offColor','danger');
 

includes/html/pages/device/edit/snmp.inc.php

@@ -273,6 +273,7 @@
             Route::get('syslog', Select\SyslogController::class)->name('ajax.select.syslog');
             Route::get('location', Select\LocationController::class)->name('ajax.select.location');
             Route::get('munin', Select\MuninPluginController::class)->name('ajax.select.munin');
+            Route::get('os', Select\OsController::class)->name('ajax.select.os');
             Route::get('role', Select\RoleController::class)->name('ajax.select.role');
             Route::get('service', Select\ServiceController::class)->name('ajax.select.service');
             Route::get('customoid', Select\CustomoidController::class)->name('ajax.select.customoid');