Device manager - label devices as inactive (PSG-638) (#9175)
* filter devices by security recommendation * display inactive status on device tile * unify DeviceSecurityVariation type, add correct icon to inactive ui * tidy * avoid dead code warning
This commit is contained in:
parent
d21498de94
commit
4a5ed2f899
10 changed files with 189 additions and 25 deletions
|
@ -20,12 +20,7 @@ import React from 'react';
|
|||
import { Icon as VerifiedIcon } from '../../../../../res/img/e2e/verified.svg';
|
||||
import { Icon as UnverifiedIcon } from '../../../../../res/img/e2e/warning.svg';
|
||||
import { Icon as InactiveIcon } from '../../../../../res/img/element-icons/settings/inactive.svg';
|
||||
|
||||
export enum DeviceSecurityVariation {
|
||||
Verified = 'Verified',
|
||||
Unverified = 'Unverified',
|
||||
Inactive = 'Inactive',
|
||||
}
|
||||
import { DeviceSecurityVariation } from './filter';
|
||||
interface Props {
|
||||
variation: DeviceSecurityVariation;
|
||||
heading: string;
|
||||
|
|
|
@ -16,13 +16,14 @@ limitations under the License.
|
|||
|
||||
import React, { Fragment } from "react";
|
||||
|
||||
import { Icon as InactiveIcon } from '../../../../../res/img/element-icons/settings/inactive.svg';
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { formatDate, formatRelativeTime } from "../../../../DateUtils";
|
||||
import TooltipTarget from "../../elements/TooltipTarget";
|
||||
import { Alignment } from "../../elements/Tooltip";
|
||||
import Heading from "../../typography/Heading";
|
||||
import { INACTIVE_DEVICE_AGE_MS, isDeviceInactive } from "./filter";
|
||||
import { DeviceWithVerification } from "./useOwnDevices";
|
||||
|
||||
export interface DeviceTileProps {
|
||||
device: DeviceWithVerification;
|
||||
children?: React.ReactNode;
|
||||
|
@ -45,7 +46,8 @@ const DeviceTileName: React.FC<{ device: DeviceWithVerification }> = ({ device }
|
|||
</Heading>;
|
||||
};
|
||||
|
||||
const MS_6_DAYS = 6 * 24 * 60 * 60 * 1000;
|
||||
const MS_DAY = 24 * 60 * 60 * 1000;
|
||||
const MS_6_DAYS = 6 * MS_DAY;
|
||||
const formatLastActivity = (timestamp: number, now = new Date().getTime()): string => {
|
||||
// less than a week ago
|
||||
if (timestamp + MS_6_DAYS >= now) {
|
||||
|
@ -56,18 +58,40 @@ const formatLastActivity = (timestamp: number, now = new Date().getTime()): stri
|
|||
return formatRelativeTime(new Date(timestamp));
|
||||
};
|
||||
|
||||
const DeviceMetadata: React.FC<{ value: string, id: string }> = ({ value, id }) => (
|
||||
const getInactiveMetadata = (device: DeviceWithVerification): { id: string, value: React.ReactNode } | undefined => {
|
||||
const isInactive = isDeviceInactive(device);
|
||||
|
||||
if (!isInactive) {
|
||||
return undefined;
|
||||
}
|
||||
const inactiveAgeDays = Math.round(INACTIVE_DEVICE_AGE_MS / MS_DAY);
|
||||
return { id: 'inactive', value: (
|
||||
<>
|
||||
<InactiveIcon className="mx_DeviceTile_inactiveIcon" />
|
||||
{
|
||||
_t('Inactive for %(inactiveAgeDays)s+ days', { inactiveAgeDays }) +
|
||||
` (${formatLastActivity(device.last_seen_ts)})`
|
||||
}
|
||||
</>),
|
||||
};
|
||||
};
|
||||
|
||||
const DeviceMetadata: React.FC<{ value: string | React.ReactNode, id: string }> = ({ value, id }) => (
|
||||
value ? <span data-testid={`device-metadata-${id}`}>{ value }</span> : null
|
||||
);
|
||||
|
||||
const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, onClick }) => {
|
||||
const inactive = getInactiveMetadata(device);
|
||||
const lastActivity = device.last_seen_ts && `${_t('Last activity')} ${formatLastActivity(device.last_seen_ts)}`;
|
||||
const verificationStatus = device.isVerified ? _t('Verified') : _t('Unverified');
|
||||
const metadata = [
|
||||
{ id: 'isVerified', value: verificationStatus },
|
||||
{ id: 'lastActivity', value: lastActivity },
|
||||
{ id: 'lastSeenIp', value: device.last_seen_ip },
|
||||
];
|
||||
// if device is inactive, don't display last activity or verificationStatus
|
||||
const metadata = inactive
|
||||
? [inactive, { id: 'lastSeenIp', value: device.last_seen_ip }]
|
||||
: [
|
||||
{ id: 'isVerified', value: verificationStatus },
|
||||
{ id: 'lastActivity', value: lastActivity },
|
||||
{ id: 'lastSeenIp', value: device.last_seen_ip },
|
||||
];
|
||||
|
||||
return <div className="mx_DeviceTile" data-testid={`device-tile-${device.device_id}`}>
|
||||
<div className="mx_DeviceTile_info" onClick={onClick}>
|
||||
|
|
|
@ -17,6 +17,7 @@ limitations under the License.
|
|||
import React from 'react';
|
||||
|
||||
import DeviceTile from './DeviceTile';
|
||||
import { filterDevicesBySecurityRecommendation } from './filter';
|
||||
import { DevicesDictionary, DeviceWithVerification } from './useOwnDevices';
|
||||
|
||||
interface Props {
|
||||
|
@ -27,8 +28,9 @@ interface Props {
|
|||
const sortDevicesByLatestActivity = (left: DeviceWithVerification, right: DeviceWithVerification) =>
|
||||
(right.last_seen_ts || 0) - (left.last_seen_ts || 0);
|
||||
|
||||
const getSortedDevices = (devices: DevicesDictionary) =>
|
||||
Object.values(devices).sort(sortDevicesByLatestActivity);
|
||||
const getFilteredSortedDevices = (devices: DevicesDictionary) =>
|
||||
filterDevicesBySecurityRecommendation(Object.values(devices), [])
|
||||
.sort(sortDevicesByLatestActivity);
|
||||
|
||||
/**
|
||||
* Filtered list of devices
|
||||
|
@ -36,7 +38,7 @@ const getSortedDevices = (devices: DevicesDictionary) =>
|
|||
* TODO(kerrya) Filtering to added as part of PSG-648
|
||||
*/
|
||||
const FilteredDeviceList: React.FC<Props> = ({ devices }) => {
|
||||
const sortedDevices = getSortedDevices(devices);
|
||||
const sortedDevices = getFilteredSortedDevices(devices);
|
||||
|
||||
return <ol className='mx_FilteredDeviceList'>
|
||||
{ sortedDevices.map((device) =>
|
||||
|
|
47
src/components/views/settings/devices/filter.ts
Normal file
47
src/components/views/settings/devices/filter.ts
Normal file
|
@ -0,0 +1,47 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { DeviceWithVerification } from "./useOwnDevices";
|
||||
|
||||
export enum DeviceSecurityVariation {
|
||||
Verified = 'Verified',
|
||||
Unverified = 'Unverified',
|
||||
Inactive = 'Inactive',
|
||||
}
|
||||
|
||||
type DeviceFilterCondition = (device: DeviceWithVerification) => boolean;
|
||||
|
||||
export const INACTIVE_DEVICE_AGE_MS = 7.776e+9; // 90 days
|
||||
|
||||
export const isDeviceInactive: DeviceFilterCondition = device =>
|
||||
!!device.last_seen_ts && device.last_seen_ts < Date.now() - INACTIVE_DEVICE_AGE_MS;
|
||||
|
||||
const filters: Record<DeviceSecurityVariation, DeviceFilterCondition> = {
|
||||
[DeviceSecurityVariation.Verified]: device => !!device.isVerified,
|
||||
[DeviceSecurityVariation.Unverified]: device => !device.isVerified,
|
||||
[DeviceSecurityVariation.Inactive]: isDeviceInactive,
|
||||
};
|
||||
|
||||
export const filterDevicesBySecurityRecommendation = (
|
||||
devices: DeviceWithVerification[],
|
||||
securityVariations: DeviceSecurityVariation[],
|
||||
) => {
|
||||
const activeFilters = securityVariations.map(variation => filters[variation]);
|
||||
if (!activeFilters.length) {
|
||||
return devices;
|
||||
}
|
||||
return devices.filter(device => activeFilters.every(filter => filter(device)));
|
||||
};
|
|
@ -20,10 +20,11 @@ import { _t } from "../../../../../languageHandler";
|
|||
import Spinner from '../../../elements/Spinner';
|
||||
import { useOwnDevices } from '../../devices/useOwnDevices';
|
||||
import DeviceTile from '../../devices/DeviceTile';
|
||||
import DeviceSecurityCard, { DeviceSecurityVariation } from '../../devices/DeviceSecurityCard';
|
||||
import DeviceSecurityCard from '../../devices/DeviceSecurityCard';
|
||||
import SettingsSubsection from '../../shared/SettingsSubsection';
|
||||
import SettingsTab from '../SettingsTab';
|
||||
import FilteredDeviceList from '../../devices/FilteredDeviceList';
|
||||
import { DeviceSecurityVariation } from '../../devices/filter';
|
||||
import SettingsTab from '../SettingsTab';
|
||||
|
||||
const SessionManagerTab: React.FC = () => {
|
||||
const { devices, currentDeviceId, isLoading } = useOwnDevices();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue