Added more management tools for workflow running and stat management
This commit is contained in:
Frikky
@@ -20,6 +20,7 @@ import {
|
||||
TextField,
|
||||
Tooltip,
|
||||
Breadcrumbs,
|
||||
Drawer,
|
||||
CircularProgress,
|
||||
Chip,
|
||||
IconButton,
|
||||
@@ -43,6 +44,7 @@ import {
|
||||
Loop as LoopIcon,
|
||||
AddPhotoAlternate as AddPhotoAlternateIcon,
|
||||
CallMerge as CallMergeIcon,
|
||||
CloudDownload as CloudDownloadIcon,
|
||||
} from "@mui/icons-material";
|
||||
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
@@ -448,6 +450,8 @@ const AppCreator = (defaultprops) => {
|
||||
const [openApiData, setOpenApiData] = React.useState("");
|
||||
const [openApiModal, setOpenApiModal] = React.useState(false);
|
||||
|
||||
const [appDownloadData, setAppDownloadData] = React.useState("");
|
||||
|
||||
useEffect(() => {
|
||||
console.log("In useEffect for openApiData: ", openApiData)
|
||||
}, [openApiData]);
|
||||
@@ -900,8 +904,9 @@ const AppCreator = (defaultprops) => {
|
||||
}
|
||||
|
||||
if (newaction.url !== undefined && newaction.url !== null && newaction.url.includes("_shuffle_replace_")) {
|
||||
const regex = /_shuffle_replace_\d/i;
|
||||
//console.log("NEW: ",
|
||||
//const regex = /_shuffle_replace_\d/i;
|
||||
const regex = /_shuffle_replace_\d+/i
|
||||
|
||||
newaction.url = newaction.url.replaceAll(new RegExp(regex, 'g'), "")
|
||||
}
|
||||
|
||||
@@ -1205,9 +1210,9 @@ const AppCreator = (defaultprops) => {
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.log("Param Error: ", e, path)
|
||||
}
|
||||
} catch (e) {
|
||||
console.log("Param Error: ", e, path)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2569,6 +2574,8 @@ const AppCreator = (defaultprops) => {
|
||||
}
|
||||
}
|
||||
|
||||
setAppDownloadData(JSON.stringify(data, null, 4))
|
||||
|
||||
fetch(globalUrl + "/api/v1/verify_openapi", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
@@ -3687,48 +3694,76 @@ const AppCreator = (defaultprops) => {
|
||||
return errormessage;
|
||||
};
|
||||
|
||||
|
||||
|
||||
const getBackgroundColor = (data) => {
|
||||
var bgColor = "#61afee";
|
||||
if (data === "POST") {
|
||||
bgColor = "#49cc90";
|
||||
} else if (data === "PUT") {
|
||||
bgColor = "#fca130";
|
||||
} else if (data === "PATCH") {
|
||||
bgColor = "#50e3c2";
|
||||
} else if (data === "DELETE") {
|
||||
bgColor = "#f93e3e";
|
||||
} else if (data === "HEAD") {
|
||||
bgColor = "#9012fe";
|
||||
}
|
||||
|
||||
return bgColor;
|
||||
}
|
||||
|
||||
|
||||
const newActionModal = (
|
||||
<Dialog
|
||||
<Drawer
|
||||
anchor={"right"}
|
||||
open={actionsModalOpen}
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
style: {
|
||||
backgroundColor: surfaceColor,
|
||||
color: "white",
|
||||
minWidth: 550,
|
||||
maxWidth: 550,
|
||||
maxHeight: 750,
|
||||
minWidth: 700,
|
||||
maxWidth: 700,
|
||||
},
|
||||
}}
|
||||
onClose={() => {
|
||||
setUrlPath("");
|
||||
setCurrentAction({
|
||||
name: "",
|
||||
description: "",
|
||||
url: "",
|
||||
file_field: "",
|
||||
headers: "",
|
||||
paths: [],
|
||||
queries: [],
|
||||
body: "",
|
||||
errors: [],
|
||||
method: actionNonBodyRequest[0],
|
||||
action_label: "No Label",
|
||||
required_bodyfields: [],
|
||||
});
|
||||
setCurrentActionMethod(apikeySelection[0]);
|
||||
setUrlPathQueries([]);
|
||||
setActionsModalOpen(false);
|
||||
setFileUploadEnabled(false);
|
||||
console.log("Closing modal");
|
||||
|
||||
// Old: This had some issue with arrays
|
||||
//setUrlPath("");
|
||||
//setCurrentAction({
|
||||
// name: "",
|
||||
// description: "",
|
||||
// url: "",
|
||||
// file_field: "",
|
||||
// headers: "",
|
||||
// paths: [],
|
||||
// queries: [],
|
||||
// body: "",
|
||||
// errors: [],
|
||||
// method: actionNonBodyRequest[0],
|
||||
// action_label: "No Label",
|
||||
// required_bodyfields: [],
|
||||
//});
|
||||
//setCurrentActionMethod(apikeySelection[0]);
|
||||
//setUrlPathQueries([]);
|
||||
//setActionsModalOpen(false);
|
||||
//setFileUploadEnabled(false);
|
||||
|
||||
console.log(currentAction);
|
||||
const errors = getActionErrors();
|
||||
addActionToView(errors);
|
||||
setActionsModalOpen(false);
|
||||
setUrlPathQueries([]);
|
||||
setUrlPath("");
|
||||
setFileUploadEnabled(false);
|
||||
}}
|
||||
>
|
||||
<FormControl style={{ backgroundColor: surfaceColor, color: "white" }}>
|
||||
<DialogTitle>
|
||||
<DialogTitle style={{marginTop: 30, }}>
|
||||
<div style={{ color: "white" }}>New action</div>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContent style={{paddingBottom: 100, }}>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://shuffler.io/docs/app_creation#actions"
|
||||
@@ -3826,26 +3861,33 @@ const AppCreator = (defaultprops) => {
|
||||
id: "method-option",
|
||||
}}
|
||||
>
|
||||
{actionNonBodyRequest.map((data, index) => {
|
||||
|
||||
// Add actionBodyRequest to actionNonBodyRequest
|
||||
{actionNonBodyRequest.concat(actionBodyRequest).map((data, index) => {
|
||||
const backgroundColor = getBackgroundColor(data);
|
||||
return (
|
||||
<MenuItem
|
||||
key={index}
|
||||
style={{ backgroundColor: inputColor, color: "white" }}
|
||||
style={{}}
|
||||
value={data}
|
||||
>
|
||||
{data}
|
||||
<Chip
|
||||
style={{
|
||||
color: "white",
|
||||
borderRadius: 5,
|
||||
minWidth: 80,
|
||||
marginRight: 10,
|
||||
marginTop: 2,
|
||||
cursor: "pointer",
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
backgroundColor: backgroundColor,
|
||||
}}
|
||||
label={data}
|
||||
/>
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
{actionBodyRequest.map((data, index) => (
|
||||
<MenuItem
|
||||
key={index}
|
||||
style={{ backgroundColor: inputColor, color: "white" }}
|
||||
value={data}
|
||||
>
|
||||
{data}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
<div style={{ marginTop: "15px" }} />
|
||||
URL path / Curl statement
|
||||
@@ -4222,19 +4264,11 @@ const AppCreator = (defaultprops) => {
|
||||
/>
|
||||
{exampleResponse}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
style={{ borderRadius: "0px" }}
|
||||
onClick={() => {
|
||||
setActionsModalOpen(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<div style={{position: "fixed", backgroundColor: theme.palette.surfaceColor, bottom: 0, width: "100%", padding: 25, borderTop: "1px solid rgba(255,255,255,0.3)", }}>
|
||||
<Button
|
||||
color="primary"
|
||||
variant={urlPath.length > 0 ? "contained" : "outlined"}
|
||||
style={{ borderRadius: "0px" }}
|
||||
style={{ }}
|
||||
onClick={() => {
|
||||
//console.log(urlPathQueries)
|
||||
//console.log(urlPath)
|
||||
@@ -4249,9 +4283,17 @@ const AppCreator = (defaultprops) => {
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</DialogActions>
|
||||
<Button
|
||||
style={{ marginLeft: 10, }}
|
||||
onClick={() => {
|
||||
setActionsModalOpen(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</FormControl>
|
||||
</Dialog>
|
||||
</Drawer>
|
||||
);
|
||||
|
||||
|
||||
@@ -6103,20 +6145,68 @@ const AppCreator = (defaultprops) => {
|
||||
{testView}
|
||||
*/}
|
||||
|
||||
<Button
|
||||
disabled={appBuilding}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
style={{ borderRadius: "0px", marginTop: "30px", height: "50px" }}
|
||||
onClick={() => {
|
||||
submitApp();
|
||||
}}
|
||||
>
|
||||
{appBuilding ? <CircularProgress /> : "Save"}
|
||||
</Button>
|
||||
<Typography style={{ marginTop: 5 }}>
|
||||
{errorCode.length > 0 ? `Error: ${errorCode}` : null}
|
||||
</Typography>
|
||||
<div style={{display: "flex", marginTop: 35, }}>
|
||||
{appDownloadData.length > 0 ?
|
||||
<Tooltip title="Download the OpenAPI specification for the App" placement="bottom">
|
||||
<IconButton
|
||||
style={{marginRight: 25, }}
|
||||
onClick={() => {
|
||||
toast(`Downloading OpenAPI JSON data for for ${name}`)
|
||||
// Download as file
|
||||
var blob = new Blob([appDownloadData], {
|
||||
type: "application/octet-stream",
|
||||
});
|
||||
|
||||
var url = URL.createObjectURL(blob);
|
||||
var link = document.createElement("a");
|
||||
link.setAttribute("href", url);
|
||||
link.setAttribute("download", `${name}.json`);
|
||||
var event = document.createEvent("MouseEvents");
|
||||
event.initMouseEvent(
|
||||
"click",
|
||||
true,
|
||||
true,
|
||||
window,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
false,
|
||||
false,
|
||||
false,
|
||||
false,
|
||||
0,
|
||||
null
|
||||
);
|
||||
link.dispatchEvent(event);
|
||||
}}
|
||||
>
|
||||
<CloudDownloadIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
: null}
|
||||
<Button
|
||||
disabled={appBuilding}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
fullWidth
|
||||
style={{ height: "50px", flex: 1, }}
|
||||
onClick={() => {
|
||||
submitApp();
|
||||
}}
|
||||
>
|
||||
{appBuilding ? <CircularProgress /> : "Save"}
|
||||
</Button>
|
||||
{appDownloadData.length > 0 ?
|
||||
<div style={{width: 50, }}/>
|
||||
: null}
|
||||
</div>
|
||||
|
||||
<Typography style={{ marginTop: 25, textAlign: "center", }}>
|
||||
{errorCode.length > 0 ? `Upload Error: ${errorCode}` : null}
|
||||
</Typography>
|
||||
|
||||
</Paper>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user