From b420b2485ef95db00e874f857263c10bf70801f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20Wilczy=C5=84ski?= <twilczynski@naver.com>
Date: Sun, 11 Sep 2022 18:54:39 +0200
Subject: [PATCH] gui: Mark devices that haven't connected for a long time
 (fixes #7703)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently, a disconnected device is marked as just "Disconnected"
without any consideration whether it has been in the state for just a
short period of time or rather much longer.

This commit adds a new state called "Disconnected (Stale)" which is
shown for devices that have been disconnected for longer than a month.
It also changes the "Last seen" information, so that "Never" is used
only when the device hasn't connected at all, and it displays the exact
date otherwise. Additionally, when the date is older than 1 month, it
shows that information below in orange, and when it is older than a
year, it shows it in red. This provides the user with a visual clue that
something may potentially be wrong and needs their intervention.

Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
---
 gui/default/index.html                         | 18 ++++++++++++++++--
 .../syncthing/core/syncthingController.js      |  6 +++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/gui/default/index.html b/gui/default/index.html
index 3a463ac6ad4..4b9f167352d 100644
--- a/gui/default/index.html
+++ b/gui/default/index.html
@@ -744,6 +744,7 @@ <h4 class="panel-title">
                     <span ng-switch-when="paused"><span class="hidden-xs" translate>Paused</span><span class="visible-xs" aria-label="{{'Paused' | translate}}"><i class="fas fa-fw fa-pause"></i></span></span>
                     <span ng-switch-when="unused-paused"><span class="hidden-xs" translate>Paused (Unused)</span><span class="visible-xs" aria-label="{{'Paused (Unused)' | translate}}"><i class="fas fa-fw fa-unlink"></i></span></span>
                     <span ng-switch-when="disconnected"><span class="hidden-xs" translate>Disconnected</span><span class="visible-xs" aria-label="{{'Disconnected' | translate}}"><i class="fas fa-fw fa-power-off"></i></span></span>
+                    <span ng-switch-when="disconnected-stale"><span class="hidden-xs" translate>Disconnected (Stale)</span><span class="visible-xs" aria-label="{{'Disconnected (Stale)' | translate}}"><i class="fas fa-fw fa-power-off"></i></span></span>
                     <span ng-switch-when="unused-disconnected"><span class="hidden-xs" translate>Disconnected (Unused)</span><span class="visible-xs" aria-label="{{'Disconnected (Unused)' | translate}}"><i class="fas fa-fw fa-unlink"></i></span></span>
                   </span>
                   <div class="panel-title-text">{{deviceName(deviceCfg)}}</div>
@@ -755,8 +756,21 @@ <h4 class="panel-title">
                     <tbody>
                       <tr ng-if="!connections[deviceCfg.deviceID].connected">
                         <th><span class="fas fa-fw fa-eye"></span>&nbsp;<span translate>Last seen</span></th>
-                        <td translate ng-if="!deviceStats[deviceCfg.deviceID].lastSeenDays || deviceStats[deviceCfg.deviceID].lastSeenDays >= 365" class="text-right">Never</td>
-                        <td ng-if="deviceStats[deviceCfg.deviceID].lastSeenDays < 365" class="text-right">{{deviceStats[deviceCfg.deviceID].lastSeen | date:"yyyy-MM-dd HH:mm:ss"}}</td>
+                        <td class="text-right">
+                          <div ng-if="!deviceStats[deviceCfg.deviceID].lastSeenDays" translate>
+                            Never
+                          </div>
+                          <div ng-if="deviceStats[deviceCfg.deviceID].lastSeenDays">
+                            <div>
+                              {{deviceStats[deviceCfg.deviceID].lastSeen | date:"yyyy-MM-dd HH:mm:ss"}}
+                            </div>
+                            <div ng-if="deviceStats[deviceCfg.deviceID].lastSeenDays >= 7" translate>
+                              <i ng-if="deviceStats[deviceCfg.deviceID].lastSeenDays < 30">More than a week ago</i>
+                              <i class="text-warning" ng-if="deviceStats[deviceCfg.deviceID].lastSeenDays >= 30 && deviceStats[deviceCfg.deviceID].lastSeenDays < 365">More than a month ago</i>
+                              <i class="text-danger" ng-if="deviceStats[deviceCfg.deviceID].lastSeenDays >= 365">More than a year ago</i>
+                            </div>
+                          </div>
+                        </td>
                       </tr>
                       <tr ng-if="!connections[deviceCfg.deviceID].connected && deviceFolders(deviceCfg).length > 0">
                         <th><span class="fas fa-fw fa-cloud"></span>&nbsp;<span translate>Sync Status</span></th>
diff --git a/gui/default/syncthing/core/syncthingController.js b/gui/default/syncthing/core/syncthingController.js
index 8b998a14286..451637ccf5e 100755
--- a/gui/default/syncthing/core/syncthingController.js
+++ b/gui/default/syncthing/core/syncthingController.js
@@ -1094,7 +1094,11 @@ angular.module('syncthing.core')
             }
 
             // Disconnected
-            return status + 'disconnected';
+            if ($scope.deviceStats[deviceCfg.deviceID].lastSeenDays >= 7) {
+                return 'disconnected-stale';
+            } else {
+                return status + 'disconnected';
+            }
         };
 
         $scope.deviceClass = function (deviceCfg) {