Ran prettier on the whole frontend codebase again
This commit is contained in:
Isoporhode
+290
-269
@@ -1,295 +1,316 @@
|
||||
import React, { useEffect} from 'react';
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import ButtonBase from '@material-ui/core/ButtonBase';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import List from '@material-ui/core/List';
|
||||
import ListItem from '@material-ui/core/ListItem';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import Select from '@material-ui/core/Select';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import ButtonBase from "@material-ui/core/ButtonBase";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import List from "@material-ui/core/List";
|
||||
import ListItem from "@material-ui/core/ListItem";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import Select from "@material-ui/core/Select";
|
||||
import MenuItem from "@material-ui/core/MenuItem";
|
||||
|
||||
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 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 WebhookImage from '../assets/img/webhook.png';
|
||||
import KafkaImage from '../assets/img/kafka.png';
|
||||
import WebhookImage from "../assets/img/webhook.png";
|
||||
import KafkaImage from "../assets/img/kafka.png";
|
||||
|
||||
const Webhooks = (props) => {
|
||||
const { globalUrl, isLoaded } = props;
|
||||
const validtypes = ["webhook"]
|
||||
const { globalUrl, isLoaded } = props;
|
||||
const validtypes = ["webhook"];
|
||||
|
||||
//const [hooks, setSchedules] = React.useState(hookdata);
|
||||
const [hooks, setHooks] = React.useState([]);
|
||||
const [modalOpen, setModalOpen] = React.useState(false);
|
||||
const [newHookName, setNewHookName] = React.useState("");
|
||||
const [newHookDescription, setNewHookDescription] = React.useState("");
|
||||
const [newHookType, setNewHookType] = React.useState("");
|
||||
const [firstrequest, setFirstrequest] = React.useState(true);
|
||||
const [, setModalError] = React.useState("");
|
||||
//const [hooks, setSchedules] = React.useState(hookdata);
|
||||
const [hooks, setHooks] = React.useState([]);
|
||||
const [modalOpen, setModalOpen] = React.useState(false);
|
||||
const [newHookName, setNewHookName] = React.useState("");
|
||||
const [newHookDescription, setNewHookDescription] = React.useState("");
|
||||
const [newHookType, setNewHookType] = React.useState("");
|
||||
const [firstrequest, setFirstrequest] = React.useState(true);
|
||||
const [, setModalError] = React.useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (firstrequest) {
|
||||
setFirstrequest(false)
|
||||
getAvailableHooks()
|
||||
}
|
||||
})
|
||||
useEffect(() => {
|
||||
if (firstrequest) {
|
||||
setFirstrequest(false);
|
||||
getAvailableHooks();
|
||||
}
|
||||
});
|
||||
|
||||
const newHook = () => {
|
||||
if (newHookName.length === 0) {
|
||||
setModalError("Missing name in modal")
|
||||
return
|
||||
}
|
||||
const newHook = () => {
|
||||
if (newHookName.length === 0) {
|
||||
setModalError("Missing name in modal");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validtypes.includes(newHookType)) {
|
||||
setModalError(newHookType + " is not a valid type. Try this: "+validtypes)
|
||||
}
|
||||
if (!validtypes.includes(newHookType)) {
|
||||
setModalError(
|
||||
newHookType + " is not a valid type. Try this: " + validtypes
|
||||
);
|
||||
}
|
||||
|
||||
fetch(globalUrl+"/api/v1/hooks/new", {
|
||||
method: "POST",
|
||||
headers: {"content-type": "application/json"},
|
||||
body: JSON.stringify({"name": newHookName, "description": newHookDescription, "type": newHookType}),
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((responseJson) => {
|
||||
console.log(responseJson)
|
||||
setHooks([])
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
});
|
||||
}
|
||||
fetch(globalUrl + "/api/v1/hooks/new", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name: newHookName,
|
||||
description: newHookDescription,
|
||||
type: newHookType,
|
||||
}),
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((responseJson) => {
|
||||
console.log(responseJson);
|
||||
setHooks([]);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
const getAvailableHooks = () => {
|
||||
fetch(globalUrl+"/api/v1/hooks", {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((responseJson) => {
|
||||
setHooks(responseJson)
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
// window.location.pathname = "/"
|
||||
});
|
||||
}
|
||||
const getAvailableHooks = () => {
|
||||
fetch(globalUrl + "/api/v1/hooks", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((responseJson) => {
|
||||
setHooks(responseJson);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
// window.location.pathname = "/"
|
||||
});
|
||||
};
|
||||
|
||||
const deleteHook = (id) => {
|
||||
if (id === undefined) {
|
||||
return
|
||||
}
|
||||
const deleteHook = (id) => {
|
||||
if (id === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(globalUrl+"/api/v1/hooks/"+id+"/delete", {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((responseJson) => {
|
||||
setHooks([])
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
});
|
||||
}
|
||||
fetch(globalUrl + "/api/v1/hooks/" + id + "/delete", {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((responseJson) => {
|
||||
setHooks([]);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
const bodyDivStyle = {
|
||||
marginLeft: "20px",
|
||||
marginRight: "20px",
|
||||
width: "1350px",
|
||||
minWidth: "1350px",
|
||||
maxWidth: "1350px",
|
||||
}
|
||||
const bodyDivStyle = {
|
||||
marginLeft: "20px",
|
||||
marginRight: "20px",
|
||||
width: "1350px",
|
||||
minWidth: "1350px",
|
||||
maxWidth: "1350px",
|
||||
};
|
||||
|
||||
const hookApp = (app) => {
|
||||
const hookApp = (app) => {
|
||||
// Might be more options, but should be webhook or MQ
|
||||
const appPicture =
|
||||
app.type === "webhook" ? (
|
||||
<img src={WebhookImage} alt="webhook" width="100px" height="100px" />
|
||||
) : (
|
||||
<img src={KafkaImage} alt="MQ" width="100px" height="100px" />
|
||||
);
|
||||
|
||||
// Might be more options, but should be webhook or MQ
|
||||
const appPicture = app.type === "webhook" ?
|
||||
<img
|
||||
src={WebhookImage}
|
||||
alt="webhook"
|
||||
width="100px"
|
||||
height="100px"
|
||||
/>
|
||||
:
|
||||
<img
|
||||
src={KafkaImage}
|
||||
alt="MQ"
|
||||
width="100px"
|
||||
height="100px"
|
||||
/>
|
||||
return (
|
||||
<Grid container spacing={2} style={{ margin: "10px 10px 10px 10px" }}>
|
||||
<Grid item style={{ marginRight: "10px" }}>
|
||||
<ButtonBase>{appPicture}</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.info.name}</h2>
|
||||
</div>
|
||||
<div>Desc: {app.info.description}</div>
|
||||
<div>Status: {app.status}</div>
|
||||
</Grid>
|
||||
<Grid item>{app.action}</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
return(
|
||||
<Grid container spacing={2} style={{margin: "10px 10px 10px 10px"}}>
|
||||
<Grid item style={{marginRight: "10px"}}>
|
||||
<ButtonBase>
|
||||
{appPicture}
|
||||
</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.info.name}</h2>
|
||||
</div>
|
||||
<div>
|
||||
Desc: {app.info.description}
|
||||
</div>
|
||||
<div>
|
||||
Status: {app.status}
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
{app.action}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
const splitter = (
|
||||
<div
|
||||
style={{
|
||||
width: "1px",
|
||||
backgroundColor: "grey",
|
||||
margin: "5px 5px 5px 5px",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
const splitter = <div style={{width: "1px", backgroundColor: "grey", margin:"5px 5px 5px 5px"}} />
|
||||
const hrefStyle = {
|
||||
color: "#385f71",
|
||||
textDecoration: "none",
|
||||
};
|
||||
|
||||
const hrefStyle = {
|
||||
color: "#385f71",
|
||||
textDecoration: "none"
|
||||
}
|
||||
// FIXME - add Schedule modal
|
||||
const hookPaper = (hook) => {
|
||||
return (
|
||||
<div>
|
||||
<Paper
|
||||
style={{
|
||||
maxWidth: "500px",
|
||||
display: "flex",
|
||||
padding: "10px 10px 10px 10px",
|
||||
marginTop: "10px",
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: "5" }}>{hookApp(hook)}</div>
|
||||
{splitter}
|
||||
<div style={{ flex: "1" }}>
|
||||
<List style={{ backgroundColor: "#ffffff" }}>
|
||||
<ListItem style={{ flex: "1", textAlign: "center" }}>
|
||||
<a href={"/webhooks/" + hook.id} style={hrefStyle}>
|
||||
<Button disabled={false} color="primary">
|
||||
Edit
|
||||
</Button>
|
||||
</a>
|
||||
</ListItem>
|
||||
<ListItem style={{ flex: "1", textAlign: "center" }}>
|
||||
<Button
|
||||
disabled={false}
|
||||
onClick={() => {
|
||||
deleteHook(hook.id);
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</Paper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// FIXME - add Schedule modal
|
||||
const hookPaper = (hook) => {
|
||||
return(
|
||||
<div>
|
||||
<Paper style={{maxWidth: "500px", display: "flex", padding: "10px 10px 10px 10px", marginTop: "10px"}}>
|
||||
<div style={{flex: "5"}}>
|
||||
{hookApp(hook)}
|
||||
</div>
|
||||
{splitter}
|
||||
<div style={{flex: "1"}}>
|
||||
<List style={{backgroundColor: "#ffffff"}}>
|
||||
<ListItem style={{flex: "1", textAlign: "center"}}>
|
||||
<a href={"/webhooks/"+hook.id} style={hrefStyle} >
|
||||
<Button
|
||||
disabled={false}
|
||||
color="primary"
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</a>
|
||||
</ListItem>
|
||||
<ListItem style={{flex: "1", textAlign: "center"}}>
|
||||
<Button
|
||||
disabled={false}
|
||||
onClick={() => {deleteHook(hook.id)}}
|
||||
color="primary"
|
||||
>Delete</Button>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</Paper>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const modalView = modalOpen ? (
|
||||
<Dialog
|
||||
modal
|
||||
open={modalOpen}
|
||||
onClose={() => {
|
||||
setModalOpen(false);
|
||||
}}
|
||||
>
|
||||
<DialogTitle>Hook configuration</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
onChange={(event) => {
|
||||
setNewHookName(event.target.value);
|
||||
}}
|
||||
color="primary"
|
||||
placeholder="Name"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
onChange={(event) => {
|
||||
setNewHookDescription(event.target.value);
|
||||
}}
|
||||
color="primary"
|
||||
placeholder="Description"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
const modalView = modalOpen ?
|
||||
<Dialog modal
|
||||
open={modalOpen}
|
||||
onClose={() => {setModalOpen(false)}}
|
||||
>
|
||||
<DialogTitle>Hook configuration</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
onChange={(event) => {setNewHookName(event.target.value)}}
|
||||
color="primary"
|
||||
placeholder="Name"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
onChange={(event) => {setNewHookDescription(event.target.value)}}
|
||||
color="primary"
|
||||
placeholder="Description"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
/>
|
||||
<Select
|
||||
value={newHookType}
|
||||
onChange={(event) => {
|
||||
setNewHookType(event.target.value);
|
||||
}}
|
||||
fullWidth="true"
|
||||
>
|
||||
{validtypes.map((data) => (
|
||||
<MenuItem value={data}>{data}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setModalOpen(false)} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
disabled={
|
||||
newHookName.length === 0 || !validtypes.includes(newHookType)
|
||||
}
|
||||
onClick={() => {
|
||||
newHook();
|
||||
setModalOpen(false);
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
) : null;
|
||||
|
||||
<Select
|
||||
value={newHookType}
|
||||
onChange={(event) => {setNewHookType(event.target.value)}}
|
||||
fullWidth="true"
|
||||
>
|
||||
{validtypes.map(data => (
|
||||
<MenuItem value={data}>
|
||||
{data}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setModalOpen(false)} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button disabled={newHookName.length === 0 || !validtypes.includes(newHookType)} onClick={() => {newHook(); setModalOpen(false)}} color="primary">
|
||||
Submit
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
: null
|
||||
const hookmap =
|
||||
hooks.length > 0 ? (
|
||||
<div>{hooks.map((data) => hookPaper(data))}</div>
|
||||
) : (
|
||||
<div style={{ marginTop: "10%", marginLeft: "50%" }}>
|
||||
<Button
|
||||
disabled={false}
|
||||
onClick={() => {
|
||||
setModalOpen(true);
|
||||
}}
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
>
|
||||
CREATE NEW HOOK
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
const hookmap = hooks.length > 0 ?
|
||||
<div>
|
||||
{hooks.map(data => (
|
||||
hookPaper(data)
|
||||
))}
|
||||
</div>
|
||||
:
|
||||
<div style={{marginTop: "10%", marginLeft: "50%"}} >
|
||||
<Button
|
||||
disabled={false}
|
||||
onClick={() => {setModalOpen(true)}}
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
>CREATE NEW HOOK</Button>
|
||||
</div>
|
||||
const hookView = (
|
||||
<div style={bodyDivStyle}>
|
||||
<Button
|
||||
disabled={false}
|
||||
onClick={() => {
|
||||
setModalOpen(true);
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
New
|
||||
</Button>
|
||||
{hookmap}
|
||||
</div>
|
||||
);
|
||||
|
||||
const hookView =
|
||||
<div style={bodyDivStyle}>
|
||||
<Button
|
||||
disabled={false}
|
||||
onClick={() => {setModalOpen(true)}}
|
||||
color="primary"
|
||||
>New</Button>
|
||||
{hookmap}
|
||||
</div>
|
||||
const loadedCheck = isLoaded ? (
|
||||
<div>
|
||||
{modalView}
|
||||
{hookView}
|
||||
</div>
|
||||
) : (
|
||||
<div></div>
|
||||
);
|
||||
|
||||
const loadedCheck = isLoaded ?
|
||||
<div>
|
||||
{modalView}
|
||||
{hookView}
|
||||
</div>
|
||||
:
|
||||
<div>
|
||||
</div>
|
||||
// Maybe use gridview or something, idk
|
||||
return <div>{loadedCheck}</div>;
|
||||
};
|
||||
|
||||
|
||||
// Maybe use gridview or something, idk
|
||||
return (
|
||||
<div>
|
||||
{loadedCheck}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Webhooks
|
||||
export default Webhooks;
|
||||
|
||||
Reference in New Issue
Block a user