From 10f65cae685314fb857ea27813ab8bc771790f92 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Tue, 30 Jul 2024 22:10:32 -0700 Subject: [PATCH] Responsive styles for session page. --- .../sessions/[sessionId]/SessionData.module.css | 6 ++---- .../[websiteId]/sessions/[sessionId]/SessionData.tsx | 2 +- .../[sessionId]/SessionDetailsPage.module.css | 5 ++++- .../sessions/[sessionId]/SessionInfo.module.css | 4 ++++ .../[websiteId]/sessions/[sessionId]/index.ts | 2 +- src/queries/analytics/sessions/getSessionData.ts | 1 + src/queries/analytics/sessions/getWebsiteSession.ts | 12 +++++------- 7 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.module.css b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.module.css index 2057622b..072172f6 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.module.css +++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.module.css @@ -2,7 +2,6 @@ display: flex; flex-direction: column; gap: 20px; - width: 200px; position: relative; } @@ -22,11 +21,10 @@ } .type { - font-size: 10px; - text-transform: uppercase; + font-size: 11px; padding: 0 6px; border-radius: 4px; - border: 1px solid var(--base300); + border: 1px solid var(--base400); } .name { diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx index 2d99f8b3..7e583f18 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx @@ -1,8 +1,8 @@ import { Loading, TextOverflow } from 'react-basics'; import { useMessages, useSessionData } from 'components/hooks'; import Empty from 'components/common/Empty'; -import styles from './SessionData.module.css'; import { DATA_TYPES } from 'lib/constants'; +import styles from './SessionData.module.css'; export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) { const { formatMessage, labels } = useMessages(); diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.module.css b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.module.css index 8e2667f4..7058cd79 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.module.css +++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.module.css @@ -1,6 +1,6 @@ .page { display: grid; - grid-template-columns: 300px 1fr max-content; + grid-template-columns: max-content 1fr max-content; margin-bottom: 40px; position: relative; } @@ -11,6 +11,7 @@ align-items: center; justify-content: flex-start; gap: 20px; + width: 300px; padding-right: 20px; border-right: 1px solid var(--base300); position: relative; @@ -25,6 +26,7 @@ } .data { + width: 300px; border-left: 1px solid var(--base300); padding-left: 20px; position: relative; @@ -40,5 +42,6 @@ .sidebar, .data { border: 0; + width: auto; } } diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.module.css b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.module.css index c17eadf5..de6e796f 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.module.css +++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.module.css @@ -3,6 +3,10 @@ gap: 10px; } +.info dl { + width: 100%; +} + .info dt { color: var(--font-color200); font-weight: bold; diff --git a/src/pages/api/websites/[websiteId]/sessions/[sessionId]/index.ts b/src/pages/api/websites/[websiteId]/sessions/[sessionId]/index.ts index f627a208..b2665c7c 100644 --- a/src/pages/api/websites/[websiteId]/sessions/[sessionId]/index.ts +++ b/src/pages/api/websites/[websiteId]/sessions/[sessionId]/index.ts @@ -33,7 +33,7 @@ export default async ( return unauthorized(res); } - const data = await getWebsiteSession(websiteId, sessionId); + const data = await getWebsiteSession(sessionId); return ok(res, data); } diff --git a/src/queries/analytics/sessions/getSessionData.ts b/src/queries/analytics/sessions/getSessionData.ts index e3106b27..8b78fc86 100644 --- a/src/queries/analytics/sessions/getSessionData.ts +++ b/src/queries/analytics/sessions/getSessionData.ts @@ -35,6 +35,7 @@ async function clickhouseQuery(websiteId: string, sessionId: string) { from session_data where website_id = {websiteId:UUID} and session_id = {sessionId:UUID} + order by data_key asc `, { websiteId, sessionId }, ); diff --git a/src/queries/analytics/sessions/getWebsiteSession.ts b/src/queries/analytics/sessions/getWebsiteSession.ts index df3e8a04..38bc230c 100644 --- a/src/queries/analytics/sessions/getWebsiteSession.ts +++ b/src/queries/analytics/sessions/getWebsiteSession.ts @@ -2,23 +2,22 @@ import prisma from 'lib/prisma'; import clickhouse from 'lib/clickhouse'; import { runQuery, PRISMA, CLICKHOUSE } from 'lib/db'; -export async function getWebsiteSession(...args: [websiteId: string, sessionId: string]) { +export async function getWebsiteSession(...args: [sessionId: string]) { return runQuery({ [PRISMA]: () => relationalQuery(...args), [CLICKHOUSE]: () => clickhouseQuery(...args), }); } -async function relationalQuery(websiteId: string, sessionId: string) { +async function relationalQuery(sessionId: string) { return prisma.client.session.findUnique({ where: { id: sessionId, - websiteId, }, }); } -async function clickhouseQuery(websiteId: string, sessionId: string) { +async function clickhouseQuery(sessionId: string) { const { rawQuery } = clickhouse; return rawQuery( @@ -41,10 +40,9 @@ async function clickhouseQuery(websiteId: string, sessionId: string) { sumIf(1, event_type = 1) as views, sumIf(1, event_type = 2) as events from website_event - where website_id = {websiteId:UUID} - and session_id = {sessionId:UUID} + where session_id = {sessionId:UUID} group by session_id, website_id, hostname, browser, os, device, screen, language, country, subdivision1, city `, - { websiteId, sessionId }, + { sessionId }, ).then(result => result?.[0]); }