Skip to content

Commit

Permalink
Merge branch 'main' of github.com:parthasarathygopu/golemVasanth
Browse files Browse the repository at this point in the history
  • Loading branch information
@itsparser
itsparser committed Jan 4, 2025
2 parents 5ac648d + 1dcd50f commit 64356d5
Show file tree
Hide file tree
Showing 16 changed files with 301 additions and 105 deletions.
59 changes: 59 additions & 0 deletions crates/webapp/src/components/ui/alert.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const alertVariants = cva(
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
{
variants: {
variant: {
default: "bg-background text-foreground",
destructive:
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
},
},
defaultVariants: {
variant: "default",
},
}
)

const Alert = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
<div
ref={ref}
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
))
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
{...props}
/>
))
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm [&_p]:leading-relaxed", className)}
{...props}
/>
))
AlertDescription.displayName = "AlertDescription"

export { Alert, AlertTitle, AlertDescription }
2 changes: 1 addition & 1 deletion crates/webapp/src/pages/api/details/createRoute.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ const CreateRoute = () => {
}`}
>
<SelectValue placeholder="Select a version">
{version}
V{version}
</SelectValue>
</SelectTrigger>
<SelectContent>
Expand Down
172 changes: 154 additions & 18 deletions crates/webapp/src/pages/api/details/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { useParams, useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import { Plus } from "lucide-react";
// import {Globe, Link2 } from "lucide-react"
import { Trash2, Plus } from "lucide-react";

import {
Select,
SelectContent,
Expand All @@ -11,14 +13,31 @@ import {
import ApiLeftNav from "./apiLeftNav.tsx";
import { API } from "@/service";
import { Api } from "@/types/api";
import { Button } from "@/components/ui/button.tsx";
import ErrorBoundary from "@/components/errorBoundary.tsx";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";

const APIDetails = () => {
const { apiName } = useParams();
const navigate = useNavigate();
const [apiDetails, setApiDetails] = useState([] as Api[]);
const [activeApiDetails, setActiveApiDetails] = useState({} as Api);
// const [deployments] = useState([
// {
// domain: "api.golem.cloud",
// id: "abcd",
// status: "Active",
// },
// ]);

useEffect(() => {
if (apiName) {
Expand All @@ -29,6 +48,22 @@ const APIDetails = () => {
}
}, [apiName]);

const handleDeleteRoute = (index: number) => {
const newRoutes = [...activeApiDetails.routes];
newRoutes.splice(index, 1);
const newApiDetails = {
...activeApiDetails,
routes: newRoutes,
};
API.putApi(
activeApiDetails.id,
activeApiDetails.version,
newApiDetails
).then(() => {
setActiveApiDetails(newApiDetails);
});
};

return (
<ErrorBoundary>
<div className="flex">
Expand Down Expand Up @@ -71,22 +106,123 @@ const APIDetails = () => {
</div>
</header>

<main className="flex-1 overflow-y-auto p-6">
<section>
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-medium text-foreground">Routes</h2>
<Button
variant="outline"
onClick={() => navigate(`/apis/${apiName}/routes/new`)}
className="flex items-center gap-2"
>
<Plus className="h-5 w-5" />
<span>Add</span>
</Button>
</div>
<div className="bg-muted rounded-lg border border-muted-foreground p-6 text-center text-muted-foreground">
No routes defined for this API version.
</div>
<main className="flex-1 overflow-y-auto p-6 h-[80vh]">
<section className="grid gap-16">
<Card>
<CardHeader>
<div className="flex items-center justify-between mb-4">
<CardTitle>Routes</CardTitle>
<Button
variant="outline"
onClick={() => navigate(`/apis/${apiName}/routes/new`)}
className="flex items-center gap-2"
>
<Plus className="h-5 w-5" />
<span>Add</span>
</Button>
</div>
</CardHeader>
<CardContent>
{activeApiDetails?.routes?.length === 0 ? (
<div className="text-center">
No routes defined for this API version
</div>
) : (
<div className="space-y-4">
{activeApiDetails?.routes?.map((route, index) => (
<div
key={`${route.method}-${route.path}`}
className="flex items-center justify-between rounded-lg border p-4 hover:bg-muted/50 transition-colors"
>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Badge variant="secondary">{route.method}</Badge>
<code className="text-sm font-semibold">
{route.path}
</code>
</div>
<div className="space-y-1 text-sm text-muted-foreground">
<p className="text-xs">
Component ID:{" "}
{route.binding.componentId.componentId}
</p>
<p className="text-xs">
Version ID: {route.binding.componentId.version}
</p>
<p className="text-xs">
Worker: {route.binding.workerName}
</p>
<p className="text-xs">
Response: {route.binding.response || "N/A"}
</p>
</div>
</div>
<Dialog>
<DialogTrigger asChild>
<Button
variant="ghost"
size="icon"
className="text-muted-foreground hover:text-destructive"
>
<Trash2 className="h-4 w-4" />
<span className="sr-only">Delete route</span>
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete Route</DialogTitle>
<DialogDescription>
Are you sure you want to delete the route{" "}
{route.method} {route.path}? This action
cannot be undone.
</DialogDescription>
</DialogHeader>
<div className="flex justify-end gap-2">
<Button
variant="destructive"
onClick={() => handleDeleteRoute(index)}
>
Delete Route
</Button>
</div>
</DialogContent>
</Dialog>
</div>
))}
</div>
)}
</CardContent>
</Card>
{/* <Card>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle>Active Deployments</CardTitle>
<Button variant="ghost" className="text-primary">
View All
</Button>
</CardHeader>
<CardContent>
{deployments.map((deployment) => (
<div
key={deployment.id}
className="flex items-center justify-between rounded-lg border p-4"
>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Globe className="h-4 w-4" />
<span className="font-medium">
{deployment.domain}
</span>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Link2 className="h-4 w-4" />
<span>{deployment.id}</span>
</div>
</div>
<Badge variant="outline">{deployment.status}</Badge>
</div>
))}
</CardContent>
</Card> */}
</section>
</main>
</div>
Expand Down
Loading

0 comments on commit 64356d5

Please sign in to comment.