From 3e1d5b015d80e098a2eddfb4af5bcbbaeeb24f92 Mon Sep 17 00:00:00 2001 From: frikky Date: Thu, 28 Jul 2022 14:40:25 +0200 Subject: [PATCH] Added new components to replace old for Workflow Discovery --- .github/push_nightly.sh | 8 +- frontend/src/components/WorkflowGridNew.jsx | 291 ++++++++++++++++ frontend/src/components/WorkflowPaperNew.jsx | 332 +++++++++++++++++++ frontend/src/views/AngularWorkflow.jsx | 6 +- frontend/src/views/LoginPage.jsx | 2 +- 5 files changed, 631 insertions(+), 8 deletions(-) create mode 100644 frontend/src/components/WorkflowGridNew.jsx create mode 100644 frontend/src/components/WorkflowPaperNew.jsx diff --git a/.github/push_nightly.sh b/.github/push_nightly.sh index 0c397aa2..fc452d40 100644 --- a/.github/push_nightly.sh +++ b/.github/push_nightly.sh @@ -8,8 +8,8 @@ docker pull frikky/shuffle-frontend:nightly #docker push ghcr.io/frikky/shuffle-backend:nightly #docker push ghcr.io/frikky/shuffle-frontend:nightly -docker tag frikky/shuffle-backend:nightly ghcr.io/frikky/shuffle-backend:latest -docker tag frikky/shuffle-frontend:nightly ghcr.io/frikky/shuffle-frontend:latest +docker tag frikky/shuffle-backend:nightly ghcr.io/frikky/shuffle-backend:nightly +docker tag frikky/shuffle-frontend:nightly ghcr.io/frikky/shuffle-frontend:nightly -docker push ghcr.io/frikky/shuffle-backend:latest -docker push ghcr.io/frikky/shuffle-frontend:latest +docker push ghcr.io/frikky/shuffle-backend:nightly +docker push ghcr.io/frikky/shuffle-frontend:nightly diff --git a/frontend/src/components/WorkflowGridNew.jsx b/frontend/src/components/WorkflowGridNew.jsx new file mode 100644 index 00000000..f0a06e87 --- /dev/null +++ b/frontend/src/components/WorkflowGridNew.jsx @@ -0,0 +1,291 @@ +import React, { useState, useEffect, useLayoutEffect } from "react"; +import theme from '../theme'; + +import { + Chip, + Typography, + Paper, + Avatar, + Grid, + Tooltip, +} from "@material-ui/core"; + +import { + AvatarGroup, +} from "@mui/material" + +import { + Restore as RestoreIcon, + Edit as EditIcon, + BubbleChart as BubbleChartIcon, + MoreVert as MoreVertIcon, +} from '@material-ui/icons'; + +import { useNavigate, Link, useParams } from "react-router-dom"; + +const workflowActionStyle = { + display: "flex", + width: 160, + height: 44, + justifyContent: "space-between", +} + +const paperAppStyle = { + minHeight: 130, + maxHeight: 130, + overflow: "hidden", + width: "100%", + color: "white", + backgroundColor: theme.palette.surfaceColor, + padding: "12px 12px 0px 15px", + borderRadius: 5, + display: "flex", + boxSizing: "border-box", + position: "relative", +} + +const chipStyle = { + backgroundColor: "#3d3f43", + marginRight: 5, + paddingLeft: 5, + paddingRight: 5, + height: 28, + cursor: "pointer", + borderColor: "#3d3f43", + color: "white", +} + +const WorkflowPaper = (props) => { + const { data } = props; + let navigate = useNavigate(); + + const [open, setOpen] = React.useState(false); + const [anchorEl, setAnchorEl] = React.useState(null); + const appGroup = data.action_references === undefined || data.action_references === null ? [] : data.action_references + + //console.log("Workflow: ", data) + var boxColor = "#86c142"; + + var parsedName = data.name; + if ( + parsedName !== undefined && + parsedName !== null && + parsedName.length > 20 + ) { + parsedName = parsedName.slice(0, 21) + ".."; + } + + + const imageStyle = { + width: 24, + height: 24, + marginRight: 10, + border: "1px solid rgba(255,255,255,0.3)", + } + var image = data.creator_info !== undefined && data.creator_info !== null && data.creator_info.image !== undefined && data.creator_info.image !== null && data.creator_info.image.length > 0 ? : + const creatorname = data.creator_info !== undefined && data.creator_info !== null && data.creator_info.username !== undefined && data.creator_info.username !== null && data.creator_info.username.length > 0 ? data.creator_info.username : "" + var orgName = ""; + var orgId = ""; + if ((data.objectID === undefined || data.objectID === null) && data.id !== undefined && data.id !== null) { + data.objectID = data.id + } + + //console.log("IMG: ", data) + var parsedUrl = `/workflows/${data.objectID}` + if (data.__queryID !== undefined && data.__queryID !== null) { + parsedUrl += `?queryID=${data.__queryID}` + } + + return ( +
+ +
+ + + +
{ + if (data.creator_info !== undefined) { + navigate("/creators/"+data.creator_info.username) + } + }} + > + {image} +
+ + + + + {parsedName} + + + + + + {appGroup.length > 0 ? +
+ + {appGroup.map((app, index) => { + return ( +
{ + navigate("/apps/"+app.id) + }} + > + + + +
+ ) + })} + +
+ : + + + + + {data.actions === undefined || data.actions === null ? 1 : data.actions.length} + + + + } + + + + + {data.triggers === undefined || data.triggers === null ? 1 : data.triggers.length} + + + + + { + }} + > + + + + + {0} + + + + + + {data.tags !== undefined && data.tags !== null + ? data.tags.map((tag, index) => { + if (index >= 3) { + return null; + } + + return ( + + ); + }) + : null} + + + +
+ ) + } + +export default WorkflowPaper diff --git a/frontend/src/components/WorkflowPaperNew.jsx b/frontend/src/components/WorkflowPaperNew.jsx new file mode 100644 index 00000000..17fb67e5 --- /dev/null +++ b/frontend/src/components/WorkflowPaperNew.jsx @@ -0,0 +1,332 @@ +import React, { useState, useEffect, useLayoutEffect } from "react"; +import theme from '../theme'; + +import { + Chip, + Typography, + Paper, + Avatar, + Grid, + Tooltip, + Button, +} from "@material-ui/core"; + +import { + AvatarGroup, +} from "@mui/material" + +import { + Restore as RestoreIcon, + Edit as EditIcon, + BubbleChart as BubbleChartIcon, + MoreVert as MoreVertIcon, +} from '@material-ui/icons'; + +import { useNavigate, Link, useParams } from "react-router-dom"; + +const workflowActionStyle = { + display: "flex", + width: 160, + height: 44, + justifyContent: "space-between", +} + +const paperAppStyle = { + minHeight: 130, + maxHeight: 130, + overflow: "hidden", + width: "100%", + color: "white", + backgroundColor: theme.palette.surfaceColor, + padding: "12px 12px 0px 15px", + borderRadius: 5, + display: "flex", + boxSizing: "border-box", + position: "relative", +} + +const chipStyle = { + backgroundColor: "#3d3f43", + marginRight: 5, + paddingLeft: 5, + paddingRight: 5, + height: 28, + cursor: "pointer", + borderColor: "#3d3f43", + color: "white", +} + +const WorkflowPaper = (props) => { + const { data } = props; + let navigate = useNavigate(); + + const [open, setOpen] = React.useState(false); + const [anchorEl, setAnchorEl] = React.useState(null); + const appGroup = data.action_references === undefined || data.action_references === null ? [] : data.action_references + + const activateWorkflow = (workflow) => { + console.log("Should activate: ", workflow) + + } + + //console.log("Workflow: ", data) + var boxColor = "#86c142"; + + var parsedName = data.name; + if ( + parsedName !== undefined && + parsedName !== null && + parsedName.length > 35 + ) { + parsedName = parsedName.slice(0, 36) + ".."; + } + + const imageStyle = { + width: 28, + height: 28, + marginRight: 10, + border: "1px solid rgba(255,255,255,0.3)", + } + + var image = data.creator_info !== undefined && data.creator_info !== null && data.creator_info.image !== undefined && data.creator_info.image !== null && data.creator_info.image.length > 0 ? : + const creatorname = data.creator_info !== undefined && data.creator_info !== null && data.creator_info.username !== undefined && data.creator_info.username !== null && data.creator_info.username.length > 0 ? data.creator_info.username : "Shuffle" + var orgName = ""; + var orgId = ""; + if ((data.objectID === undefined || data.objectID === null) && data.id !== undefined && data.id !== null) { + data.objectID = data.id + } + + //console.log("IMG: ", data) + var parsedUrl = `/workflows/${data.objectID}` + if (data.__queryID !== undefined && data.__queryID !== null) { + parsedUrl += `?queryID=${data.__queryID}` + } + + const paperImgStyle = { + height: 150, + width: "100%", + backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)", + color: "white", + position: "relative", + borderRadius: "10px 10px 0% 0%", + } + + const bgImage1 = "https://avatars.githubusercontent.com/u/5719530?v=4" + const bgImage2 = "https://avatars.githubusercontent.com/u/5719530?v=4" + const itemSize = 70 + + return ( +
+
+
+ Image alt +
+
+ Image alt +
+
+ +
+ + + +
{ + if (data.creator_info !== undefined) { + navigate("/creators/"+data.creator_info.username) + } + }} + > + {image} +
+ + + + + {parsedName} + + + + + + {/* + {appGroup.length > 0 ? +
+ + {appGroup.map((app, index) => { + return ( +
{ + navigate("/apps/"+app.id) + }} + > + + + +
+ ) + })} + +
+ : + + + + + {data.actions === undefined || data.actions === null ? 1 : data.actions.length} + + + + } + */} + {/* + + + + + {data.triggers === undefined || data.triggers === null ? 1 : data.triggers.length} + + + + + { + }} + > + + + + + {0} + + + + */} + + {/* + + {data.tags !== undefined && data.tags !== null + ? data.tags.map((tag, index) => { + if (index >= 3) { + return null; + } + + return ( + + ); + }) + : null} + + */} + + + + +
+ ) + } + +export default WorkflowPaper diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx index 124d78d5..843e1cf1 100644 --- a/frontend/src/views/AngularWorkflow.jsx +++ b/frontend/src/views/AngularWorkflow.jsx @@ -12043,7 +12043,7 @@ const AngularWorkflow = (defaultprops) => { : 0; const timestamp = new Date(data.started_at * 1000) - .toISOString() + .toLocaleString("en-GB") .split(".")[0] .split("T") .join(" "); @@ -12360,7 +12360,7 @@ const AngularWorkflow = (defaultprops) => { Started    - {new Date(executionData.started_at * 1000).toISOString()} + {new Date(executionData.started_at * 1000).toLocaleString("en-GB")}
) : null} @@ -12374,7 +12374,7 @@ const AngularWorkflow = (defaultprops) => { Finished   - {new Date(executionData.completed_at * 1000).toISOString()} + {new Date(executionData.completed_at * 1000).toLocaleString("en-GB")}
) : null} diff --git a/frontend/src/views/LoginPage.jsx b/frontend/src/views/LoginPage.jsx index 6c179df7..96329944 100644 --- a/frontend/src/views/LoginPage.jsx +++ b/frontend/src/views/LoginPage.jsx @@ -297,7 +297,7 @@ const LoginDialog = (props) => { {loginInfo === undefined || loginInfo === null || loginInfo.length === 0 ? null : ( -
Response: {loginInfo}
+
Database Response: {loginInfo}
)}