From 5e02557e00a3fab70d997078e553fc99f56b90d2 Mon Sep 17 00:00:00 2001
From: Derek Kaser <11674153+dkaser@users.noreply.github.com>
Date: Mon, 4 Nov 2024 22:23:49 -0500
Subject: [PATCH] feat: add filter and ping to status page (#20)

---
 .../tailscale/include/Pages/Status.php        | 77 ++++++++++--------
 .../plugins/tailscale/include/data/Status.php | 79 +++++++++++++++++++
 .../plugins/tailscale/locales/en_US.json      |  3 +-
 3 files changed, 127 insertions(+), 32 deletions(-)
 create mode 100644 src/usr/local/emhttp/plugins/tailscale/include/data/Status.php

diff --git a/src/usr/local/emhttp/plugins/tailscale/include/Pages/Status.php b/src/usr/local/emhttp/plugins/tailscale/include/Pages/Status.php
index 1845acc..efc1a22 100644
--- a/src/usr/local/emhttp/plugins/tailscale/include/Pages/Status.php
+++ b/src/usr/local/emhttp/plugins/tailscale/include/Pages/Status.php
@@ -9,37 +9,52 @@
     echo($tr->tr("tailscale_disabled"));
     return;
 }
-
-$tailscaleInfo = $tailscaleInfo ?? new Info($tr);
 ?>
 
-<table id="t1" class="unraid t1">
-    <thead>
-        <tr>
-            <td><?= $tr->tr('info.dns'); ?></td>
-            <td><?= $tr->tr('info.ip'); ?></td>
-            <td><?= $tr->tr('status_page.login_name'); ?></td>
-            <td><?= $tr->tr('status'); ?></td>
-            <td><?= $tr->tr('status_page.exit_node'); ?></td>
-            <td><?= $tr->tr('status_page.connection_type'); ?></td>
-            <td><?= $tr->tr('status_page.connection_addr'); ?></td>
-            <td><?= $tr->tr('status_page.tx_bytes'); ?></td>
-            <td><?= $tr->tr('status_page.rx_bytes'); ?></td>
-        </tr>
-    </thead>
-    <tbody>
-        <?php foreach ($tailscaleInfo->getPeerStatus() as $peer) { ?>
-            <tr>
-                <td><?= $peer->SharedUser ? $tr->tr('status_page.shared') : $peer->Name; ?></td>
-                <td><?= $peer->IP; ?></td>
-                <td><?= $peer->LoginName; ?></td>
-                <td><?= $peer->Online ? ($peer->Active ? $tr->tr('status_page.active') : $tr->tr('status_page.idle')) : $tr->tr('status_page.offline'); ?></td>
-                <td><?= $peer->ExitNodeActive ? $tr->tr('status_page.exit_active') : ($peer->ExitNodeAvailable ? $tr->tr('status_page.exit_available') : ""); ?></td>
-                <td><?= $peer->Active ? ($peer->Relayed ? $tr->tr('status_page.relay') : $tr->tr('status_page.direct')) : ""; ?></td>
-                <td><?= $peer->Active ? $peer->Address : ""; ?></td>
-                <td><?= $peer->Traffic ? $peer->TxBytes : ""; ?></td>
-                <td><?= $peer->Traffic ? $peer->RxBytes : ""; ?></td>
-            </tr>
-        <?php } ?>
-    </tbody>
+<script src="/webGui/javascript/jquery.tablesorter.widgets.js"></script>
+
+<script>
+
+function controlsDisabled(val) {
+    $('#refresh').prop('disabled', val);
+    $('input.ping').prop('disabled', val);
+}
+function showStatus() {
+  controlsDisabled(true);
+  $.post('/plugins/tailscale/include/data/Status.php',{action: 'get'},function(data){
+    clearTimeout(timers.refresh);
+    $("#t1").trigger("destroy");
+    $('#t1').html(data.html);
+    $('#t1').tablesorter({
+      sortList: [[0,0]],
+      sortAppend: [[0,0]],
+      widgets: ['stickyHeaders','filter','zebra'],
+      widgetOptions: {
+        // on black and white, offset is height of #menu
+        // on azure and gray, offset is height of #header
+        stickyHeaders_offset: ($('#menu').height() < 50) ? $('#menu').height() : $('#header').height(),
+        filter_columnFilters: false,
+        zebra: ["normal-row","alt-row"]
+      }
+    });
+    $('div.spinner.fixed').hide('fast');
+    controlsDisabled(false);
+  },"json");
+}
+async function pingHost(host) {
+    $('div.spinner.fixed').show('fast');
+    controlsDisabled(true);
+    var res = await $.post('/plugins/tailscale/include/data/Status.php',{action: 'ping', host: host});
+    $("#pingout").html("<strong>Ping response:</strong><br>" + res);
+    showStatus();
+}
+showStatus();
+</script>
+
+<table id='t1' class="unraid t1 tablesorter"><tr><td><div class="spinner"></div></td></tr></table><br>
+<table>
+    <tr>
+        <td style="vertical-align: top"><input type="button" id="refresh" value="Refresh" onclick="showStatus()"></td>
+        <td><div id="pingout" style="float: right;"></div></td>
+    </tr>
 </table>
\ No newline at end of file
diff --git a/src/usr/local/emhttp/plugins/tailscale/include/data/Status.php b/src/usr/local/emhttp/plugins/tailscale/include/data/Status.php
new file mode 100644
index 0000000..9f04cf4
--- /dev/null
+++ b/src/usr/local/emhttp/plugins/tailscale/include/data/Status.php
@@ -0,0 +1,79 @@
+<?php
+
+namespace Tailscale;
+
+require_once "/usr/local/emhttp/plugins/tailscale/include/common.php";
+
+$tailscaleConfig = $tailscaleConfig ?? new Config();
+$tr              = $tr              ?? new Translator();
+
+switch ($_POST['action']) {
+    case 'get':
+        if ( ! $tailscaleConfig->Enable) {
+            echo("{}");
+            return;
+        }
+
+        $tailscaleInfo = $tailscaleInfo ?? new Info($tr);
+        $rows          = "";
+
+        foreach ($tailscaleInfo->getPeerStatus() as $peer) {
+            $user       = $peer->SharedUser ? $tr->tr('status_page.shared') : $peer->Name;
+            $online     = $peer->Online ? ($peer->Active ? $tr->tr('status_page.active') : $tr->tr('status_page.idle')) : $tr->tr('status_page.offline');
+            $exitNode   = $peer->ExitNodeActive ? $tr->tr('status_page.exit_active') : ($peer->ExitNodeAvailable ? $tr->tr('status_page.exit_available') : "");
+            $connection = $peer->Active ? ($peer->Relayed ? $tr->tr('status_page.relay') : $tr->tr('status_page.direct')) : "";
+            $active     = $peer->Active ? $peer->Address : "";
+            $txBytes    = $peer->Traffic ? $peer->TxBytes : "";
+            $rxBytes    = $peer->Traffic ? $peer->RxBytes : "";
+            $pingHost   = ($peer->SharedUser || $peer->Active || ! $peer->Online) ? "" : "<input type='button' class='ping' value='Ping' onclick='pingHost(\"{$peer->Name}\")'>";
+
+            $rows .= <<<EOT
+                <tr>
+                    <td>{$user}</td>
+                    <td>{$peer->IP}</td>
+                    <td>{$peer->LoginName}</td>
+                    <td>{$online}</td>
+                    <td>{$exitNode}</td>
+                    <td>{$connection}</td>
+                    <td>{$active}</td>
+                    <td>{$txBytes}</td>
+                    <td>{$rxBytes}</td>
+                    <td>{$pingHost}</td>
+                </tr>
+                EOT;
+        }
+
+        $output = <<<EOT
+            <table id="t1" class="unraid t1">
+                <thead>
+                    <tr>
+                        <td>{$tr->tr('info.dns')}</td>
+                        <td>{$tr->tr('info.ip')}</td>
+                        <td>{$tr->tr('status_page.login_name')}</td>
+                        <td>{$tr->tr('status')}</td>
+                        <td>{$tr->tr('status_page.exit_node')}</td>
+                        <td>{$tr->tr('status_page.connection_type')}</td>
+                        <td>{$tr->tr('status_page.connection_addr')}</td>
+                        <td>{$tr->tr('status_page.tx_bytes')}</td>
+                        <td>{$tr->tr('status_page.rx_bytes')}</td>
+                        <td>{$tr->tr('status_page.action')}</td>
+                    </tr>
+                </thead>
+                <tbody>
+                    {$rows}
+                </tbody>
+            </table>
+            EOT;
+
+        $rtn         = array();
+        $rtn['html'] = $output;
+        echo json_encode($rtn);
+        break;
+    case 'ping':
+        $pingHost = escapeshellarg($_POST['host']);
+
+        $out = Utils::run_command("tailscale ping --c 3 {$pingHost}");
+        echo implode("<br>", $out);
+
+        break;
+}
diff --git a/src/usr/local/emhttp/plugins/tailscale/locales/en_US.json b/src/usr/local/emhttp/plugins/tailscale/locales/en_US.json
index 785df9b..0a00d55 100644
--- a/src/usr/local/emhttp/plugins/tailscale/locales/en_US.json
+++ b/src/usr/local/emhttp/plugins/tailscale/locales/en_US.json
@@ -120,6 +120,7 @@
         "offline": "Offline",
         "active": "Active",
         "login_name": "Login Name",
-        "shared": "Shared-In User"
+        "shared": "Shared-In User",
+        "action": "Action"
     }
 }
\ No newline at end of file