render links in event, session activity, realtime activity using hostname instead of domain.

Closes #2861

src/app/(main)/websites/[websiteId]/events/EventsTable.tsx

@@ -25,6 +25,19 @@ export function EventsTable(props: DataTableProps) {
   const { updateParams } = useNavigation();
   const { formatValue } = useFormat();
 
+  const renderLink = (label: string, hostname: string) => {
+    return (
+      <a
+        href={`//${hostname}${label}`}
+        style={{ fontWeight: 'bold' }}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {label}
+      </a>
+    );
+  };
+
   return (
     <DataTable {...props}>
       <DataColumn id="event" label={formatMessage(labels.event)} width="2fr">
@@ -43,7 +56,7 @@ export function EventsTable(props: DataTableProps) {
                 title={row.eventName || row.urlPath}
                 truncate
               >
-                {row.eventName || row.urlPath}
+                {row.eventName || renderLink(row.urlPath, row.hostname)}
               </Text>
               {row.hasData > 0 && <PropertiesButton websiteId={row.websiteId} eventId={row.id} />}
             </Row>

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx

@@ -74,8 +74,9 @@ export function RealtimeLog({ data }: { data: any }) {
     os: string;
     country: string;
     device: string;
+    hostname: string;
   }) => {
-    const { __type, eventName, urlPath, browser, os, country, device } = log;
+    const { __type, eventName, urlPath, browser, os, country, device, hostname } = log;
 
     if (__type === TYPE_EVENT) {
       return (
@@ -86,7 +87,8 @@ export function RealtimeLog({ data }: { data: any }) {
             url: (
               <a
                 key="a"
-                href={`//${website?.domain}${urlPath}`}
+                href={`//${hostname}${urlPath}`}
+                style={{ fontWeight: 'bold' }}
                 target="_blank"
                 rel="noreferrer noopener"
               >
@@ -100,7 +102,12 @@ export function RealtimeLog({ data }: { data: any }) {
 
     if (__type === TYPE_PAGEVIEW) {
       return (
-        <a href={`//${website?.domain}${urlPath}`} target="_blank" rel="noreferrer noopener">
+        <a
+          href={`//${hostname}${urlPath}`}
+          style={{ fontWeight: 'bold' }}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
           {urlPath}
         </a>
       );

src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx

@@ -39,10 +39,23 @@ export function SessionActivity({
   const { isMobile } = useMobile();
   let lastDay = null;
 
+  const renderLink = (label: string, hostname: string) => {
+    return (
+      <a
+        href={`//${hostname}${label}`}
+        style={{ fontWeight: 'bold' }}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {label}
+      </a>
+    );
+  };
+
   return (
     <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <Column gap>
-        {data?.map(({ eventId, createdAt, urlPath, eventName, visitId, hasData }) => {
+        {data?.map(({ eventId, createdAt, urlPath, eventName, visitId, hostname, hasData }) => {
           const showHeader = !lastDay || !isSameDay(new Date(lastDay), new Date(createdAt));
           lastDay = createdAt;
 
@@ -61,7 +74,7 @@ export function SessionActivity({
                       : formatMessage(labels.viewedPage)}
                   </Text>
                   <Text weight="bold" style={{ maxWidth: isMobile ? '400px' : null }} truncate>
-                    {eventName || urlPath}
+                    {eventName || renderLink(urlPath, hostname)}
                   </Text>
                   {hasData > 0 && <PropertiesButton websiteId={websiteId} eventId={eventId} />}
                 </Row>

src/queries/sql/getRealtimeActivity.ts

@@ -30,7 +30,8 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
         session.device,
         session.country,
         website_event.url_path as "urlPath",
-        website_event.referrer_domain as "referrerDomain"
+        website_event.referrer_domain as "referrerDomain",
+        website_event.hostname
     from website_event
     ${cohortQuery}
     inner join session
@@ -65,7 +66,8 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters): Promis
             device,
             country,
             url_path as urlPath,
-            referrer_domain as referrerDomain
+            referrer_domain as referrerDomain,
+            hostname
         from website_event
         ${cohortQuery}
         where website_id = {websiteId:UUID}

src/queries/sql/sessions/getSessionActivity.ts

@@ -29,6 +29,7 @@ async function relationalQuery(websiteId: string, sessionId: string, filters: Qu
       event_type as "eventType",
       event_name as "eventName",
       visit_id as "visitId",
+      hostname,
       event_id IN (select website_event_id 
                    from event_data
                    where website_id = {{websiteId::uuid}}
@@ -60,6 +61,7 @@ async function clickhouseQuery(websiteId: string, sessionId: string, filters: Qu
       event_type as eventType,
       event_name as eventName,
       visit_id as visitId,
+      hostname,
       event_id IN (select event_id 
                    from event_data 
                    where website_id = {websiteId:UUID}