Adding IP address translation for UI presentation (based on translation table from UI config).

Author: krulis-martin

etc/env.json.example

@@ -13,5 +13,12 @@
     "cs": "Univerzitní login",
     "en": "University login"
   },
-  "EXTERNAL_AUTH_HELPDESK_URL": "mailto:cas@some.other.domain"
+  "EXTERNAL_AUTH_HELPDESK_URL": "mailto:cas@some.other.domain",
+  "KNOWN_IPS": {
+    "127.0.0.1": "localhost",
+    "192.168.1.1": {
+      "cs": "Cože? Privátní adresa?",
+      "en": "What? A private IP?"
+    }
+  }
 }

src/components/Groups/LockedStudentsTable/LockedStudentsTable.js

@@ -5,6 +5,7 @@ import { Table } from 'react-bootstrap';
 import { lruMemoize } from 'reselect';
 
 import UsersName from '../../Users/UsersName';
+import IpAddress from '../../widgets/IpAddress/IpAddress';
 import ExamUnlockButtonContainer from '../../../containers/ExamUnlockButtonContainer';
 import { createUserNameComparator } from '../../helpers/users.js';
 
@@ -28,7 +29,7 @@ const LockedStudentsTable = ({ groupId, lockedStudents, currentUser, intl: { loc
                 listItem
               />
             </td>
-            <td>{student.privateData?.ipLock && <code>{student.privateData.ipLock}</code>}</td>
+            <td>{student.privateData?.ipLock && <IpAddress ip={student.privateData.ipLock} />}</td>
             <td className="text-end">
               <ExamUnlockButtonContainer groupId={groupId} userId={student.id} size="xs" />
             </td>

src/components/Groups/LocksTable/LocksTable.js

@@ -6,6 +6,7 @@ import { lruMemoize } from 'reselect';
 
 import UsersNameContainer from '../../../containers/UsersNameContainer';
 import DateTime from '../../widgets/DateTime';
+import IpAddress from '../../widgets/IpAddress/IpAddress';
 import { LockIcon, UnlockIcon } from '../../icons';
 
 const sortLocks = lruMemoize(locks => [...locks].sort(({ createdAt: c1 }, { createdAt: c2 }) => c1 - c2));
@@ -31,9 +32,7 @@ const LocksTable = ({ locks }) =>
                 </>
               )}
             </td>
-            <td className="shrink-col text-nowrap">
-              <code>{lock.remoteAddr}</code>
-            </td>
+            <td className="shrink-col text-nowrap">{lock.remoteAddr && <IpAddress ip={lock.remoteAddr} />}</td>
           </tr>
         ))}
       </tbody>

src/components/widgets/IpAddress/IpAddress.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import Icon from '../../icons/Icon.js';
+import { getConfigVar } from '../../../helpers/config.js';
+
+const KNOWN_IPS = getConfigVar('KNOWN_IPS', {});
+
+const getIpLabel = (ip, locale) => {
+  if (typeof KNOWN_IPS[ip] === 'object') {
+    if (locale in KNOWN_IPS[ip]) {
+      return KNOWN_IPS[ip][locale];
+    }
+    if ('en' in KNOWN_IPS[ip]) {
+      return KNOWN_IPS[ip].en;
+    }
+    const keys = Object.keys(KNOWN_IPS[ip]);
+    if (keys.length > 0) {
+      return KNOWN_IPS[ip][keys[0]];
+    }
+  }
+  return KNOWN_IPS[ip];
+};
+
+// Inset panel replaces old <Well> component from bootstrap 3
+const IpAddress = ({ ip, intl: { locale }, ...props }) =>
+  KNOWN_IPS[ip] ? (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={
+        <Tooltip id={ip}>
+          <code>{ip}</code>
+        </Tooltip>
+      }>
+      <span>
+        <Icon icon="location-crosshairs" gapRight={1} className="opacity-50" /> {getIpLabel(ip, locale)}
+      </span>
+    </OverlayTrigger>
+  ) : (
+    <code {...props}>{ip}</code>
+  );
+
+IpAddress.propTypes = {
+  ip: PropTypes.string.isRequired,
+  intl: PropTypes.object.isRequired,
+};
+
+export default injectIntl(IpAddress);

src/components/widgets/IpAddress/index.js

@@ -0,0 +1 @@
+export { default } from './IpAddress.js';