gui: Mark devices that haven't connected for a long time (fixes #7703) (#8530)

Currently, a disconnected device is marked as "Disconnected" without any
consideration whether the state is just temporary or rather it has been
like that for a long time, potentially requiring user intervention.

This commit adds a new state called "Disconnected (Inactive)" which is
shown for devices that have been disconnected for longer than a week. It
also changes the "Last seen" information, so that "Never" is used only
when the device hasn't connected at all, and the exact date is displayed
otherwise.

Additionally, when the date is older than 1 week, a note about that is
displayed below the date. Furthermore, when the date becomes older than
1 month, the note text colour changes to orange, and when it exceeds 1
year, the colour changes again to red. This is done to provide the user
with a visual clue that something may potentially be wrong and requires
a manual fix.

Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
Co-authored-by: André Colomb <src@andre.colomb.de>
This commit is contained in:
tomasz1986 2022-11-03 12:09:28 +01:00 committed by GitHub
parent 06a1635d1d
commit d8296ce111
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 5 deletions

View File

@ -101,6 +101,7 @@
"Disables comparing and syncing file permissions. Useful on systems with nonexistent or custom permissions (e.g. FAT, exFAT, Synology, Android).": "Disables comparing and syncing file permissions. Useful on systems with nonexistent or custom permissions (e.g. FAT, exFAT, Synology, Android).",
"Discard": "Discard",
"Disconnected": "Disconnected",
"Disconnected (Inactive)": "Disconnected (Inactive)",
"Disconnected (Unused)": "Disconnected (Unused)",
"Discovered": "Discovered",
"Discovery": "Discovery",
@ -228,6 +229,9 @@
"Minimum Free Disk Space": "Minimum Free Disk Space",
"Mod. Device": "Mod. Device",
"Mod. Time": "Mod. Time",
"More than a month ago": "More than a month ago",
"More than a week ago": "More than a week ago",
"More than a year ago": "More than a year ago",
"Move to top of queue": "Move to top of queue",
"Multi level wildcard (matches multiple directory levels)": "Multi level wildcard (matches multiple directory levels)",
"Never": "Never",

View File

@ -748,6 +748,7 @@
<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-inactive"><span class="hidden-xs" translate>Disconnected (Inactive)</span><span class="visible-xs" aria-label="{{'Disconnected (Inactive)' | 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>
<span ng-switch="rdConnType(deviceCfg.deviceID)" class="remote-devices-panel">
@ -767,8 +768,21 @@
<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">
<i ng-if="deviceStats[deviceCfg.deviceID].lastSeenDays < 30" translate>More than a week ago</i>
<i class="text-warning" ng-if="deviceStats[deviceCfg.deviceID].lastSeenDays >= 30 && deviceStats[deviceCfg.deviceID].lastSeenDays < 365" translate>More than a month ago</i>
<i class="text-danger" ng-if="deviceStats[deviceCfg.deviceID].lastSeenDays >= 365" translate>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>

View File

@ -865,7 +865,9 @@ angular.module('syncthing.core')
$scope.deviceStats = data;
for (var device in $scope.deviceStats) {
$scope.deviceStats[device].lastSeen = new Date($scope.deviceStats[device].lastSeen);
$scope.deviceStats[device].lastSeenDays = (new Date() - $scope.deviceStats[device].lastSeen) / 1000 / 86400;
if ($scope.deviceStats[device].lastSeen.toISOString() !== '1970-01-01T00:00:00.000Z') {
$scope.deviceStats[device].lastSeenDays = (new Date() - $scope.deviceStats[device].lastSeen) / 1000 / 86400;
}
}
console.log("refreshDeviceStats", data);
}).error($scope.emitHTTPError);
@ -1073,8 +1075,9 @@ angular.module('syncthing.core')
$scope.deviceStatus = function (deviceCfg) {
var status = '';
var unused = $scope.deviceFolders(deviceCfg).length === 0;
if ($scope.deviceFolders(deviceCfg).length === 0) {
if (unused) {
status = 'unused-';
}
@ -1095,7 +1098,11 @@ angular.module('syncthing.core')
}
// Disconnected
return status + 'disconnected';
if (!unused && $scope.deviceStats[deviceCfg.deviceID].lastSeenDays >= 7) {
return status + 'disconnected-inactive';
} else {
return status + 'disconnected';
}
};
$scope.deviceClass = function (deviceCfg) {