diff --git a/apps/webapp/app/assets/icons/AttemptIcon.tsx b/apps/webapp/app/assets/icons/AttemptIcon.tsx index 9fd9d7f6eb..fc176ea201 100644 --- a/apps/webapp/app/assets/icons/AttemptIcon.tsx +++ b/apps/webapp/app/assets/icons/AttemptIcon.tsx @@ -2,28 +2,18 @@ export function AttemptIcon({ className }: { className?: string }) { return ( - - - - - - - - + ); } diff --git a/apps/webapp/app/assets/icons/ConnectionIcons.tsx b/apps/webapp/app/assets/icons/ConnectionIcons.tsx index 74f1ee5458..5ca22f1ac0 100644 --- a/apps/webapp/app/assets/icons/ConnectionIcons.tsx +++ b/apps/webapp/app/assets/icons/ConnectionIcons.tsx @@ -1,23 +1,23 @@ export function ConnectedIcon({ className }: { className?: string }) { return ( - + + - + ); } diff --git a/apps/webapp/app/assets/icons/EnvironmentIcons.tsx b/apps/webapp/app/assets/icons/EnvironmentIcons.tsx index d8d8a7b66b..02fa27c546 100644 --- a/apps/webapp/app/assets/icons/EnvironmentIcons.tsx +++ b/apps/webapp/app/assets/icons/EnvironmentIcons.tsx @@ -1,92 +1,153 @@ export function DevEnvironmentIcon({ className }: { className?: string }) { return ( - - - - - - - - - - - - - + + + + + + + + ); +} + +export function DevEnvironmentIconSmall({ className }: { className?: string }) { + return ( + + + + + + ); } export function ProdEnvironmentIcon({ className }: { className?: string }) { return ( - + + - - - - - - - - + + ); +} + +export function ProdEnvironmentIconSmall({ className }: { className?: string }) { + return ( + + + ); } export function DeployedEnvironmentIcon({ className }: { className?: string }) { return ( - + + + + + ); +} + +export function DeployedEnvironmentIconSmall({ className }: { className?: string }) { + return ( + + - ); } diff --git a/apps/webapp/app/assets/icons/FunctionIcon.tsx b/apps/webapp/app/assets/icons/FunctionIcon.tsx new file mode 100644 index 0000000000..6016322428 --- /dev/null +++ b/apps/webapp/app/assets/icons/FunctionIcon.tsx @@ -0,0 +1,21 @@ +export function FunctionIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/webapp/app/assets/icons/MiddlewareIcon.tsx b/apps/webapp/app/assets/icons/MiddlewareIcon.tsx new file mode 100644 index 0000000000..c9802f68c0 --- /dev/null +++ b/apps/webapp/app/assets/icons/MiddlewareIcon.tsx @@ -0,0 +1,21 @@ +export function MiddlewareIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/webapp/app/assets/icons/PauseIcon.tsx b/apps/webapp/app/assets/icons/PauseIcon.tsx index ccbc1d9a4d..9da4b7f885 100644 --- a/apps/webapp/app/assets/icons/PauseIcon.tsx +++ b/apps/webapp/app/assets/icons/PauseIcon.tsx @@ -1,10 +1,17 @@ export function PauseIcon({ className }: { className?: string }) { return ( - + diff --git a/apps/webapp/app/assets/icons/RunFunctionIcon.tsx b/apps/webapp/app/assets/icons/RunFunctionIcon.tsx new file mode 100644 index 0000000000..d2866c234d --- /dev/null +++ b/apps/webapp/app/assets/icons/RunFunctionIcon.tsx @@ -0,0 +1,21 @@ +export function RunFunctionIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/webapp/app/assets/icons/RunsIcon.tsx b/apps/webapp/app/assets/icons/RunsIcon.tsx index 8688058a67..a481a041ab 100644 --- a/apps/webapp/app/assets/icons/RunsIcon.tsx +++ b/apps/webapp/app/assets/icons/RunsIcon.tsx @@ -2,15 +2,53 @@ export function RunsIcon({ className }: { className?: string }) { return ( + + ); +} + +export function RunsIconSmall({ className }: { className?: string }) { + return ( + + + + + ); +} + +export function RunsIconExtraSmall({ className }: { className?: string }) { + return ( + + diff --git a/apps/webapp/app/assets/icons/TaskIcon.tsx b/apps/webapp/app/assets/icons/TaskIcon.tsx index 48d9c4181d..9c31a0957f 100644 --- a/apps/webapp/app/assets/icons/TaskIcon.tsx +++ b/apps/webapp/app/assets/icons/TaskIcon.tsx @@ -1,29 +1,25 @@ export function TaskIcon({ className }: { className?: string }) { return ( - - - - - - - - - + + + + ); +} + +export function TaskIconSmall({ className }: { className?: string }) { + return ( + + ); } diff --git a/apps/webapp/app/components/BlankStatePanels.tsx b/apps/webapp/app/components/BlankStatePanels.tsx index 974ba05550..0547d49129 100644 --- a/apps/webapp/app/components/BlankStatePanels.tsx +++ b/apps/webapp/app/components/BlankStatePanels.tsx @@ -81,7 +81,7 @@ export function HasNoTasksDeployed({ environment }: { environment: MinimumEnviro @@ -149,7 +149,7 @@ export function SchedulesNoneAttached() { variant="secondary/medium" LeadingIcon={RectangleGroupIcon} className="inline-flex" - leadingIconClassName="text-sun-500" + leadingIconClassName="text-blue-500" > Use the dashboard @@ -171,7 +171,7 @@ export function BatchesNone() { @@ -195,7 +195,7 @@ export function TestHasNoTasks() { @@ -268,7 +268,7 @@ export function DeploymentsNoneDev() {
@@ -314,7 +314,7 @@ export function AlertsNoneDev() {
@@ -350,7 +350,7 @@ export function AlertsNoneDeployed() {
@@ -391,7 +391,7 @@ export function QueuesHasNoTasks() { ; @@ -20,16 +18,20 @@ export function EnvironmentIcon({ switch (environment.type) { case "DEVELOPMENT": return ( - + ); case "PRODUCTION": return ( - + ); case "STAGING": case "PREVIEW": return ( - + ); } } @@ -43,7 +45,7 @@ export function EnvironmentCombo({ }) { return ( - + ); @@ -89,54 +91,15 @@ export function environmentFullTitle(environment: Environment) { } } -export function environmentTypeTitle(environment: Environment) { - switch (environment.type) { - case "PRODUCTION": - return "Prod"; - case "STAGING": - return "Staging"; - case "DEVELOPMENT": - return "Dev"; - case "PREVIEW": - return "Preview"; - } -} - -export function environmentColorClassName(environment: Environment) { - switch (environment.type) { - case "PRODUCTION": - return "bg-green-500"; - case "STAGING": - return "bg-amber-500"; - case "DEVELOPMENT": - return "bg-pink-500"; - case "PREVIEW": - return "bg-yellow-500"; - } -} - -export function environmentBorderClassName(environment: Environment) { - switch (environment.type) { - case "PRODUCTION": - return "border-green-500/50"; - case "STAGING": - return "border-amber-500/50"; - case "DEVELOPMENT": - return "border-pink-500/50"; - case "PREVIEW": - return "border-yellow-500/50"; - } -} - export function environmentTextClassName(environment: Environment) { switch (environment.type) { case "PRODUCTION": - return "text-green-500"; + return "text-prod"; case "STAGING": - return "text-amber-500"; + return "text-staging"; case "DEVELOPMENT": - return "text-pink-500"; + return "text-dev"; case "PREVIEW": - return "text-yellow-500"; + return "text-preview"; } } diff --git a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx index ff94af7b01..c041683e04 100644 --- a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx +++ b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx @@ -39,7 +39,7 @@ export function RegenerateApiKeyModal({ id, title }: ModalProps) { - {`Regenerate ${title.toUpperCase()} environment key`} + {`Regenerate ${title} environment key`} diff --git a/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx b/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx index 31a7c8abf2..f4d67bfac4 100644 --- a/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx +++ b/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx @@ -50,8 +50,10 @@ export function OrganizationSettingsSideMenu({
-
- +
+
+ +
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx index 7c5a45274f..aa7ec6a1f3 100644 --- a/apps/webapp/app/components/navigation/SideMenu.tsx +++ b/apps/webapp/app/components/navigation/SideMenu.tsx @@ -21,8 +21,8 @@ import { useNavigation } from "@remix-run/react"; import { useEffect, useRef, useState, type ReactNode } from "react"; import simplur from "simplur"; import { ConnectedIcon, DisconnectedIcon } from "~/assets/icons/ConnectionIcons"; -import { RunsIcon } from "~/assets/icons/RunsIcon"; -import { TaskIcon } from "~/assets/icons/TaskIcon"; +import { RunsIconExtraSmall, RunsIconSmall } from "~/assets/icons/RunsIcon"; +import { TaskIconSmall } from "~/assets/icons/TaskIcon"; import { Avatar } from "~/components/primitives/Avatar"; import { type MatchedEnvironment } from "~/hooks/useEnvironment"; import { type MatchedOrganization } from "~/hooks/useOrganizations"; @@ -152,7 +152,7 @@ export function SideMenu({
-
+
@@ -226,28 +226,28 @@ export function SideMenu({ @@ -523,32 +523,30 @@ export function DevConnection() { return ( -
- - - -
- -
- - - {isConnected ? "Your dev server is connected" : "Your dev server is not connected"} - - - -
+ + + +
+ +
+ + + {isConnected ? "Your dev server is connected" : "Your dev server is not connected"} + + + {isConnected ? "Your dev server is connected" : "Your dev server is not connected"} diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx index 274ebfc582..af37003575 100644 --- a/apps/webapp/app/components/navigation/SideMenuSection.tsx +++ b/apps/webapp/app/components/navigation/SideMenuSection.tsx @@ -29,7 +29,7 @@ export function SideMenuSection({ return (

{title}

diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx index c5244171f8..6b5f22c385 100644 --- a/apps/webapp/app/components/primitives/Buttons.tsx +++ b/apps/webapp/app/components/primitives/Buttons.tsx @@ -142,7 +142,7 @@ const variant = { textColor: "text-text-bright", button: "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-charcoal-750", - icon: "h-4", + icon: "h-[1.125rem]", iconSpacing: "gap-x-1.5", shortcutVariant: undefined, shortcut: undefined, diff --git a/apps/webapp/app/components/runs/v3/RunIcon.tsx b/apps/webapp/app/components/runs/v3/RunIcon.tsx index dc5f63bc61..f482c5a700 100644 --- a/apps/webapp/app/components/runs/v3/RunIcon.tsx +++ b/apps/webapp/app/components/runs/v3/RunIcon.tsx @@ -13,6 +13,9 @@ import { tablerIcons } from "~/utils/tablerIcons"; import tablerSpritePath from "~/components/primitives/tabler-sprite.svg"; import { TaskCachedIcon } from "~/assets/icons/TaskCachedIcon"; import { PauseIcon } from "~/assets/icons/PauseIcon"; +import { RunFunctionIcon } from "~/assets/icons/RunFunctionIcon"; +import { MiddlewareIcon } from "~/assets/icons/MiddlewareIcon"; +import { FunctionIcon } from "~/assets/icons/FunctionIcon"; import { TriggerIcon } from "~/assets/icons/TriggerIcon"; type TaskIconProps = { @@ -76,31 +79,24 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) { case "warn": return ; case "error": - return ; + return ; case "fatal": - return ; + return ; case "task-middleware": - return ; + return ; case "task-fn-run": - return ; + return ; case "task-hook-init": - return ; case "task-hook-onStart": - return ; case "task-hook-onSuccess": - return ; - case "task-hook-onFailure": - return ; - case "task-hook-onComplete": - return ; case "task-hook-onWait": - return ; case "task-hook-onResume": - return ; - case "task-hook-catchError": - return ; + case "task-hook-onComplete": case "task-hook-cleanup": - return ; + return ; + case "task-hook-onFailure": + case "task-hook-catchError": + return ; } return ; diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx index 7e00bec892..dc417473e9 100644 --- a/apps/webapp/app/components/runs/v3/SharedFilters.tsx +++ b/apps/webapp/app/components/runs/v3/SharedFilters.tsx @@ -2,7 +2,6 @@ import * as Ariakit from "@ariakit/react"; import type { RuntimeEnvironment } from "@trigger.dev/database"; import type { ReactNode } from "react"; import { startTransition, useCallback, useMemo, useState } from "react"; -import { EnvironmentLabel, environmentTitle } from "~/components/environments/EnvironmentLabel"; import { AppliedFilter } from "~/components/primitives/AppliedFilter"; import { DateField } from "~/components/primitives/DateField"; import { DateTime } from "~/components/primitives/DateTime"; @@ -14,7 +13,6 @@ import { SelectList, SelectPopover, SelectProvider, - shortcutFromIndex, } from "~/components/primitives/Select"; import { useSearchParams } from "~/hooks/useSearchParam"; import { Button } from "../../primitives/Buttons"; @@ -51,102 +49,6 @@ export function FilterMenuProvider({ ); } -export function EnvironmentsDropdown({ - trigger, - clearSearchValue, - searchValue, - onClose, - possibleEnvironments, -}: { - trigger: ReactNode; - clearSearchValue: () => void; - searchValue: string; - onClose?: () => void; - possibleEnvironments: DisplayableEnvironment[]; -}) { - const { values, replace } = useSearchParams(); - - const handleChange = (values: string[]) => { - clearSearchValue(); - replace({ environments: values, cursor: undefined, direction: undefined }); - }; - - const filtered = useMemo(() => { - return possibleEnvironments.filter((item) => { - const title = environmentTitle(item, item.userName); - return title.toLowerCase().includes(searchValue.toLowerCase()); - }); - }, [searchValue, possibleEnvironments]); - - return ( - - {trigger} - { - if (onClose) { - onClose(); - return false; - } - - return true; - }} - > - - - {filtered.map((item, index) => ( - - - - ))} - - - - ); -} - -export function AppliedEnvironmentFilter({ - possibleEnvironments, -}: { - possibleEnvironments: DisplayableEnvironment[]; -}) { - const { values, del } = useSearchParams(); - - if (values("environments").length === 0) { - return null; - } - - return ( - - {(search, setSearch) => ( - }> - { - const environment = possibleEnvironments.find((env) => env.id === v); - return environment ? environmentTitle(environment, environment.userName) : v; - }) - )} - onRemove={() => del(["environments", "cursor", "direction"])} - /> - - } - searchValue={search} - clearSearchValue={() => setSearch("")} - possibleEnvironments={possibleEnvironments} - /> - )} - - ); -} - const timePeriods = [ { label: "Last 5 mins", diff --git a/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx b/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx index 3ef7dac7b8..23948508b0 100644 --- a/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx +++ b/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx @@ -1,6 +1,6 @@ import { ClockIcon } from "@heroicons/react/20/solid"; -import { TaskTriggerSource } from "@trigger.dev/database"; -import { TaskIcon } from "~/assets/icons/TaskIcon"; +import { type TaskTriggerSource } from "@trigger.dev/database"; +import { TaskIconSmall } from "~/assets/icons/TaskIcon"; import { cn } from "~/utils/cn"; export function TaskTriggerSourceIcon({ @@ -12,14 +12,10 @@ export function TaskTriggerSourceIcon({ }) { switch (source) { case "STANDARD": { - return ( -
- -
- ); + return ; } case "SCHEDULED": { - return ; + return ; } } } diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx index fbfcee5274..74981b2756 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx @@ -659,7 +659,7 @@ function HelpfulInfoHasTasks({ onClose }: { onClose: () => void }) { />
- + Example tasks
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx index b98f959bbd..cedac5ec02 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx @@ -3,7 +3,7 @@ import { type MetaFunction } from "@remix-run/react"; import { type LoaderFunctionArgs } from "@remix-run/server-runtime"; import { typedjson, useTypedLoaderData } from "remix-typedjson"; import { AdminDebugTooltip } from "~/components/admin/debugTooltip"; -import { EnvironmentCombo, environmentTitle } from "~/components/environments/EnvironmentLabel"; +import { EnvironmentCombo, environmentFullTitle } from "~/components/environments/EnvironmentLabel"; import { RegenerateApiKeyModal } from "~/components/environments/RegenerateApiKeyModal"; import { PageBody, PageContainer } from "~/components/layout/AppLayout"; import { LinkButton } from "~/components/primitives/Buttons"; @@ -124,7 +124,7 @@ export default function Page() { popoverContent={ } > diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx index 0fc0a7b5b1..00bb1f0736 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx @@ -10,15 +10,11 @@ import { parse } from "@conform-to/zod"; import { LockClosedIcon, LockOpenIcon, PlusIcon, XMarkIcon } from "@heroicons/react/20/solid"; import { Form, useActionData, useNavigate, useNavigation } from "@remix-run/react"; import { ActionFunctionArgs, LoaderFunctionArgs, json } from "@remix-run/server-runtime"; +import dotenv from "dotenv"; import { RefObject, useCallback, useEffect, useRef, useState } from "react"; import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson"; import { z } from "zod"; -import { - environmentTextClassName, - environmentTitle, - EnvironmentCombo, - EnvironmentLabel, -} from "~/components/environments/EnvironmentLabel"; +import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel"; import { Button, LinkButton } from "~/components/primitives/Buttons"; import { CheckboxWithLabel } from "~/components/primitives/Checkbox"; import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog"; @@ -29,8 +25,17 @@ import { Hint } from "~/components/primitives/Hint"; import { Input } from "~/components/primitives/Input"; import { InputGroup } from "~/components/primitives/InputGroup"; import { Label } from "~/components/primitives/Label"; +import { Paragraph } from "~/components/primitives/Paragraph"; import { Switch } from "~/components/primitives/Switch"; +import { TextLink } from "~/components/primitives/TextLink"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "~/components/primitives/Tooltip"; import { prisma } from "~/db.server"; +import { useEnvironment } from "~/hooks/useEnvironment"; import { useList } from "~/hooks/useList"; import { useOrganization } from "~/hooks/useOrganizations"; import { useProject } from "~/hooks/useProject"; @@ -45,16 +50,6 @@ import { } from "~/utils/pathBuilder"; import { EnvironmentVariablesRepository } from "~/v3/environmentVariables/environmentVariablesRepository.server"; import { EnvironmentVariableKey } from "~/v3/environmentVariables/repository"; -import dotenv from "dotenv"; -import { Paragraph } from "~/components/primitives/Paragraph"; -import { TextLink } from "~/components/primitives/TextLink"; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "~/components/primitives/Tooltip"; -import { useEnvironment } from "~/hooks/useEnvironment"; export const loader = async ({ request, params }: LoaderFunctionArgs) => { const userId = await requireUserId(request); diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx index c3f64d8743..472fb01b69 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx @@ -13,9 +13,10 @@ import { type RuntimeEnvironmentType } from "@trigger.dev/database"; import { useEffect, useState } from "react"; import { typedjson, useTypedLoaderData } from "remix-typedjson"; import { z } from "zod"; -import { TaskIcon } from "~/assets/icons/TaskIcon"; +import { TaskIconSmall } from "~/assets/icons/TaskIcon"; import upgradeForQueuesPath from "~/assets/images/queues-dashboard.png"; import { AdminDebugTooltip } from "~/components/admin/debugTooltip"; +import { QueuesHasNoTasks } from "~/components/BlankStatePanels"; import { environmentFullTitle } from "~/components/environments/EnvironmentLabel"; import { Feedback } from "~/components/Feedback"; import { PageBody, PageContainer } from "~/components/layout/AppLayout"; @@ -60,7 +61,6 @@ import { docsPath, EnvironmentParamSchema, v3BillingPath } from "~/utils/pathBui import { PauseEnvironmentService } from "~/v3/services/pauseEnvironment.server"; import { PauseQueueService } from "~/v3/services/pauseQueue.server"; import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route"; -import { QueuesHasNoTasks } from "~/components/BlankStatePanels"; const SearchParamsSchema = z.object({ page: z.coerce.number().min(1).default(1), @@ -336,9 +336,9 @@ export default function Page() { {queue.type === "task" ? ( @@ -350,7 +350,7 @@ export default function Page() { button={ diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx index ce57978112..cbd2875206 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx @@ -631,11 +631,11 @@ function TasksTreeView({
-
+
{node.data.isRoot && !rootRun && Root} diff --git a/apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx b/apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx index ea79616a4e..7ad6b1c6c5 100644 --- a/apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx +++ b/apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx @@ -1,9 +1,9 @@ import type { ActionFunctionArgs } from "@remix-run/server-runtime"; import { z } from "zod"; +import { environmentFullTitle } from "~/components/environments/EnvironmentLabel"; import { regenerateApiKey } from "~/models/api-key.server"; -import { requireUserId } from "~/services/session.server"; import { jsonWithErrorMessage, jsonWithSuccessMessage } from "~/models/message.server"; -import { environmentTitle } from "~/components/environments/EnvironmentLabel"; +import { requireUserId } from "~/services/session.server"; const ParamsSchema = z.object({ environmentId: z.string(), @@ -25,7 +25,7 @@ export async function action({ request, params }: ActionFunctionArgs) { return jsonWithSuccessMessage( { ok: true }, request, - `API keys regenerated for ${environmentTitle(updatedEnvironment)} environment` + `API keys regenerated for ${environmentFullTitle(updatedEnvironment)} environment` ); } catch (error) { const message = error instanceof Error ? error.message : "Unknown error"; diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx index eee458ab4b..3d7047628b 100644 --- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx +++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx @@ -200,7 +200,7 @@ function SpanBody({ @@ -334,7 +334,7 @@ function RunBody({ diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js index 43200351bc..db62f107f0 100644 --- a/apps/webapp/tailwind.config.js +++ b/apps/webapp/tailwind.config.js @@ -149,8 +149,24 @@ const warning = colors.amber[500]; const error = colors.rose[600]; const devEnv = colors.pink[500]; const stagingEnv = colors.amber[400]; +const previewEnv = colors.amber[400]; const prodEnv = mint[500]; +/** Icon colors */ +const tasks = colors.blue[500]; +const runs = colors.indigo[500]; +const batches = colors.pink[500]; +const schedules = colors.yellow[500]; +const queues = colors.purple[500]; +const deployments = colors.green[500]; +const tests = colors.lime[500]; +const apiKeys = colors.amber[500]; +const environmentVariables = colors.pink[500]; +const alerts = colors.red[500]; +const projectSettings = colors.blue[500]; +const orgSettings = colors.blue[500]; +const docs = colors.blue[500]; + /** Other variables */ const radius = "0.5rem"; @@ -211,6 +227,20 @@ module.exports = { dev: devEnv, staging: stagingEnv, prod: prodEnv, + preview: previewEnv, + tasks, + runs, + batches, + schedules, + queues, + deployments, + tests, + apiKeys, + environmentVariables, + alerts, + projectSettings, + orgSettings, + docs, }, focusStyles: { outline: "1px solid", diff --git a/packages/core/src/v3/workers/taskExecutor.ts b/packages/core/src/v3/workers/taskExecutor.ts index 355dbec95c..98e6b1e575 100644 --- a/packages/core/src/v3/workers/taskExecutor.ts +++ b/packages/core/src/v3/workers/taskExecutor.ts @@ -9,7 +9,13 @@ import { sanitizeError, TaskPayloadParsedError, } from "../errors.js"; -import { flattenAttributes, lifecycleHooks, runMetadata, waitUntil } from "../index.js"; +import { + accessoryAttributes, + flattenAttributes, + lifecycleHooks, + runMetadata, + waitUntil, +} from "../index.js"; import { AnyOnMiddlewareHookFunction, RegisteredHookFunction, @@ -314,13 +320,14 @@ export class TaskExecutor { (next, hook) => { return async () => { await this._tracer.startActiveSpan( - hook.name ? `middleware/${hook.name}` : "middleware", + "middleware()", async (span) => { await hook.fn({ payload, ctx, signal, task: this.task.id, next }); }, { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-middleware", + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ); @@ -376,7 +383,7 @@ export class TaskExecutor { return runTimelineMetrics.measureMetric("trigger.dev/execution", "run", async () => { return await this._tracer.startActiveSpan( - "run", + "run()", async (span) => { if (abortPromise) { // Race between the run function and the abort promise @@ -413,7 +420,7 @@ export class TaskExecutor { for (const hook of globalWaitHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `onWait/${hook.name}` : "onWait/global", + "onWait()", async (span) => { await hook.fn({ payload, ctx, signal, task: this.task.id, wait, init: initOutput }); }, @@ -421,6 +428,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onWait", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -434,7 +442,7 @@ export class TaskExecutor { if (taskWaitHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "onWait/task", + "onWait()", async (span) => { await taskWaitHook({ payload, @@ -449,6 +457,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onWait", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -483,7 +492,7 @@ export class TaskExecutor { for (const hook of globalResumeHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `onResume/${hook.name}` : "onResume/global", + "onResume()", async (span) => { await hook.fn({ payload, ctx, signal, task: this.task.id, wait, init: initOutput }); }, @@ -491,6 +500,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onResume", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -504,7 +514,7 @@ export class TaskExecutor { if (taskResumeHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "onResume/task", + "onResume()", async (span) => { await taskResumeHook({ payload, @@ -519,6 +529,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onResume", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -549,7 +560,7 @@ export class TaskExecutor { for (const hook of globalInitHooks) { const [hookError, result] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `init/${hook.name}` : "init/global", + "init()", async (span) => { const result = await hook.fn({ payload, ctx, signal, task: this.task.id }); @@ -564,6 +575,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-init", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -584,7 +596,7 @@ export class TaskExecutor { if (taskInitHook) { const [hookError, taskResult] = await tryCatch( this._tracer.startActiveSpan( - "init/task", + "init()", async (span) => { const result = await taskInitHook({ payload, ctx, signal, task: this.task.id }); @@ -599,6 +611,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-init", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -646,7 +659,7 @@ export class TaskExecutor { for (const hook of globalSuccessHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `onSuccess/${hook.name}` : "onSuccess/global", + "onSuccess()", async (span) => { await hook.fn({ payload, @@ -661,6 +674,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onSuccess", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -674,7 +688,7 @@ export class TaskExecutor { if (taskSuccessHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "onSuccess/task", + "onSuccess()", async (span) => { await taskSuccessHook({ payload, @@ -689,6 +703,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onSuccess", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -719,7 +734,7 @@ export class TaskExecutor { for (const hook of globalFailureHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `onFailure/${hook.name}` : "onFailure/global", + "onFailure()", async (span) => { await hook.fn({ payload, @@ -734,6 +749,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onFailure", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -747,7 +763,7 @@ export class TaskExecutor { if (taskFailureHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "onFailure/task", + "onFailure()", async (span) => { await taskFailureHook({ payload, @@ -762,6 +778,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onFailure", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -803,7 +820,7 @@ export class TaskExecutor { for (const hook of globalStartHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `onStart/${hook.name}` : "onStart/global", + "onStart()", async (span) => { await hook.fn({ payload, ctx, signal, task: this.task.id, init: initOutput }); }, @@ -811,6 +828,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onStart", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -824,7 +842,7 @@ export class TaskExecutor { if (taskStartHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "onStart/task", + "onStart()", async (span) => { await taskStartHook({ payload, @@ -838,6 +856,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onStart", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -877,7 +896,7 @@ export class TaskExecutor { for (const hook of globalCleanupHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `cleanup/${hook.name}` : "cleanup/global", + "cleanup()", async (span) => { await hook.fn({ payload, @@ -891,6 +910,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-cleanup", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -904,7 +924,7 @@ export class TaskExecutor { if (taskCleanupHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "cleanup/task", + "cleanup()", async (span) => { await taskCleanupHook({ payload, @@ -918,6 +938,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-cleanup", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -1134,7 +1155,7 @@ export class TaskExecutor { for (const hook of globalCompleteHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `onComplete/${hook.name}` : "onComplete/global", + "onComplete()", async (span) => { await hook.fn({ payload, @@ -1149,6 +1170,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onComplete", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -1162,7 +1184,7 @@ export class TaskExecutor { if (taskCompleteHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "onComplete/task", + "onComplete()", async (span) => { await taskCompleteHook({ payload, @@ -1177,6 +1199,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onComplete", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -1206,4 +1229,16 @@ export class TaskExecutor { }, } satisfies TaskRunExecutionResult; } + + #lifecycleHookAccessoryAttributes(name?: string) { + return accessoryAttributes({ + items: [ + { + text: name ?? "global", + variant: "normal", + }, + ], + style: "codepath", + }); + } }