Merge pull request #100 from NicolasMarqui/DA_103_Workflow

DA-103 and DA-104: Added workflow page and added permissions page

frontend/package.json

@@ -27,6 +27,7 @@
         "qs": "^6.10.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-flow-renderer": "^9.7.3",
         "react-hook-form": "^7.21.2",
         "react-idle-timer": "^4.6.4",
         "react-lottie": "^1.2.3",

frontend/src/App.js

@@ -25,6 +25,8 @@ import Settings from './pages/Settings';
 import TeamDetail from './pages/TeamDetail';
 import TeamGroup from './pages/TeamGroup';
 import Teams from './pages/Teams';
+import RemoveLogs from './pages/RemoveLogs';
+import PipelinesPermission from './pages/PipelinesPermission';
 import createCustomTheme from './theme';
 
 export const ColorModeContext = React.createContext({
@@ -118,6 +120,8 @@ function App() {
                                             '/secrets/:secretId',
                                             '/addsecret',
                                             '/notfound',
+                                            '/pipelines/remove_logs/:pipelineId',
+                                            '/pipelines/permissions/:pipelineId',
                                         ]}>
                                         <Switch>
                                             <Layout>
@@ -154,6 +158,12 @@ function App() {
                                                 <Route exact path="/addsecret">
                                                     <AddSecret />
                                                 </Route>
+                                                <Route exact path="/pipelines/remove_logs/:pipelineId">
+                                                    <RemoveLogs />
+                                                </Route>
+                                                <Route exact path="/pipelines/permissions/:pipelineId">
+                                                    <PipelinesPermission />
+                                                </Route>
                                                 <Route exact path="/notfound">
                                                     <NotFound />
                                                 </Route>

frontend/src/components/CustomChip/index.jsx

@@ -6,13 +6,15 @@ const CustomChip = ({ customColor = 'red', amount, margin = 0, ...props }) => {
         green: 'success.main',
         red: 'error.main',
         purple: 'purple.main',
+        blue: 'primary.main',
     };
 
     const AMOUNT_COLOR_LIGHT = {
         orange: 'secondary.light',
         green: 'success.light',
         red: 'redLight.main',
         purple: 'purpleLight.main',
+        blue: 'primary.light',
     };
 
     return amount ? (

frontend/src/components/CustomNodesContent/ApiNode/index.jsx

@@ -0,0 +1,29 @@
+import { faGlobe } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Grid, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import { Handle } from 'react-flow-renderer';
+import customNodeStyle from '../../../utils/customNodeStyle';
+
+const ApiNode = () => {
+    return (
+        <Box sx={{ ...customNodeStyle }}>
+            <Handle type="source" position="right" id="schedule" style={{ backgroundColor: 'red', right: -0.7 }} />
+
+            <Grid container alignItems="flex-start" wrap="nowrap">
+                <Box component={FontAwesomeIcon} fontSize={19} color="secondary.main" icon={faGlobe} />
+                <Grid item ml={1.5} textAlign="left">
+                    <Typography fontSize={11} fontWeight={900}>
+                        API trigger
+                    </Typography>
+
+                    <Typography fontSize={10} mt={1}>
+                        Receive webhooks and API calls.
+                    </Typography>
+                </Grid>
+            </Grid>
+        </Box>
+    );
+};
+
+export default ApiNode;

frontend/src/components/CustomNodesContent/ClearLogsNode/index.jsx

@@ -0,0 +1,41 @@
+import { faRunning } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Grid, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import { Handle } from 'react-flow-renderer';
+import ClearLogsNodeItem from '../../MoreInfoContent/ClearLogsNodeItem';
+import MoreInfoMenu from '../../MoreInfoMenu';
+
+const ClearLogsNode = () => {
+    return (
+        <Box sx={{ padding: '10px 15px', width: 160, borderRadius: '10px', border: `3px solid #0073C6` }}>
+            <Handle type="source" position="left" id="clear" style={{ backgroundColor: 'red', left: -0.7 }} />
+            <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">
+                    <Typography fontSize={11} fontWeight={900}>
+                        Clear the logs
+                    </Typography>
+
+                    <Typography fontSize={9} mt={0.4}>
+                        This process cleans down the logs
+                    </Typography>
+                </Grid>
+            </Grid>
+
+            <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>
+                </Grid>
+
+                <Box mt={0}>
+                    <MoreInfoMenu iconHorizontal iconColor="#0073C6" iconColorDark="#0073C6" iconSize={19} noPadding>
+                        <ClearLogsNodeItem />
+                    </MoreInfoMenu>
+                </Box>
+            </Grid>
+        </Box>
+    );
+};
+
+export default ClearLogsNode;

frontend/src/components/CustomNodesContent/PlayNode/index.jsx

@@ -0,0 +1,28 @@
+import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Grid, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import { Handle } from 'react-flow-renderer';
+import customNodeStyle from '../../../utils/customNodeStyle';
+
+const PlayNode = () => {
+    return (
+        <Box sx={{ ...customNodeStyle }}>
+            <Handle type="source" position="right" id="play" style={{ backgroundColor: 'red', right: -0.7 }} />
+            <Grid container alignItems="flex-start" wrap="nowrap">
+                <Box component={FontAwesomeIcon} fontSize={19} color="secondary.main" icon={faPlayCircle} />
+                <Grid item ml={1.5} textAlign="left">
+                    <Typography fontSize={11} fontWeight={900}>
+                        Play trigger
+                    </Typography>
+
+                    <Typography fontSize={10} mt={1}>
+                        Press play to run
+                    </Typography>
+                </Grid>
+            </Grid>
+        </Box>
+    );
+};
+
+export default PlayNode;

frontend/src/components/CustomNodesContent/ScheduleNode/index.jsx

@@ -0,0 +1,28 @@
+import { faClock } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Grid, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import { Handle } from 'react-flow-renderer';
+import customNodeStyle from '../../../utils/customNodeStyle';
+
+const ScheduleNode = () => {
+    return (
+        <Box sx={{ ...customNodeStyle, border: '3px solid #76A853' }}>
+            <Handle type="source" position="right" id="schedule" style={{ backgroundColor: 'red', right: -0.7 }} />
+            <Grid container alignItems="flex-start" wrap="nowrap">
+                <Box component={FontAwesomeIcon} fontSize={19} color="secondary.main" icon={faClock} />
+                <Grid item ml={1.5} textAlign="left">
+                    <Typography fontSize={11} fontWeight={900}>
+                        Schedule trigger
+                    </Typography>
+
+                    <Typography fontSize={10} mt={1}>
+                        Every 5 minutes
+                    </Typography>
+                </Grid>
+            </Grid>
+        </Box>
+    );
+};
+
+export default ScheduleNode;

frontend/src/components/DrawerContent/AddPipelinesPermissionDrawer/index.jsx

@@ -0,0 +1,50 @@
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Box, Button, Checkbox, FormControl, FormControlLabel, FormGroup, MenuItem, Select, Typography } from '@mui/material';
+import { useState } from 'react';
+
+const AddPipelinesPermissionDrawer = ({ handleClose, typeToAdd }) => {
+    const [selectedTypeToAdd, setSelectedTypeToAdd] = useState(typeToAdd);
+
+    // Options state
+    const [isView, setIsView] = useState(false);
+    const [isEdit, setIsEdit] = useState(false);
+    const [isRun, setIsRun] = useState(false);
+
+    return (
+        <Box position="relative">
+            <Box sx={{ p: '4.125rem' }}>
+                <Box position="absolute" top="26px" right="39px" display="flex" alignItems="center">
+                    <Button variant="text" onClick={handleClose} style={{ paddingLeft: '16px', paddingRight: '16px' }} startIcon={<FontAwesomeIcon icon={faTimes} />}>
+                        Close
+                    </Button>
+                </Box>
+
+                <Box width="212px">
+                    <Typography component="h2" variant="h2">
+                        Add permissions
+                    </Typography>
+
+                    <FormControl fullWidth sx={{ mt: 4 }}>
+                        <Select labelId="demo-simple-select-label" id="demo-simple-select" small value={selectedTypeToAdd} onChange={(e) => setSelectedTypeToAdd(e.target.value)}>
+                            <MenuItem value="User">User</MenuItem>
+                            <MenuItem value="Access group">Access group</MenuItem>
+                        </Select>
+                    </FormControl>
+
+                    <FormGroup sx={{ mt: 2 }}>
+                        <FormControlLabel control={<Checkbox sx={{ color: 'cyan.main' }} checked={isView} onChange={(e) => setIsView(e.target.checked)} />} label="View" />
+                        <FormControlLabel control={<Checkbox sx={{ color: 'cyan.main' }} checked={isEdit} onChange={(e) => setIsEdit(e.target.checked)} />} label="Edit" />
+                        <FormControlLabel control={<Checkbox sx={{ color: 'cyan.main' }} checked={isRun} onChange={(e) => setIsRun(e.target.checked)} />} label="Run" />
+                    </FormGroup>
+
+                    <Button variant="contained" color="primary" style={{ width: '100%' }} sx={{ mt: 2 }}>
+                        Add {selectedTypeToAdd.toLowerCase()}
+                    </Button>
+                </Box>
+            </Box>
+        </Box>
+    );
+};
+
+export default AddPipelinesPermissionDrawer;

frontend/src/components/MoreInfoContent/ClearLogsNodeItem/index.jsx

@@ -0,0 +1,25 @@
+import { MenuItem } from '@mui/material';
+
+const ClearLogsNodeItem = (props) => {
+    return (
+        <>
+            <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>
+                Code
+            </MenuItem>
+            <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>
+                Refresh
+            </MenuItem>
+            <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>
+                Run
+            </MenuItem>
+            <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>
+                Workers
+            </MenuItem>
+            <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>
+                Logs
+            </MenuItem>
+        </>
+    );
+};
+
+export default ClearLogsNodeItem;

frontend/src/components/MoreInfoContent/PipelineTableItem/index.jsx

@@ -1,9 +1,21 @@
 import { MenuItem } from '@mui/material';
+import { useHistory } from 'react-router-dom';
 
 const PipelineItemTable = (props) => {
+    // React router
+    const history = useHistory();
+
+    //Props
+    const { handleCloseMenu, handleOpenYaml, id } = props;
+
     const yamlClick = () => {
-        props.handleCloseMenu();
-        props.handleOpenYaml();
+        handleCloseMenu();
+        handleOpenYaml();
+    };
+
+    const permissionClick = () => {
+        handleCloseMenu();
+        history.push(`/pipelines/permissions/${id}`);
     };
 
     return (
@@ -14,7 +26,7 @@ const PipelineItemTable = (props) => {
             <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>
                 Turn off
             </MenuItem>
-            <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>
+            <MenuItem sx={{ color: 'cyan.main' }} onClick={permissionClick}>
                 Permissions
             </MenuItem>
             <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>

frontend/src/components/MoreInfoContent/RemoveLogsPageItem/index.jsx

@@ -0,0 +1,36 @@
+import { MenuItem } from '@mui/material';
+
+const RemoveLogsPageItem = (props) => {
+    const yamlClick = () => {
+        props.handleCloseMenu();
+        props.handleOpenYaml();
+    };
+
+    return (
+        <>
+            <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>
+                Pipeline
+            </MenuItem>
+            <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>
+                Analytics
+            </MenuItem>
+            <MenuItem sx={{ color: 'cyan.main' }} onClick={yamlClick}>
+                YAML
+            </MenuItem>
+            <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>
+                Reload
+            </MenuItem>
+            <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>
+                Deploy
+            </MenuItem>
+            <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>
+                Run
+            </MenuItem>
+            <MenuItem sx={{ color: 'cyan.main' }} onClick={() => props.handleCloseMenu()}>
+                Turn off
+            </MenuItem>
+        </>
+    );
+};
+
+export default RemoveLogsPageItem;

frontend/src/components/MoreInfoMenu/index.jsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
+import { faEllipsisH, faEllipsisV } from '@fortawesome/free-solid-svg-icons';
 import { Box } from '@mui/material';
 import { useTheme } from '@emotion/react';
 
 const ITEM_HEIGHT = 48;
 
-const MoreInfoMenu = ({ children, iconSize = 22, ...props }) => {
+const MoreInfoMenu = ({ children, iconSize = 22, iconHorizontal = false, iconColor = '#0000008a', iconColorDark = '#fff', noPadding = false, ...props }) => {
     const [anchorEl, setAnchorEl] = React.useState(null);
     const open = Boolean(anchorEl);
     const handleClick = (event) => {
@@ -24,12 +24,18 @@ const MoreInfoMenu = ({ children, iconSize = 22, ...props }) => {
         <div>
             <IconButton
                 aria-label="more"
+                sx={noPadding && { padding: 0 }}
                 id="long-button"
                 aria-controls={open ? 'long-menu' : undefined}
                 aria-expanded={open ? 'true' : undefined}
                 aria-haspopup="true"
                 onClick={handleClick}>
-                <Box component={FontAwesomeIcon} fontSize={iconSize} icon={faEllipsisV} />
+                <Box
+                    component={FontAwesomeIcon}
+                    fontSize={iconSize}
+                    color={theme.palette.mode === 'light' ? iconColor : iconColorDark}
+                    icon={iconHorizontal ? faEllipsisH : faEllipsisV}
+                />
             </IconButton>
             <Menu
                 {...props}
@@ -44,7 +50,7 @@ const MoreInfoMenu = ({ children, iconSize = 22, ...props }) => {
                 PaperProps={{
                     style: {
                         border: theme.palette.mode === 'dark' ? '' : '1px solid #C4C4C4',
-                        maxHeight: ITEM_HEIGHT * 5,
+                        maxHeight: ITEM_HEIGHT * 5.7,
                         width: '20ch',
                     },
                 }}>