Skip to content

cleans up pipelineDetails v1 #1479

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

Merged
Mbeaulne merged 1 commit into from
Dec 6, 2025
Merged

cleans up pipelineDetails v1 #1479

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
23 changes: 10 additions & 13 deletions src/components/Editor/PipelineDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useValidationIssueNavigation } from "@/components/Editor/hooks/useValid
import { CopyText } from "@/components/shared/CopyText/CopyText";
import { Button } from "@/components/ui/button";
import { Icon } from "@/components/ui/icon";
import { InlineStack } from "@/components/ui/layout";
import { BlockStack, InlineStack } from "@/components/ui/layout";
import useToastNotification from "@/hooks/useToastNotification";
import { useComponentSpec } from "@/providers/ComponentSpecProvider";
import { useContextPanel } from "@/providers/ContextPanelProvider";
Expand Down Expand Up @@ -128,25 +128,22 @@ const PipelineDetails = () => {
const annotations = componentSpec.metadata?.annotations || {};

return (
<div
className="p-2 flex flex-col gap-6 h-full"
<BlockStack
gap="6"
className="p-2 h-full"
data-context-panel="pipeline-details"
>
{/* Header */}
<div className="flex items-center gap-2 max-w-[90%]">
<CopyText className="text-lg font-semibold" alwaysShowButton>
{componentSpec.name ?? "Unnamed Pipeline"}
</CopyText>
<CopyText className="text-lg font-semibold">
{componentSpec.name ?? "Unnamed Pipeline"}
</CopyText>
<InlineStack gap="2">
<RenamePipeline />
</div>

<div className="flex gap-2 flex-wrap items-center">
<TaskImplementation
displayName={componentSpec.name ?? "Pipeline"}
componentSpec={componentSpec}
showInlineContent={false}
/>
</div>
</InlineStack>

{/* General Metadata */}
<div className="flex flex-col gap-2 text-xs text-secondary-foreground mb-2">
Expand Down Expand Up @@ -326,7 +323,7 @@ const PipelineDetails = () => {
onIssueSelect={handleIssueClick}
/>
</div>
</div>
</BlockStack>
);
};

Expand Down
6 changes: 3 additions & 3 deletions src/components/Editor/RenamePipeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useLocation, useNavigate } from "@tanstack/react-router";
import { Edit3 } from "lucide-react";

import { Button } from "@/components/ui/button";
import TooltipButton from "@/components/shared/Buttons/TooltipButton";
import useToastNotification from "@/hooks/useToastNotification";
import { useComponentSpec } from "@/providers/ComponentSpecProvider";
import { APP_ROUTES } from "@/routes/router";
Expand Down Expand Up @@ -48,9 +48,9 @@ const RenamePipeline = () => {
return (
<PipelineNameDialog
trigger={
<Button variant="ghost">
<TooltipButton variant="outline" tooltip="Rename pipeline">
<Edit3 />
</Button>
</TooltipButton>
}
title="Name Pipeline"
description="Unsaved pipeline changes will be lost."
Expand Down
137 changes: 62 additions & 75 deletions src/components/PipelineRun/RunDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { Frown } from "lucide-react";

import { CopyText } from "@/components/shared/CopyText/CopyText";
import { BlockStack, InlineStack } from "@/components/ui/layout";
import { Spinner } from "@/components/ui/spinner";
import { Text } from "@/components/ui/typography";
import { useCheckComponentSpecFromPath } from "@/hooks/useCheckComponentSpecFromPath";
import { useUserDetails } from "@/hooks/useUserDetails";
import { useBackend } from "@/providers/BackendProvider";
Expand All @@ -15,7 +17,7 @@ import {
} from "@/services/executionService";

import { InfoBox } from "../shared/InfoBox";
import { StatusBar, StatusIcon, StatusText } from "../shared/Status";
import { StatusBar, StatusText } from "../shared/Status";
import { TaskImplementation } from "../shared/TaskDetails";
import { CancelPipelineRunButton } from "./components/CancelPipelineRunButton";
import { ClonePipelineButton } from "./components/ClonePipelineButton";
Expand Down Expand Up @@ -82,13 +84,26 @@ export const RunDetails = () => {
const annotations = componentSpec.metadata?.annotations || {};

return (
<div className="p-2 flex flex-col gap-6 h-full">
<div className="flex items-center gap-2 max-w-[90%]">
<CopyText className="text-lg font-semibold" alwaysShowButton>
{componentSpec.name ?? "Unnamed Pipeline"}
</CopyText>
<StatusIcon status={runStatus} tooltip />
</div>
<BlockStack gap="6" className="p-2 h-full">
<CopyText className="text-lg font-semibold">
{componentSpec.name ?? "Unnamed Pipeline"}
</CopyText>

<InlineStack gap="2">
<TaskImplementation
displayName={componentSpec.name ?? "Pipeline"}
componentSpec={componentSpec}
showInlineContent={false}
/>
{canAccessEditorSpec && componentSpec.name && (
<InspectPipelineButton pipelineName={componentSpec.name} />
)}
<ClonePipelineButton componentSpec={componentSpec} />
{isInProgress && isRunCreator && (
<CancelPipelineRunButton runId={runId} />
)}
{isComplete && <RerunPipelineButton componentSpec={componentSpec} />}
</InlineStack>

{metadata && (
<div className="flex flex-col gap-2 text-xs text-secondary-foreground mb-2">
Expand Down Expand Up @@ -124,24 +139,6 @@ export const RunDetails = () => {
</div>
)}

<div>
<div className="flex gap-2 flex-wrap items-center">
<TaskImplementation
displayName={componentSpec.name ?? "Pipeline"}
componentSpec={componentSpec}
showInlineContent={false}
/>
{canAccessEditorSpec && componentSpec.name && (
<InspectPipelineButton pipelineName={componentSpec.name} />
)}
<ClonePipelineButton componentSpec={componentSpec} />
{isInProgress && isRunCreator && (
<CancelPipelineRunButton runId={runId} />
)}
{isComplete && <RerunPipelineButton componentSpec={componentSpec} />}
</div>
</div>

{componentSpec.description && (
<div>
<h3 className="text-md font-medium mb-1">Description</h3>
Expand All @@ -151,15 +148,15 @@ export const RunDetails = () => {
</div>
)}

<div>
<div className="flex gap-2">
<h3 className="text-md font-medium">Status: {runStatus}</h3>
<BlockStack>
<InlineStack gap="1" blockAlign="center">
<Text size="md" weight="semibold">
Status: {runStatus}
</Text>
<StatusText statusCounts={statusCounts} />
</div>
<div className="flex flex-col gap-2">
<StatusBar statusCounts={statusCounts} />
</div>
</div>
</InlineStack>
<StatusBar statusCounts={statusCounts} />
</BlockStack>

{Object.keys(annotations).length > 0 && (
<div>
Expand All @@ -175,65 +172,55 @@ export const RunDetails = () => {
</div>
)}

<div>
<div className="w-full">
<h3 className="text-md font-medium mb-1">Artifacts</h3>
<div className="flex gap-4">
<div className="flex-1">
<div className="flex gap-4 flex-col w-full">
<div className="w-full">
<h4 className="text-sm font-semibold mb-1">Inputs</h4>
{componentSpec.inputs && componentSpec.inputs.length > 0 ? (
<ul className="list-disc list-inside text-sm text-secondary-foreground">
<div className="flex flex-col w-full">
{componentSpec.inputs.map((input) => (
<li key={input.name}>
<span className="font-semibold">{input.name}</span>
{input.type && (
<span className="ml-2 text-muted-foreground">
(
{typeof input.type === "string" ? input.type : "object"}
)
</span>
)}
{input.description && (
<div className="text-xs text-secondary-foreground ml-4">
{input.description}
</div>
)}
</li>
<div
className="flex flex-row justify-between even:bg-white odd:bg-gray-100 gap-1 px-2 py-1 rounded-xs items-center w-full"
key={input.name}
>
<div className="text-xs flex-1 truncate">
<span className="font-semibold">{input.name}</span>
</div>
<div className="text-xs text-muted-foreground">
{typeof input.type === "string" ? input.type : "object"}
</div>
</div>
))}
</ul>
</div>
) : (
<div className="text-xs text-muted-foreground">No inputs</div>
)}
</div>
<div className="flex-1">
<div className="w-full">
<h4 className="text-sm font-semibold mb-1">Outputs</h4>
{componentSpec.outputs && componentSpec.outputs.length > 0 ? (
<ul className="list-disc list-inside text-sm text-secondary-foreground">
<div className="flex flex-col w-full">
{componentSpec.outputs.map((output) => (
<li key={output.name}>
<span className="font-semibold">{output.name}</span>
{output.type && (
<span className="ml-2 text-muted-foreground">
(
{typeof output.type === "string"
? output.type
: "object"}
)
</span>
)}
{output.description && (
<div className="text-xs text-secondary-foreground ml-4">
{output.description}
</div>
)}
</li>
<div
className="flex flex-row justify-between even:bg-white odd:bg-gray-100 gap-1 px-2 py-1 rounded-xs items-center w-full"
key={output.name}
>
<div className="text-xs flex-1 truncate">
<span className="font-semibold">{output.name}</span>
</div>
<div className="text-xs text-muted-foreground">
{typeof output.type === "string" ? output.type : "object"}
</div>
</div>
))}
</ul>
</div>
) : (
<div className="text-xs text-muted-foreground">No outputs</div>
)}
</div>
</div>
</div>
</div>
</BlockStack>
);
};
5 changes: 5 additions & 0 deletions src/components/ui/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ const blockStackVariants = cva("flex flex-col w-full", {
"2": "gap-2",
"3": "gap-3",
"4": "gap-4",
"5": "gap-5",
"6": "gap-6",
"8": "gap-8",
},
},
Expand Down Expand Up @@ -101,6 +103,9 @@ const inlineStackVariants = cva("flex flex-row", {
"2": "gap-2",
"3": "gap-3",
"4": "gap-4",
"5": "gap-5",
"6": "gap-6",
"8": "gap-8",
},
wrap: {
wrap: "flex-wrap",
Expand Down