gui: Mark devices that haven't connected for a long time (fixes synct…

…hing#7703)

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

@@ -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>

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) {