frikky
1575 lines
43 KiB
React
Executable File
1575 lines
43 KiB
React
Executable File
import React, { useState, useEffect } from "react";
|
|
|
|
/*
|
|
* It works a little something like this:
|
|
* Choose what source and destination action you want
|
|
* Select the source field to be used for a required destination field OR
|
|
* write a static value for the field (FIXME) OR
|
|
* run a generator action for the field (FIXME, these should be e.g. run workflow and get result)
|
|
*/
|
|
|
|
import Grid from "@material-ui/core/Grid";
|
|
import Dialog from "@material-ui/core/Dialog";
|
|
import DialogTitle from "@material-ui/core/DialogTitle";
|
|
import DialogActions from "@material-ui/core/DialogActions";
|
|
import DialogContent from "@material-ui/core/DialogContent";
|
|
|
|
import ButtonBase from "@material-ui/core/ButtonBase";
|
|
import TextField from "@material-ui/core/TextField";
|
|
import MenuItem from "@material-ui/core/MenuItem";
|
|
import Paper from "@material-ui/core/Paper";
|
|
import Button from "@material-ui/core/Button";
|
|
import FormControl from "@material-ui/core/FormControl";
|
|
import Select from "@material-ui/core/Select";
|
|
import InputLabel from "@material-ui/core/InputLabel";
|
|
import Table from "@material-ui/core/Table";
|
|
import InputAdornment from "@material-ui/core/InputAdornment";
|
|
import TableBody from "@material-ui/core/TableBody";
|
|
import TableCell from "@material-ui/core/TableCell";
|
|
import TableRow from "@material-ui/core/TableRow";
|
|
|
|
import SearchIcon from "@material-ui/icons/Search";
|
|
import DeleteIcon from "@material-ui/icons/Delete";
|
|
|
|
import Downshift from "downshift";
|
|
import deburr from "lodash/deburr";
|
|
|
|
const EditSchedule = (props) => {
|
|
const { globalUrl } = props;
|
|
|
|
const [tmpSrcApp, setTmpSrcApp] = useState({});
|
|
const [tmpDstApp, setTmpDstApp] = useState({});
|
|
const [srcApp, setSrcApp] = useState({});
|
|
const [srcAppConfig, setSrcAppConfig] = useState([]);
|
|
const [srcAppConfigOpen, setSrcAppConfigOpen] = useState(false);
|
|
const [srcAppAction, setSrcAppAction] = useState("");
|
|
|
|
const [dstApp, setDstApp] = useState({});
|
|
const [dstAppAction, setDstAppAction] = useState("");
|
|
const [dstAppConfig, setDstAppConfig] = useState([]);
|
|
const [dstAppConfigOpen, setDstAppConfigOpen] = useState(false);
|
|
|
|
// Lets set the real data here
|
|
const [selectedSrc, setSelectedSrc] = React.useState("");
|
|
const [, setSelectedSrcData] = React.useState({});
|
|
const [selectedDst, setSelectedDst] = React.useState([]);
|
|
|
|
// FIXME
|
|
const [suggestions, setSuggestions] = React.useState([]);
|
|
const [inputappdata, setInputAppData] = React.useState({});
|
|
|
|
const [scheduleConfig, setScheduleConfig] = React.useState({});
|
|
const [selectedSrcParameters, setSelectedSrcParameters] = React.useState([]);
|
|
|
|
const getCurrentSchedule = () => {
|
|
fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
})
|
|
.then((response) => response.json())
|
|
.then((responseJson) => {
|
|
setScheduleConfig(responseJson);
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
const loadAppSuggestions = () => {
|
|
fetch(globalUrl + "/api/v1/schedules/apps", {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
})
|
|
.then((response) => response.json())
|
|
.then((responseJson) => {
|
|
setSuggestions(responseJson.apps);
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
// FIXME - this is generated from app selection input with required items
|
|
useEffect(() => {
|
|
if (Object.getOwnPropertyNames(scheduleConfig).length <= 0) {
|
|
getCurrentSchedule();
|
|
}
|
|
|
|
// Load apps if destination or source is
|
|
if (suggestions.length === 0) {
|
|
loadAppSuggestions();
|
|
}
|
|
|
|
// Load everything else
|
|
if (
|
|
Object.getOwnPropertyNames(scheduleConfig).length > 0 &&
|
|
Object.getOwnPropertyNames(scheduleConfig.appinfo.sourceapp).length > 0 &&
|
|
Object.getOwnPropertyNames(srcApp).length <= 0
|
|
) {
|
|
if (scheduleConfig.appinfo.sourceapp.name.length > 0) {
|
|
setSrcApp(scheduleConfig.appinfo.sourceapp);
|
|
setSrcAppAction(scheduleConfig.appinfo.sourceapp.action);
|
|
}
|
|
}
|
|
|
|
// Use sourceapp.name&version and sourceapp.action and look for name in inputappdata
|
|
// Basically fix everything in this one lol
|
|
if (
|
|
suggestions.length > 0 &&
|
|
srcAppAction.length > 0 &&
|
|
Object.getOwnPropertyNames(scheduleConfig).length > 0 &&
|
|
Object.getOwnPropertyNames(inputappdata).length <= 0
|
|
) {
|
|
// Loops all apps and finds current
|
|
for (var key in suggestions) {
|
|
var curapp = suggestions[key];
|
|
if (curapp.name === srcApp.name) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
setInputAppData(curapp);
|
|
|
|
// Loops the apps actions to find current
|
|
for (key in curapp.output) {
|
|
var curappaction = curapp.output[key];
|
|
if (curappaction.name === srcAppAction) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
setSelectedSrcParameters(curappaction.outputparameters);
|
|
if (curappaction.config !== null && curappaction.config !== undefined) {
|
|
setSrcAppConfig(curappaction.config);
|
|
}
|
|
|
|
// FIXME - set src of all translator nodes to curappaction.outputparameters[0] if not defined
|
|
//value={scheduleConfig.translator[count].src.name}
|
|
|
|
//console.log(scheduleConfig)
|
|
var newtranslator = [];
|
|
for (key in scheduleConfig.translator) {
|
|
var curtranslator = scheduleConfig.translator[key];
|
|
|
|
// Overwrite issues
|
|
if (curtranslator.src.name === "") {
|
|
curtranslator.src = curappaction.outputparameters[0];
|
|
}
|
|
|
|
newtranslator.push(curtranslator);
|
|
}
|
|
|
|
scheduleConfig.translator = newtranslator;
|
|
setScheduleConfig(scheduleConfig);
|
|
}
|
|
|
|
if (
|
|
suggestions.length > 0 &&
|
|
dstAppAction.length <= 0 &&
|
|
Object.getOwnPropertyNames(scheduleConfig).length > 0
|
|
) {
|
|
// Loops all apps and finds current
|
|
for (key in suggestions) {
|
|
curapp = suggestions[key];
|
|
if (curapp.name === dstApp.name) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
const curAction = scheduleConfig.appinfo.destinationapp.action;
|
|
|
|
// Loops the apps actions to find current
|
|
for (key in curapp.output) {
|
|
curappaction = curapp.output[key];
|
|
if (curappaction.name === curAction) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
setDstAppAction(curappaction.name);
|
|
if (curappaction.config !== null && curappaction.config !== undefined) {
|
|
setDstAppConfig(curappaction.config);
|
|
}
|
|
}
|
|
});
|
|
|
|
const getSuggestions = (value, type, { showEmpty = false } = {}) => {
|
|
const inputValue = deburr(value.trim()).toLowerCase();
|
|
const inputLength = inputValue.length;
|
|
let count = 0;
|
|
|
|
return inputLength === 0 && !showEmpty
|
|
? []
|
|
: suggestions.filter((suggestion) => {
|
|
const keep =
|
|
count < 5 &&
|
|
suggestion.types &&
|
|
suggestion.types.includes(type) &&
|
|
suggestion.name.slice(0, inputLength).toLowerCase() === inputValue;
|
|
|
|
if (keep) {
|
|
count += 1;
|
|
}
|
|
|
|
return keep;
|
|
});
|
|
};
|
|
|
|
const setSrcAppWrapper = (currentapps) => {
|
|
setSrcApp(currentapps[0]);
|
|
if (currentapps[0].output.length > 0) {
|
|
selectSrcAction(currentapps[0].output[0].name);
|
|
}
|
|
};
|
|
|
|
const setDstAppWrapper = (currentapps) => {
|
|
setDstApp(currentapps[0]);
|
|
if (currentapps[0].input.length > 0) {
|
|
selectInitialDstAction(currentapps);
|
|
}
|
|
};
|
|
|
|
const renderInput = (type, inputProps) => {
|
|
const { InputProps, classes, ref, ...other } = inputProps;
|
|
|
|
// Sets the srcapp if string is matching exactly for name
|
|
if (
|
|
InputProps["aria-activedescendant"] === null &&
|
|
InputProps["value"].length > 0
|
|
) {
|
|
const currentapps = suggestions.filter(
|
|
(data) => data.name === InputProps["value"]
|
|
);
|
|
if (currentapps.length === 1) {
|
|
if (type === "output") {
|
|
if (currentapps[0].name !== srcApp.name) {
|
|
setSrcAppWrapper(currentapps);
|
|
}
|
|
} else if (type === "input") {
|
|
if (currentapps[0].name !== dstApp.name) {
|
|
setDstAppWrapper(currentapps);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<TextField
|
|
id="standard-search"
|
|
type="search"
|
|
inputStyle={{ fontSize: "10rem" }}
|
|
InputProps={{
|
|
disableUnderline: true,
|
|
inputRef: ref,
|
|
...InputProps,
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<SearchIcon />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
{...other}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderSuggestion = (suggestionProps) => {
|
|
const { suggestion, index, itemProps, highlightedIndex, selectedItem } =
|
|
suggestionProps;
|
|
const isHighlighted = highlightedIndex === index;
|
|
const isSelected = (selectedItem || "").indexOf(suggestion.name) > -1;
|
|
|
|
return (
|
|
<MenuItem
|
|
{...itemProps}
|
|
key={suggestion.name}
|
|
selected={isHighlighted}
|
|
component="div"
|
|
style={{
|
|
fontWeight: isSelected ? 500 : 400,
|
|
}}
|
|
>
|
|
{suggestion.name}
|
|
</MenuItem>
|
|
);
|
|
};
|
|
|
|
const bodyDivStyle = {
|
|
marginLeft: "20px",
|
|
marginTop: "50px",
|
|
marginRight: "20px",
|
|
margin: "auto",
|
|
width: "1350px",
|
|
display: "flex",
|
|
};
|
|
|
|
const appActionStyle = {
|
|
height: "50px",
|
|
marginTop: "10px",
|
|
};
|
|
|
|
// FIXME - set this
|
|
//const setRelationshipsFromSource = () => {
|
|
|
|
//}
|
|
|
|
//// FIXME - set this
|
|
//const setRelationshipsFromGenerator = () => {
|
|
|
|
//}
|
|
|
|
const selectDstAppAction = (event) => {
|
|
if (event.target.value === dstAppAction) {
|
|
return;
|
|
}
|
|
|
|
setDstAppAction(event.target.value);
|
|
refactorTranslations(event.target.value);
|
|
};
|
|
|
|
const refactorTranslations = (action) => {
|
|
// dstapp is chosen
|
|
var found = false;
|
|
for (var key in dstApp.input) {
|
|
var curinput = dstApp.input[key];
|
|
if (curinput.name === action) {
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Should never happen..
|
|
if (!found) {
|
|
return;
|
|
}
|
|
|
|
var tmprelationships = [];
|
|
for (key in curinput.inputparameters) {
|
|
var curRelation = { dst: curinput.inputparameters[key], src: {} };
|
|
tmprelationships.push(curRelation);
|
|
}
|
|
|
|
scheduleConfig["translator"] = tmprelationships;
|
|
setScheduleConfig(scheduleConfig);
|
|
};
|
|
|
|
const selectInitialDstAction = (value) => {
|
|
var action = value[0].input[0].name;
|
|
setDstAppAction(action);
|
|
|
|
var found = false;
|
|
for (var key in value) {
|
|
var curinput = value[0].input[key];
|
|
if (curinput.name === action) {
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Should never happen..
|
|
if (!found) {
|
|
return;
|
|
}
|
|
|
|
var tmprelationships = [];
|
|
for (key in curinput.inputparameters) {
|
|
var curRelation = { dst: curinput.inputparameters[key], src: {} };
|
|
tmprelationships.push(curRelation);
|
|
}
|
|
|
|
scheduleConfig["translator"] = tmprelationships;
|
|
setScheduleConfig(scheduleConfig);
|
|
};
|
|
|
|
const selectSrcAction = (value) => {
|
|
// FIXME - load the config for this action
|
|
var found = false;
|
|
|
|
setSrcAppAction(value);
|
|
|
|
var curitem = {};
|
|
for (var key in inputappdata.output) {
|
|
curitem = inputappdata.output[key];
|
|
if (curitem.name === value) {
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!found) {
|
|
setSelectedSrcParameters([]);
|
|
return;
|
|
}
|
|
|
|
// Generate this for every relation?
|
|
setSelectedSrcParameters(curitem.outputparameters);
|
|
|
|
//FIXME - check if source has the right attribute
|
|
var tmprelationships = [];
|
|
key = 0;
|
|
for (key in scheduleConfig.translator) {
|
|
var curRelation = scheduleConfig.translator[key];
|
|
curRelation["src"] = curitem.outputparameters[0];
|
|
tmprelationships.push(curRelation);
|
|
}
|
|
|
|
scheduleConfig["translator"] = tmprelationships;
|
|
setScheduleConfig(scheduleConfig);
|
|
};
|
|
|
|
// Wrapper to handle event click
|
|
const selectSrcActionWrapper = (event) => {
|
|
return selectSrcAction(event.target.value);
|
|
};
|
|
|
|
const srcappaction =
|
|
Object.getOwnPropertyNames(srcApp).length > 0 && srcApp.output ? (
|
|
<div>
|
|
<FormControl variant="outlined" style={{ marginTop: "10px" }}>
|
|
<InputLabel htmlFor="outlined-age-simple">Actions</InputLabel>
|
|
<Select
|
|
value={srcAppAction}
|
|
onChange={selectSrcActionWrapper}
|
|
style={appActionStyle}
|
|
>
|
|
{srcApp.output.map((data) => (
|
|
<MenuItem value={data.name}>{data.name}</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</div>
|
|
) : null;
|
|
|
|
const dstappaction =
|
|
Object.getOwnPropertyNames(dstApp).length > 0 ? (
|
|
<div>
|
|
<FormControl
|
|
fullWidth="true"
|
|
variant="outlined"
|
|
style={{ marginTop: "20px" }}
|
|
>
|
|
<InputLabel htmlFor="outlined-age-simple">Actions</InputLabel>
|
|
<Select
|
|
value={dstAppAction}
|
|
onChange={selectDstAppAction}
|
|
style={appActionStyle}
|
|
>
|
|
{dstApp.input.map((data) => (
|
|
<MenuItem value={data.name}>{data.name}</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</div>
|
|
) : null;
|
|
|
|
const downshiftStyle = {
|
|
//marginLeft: "20px",
|
|
//marginTop: "20px",
|
|
//marginRight: "20px",
|
|
display: "flex",
|
|
width: "100%",
|
|
};
|
|
|
|
const submitDisabled = selectedSrc.length > 0 && selectedDst.length > 0;
|
|
const submitButtonClick = () => {
|
|
var newtranslations = [];
|
|
var tobeadded = [];
|
|
var tobechanged = [];
|
|
|
|
// Go find the information again in testdata
|
|
|
|
//newrelationship["translator"] = {"src": {}, "dst": {}}
|
|
//newrelationship["static"] = {}
|
|
|
|
// Reformat relationships
|
|
// clean up old relationships
|
|
//
|
|
|
|
if (Object.getOwnPropertyNames(scheduleConfig.Translator).length <= 0) {
|
|
return;
|
|
}
|
|
|
|
// Clean up old translations for specified elements
|
|
// FIXME - maybe just send a request with relationships and fix in backend?
|
|
// FIXME - there is an issue here for some multifield stuff
|
|
// Literally have to verify every single one anyway..
|
|
for (var selected in selectedDst) {
|
|
var found = false;
|
|
var index = 0;
|
|
for (var key in scheduleConfig["translator"]) {
|
|
if (
|
|
scheduleConfig["translator"][key]["dst"]["name"] ===
|
|
selectedDst[selected]
|
|
) {
|
|
index = key;
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!found) {
|
|
tobeadded.push(selectedDst[selected]);
|
|
} else {
|
|
// Dst can be the
|
|
tobechanged.push(index);
|
|
}
|
|
}
|
|
|
|
var tmprelationships = scheduleConfig;
|
|
|
|
key = 0;
|
|
for (key in scheduleConfig["translator"]) {
|
|
if (tobechanged.includes(key)) {
|
|
var tmprel = scheduleConfig["translator"][key];
|
|
tmprel["src"] = { name: selectedSrc };
|
|
tmprelationships["translator"].splice(key, 1);
|
|
newtranslations.push(tmprel);
|
|
}
|
|
}
|
|
|
|
key = 0;
|
|
for (key in tobeadded) {
|
|
tmprel = { src: { name: selectedSrc }, dst: { name: tobeadded[key] } };
|
|
newtranslations.push(tmprel);
|
|
}
|
|
|
|
// delete deletable keys from copy (new)
|
|
//
|
|
key = 0;
|
|
for (key in newtranslations) {
|
|
tmprelationships["translator"].push(newtranslations[key]);
|
|
}
|
|
|
|
setSelectedSrc("");
|
|
setSelectedDst([]);
|
|
setSelectedSrcData({});
|
|
|
|
// FIXME - does this work?
|
|
scheduleConfig["translator"] = tmprelationships["translator"];
|
|
setScheduleConfig(scheduleConfig);
|
|
};
|
|
|
|
// When it's set, need to find the destination in the row and set static
|
|
const setStaticValue = (event, row) => {
|
|
console.log("HI");
|
|
// FIXME - modify the row first
|
|
// FIXME - set generator and source to "nothing"
|
|
|
|
console.log(row.dst.name);
|
|
console.log(row);
|
|
console.log(event.target.value);
|
|
var newsrcrow = {
|
|
name: "static",
|
|
description: "Static value set",
|
|
type: "static",
|
|
value: event.target.value,
|
|
schema: { type: "string" },
|
|
};
|
|
|
|
var relationshipclone = JSON.parse(JSON.stringify(scheduleConfig));
|
|
for (var key in scheduleConfig["translator"]) {
|
|
var curItem = scheduleConfig["translator"][key];
|
|
if (curItem.dst.name === row.dst.name) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
relationshipclone["translator"][key]["src"] = newsrcrow;
|
|
|
|
scheduleConfig["translator"] = relationshipclone["translator"];
|
|
console.log(scheduleConfig);
|
|
|
|
// Fuck this :(
|
|
// DO DIS IN FRONTEND AND HAVE A SUBMIT BUTTON :(
|
|
fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(scheduleConfig),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((responseJson) => {
|
|
setScheduleConfig({});
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
// Rewrites relationships clientside
|
|
const setCurrentSrcPropRelation = (event, rowkey) => {
|
|
console.log(event, rowkey);
|
|
var found = false;
|
|
|
|
for (var key in selectedSrcParameters) {
|
|
var curItem = selectedSrcParameters[key];
|
|
if (curItem.name === event.target.value) {
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// No idea how this would ever happen, but but (:
|
|
if (!found) {
|
|
return;
|
|
}
|
|
|
|
var row = scheduleConfig.translator[rowkey];
|
|
var rowclone = JSON.parse(JSON.stringify(row));
|
|
rowclone.src = curItem;
|
|
|
|
var relationshipclone = JSON.parse(JSON.stringify(scheduleConfig));
|
|
for (key in scheduleConfig["translator"]) {
|
|
curItem = scheduleConfig["translator"][key];
|
|
if (curItem.dst.name === row.dst.name) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
relationshipclone["translator"][key] = rowclone;
|
|
|
|
scheduleConfig["translator"] = relationshipclone["translator"];
|
|
console.log(scheduleConfig);
|
|
|
|
// Fuck this :(
|
|
// DO DIS IN FRONTEND AND HAVE A SUBMIT BUTTON :(
|
|
fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(scheduleConfig),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((responseJson) => {
|
|
setScheduleConfig({});
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
return;
|
|
};
|
|
|
|
const relationshipBody =
|
|
Object.getOwnPropertyNames(scheduleConfig).length > 0 &&
|
|
scheduleConfig["translator"] !== undefined &&
|
|
scheduleConfig.translator.length > 0 ? (
|
|
<Table style={{ marginBottom: "30px" }}>
|
|
<TableBody>
|
|
<TableRow key="header">
|
|
<TableCell component="th" scope="row">
|
|
Action
|
|
</TableCell>
|
|
<TableCell component="th" scope="row">
|
|
Source Field
|
|
</TableCell>
|
|
<TableCell component="th" scope="row">
|
|
Destination Field
|
|
</TableCell>
|
|
<TableCell component="th" scope="row">
|
|
Field Type
|
|
</TableCell>
|
|
<TableCell component="th" scope="row">
|
|
Required
|
|
</TableCell>
|
|
<TableCell component="th" scope="row">
|
|
Static
|
|
</TableCell>
|
|
<TableCell component="th" scope="row">
|
|
Generator
|
|
</TableCell>
|
|
<TableCell component="th" scope="row">
|
|
Transform
|
|
</TableCell>
|
|
</TableRow>
|
|
{scheduleConfig.translator.map((row, count) => {
|
|
var buttonIcon = <DeleteIcon />;
|
|
if (!row.dst.required) {
|
|
buttonIcon = (
|
|
<Button
|
|
disabled={!submitDisabled}
|
|
onClick={submitButtonClick}
|
|
variant="outlined"
|
|
color="primary"
|
|
>
|
|
REMOVEME
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
const srcpropsSelector =
|
|
(Object.getOwnPropertyNames(selectedSrcParameters).length > 0 ||
|
|
Object.getOwnPropertyNames(scheduleConfig.translator).length >
|
|
0) &&
|
|
Object.getOwnPropertyNames(srcApp).length > 0 ? (
|
|
<Select
|
|
value={scheduleConfig.translator[count].src.name}
|
|
style={appActionStyle}
|
|
onChange={(e) => {
|
|
setCurrentSrcPropRelation(e, count);
|
|
}}
|
|
>
|
|
{selectedSrcParameters.map((data) => (
|
|
<MenuItem value={data.name}>{data.name}</MenuItem>
|
|
))}
|
|
</Select>
|
|
) : (
|
|
<div>No defined fields</div>
|
|
);
|
|
|
|
const placeholderValue =
|
|
row.src.type === "static"
|
|
? row.src.value
|
|
: "... Set a static value";
|
|
|
|
return (
|
|
<TableRow>
|
|
<TableCell component="th" scope="row">
|
|
{buttonIcon}
|
|
</TableCell>
|
|
<TableCell>{srcpropsSelector}</TableCell>
|
|
<TableCell>{row.dst.name}</TableCell>
|
|
<TableCell>{row.dst.schema.type}</TableCell>
|
|
<TableCell>{row.dst.required}</TableCell>
|
|
<TableCell>
|
|
<TextField
|
|
color="primary"
|
|
name="searchtext"
|
|
placeholder={placeholderValue}
|
|
InputProps={{
|
|
disableUnderline: true,
|
|
}}
|
|
onKeyPress={(event) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
console.log(`Pressed keyCode ${event.key}`);
|
|
setStaticValue(event, row);
|
|
}
|
|
}}
|
|
/>
|
|
</TableCell>
|
|
<TableCell>INSERT SCRIPT THINGY - Cortex responder?</TableCell>
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
) : null;
|
|
|
|
// FIXME - use this
|
|
//const submitRelationships = () => {
|
|
// // Make an API-call to the backend for verification
|
|
// // Return with failures etc, and mark row issues?
|
|
//
|
|
// var apiUrl = "http://localhost:5000"
|
|
// fetch(apiUrl+"/api/v1/schedules",
|
|
// {
|
|
// method: "POST",
|
|
// headers: {"content-type": "application/json"},
|
|
// body: JSON.stringify(scheduleConfig),
|
|
// }
|
|
// )
|
|
// .then((response) => response.json())
|
|
// .then((responseJson) => {
|
|
// console.log(responseJson)
|
|
// })
|
|
// .catch((error) => {
|
|
// console.log(error);
|
|
// });
|
|
//}
|
|
|
|
const executeSchedule = () => {
|
|
fetch(
|
|
globalUrl + "/api/v1/schedules/" + props.match.params.key + "/execute",
|
|
{
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
}
|
|
)
|
|
.then((response) => response.json())
|
|
.then((responseJson) => {
|
|
console.log(responseJson);
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
const submitButton = (
|
|
<div style={{ margin: "auto", marginTop: "20px" }}>
|
|
<Button onClick={executeSchedule} variant="outlined" color="primary">
|
|
Execute
|
|
</Button>
|
|
</div>
|
|
);
|
|
|
|
// Requires src or dst as input
|
|
// FIXME - use this shit to edit an app or something
|
|
//const editButtonFix = (app, apptype) => {
|
|
// if (apptype === "src") {
|
|
|
|
// } else if (apptype === "dst") {
|
|
|
|
// }
|
|
//}
|
|
|
|
const editSrcApp = (event) => {
|
|
// if tmpsrcapp, show RESET (can be an X or something too)
|
|
// if reset is clicked, set source app back to the original
|
|
setTmpSrcApp(scheduleConfig.appinfo.sourceapp);
|
|
|
|
var tmpscheduleConfig = scheduleConfig;
|
|
tmpscheduleConfig.appinfo.sourceapp = {};
|
|
|
|
fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(tmpscheduleConfig),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((responseJson) => {
|
|
setScheduleConfig({});
|
|
setSrcApp({});
|
|
setSrcAppAction("");
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
const editDstApp = (event) => {
|
|
// if tmpsrcapp, show RESET (can be an X or something too)
|
|
// if reset is clicked, set source app back to the original
|
|
setTmpDstApp(scheduleConfig.appinfo.destinationapp);
|
|
|
|
var tmpscheduleConfig = scheduleConfig;
|
|
tmpscheduleConfig.appinfo.destinationapp = {};
|
|
|
|
fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(tmpscheduleConfig),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((responseJson) => {
|
|
setScheduleConfig({});
|
|
setDstApp({});
|
|
setDstAppAction("");
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
const scheduleApp = (app, actiondata) => {
|
|
const editButton =
|
|
actiondata === "src" ? (
|
|
<Button
|
|
onClick={(event) => {
|
|
editSrcApp(event);
|
|
}}
|
|
style={{
|
|
left: "50%",
|
|
top: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
}}
|
|
variant="outlined"
|
|
color="primary"
|
|
>
|
|
Edit
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
onClick={(event) => {
|
|
editDstApp(event);
|
|
}}
|
|
style={{
|
|
left: "50%",
|
|
top: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
}}
|
|
variant="outlined"
|
|
color="primary"
|
|
>
|
|
Edit
|
|
</Button>
|
|
);
|
|
|
|
const configureButton =
|
|
actiondata === "src" ? (
|
|
<Button
|
|
disabled={srcAppConfig.length === 0}
|
|
style={{
|
|
left: "50%",
|
|
top: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
}}
|
|
onClick={() => setSrcAppConfigOpen(true)}
|
|
variant="outlined"
|
|
color="primary"
|
|
>
|
|
Config
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
disabled={dstAppConfig.length === 0}
|
|
style={{
|
|
left: "50%",
|
|
top: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
}}
|
|
onClick={() => setDstAppConfigOpen(true)}
|
|
variant="outlined"
|
|
color="primary"
|
|
>
|
|
Config
|
|
</Button>
|
|
);
|
|
|
|
// FIXME - set src vs dst
|
|
return (
|
|
<Grid container spacing={2} style={{ margin: "10px 10px 10px 10px" }}>
|
|
<Grid item>
|
|
<ButtonBase>
|
|
<img alt="" style={{ width: "100px", height: "100px" }} />
|
|
</ButtonBase>
|
|
</Grid>
|
|
{splitter}
|
|
<Grid item xs={12} sm container style={{ marginLeft: "10px" }}>
|
|
<Grid item xs container direction="column" spacing={2}>
|
|
<Grid item xs>
|
|
<div>
|
|
<h2>{app.name}</h2>
|
|
</div>
|
|
<div>{app.description}</div>
|
|
</Grid>
|
|
<Grid item>{app.action}</Grid>
|
|
</Grid>
|
|
{splitter}
|
|
<Grid
|
|
item
|
|
style={{
|
|
marginLeft: "10px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
<div style={{ flex: "1" }}>{editButton}</div>
|
|
<div style={{ flex: "1" }}>{configureButton}</div>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
const splitter = (
|
|
<div
|
|
style={{
|
|
width: "1px",
|
|
backgroundColor: "grey",
|
|
margin: "5px 5px 5px 5px",
|
|
}}
|
|
/>
|
|
);
|
|
|
|
const dstDownshift = (
|
|
<Downshift style={downshiftStyle}>
|
|
{({
|
|
getInputProps,
|
|
getItemProps,
|
|
getMenuProps,
|
|
highlightedIndex,
|
|
inputValue,
|
|
isOpen,
|
|
selectedItem,
|
|
}) => (
|
|
<div style={{ flex: "1" }}>
|
|
{renderInput("input", {
|
|
fullWidth: true,
|
|
InputProps: getInputProps({
|
|
placeholder: "Search destination apps",
|
|
}),
|
|
})}
|
|
|
|
<div>
|
|
<div {...getMenuProps()}>
|
|
{isOpen ? (
|
|
<Paper square>
|
|
{getSuggestions(inputValue, "input").map(
|
|
(suggestion, index) =>
|
|
renderSuggestion({
|
|
suggestion,
|
|
index,
|
|
itemProps: getItemProps({ item: suggestion.name }),
|
|
highlightedIndex,
|
|
selectedItem,
|
|
})
|
|
)}
|
|
</Paper>
|
|
) : null}
|
|
</div>
|
|
{dstappaction}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Downshift>
|
|
);
|
|
|
|
const srcDownshift = (
|
|
<Downshift style={downshiftStyle}>
|
|
{({
|
|
getInputProps,
|
|
getItemProps,
|
|
getMenuProps,
|
|
highlightedIndex,
|
|
inputValue,
|
|
isOpen,
|
|
selectedItem,
|
|
}) => (
|
|
<div style={{ flex: "1" }}>
|
|
{renderInput("output", {
|
|
fullWidth: true,
|
|
InputProps: getInputProps({
|
|
placeholder: "Search source apps",
|
|
}),
|
|
})}
|
|
|
|
<div>
|
|
<div {...getMenuProps()}>
|
|
{isOpen ? (
|
|
<Paper square>
|
|
{getSuggestions(inputValue, "output").map(
|
|
(suggestion, index) =>
|
|
renderSuggestion({
|
|
suggestion,
|
|
index,
|
|
itemProps: getItemProps({ item: suggestion.name }),
|
|
highlightedIndex,
|
|
selectedItem,
|
|
})
|
|
)}
|
|
</Paper>
|
|
) : null}
|
|
</div>
|
|
{srcappaction}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Downshift>
|
|
);
|
|
|
|
const submitDstApp = (event) => {
|
|
var packagedSrc = {
|
|
name: dstApp.name,
|
|
id: dstApp.id,
|
|
description: dstApp.description,
|
|
action: dstAppAction,
|
|
};
|
|
|
|
var tmpscheduleConfig = scheduleConfig;
|
|
|
|
tmpscheduleConfig.appinfo.destinationapp = packagedSrc;
|
|
|
|
// Hmm, do this here? Idk
|
|
fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(tmpscheduleConfig),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((responseJson) => {
|
|
setScheduleConfig({});
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
const submitSrcApp = (event) => {
|
|
var packagedSrc = {
|
|
name: srcApp.name,
|
|
id: srcApp.id,
|
|
description: srcApp.description,
|
|
action: srcAppAction,
|
|
};
|
|
|
|
var tmpscheduleConfig = scheduleConfig;
|
|
|
|
// FIXME - future fred
|
|
//
|
|
tmpscheduleConfig.appinfo.sourceapp = packagedSrc;
|
|
|
|
// Hmm, do this here? Idk
|
|
fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(tmpscheduleConfig),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((responseJson) => {
|
|
setScheduleConfig({});
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
const resetDstApp = (event) => {
|
|
var tmpscheduleConfig = scheduleConfig;
|
|
tmpscheduleConfig.appinfo.destinationapp = tmpDstApp;
|
|
|
|
// Hmm, do this here? Idk
|
|
fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(tmpscheduleConfig),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((responseJson) => {
|
|
setScheduleConfig({});
|
|
setDstApp(tmpSrcApp);
|
|
setDstAppAction(tmpDstApp.action);
|
|
setTmpDstApp({});
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
const resetSrcApp = (event) => {
|
|
var tmpscheduleConfig = scheduleConfig;
|
|
tmpscheduleConfig.appinfo.sourceapp = tmpSrcApp;
|
|
|
|
// Hmm, do this here? Idk
|
|
fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(tmpscheduleConfig),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((responseJson) => {
|
|
setScheduleConfig({});
|
|
setSrcApp(tmpSrcApp);
|
|
setSrcAppAction(tmpSrcApp.action);
|
|
setTmpSrcApp({});
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
// Based on some srcthing
|
|
const searchGridSrc = (
|
|
<Grid container spacing={2} style={{ margin: "10px 10px 10px 10px" }}>
|
|
<Grid item style={{ width: "100px", height: "100px" }}>
|
|
Choose Source app (FIXME) - clickable
|
|
</Grid>
|
|
{splitter}
|
|
<Grid item xs={12} sm container style={{ marginLeft: "10px" }}>
|
|
<Grid item xs container direction="column" spacing={2}>
|
|
<Grid item xs>
|
|
<div>{srcDownshift}</div>
|
|
</Grid>
|
|
</Grid>
|
|
{splitter}
|
|
<Grid
|
|
item
|
|
style={{
|
|
marginLeft: "10px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
<div style={{ flex: "1" }}>
|
|
<Button
|
|
disabled={Object.getOwnPropertyNames(srcApp).length === 0}
|
|
onClick={(event) => {
|
|
submitSrcApp(event);
|
|
}}
|
|
style={{
|
|
left: "50%",
|
|
top: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
}}
|
|
variant="outlined"
|
|
color="primary"
|
|
>
|
|
Submit
|
|
</Button>
|
|
</div>
|
|
<div style={{ flex: "1" }}>
|
|
<Button
|
|
disabled={Object.getOwnPropertyNames(tmpSrcApp).length === 0}
|
|
onClick={resetSrcApp}
|
|
style={{
|
|
left: "50%",
|
|
top: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
}}
|
|
variant="outlined"
|
|
color="primary"
|
|
>
|
|
Reset
|
|
</Button>
|
|
</div>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
|
|
const searchGridDst = (
|
|
<Grid container spacing={2} style={{ margin: "10px 10px 10px 10px" }}>
|
|
<Grid item style={{ width: "100px", height: "100px" }}>
|
|
Choose Source app (FIXME) - clickable
|
|
</Grid>
|
|
{splitter}
|
|
<Grid item xs={12} sm container style={{ marginLeft: "10px" }}>
|
|
<Grid item xs container direction="column" spacing={2}>
|
|
<Grid item xs>
|
|
<div>{dstDownshift}</div>
|
|
</Grid>
|
|
</Grid>
|
|
{splitter}
|
|
<Grid
|
|
item
|
|
style={{
|
|
marginLeft: "10px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
<div style={{ flex: "1" }}>
|
|
<Button
|
|
disabled={Object.getOwnPropertyNames(dstApp).length === 0}
|
|
onClick={(event) => {
|
|
submitDstApp(event);
|
|
}}
|
|
style={{
|
|
left: "50%",
|
|
top: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
}}
|
|
variant="outlined"
|
|
color="primary"
|
|
>
|
|
Submit
|
|
</Button>
|
|
</div>
|
|
<div style={{ flex: "1" }}>
|
|
<Button
|
|
disabled={Object.getOwnPropertyNames(tmpDstApp).length === 0}
|
|
onClick={resetDstApp}
|
|
style={{
|
|
left: "50%",
|
|
top: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
}}
|
|
variant="outlined"
|
|
color="primary"
|
|
>
|
|
Reset
|
|
</Button>
|
|
</div>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
|
|
const srcField =
|
|
Object.getOwnPropertyNames(scheduleConfig).length > 0 &&
|
|
Object.getOwnPropertyNames(scheduleConfig.appinfo.sourceapp).length > 0 &&
|
|
scheduleConfig.appinfo.sourceapp.name.length > 0 ? (
|
|
<div
|
|
style={{
|
|
marginLeft: "20px",
|
|
margintop: "20px",
|
|
marginRight: "20px",
|
|
flex: "1",
|
|
}}
|
|
>
|
|
<Paper
|
|
style={{
|
|
maxWidth: "100%",
|
|
display: "flex",
|
|
padding: "10px 10px 10px 10px",
|
|
}}
|
|
>
|
|
{scheduleApp(scheduleConfig.appinfo.sourceapp, "src")}
|
|
</Paper>
|
|
</div>
|
|
) : (
|
|
<div
|
|
style={{
|
|
marginLeft: "20px",
|
|
margintop: "20px",
|
|
marginRight: "20px",
|
|
flex: "1",
|
|
}}
|
|
>
|
|
<Paper
|
|
style={{
|
|
minHeight: "136px",
|
|
maxHeight: "136px",
|
|
maxWidth: "100%",
|
|
display: "flex",
|
|
padding: "10px 10px 10px 10px",
|
|
}}
|
|
>
|
|
{searchGridSrc}
|
|
</Paper>
|
|
</div>
|
|
);
|
|
|
|
const dstField =
|
|
Object.getOwnPropertyNames(scheduleConfig).length > 0 &&
|
|
Object.getOwnPropertyNames(scheduleConfig.appinfo.destinationapp).length >
|
|
0 &&
|
|
scheduleConfig.appinfo.destinationapp.name.length > 0 ? (
|
|
<div
|
|
style={{
|
|
marginLeft: "20px",
|
|
margintop: "20px",
|
|
marginRight: "20px",
|
|
flex: "1",
|
|
}}
|
|
>
|
|
<Paper
|
|
style={{
|
|
maxWidth: "100%",
|
|
display: "flex",
|
|
padding: "10px 10px 10px 10px",
|
|
}}
|
|
>
|
|
{scheduleApp(scheduleConfig.appinfo.destinationapp, "dst")}
|
|
</Paper>
|
|
</div>
|
|
) : (
|
|
<div
|
|
style={{
|
|
marginLeft: "20px",
|
|
margintop: "20px",
|
|
marginRight: "20px",
|
|
flex: "1",
|
|
}}
|
|
>
|
|
<Paper
|
|
style={{
|
|
minHeight: "136px",
|
|
maxHeight: "136px",
|
|
maxWidth: "100%",
|
|
display: "flex",
|
|
padding: "10px 10px 10px 10px",
|
|
}}
|
|
>
|
|
{searchGridDst}
|
|
</Paper>
|
|
</div>
|
|
);
|
|
|
|
// Have to use array cus of datastore lol (no map[string]string)
|
|
const srcModalData = [];
|
|
const buildSrcModal = (event, fieldname) => {
|
|
var fieldfound = false;
|
|
for (var key in srcModalData) {
|
|
if (srcModalData[key]["key"] === fieldname) {
|
|
fieldfound = true;
|
|
srcModalData[key]["value"] = event.target.value;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!fieldfound) {
|
|
srcModalData.push({ key: fieldname, value: event.target.value });
|
|
}
|
|
console.log(srcModalData);
|
|
};
|
|
|
|
// FIXME - verify required fields?
|
|
const submitSrcConfig = () => {
|
|
scheduleConfig.appinfo.sourceapp.config = srcModalData;
|
|
setScheduleConfig(scheduleConfig);
|
|
setSrcAppConfigOpen(false);
|
|
|
|
fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(scheduleConfig),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((responseJson) => {
|
|
console.log(responseJson);
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
const dstModalData = [];
|
|
const buildDstModal = (event, fieldname) => {
|
|
var fieldfound = false;
|
|
for (var key in dstModalData) {
|
|
if (dstModalData[key]["key"] === fieldname) {
|
|
fieldfound = true;
|
|
dstModalData[key]["value"] = event.target.value;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!fieldfound) {
|
|
dstModalData.push({ key: fieldname, value: event.target.value });
|
|
}
|
|
console.log(dstModalData);
|
|
};
|
|
|
|
// FIXME - verify required fields
|
|
const submitDstConfig = () => {
|
|
scheduleConfig.appinfo.destinationapp.config = dstModalData;
|
|
setScheduleConfig(scheduleConfig);
|
|
setDstAppConfigOpen(false);
|
|
|
|
fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(scheduleConfig),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((responseJson) => {
|
|
console.log(responseJson);
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
const dstConfigModal = dstAppConfigOpen ? (
|
|
<Dialog
|
|
modal
|
|
open={dstAppConfigOpen}
|
|
onClose={() => {
|
|
setDstAppConfigOpen(false);
|
|
}}
|
|
>
|
|
<DialogTitle>Source configuration</DialogTitle>
|
|
<DialogContent>
|
|
Configure {dstApp.name}'s required fields
|
|
{dstAppConfig.map((data) => (
|
|
<TextField
|
|
onChange={(event) => {
|
|
buildDstModal(event, data.name);
|
|
}}
|
|
autofocus
|
|
color="primary"
|
|
name="searchtext"
|
|
placeholder={data.name}
|
|
margin="dense"
|
|
id={data.name}
|
|
label={data.name}
|
|
fullWidth
|
|
/>
|
|
))}
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={() => setDstAppConfigOpen(false)} color="primary">
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={() => submitDstConfig()} color="primary">
|
|
Submit
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
) : null;
|
|
|
|
// FIXME - load the actual fields!
|
|
const srcConfigModal = srcAppConfigOpen ? (
|
|
<Dialog
|
|
modal
|
|
open={srcAppConfigOpen}
|
|
onClose={() => {
|
|
setSrcAppConfigOpen(false);
|
|
}}
|
|
>
|
|
<DialogTitle>Source configuration</DialogTitle>
|
|
<DialogContent>
|
|
Configure {srcApp.name}'s required fields
|
|
{srcAppConfig.map((data) => (
|
|
<TextField
|
|
onChange={(event) => {
|
|
buildSrcModal(event, data.name);
|
|
}}
|
|
autofocus
|
|
color="primary"
|
|
name="searchtext"
|
|
placeholder={data.name}
|
|
margin="dense"
|
|
id={data.name}
|
|
label={data.name}
|
|
fullWidth
|
|
/>
|
|
))}
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={() => setSrcAppConfigOpen(false)} color="primary">
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={() => submitSrcConfig()} color="primary">
|
|
Submit
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
) : null;
|
|
|
|
return (
|
|
<div>
|
|
{srcConfigModal}
|
|
{dstConfigModal}
|
|
<div style={bodyDivStyle}>
|
|
{srcField}
|
|
{dstField}
|
|
</div>
|
|
|
|
<div style={bodyDivStyle}>{submitButton}</div>
|
|
<div style={bodyDivStyle}>{relationshipBody}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EditSchedule;
|