Skip to content

Commit 093a964

Browse files
Eyepatch5263Eyepatch5263
committed
minor UI fixes
1 parent 7f5a10a commit 093a964

File tree

7 files changed

+103
-171
lines changed

7 files changed

+103
-171
lines changed

‎frontend/src/components/CanvasForPipelines/DestinationNode.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const DestinationNode = ({ data: Data }: any) => {
3939
const [data, setData] = useState<object>({})
4040
const [form, setForm] = useState<object>({})
4141

42-
const SourceLabel = Data.supported_signals
42+
const DestinationLabel = Data.supported_signals
4343
const handleSubmit = (e: React.FormEvent) => {
4444
e.preventDefault();
4545
setIsSheetOpen(false)
@@ -69,7 +69,7 @@ export const DestinationNode = ({ data: Data }: any) => {
6969
<div className="flex ml-5 flex-col items-center justify-center w-full">
7070
<div style={{ fontSize: "9px", lineHeight: "0.8rem" }} className="font-medium">{Data.name}</div>
7171
<div className="flex justify-between gap-2 mr-4 text-xs mt-2">
72-
{SourceLabel.map((source:any, index:number) => (
72+
{DestinationLabel.map((source:any, index:number) => (
7373
<p style={{fontSize:"8px"}} key={index}>
7474
{source}
7575
</p>
@@ -122,7 +122,6 @@ export const DestinationNode = ({ data: Data }: any) => {
122122
<Button variant={"outline"} onClick={handleDeleteNode}>Delete Node</Button>
123123
</div>
124124
</SheetClose>
125-
126125
</SheetFooter>
127126
</div>
128127
</SheetContent>

‎frontend/src/components/CanvasForPipelines/PipelineCanvas.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,6 @@ const PipelineBuilder = () => {
8888
[reactFlowInstance, nodeValue, setNodeValue]
8989
);
9090

91-
92-
9391
return (
9492
<div className="w-full flex flex-col gap-2 h-screen p-4">
9593
<div className="h-4/5 border-2 border-gray-200 rounded-lg">

‎frontend/src/components/CanvasForPipelines/ProcessorNode.tsx‎

Lines changed: 92 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,186 +1,128 @@
11
import { Handle, Position } from "reactflow"
2-
import { Sheet, SheetTrigger,SheetClose, SheetContent, SheetFooter } from "../ui/sheet";
3-
import { Label } from "../ui/label"
4-
import { Input } from "../ui/input"
5-
import { AlertCircle } from "lucide-react"
2+
import { Sheet, SheetTrigger, SheetClose, SheetContent, SheetFooter } from "../ui/sheet";
63
import { Button } from "../ui/button"
74
import { useNodeValue } from "@/context/useNodeContext"
8-
import { useState } from "react";
5+
import { useEffect, useState } from "react";
96
import usePipelineChangesLog from "@/context/usePipelineChangesLog";
10-
11-
interface formData {
12-
name: string,
13-
http: string,
14-
Authentication_Token: string
15-
}
16-
export const ProcessorNode = ({ data }: any) => {
17-
const [isSidebarOpen, setIsSidebarOpen] = useState(false)
7+
import { JsonForms } from '@jsonforms/react';
8+
9+
import {
10+
materialCells,
11+
materialRenderers,
12+
} from '@jsonforms/material-renderers';
13+
14+
import { ThemeProvider, createTheme } from '@mui/material/styles';
15+
import { TransporterService } from "@/services/transporterService";
16+
17+
const theme = createTheme({
18+
components: {
19+
MuiFormControl: {
20+
styleOverrides: {
21+
root: {
22+
marginBottom: '0.5rem',
23+
},
24+
},
25+
},
26+
},
27+
});
28+
29+
const renderers = [
30+
...materialRenderers,
31+
];
32+
33+
export const ProcessorNode = ({ data: Data }: any) => {
34+
console.log(Data)
35+
const [isSheetOpen, setIsSheetOpen] = useState(false)
1836
const { setNodeValue } = useNodeValue()
19-
const {setChangesLog}=usePipelineChangesLog()
20-
const [formData, setFormData] = useState<formData>({
21-
name: data.label,
22-
http: data.sublabel,
23-
Authentication_Token: ''
24-
});
25-
const ProcessorType=data.sublabel
26-
27-
28-
const [errors, setErrors] = useState({
29-
name: false,
30-
http: false,
31-
Authentication_Token: false
32-
});
37+
const { setChangesLog } = usePipelineChangesLog()
38+
const [data, setData] = useState<object>({})
39+
const [form, setForm] = useState<object>({})
3340

34-
const [touched, setTouched] = useState({
35-
name: false,
36-
http: false,
37-
Authentication_Token: false
38-
});
39-
40-
const handleChange = (e: any) => {
41-
const { id, value } = e.target;
42-
setFormData(prev => ({
41+
const ProcessorLabel = Data.supported_signals
42+
const handleSubmit = () => {
43+
setNodeValue(prev => [
4344
...prev,
44-
[id]: value
45-
}));
46-
47-
// Clear error when user types
48-
if (value.trim()) {
49-
setErrors(prev => ({
50-
...prev,
51-
[id]: false
52-
}));
53-
}
54-
};
55-
56-
const handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLSelectElement>) => {
57-
const { id } = e.target;
58-
setTouched(prev => ({
45+
{
46+
id: `${Data.label}-${Date.now()}`,
47+
data: { ...data },
48+
type: 'processor',
49+
position: { x: 0, y: 0 },
50+
},
51+
]);
52+
setChangesLog(prev => [
5953
...prev,
60-
[id]: true
61-
}));
62-
63-
// Validate on blur
64-
if ((id === 'name' || id === 'http') && !formData[id as keyof formData].trim()) {
65-
setErrors(prev => ({
66-
...prev,
67-
[id]: true
68-
}));
69-
}
70-
};
71-
72-
const handleSubmit = (e: React.FormEvent) => {
73-
e.preventDefault();
74-
const newErrors = {
75-
name: !formData.name.trim(),
76-
http: !formData.http.trim(),
77-
Authentication_Token: false
78-
};
79-
if(formData.name!==data.label && formData.http!==data.sublabel){
80-
setChangesLog(prev => [...prev, { type: 'processor', name: data.label, status: "edited" }])
81-
}
82-
83-
setErrors(newErrors);
84-
setTouched({
85-
name: true,
86-
http: true,
87-
Authentication_Token: true
88-
});
54+
{ type: 'processor', name: Data.label, status: "added" },
55+
]);
56+
setIsSheetOpen(false);
57+
}
8958

90-
setIsSidebarOpen(false)
59+
const getForm = async () => {
60+
const res = await TransporterService.getTransporterForm(Data.plugin_name)
61+
setForm(res)
62+
}
9163

92-
};
64+
useEffect(() => {
65+
getForm()
66+
}, [])
9367

9468
const handleDeleteNode = () => {
95-
setNodeValue(prev => prev.filter(node => node.id !== data.label));
96-
setChangesLog(prev => [...prev, { type: 'processor', name: data.label, status: "deleted" }])
97-
setIsSidebarOpen(false)
69+
setNodeValue(prev => prev.filter(node => node.id !== Data.label));
70+
setChangesLog(prev => [...prev, { type: 'processor', name: Data.label, status: "deleted" }])
71+
setIsSheetOpen(false)
9872
}
9973
return (
100-
<Sheet open={isSidebarOpen} onOpenChange={setIsSidebarOpen}>
74+
<Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
10175
<SheetTrigger asChild>
102-
<div className="flex flex-col bg-white rounded-md p-2 shadow-sm w-48">
76+
<div onClick={() => setIsSheetOpen(true)} className='flex items-center'>
77+
<div className='bg-green-600 h-6 rounded-tl-lg rounded-bl-lg w-2' />
78+
<div className="bg-gray-200 rounded border-2 border-gray-300 p-4 h-[6rem] shadow-md w-[8rem] relative">
10379
<Handle type="target" position={Position.Left} className="bg-green-600 w-0 h-0 rounded-full" />
104-
<div className="font-medium text-sm">{formData.name}</div>
105-
<div className="text-gray-400 text-xs">{formData.http}</div>
106-
<div className="flex justify-between text-xs mt-2">
107-
<div>{data.inputType}</div>
108-
<div>{data.outputType}</div>
80+
81+
<div style={{ fontSize: "9px", lineHeight: "0.8rem" }} className="font-medium">{Data.name}</div>
82+
<div className="flex justify-between gap-2 mr-2 text-xs mt-2">
83+
{ProcessorLabel.map((source: any, index: number) => (
84+
<p style={{ fontSize: "8px" }} key={index}>
85+
{source}
86+
</p>
87+
))}
88+
</div>
89+
<Handle type="source" position={Position.Right} className="bg-green-600 w-0 h-0 rounded-full" />
10990
</div>
110-
<Handle type="source" position={Position.Right} className="bg-green-600 w-0 h-0 rounded-full" />
91+
<div className='bg-green-600 h-6 rounded-tr-lg rounded-br-lg w-2' />
11192
</div>
93+
11294
</SheetTrigger>
11395
<SheetContent className="w-[36rem]">
11496
<div className="flex flex-col gap-4 p-4">
11597
<div className="flex gap-3 items-center">
11698
<p className="text-lg bg-gray-500 items-center rounded-lg p-2 px-3 m-1 text-white">→|</p>
117-
<h2 className="text-xl font-bold">{ProcessorType}</h2>
118-
99+
<h2 className="text-xl font-bold">{Data.name}</h2>
119100
</div>
120101
<p className="text-gray-500">Generate the defined log type at the rate desired <span className="text-blue-500 underline">Documentation</span></p>
121-
<form className="space-y-6" onSubmit={handleSubmit}>
122-
<div className="space-y-2">
123-
<Label htmlFor="name" className="text-base font-medium flex items-center">
124-
Name <span className="text-red-500 ml-1">*</span>
125-
</Label>
126-
<Input
127-
id="name"
128-
value={formData.name}
129-
onChange={handleChange}
130-
onBlur={handleBlur}
131-
className={`h-10 ${errors.name && touched.name ? 'border-red-500 focus-visible:ring-red-500' : 'border-gray-300'}`}
132-
required
133-
/>
134-
{errors.name && touched.name && (
135-
<div className="flex items-center mt-1 text-red-500 text-sm">
136-
<AlertCircle className="w-4 h-4 mr-1" />
137-
<span>Name is required</span>
102+
<ThemeProvider theme={theme}>
103+
<div className='mt-3'>
104+
<div className='text-2xl p-4 font-semibold bg-gray-100'>{form.title}</div>
105+
<div className='p-3 '>
106+
<div className='overflow-y-auto h-[29rem]'>
107+
<JsonForms
108+
data={data}
109+
schema={form}
110+
renderers={renderers}
111+
cells={materialCells}
112+
onChange={({ data }) => setData(data)}
113+
/>
138114
</div>
139-
)}
140-
</div>
141-
142-
<div className="space-y-2">
143-
<Label htmlFor="http" className="text-base font-medium flex items-center">
144-
HTTP <span className="text-red-500 ml-1">*</span>
145-
</Label>
146-
<Input
147-
id="http"
148-
value={formData.http}
149-
onChange={handleChange}
150-
onBlur={handleBlur}
151-
className={`h-10 ${errors.http && touched.http ? 'border-red-500 focus-visible:ring-red-500' : 'border-gray-300'}`}
152-
required
153-
/>
154-
{errors.http && touched.http && (
155-
<div className="flex items-center mt-1 text-red-500 text-sm">
156-
<AlertCircle className="w-4 h-4 mr-1" />
157-
<span>HTTP is required</span>
158-
</div>
159-
)}
160-
</div>
161-
162-
<div className="space-y-2">
163-
<Label htmlFor="Authentication_Token" className="text-base font-medium flex items-center">
164-
Authentication Token
165-
</Label>
166-
<Input
167-
id="Authentication_Token"
168-
value={formData.Authentication_Token}
169-
onChange={handleChange}
170-
onBlur={handleBlur}
171-
className={`h-10 ${errors.Authentication_Token && touched.Authentication_Token ? 'border-red-500 focus-visible:ring-red-500' : 'border-gray-300'}`}
172-
/>
115+
</div>
173116
</div>
174-
</form>
175-
<SheetFooter className="mt-[15rem]">
117+
</ThemeProvider>
118+
<SheetFooter>
176119
<SheetClose>
177120
<div className="flex gap-3">
178121
<Button className="bg-blue-500" onClick={handleSubmit}>Apply</Button>
179-
<Button variant={"outline"} onClick={() => setIsSidebarOpen(false)}>Discard Changes</Button>
122+
<Button variant={"outline"} onClick={() => setIsSheetOpen(false)}>Discard Changes</Button>
180123
<Button variant={"outline"} onClick={handleDeleteNode}>Delete Node</Button>
181124
</div>
182125
</SheetClose>
183-
184126
</SheetFooter>
185127
</div>
186128
</SheetContent>

‎frontend/src/components/CanvasForPipelines/SourceNode.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,6 @@ export const SourceNode = ({ data:Data }: any) => {
9595
<div className="flex gap-3 items-center">
9696
<p className="text-lg bg-gray-500 items-center rounded-lg p-2 px-3 m-1 text-white">→|</p>
9797
<h2 className="text-xl font-bold">{Data.name}</h2>
98-
9998
</div>
10099
<p className="text-gray-500">Generate the defined log type at the rate desired. <span className="text-blue-500 underline">Documentation</span></p>
101100
<ThemeProvider theme={theme}>

‎frontend/src/components/Pipelines/AddNewPipelineComponent/ProgressFlow.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ const ProgressFlow = () => {
2525
<div className="w-px h-12 bg-gray-300 absolute top-4 left-1/2 transform -translate-x-1/2"></div>
2626
)}
2727
</div>
28-
2928
{/* Step Content */}
3029
<motion.div
3130
className="pb-6"

‎frontend/src/components/Pipelines/DropdownOptions/DestinationDropdownOptions.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ import {
1010
} from "@/components/ui/dropdown-menu"
1111

1212
import { Sheet, SheetClose, SheetContent, SheetFooter } from "@/components/ui/sheet";
13-
import React, { useEffect, useState } from "react";
14-
import { Node } from "reactflow";
13+
import { useEffect, useState } from "react";
1514
import { useNodeValue } from "@/context/useNodeContext";
1615
import usePipelineChangesLog from "@/context/usePipelineChangesLog";
1716
import { TransporterService } from "@/services/transporterService";
@@ -55,10 +54,10 @@ const DestinationDropdownOptions = () => {
5554
const supported_signals = destinations.find(s => s.name == pluginName)?.supported_signals
5655
const newNode: any = {
5756
id: `node_${Date.now()}`,
58-
type: "source",
57+
type: "destination",
5958
position: { x: 350, y: 450 },
6059
component_id: existingNodes.length,
61-
component_role: "receiver",
60+
component_role: "exporter",
6261
config: data,
6362
name: destinationOptionValue,
6463
plugin_name: pluginName,

0 commit comments

Comments
 (0)