mirror of
https://github.com/borbann-platform/backend-api.git
synced 2025-12-18 12:14:05 +01:00
feat: enhance PipelineDetailsPage with new components for output configuration, run history, and settings
This commit is contained in:
Pattadon
parent
7783d00f56
commit
173defcb44
@ -1,18 +1,16 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { ArrowLeft, Download, Edit, Play, Trash, Copy, Check } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import PageHeader from "@/components/page-header"
|
||||
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { PipelineStatus } from "@/components/pipeline/status"
|
||||
import { PipelineDataSource } from "@/components/pipeline/data-source"
|
||||
import { PipelineExportData } from "@/components/pipeline/export-data"
|
||||
import { PipelineDataSchema } from "@/components/pipeline/data-schema"
|
||||
import { PipelineDataPreview } from "@/components/pipeline/data-preview"
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { ArrowLeft, Edit, Play, Trash, Copy } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import PageHeader from "@/components/page-header";
|
||||
import { PipelineStatus } from "@/components/pipeline/status";
|
||||
import { PipelineDataSource } from "@/components/pipeline/data-source";
|
||||
import { PipelineExportData } from "@/components/pipeline/export-data";
|
||||
import { PipelineDataSchema } from "@/components/pipeline/data-schema";
|
||||
import { PipelineDataPreview } from "@/components/pipeline/data-preview";
|
||||
import { PipelineOutputConfig } from "@/components/pipeline/output-config";
|
||||
import { PipelineRunHistory } from "@/components/pipeline/run-history";
|
||||
import { PipelineSettings } from "@/components/pipeline/settings";
|
||||
|
||||
export default function PipelineDetailsPage() {
|
||||
return (
|
||||
@ -22,7 +20,10 @@ export default function PipelineDetailsPage() {
|
||||
breadcrumb={[
|
||||
{ title: "Home", href: "/" },
|
||||
{ title: "Data Pipeline", href: "/data-pipeline" },
|
||||
{ title: "Property Listings", href: "/data-pipeline/property-listings" },
|
||||
{
|
||||
title: "Property Listings",
|
||||
href: "/data-pipeline/property-listings",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -35,15 +36,24 @@ export default function PipelineDetailsPage() {
|
||||
</Link>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<Button variant="outline" className="gap-2 border-primary/20 hover:border-primary">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="gap-2 border-primary/20 hover:border-primary"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
Clone
|
||||
</Button>
|
||||
<Button variant="outline" className="gap-2 border-primary/20 hover:border-primary">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="gap-2 border-primary/20 hover:border-primary"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button variant="outline" className="gap-2 border-primary/20 hover:border-primary">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="gap-2 border-primary/20 hover:border-primary"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
Run Now
|
||||
</Button>
|
||||
@ -70,250 +80,26 @@ export default function PipelineDetailsPage() {
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="schema" className="mt-4">
|
||||
<PipelineDataSchema />
|
||||
</TabsContent>
|
||||
<PipelineDataSchema />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="preview" className="mt-4">
|
||||
<PipelineDataPreview />
|
||||
<TabsContent value="preview" className="mt-4">
|
||||
<PipelineDataPreview />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="output" className="mt-4">
|
||||
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
|
||||
<CardHeader>
|
||||
<CardTitle>Output Configuration</CardTitle>
|
||||
<CardDescription>Configure how your data will be structured and exported</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Output Format</Label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="border rounded-md p-3 data-source-card active">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium">JSON</span>
|
||||
<Check className="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">Structured data format</p>
|
||||
</div>
|
||||
<div className="border rounded-md p-3 data-source-card">
|
||||
<span className="font-medium">CSV</span>
|
||||
<p className="text-xs text-muted-foreground mt-1">Spreadsheet compatible</p>
|
||||
</div>
|
||||
<div className="border rounded-md p-3 data-source-card">
|
||||
<span className="font-medium">SQLite</span>
|
||||
<p className="text-xs text-muted-foreground mt-1">Portable database</p>
|
||||
</div>
|
||||
<div className="border rounded-md p-3 data-source-card">
|
||||
<span className="font-medium">YAML</span>
|
||||
<p className="text-xs text-muted-foreground mt-1">Human-readable format</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Format Preview</Label>
|
||||
<Badge variant="outline">Sample Data</Badge>
|
||||
</div>
|
||||
<div className="bg-muted/50 p-3 rounded-md overflow-x-auto">
|
||||
<pre className="text-xs">
|
||||
{`{
|
||||
"properties": [
|
||||
{
|
||||
"id": "P001",
|
||||
"title": "Modern Apartment",
|
||||
"price": 350000,
|
||||
"bedrooms": 2,
|
||||
"location": "Downtown"
|
||||
},
|
||||
{
|
||||
"id": "P002",
|
||||
"title": "Luxury Villa",
|
||||
"price": 1250000,
|
||||
"bedrooms": 5,
|
||||
"location": "Suburbs"
|
||||
}
|
||||
]
|
||||
}`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button className="gap-2">
|
||||
<Download className="h-4 w-4" />
|
||||
Export Data
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<PipelineOutputConfig />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="history" className="mt-4">
|
||||
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
|
||||
<CardHeader>
|
||||
<CardTitle>Run History</CardTitle>
|
||||
<CardDescription>History of pipeline executions</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="border rounded-md overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-muted">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium">Run ID</th>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium">Date</th>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium">Status</th>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium">Duration</th>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium">Records</th>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
<tr>
|
||||
<td className="px-4 py-2 text-sm">RUN-123</td>
|
||||
<td className="px-4 py-2 text-sm">Today, 10:30 AM</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<Badge variant="default" className="bg-success hover:bg-success">
|
||||
Success
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm">2m 15s</td>
|
||||
<td className="px-4 py-2 text-sm">1,240</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<Button variant="outline" size="sm">
|
||||
View Log
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-2 text-sm">RUN-122</td>
|
||||
<td className="px-4 py-2 text-sm">Yesterday, 10:30 AM</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<Badge variant="default" className="bg-success hover:bg-success">
|
||||
Success
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm">2m 10s</td>
|
||||
<td className="px-4 py-2 text-sm">1,235</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<Button variant="outline" size="sm">
|
||||
View Log
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-2 text-sm">RUN-121</td>
|
||||
<td className="px-4 py-2 text-sm">2 days ago, 10:30 AM</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<Badge variant="default" className="bg-success hover:bg-success">
|
||||
Success
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm">2m 05s</td>
|
||||
<td className="px-4 py-2 text-sm">1,228</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<Button variant="outline" size="sm">
|
||||
View Log
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<PipelineRunHistory />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="settings" className="mt-4">
|
||||
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
|
||||
<CardHeader>
|
||||
<CardTitle>Pipeline Settings</CardTitle>
|
||||
<CardDescription>Configure pipeline behavior</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-medium">Scheduling</h3>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="frequency">Run Frequency</Label>
|
||||
<select
|
||||
id="frequency"
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
defaultValue="daily"
|
||||
>
|
||||
<option value="manual">Manual (Run on demand)</option>
|
||||
<option value="hourly">Hourly</option>
|
||||
<option value="daily">Daily</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="monthly">Monthly</option>
|
||||
<option value="custom">Custom Schedule</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="time">Run Time</Label>
|
||||
<Input id="time" type="time" defaultValue="09:00" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-medium">Data Collection</h3>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="max-records">Maximum Records</Label>
|
||||
<Input id="max-records" type="number" defaultValue="2000" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="retry-attempts">Retry Attempts</Label>
|
||||
<Input id="retry-attempts" type="number" defaultValue="3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-medium">Notifications</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="notify-complete"
|
||||
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
||||
defaultChecked
|
||||
/>
|
||||
<Label htmlFor="notify-complete" className="text-sm font-normal">
|
||||
Notify when pipeline completes
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="notify-error"
|
||||
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
||||
defaultChecked
|
||||
/>
|
||||
<Label htmlFor="notify-error" className="text-sm font-normal">
|
||||
Notify on errors
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button>Save Settings</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<PipelineSettings />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
export function StatusBadge({ status }: { status: "active" | "paused" | "error" }) {
|
||||
export function StatusBadge({
|
||||
status,
|
||||
}: {
|
||||
status: "active" | "paused" | "error";
|
||||
}) {
|
||||
if (status === "active") {
|
||||
return (
|
||||
<Badge
|
||||
|
||||
@ -19,7 +19,6 @@ import { StatusBadge } from "./badge";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
|
||||
interface PipelineCardProps {
|
||||
title: string;
|
||||
description: string;
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../ui/card";
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
} from "../ui/card";
|
||||
|
||||
export function PipelineDataPreview() {
|
||||
return (
|
||||
@ -67,4 +73,4 @@ export function PipelineDataPreview() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,48 +1,48 @@
|
||||
import { Badge } from "../ui/badge";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "../ui/card";
|
||||
|
||||
export function PipelineDataSource(){
|
||||
return (
|
||||
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Data Sources</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="p-3 border-2 rounded-md hover:border-highlight-border transition-all duration-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-medium">example-realty.com</span>
|
||||
<Badge>Website</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Last updated: 2 hours ago
|
||||
</p>
|
||||
<p className="text-sm mt-1">540 records</p>
|
||||
</div>
|
||||
|
||||
<div className="p-3 border-2 rounded-md hover:border-highlight-border transition-all duration-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-medium">property-listings.com</span>
|
||||
<Badge>Website</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Last updated: 2 hours ago
|
||||
</p>
|
||||
<p className="text-sm mt-1">420 records</p>
|
||||
</div>
|
||||
|
||||
<div className="p-3 border-2 rounded-md hover:border-highlight-border transition-all duration-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-medium">real-estate-api.com</span>
|
||||
<Badge>API</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Last updated: 2 hours ago
|
||||
</p>
|
||||
<p className="text-sm mt-1">280 records</p>
|
||||
export function PipelineDataSource() {
|
||||
return (
|
||||
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Data Sources</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="p-3 border-2 rounded-md hover:border-highlight-border transition-all duration-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-medium">example-realty.com</span>
|
||||
<Badge>Website</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Last updated: 2 hours ago
|
||||
</p>
|
||||
<p className="text-sm mt-1">540 records</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
<div className="p-3 border-2 rounded-md hover:border-highlight-border transition-all duration-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-medium">property-listings.com</span>
|
||||
<Badge>Website</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Last updated: 2 hours ago
|
||||
</p>
|
||||
<p className="text-sm mt-1">420 records</p>
|
||||
</div>
|
||||
|
||||
<div className="p-3 border-2 rounded-md hover:border-highlight-border transition-all duration-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-medium">real-estate-api.com</span>
|
||||
<Badge>API</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Last updated: 2 hours ago
|
||||
</p>
|
||||
<p className="text-sm mt-1">280 records</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
96
frontend/components/pipeline/output-config.tsx
Normal file
96
frontend/components/pipeline/output-config.tsx
Normal file
@ -0,0 +1,96 @@
|
||||
import { Check, Download } from "lucide-react";
|
||||
import { Badge } from "../ui/badge";
|
||||
import { Button } from "../ui/button";
|
||||
import { Label } from "../ui/label";
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
} from "../ui/card";
|
||||
|
||||
export function PipelineOutputConfig() {
|
||||
return (
|
||||
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
|
||||
<CardHeader>
|
||||
<CardTitle>Output Configuration</CardTitle>
|
||||
<CardDescription>
|
||||
Configure how your data will be structured and exported
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Output Format</Label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="border rounded-md p-3 data-source-card active">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium">JSON</span>
|
||||
<Check className="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Structured data format
|
||||
</p>
|
||||
</div>
|
||||
<div className="border rounded-md p-3 data-source-card">
|
||||
<span className="font-medium">CSV</span>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Spreadsheet compatible
|
||||
</p>
|
||||
</div>
|
||||
<div className="border rounded-md p-3 data-source-card">
|
||||
<span className="font-medium">SQLite</span>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Portable database
|
||||
</p>
|
||||
</div>
|
||||
<div className="border rounded-md p-3 data-source-card">
|
||||
<span className="font-medium">YAML</span>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Human-readable format
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Format Preview</Label>
|
||||
<Badge variant="outline">Sample Data</Badge>
|
||||
</div>
|
||||
<div className="bg-muted/50 p-3 rounded-md overflow-x-auto">
|
||||
<pre className="text-xs">
|
||||
{`{
|
||||
"properties": [
|
||||
{
|
||||
"id": "P001",
|
||||
"title": "Modern Apartment",
|
||||
"price": 350000,
|
||||
"bedrooms": 2,
|
||||
"location": "Downtown"
|
||||
},
|
||||
{
|
||||
"id": "P002",
|
||||
"title": "Luxury Villa",
|
||||
"price": 1250000,
|
||||
"bedrooms": 5,
|
||||
"location": "Suburbs"
|
||||
}
|
||||
]
|
||||
}`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button className="gap-2">
|
||||
<Download className="h-4 w-4" />
|
||||
Export Data
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
109
frontend/components/pipeline/run-history.tsx
Normal file
109
frontend/components/pipeline/run-history.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
import { Badge } from "../ui/badge";
|
||||
import { Button } from "../ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
} from "../ui/card";
|
||||
|
||||
export function PipelineRunHistory() {
|
||||
return (
|
||||
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
|
||||
<CardHeader>
|
||||
<CardTitle>Run History</CardTitle>
|
||||
<CardDescription>History of pipeline executions</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="border rounded-md overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-muted">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium">
|
||||
Run ID
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium">
|
||||
Date
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium">
|
||||
Duration
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium">
|
||||
Records
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
<tr>
|
||||
<td className="px-4 py-2 text-sm">RUN-123</td>
|
||||
<td className="px-4 py-2 text-sm">Today, 10:30 AM</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<Badge
|
||||
variant="default"
|
||||
className="bg-success hover:bg-success"
|
||||
>
|
||||
Success
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm">2m 15s</td>
|
||||
<td className="px-4 py-2 text-sm">1,240</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<Button variant="outline" size="sm">
|
||||
View Log
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-2 text-sm">RUN-122</td>
|
||||
<td className="px-4 py-2 text-sm">Yesterday, 10:30 AM</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<Badge
|
||||
variant="default"
|
||||
className="bg-success hover:bg-success"
|
||||
>
|
||||
Success
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm">2m 10s</td>
|
||||
<td className="px-4 py-2 text-sm">1,235</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<Button variant="outline" size="sm">
|
||||
View Log
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-2 text-sm">RUN-121</td>
|
||||
<td className="px-4 py-2 text-sm">2 days ago, 10:30 AM</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<Badge
|
||||
variant="default"
|
||||
className="bg-success hover:bg-success"
|
||||
>
|
||||
Success
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm">2m 05s</td>
|
||||
<td className="px-4 py-2 text-sm">1,228</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<Button variant="outline" size="sm">
|
||||
View Log
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
100
frontend/components/pipeline/settings.tsx
Normal file
100
frontend/components/pipeline/settings.tsx
Normal file
@ -0,0 +1,100 @@
|
||||
import { Button } from "../ui/button";
|
||||
import { Label } from "../ui/label";
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
} from "../ui/card";
|
||||
import { Input } from "../ui/input";
|
||||
|
||||
export function PipelineSettings() {
|
||||
return (
|
||||
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
|
||||
<CardHeader>
|
||||
<CardTitle>Pipeline Settings</CardTitle>
|
||||
<CardDescription>Configure pipeline behavior</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-medium">Scheduling</h3>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="frequency">Run Frequency</Label>
|
||||
<select
|
||||
id="frequency"
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
defaultValue="daily"
|
||||
>
|
||||
<option value="manual">Manual (Run on demand)</option>
|
||||
<option value="hourly">Hourly</option>
|
||||
<option value="daily">Daily</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="monthly">Monthly</option>
|
||||
<option value="custom">Custom Schedule</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="time">Run Time</Label>
|
||||
<Input id="time" type="time" defaultValue="09:00" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-medium">Data Collection</h3>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="max-records">Maximum Records</Label>
|
||||
<Input id="max-records" type="number" defaultValue="2000" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="retry-attempts">Retry Attempts</Label>
|
||||
<Input id="retry-attempts" type="number" defaultValue="3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-medium">Notifications</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="notify-complete"
|
||||
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
||||
defaultChecked
|
||||
/>
|
||||
<Label
|
||||
htmlFor="notify-complete"
|
||||
className="text-sm font-normal"
|
||||
>
|
||||
Notify when pipeline completes
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="notify-error"
|
||||
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
||||
defaultChecked
|
||||
/>
|
||||
<Label htmlFor="notify-error" className="text-sm font-normal">
|
||||
Notify on errors
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button>Save Settings</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -2,40 +2,40 @@ import { Badge } from "../ui/badge";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "../ui/card";
|
||||
|
||||
export function PipelineStatus() {
|
||||
return (
|
||||
<Card className="border-2 border-green-500 dark:border-green-600">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Pipeline Status</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground">Status:</span>
|
||||
<Badge
|
||||
variant="default"
|
||||
className="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
|
||||
>
|
||||
Active
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground">Last Run:</span>
|
||||
<span>2 hours ago</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground">Next Run:</span>
|
||||
<span>Tomorrow at 9:00 AM</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground">Run Frequency:</span>
|
||||
<span>Daily</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground">Total Records:</span>
|
||||
<span>1,240</span>
|
||||
</div>
|
||||
return (
|
||||
<Card className="border-2 border-green-500 dark:border-green-600">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Pipeline Status</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground">Status:</span>
|
||||
<Badge
|
||||
variant="default"
|
||||
className="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
|
||||
>
|
||||
Active
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground">Last Run:</span>
|
||||
<span>2 hours ago</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground">Next Run:</span>
|
||||
<span>Tomorrow at 9:00 AM</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground">Run Frequency:</span>
|
||||
<span>Daily</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground">Total Records:</span>
|
||||
<span>1,240</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user