Merge branch 'dev' of https://github.com/umami-software/umami into dev

components/messages.js

@@ -81,6 +81,7 @@ export const labels = defineMessages({
   devices: { id: 'label.devices', defaultMessage: 'Devices' },
   countries: { id: 'label.countries', defaultMessage: 'Countries' },
   languages: { id: 'label.languages', defaultMessage: 'Languages' },
+  event: { id: 'label.event', defaultMessage: 'Event' },
   events: { id: 'label.events', defaultMessage: 'Events' },
   query: { id: 'label.query', defaultMessage: 'Query' },
   queryParameters: { id: 'label.query-parameters', defaultMessage: 'Query parameters' },
@@ -271,4 +272,8 @@ export const messages = defineMessages({
     id: 'message.no-event-data',
     defaultMessage: 'No event data is available.',
   },
+  newVersionAvailable: {
+    id: 'new-version-available',
+    defaultMessage: 'A new version of Umami {version} is available!',
+  },
 });

components/pages/event-data/EventDataTable.js

@@ -7,20 +7,25 @@ export function EventDataTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl } = usePageQuery();
 
+  function linkToView(row, cell) {
+    return (
+      <Link href={resolveUrl({ view: row.field, event: row.event })} shallow={true}>
+        {cell}
+      </Link>
+    );
+  }
+
   if (data.length === 0) {
     return <Empty />;
   }
 
   return (
     <GridTable data={data}>
+      <GridColumn name="event" label={formatMessage(labels.event)}>
+        {row => linkToView(row, row.event)}
+      </GridColumn>
       <GridColumn name="field" label={formatMessage(labels.field)}>
-        {row => {
-          return (
-            <Link href={resolveUrl({ view: row.field })} shallow={true}>
-              {row.field}
-            </Link>
-          );
-        }}
+        {row => linkToView(row, row.field)}
       </GridColumn>
       <GridColumn name="total" label={formatMessage(labels.totalRecords)}>
         {({ total }) => total.toLocaleString()}

components/pages/event-data/EventDataValueTable.js

@@ -5,7 +5,7 @@ import Icons from 'components/icons';
 import PageHeader from 'components/layout/PageHeader';
 import Empty from 'components/common/Empty';
 
-export function EventDataTable({ data = [], field }) {
+export function EventDataTable({ data = [], field, event }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl } = usePageQuery();
 
@@ -20,7 +20,9 @@ export function EventDataTable({ data = [], field }) {
             <Text>{formatMessage(labels.back)}</Text>
           </Button>
         </Link>
-        <Text>{field}</Text>
+        <Text>
+          {event} - {field}
+        </Text>
       </>
     );
   };

components/pages/realtime/RealtimeCountries.js

@@ -1,17 +1,26 @@
 import { useCallback } from 'react';
+import { useRouter } from 'next/router';
 import DataTable from 'components/metrics/DataTable';
 import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import useMessages from 'hooks/useMessages';
+import classNames from 'classnames';
+import styles from './RealtimeCountries.module.css';
 
 export function RealtimeCountries({ data }) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
+  const { basePath } = useRouter();
 
   const renderCountryName = useCallback(
-    ({ x }) => <span className={locale}>{countryNames[x]}</span>,
-    [countryNames, locale],
+    ({ x: code }) => (
+      <span className={classNames(locale, styles.row)}>
+        <img src={`${basePath}/images/flags/${code?.toLowerCase() || 'xx'}.png`} alt={code} />
+        {countryNames[code]}
+      </span>
+    ),
+    [countryNames, locale, basePath],
   );
 
   return (

components/pages/realtime/RealtimeCountries.module.css

@@ -0,0 +1,5 @@
+.row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}

components/pages/websites/WebsiteEventData.js

@@ -5,7 +5,7 @@ import { EventDataMetricsBar } from 'components/pages/event-data/EventDataMetric
 import { useDateRange, useApi, usePageQuery } from 'hooks';
 import styles from './WebsiteEventData.module.css';
 
-function useFields(websiteId, field) {
+function useFields(websiteId, field, event) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate } = dateRange;
   const { get, useQuery } = useApi();
@@ -17,6 +17,8 @@ function useFields(websiteId, field) {
         startAt: +startDate,
         endAt: +endDate,
         field,
+        event,
+        withEventNames: true,
       }),
     { enabled: !!(websiteId && startDate && endDate) },
   );
@@ -26,15 +28,15 @@ function useFields(websiteId, field) {
 
 export default function WebsiteEventData({ websiteId }) {
   const {
-    query: { view },
+    query: { view, event },
   } = usePageQuery();
-  const { data } = useFields(websiteId, view);
+  const { data } = useFields(websiteId, view, event);
 
   return (
     <Flexbox className={styles.container} direction="column" gap={20}>
       <EventDataMetricsBar websiteId={websiteId} />
       {!view && <EventDataTable data={data} />}
-      {view && <EventDataValueTable field={view} data={data} />}
+      {view && <EventDataValueTable field={view} event={event} data={data} />}
     </Flexbox>
   );
 }