ui: add sheet to ping devices and see relay status

This PR adds the ability to ping other devices in your tailnet from the Android app, similarly to the current functionality on iOS. The ping view displays the current latency value, a chart with latency over time, and whether you are using a direct/relayed connection. Signed-off-by: Andrea Gottardo <andrea@gottardo.me>
tailscale · Jun 25, 2024 · 0324dbc · 0324dbc
1 parent 811641f
commit 0324dbc
Show file tree

Hide file tree

Showing 13 changed files with 508 additions and 5 deletions.
diff --git a/android/build.gradle b/android/build.gradle
@@ -120,6 +120,8 @@ dependencies {
     // Supporting libraries.
     implementation("io.coil-kt:coil-compose:2.6.0")
     implementation("com.google.zxing:core:3.5.1")
+    implementation("com.patrykandpatrick.vico:compose:1.15.0")
+    implementation("com.patrykandpatrick.vico:compose-m3:1.15.0")
 
     // Tailscale dependencies.
     implementation ':libtailscale@aar'

diff --git a/android/src/main/java/com/tailscale/ipn/ui/localapi/Client.kt b/android/src/main/java/com/tailscale/ipn/ui/localapi/Client.kt
@@ -11,6 +11,7 @@ import com.tailscale.ipn.ui.model.Ipn
 import com.tailscale.ipn.ui.model.IpnLocal
 import com.tailscale.ipn.ui.model.IpnState
 import com.tailscale.ipn.ui.model.StableNodeID
+import com.tailscale.ipn.ui.model.Tailcfg
 import com.tailscale.ipn.ui.util.InputStreamAdapter
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
@@ -57,6 +58,8 @@ typealias BugReportIdHandler = (Result<BugReportID>) -> Unit
 
 typealias PrefsHandler = (Result<Ipn.Prefs>) -> Unit
 
+typealias PingResultHandler = (Result<IpnState.PingResult>) -> Unit
+
 /**
  * Client provides a mechanism for calling Go's LocalAPIClient. Every LocalAPI endpoint has a
  * corresponding method on this Client.
@@ -73,6 +76,17 @@ class Client(private val scope: CoroutineScope) {
     get(Endpoint.STATUS, responseHandler = responseHandler)
   }
 
+  fun ping(peer: Tailcfg.Node, responseHandler: PingResultHandler) {
+    val ip = peer.primaryIPv4Address.orEmpty()
+    if (ip.isEmpty()) {
+      responseHandler(Result.failure(Exception("No IP address for peer $peer")))
+      return
+    }
+
+    val path = "${Endpoint.PING}?ip=${ip}&type=disco"
+    post(path, timeoutMillis = 2000L, responseHandler = responseHandler)
+  }
+
   fun bugReportId(responseHandler: BugReportIdHandler) {
     post(Endpoint.BUG_REPORT, responseHandler = responseHandler)
   }
@@ -206,13 +220,15 @@ class Client(private val scope: CoroutineScope) {
   private inline fun <reified T> post(
       path: String,
       body: ByteArray? = null,
+      timeoutMillis: Long = 30000,
       noinline responseHandler: (Result<T>) -> Unit
   ) {
     Request(
             scope = scope,
             method = "POST",
             path = path,
             body = body,
+            timeoutMillis = timeoutMillis,
             responseType = typeOf<T>(),
             responseHandler = responseHandler)
         .execute()

diff --git a/android/src/main/java/com/tailscale/ipn/ui/model/IpnState.kt b/android/src/main/java/com/tailscale/ipn/ui/model/IpnState.kt
@@ -23,6 +23,8 @@ class IpnState {
       val Tags: List<String>? = null,
       val PrimaryRoutes: List<String>? = null,
       val Addrs: List<String>? = null,
+      val CurAddr: String? = null,
+      val Relay: String? = null,
       val Online: Boolean,
       val ExitNode: Boolean,
       val ExitNodeOption: Boolean,

diff --git a/android/src/main/java/com/tailscale/ipn/ui/theme/Theme.kt b/android/src/main/java/com/tailscale/ipn/ui/theme/Theme.kt
@@ -168,8 +168,8 @@ val ColorScheme.customError: Color
       }
 
 val ColorScheme.customErrorContainer: Color
-    @Composable
-    get() = 
+  @Composable
+  get() =
       if (isSystemInDarkTheme()) {
         Color(0xFF760012) // red-700
       } else {
@@ -334,7 +334,7 @@ val ColorScheme.errorButton: ButtonColors
     val defaults = ButtonDefaults.buttonColors()
     if (isSystemInDarkTheme()) {
       return ButtonColors(
-          containerColor = Color(0xFFB22D30), // red-500  
+          containerColor = Color(0xFFB22D30), // red-500
           contentColor = Color(0xFFFFFFFF), // white
           disabledContainerColor = defaults.disabledContainerColor,
           disabledContentColor = defaults.disabledContentColor)

diff --git a/android/src/main/java/com/tailscale/ipn/ui/util/ConnectionMode.kt b/android/src/main/java/com/tailscale/ipn/ui/util/ConnectionMode.kt
@@ -0,0 +1,53 @@
+// Copyright (c) Tailscale Inc & AUTHORS
+// SPDX-License-Identifier: BSD-3-Clause
+
+package com.tailscale.ipn.ui.util
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import com.tailscale.ipn.R
+import com.tailscale.ipn.ui.theme.on
+
+sealed class ConnectionMode {
+    class NotConnected : ConnectionMode()
+
+    class Derp(val relayName: String) : ConnectionMode()
+
+    class Direct : ConnectionMode()
+
+    @Composable
+    fun titleString(): String {
+        return when (this) {
+            is NotConnected -> stringResource(id = R.string.not_connected)
+            is Derp -> stringResource(R.string.relayed_connection, relayName)
+            is Direct -> stringResource(R.string.direct_connection)
+        }
+    }
+
+    fun contentKey(): String {
+        return when (this) {
+            is NotConnected -> "NotConnected"
+            is Derp -> "Derp($relayName)"
+            is Direct -> "Direct"
+        }
+    }
+
+    fun iconDrawable(): Int {
+        return when (this) {
+            is NotConnected -> R.drawable.xmark_circle
+            is Derp -> R.drawable.link_off
+            is Direct -> R.drawable.link
+        }
+    }
+
+    @Composable
+    fun color(): Color {
+        return when (this) {
+            is NotConnected -> MaterialTheme.colorScheme.onPrimary
+            is Derp -> MaterialTheme.colorScheme.error
+            is Direct -> MaterialTheme.colorScheme.on
+        }
+    }
+}
diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/MainView.kt b/android/src/main/java/com/tailscale/ipn/ui/view/MainView.kt
@@ -6,6 +6,7 @@ package com.tailscale.ipn.ui.view
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.focusable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -31,12 +32,15 @@ import androidx.compose.material.icons.outlined.Lock
 import androidx.compose.material.icons.outlined.Search
 import androidx.compose.material.icons.outlined.Settings
 import androidx.compose.material3.Button
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.ListItemDefaults
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -54,6 +58,7 @@ import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -93,6 +98,7 @@ import com.tailscale.ipn.ui.util.Lists
 import com.tailscale.ipn.ui.util.LoadingIndicator
 import com.tailscale.ipn.ui.util.PeerSet
 import com.tailscale.ipn.ui.util.itemsWithDividers
+import com.tailscale.ipn.ui.util.set
 import com.tailscale.ipn.ui.viewModel.IpnViewModel.NodeState
 import com.tailscale.ipn.ui.viewModel.MainViewModel
 
@@ -103,13 +109,15 @@ data class MainViewNavigation(
     val onNavigateToExitNodes: () -> Unit
 )
 
-@OptIn(ExperimentalPermissionsApi::class)
+@OptIn(ExperimentalPermissionsApi::class, ExperimentalMaterial3Api::class)
 @Composable
 fun MainView(
     loginAtUrl: (String) -> Unit,
     navigation: MainViewNavigation,
     viewModel: MainViewModel
 ) {
+  val currentPingDevice by viewModel.pingViewModel.peer.collectAsState()
+
   LoadingIndicator.Wrap {
     Scaffold(contentWindowInsets = WindowInsets.Companion.statusBars) { paddingInsets ->
       Column(
@@ -215,6 +223,10 @@ fun MainView(
               }
             }
           }
+
+      currentPingDevice?.let { peer ->
+        ModalBottomSheet(onDismissRequest = { viewModel.onPingDismissal() }) { PingView(model = viewModel.pingViewModel) }
+      }
     }
   }
 }
@@ -505,6 +517,9 @@ fun PeerList(
 
   var isListFocussed by remember { mutableStateOf(false) }
 
+  val expandedPeer = viewModel.expandedMenuPeer.collectAsState()
+  val localClipboardManager = LocalClipboardManager.current
+
   val enableSearch = !isAndroidTV()
 
   if (enableSearch) {
@@ -584,7 +599,10 @@ fun PeerList(
 
           itemsWithDividers(peerSet.peers, key = { it.StableID }) { peer ->
             ListItem(
-                modifier = Modifier.clickable { onNavigateToPeerDetails(peer) },
+                modifier =
+                    Modifier.combinedClickable(
+                        onClick = { onNavigateToPeerDetails(peer) },
+                        onLongClick = { viewModel.expandedMenuPeer.set(peer) }),
                 colors = MaterialTheme.colorScheme.listItem,
                 headlineContent = {
                   Row(verticalAlignment = Alignment.CenterVertically) {
@@ -597,6 +615,38 @@ fun PeerList(
                                     shape = RoundedCornerShape(percent = 50))) {}
                     Spacer(modifier = Modifier.size(8.dp))
                     Text(text = peer.displayName, style = MaterialTheme.typography.titleMedium)
+                    DropdownMenu(
+                        expanded = expandedPeer.value?.StableID == peer.StableID,
+                        onDismissRequest = { viewModel.hidePeerDropdownMenu() }) {
+                          DropdownMenuItem(
+                              leadingIcon = {
+                                Icon(
+                                    painter = painterResource(R.drawable.clipboard),
+                                    contentDescription = null)
+                              },
+                              text = { Text(text = stringResource(R.string.copy_ip_address)) },
+                              onClick = {
+                                viewModel.copyIpAddress(peer, localClipboardManager)
+                                viewModel.hidePeerDropdownMenu()
+                              })
+
+                          netmap.value?.let { netMap ->
+                            if (!peer.isSelfNode(netMap)) {
+                              // Don't show the ping item for the self-node
+                              DropdownMenuItem(
+                                  leadingIcon = {
+                                    Icon(
+                                        painter = painterResource(R.drawable.timer),
+                                        contentDescription = null)
+                                  },
+                                  text = { Text(text = stringResource(R.string.ping)) },
+                                  onClick = {
+                                    viewModel.hidePeerDropdownMenu()
+                                    viewModel.startPing(peer)
+                                  })
+                            }
+                          }
+                        }
                   }
                 },
                 supportingContent = {