Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(frontend): fix table column widths and move paginator to top right #1232

Merged
merged 1 commit into from
Sep 11, 2024
Merged

chore(frontend): fix table column widths and move paginator to top right #1232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions frontend/dashboard/app/[teamId]/sessions/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,29 +140,29 @@ export default function SessionsOverview({ params }: { params: { teamId: string
}} />
</div>
<div className="py-1" />
<div className="table border border-black rounded-md w-full">
<div className="table border border-black rounded-md w-full" style={{ tableLayout: "fixed" }}>
<div className="table-header-group bg-neutral-950">
<div className="table-row text-white font-display">
<div className="table-cell w-96 p-4">Session Id</div>
<div className="table-cell w-56 py-4 px-2 text-center">Start Time</div>
<div className="table-cell w-56 p-4 text-center">Duration</div>
<div className="table-cell w-48 p-4 text-center">Start Time</div>
<div className="table-cell w-48 p-4 text-center">Duration</div>
</div>
</div>
<div className="table-row-group font-sans">
{sessionsOverview.results.map(({ session_id, app_id, first_event_time, duration, matched_free_text, attribute }) => (
<Link key={session_id} href={`/${params.teamId}/sessions/${app_id}/${session_id}`} className="table-row border-b-2 border-black hover:bg-yellow-200 focus:bg-yellow-200 active:bg-yellow-300 ">
<div className="table-cell w-96 p-4">
<div className="table-cell p-4">
<p className='truncate'>{session_id}</p>
<div className='py-1' />
<p className='text-xs truncate text-gray-500'>{"v" + attribute.app_version + "(" + attribute.app_build + "), " + attribute.os_name + " " + attribute.os_version + ", " + attribute.device_manufacturer + " " + attribute.device_model}</p>
{matched_free_text !== "" && <p className='p-1 mt-2 w-fit text-xs truncate border border-black rounded-md '>{"Matched " + matched_free_text}</p>}
</div>
<div className="table-cell w-48 p-4 text-center">
<div className="table-cell p-4 text-center">
<p className='truncate'>{formatDateToHumanReadableDate(first_event_time)}</p>
<div className='py-1' />
<p className='text-xs truncate'>{formatDateToHumanReadableTime(first_event_time)}</p>
</div>
<div className="table-cell w-48 p-4 truncate text-center">{(duration as unknown as number) === 0 ? 'N/A' : formatMillisToHumanReadable(duration as unknown as number)}</div>
<div className="table-cell p-4 text-center truncate">{(duration as unknown as number) === 0 ? 'N/A' : formatMillisToHumanReadable(duration as unknown as number)}</div>
</Link>
))}
</div>
Expand Down
34 changes: 18 additions & 16 deletions frontend/dashboard/app/components/exceptions_overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,19 +123,31 @@ export const ExceptionsOverview: React.FC<ExceptionsOverviewProps> = ({ exceptio
startDate={selectedFilters.selectedStartDate}
endDate={selectedFilters.selectedEndDate}
appVersions={selectedFilters.selectedVersions} />
<div className="py-8" />
<div className="table border border-black rounded-md w-full">
<div className="py-4" />
<div className='self-end'>
<Paginator prevEnabled={exceptionsOverview.meta.previous} nextEnabled={exceptionsOverview.meta.next} displayText={paginationRange.start + ' - ' + paginationRange.end}
onNext={() => {
setPaginationRange({ start: paginationRange.start + paginationOffset, end: paginationRange.end + paginationOffset })
setPaginationDirection(PaginationDirection.Forward)
}}
onPrev={() => {
setPaginationRange({ start: paginationRange.start - paginationOffset, end: paginationRange.end - paginationOffset })
setPaginationDirection(PaginationDirection.Backward)
}} />
</div>
<div className="py-1" />
<div className="table border border-black rounded-md w-full" style={{ tableLayout: "fixed" }}>
<div className="table-header-group bg-neutral-950">
<div className="table-row text-white font-display">
<div className="table-cell p-4 py-4">{exceptionsType === ExceptionsType.Crash ? 'Crash' : 'ANR'} Name</div>
<div className="table-cell p-4 py-4">Instances</div>
<div className="table-cell p-4 py-4">Percentage contribution</div>
<div className="table-cell w-96 p-4">{exceptionsType === ExceptionsType.Crash ? 'Crash' : 'ANR'} Name</div>
<div className="table-cell w-48 p-4 text-center">Instances</div>
<div className="table-cell w-48 p-4 text-center">Percentage contribution</div>
</div>
</div>
<div className="table-row-group font-sans">
{exceptionsOverview.results.map(({ id, type, message, method_name, file_name, line_number, count, percentage_contribution }) => (
<Link key={id} href={`/${teamId}/${exceptionsType === ExceptionsType.Crash ? 'crashes' : 'anrs'}/${selectedFilters.selectedApp.id}/${id}/${type + "@" + file_name}`} className="table-row border-b-2 border-black hover:bg-yellow-200 focus:bg-yellow-200 active:bg-yellow-300 ">
<div className="table-cell p-4 max-w-2xl">
<div className="table-cell p-4">
<p className='truncate'>{file_name + ": " + method_name + "()"}</p>
<div className='py-1' />
<p className='text-xs truncate text-gray-500'>{type + ":" + message}</p>
Expand All @@ -146,16 +158,6 @@ export const ExceptionsOverview: React.FC<ExceptionsOverviewProps> = ({ exceptio
))}
</div>
</div>
<div className="py-2" />
<Paginator prevEnabled={exceptionsOverview.meta.previous} nextEnabled={exceptionsOverview.meta.next} displayText={paginationRange.start + ' - ' + paginationRange.end}
onNext={() => {
setPaginationRange({ start: paginationRange.start + paginationOffset, end: paginationRange.end + paginationOffset })
setPaginationDirection(PaginationDirection.Forward)
}}
onPrev={() => {
setPaginationRange({ start: paginationRange.start - paginationOffset, end: paginationRange.end - paginationOffset })
setPaginationDirection(PaginationDirection.Backward)
}} />
</div>}
</div>
)
Expand Down