Updated log display.

.gitignore

@@ -23,6 +23,7 @@
 .DS_Store
 .idea
 *.iml
+*.log
 .vscode/*
 
 # debug

components/common/NoData.module.css

@@ -1,5 +1,6 @@
 .container {
   color: var(--gray500);
+  font-size: var(--font-size-normal);
   position: absolute;
   top: 50%;
   left: 50%;

components/metrics/RealtimeLog.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { FixedSizeList } from 'react-window';
 import firstBy from 'thenby';
 import { format } from 'date-fns';
@@ -7,6 +7,7 @@ import Icon from 'components/common/Icon';
 import Tag from 'components/common/Tag';
 import Dot from 'components/common/Dot';
 import FilterButtons from 'components/common/FilterButtons';
+import { devices } from 'components/messages';
 import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import { BROWSERS } from 'lib/constants';
@@ -15,6 +16,7 @@ import Visitor from 'assets/visitor.svg';
 import Eye from 'assets/eye.svg';
 import { stringToColor } from 'lib/format';
 import styles from './RealtimeLog.module.css';
+import NoData from '../common/NoData';
 
 const TYPE_ALL = 0;
 const TYPE_PAGEVIEW = 1;
@@ -28,6 +30,7 @@ const TYPE_ICONS = {
 };
 
 export default function RealtimeLog({ data, websites }) {
+  const intl = useIntl();
   const [locale] = useLocale();
   const countryNames = useCountryNames(locale);
   const [filter, setFilter] = useState(TYPE_ALL);
@@ -116,9 +119,9 @@ export default function RealtimeLog({ data, websites }) {
           defaultMessage="Visitor from {country} using {browser} on {os} {device}"
           values={{
             country: <b>{countryNames[country]}</b>,
-            browser: BROWSERS[browser],
-            os,
-            device,
+            browser: <b>{BROWSERS[browser]}</b>,
+            os: <b>{os}</b>,
+            device: <b>{intl.formatMessage(devices[device])?.toLowerCase()}</b>,
           }}
         />
       );
@@ -159,6 +162,7 @@ export default function RealtimeLog({ data, websites }) {
         <FormattedMessage id="label.realtime-logs" defaultMessage="Realtime logs" />
       </div>
       <div className={styles.body}>
+        {logs?.length === 0 && <NoData />}
         <FixedSizeList height={400} itemCount={logs.length} itemSize={40}>
           {Row}
         </FixedSizeList>

scripts/check-lang.js

@@ -14,6 +14,7 @@ files.forEach(file => {
     const id = file.replace('.json', '');
 
     console.log(chalk.yellowBright(`\n## ${file}`));
+    let count = 0;
     keys.forEach(key => {
       const orig = messages[key];
       const check = lang[key];
@@ -21,7 +22,12 @@ files.forEach(file => {
 
       if (!ignored && (!check || check === orig)) {
         console.log(chalk.redBright('*'), chalk.greenBright(`${key}:`), orig);
+        count++;
       }
     });
+
+    if (count === 0) {
+      console.log('**👍 Complete!**');
+    }
   }
 });

scripts/lang-ignore.json

@@ -1,14 +1,12 @@
 {
   "de-DE": [
     "label.administrator",
+    "label.domain",
     "label.name",
     "metrics.device.desktop",
     "metrics.device.laptop",
     "metrics.device.tablet",
     "metrics.referrers"
   ],
-  "fr-FR": [    
-    "metrics.actions",
-    "metrics.pages"
-  ]
+  "fr-FR": ["metrics.actions", "metrics.pages"]
 }