webui: Add button to show verbose alert details in the alert, alert-log webui (#12484)

* Show verbose alert details in the alert, alert-log webui

update file permissions

* Make global admin permission required to use alert details ui

* StyleCI patch

Co-authored-by: root <root@usopsl-libre001.corp.blizzard.net>

includes/html/common/alert-log.inc.php

@@ -37,6 +37,10 @@ $alert_severities = [
     'Warning' => 5,
 ];
 
+if (Auth::user()->hasGlobalAdmin()) {
+    $admin_verbose_details = '<th data-column-id="verbose_details" data-sortable="false">Details</th>';
+}
+
 $common_output[] = '<div class="panel panel-default panel-condensed">
                 <div class="panel-heading">
                     <div class="row">
@@ -83,6 +87,7 @@ $common_output[] = '
             <th data-column-id="hostname">Device</th>
             <th data-column-id="alert">Alert</th>
             <th data-column-id="severity">Severity</th>
+            ' . $admin_verbose_details . '
         </tr>
         </thead>
     </table>
@@ -171,12 +176,24 @@ $common_output[] = '<div class="form-group"> \
             $(target).collapse(\'toggle\');
             $(this).toggleClass(\'fa-plus fa-minus\');
         });
+        grid.find(".command-alert-details").on("click", function(e) {
+            e.preventDefault();
+            var alert_log_id = $(this).data(\'alert_log_id\');
+            $(\'#alert_log_id\').val(alert_log_id);
+            $("#alert_details_modal").modal(\'show\');
+        });
         grid.find(".incident").each(function () {
             $(this).parent().addClass(\'col-lg-4 col-md-4 col-sm-4 col-xs-4\');
             $(this).parent().parent().on("mouseenter", function () {
                 $(this).find(".incident-toggle").fadeIn(200);
+                if ($(this).find(".alert-status").hasClass(\'label-danger\')){
+                    $(this).find(".command-alert-details").fadeIn(200);
+                }
             }).on("mouseleave", function () {
                 $(this).find(".incident-toggle").fadeOut(200);
+                if ($(this).find(".alert-status").hasClass(\'label-danger\')){
+                    $(this).find(".command-alert-details").fadeOut(200);
+                }
             }).on("click", "td:not(.incident-toggle-td)", function () {
                 var target = $(this).parent().find(".incident-toggle").data("target");
                 if ($(this).parent().find(".incident-toggle").hasClass(\'fa-plus\')) {

includes/html/common/alerts.inc.php

@@ -33,6 +33,9 @@ $alert_severities = [
     'warning only' => 5,
     'critical only' => 6,
 ];
+if (Auth::user()->hasGlobalAdmin()) {
+    $admin_verbose_details = '<th data-column-id="verbose_details" data-sortable="false">Details</th>';
+}
 
 //if( defined('SHOW_SETTINGS') || empty($widget_settings) ) {
 if (defined('SHOW_SETTINGS')) {
@@ -232,7 +235,8 @@ if (defined('SHOW_SETTINGS')) {
                 <th data-column-id="hostname">Hostname</th>
                 <th data-column-id="location">Location</th>
                 <th data-column-id="ack_ico" data-sortable="false">ACK</th>
-                <th data-column-id="notes" data-sortable="false">Notes</th>';
+                <th data-column-id="notes" data-sortable="false">Notes</th>
+                ' . $admin_verbose_details . '';
 
     if ($proc == '1') {
         $common_output[] = '<th data-column-id="proc" data-sortable="false">URL</th>';
@@ -315,6 +319,12 @@ var alerts_grid = $("#alerts_' . $unique_id . '").bootgrid({
         $(\'#alert_id\').val(alert_id);
         $("#alert_notes_modal").modal(\'show\');
     });
+    alerts_grid.find(".command-alert-details").on("click", function(e) {
+      e.preventDefault();
+      var alert_log_id = $(this).data(\'alert_log_id\');
+      $(\'#alert_log_id\').val(alert_log_id);
+      $("#alert_details_modal").modal(\'show\');
+    });
 });
 </script>';
 }

includes/html/forms/alert-details.inc.php

@@ -0,0 +1,40 @@
+<?php
+
+header('Content-type: application/json');
+
+$alert_log_id = $vars['alert_log_id'];
+$sub_type = $vars['sub_type'];
+$status = 'error';
+$details = 'No Details found';
+$message = 'No Details found';
+
+if (! Auth::user()->hasGlobalAdmin()) {
+    $message = 'Wrong permissions';
+    $details = 'You need to have admin permissions.';
+    exit(json_encode([
+        'status'  => $status,
+        'message' => $message,
+        'details' => $details,
+    ]));
+}
+
+if (is_numeric($alert_log_id)) {
+    foreach (dbFetchRows('SELECT device_id, id, time_logged, details as detail FROM alert_log WHERE state != 2 && state != 0  && id =  ?', [$alert_log_id])  as $alertlog) {
+        $details = json_decode(gzuncompress($alertlog['detail']), true)['rule'];
+        if (! empty($details)) {
+            $message = 'Found alert details';
+            $status = 'ok';
+        } else {
+            $details = 'No Details found';
+        }
+    }
+} else {
+    $message = 'Invalid alert id';
+    $details = 'Invalid alert id';
+}
+
+exit(json_encode([
+    'status'  => $status,
+    'message' => $message,
+    'details' => $details,
+]));

includes/html/modal/alert_details.php

@@ -0,0 +1,40 @@
+<form>
+    <?php echo csrf_field() ?>
+    <div class="modal fade" id="alert_details_modal" tabindex="-1" role="dialog" aria-labelledby="alert_details" aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <h5 class="modal-title" id="alert_details">Alert details</h5>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class='col-sm-12'>
+                            <div class="form-group">
+                                <textarea class="form-control" id="details" name="details" rows="20"></textarea>
+                                  <input type="hidden" id="alert_log_id" name="alert_log_id" value="">
+                            </div>
+                        </div>
+                    </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>
+
+<script>
+    $('#alert_details_modal').on('show.bs.modal', function (event) {
+        var alert_log_id = $("#alert_log_id").val();
+        $.ajax({
+            type: "POST",
+            url: "ajax_form.php",
+            data: { type: "alert-details", 'alert_log_id': alert_log_id, sub_type: 'get_details'},
+            dataType: "json",
+            success: function (data) {
+                $("#details").val(JSON.stringify(data.details,null, 2));
+            }
+        });
+    });
+</script>

includes/html/pages/alert-log.inc.php

@@ -16,6 +16,7 @@
 $no_refresh = true;
 $device_id = '';
 $vars['fromdevice'] = false;
+require_once 'includes/html/modal/alert_details.php';
 require_once 'includes/html/common/alert-log.inc.php';
 echo implode('', $common_output);
 unset($device_id);

includes/html/pages/alerts.inc.php

@@ -24,6 +24,7 @@ $page_title = 'Alerts';
 
     <?php
     $device['device_id'] = '-1';
+    require_once 'includes/html/modal/alert_details.php';
     require_once 'includes/html/modal/alert_notes.inc.php';
     require_once 'includes/html/modal/alert_ack.inc.php';
     require_once 'includes/html/common/alerts.inc.php';

includes/html/pages/device/alerts.inc.php

@@ -47,6 +47,7 @@ echo '<div style="width:99%;margin:0 auto;">';
 
 switch ($vars['section']) {
     case 'alerts':
+        include 'includes/html/modal/alert_details.php';
         include 'includes/html/modal/alert_notes.inc.php';
         include 'includes/html/modal/alert_ack.inc.php';
         include 'includes/html/common/alerts.inc.php';
@@ -55,6 +56,7 @@ switch ($vars['section']) {
     case 'alert-log':
         $vars['fromdevice'] = true;
         $device_id = (int) $vars['device'];
+        include 'includes/html/modal/alert_details.php';
         include 'includes/html/common/alert-log.inc.php';
         echo implode('', $common_output);
         break;

includes/html/table/alertlog.inc.php

@@ -84,7 +84,9 @@ foreach (dbFetchRows($sql, $param) as $alertlog) {
     $dev = device_by_id_cache($alertlog['device_id']);
     logfile($alertlog['rule_id']);
     $log = dbFetchCell('SELECT details FROM alert_log WHERE rule_id = ? AND device_id = ? AND `state` = 1 ORDER BY id DESC LIMIT 1', [$alertlog['rule_id'], $alertlog['device_id']]);
+    $alert_log_id = dbFetchCell('SELECT id FROM alert_log WHERE rule_id = ? AND device_id = ? ORDER BY id DESC LIMIT 1', [$alertlog['rule_id'], $alertlog['device_id']]);
     $fault_detail = alert_details($log);
+
     if (empty($fault_detail)) {
         $fault_detail = 'Rule created, no faults found';
     }
@@ -105,6 +107,7 @@ foreach (dbFetchRows($sql, $param) as $alertlog) {
         'id' => $rulei++,
         'time_logged' => $alertlog['humandate'],
         'details' => '<a class="fa fa-plus incident-toggle" style="display:none" data-toggle="collapse" data-target="#incident' . ($rulei) . '" data-parent="#alerts"></a>',
+        'verbose_details' => "<button type='button' class='btn btn-alert-details fa fa-info command-alert-details' style='display:none' aria-label='Details' id='alert-details' data-alert_log_id='{$alert_log_id}'></button>",
         'hostname' => '<div class="incident">' . generate_device_link($dev, shorthost($dev['hostname'])) . '<div id="incident' . ($rulei) . '" class="collapse">' . $fault_detail . '</div></div>',
         'alert' => htmlspecialchars($alertlog['alert']),
         'status' => "<i class='alert-status " . $status . "' title='" . ($alert_state ? 'active' : 'recovered') . "'></i>",

includes/html/table/alerts.inc.php

@@ -109,6 +109,7 @@ $rulei = 0;
 $format = $vars['format'];
 foreach (dbFetchRows($sql, $param) as $alert) {
     $log = dbFetchCell('SELECT details FROM alert_log WHERE rule_id = ? AND device_id = ? ORDER BY id DESC LIMIT 1', [$alert['rule_id'], $alert['device_id']]);
+    $alert_log_id = dbFetchCell('SELECT id FROM alert_log WHERE rule_id = ? AND device_id = ? ORDER BY id DESC LIMIT 1', [$alert['rule_id'], $alert['device_id']]);
     $fault_detail = alert_details($log);
     $info = json_decode($alert['info'], true);
 
@@ -170,6 +171,7 @@ foreach (dbFetchRows($sql, $param) as $alert) {
         'id' => $rulei++,
         'rule' => '<i title="' . htmlentities($alert['rule']) . '"><a href="' . generate_url(['page' => 'alert-rules']) . '">' . htmlentities($alert['name']) . '</a></i>',
         'details' => '<a class="fa fa-plus incident-toggle" style="display:none" data-toggle="collapse" data-target="#incident' . ($alert['id']) . '" data-parent="#alerts"></a>',
+        'verbose_details' => "<button type='button' class='btn btn-alert-details fa fa-info command-alert-details' aria-label='Details' id='alert-details' data-alert_log_id='{$alert_log_id}'></button>",
         'hostname' => $hostname,
         'location' => generate_link($alert['location'], ['page' => 'devices', 'location' => $alert['location']]),
         'timestamp' => ($alert['timestamp'] ? $alert['timestamp'] : 'N/A'),