Skip to content

Commit 04eacb5

Browse files
mpcgridmpcgrid
committed
Change task icon for task filters
Flagged the ui for Download Logs Solved issue with infinite fetching when the table is scrolled to the end Fixed logs query order by
1 parent eb9c2d3 commit 04eacb5

5 files changed

Lines changed: 70 additions & 44 deletions

File tree

‎apps/webapp/app/components/logs/LogsTaskFilter.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
} from "~/components/primitives/Select";
1313
import { useSearchParams } from "~/hooks/useSearchParam";
1414
import { TaskTriggerSourceIcon } from "~/components/runs/v3/TaskTriggerSource";
15+
import { TaskIcon } from "~/assets/icons/TaskIcon";
1516
import { appliedSummary, FilterMenuProvider } from "~/components/runs/v3/SharedFilters";
1617
import { AppliedFilter } from "~/components/primitives/AppliedFilter";
1718

@@ -37,7 +38,7 @@ export function LogsTaskFilter({ possibleTasks }: LogsTaskFilterProps) {
3738
<TasksDropdown
3839
trigger={
3940
<SelectTrigger
40-
icon={<TaskTriggerSourceIcon source="STANDARD" className="size-4" />}
41+
icon={<TaskIcon className="size-4" />}
4142
variant="secondary/small"
4243
shortcut={shortcut}
4344
tooltipTitle="Filter by task"
@@ -62,7 +63,7 @@ export function LogsTaskFilter({ possibleTasks }: LogsTaskFilterProps) {
6263
<Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
6364
<AppliedFilter
6465
label="Task"
65-
icon={<TaskTriggerSourceIcon source="STANDARD" className="size-4" />}
66+
icon={<TaskIcon className="size-4" />}
6667
value={appliedSummary(
6768
selectedTasks.map((v) => {
6869
const task = possibleTasks.find((task) => task.slug === v);

‎apps/webapp/app/hooks/useCanViewLogsPage.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { useEffect } from "react";
2+
import { useTypedFetcher } from "remix-typedjson";
3+
import { useOrganization } from "~/hooks/useOrganizations";
4+
import { type loader as canViewLogsPageLoader } from "~/routes/resources.orgs.$organizationSlug.can-view-logs-page/route";
5+
6+
export function useCanViewLogsPage(): boolean | undefined {
7+
const organization = useOrganization();
8+
const fetcher = useTypedFetcher<typeof canViewLogsPageLoader>();
9+
10+
useEffect(() => {
11+
const url = `/resources/orgs/${organization.slug}/can-view-logs-page`;
12+
fetcher.load(url);
13+
}, [organization.slug]);
14+
15+
return fetcher.data?.canViewLogsPage;
16+
}

‎apps/webapp/app/presenters/v3/LogsListPresenter.server.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -370,8 +370,7 @@ export class LogsListPresenter extends BasePresenter {
370370
);
371371
}
372372

373-
queryBuilder.orderBy("environment_id, toUnixTimestamp(start_time), trace_id DESC");
374-
373+
queryBuilder.orderBy("environment_id DESC, toUnixTimestamp(start_time) DESC, trace_id DESC");
375374
// Limit + 1 to check if there are more results
376375
queryBuilder.limit(pageSize + 1);
377376

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ export const meta: MetaFunction = () => {
5959
];
6060
};
6161

62+
// TODO: Move this to a more appropriate shared location
6263
async function hasLogsPageAccess(
6364
userId: string,
6465
isAdmin: boolean,
@@ -263,7 +264,7 @@ function RetentionNotice({
263264
return (
264265
<Paragraph variant="extra-small" className="flex items-center gap-1 whitespace-nowrap">
265266
<span className="text-text-dimmed">
266-
{logCount.toLocaleString()} logs found, Showing last {retentionDays} {retentionDays === 1 ? 'day' : 'days'}
267+
Showing last {retentionDays} {retentionDays === 1 ? 'day' : 'days'}
267268
</span>
268269
<a
269270
href="https://trigger.dev/pricing"
@@ -362,9 +363,6 @@ function FiltersBar({
362363

363364
function LogsList({
364365
list,
365-
isAdmin,
366-
showDebug,
367-
defaultPeriod,
368366
}: {
369367
list: Exclude<Awaited<UseDataFunctionReturn<typeof loader>["data"]>, { error: string }>; //exclude error, it is handled
370368
isAdmin: boolean;
@@ -424,8 +422,8 @@ function LogsList({
424422
const newLogs = fetcher.data.logs.filter((log) => !existingIds.has(log.id));
425423
if (newLogs.length > 0) {
426424
setAccumulatedLogs((prev) => [...prev, ...newLogs]);
427-
setNextCursor(fetcher.data.pagination.next);
428425
}
426+
setNextCursor(fetcher.data.pagination.next);
429427
}
430428
}, [fetcher.data, fetcher.state, accumulatedLogs, location.search]);
431429

@@ -494,7 +492,6 @@ function LogsList({
494492
onLogSelect={handleLogSelect}
495493
/>
496494
</ResizablePanel>
497-
498495
{/* Side panel for log details */}
499496
{selectedLogId && (
500497
<>

‎apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx‎

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ import { useOrganization } from "~/hooks/useOrganizations";
7373
import { useProject } from "~/hooks/useProject";
7474
import { useSearchParams } from "~/hooks/useSearchParam";
7575
import { useHasAdminAccess } from "~/hooks/useUser";
76+
import { useCanViewLogsPage } from "~/hooks/useCanViewLogsPage";
7677
import { redirectWithErrorMessage } from "~/models/message.server";
7778
import { type Span, SpanPresenter, type SpanRun } from "~/presenters/v3/SpanPresenter.server";
7879
import { logger } from "~/services/logger.server";
@@ -319,6 +320,7 @@ function RunBody({
319320
const { value, replace } = useSearchParams();
320321
const tab = value("tab");
321322
const resetFetcher = useTypedFetcher<typeof resetIdempotencyKeyAction>();
323+
const canViewLogsPage = useCanViewLogsPage();
322324

323325
return (
324326
<div className="grid h-full max-h-full grid-rows-[2.5rem_2rem_1fr_minmax(3.25rem,auto)] overflow-hidden bg-background-bright">
@@ -1012,44 +1014,55 @@ function RunBody({
10121014
</div>
10131015
<div className="flex items-center">
10141016
{run.logsDeletedAt === null ? (
1015-
<div className="flex">
1017+
canViewLogsPage ? (
1018+
<div className="flex">
1019+
<LinkButton
1020+
to={`${v3LogsPath(organization, project, environment)}?runId=${runParam}&from=${
1021+
new Date(run.createdAt).getTime() - 60000
1022+
}`}
1023+
variant="secondary/medium"
1024+
className="rounded-r-none border-r-0"
1025+
>
1026+
View logs
1027+
</LinkButton>
1028+
<Popover>
1029+
<PopoverTrigger asChild>
1030+
<Button
1031+
variant="secondary/medium"
1032+
className="rounded-l-none border-l-charcoal-700 px-1.5"
1033+
>
1034+
<ChevronUpIcon className="size-4 transition group-hover/button:text-text-bright" />
1035+
</Button>
1036+
</PopoverTrigger>
1037+
<PopoverContent className="min-w-[140px] p-1" align="end">
1038+
<PopoverMenuItem
1039+
to={`${v3LogsPath(organization, project, environment)}?runId=${runParam}&from=${
1040+
new Date(run.createdAt).getTime() - 60000
1041+
}`}
1042+
title="View logs"
1043+
icon={ArrowRightIcon}
1044+
leadingIconClassName="text-blue-500"
1045+
/>
1046+
<PopoverMenuItem
1047+
to={v3RunDownloadLogsPath({ friendlyId: runParam })}
1048+
title="Download logs"
1049+
icon={CloudArrowDownIcon}
1050+
leadingIconClassName="text-indigo-500"
1051+
openInNewTab
1052+
/>
1053+
</PopoverContent>
1054+
</Popover>
1055+
</div>
1056+
) : (
10161057
<LinkButton
1017-
to={`${v3LogsPath(organization, project, environment)}?runId=${runParam}&from=${
1018-
new Date(run.createdAt).getTime() - 60000
1019-
}`}
1058+
to={v3RunDownloadLogsPath({ friendlyId: runParam })}
1059+
LeadingIcon={CloudArrowDownIcon}
1060+
leadingIconClassName="text-indigo-400"
10201061
variant="secondary/medium"
1021-
className="rounded-r-none border-r-0"
10221062
>
1023-
View logs
1063+
Download logs
10241064
</LinkButton>
1025-
<Popover>
1026-
<PopoverTrigger asChild>
1027-
<Button
1028-
variant="secondary/medium"
1029-
className="rounded-l-none border-l-charcoal-700 px-1.5"
1030-
>
1031-
<ChevronUpIcon className="size-4 transition group-hover/button:text-text-bright" />
1032-
</Button>
1033-
</PopoverTrigger>
1034-
<PopoverContent className="min-w-[140px] p-1" align="end">
1035-
<PopoverMenuItem
1036-
to={`${v3LogsPath(organization, project, environment)}?runId=${runParam}&from=${
1037-
new Date(run.createdAt).getTime() - 60000
1038-
}`}
1039-
title="View logs"
1040-
icon={ArrowRightIcon}
1041-
leadingIconClassName="text-blue-500"
1042-
/>
1043-
<PopoverMenuItem
1044-
to={v3RunDownloadLogsPath({ friendlyId: runParam })}
1045-
title="Download logs"
1046-
icon={CloudArrowDownIcon}
1047-
leadingIconClassName="text-indigo-500"
1048-
openInNewTab
1049-
/>
1050-
</PopoverContent>
1051-
</Popover>
1052-
</div>
1065+
)
10531066
) : null}
10541067
</div>
10551068
</div>

0 commit comments

Comments
 (0)