OS icons (#4254)

* Add popular OS icons

* Show OS name and icon in drilldown as well

* Fix OS version filter links

assets/js/dashboard/stats/devices/index.js

@@ -103,7 +103,37 @@ function BrowserVersions({ query, site, afterFetchData }) {
       query={query}
     />
   )
+}
 
+// Icons copied from https://github.com/ngeenx/operating-system-logos
+const OS_ICONS = {
+  'iOS': 'ios.png',
+  'Mac': 'mac.png',
+  'Windows': 'windows.png',
+  'Windows Phone': 'windows.png',
+  'Android': 'android.png',
+  'GNU/Linux': 'gnu_linux.png',
+  'Ubuntu': 'ubuntu.png',
+  'Chrome OS': 'chrome_os.png',
+  'iPadOS': 'ipad_os.png',
+  'Fire OS': 'fire_os.png',
+  'HarmonyOS': 'harmony_os.png',
+  'Tizen': 'tizen.png',
+  'PlayStation': 'playstation.png',
+  'KaiOS': 'kai_os.png',
+  'Fedora': 'fedora.png',
+  'FreeBSD': 'freebsd.png',
+}
+
+function osIconFor(os) {
+  const filename = OS_ICONS[os] || 'fallback.svg'
+
+  return (
+    <img
+      src={`/images/icon/os/${filename}`}
+      className="w-4 h-4 mr-2"
+    />
+  )
 }
 
 function OperatingSystems({ query, site, afterFetchData }) {
@@ -118,11 +148,16 @@ function OperatingSystems({ query, site, afterFetchData }) {
     }
   }
 
+  function renderIcon(listItem) {
+    return osIconFor(listItem.name)
+  }
+
   return (
     <ListReport
       fetchData={fetchData}
       afterFetchData={afterFetchData}
       getFilterFor={getFilterFor}
+      renderIcon={renderIcon}
       keyLabel="Operating system"
       metrics={maybeWithCR([VISITORS_METRIC, PERCENTAGE_METRIC], query)}
       query={query}
@@ -133,6 +168,15 @@ function OperatingSystems({ query, site, afterFetchData }) {
 function OperatingSystemVersions({ query, site, afterFetchData }) {
   function fetchData() {
     return api.get(url.apiPath(site, '/operating-system-versions'), query)
+      .then(res => {
+        return {...res, results: res.results.map((row => {
+          return {...row, name: `${row.os} ${row.name}`, version: row.name}
+        }))}
+      })
+  }
+
+  function renderIcon(listItem) {
+    return osIconFor(listItem.os)
   }
 
   function getFilterFor(listItem) {
@@ -141,13 +185,14 @@ function OperatingSystemVersions({ query, site, afterFetchData }) {
     }
     return {
       prefix: 'os_version',
-      filter: ["is", "os_version", [listItem['name']]]
+      filter: ["is", "os_version", [listItem.version]]
     }
   }
 
   return (
     <ListReport
       fetchData={fetchData}
+      renderIcon={renderIcon}
       afterFetchData={afterFetchData}
       getFilterFor={getFilterFor}
       keyLabel="Operating System Version"

priv/repo/seeds.exs

@@ -166,7 +166,7 @@ native_stats_range
       browser: Enum.random(["Microsoft Edge", "Chrome", "Safari", "Firefox", "Vivaldi"]),
       browser_version: to_string(Enum.random(0..50)),
       screen_size: Enum.random(["Mobile", "Tablet", "Desktop", "Laptop"]),
-      operating_system: Enum.random(["Windows", "Mac", "Linux"]),
+      operating_system: Enum.random(["Windows", "Mac", "GNU/Linux"]),
       operating_system_version: to_string(Enum.random(0..15)),
       utm_campaign: Enum.random(["", "Referral", "Advertisement", "Email"]),
       pathname:
@@ -199,10 +199,10 @@ native_stats_range
       hostname: Enum.random(["en.dummy.site", "es.dummy.site", "dummy.site"]),
       timestamp: put_random_time.(date, index),
       referrer_source: Enum.random(["", "Facebook", "Twitter", "DuckDuckGo", "Google"]),
-      browser: Enum.random(["Edge", "Chrome", "Safari", "Firefox", "Vivaldi"]),
+      browser: Enum.random(["Microsoft Edge", "Chrome", "Safari", "Firefox", "Vivaldi"]),
       browser_version: to_string(Enum.random(0..50)),
       screen_size: Enum.random(["Mobile", "Tablet", "Desktop", "Laptop"]),
-      operating_system: Enum.random(["Windows", "macOS", "Linux"]),
+      operating_system: Enum.random(["Windows", "Mac", "GNU/Linux"]),
       operating_system_version: to_string(Enum.random(0..15)),
       pathname:
         Enum.random([
@@ -236,10 +236,10 @@ native_stats_range
       hostname: site.domain,
       timestamp: put_random_time.(date, index),
       referrer_source: Enum.random(["", "Facebook", "Twitter", "DuckDuckGo", "Google"]),
-      browser: Enum.random(["Edge", "Chrome", "Safari", "Firefox", "Vivaldi"]),
+      browser: Enum.random(["Microsoft Edge", "Chrome", "Safari", "Firefox", "Vivaldi"]),
       browser_version: to_string(Enum.random(0..50)),
       screen_size: Enum.random(["Mobile", "Tablet", "Desktop", "Laptop"]),
-      operating_system: Enum.random(["Windows", "macOS", "Linux"]),
+      operating_system: Enum.random(["Windows", "Mac", "GNU/Linux"]),
       operating_system_version: to_string(Enum.random(0..15)),
       user_id: Enum.random(1..1200),
       "meta.key": ["url", "logged_in", "is_customer", "amount"],

priv/static/images/icon/os/fallback.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#64748b" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 17.25v-.228a4.5 4.5 0 0 0-.12-1.03l-2.268-9.64a3.375 3.375 0 0 0-3.285-2.602H7.923a3.375 3.375 0 0 0-3.285 2.602l-2.268 9.64a4.5 4.5 0 0 0-.12 1.03v.228m19.5 0a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3m19.5 0a3 3 0 0 0-3-3H5.25a3 3 0 0 0-3 3m16.5 0h.008v.008h-.008v-.008Zm-3 0h.008v.008h-.008v-.008Z" />
+</svg>