mirror of
https://github.com/dograh-hq/dograh.git
synced 2026-06-19 08:28:10 +02:00
Initial Commit 🚀 🚀
This commit is contained in:
Abhishek Kumar
commit
4f2a629340
444 changed files with 76863 additions and 0 deletions
22
ui/src/components/workflow/CreateWorkflowButton.tsx
Normal file
22
ui/src/components/workflow/CreateWorkflowButton.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
'use client';
|
||||
|
||||
import { PlusIcon } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export function CreateWorkflowButton() {
|
||||
const router = useRouter();
|
||||
const handleClick = () => {
|
||||
router.push('/create-workflow');
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
onClick={handleClick}
|
||||
>
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
Create Workflow
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
82
ui/src/components/workflow/TemplateCard.tsx
Normal file
82
ui/src/components/workflow/TemplateCard.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
'use client';
|
||||
|
||||
import { Copy } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { duplicateWorkflowTemplateApiV1WorkflowTemplatesDuplicatePost } from '@/client/sdk.gen';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAuth } from '@/lib/auth';
|
||||
import logger from '@/lib/logger';
|
||||
|
||||
interface DuplicateWorkflowTemplateProps {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
serverAccessToken?: string | null;
|
||||
}
|
||||
|
||||
export function DuplicateWorkflowTemplate({ id, title, description, serverAccessToken }: DuplicateWorkflowTemplateProps) {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
const { user, getAccessToken } = useAuth();
|
||||
|
||||
const handleDuplicate = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
// Use server-provided token if available, otherwise try to get from client auth
|
||||
let accessToken = serverAccessToken;
|
||||
|
||||
if (!accessToken) {
|
||||
if (!user) {
|
||||
logger.error('User not authenticated and no server token provided');
|
||||
return;
|
||||
}
|
||||
accessToken = await getAccessToken();
|
||||
}
|
||||
|
||||
if (!accessToken) {
|
||||
logger.error('No access token available');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await duplicateWorkflowTemplateApiV1WorkflowTemplatesDuplicatePost({
|
||||
body: {
|
||||
template_id: id,
|
||||
workflow_name: title,
|
||||
},
|
||||
headers: {
|
||||
'Authorization': `Bearer ${accessToken}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.data) {
|
||||
logger.info('Workflow created successfully from template');
|
||||
// Redirect to the new workflow
|
||||
router.push(`/workflow/${response.data.id}`);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(`Error creating workflow from template: ${error}`);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow p-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">{title}</h3>
|
||||
<p className="text-gray-600 mb-4">{description}</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
onClick={handleDuplicate}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Copy className="w-4 h-4 mr-2" />
|
||||
{isLoading ? 'Creating...' : 'Duplicate Workflow Template'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
133
ui/src/components/workflow/UploadWorkflowButton.tsx
Normal file
133
ui/src/components/workflow/UploadWorkflowButton.tsx
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
'use client';
|
||||
|
||||
import { Upload } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
import { createWorkflowApiV1WorkflowCreateDefinitionPost } from '@/client/sdk.gen';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { useAuth } from '@/lib/auth';
|
||||
import logger from '@/lib/logger';
|
||||
import { getRandomId } from '@/lib/utils';
|
||||
|
||||
import { WorkflowData } from '../flow/types';
|
||||
|
||||
export function UploadWorkflowButton() {
|
||||
const router = useRouter();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { user, getAccessToken } = useAuth();
|
||||
|
||||
const handleFileUpload = useCallback(async (file: File) => {
|
||||
try {
|
||||
const text = await file.text();
|
||||
const workflowData: WorkflowData = JSON.parse(text);
|
||||
|
||||
if (!workflowData.workflow_definition?.nodes ||
|
||||
!workflowData.workflow_definition?.edges ||
|
||||
!workflowData.workflow_definition?.viewport) {
|
||||
throw new Error('Invalid workflow data structure');
|
||||
}
|
||||
|
||||
if (!user) return;
|
||||
const accessToken = await getAccessToken();
|
||||
const response = await createWorkflowApiV1WorkflowCreateDefinitionPost({
|
||||
body: {
|
||||
name: workflowData.name || `WF-${getRandomId()}`,
|
||||
workflow_definition: workflowData.workflow_definition as unknown as { [key: string]: unknown },
|
||||
},
|
||||
headers: {
|
||||
'Authorization': `Bearer ${accessToken}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.data?.id) {
|
||||
router.push(`/workflow/${response.data.id}`);
|
||||
setIsOpen(false);
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Failed to upload workflow. Please check if the file is valid.');
|
||||
logger.error(`Error uploading workflow: ${err}`);
|
||||
}
|
||||
}, [router, user, getAccessToken]);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
setError(null);
|
||||
|
||||
const file = e.dataTransfer.files[0];
|
||||
if (file && file.type === 'application/json') {
|
||||
handleFileUpload(file);
|
||||
} else {
|
||||
setError('Please upload a valid JSON file');
|
||||
}
|
||||
}, [handleFileUpload]);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
}, []);
|
||||
|
||||
const handleFileInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
handleFileUpload(file);
|
||||
}
|
||||
}, [handleFileUpload]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
onClick={() => setIsOpen(true)}
|
||||
variant="outline"
|
||||
>
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
Upload Workflow
|
||||
</Button>
|
||||
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Upload Workflow</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div
|
||||
className={`mt-4 border-2 border-dashed rounded-lg p-8 text-center ${isDragging ? 'border-primary bg-primary/5' : 'border-gray-300'
|
||||
}`}
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
>
|
||||
<Upload className="w-8 h-8 mx-auto mb-4 text-gray-400" />
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
Drag and drop your Workflow JSON File here, or Click to Select
|
||||
</p>
|
||||
<input
|
||||
type="file"
|
||||
accept=".json"
|
||||
onChange={handleFileInput}
|
||||
className="hidden"
|
||||
id="workflow-upload"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => document.getElementById('workflow-upload')?.click()}
|
||||
>
|
||||
Select File
|
||||
</Button>
|
||||
{error && (
|
||||
<p className="mt-4 text-sm text-red-600">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
31
ui/src/components/workflow/WorkflowCard.tsx
Normal file
31
ui/src/components/workflow/WorkflowCard.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
'use client';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
interface WorkflowCardProps {
|
||||
id: number;
|
||||
name: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export function WorkflowCard({ id, name, createdAt }: WorkflowCardProps) {
|
||||
const router = useRouter();
|
||||
|
||||
const handleClick = () => {
|
||||
router.push(`/workflow/${id}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-white border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 p-4 cursor-pointer transform hover:-translate-y-1"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">{name}</h3>
|
||||
<p className="text-gray-600 mb-2">
|
||||
Created: {new Date(createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
160
ui/src/components/workflow/WorkflowTable.tsx
Normal file
160
ui/src/components/workflow/WorkflowTable.tsx
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
'use client';
|
||||
|
||||
import { Archive, Eye, RotateCcw } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState, useTransition } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { updateWorkflowStatusApiV1WorkflowWorkflowIdStatusPut } from '@/client/sdk.gen';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useUserConfig } from '@/context/UserConfigContext';
|
||||
|
||||
interface Workflow {
|
||||
id: number;
|
||||
name: string;
|
||||
status: string;
|
||||
created_at: string;
|
||||
total_runs?: number | null;
|
||||
}
|
||||
|
||||
interface WorkflowTableProps {
|
||||
workflows: Workflow[];
|
||||
showArchived: boolean;
|
||||
}
|
||||
|
||||
export function WorkflowTable({ workflows, showArchived }: WorkflowTableProps) {
|
||||
const router = useRouter();
|
||||
const { accessToken } = useUserConfig();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [loadingWorkflowId, setLoadingWorkflowId] = useState<number | null>(null);
|
||||
|
||||
const handleView = (id: number) => {
|
||||
router.push(`/workflow/${id}`);
|
||||
};
|
||||
|
||||
const handleArchiveToggle = async (id: number, currentStatus: string) => {
|
||||
if (!accessToken) {
|
||||
toast.error('Authentication required');
|
||||
return;
|
||||
}
|
||||
|
||||
const newStatus = currentStatus === 'active' ? 'archived' : 'active';
|
||||
const action = currentStatus === 'active' ? 'Archive' : 'Restore';
|
||||
|
||||
setLoadingWorkflowId(id);
|
||||
|
||||
try {
|
||||
const response = await updateWorkflowStatusApiV1WorkflowWorkflowIdStatusPut({
|
||||
path: {
|
||||
workflow_id: id,
|
||||
},
|
||||
body: {
|
||||
status: newStatus,
|
||||
},
|
||||
headers: {
|
||||
'Authorization': `Bearer ${accessToken}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.data) {
|
||||
toast.success(`Workflow ${action.toLowerCase()}d successfully`);
|
||||
startTransition(() => {
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error ${action.toLowerCase()}ing workflow:`, error);
|
||||
toast.error(`Failed to ${action.toLowerCase()} workflow`);
|
||||
} finally {
|
||||
setLoadingWorkflowId(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white border rounded-lg overflow-hidden shadow-sm">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50">
|
||||
<TableHead className="font-semibold">Workflow Name</TableHead>
|
||||
<TableHead className="font-semibold">Created At</TableHead>
|
||||
<TableHead className="font-semibold text-center">Total Runs</TableHead>
|
||||
<TableHead className="font-semibold text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{workflows.map((workflow) => (
|
||||
<TableRow
|
||||
key={workflow.id}
|
||||
className={`hover:bg-gray-50 transition-colors ${showArchived ? 'opacity-60' : ''}`}
|
||||
>
|
||||
<TableCell className="font-medium">
|
||||
{workflow.name}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{new Date(workflow.created_at).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<span className="inline-flex items-center justify-center min-w-[2rem] px-2 py-1 text-sm font-semibold bg-gray-100 rounded-full">
|
||||
{workflow.total_runs || 0}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleView(workflow.id)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Eye size={16} />
|
||||
View
|
||||
</Button>
|
||||
<Button
|
||||
variant={showArchived ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => handleArchiveToggle(workflow.id, workflow.status)}
|
||||
disabled={loadingWorkflowId === workflow.id || isPending}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{loadingWorkflowId === workflow.id ? (
|
||||
<>
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
|
||||
{showArchived ? 'Restoring...' : 'Archiving...'}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{showArchived ? (
|
||||
<>
|
||||
<RotateCcw size={16} />
|
||||
Restore
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Archive size={16} />
|
||||
Archive
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue