packages/components/containers/logs/LogsTable.tsx

   1 import { c } from 'ttag';
   2
   3 import Alert from '@proton/components/components/alert/Alert';
   4 import Info from '@proton/components/components/link/Info';
   5 import Table from '@proton/components/components/table/Table';
   6 import TableBody from '@proton/components/components/table/TableBody';
   7 import TableCell from '@proton/components/components/table/TableCell';
   8 import TableHeader from '@proton/components/components/table/TableHeader';
   9 import TableRow from '@proton/components/components/table/TableRow';
  10 import Time from '@proton/components/components/time/Time';
  11 import type { AuthLog } from '@proton/shared/lib/authlog';
  12 import { SETTINGS_LOG_AUTH_STATE, SETTINGS_PROTON_SENTINEL_STATE } from '@proton/shared/lib/interfaces';
  13 import isTruthy from '@proton/utils/isTruthy';
  14
  15 import AppVersionCell from './AppVersionCell';
  16 import DeviceCell from './DeviceCell';
  17 import EventCell from './EventCell';
  18 import IPCell from './IPCell';
  19 import LocationCell from './LocationCell';
  20 import ProtectionCell from './ProtectionCell';
  21
  22 const { ADVANCED, DISABLE } = SETTINGS_LOG_AUTH_STATE;
  23 const { ENABLED } = SETTINGS_PROTON_SENTINEL_STATE;
  24
  25 interface Props {
  26     logs: AuthLog[];
  27     logAuth: SETTINGS_LOG_AUTH_STATE;
  28     protonSentinel: SETTINGS_PROTON_SENTINEL_STATE;
  29     loading: boolean;
  30     error: boolean;
  31 }
  32
  33 const LogsTable = ({ logs, logAuth, protonSentinel, loading, error }: Props) => {
  34     const isAuthLogAdvanced = logAuth === ADVANCED;
  35     const isProtonSentinelEnabled = protonSentinel === ENABLED;
  36
  37     if (logAuth === DISABLE) {
  38         return (
  39             <Alert className="mb-4">{c('Info')
  40                 .t`You can enable authentication logs to see when your account is accessed, and from which IP. We will record the IP address that accesses the account and the time, as well as failed attempts.`}</Alert>
  41         );
  42     }
  43
  44     if (!loading && !logs.length) {
  45         return <Alert className="mb-4">{c('Info').t`No logs yet.`}</Alert>;
  46     }
  47
  48     if (!loading && error) {
  49         return <Alert className="mb-4" type="error">{c('Info').t`Failed to fetch logs.`}</Alert>;
  50     }
  51
  52     const isUnavailableClass = (isAdvancedLogOnly = true) => {
  53         if ((isAdvancedLogOnly && !isAuthLogAdvanced) || !isProtonSentinelEnabled) {
  54             return 'bg-weak';
  55         }
  56         return '';
  57     };
  58
  59     const headerCells = [
  60         {
  61             className: 'text-left',
  62             header: c('Header').t`Time`,
  63         },
  64         {
  65             className: isAuthLogAdvanced || isProtonSentinelEnabled ? 'w-1/6' : 'w-1/5',
  66             header: c('Header').t`Event`,
  67         },
  68         {
  69             header: c('Header').t`App version`,
  70         },
  71         {
  72             className: isAuthLogAdvanced ? 'w-1/6' : 'bg-weak w-custom',
  73             style: { '--w-custom': '5%' },
  74             header: 'IP',
  75         },
  76         {
  77             className: isUnavailableClass(),
  78             header: c('Header').t`Location`,
  79             info: c('Tooltip').t`An approximate location of the IP address`,
  80         },
  81         {
  82             className:
  83                 isAuthLogAdvanced && isProtonSentinelEnabled
  84                     ? `${isUnavailableClass()}`
  85                     : `${isUnavailableClass()} w-1/10`,
  86             header: 'ISP',
  87             info: c('Tooltip').t`The Internet Service Provider of the IP address`,
  88         },
  89         {
  90             className: isProtonSentinelEnabled ? isUnavailableClass(false) : `${isUnavailableClass(false)} w-5`,
  91             header: c('Header').t`Device`,
  92             info: c('Tooltip').t`Device information such as operating system`,
  93         },
  94         {
  95             className: isUnavailableClass(false),
  96             header: c('Header').t`Protection`,
  97             info: c('Tooltip').t`Any protection applied to suspicious activity`,
  98         },
  99     ].filter(isTruthy);
 100
 101     return (
 102         <Table responsive="cards">
 103             <TableHeader>
 104                 <TableRow>
 105                     {headerCells.map(({ className, header, info }) => (
 106                         <TableCell key={header} className={className} type="header">
 107                             <div className="flex items-center flex-nowrap">
 108                                 {header}
 109                                 {info && <Info className="ml-2 shrink-0" title={info} />}
 110                             </div>
 111                         </TableCell>
 112                     ))}
 113                 </TableRow>
 114             </TableHeader>
 115             <TableBody loading={loading} colSpan={headerCells.length}>
 116                 {logs.map(
 117                     (
 118                         {
 119                             Time: time,
 120                             AppVersion,
 121                             Description,
 122                             IP,
 123                             InternetProvider,
 124                             Location,
 125                             Device,
 126                             ProtectionDesc,
 127                             Protection,
 128                             Status,
 129                         },
 130                         index
 131                     ) => {
 132                         const key = index.toString();
 133                         const cells = [
 134                             {
 135                                 label: c('Header').t`Time`,
 136                                 className: 'text-left',
 137                                 content: (
 138                                     <Time key={key} format="PPp">
 139                                         {time}
 140                                     </Time>
 141                                 ),
 142                             },
 143                             {
 144                                 label: c('Header').t`Event`,
 145                                 content: <EventCell description={Description} status={Status} />,
 146                             },
 147                             {
 148                                 label: c('Header').t`App version`,
 149                                 content: <AppVersionCell appVersion={AppVersion} />,
 150                             },
 151                             {
 152                                 label: 'IP',
 153                                 className: isAuthLogAdvanced ? '' : 'bg-weak hidden lg:table-cell text-center',
 154                                 colSpan: (() => {
 155                                     if (!isAuthLogAdvanced) {
 156                                         if (isProtonSentinelEnabled) {
 157                                             return 3;
 158                                         }
 159                                         return 5;
 160                                     }
 161                                     return 1;
 162                                 })(),
 163                                 content: (
 164                                     <IPCell
 165                                         isAuthLogAdvanced={isAuthLogAdvanced}
 166                                         isProtonSentinelEnabled={isProtonSentinelEnabled}
 167                                         ip={IP}
 168                                         firstRow={index === 0}
 169                                     />
 170                                 ),
 171                             },
 172                             isAuthLogAdvanced && {
 173                                 label: c('Header').t`Location`,
 174                                 className: `${isUnavailableClass()} ${
 175                                     !isAuthLogAdvanced || !isProtonSentinelEnabled ? 'text-left lg:text-center' : ''
 176                                 }`,
 177                                 colSpan: isProtonSentinelEnabled ? 1 : 4,
 178                                 content: (
 179                                     <LocationCell
 180                                         isProtonSentinelEnabled={isProtonSentinelEnabled}
 181                                         location={Location}
 182                                         firstRow={index === 0}
 183                                     />
 184                                 ),
 185                             },
 186                             isAuthLogAdvanced &&
 187                                 isProtonSentinelEnabled && {
 188                                     label: 'ISP',
 189                                     content: <span className="flex-1">{InternetProvider || '-'}</span>,
 190                                 },
 191                             isProtonSentinelEnabled && {
 192                                 label: c('Header').t`Device`,
 193                                 content: <DeviceCell device={Device} />,
 194                             },
 195                             isProtonSentinelEnabled && {
 196                                 label: c('Header').t`Protection`,
 197                                 content: <ProtectionCell protection={Protection} protectionDesc={ProtectionDesc} />,
 198                             },
 199                         ].filter(isTruthy);
 200
 201                         return (
 202                             <TableRow key={key}>
 203                                 {cells.map(({ label, className, colSpan, content }) => (
 204                                     <TableCell key={label} label={label} className={className} colSpan={colSpan}>
 205                                         {content}
 206                                     </TableCell>
 207                                 ))}
 208                             </TableRow>
 209                         );
 210                     }
 211                 )}
 212             </TableBody>
 213         </Table>
 214     );
 215 };
 216 export default LogsTable;