mirror of
https://github.com/borbann-platform/backend-api.git
synced 2025-12-19 20:54:05 +01:00
feat: implement PipelineCard component and StatusBadge for data pipelines
This commit is contained in:
Pattadon
parent
90a3b67cc4
commit
4e5fba2459
@ -1,10 +1,9 @@
|
|||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button";
|
||||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
import { Plus } from "lucide-react";
|
||||||
import { Badge } from "@/components/ui/badge"
|
import Link from "next/link";
|
||||||
import { Clock, Database, Play, Plus, RefreshCw, Pause, AlertTriangle, Copy } from "lucide-react"
|
import PageHeader from "@/components/page-header";
|
||||||
import Link from "next/link"
|
import { PipelineCard } from "@/components/pipeline/card";
|
||||||
import PageHeader from "@/components/page-header"
|
|
||||||
|
|
||||||
export default function DataPipelinePage() {
|
export default function DataPipelinePage() {
|
||||||
return (
|
return (
|
||||||
@ -135,108 +134,5 @@ export default function DataPipelinePage() {
|
|||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
interface PipelineCardProps {
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
status: "active" | "paused" | "error"
|
|
||||||
lastRun: string
|
|
||||||
nextRun: string
|
|
||||||
sources: number
|
|
||||||
records: number
|
|
||||||
error?: string
|
|
||||||
aiPowered?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
function PipelineCard({
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
status,
|
|
||||||
lastRun,
|
|
||||||
nextRun,
|
|
||||||
sources,
|
|
||||||
records,
|
|
||||||
error,
|
|
||||||
aiPowered,
|
|
||||||
}: PipelineCardProps) {
|
|
||||||
return (
|
|
||||||
<Card className={`pipeline-card ${status === "active" ? "border-2 border-green-500 dark:border-green-600" : ""}`}>
|
|
||||||
<CardHeader className="pb-2">
|
|
||||||
<div className="flex justify-between items-start">
|
|
||||||
<CardTitle className="text-lg">{title}</CardTitle>
|
|
||||||
<StatusBadge status={status} />
|
|
||||||
</div>
|
|
||||||
<CardDescription>{description}</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center text-sm">
|
|
||||||
<Clock className="h-4 w-4 mr-2 text-muted-foreground" />
|
|
||||||
<span className="text-muted-foreground">Last run:</span>
|
|
||||||
<span className="ml-1 font-medium">{lastRun}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center text-sm">
|
|
||||||
<RefreshCw className="h-4 w-4 mr-2 text-muted-foreground" />
|
|
||||||
<span className="text-muted-foreground">Next run:</span>
|
|
||||||
<span className="ml-1 font-medium">{nextRun}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center text-sm">
|
|
||||||
<Database className="h-4 w-4 mr-2 text-muted-foreground" />
|
|
||||||
<span className="text-muted-foreground">Sources:</span>
|
|
||||||
<span className="ml-1 font-medium">{sources}</span>
|
|
||||||
<span className="mx-2">•</span>
|
|
||||||
<span className="text-muted-foreground">Records:</span>
|
|
||||||
<span className="ml-1 font-medium">{records}</span>
|
|
||||||
</div>
|
|
||||||
{error && (
|
|
||||||
<div className="flex items-center text-sm text-destructive mt-2">
|
|
||||||
<AlertTriangle className="h-4 w-4 mr-2" />
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex justify-between">
|
|
||||||
<Link href={`/data-pipeline/${title.toLowerCase().replace(/\s+/g, "-")}`}>
|
|
||||||
<Button variant="outline" size="sm">
|
|
||||||
View Details
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button variant="outline" size="icon" className="h-8 w-8 text-primary border-primary/20 hover:border-primary">
|
|
||||||
<Copy className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
{status === "active" ? (
|
|
||||||
<Button variant="outline" size="icon" className="h-8 w-8 border-primary/20 hover:border-primary">
|
|
||||||
<Pause className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Button variant="outline" size="icon" className="h-8 w-8 border-primary/20 hover:border-primary">
|
|
||||||
<Play className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
<Button variant="outline" size="icon" className="h-8 w-8 border-primary/20 hover:border-primary">
|
|
||||||
<RefreshCw className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function StatusBadge({ status }: { status: "active" | "paused" | "error" }) {
|
|
||||||
if (status === "active") {
|
|
||||||
return (
|
|
||||||
<Badge variant="default" className="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700">
|
|
||||||
Active
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
} else if (status === "paused") {
|
|
||||||
return <Badge variant="secondary">Paused</Badge>
|
|
||||||
} else {
|
|
||||||
return <Badge variant="destructive">Error</Badge>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|||||||
@ -83,7 +83,7 @@ export default function MapsPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="relative h-screen w-full overflow-hidden bg-gray-100 dark:bg-gray-900">
|
<div className="relative h-screen w-full overflow-hidden bg-gray-100 dark:bg-gray-900">
|
||||||
{/* Map Container */}
|
{/* Map Container */}
|
||||||
<div className="absolute inset-0 bg-[url('/map.png')] bg-cover bg-center">
|
<div className="">
|
||||||
{/* Map Placeholder - In a real implementation, this would be a map component */}
|
{/* Map Placeholder - In a real implementation, this would be a map component */}
|
||||||
<div className="absolute inset-0 flex items-center justify-center">
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
<div className="text-2xl text-muted-foreground opacity-0">Map View</div>
|
<div className="text-2xl text-muted-foreground opacity-0">Map View</div>
|
||||||
|
|||||||
18
frontend/components/pipeline/badge.tsx
Normal file
18
frontend/components/pipeline/badge.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
|
||||||
|
export function StatusBadge({ status }: { status: "active" | "paused" | "error" }) {
|
||||||
|
if (status === "active") {
|
||||||
|
return (
|
||||||
|
<Badge
|
||||||
|
variant="default"
|
||||||
|
className="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
|
||||||
|
>
|
||||||
|
Active
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
} else if (status === "paused") {
|
||||||
|
return <Badge variant="secondary">Paused</Badge>;
|
||||||
|
} else {
|
||||||
|
return <Badge variant="destructive">Error</Badge>;
|
||||||
|
}
|
||||||
|
}
|
||||||
132
frontend/components/pipeline/card.tsx
Normal file
132
frontend/components/pipeline/card.tsx
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
import {
|
||||||
|
Clock,
|
||||||
|
Database,
|
||||||
|
Play,
|
||||||
|
RefreshCw,
|
||||||
|
Pause,
|
||||||
|
AlertTriangle,
|
||||||
|
Copy,
|
||||||
|
} from "lucide-react";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { StatusBadge } from "./badge";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
|
||||||
|
interface PipelineCardProps {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
status: "active" | "paused" | "error";
|
||||||
|
lastRun: string;
|
||||||
|
nextRun: string;
|
||||||
|
sources: number;
|
||||||
|
records: number;
|
||||||
|
error?: string;
|
||||||
|
aiPowered?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PipelineCard({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
status,
|
||||||
|
lastRun,
|
||||||
|
nextRun,
|
||||||
|
sources,
|
||||||
|
records,
|
||||||
|
error,
|
||||||
|
}: PipelineCardProps) {
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
className={`pipeline-card ${
|
||||||
|
status === "active"
|
||||||
|
? "border-2 border-green-500 dark:border-green-600"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<CardTitle className="text-lg">{title}</CardTitle>
|
||||||
|
<StatusBadge status={status} />
|
||||||
|
</div>
|
||||||
|
<CardDescription>{description}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center text-sm">
|
||||||
|
<Clock className="h-4 w-4 mr-2 text-muted-foreground" />
|
||||||
|
<span className="text-muted-foreground">Last run:</span>
|
||||||
|
<span className="ml-1 font-medium">{lastRun}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm">
|
||||||
|
<RefreshCw className="h-4 w-4 mr-2 text-muted-foreground" />
|
||||||
|
<span className="text-muted-foreground">Next run:</span>
|
||||||
|
<span className="ml-1 font-medium">{nextRun}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm">
|
||||||
|
<Database className="h-4 w-4 mr-2 text-muted-foreground" />
|
||||||
|
<span className="text-muted-foreground">Sources:</span>
|
||||||
|
<span className="ml-1 font-medium">{sources}</span>
|
||||||
|
<span className="mx-2">•</span>
|
||||||
|
<span className="text-muted-foreground">Records:</span>
|
||||||
|
<span className="ml-1 font-medium">{records}</span>
|
||||||
|
</div>
|
||||||
|
{error && (
|
||||||
|
<div className="flex items-center text-sm text-destructive mt-2">
|
||||||
|
<AlertTriangle className="h-4 w-4 mr-2" />
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter className="flex justify-between">
|
||||||
|
<Link
|
||||||
|
href={`/data-pipeline/${title.toLowerCase().replace(/\s+/g, "-")}`}
|
||||||
|
>
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8 text-primary border-primary/20 hover:border-primary"
|
||||||
|
>
|
||||||
|
<Copy className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
{status === "active" ? (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8 border-primary/20 hover:border-primary"
|
||||||
|
>
|
||||||
|
<Pause className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8 border-primary/20 hover:border-primary"
|
||||||
|
>
|
||||||
|
<Play className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8 border-primary/20 hover:border-primary"
|
||||||
|
>
|
||||||
|
<RefreshCw className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user