From dae5612722865d885c02f43445c9235ce24da986 Mon Sep 17 00:00:00 2001 From: frikky Date: Fri, 17 Sep 2021 23:21:39 +0200 Subject: [PATCH] Re-added basic list-view for workflows with datagrid --- frontend/src/theme.js | 1 + frontend/src/views/Workflows.jsx | 155 ++++++++++++++++++++++--------- 2 files changed, 113 insertions(+), 43 deletions(-) diff --git a/frontend/src/theme.js b/frontend/src/theme.js index 8a84975f..92371aad 100644 --- a/frontend/src/theme.js +++ b/frontend/src/theme.js @@ -12,6 +12,7 @@ const theme = createMuiTheme({ text: { secondary: "rgba(255,255,255,0.7)", }, + type: 'dark', surfaceColor: "#27292d", inputColor: "#383B40", borderRadius: 5, diff --git a/frontend/src/views/Workflows.jsx b/frontend/src/views/Workflows.jsx index fcdd7121..63c1df24 100644 --- a/frontend/src/views/Workflows.jsx +++ b/frontend/src/views/Workflows.jsx @@ -4,7 +4,7 @@ import { makeStyles } from '@material-ui/core/styles'; import { useTheme } from '@material-ui/core/styles'; import {Avatar, Grid, Paper, Tooltip, Divider, Button, TextField, FormControl, IconButton, Menu, MenuItem, FormControlLabel, Chip, Switch, Typography, Zoom, CircularProgress, Dialog, DialogTitle, DialogActions, DialogContent} from '@material-ui/core'; -import {Close as CloseIcon, Compare as CompareIcon, Maximize as MaximizeIcon, Minimize as MinimizeIcon, AddCircle as AddCircleIcon, Toc as TocIcon, Send as SendIcon, Search as SearchIcon, FileCopy as FileCopyIcon, Delete as DeleteIcon, BubbleChart as BubbleChartIcon, Restore as RestoreIcon, Cached as CachedIcon, GetApp as GetAppIcon, Apps as AppsIcon, Edit as EditIcon, MoreVert as MoreVertIcon, PlayArrow as PlayArrowIcon, Add as AddIcon, Publish as PublishIcon, CloudUpload as CloudUploadIcon, CloudDownload as CloudDownloadIcon} from '@material-ui/icons'; +import {GridOn as GridOnIcon, List as ListIcon, Close as CloseIcon, Compare as CompareIcon, Maximize as MaximizeIcon, Minimize as MinimizeIcon, AddCircle as AddCircleIcon, Toc as TocIcon, Send as SendIcon, Search as SearchIcon, FileCopy as FileCopyIcon, Delete as DeleteIcon, BubbleChart as BubbleChartIcon, Restore as RestoreIcon, Cached as CachedIcon, GetApp as GetAppIcon, Apps as AppsIcon, Edit as EditIcon, MoreVert as MoreVertIcon, PlayArrow as PlayArrowIcon, Add as AddIcon, Publish as PublishIcon, CloudUpload as CloudUploadIcon, CloudDownload as CloudDownloadIcon} from '@material-ui/icons'; //import {Search as SearchIcon, ArrowUpward as ArrowUpwardIcon, Visibility as VisibilityIcon, Done as DoneIcon, Close as CloseIcon, Error as ErrorIcon, FindReplace as FindreplaceIcon, ArrowLeft as ArrowLeftIcon, Cached as CachedIcon, DirectionsRun as DirectionsRunIcon, Add as AddIcon, Polymer as PolymerIcon, FormatListNumbered as FormatListNumberedIcon, Create as CreateIcon, PlayArrow as PlayArrowIcon, AspectRatio as AspectRatioIcon, MoreVert as MoreVertIcon, Apps as AppsIcon, Schedule as ScheduleIcon, FavoriteBorder as FavoriteBorderIcon, Pause as PauseIcon, Delete as DeleteIcon, AddCircleOutline as AddCircleOutlineIcon, Save as SaveIcon, KeyboardArrowLeft as KeyboardArrowLeftIcon, KeyboardArrowRight as KeyboardArrowRightIcon, ArrowBack as ArrowBackIcon, Settings as SettingsIcon, LockOpen as LockOpenIcon, ExpandMore as ExpandMoreIcon, VpnKey as VpnKeyIcon} from '@material-ui/icons'; //https://next.material-ui.com/components/material-icons/ @@ -47,13 +47,13 @@ const flexBoxStyle = { } const useStyles = makeStyles((theme) => ({ - root: { + datagrid: { border: 0, '& .MuiDataGrid-columnsContainer': { - backgroundColor: theme.palette.type === 'light' ? '#fafafa' : '#1d1d1d', + backgroundColor: theme.palette.type === 'light' ? '#fafafa' : theme.palette.inputColor, }, '& .MuiDataGrid-iconSeparator': { - display: 'none', + display: 'none', }, '& .MuiDataGrid-colCell, .MuiDataGrid-cell': { borderRight: `1px solid ${ @@ -330,10 +330,10 @@ const Workflows = (props) => { const { globalUrl, isLoggedIn, isLoaded, removeCookie, cookies, userdata} = props; document.title = "Shuffle - Workflows" const theme = useTheme(); - const referenceUrl = globalUrl+"/api/v1/hooks/" - const alert = useAlert() - const classes = useStyles(); + const classes = useStyles(theme); + + const referenceUrl = globalUrl+"/api/v1/hooks/" var upload = "" const [file, setFile] = React.useState(""); @@ -1659,48 +1659,99 @@ const Workflows = (props) => { return [triggers, schedules, webhooks, subflows] } - const WorkflowGridView = () => { + const WorkflowListView = () => { let workflowData = ""; if (workflows.length > 0) { const columns = [ - { field: 'title', headerName: 'Title', width: 330, }, - { field: 'actions', headerName: 'Actions', width: 200, sortable: false, + { field: 'title', headerName: 'Title', width: 330, renderCell: (params) => { + const data = params.row.record + + return ( + + + + {data.name} + + + + ) + }}, + {/* field: 'category', headerName: 'category', width: 140, renderCell: (params) => { + const data = params.row.record + const category = data.category === undefined ? "not defined" : data.category + return ( + + {category} + + ) + } */}, + { field: 'actions', headerName: 'Options', width: 200, sortable: false, disableClickEventBubbling: true, renderCell: (params) => { const data = params.row.record; + const actions = data.actions !== null ? data.actions.length : 0 let [triggers, schedules, webhooks, subflows] = getWorkflowMeta(data); return ( - - - - - - - - executeWorkflow(data.id)} /> - - - - - {webhooks > 0 ? - - +
+ + + + + {actions} + + - : null} - {schedules > 0 ? - - + + + + + {triggers} + + - : null} + + { + if (subflows === 0) { + alert.info("No subflows for "+data.name) + return + } + + var newWorkflows = [data] + for (var key in data.triggers) { + const trigger = data.triggers[key] + if (trigger.app_name !== "Shuffle Workflow") { + continue + } + + if (trigger.parameters !== undefined && trigger.parameters !== null && trigger.parameters.length > 0 && trigger.parameters[0].name === "workflow") { + const newWorkflow = workflows.find(item => item.id === trigger.parameters[0].value) + if (newWorkflow !== null && newWorkflow !== undefined) { + newWorkflows.push(newWorkflow) + continue + } + } + } + + setFilters(["Subflows of "+data.name]) + setFilteredWorkflows(newWorkflows) + }}> + + + + + {subflows} + + + + +
) } }, - { field: 'tags', headerName: 'Tags', maxHeight: 15, width: 390, sortable: false, + {/* field: 'tags', headerName: 'Tags', maxHeight: 15, width: 390, sortable: false, disableClickEventBubbling: true, renderCell: (params) => { const data = params.row.record; @@ -1726,7 +1777,7 @@ const Workflows = (props) => { ) } - }, + */} ]; let rows = []; rows = workflows.map((data, index) => { @@ -1739,9 +1790,19 @@ const Workflows = (props) => { return obj; }); workflowData = - + } return (
@@ -1905,6 +1966,16 @@ const Workflows = (props) => { : null*/} + {view === "list" && ( + + + + )} + {view === "grid" && ( + + + + )} {importLoading ?
- {view === "grid" && ( + {view === "grid" ? {filteredWorkflows.map((data, index) => { @@ -2062,11 +2133,9 @@ const Workflows = (props) => { ) })} - )} - - {/*view === "list" && ( - - )*/} + : + + }