mirror of
https://github.com/borbann-platform/backend-api.git
synced 2025-12-19 04:34:06 +01:00
feat: refactor CreatePipelinePage to integrate AddDataSource and ScheduleAndInformation components
This commit is contained in:
Pattadon
parent
14babe21d9
commit
8b730e14ae
@ -1,33 +1,11 @@
|
|||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import { ArrowLeft } from "lucide-react";
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/components/ui/card";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import {
|
|
||||||
ArrowLeft,
|
|
||||||
Globe,
|
|
||||||
FileUp,
|
|
||||||
DatabaseIcon,
|
|
||||||
Plus,
|
|
||||||
Trash2,
|
|
||||||
} from "lucide-react";
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import PageHeader from "@/components/page-header";
|
import PageHeader from "@/components/page-header";
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import {
|
|
||||||
Accordion,
|
|
||||||
AccordionContent,
|
|
||||||
AccordionItem,
|
|
||||||
AccordionTrigger,
|
|
||||||
} from "@/components/ui/accordion";
|
|
||||||
import { PipelineDetails } from "@/components/pipeline/details";
|
import { PipelineDetails } from "@/components/pipeline/details";
|
||||||
import { PipelineAiAssistant } from "@/components/pipeline/ai-assistant";
|
import { PipelineAiAssistant } from "@/components/pipeline/ai-assistant";
|
||||||
|
import { AddDataSource } from "@/components/pipeline/add-data-source";
|
||||||
|
import { ScheduleAndInformation } from "@/components/pipeline/schedule-and-information";
|
||||||
|
|
||||||
export default function CreatePipelinePage() {
|
export default function CreatePipelinePage() {
|
||||||
return (
|
return (
|
||||||
@ -55,358 +33,9 @@ export default function CreatePipelinePage() {
|
|||||||
<PipelineDetails />
|
<PipelineDetails />
|
||||||
<PipelineAiAssistant />
|
<PipelineAiAssistant />
|
||||||
</div>
|
</div>
|
||||||
|
<AddDataSource />
|
||||||
<div>
|
<div>
|
||||||
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
|
<ScheduleAndInformation />
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Data Sources</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Add one or more data sources to your pipeline
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Accordion
|
|
||||||
type="single"
|
|
||||||
collapsible
|
|
||||||
className="w-full"
|
|
||||||
defaultValue="source-1"
|
|
||||||
>
|
|
||||||
<AccordionItem
|
|
||||||
value="source-1"
|
|
||||||
className="border rounded-md mb-4 data-source-card active"
|
|
||||||
>
|
|
||||||
<AccordionTrigger className="px-4">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<Globe className="mr-2 h-5 w-5 text-primary" />
|
|
||||||
<span>Website Source #1</span>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent className="px-4 pb-4">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="url-1">Website URL</Label>
|
|
||||||
<Input
|
|
||||||
id="url-1"
|
|
||||||
placeholder="https://example.com/listings"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<Label htmlFor="additional-urls-1">
|
|
||||||
Additional URLs (optional)
|
|
||||||
</Label>
|
|
||||||
<Badge variant="outline" className="text-xs">
|
|
||||||
Pattern Detection
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<Textarea
|
|
||||||
id="additional-urls-1"
|
|
||||||
placeholder="https://example.com/listings/page2 https://example.com/listings/page3"
|
|
||||||
rows={3}
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-muted-foreground mt-1">
|
|
||||||
Add multiple URLs from the same website (one per
|
|
||||||
line)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="text-destructive"
|
|
||||||
>
|
|
||||||
<Trash2 className="mr-2 h-4 w-4" />
|
|
||||||
Remove Source
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
|
|
||||||
<AccordionItem
|
|
||||||
value="source-2"
|
|
||||||
className="border rounded-md mb-4 data-source-card"
|
|
||||||
>
|
|
||||||
<AccordionTrigger className="px-4">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<FileUp className="mr-2 h-5 w-5 text-primary" />
|
|
||||||
<span>File Upload Source #1</span>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent className="px-4 pb-4">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="file-upload-1">Upload File</Label>
|
|
||||||
<div className="flex items-center justify-center p-6 border-2 border-dashed rounded-lg">
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Drag and drop your file here, or click to browse
|
|
||||||
</p>
|
|
||||||
<Button variant="outline" className="mt-2">
|
|
||||||
Select File
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-muted-foreground mt-1">
|
|
||||||
Supported formats: CSV, JSON, Excel, XML (up to
|
|
||||||
50MB)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="text-destructive"
|
|
||||||
>
|
|
||||||
<Trash2 className="mr-2 h-4 w-4" />
|
|
||||||
Remove Source
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
|
|
||||||
<AccordionItem
|
|
||||||
value="source-3"
|
|
||||||
className="border rounded-md mb-4 data-source-card"
|
|
||||||
>
|
|
||||||
<AccordionTrigger className="px-4">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<DatabaseIcon className="mr-2 h-5 w-5 text-primary" />
|
|
||||||
<span>API Source #1</span>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent className="px-4 pb-4">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="api-url-1">API Endpoint URL</Label>
|
|
||||||
<Input
|
|
||||||
id="api-url-1"
|
|
||||||
placeholder="https://api.example.com/data"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="auth-type-1">
|
|
||||||
Authentication Type
|
|
||||||
</Label>
|
|
||||||
<select
|
|
||||||
id="auth-type-1"
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<option value="none">None</option>
|
|
||||||
<option value="basic">Basic Auth</option>
|
|
||||||
<option value="bearer">Bearer Token</option>
|
|
||||||
<option value="api-key">API Key</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="text-destructive"
|
|
||||||
>
|
|
||||||
<Trash2 className="mr-2 h-4 w-4" />
|
|
||||||
Remove Source
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
</Accordion>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-2 mt-4">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
className="w-full justify-start gap-2"
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4" />
|
|
||||||
Add Website Source
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
className="w-full justify-start gap-2"
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4" />
|
|
||||||
Add File Upload Source
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
className="w-full justify-start gap-2"
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4" />
|
|
||||||
Add API Source
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="mt-6 border-2 hover:border-highlight-border transition-all duration-200">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Schedule & Automation</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Configure when and how your pipeline should run
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="grid gap-6 md:grid-cols-2">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
<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="timezone">Timezone</Label>
|
|
||||||
<select
|
|
||||||
id="timezone"
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<option value="utc">UTC</option>
|
|
||||||
<option value="est">Eastern Time (ET)</option>
|
|
||||||
<option value="cst">Central Time (CT)</option>
|
|
||||||
<option value="mst">Mountain Time (MT)</option>
|
|
||||||
<option value="pst">Pacific Time (PT)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="max-records">Collection Limits</Label>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="limit-records"
|
|
||||||
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
|
||||||
/>
|
|
||||||
<div className="flex-1">
|
|
||||||
<Label
|
|
||||||
htmlFor="limit-records"
|
|
||||||
className="text-sm font-normal"
|
|
||||||
>
|
|
||||||
Limit total records
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="max-records"
|
|
||||||
type="number"
|
|
||||||
placeholder="e.g., 1000"
|
|
||||||
className="mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="stop-no-new"
|
|
||||||
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
|
||||||
/>
|
|
||||||
<Label
|
|
||||||
htmlFor="stop-no-new"
|
|
||||||
className="text-sm font-normal"
|
|
||||||
>
|
|
||||||
Stop when no new records found
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="notifications">Notifications</Label>
|
|
||||||
<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 className="mt-2">
|
|
||||||
<Input
|
|
||||||
id="email"
|
|
||||||
type="email"
|
|
||||||
placeholder="Email for notifications"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="retry-settings">Retry Settings</Label>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<Label
|
|
||||||
htmlFor="retry-attempts"
|
|
||||||
className="text-sm font-normal"
|
|
||||||
>
|
|
||||||
Retry Attempts
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="retry-attempts"
|
|
||||||
type="number"
|
|
||||||
placeholder="e.g., 3"
|
|
||||||
defaultValue="3"
|
|
||||||
className="w-24"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<Label
|
|
||||||
htmlFor="retry-delay"
|
|
||||||
className="text-sm font-normal"
|
|
||||||
>
|
|
||||||
Delay Between Retries (minutes)
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="retry-delay"
|
|
||||||
type="number"
|
|
||||||
placeholder="e.g., 5"
|
|
||||||
defaultValue="5"
|
|
||||||
className="w-24"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
198
frontend/components/pipeline/add-data-source.tsx
Normal file
198
frontend/components/pipeline/add-data-source.tsx
Normal file
@ -0,0 +1,198 @@
|
|||||||
|
import { DatabaseIcon, FileUp, Globe, Plus, Trash2 } from "lucide-react";
|
||||||
|
import {
|
||||||
|
Accordion,
|
||||||
|
AccordionContent,
|
||||||
|
AccordionItem,
|
||||||
|
AccordionTrigger,
|
||||||
|
} from "../ui/accordion";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "../ui/card";
|
||||||
|
import { Label } from "../ui/label";
|
||||||
|
import { Input } from "../ui/input";
|
||||||
|
import { Badge } from "../ui/badge";
|
||||||
|
import { Textarea } from "../ui/textarea";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
|
||||||
|
export function AddDataSource() {
|
||||||
|
return (
|
||||||
|
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Data Sources</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Add one or more data sources to your pipeline
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Accordion
|
||||||
|
type="single"
|
||||||
|
collapsible
|
||||||
|
className="w-full"
|
||||||
|
defaultValue="source-1"
|
||||||
|
>
|
||||||
|
<AccordionItem
|
||||||
|
value="source-1"
|
||||||
|
className="border rounded-md mb-4 data-source-card active"
|
||||||
|
>
|
||||||
|
<AccordionTrigger className="px-4">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Globe className="mr-2 h-5 w-5 text-primary" />
|
||||||
|
<span>Website Source #1</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent className="px-4 pb-4">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="url-1">Website URL</Label>
|
||||||
|
<Input
|
||||||
|
id="url-1"
|
||||||
|
placeholder="https://example.com/listings"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Label htmlFor="additional-urls-1">
|
||||||
|
Additional URLs (optional)
|
||||||
|
</Label>
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
Pattern Detection
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<Textarea
|
||||||
|
id="additional-urls-1"
|
||||||
|
placeholder="https://example.com/listings/page2 https://example.com/listings/page3"
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
Add multiple URLs from the same website (one per line)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="text-destructive"
|
||||||
|
>
|
||||||
|
<Trash2 className="mr-2 h-4 w-4" />
|
||||||
|
Remove Source
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem
|
||||||
|
value="source-2"
|
||||||
|
className="border rounded-md mb-4 data-source-card"
|
||||||
|
>
|
||||||
|
<AccordionTrigger className="px-4">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<FileUp className="mr-2 h-5 w-5 text-primary" />
|
||||||
|
<span>File Upload Source #1</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent className="px-4 pb-4">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="file-upload-1">Upload File</Label>
|
||||||
|
<div className="flex items-center justify-center p-6 border-2 border-dashed rounded-lg">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Drag and drop your file here, or click to browse
|
||||||
|
</p>
|
||||||
|
<Button variant="outline" className="mt-2">
|
||||||
|
Select File
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
Supported formats: CSV, JSON, Excel, XML (up to 50MB)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="text-destructive"
|
||||||
|
>
|
||||||
|
<Trash2 className="mr-2 h-4 w-4" />
|
||||||
|
Remove Source
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem
|
||||||
|
value="source-3"
|
||||||
|
className="border rounded-md mb-4 data-source-card"
|
||||||
|
>
|
||||||
|
<AccordionTrigger className="px-4">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<DatabaseIcon className="mr-2 h-5 w-5 text-primary" />
|
||||||
|
<span>API Source #1</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent className="px-4 pb-4">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="api-url-1">API Endpoint URL</Label>
|
||||||
|
<Input
|
||||||
|
id="api-url-1"
|
||||||
|
placeholder="https://api.example.com/data"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="auth-type-1">Authentication Type</Label>
|
||||||
|
<select
|
||||||
|
id="auth-type-1"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<option value="none">None</option>
|
||||||
|
<option value="basic">Basic Auth</option>
|
||||||
|
<option value="bearer">Bearer Token</option>
|
||||||
|
<option value="api-key">API Key</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="text-destructive"
|
||||||
|
>
|
||||||
|
<Trash2 className="mr-2 h-4 w-4" />
|
||||||
|
Remove Source
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2 mt-4">
|
||||||
|
<Button variant="outline" className="w-full justify-start gap-2">
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Add Website Source
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-start gap-2">
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Add File Upload Source
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full justify-start gap-2">
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Add API Source
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
167
frontend/components/pipeline/schedule-and-information.tsx
Normal file
167
frontend/components/pipeline/schedule-and-information.tsx
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
|
||||||
|
export function ScheduleAndInformation() {
|
||||||
|
return (
|
||||||
|
<Card className="mt-6 border-2 hover:border-highlight-border transition-all duration-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Schedule & Automation</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Configure when and how your pipeline should run
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid gap-6 md:grid-cols-2">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<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="timezone">Timezone</Label>
|
||||||
|
<select
|
||||||
|
id="timezone"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<option value="utc">UTC</option>
|
||||||
|
<option value="est">Eastern Time (ET)</option>
|
||||||
|
<option value="cst">Central Time (CT)</option>
|
||||||
|
<option value="mst">Mountain Time (MT)</option>
|
||||||
|
<option value="pst">Pacific Time (PT)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="max-records">Collection Limits</Label>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="limit-records"
|
||||||
|
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label
|
||||||
|
htmlFor="limit-records"
|
||||||
|
className="text-sm font-normal"
|
||||||
|
>
|
||||||
|
Limit total records
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="max-records"
|
||||||
|
type="number"
|
||||||
|
placeholder="e.g., 1000"
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="stop-no-new"
|
||||||
|
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
||||||
|
/>
|
||||||
|
<Label htmlFor="stop-no-new" className="text-sm font-normal">
|
||||||
|
Stop when no new records found
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="notifications">Notifications</Label>
|
||||||
|
<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 className="mt-2">
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="Email for notifications"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="retry-settings">Retry Settings</Label>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Label
|
||||||
|
htmlFor="retry-attempts"
|
||||||
|
className="text-sm font-normal"
|
||||||
|
>
|
||||||
|
Retry Attempts
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="retry-attempts"
|
||||||
|
type="number"
|
||||||
|
placeholder="e.g., 3"
|
||||||
|
defaultValue="3"
|
||||||
|
className="w-24"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Label htmlFor="retry-delay" className="text-sm font-normal">
|
||||||
|
Delay Between Retries (minutes)
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="retry-delay"
|
||||||
|
type="number"
|
||||||
|
placeholder="e.g., 5"
|
||||||
|
defaultValue="5"
|
||||||
|
className="w-24"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user