Merge branch 'master' into 2049-doq

client/src/components/Logs/Logs.css

@@ -388,3 +388,28 @@
 .logs__table .loading:before {
     min-height: 100%;
 }
+
+.logs__whois {
+    display: inline;
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+.logs__whois::after {
+    content: "|";
+    padding: 0 5px;
+    opacity: 0.3;
+}
+
+.logs__whois:last-child::after {
+    content: "";
+}
+
+.logs__whois-icon.icons {
+    position: relative;
+    top: -2px;
+    width: 12px;
+    height: 12px;
+    margin-right: 1px;
+    opacity: 0.5;
+}

client/src/components/Settings/Clients/ClientsTable.js

@@ -4,7 +4,7 @@ import { Trans, withTranslation } from 'react-i18next';
 import ReactTable from 'react-table';
 
 import { MODAL_TYPE } from '../../../helpers/constants';
-import { splitByNewLine } from '../../../helpers/helpers';
+import { splitByNewLine, countClientsStatistics } from '../../../helpers/helpers';
 import Card from '../../ui/Card';
 import Modal from './Modal';
 import CellWrap from '../../ui/CellWrap';
@@ -204,7 +204,10 @@ class ClientsTable extends Component {
         {
             Header: this.props.t('requests_count'),
             id: 'statistics',
-            accessor: (row) => this.props.normalizedTopClients.configured[row.name] || 0,
+            accessor: (row) => countClientsStatistics(
+                row.ids,
+                this.props.normalizedTopClients.auto,
+            ),
             sortMethod: (a, b) => b - a,
             minWidth: 120,
             Cell: (row) => {

client/src/components/Settings/Clients/whoisCell.js

@@ -14,7 +14,7 @@ const getFormattedWhois = (value, t) => {
                 <div key={key} title={t(key)}>
                     {icon && (
                         <Fragment>
-                            <svg className="logs__whois-icon text-muted-dark icons">
+                            <svg className="logs__whois-icon text-muted-dark icons icon--24">
                                 <use xlinkHref={`#${icon}`} />
                             </svg>
                             &nbsp;

client/src/components/Toasts/Toast.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { TOAST_TIMEOUTS } from '../../helpers/constants';
 import { removeToast } from '../../actions';
@@ -9,8 +9,8 @@ const Toast = ({
     id,
     message,
     type,
+    options,
 }) => {
-    const { t } = useTranslation();
     const dispatch = useDispatch();
     const [timerId, setTimerId] = useState(null);
 
@@ -30,7 +30,12 @@ const Toast = ({
     return <div className={`toast toast--${type}`}
                 onMouseOver={clearRemoveToastTimeout}
                 onMouseOut={setRemoveToastTimeout}>
-        <p className="toast__content">{t(message)}</p>
+        <p className="toast__content">
+            <Trans
+                    i18nKey={message}
+                    {...options}
+            />
+        </p>
         <button className="toast__dismiss" onClick={removeCurrentToast}>
             <svg stroke="#fff" fill="none" width="20" height="20" strokeWidth="2"
                  viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -45,6 +50,7 @@ Toast.propTypes = {
     id: PropTypes.string.isRequired,
     message: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
+    options: PropTypes.object,
 };
 
 export default Toast;