dataplane-app · saul-data · Feb 16, 2022 · Feb 12, 2022 · Feb 15, 2022
diff --git a/frontend/package.json b/frontend/package.json
@@ -41,6 +41,7 @@
         "react-scripts": "5.0.0",
         "react-table": "^7.7.0",
         "rrule": "^2.6.8",
+        "uuid": "^8.3.2",
         "web-vitals": "^1.0.1"
     },
     "scripts": {

diff --git a/frontend/src/components/CustomNodesContent/ApiNode/index.jsx b/frontend/src/components/CustomNodesContent/ApiNode/index.jsx
@@ -9,16 +9,16 @@ import customNodeStyle from '../../../utils/customNodeStyle';
 import ApiTriggerNodeItem from '../../MoreInfoContent/APITriggerNodeItem';
 import MoreInfoMenu from '../../MoreInfoMenu';
 
-const ApiNode = () => {
+const ApiNode = (props) => {
     // Global state
     const FlowState = useGlobalFlowState();
 
     const [isEditorPage, setIsEditorPage] = useState(false);
-    const [isSelected, setIsSelected] = useState(false);
+    const [, setIsSelected] = useState(false);
 
     useEffect(() => {
         setIsEditorPage(FlowState.isEditorPage.get());
-        setIsSelected(FlowState.selectedElementId.get() === 'djdsfjdf4');
+        setIsSelected(FlowState.selectedElement.get()?.id === props.id);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -28,13 +28,13 @@ const ApiNode = () => {
     }, [FlowState.isEditorPage.get()]);
 
     useEffect(() => {
-        setIsSelected(FlowState.selectedElementId.get() === 'djdsfjdf4');
+        setIsSelected(FlowState.selectedElement.get()?.id === props.id);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [FlowState.selectedElementId.get()]);
+    }, [FlowState.selectedElement.get()]);
 
     return (
-        <Box sx={{ ...customNodeStyle, border: `${isSelected ? '3px solid #FF5722' : '3px solid #c4c4c4'}` }}>
-            <Handle type="source" position="right" id="schedule" style={{ backgroundColor: 'red', right: -0.7 }} />
+        <Box sx={{ ...customNodeStyle }}>
+            <Handle type="source" position="right" id="schedule" style={{ backgroundColor: 'red', height: 10, width: 10 }} />
 
             <Grid container alignItems="flex-start" wrap="nowrap">
                 <Box component={FontAwesomeIcon} fontSize={19} color="secondary.main" icon={faGlobe} />

diff --git a/frontend/src/components/CustomNodesContent/CheckpointNode/index.jsx b/frontend/src/components/CustomNodesContent/CheckpointNode/index.jsx
@@ -0,0 +1,61 @@
+import { faMapMarkedAlt } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Grid, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import { useEffect, useState } from 'react';
+import { Handle, Position } from 'react-flow-renderer';
+import { useGlobalFlowState } from '../../../pages/Flow';
+import customNodeStyle from '../../../utils/customNodeStyle';
+import PlayTriggerNodeItem from '../../MoreInfoContent/PlayTriggerNodeItem';
+import MoreInfoMenu from '../../MoreInfoMenu';
+
+const CheckpointNode = (props) => {
+    // Global state
+    const FlowState = useGlobalFlowState();
+
+    const [isEditorPage, setIsEditorPage] = useState(false);
+    const [, setIsSelected] = useState(false);
+
+    useEffect(() => {
+        setIsEditorPage(FlowState.isEditorPage.get());
+        setIsSelected(FlowState.selectedElement.get()?.id === props.id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        setIsEditorPage(FlowState.isEditorPage.get());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [FlowState.isEditorPage.get()]);
+
+    useEffect(() => {
+        setIsSelected(FlowState.selectedElement.get()?.id === props.id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [FlowState.selectedElement.get()]);
+
+    return (
+        <Box sx={{ ...customNodeStyle }}>
+            <Handle type="source" position={Position.Right} id="checkpoint_source" style={{ backgroundColor: 'red', height: 10, width: 10 }} />
+            <Handle type="target" position={Position.Left} id="checkpoint_target" style={{ backgroundColor: 'red', height: 10, width: 10 }} />
+            <Grid container alignItems="flex-start" wrap="nowrap">
+                <Box component={FontAwesomeIcon} fontSize={19} color="secondary.main" icon={faMapMarkedAlt} />
+                <Grid item ml={1.5} textAlign="left">
+                    <Typography fontSize={11} fontWeight={900}>
+                        Checkpoint
+                    </Typography>
+                </Grid>
+
+                {isEditorPage && (
+                    <Grid position="absolute" bottom={2} right={9} container wrap="nowrap" width="auto" alignItems="center" justifyContent="space-between">
+                        <Box mt={2}>
+                            <MoreInfoMenu iconHorizontal iconColor="#0073C6" iconColorDark="#0073C6" iconSize={19} noPadding>
+                                <PlayTriggerNodeItem />
+                            </MoreInfoMenu>
+                        </Box>
+                    </Grid>
+                )}
+            </Grid>
+        </Box>
+    );
+};
+
+export default CheckpointNode;
diff --git a/frontend/src/components/CustomNodesContent/ClearLogsNode/index.jsx b/frontend/src/components/CustomNodesContent/ClearLogsNode/index.jsx
@@ -4,22 +4,22 @@ import { Grid, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useEffect } from 'react';
 import { useState } from 'react';
-import { Handle } from 'react-flow-renderer';
+import { Handle, Position } from 'react-flow-renderer';
 import { useGlobalFlowState } from '../../../pages/Flow';
 import ClearLogsEditorModeItem from '../../MoreInfoContent/ClearLogsEditorModeItem';
 import ClearLogsNodeItem from '../../MoreInfoContent/ClearLogsNodeItem';
 import MoreInfoMenu from '../../MoreInfoMenu';
 
-const ClearLogsNode = ({ data }) => {
+const ClearLogsNode = (props) => {
     // Global state
     const FlowState = useGlobalFlowState();
 
     const [isEditorPage, setIsEditorPage] = useState(false);
-    const [isSelected, setIsSelected] = useState(false);
+    const [, setIsSelected] = useState(false);
 
     useEffect(() => {
         setIsEditorPage(FlowState.isEditorPage.get());
-        setIsSelected(FlowState.selectedElementId.get() === 'djdsfjdf5');
+        setIsSelected(FlowState.selectedElement.get()?.id === props.id);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -29,13 +29,14 @@ const ClearLogsNode = ({ data }) => {
     }, [FlowState.isEditorPage.get()]);
 
     useEffect(() => {
-        setIsSelected(FlowState.selectedElementId.get() === 'djdsfjdf5');
+        setIsSelected(FlowState.selectedElement.get()?.id === props.id);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [FlowState.selectedElementId.get()]);
+    }, [FlowState.selectedElement.get()]);
 
     return (
-        <Box sx={{ padding: '10px 15px', width: 160, borderRadius: '10px', border: `${isSelected ? '3px solid #FF5722' : '3px solid #0073C6'}` }}>
-            <Handle type="target" position="left" isConnectable id="clear" style={{ backgroundColor: 'red', left: -0.7 }} />
+        <Box sx={{ padding: '10px 15px', width: 160, borderRadius: '10px', border: '3px solid #c4c4c4' }}>
+            <Handle type="target" position={Position.Left} isConnectable id="clear" style={{ backgroundColor: 'red', height: 10, width: 10 }} />
+            <Handle type="source" position={Position.Right} id="3" style={{ backgroundColor: 'red', height: 10, width: 10 }} />
             <Grid container alignItems="flex-start" wrap="nowrap" pb={2}>
                 <Box component={FontAwesomeIcon} fontSize={19} color="secondary.main" icon={faRunning} />
                 <Grid item ml={1.5} textAlign="left">
@@ -51,12 +52,12 @@ const ClearLogsNode = ({ data }) => {
 
             <Grid position="absolute" bottom={2} left={9} right={9} container wrap="nowrap" width="auto" alignItems="center" justifyContent="space-between">
                 <Grid item>
-                    <Typography fontSize={8}>Python</Typography>
+                    <Typography fontSize={8}>{props.data.language}</Typography>
                 </Grid>
 
                 <Box mt={0}>
                     <MoreInfoMenu iconHorizontal iconColor="#0073C6" iconColorDark="#0073C6" iconSize={19} noPadding>
-                        {isEditorPage ? <ClearLogsEditorModeItem openConfigure={data.setIsOpenConfigure} openCommand={data.setIsOpenCommand} /> : <ClearLogsNodeItem />}
+                        {isEditorPage ? <ClearLogsEditorModeItem /> : <ClearLogsNodeItem />}
                     </MoreInfoMenu>
                 </Box>
             </Grid>

diff --git a/frontend/src/components/CustomNodesContent/CustomLine/index.jsx b/frontend/src/components/CustomNodesContent/CustomLine/index.jsx
@@ -1,18 +1,14 @@
 import { useTheme } from '@emotion/react';
 import React from 'react';
+import { getBezierPath } from 'react-flow-renderer';
 
-const CustomLine = ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, connectionLineType, connectionLineStyle }) => {
+const CustomLine = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style = {}, data, arrowHeadType, markerEndId }) => {
     const theme = useTheme();
+    const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
 
     return (
         <g>
-            <path
-                fill="none"
-                stroke={theme.palette.mode === 'dark' ? '#fff' : '#222'}
-                strokeWidth={3}
-                d={`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`}
-                markerEnd="url(#react-flow__arrowclosed)"
-            />
+            <path fill="none" stroke={theme.palette.mode === 'dark' ? '#fff' : '#222'} strokeWidth={3} d={edgePath} markerEnd="url(#react-flow__arrowclosed)" />
         </g>
     );
 };

diff --git a/frontend/src/components/CustomNodesContent/PlayNode/index.jsx b/frontend/src/components/CustomNodesContent/PlayNode/index.jsx
@@ -9,16 +9,16 @@ import customNodeStyle from '../../../utils/customNodeStyle';
 import PlayTriggerNodeItem from '../../MoreInfoContent/PlayTriggerNodeItem';
 import MoreInfoMenu from '../../MoreInfoMenu';
 
-const PlayNode = () => {
+const PlayNode = (props) => {
     // Global state
     const FlowState = useGlobalFlowState();
 
     const [isEditorPage, setIsEditorPage] = useState(false);
-    const [isSelected, setIsSelected] = useState(false);
+    const [, setIsSelected] = useState(false);
 
     useEffect(() => {
         setIsEditorPage(FlowState.isEditorPage.get());
-        setIsSelected(FlowState.selectedElementId.get() === 'djdsfjdf');
+        setIsSelected(FlowState.selectedElement.get()?.id === props.id);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -28,13 +28,13 @@ const PlayNode = () => {
     }, [FlowState.isEditorPage.get()]);
 
     useEffect(() => {
-        setIsSelected(FlowState.selectedElementId.get() === 'djdsfjdf');
+        setIsSelected(FlowState.selectedElement.get()?.id === props.id);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [FlowState.selectedElementId.get()]);
+    }, [FlowState.selectedElement.get()]);
 
     return (
-        <Box sx={{ ...customNodeStyle, border: `${isSelected ? '3px solid #FF5722' : '3px solid #c4c4c4'}` }}>
-            <Handle type="source" position="right" id="play" style={{ backgroundColor: 'red', right: -0.7 }} />
+        <Box sx={{ ...customNodeStyle }}>
+            <Handle type="source" position="right" id="play" style={{ backgroundColor: 'red', height: 10, width: 10 }} />
             <Grid container alignItems="flex-start" wrap="nowrap">
                 <Box component={FontAwesomeIcon} fontSize={19} color="secondary.main" icon={faPlayCircle} />
                 <Grid item ml={1.5} textAlign="left">

diff --git a/frontend/src/components/CustomNodesContent/ScheduleNode/index.jsx b/frontend/src/components/CustomNodesContent/ScheduleNode/index.jsx
@@ -9,10 +9,10 @@ import customNodeStyle from '../../../utils/customNodeStyle';
 import ScheduleTriggerNodeItem from '../../MoreInfoContent/ScheduleTriggerNodeItem';
 import MoreInfoMenu from '../../MoreInfoMenu';
 
-const ScheduleNode = () => {
+const ScheduleNode = (props) => {
     const [isRunning, setIsRunning] = useState(false);
     const [isEditorPage, setIsEditorPage] = useState(false);
-    const [isSelected, setIsSelected] = useState(false);
+    const [, setIsSelected] = useState(false);
 
     const FlowState = useGlobalFlowState();
 
@@ -23,7 +23,7 @@ const ScheduleNode = () => {
 
     useEffect(() => {
         setIsEditorPage(FlowState.isEditorPage.get());
-        setIsSelected(FlowState.selectedElementId.get() === 'djdsfjdf3');
+        setIsSelected(FlowState.selectedElement.get()?.id === props.id);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -33,13 +33,13 @@ const ScheduleNode = () => {
     }, [FlowState.isEditorPage.get()]);
 
     useEffect(() => {
-        setIsSelected(FlowState.selectedElementId.get() === 'djdsfjdf3');
+        setIsSelected(FlowState.selectedElement.get()?.id === props.id);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [FlowState.selectedElementId.get()]);
+    }, [FlowState.selectedElement.get()]);
 
     return (
-        <Box sx={{ ...customNodeStyle, border: isSelected ? '3px solid #FF5722' : isRunning ? '3px solid #76A853' : '3px solid #c4c4c4' }}>
-            <Handle type="source" position="right" id="schedule" style={{ backgroundColor: 'red', right: -0.7 }} />
+        <Box sx={{ ...customNodeStyle, border: isRunning ? '3px solid #76A853' : '3px solid #c4c4c4' }}>
+            <Handle type="source" position="right" id="schedule" style={{ backgroundColor: 'red', height: 10, width: 10 }} />
             <Grid container alignItems="flex-start" wrap="nowrap">
                 <Box component={FontAwesomeIcon} fontSize={19} color="secondary.main" icon={faClock} />
                 <Grid item ml={1.5} textAlign="left">

diff --git a/frontend/src/components/DrawerContent/ConfigureLogsDrawer/index.jsx b/frontend/src/components/DrawerContent/ConfigureLogsDrawer/index.jsx
@@ -1,11 +1,22 @@
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Box, Button, Grid, TextField, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { useGlobalFlowState } from '../../../pages/Flow';
 
 const ConfigureLogsDrawer = ({ handleClose, refreshData }) => {
+    const [processorName, setProcessorName] = useState('-');
     const { register, handleSubmit } = useForm();
 
+    const FlowState = useGlobalFlowState();
+
+    useEffect(() => {
+        setProcessorName(FlowState.selectedElement.get()?.data?.language);
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [FlowState.selectedElement.get()]);
+
     async function onSubmit(data) {
         console.log(data);
     }
@@ -22,7 +33,7 @@ const ConfigureLogsDrawer = ({ handleClose, refreshData }) => {
 
                     <Box mt={3} width="212px">
                         <Typography component="h2" variant="h2">
-                            Processor - Python
+                            Processor - {processorName}
                         </Typography>
 
                         <TextField

diff --git a/frontend/src/components/DrawerContent/EditorDrawers/APITriggerDrawer/index.jsx b/frontend/src/components/DrawerContent/EditorDrawers/APITriggerDrawer/index.jsx
@@ -0,0 +1,86 @@
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Autocomplete, Box, Button, Grid, TextField, Typography } from '@mui/material';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+const APITRiggerDrawer = ({ handleClose, refreshData }) => {
+    const [secret, setSecret] = useState();
+    const { register, handleSubmit } = useForm();
+
+    async function onSubmit(data) {
+        console.log(data);
+    }
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <Box position="relative" width="100%">
+                <Box sx={{ p: '4.125rem 3.81rem' }}>
+                    <Box position="absolute" top="26px" right="39px" display="flex" alignItems="center">
+                        <Button onClick={handleClose} style={{ paddingLeft: '16px', paddingRight: '16px' }} variant="text" startIcon={<FontAwesomeIcon icon={faTimes} />}>
+                            Close
+                        </Button>
+                    </Box>
+
+                    <Box mt={3}>
+                        <Typography component="h2" variant="h2">
+                            Trigger - API
+                        </Typography>
+
+                        <Typography fontSize={15} sx={{ color: 'secondary.main' }}>
+                            Experimental feature
+                        </Typography>
+
+                        <Box mt={3}>
+                            <Typography fontSize={15}>Endpoint: https://localhost:9000/32845-238467-96929</Typography>
+                        </Box>
+
+                        <Grid container alignItems="center" flexWrap="nowrap" mt={1}>
+                            <Typography fontSize={15} flex={1}>
+                                Authentication header:
+                            </Typography>
+                            <Autocomplete
+                                sx={{ width: '100%', flex: 1 }}
+                                disablePortal
+                                value={secret}
+                                id="combo-box-demo"
+                                onChange={(event, newValue) => {
+                                    setSecret(newValue);
+                                }}
+                                options={[]}
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        label="Secret"
+                                        id="secret"
+                                        size="small"
+                                        sx={{ fontSize: '.75rem', display: 'flex', width: '100%' }}
+                                        {...register('secret')}
+                                    />
+                                )}
+                            />
+                        </Grid>
+
+                        <Grid mt={4} display="flex" alignItems="center">
+                            <Button type="submit" variant="contained" color="primary" style={{ width: '100%' }}>
+                                Save
+                            </Button>
+                        </Grid>
+                    </Box>
+
+                    <Box mt={7}>
+                        <Typography fontSize={15} fontWeight={700}>
+                            Expected
+                        </Typography>
+
+                        <Box mt={2}>
+                            <Typography>curl .... </Typography>
+                        </Box>
+                    </Box>
+                </Box>
+            </Box>
+        </form>
+    );
+};
+
+export default APITRiggerDrawer;