Skip to content

Commit

Permalink
feat(ui): Implement workflow toggle
Browse files Browse the repository at this point in the history
feat(ui): awdawd
  • Loading branch information
topher-lo committed Mar 5, 2024
1 parent c429f3f commit 9d19d0d
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 38 deletions.
38 changes: 2 additions & 36 deletions frontend/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,10 @@
import { cookies } from "next/headers"

import { DefaultQueryClientProvider } from "@/providers/query"
import { Label } from "@/components/ui/label"
import { Metadata } from "next"
import { SelectedWorkflowProvider } from "@/providers/selected-workflow"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { UserNav } from "@/components/user-nav"
import { Workspace } from "@/components/workspace"
import WorkflowSwitcher from "@/components/workflow-switcher"

import {
WorkflowIcon,
BellRingIcon,
} from "lucide-react"
import { Navbar } from "@/components/navbar"

export const metadata: Metadata = {
title: "Workflows | Tracecat",
Expand Down Expand Up @@ -42,32 +33,7 @@ export default function DashboardPage() {
<DefaultQueryClientProvider>
<SelectedWorkflowProvider>
<div className="flex flex-col h-screen">
<div className="border-b">
<div className="flex h-16 items-center px-4">
<div className="flex space-x-8">
<WorkflowSwitcher />
<Tabs defaultValue="workspace-view">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="workflow">
<WorkflowIcon className="h-4 w-4 mr-2" />
Workflow
</TabsTrigger>
<TabsTrigger value="cases">
<BellRingIcon className="h-4 w-4 mr-2" />
Cases
</TabsTrigger>
</TabsList>
</Tabs>
</div>
<div className="ml-auto flex items-center space-x-8">
<div className="flex items-center space-x-2">
<Switch id="airplane-mode" />
<Label htmlFor="airplane-mode">Enable workflow</Label>
</div>
<UserNav />
</div>
</div>
</div>
<Navbar />
<div className="flex flex-col flex-grow">
<Workspace
defaultLayout={defaultLayout}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/forms/workflow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,9 @@ export function WorkflowForm({ workflowId, workflowTitle, workflowDescription, w
<div className="space-y-3">
<h4 className="text-sm font-medium">Workflow Status</h4>
<div className="flex justify-between">
<Badge variant="outline" className={`py-1 px-4 ${workflowStatus === "online" ? 'bg-green-100' : 'bg-gray-100'}`}>
<Badge variant="outline" className={`py-1 px-4 ${workflowStatus === "online" ? 'bg-green-600/10' : 'bg-gray-100'}`}>
<CircleIcon className={`mr-2 h-3 w-3 ${workflowStatus === "online" ? 'fill-green-600 text-green-600' : 'fill-gray-400 text-gray-400'}`} />
<span className={`text-muted-foreground ${workflowStatus === "online" ? 'text-green-600' : 'text-gray-600'}`}>{statusCapitalized}</span>
<span className={`${workflowStatus === "online" ? 'text-green-600' : 'text-gray-600'}`}>{statusCapitalized}</span>
</Badge>
<Tooltip>
<TooltipTrigger asChild>
Expand Down
79 changes: 79 additions & 0 deletions frontend/src/components/navbar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
"use client";

import { useEffect, useState } from "react"
import axios from "axios"

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { UserNav } from "@/components/user-nav"
import WorkflowSwitcher from "@/components/workflow-switcher"
import { useSelectedWorkflowMetadata } from "@/providers/selected-workflow"

import {
WorkflowIcon,
BellRingIcon,
} from "lucide-react"


export function Navbar() {

const { selectedWorkflowMetadata } = useSelectedWorkflowMetadata(); // This assumes the existence of such a hook
const [enableWorkflow, setEnableWorkflow] = useState(false);
const selectedWorkflowId = selectedWorkflowMetadata.id;

useEffect(() => {
const updateWorkflowStatus = async () => {
if (selectedWorkflowMetadata && selectedWorkflowId) {
const status = enableWorkflow ? "online" : "offline";
try {
await axios.post(`http://localhost:8000/workflows/${selectedWorkflowId}`, JSON.stringify({
status: status,
}), {
headers: {
"Content-Type": "application/json",
},
});
console.log(`Workflow ${selectedWorkflowId} set to ${status}`);
} catch (error) {
console.error("Failed to update workflow status:", error);
}
}
};

updateWorkflowStatus();
}, [enableWorkflow, selectedWorkflowMetadata]);

return (
<div className="border-b">
<div className="flex h-16 items-center px-4">
<div className="flex space-x-8">
<WorkflowSwitcher />
<Tabs defaultValue="workspace-view">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="workflow">
<WorkflowIcon className="h-4 w-4 mr-2" />
Workflow
</TabsTrigger>
<TabsTrigger value="cases">
<BellRingIcon className="h-4 w-4 mr-2" />
Cases
</TabsTrigger>
</TabsList>
</Tabs>
</div>
<div className="ml-auto flex items-center space-x-8">
<div className="flex items-center space-x-2">
<Switch
id="enable-workflow"
checked={enableWorkflow}
onCheckedChange={(newCheckedState) => setEnableWorkflow(newCheckedState)}
/>
<Label className="w-32" htmlFor="enable-workflow">{enableWorkflow ? "Disable workflow" : "Enable workflow"}</Label>
</div>
<UserNav />
</div>
</div>
</div>
)
}

0 comments on commit 9d19d0d

Please sign in to comment.