@@ -4408,88 +4633,357 @@ If you're interested, please let me know a time that works for you, or set up a
backgroundColor: theme.palette.inputColor,
}}
/>
-
-
-
- {schedules === undefined || schedules === null
- ? null
- : schedules.map((schedule, index) => {
- var bgColor = "#27292d";
- if (index % 2 === 0) {
- bgColor = "#1f2023";
- }
-
- return (
-
- 0 ? (
- schedule.frequency
- ) : (
- {schedule.seconds} seconds
- )
- }
- />
-
- {schedule.workflow_id}
-
- }
- />
-
- deleteSchedule(schedule)}
+ {allSchedules === undefined ||
+ allSchedules === null ||
+ allSchedules.length === 0 ? (
+
+ No schedules found.
+
+ ) : (
+
+
+
+ {allSchedules.map((schedule, index) => {
+ var bgColor = "#27292d";
+ if (index % 2 === 0) {
+ bgColor = "#1f2023";
+ }
+
+ return (
+
+ 0 ? (
+ schedule.frequency
+ ) : (
+ {schedule.seconds} seconds
+ )
+ }
+ />
+
- Stop schedule
-
-
-
- );
- })}
-
+ {schedule.workflow_id}
+
+ }
+ />
+
+
+ {
+ if (schedule.status === "running") {
+ deleteSchedule(schedule);
+ } else startSchedule(schedule);
+ }}
+ >
+ {schedule.status === "running"
+ ? "Stop Schedule"
+ : "Start Schedule"}
+
+
+
+ );
+ })}
+
+ )}
+
+
+
WebHooks
+
+
+
+ {webHooks === undefined || webHooks === null || webHooks.length === 0 ? (
+
+ No webhooks found.
+
+ ) : (
+
+
+
+ {webHooks.map((webhook, index) => {
+ var bgColor = "#27292d";
+ if (index % 2 === 0) {
+ bgColor = "#1f2023";
+ }
+
+ return (
+
+
+ {webhook.workflows[0]}
+
+ }
+ />
+
+
+ {
+ const elementName = "copy_element_shuffle";
+ var copyText = document.getElementById(elementName);
+ if (copyText !== null && copyText !== undefined) {
+ const clipboard = navigator.clipboard;
+ if (clipboard === undefined) {
+ toast("Can only copy over HTTPS (port 3443)");
+ return;
+ }
+
+ navigator.clipboard.writeText(webhook.info.url);
+ copyText.select();
+ copyText.setSelectionRange(
+ 0,
+ 99999,
+ ); /* For mobile devices */
+
+ /* Copy the text inside the text field */
+ document.execCommand("copy");
+
+ toast("URL copied to clipboard");
+ }
+ }}
+ >
+
+
+ )
+ }
+ />
+
+
+ {
+ if (webhook.status === "running") {
+ deleteWebhook(webhook);
+ } else startWebHook(webhook);
+ }}
+ >
+ {webhook.status === "running"
+ ? "Stop webhook"
+ : "Start Webhook"}
+
+
+
+ );
+ })}
+
+ )}
+
+ {/*
+
Tenzir Pipelines
+
+ Controls a pipeline to run things.{" "}
+
+ Learn more
+
+
+
+
+
+ {pipelines === undefined ||
+ pipelines === null ||
+ pipelines.length === 0 ? (
+
+ No pipelines found.
+
+ ) : (
+
+
+
+ {pipelines.map((pipeline, index) => {
+ var bgColor = "#27292d";
+ if (index % 2 === 0) {
+ bgColor = "#1f2023";
+ }
+
+ return (
+
+
+ {pipeline.workflow_id}
+
+ }
+ />
+
+ {
+ if (pipeline.status === "running") {
+ changePipelineState(pipeline, "stop");
+ } else changePipelineState(pipeline, "start");
+ }}
+ >
+ {pipeline.status === "running"
+ ? "Stop pipeline"
+ : "Start pipeline"}
+
+
+
+ );
+ })}
+
+ )}*/}
) : null;
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index bf5b21e1..ecaf4e6a 100755
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -120,9 +120,12 @@ import {
Add as AddIcon,
} from "@mui/icons-material";
-import * as cytoscape from "cytoscape";
-import * as edgehandles from "cytoscape-edgehandles";
+//import * as cytoscape from "cytoscape";
+import cytoscape from "cytoscape";
+
+import edgehandles from "cytoscape-edgehandles";
import CytoscapeComponent from "react-cytoscapejs";
+
import Draggable from "react-draggable";
import cytoscapestyle from "../defaultCytoscapeStyle.jsx";
import ShuffleCodeEditor from "../components/ShuffleCodeEditor1.jsx";
@@ -137,6 +140,8 @@ import ExtraApps from "../components/ExtraApps.jsx"
import EditWorkflow from "../components/EditWorkflow.jsx"
// import AppStats from "../components/AppStats.jsx";
+cytoscape.use(edgehandles);
+
export const triggers = [
{
name: "Webhook",
@@ -236,15 +241,7 @@ export const triggers = [
},
];
-// http://apps.cytoscape.org/apps/yfileslayoutalgorithms
-cytoscape.use(edgehandles);
-//cytoscape.use(clipboard);
-//cytoscape.use(undoRedo);
-//cytoscape.use(cxtmenu);
-
// Adds specific text to items
-//import popper from 'cytoscape-popper';
-//cytoscape.use(popper);
// https://stackoverflow.com/questions/19014250/rerender-view-on-browser-resize-with-react
function useWindowSize() {
@@ -592,7 +589,27 @@ const AngularWorkflow = (defaultprops) => {
]
}*/
]
- }]
+ },{
+ "name": "Communication",
+ "description": "Available actions for communication",
+ "label": "Communication",
+ "parameters": [{
+ "name": "action",
+ "value": "list_messages",
+ "options": [
+ "list_messages",
+ "send_message",
+ ],
+ "required": true,
+ },
+ {
+ "name": "fields",
+ "value": "",
+ "required": false,
+ "multiline": true,
+ }]
+ },
+ ]
}]
/*
@@ -685,7 +702,7 @@ const AngularWorkflow = (defaultprops) => {
props.userdata.active_org !== undefined
? props.userdata.active_org.cloud_sync === true
: false;
- const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" || window.location.host === "migration.shuffler.io";
const appBarSize = isCloud ? 75 : 72;
const triggerEnvironments = isCloud ? ["cloud"] : ["onprem", "cloud"];
@@ -3996,42 +4013,50 @@ const AngularWorkflow = (defaultprops) => {
workflow.actions.push(newNodeData);
- const sourcebranches = workflow.branches.filter(
- (foundbranch) => foundbranch.source_id === parentNode.data("id")
- );
- const destinationbranches = workflow.branches.filter(
- (foundbranch) =>
- foundbranch.destination_id === parentNode.data("id")
- );
+ const sourcebranches = workflow.branches.filter((foundbranch) => foundbranch.source_id === parentNode.data("id"))
+
+
+ const destinationbranches = workflow.branches.filter((foundbranch) => foundbranch.destination_id === parentNode.data("id"))
+
for (var sourceBranchesKey in sourcebranches) {
var newbranch = JSON.parse(JSON.stringify(sourcebranches[sourceBranchesKey]));
- newbranch.id = uuidv4();
- newbranch.source_id = newNodeData.id;
- newbranch._id = newbranch.id;
- newbranch.source = newbranch.source_id;
- newbranch.target = newbranch.destination_id;
- cy.add({
- group: "edges",
- data: newbranch,
- });
+ newbranch.id = uuidv4()
+ newbranch.source_id = newNodeData.id
+
+ newbranch._id = newbranch.id
+ newbranch.source = newbranch.source_id
+ newbranch.target = newbranch.destination_id
+ cy.add({
+ group: "edges",
+ data: newbranch,
+ })
}
for (var destinationBranchesKey in destinationbranches) {
- var newbranch = JSON.parse(
- JSON.stringify(destinationbranches[destinationBranchesKey])
- );
- newbranch.id = uuidv4();
- newbranch.destination_id = newNodeData.id;
+ var newbranch = JSON.parse(JSON.stringify(destinationbranches[destinationBranchesKey]))
- newbranch._id = newbranch.id;
- newbranch.source = newbranch.source_id;
- newbranch.target = newbranch.destination_id;
- cy.add({
- group: "edges",
- data: newbranch,
- });
+ const sourcenode = cy.getElementById(newbranch.source_id)
+ if (sourcenode !== null && sourcenode !== undefined) {
+ const sourcedata = sourcenode.data()
+
+ if (sourcedata.trigger_type !== "SUBFLOW" && sourcedata.trigger_type !== "USERINPUT") {
+ continue
+ }
+
+ }
+
+ newbranch.id = uuidv4()
+ newbranch.destination_id = newNodeData.id
+
+ newbranch._id = newbranch.id
+ newbranch.source = newbranch.source_id
+ newbranch.target = newbranch.destination_id
+ cy.add({
+ group: "edges",
+ data: newbranch,
+ })
}
//event.target.unselect();
@@ -4783,7 +4808,7 @@ const AngularWorkflow = (defaultprops) => {
event.target.remove()
//console.log("Found branch already!")
- toast("Triggers can have exactly one target node")
+ toast.error("Triggers can have exactly one target node")
return
@@ -5194,7 +5219,7 @@ const AngularWorkflow = (defaultprops) => {
data: newdata,
})
- toast("You must STOP the trigger before deleting its branches")
+ toast.error("You must STOP the trigger before deleting its branches")
} catch (e) {
console.log("Failed re-adding edge: ", e)
}
@@ -13130,7 +13155,7 @@ const AngularWorkflow = (defaultprops) => {
if (trigger.id === undefined) {
return;
}
-
+
fetch(globalUrl + "/api/v1/hooks/" + trigger.id + "/delete", {
method: "DELETE",
headers: {
@@ -13143,32 +13168,34 @@ const AngularWorkflow = (defaultprops) => {
if (response.status !== 200) {
console.log("Status not 200 for stream results :O!");
}
-
+
return response.json();
})
.then((responseJson) => {
+ if (!responseJson.success) {
+ if (responseJson.reason !== undefined) {
+ toast("Failed to stop webhook: " + responseJson.reason);
+ }
+ } else {
+ toast("Successfully stopped webhook");
+ }
if (workflow.triggers[triggerindex] !== undefined) {
workflow.triggers[triggerindex].status = "stopped";
}
-
- if (responseJson.success) {
- // Set the status
- saveWorkflow(workflow);
- } else {
- if (responseJson.reason !== undefined) {
- toast("Failed stopping webhook: " + responseJson.reason);
- }
- }
-
trigger.status = "stopped";
- setWorkflow(workflow);
setSelectedTrigger(trigger);
+ setWorkflow(workflow);
+ saveWorkflow(workflow);
+
})
.catch((error) => {
//toast(error.toString());
- toast("Delete webhook error. Contact support or check logs if this persists.")
+ toast(
+ "Delete webhook error. Contact support or check logs if this persists.",
+ );
});
};
+
// POST to /api/v1/workflows
const createWorkflow = (workflow, trigger_index) => {
@@ -17221,6 +17248,10 @@ const AngularWorkflow = (defaultprops) => {
return "Run this workflow in a local environment to increase the timeout. Go to https://shuffler.io/admin?tab=environments to create an environment to connect to"
}
+ if (stringjson.toLowerCase().includes("invalid header")) {
+ return "A header or authentication token in the app is invalid. Check the app's configuration"
+ }
+
return ""
}
diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx
index 354a60c3..209407ea 100755
--- a/frontend/src/views/AppCreator.jsx
+++ b/frontend/src/views/AppCreator.jsx
@@ -1037,55 +1037,41 @@ const AppCreator = (defaultprops) => {
"schema"
] !== null
) {
- try {
- if (
- methodvalue["requestBody"]["content"]["application/xml"][
- "schema"
- ]["properties"] !== undefined
- ) {
- var tmpobject = {};
- for (let [prop, propvalue] of Object.entries(methodvalue["requestBody"]["content"]["application/xml"]["schema"]["properties"])) {
-
- tmpobject[prop] = `\$\{${prop}\}`;
- }
+ try {
+ if (
+ methodvalue["requestBody"]["content"]["application/xml"][
+ "schema"
+ ]["properties"] !== undefined
+ ) {
+ var tmpobject = {};
+ for (let [prop, propvalue] of Object.entries(methodvalue["requestBody"]["content"]["application/xml"]["schema"]["properties"])) {
+
+ tmpobject[prop] = `\$\{${prop}\}`;
+ }
- for (let [subkey,subkeyval] in Object.entries(methodvalue["requestBody"]["content"]["application/xml"]["schema"]["required"])) {
- const tmpitem =
- methodvalue["requestBody"]["content"][
- "application/xml"
- ]["schema"]["required"][subkey];
- tmpobject[tmpitem] = `\$\{${tmpitem}\}`;
- }
+ for (let [subkey,subkeyval] in Object.entries(methodvalue["requestBody"]["content"]["application/xml"]["schema"]["required"])) {
+ const tmpitem =
+ methodvalue["requestBody"]["content"][
+ "application/xml"
+ ]["schema"]["required"][subkey];
+ tmpobject[tmpitem] = `\$\{${tmpitem}\}`;
+ }
- //console.log("OBJ XML: ", tmpobject)
- //newaction["body"] = XML.stringify(tmpobject, null, 2)
- }
- } catch (e) {
- console.log("RequestBody xml error: ", e, path)
- }
+ //console.log("OBJ XML: ", tmpobject)
+ //newaction["body"] = XML.stringify(tmpobject, null, 2)
+ }
+ } catch (e) {
+ console.log("RequestBody xml error: ", e, path)
+ }
}
} else {
- if (
- methodvalue["requestBody"]["content"]["example"] !== undefined
- ) {
- if (
- methodvalue["requestBody"]["content"]["example"][
- "example"
- ] !== undefined
- ) {
- newaction["body"] =
- methodvalue["requestBody"]["content"]["example"][
- "example"
- ];
- //JSON.stringify(tmpobject, null, 2)
+ if (methodvalue["requestBody"]["content"]["example"] !== undefined) {
+ if (methodvalue["requestBody"]["content"]["example"]["example"] !== undefined) {
+ newaction["body"] = methodvalue["requestBody"]["content"]["example"]["example"]
}
}
-
- if (
- methodvalue["requestBody"]["content"][
- "multipart/form-data"
- ] !== undefined
- ) {
+
+ if (methodvalue["requestBody"]["content"]["multipart/form-data"] !== undefined) {
if (
methodvalue["requestBody"]["content"][
"multipart/form-data"
@@ -1553,8 +1539,10 @@ const AppCreator = (defaultprops) => {
} else if (parameter.in === "body") {
// FIXME: Add tracking for components
// E.G: https://raw.githubusercontent.com/owentl/Shuffle/master/gosecure.yaml
- if (parameter.example !== undefined) {
- newaction.body = parameter.example;
+ if (parameter.example !== undefined && parameter.example !== null) {
+ if (newaction.body === undefined || newaction.body === null || newaction.body.length < 5) {
+ newaction.body = parameter.example
+ }
}
} else if (parameter.in === "header") {
newaction.headers += `${parameter.name}=${parameter.example}\n`;
@@ -1566,6 +1554,13 @@ const AppCreator = (defaultprops) => {
}
}
+ // Check if body is valid JSON.
+ if (newaction.body !== undefined && newaction.body !== null && newaction.body.length > 0) {
+ // Trim starting / ending newlines, spaces and tabs
+ newaction.body = newaction.body.trim()
+ }
+
+
if (newaction.name === "" || newaction.name === undefined) {
// Find a unique part of the string
// FIXME: Looks for length between /, find the one where they differ
@@ -1920,11 +1915,11 @@ const AppCreator = (defaultprops) => {
setProjectCategories(all_categories);
- // Rearrange them by which has action_label
- const firstActions = newActions.filter(data => data.action_label !== undefined && data.action_label !== null && data.action_label !== "No Label")
- console.log("First actions: ", firstActions)
- const secondActions = newActions.filter(data => data.action_label === undefined || data.action_label === null || data.action_label === "No Label")
- newActions = firstActions.concat(secondActions)
+ // Rearrange them by which has action_label
+ const firstActions = newActions.filter(data => data.action_label !== undefined && data.action_label !== null && data.action_label !== "No Label")
+ console.log("First actions: ", firstActions)
+ const secondActions = newActions.filter(data => data.action_label === undefined || data.action_label === null || data.action_label === "No Label")
+ newActions = firstActions.concat(secondActions)
setActions(newActions);
//data.paths[item.url][item.method.toLowerCase()]["x-label"] = item.action_label
@@ -3078,7 +3073,10 @@ const AppCreator = (defaultprops) => {
Refresh-token URL for Oauth2 (Optional)
{
margin="normal"
variant="outlined"
value={refreshUrl}
+ helperText={!refreshUrl.startsWith("http") || refreshUrl.includes("//shuffler.")? "Must start with http(s):// and can not contain shuffler.io" : ""}
onChange={(e) => setRefreshUrl(e.target.value)}
- onBlur={(event) => {
+ onBlur={(event) => {
var tmpstring = event.target.value.trim();
if (
@@ -3153,7 +3152,7 @@ const AppCreator = (defaultprops) => {
- Key
+ Key
{
value={parameterName}
helperText={
- Can't be empty or contain any of the following: !#$%&'^"+-._~|]+$
+ Can't be empty or contain any of the following: !#$%&'^"+-._~|]+$:=
}
onChange={(e) => {
setParameterName(e.target.value);
}}
+ onBlur={(event) => {
+ var tmpstring = event.target.value.trim()
+
+ // Check if tmpstring has any of the illegal characters in it
+ }}
InputProps={{
classes: {
notchedOutline: classes.notchedOutline,
diff --git a/frontend/src/views/EditWorkflow.jsx b/frontend/src/views/EditWorkflow.jsx
index 29066fef..bf30f62f 100755
--- a/frontend/src/views/EditWorkflow.jsx
+++ b/frontend/src/views/EditWorkflow.jsx
@@ -207,7 +207,7 @@ const EditWorkflow = (props) => {
const cyDummy = cytoscape();
if (!cyDummy.edgehandles) {
- cytoscape.use(edgehandles);
+ //cytoscape.use(edgehandles);
}
});
diff --git a/frontend/src/views/Search.jsx b/frontend/src/views/Search.jsx
index b19050c7..687e392f 100644
--- a/frontend/src/views/Search.jsx
+++ b/frontend/src/views/Search.jsx
@@ -1,206 +1,316 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
-import theme from '../theme.jsx';
+import theme from "../theme.jsx";
import { isMobile } from "react-device-detect";
-import AppGrid from "../components/AppGrid.jsx"
-import WorkflowGrid from "../components/WorkflowGrid.jsx"
-import CreatorGrid from "../components/CreatorGrid.jsx"
-import DocsGrid from "../components/DocsGrid.jsx"
-import DiscordChat from "../components/DiscordChat.jsx";
+import AppGrid from "../components/AppGrid.jsx";
+import WorkflowGrid from "../components/WorkflowGrid.jsx";
+import CreatorGrid from "../components/CreatorGrid.jsx";
+import DocsGrid from "../components/DocsGrid.jsx";
import { useNavigate } from "react-router-dom";
+import Typography from "@material-ui/core/Typography";
+import { Tabs, Tab, setRef } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { makeStyles } from '@mui/styles';
+import DiscordChat from "../components/DiscordChat.jsx";
import {
- Tabs,
- Tab,
-} from "@mui/material";
-
-import {
- Apps as AppsIcon,
- Code as CodeIcon,
- Chat as ChatIcon,
- EmojiObjects as EmojiObjectsIcon,
- Description as DescriptionIcon,
+ Apps as AppsIcon,
+ Code as CodeIcon,
+ EmojiObjects as EmojiObjectsIcon,
+ Chat as ChatIcon,
+ BorderBottom,
} from "@mui/icons-material";
+import PeopleAltOutlinedIcon from '@mui/icons-material/PeopleAltOutlined';
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
// Should be different if logged in :|
const Search = (props) => {
- const { globalUrl, isLoaded, serverside, userdata, hidemargins, isHeader } = props;
- let navigate = useNavigate();
+ const { globalUrl, isLoaded, serverside, userdata, hidemargins, isHeader } =
+ props;
+ let navigate = useNavigate();
- const [curTab, setCurTab] = useState(0);
- const iconStyle = { marginRight: isHeader ? null : 10 };
+ const [curTab, setCurTab] = useState(0);
+ const iconStyle = { marginRight: isHeader ? null : 10 };
- useEffect(() => {
- if (serverside !== true && window.location.search !== undefined && window.location.search !== null) {
- const urlSearchParams = new URLSearchParams(window.location.search)
- const params = Object.fromEntries(urlSearchParams.entries())
- const foundTab = params["tab"]
- if (foundTab !== null && foundTab !== undefined) {
- for (var key in Object.keys(views)) {
- const value = views[key]
- console.log(key, value)
- if (value === foundTab) {
- setConfig("", key)
- break
- }
- }
- }
- }
- }, [])
+ useEffect(() => {
+ if (
+ serverside !== true &&
+ window.location.search !== undefined &&
+ window.location.search !== null
+ ) {
+ const urlSearchParams = new URLSearchParams(window.location.search);
+ const params = Object.fromEntries(urlSearchParams.entries());
+ const foundTab = params["tab"];
+ if (foundTab !== null && foundTab !== undefined) {
+ for (var key in Object.keys(views)) {
+ const value = views[key];
+ console.log(key, value);
+ if (value === foundTab) {
+ setConfig("", key);
+ break;
+ }
+ }
+ }
+ }
+ }, []);
- if (serverside === true) {
- return null
- }
+ //Stop unnecessariry re-rendering of the component to improve performace
+ const MemoizedAppGrid = useMemo(() =>
-
-
-
-
-
-
-
-
- {curTab === 0 ?
-
- :
- curTab === 1 ?
- window.location.pathname === "/search" ?
-
- :
-
- :
- curTab === 2 ?
-
- :
- curTab === 3 ?
-
- :
- curTab === 4 ?
-
-:
+ if (isLoaded === false) {
+ return null;
+ }
- null}
-
-
-
{landingpageDataBrowser}
-
-
+ const tabSpanStyling = {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center'
+ }
- // #1f2023?
- return (
-
- {loadedCheck}
-
- )
-}
+ const tabTextStyling = {
+ marginLeft: '5px',
+ color: 'white'
+ }
+
+
+ // Random names for type & autoComplete. Didn't research :^)
+ const landingpageDataBrowser = (
+
+
+
+
+ App
+
+ }
+ />
+
+ Workflow
+
+ }
+ />
+
+ Docs
+
+ }
+ />
+
+ Creators
+
+ }
+ />
+
+ Discord Chat
+
+ }
+ />
+
+ {curTab === 0 && MemoizedAppGrid}
+ {curTab === 1 && MemoizedWorkflowGrid}
+ {curTab === 2 && MemoizedDocsGrid}
+ {curTab === 3 && MemoizedCreatorGrid}
+ {curTab === 4 && MemoizedDiscordChat}
+
+
+
{landingpageDataBrowser}
+
+ );
+
+ // #1f2023?
+ return {loadedCheck}
;
+};
export default Search;
![Algolia logo]({"/images/logo-algolia-nebula-blue-full.svg"}){kind=logo}
-
-
-