From 1b7d289fadc79b140e23271973528ae89e9262ab Mon Sep 17 00:00:00 2001
From: Will Norris <will@tailscale.com>
Date: Tue, 12 Dec 2023 09:54:21 -0800
Subject: [PATCH] client/web: add debug card to details page

Add a new "Debug" card at the bottom of the details page. It's maybe
premature to add a separate card for this, since all it currently lists
is whether the device is using TUN mode and (for Synology) the DSM
version. But I think it may be helpful to add client connectivity data
(like shown on admin console machine page) as well as a bug report
button.  Those can come soon after the 1.56 launch.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>
---
 .../components/views/device-details-view.tsx    | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/client/web/src/components/views/device-details-view.tsx b/client/web/src/components/views/device-details-view.tsx
index 06e6d7ed8..9cc6e9e16 100644
--- a/client/web/src/components/views/device-details-view.tsx
+++ b/client/web/src/components/views/device-details-view.tsx
@@ -151,6 +151,23 @@ export default function DeviceDetailsView({
             </tbody>
           </table>
         </Card>
+        <Card noPadding className="-mx-5 p-5 details-card">
+          <h2 className="mb-2">Debug</h2>
+          <table>
+            <tbody>
+              <tr>
+                <td>TUN Mode</td>
+                <td>{node.TUNMode ? "Yes" : "No"}</td>
+              </tr>
+              {node.IsSynology && (
+                <tr>
+                  <td>Synology Version</td>
+                  <td>{node.DSMVersion}</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </Card>
         <footer className="text-gray-500 text-sm leading-tight text-center">
           <Control.AdminContainer node={node}>
             Want even more details? Visit{" "}