diff --git a/src/App.tsx b/src/App.tsx index f0e3350..8513cfd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,11 +9,12 @@ import { CookiesProvider } from "react-cookie"; import { getUser } from "./action/action"; import { store } from "./store/store"; import { withCookies } from "react-cookie"; -import { ToastContainer } from 'react-toastify'; -import 'react-toastify/dist/ReactToastify.css'; +import { ToastContainer } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; import ShowJson from "./components/manifest/ShowJson"; import ImportManifestJson from "./components/manifest/ImportManifestJson"; -import Faults from "./components/manifest/Faults" +import Faults from "./components/manifest/Faults"; +import Notification from "./components/manifest/Notification"; function App() { const { state, dispatch } = React.useContext(store); @@ -70,6 +71,12 @@ function App() { loginRedirect={loginRedirect} exact /> + - + ); } diff --git a/src/components/manifest/Faults.tsx b/src/components/manifest/Faults.tsx index 62f8da4..83b4ec3 100644 --- a/src/components/manifest/Faults.tsx +++ b/src/components/manifest/Faults.tsx @@ -4,129 +4,133 @@ import * as React from "react"; import SchemaForm from "./SchemaForm"; import MenuAppBar from "../layout/Header"; import { httpClient } from "../../helper/api-client"; -import { Button, Paper, Typography, IconButton, Snackbar } from "@material-ui/core"; -import RefreshIcon from '@material-ui/icons/Refresh'; -import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline'; +import { + Button, + Paper, + Typography, + IconButton, + Snackbar, +} from "@material-ui/core"; +import RefreshIcon from "@material-ui/icons/Refresh"; +import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"; import { toast } from "react-toastify"; import { Alert } from "@material-ui/lab"; const Faults = (props: any) => { - const { cookies } = props; - const manifestIdParam = props?.match?.params?.manifestId; - const [submitResponse, setSubmitResponse] = useState('') - const [submitResponseStatus, setSubmitResponseStatus] = useState('') - const [inProgress, setInProgress] = useState(false) + const { cookies } = props; + const manifestIdParam = props?.match?.params?.manifestId; + const [submitResponse, setSubmitResponse] = useState(""); + const [submitResponseStatus, setSubmitResponseStatus] = useState(""); + const [inProgress, setInProgress] = useState(false); - const handleSubmit = async (): Promise => { - const toastId = toast.info("In Progress ...", { autoClose: 50000, }); - setInProgress(true) - httpClient(`/api/faults?manifestId=${manifestIdParam}`, { - method: "POST", - body: JSON.stringify(standaloneData.current), - }).then(r => { - r.text().then(resJson => { - setInProgress(false) - if (r.ok) { - toast.update(toastId, { render: "Done", type: "success", autoClose: 3000 }); - setSubmitResponseStatus('success') - } - else { - toast.dismiss(toastId) - setSubmitResponseStatus('error') - setSubmitResponse(resJson) - } - }) - }); - }; + const handleSubmit = async (): Promise => { + const toastId = toast.info("In Progress ...", { autoClose: 50000 }); + setInProgress(true); + httpClient(`/api/faults?manifestId=${manifestIdParam}`, { + method: "POST", + body: JSON.stringify(standaloneData.current), + }).then((r) => { + r.text().then((resJson) => { + setInProgress(false); + if (r.ok) { + toast.update(toastId, { + render: "Done", + type: "success", + autoClose: 3000, + }); + setSubmitResponseStatus("success"); + } else { + toast.dismiss(toastId); + setSubmitResponseStatus("error"); + setSubmitResponse(resJson); + } + }); + }); + }; - const fetchK8Resources = async (): Promise => { - setk8Resources(['Loading...']) - httpClient(`/api/faults?manifestId=${manifestIdParam}`, { - method: "GET", - }).then(res => { - res.json().then((resJson) => { - if(res.ok) { - setk8Resources(resJson) - } else { - setk8Resources([resJson]) - } - }) - }); - } + const fetchK8Resources = async (): Promise => { + setk8Resources(["Loading..."]); + httpClient(`/api/faults?manifestId=${manifestIdParam}`, { + method: "GET", + }).then((res) => { + res.json().then((resJson) => { + if (res.ok) { + setk8Resources(resJson); + } else { + setk8Resources([resJson]); + } + }); + }); + }; - const deleteK8Resources = async (): Promise => { - const toastId = toast.info("In Progress ...", { autoClose: 50000, }); - httpClient(`/api/faults?manifestId=${manifestIdParam}`, { - method: "DELETE", - }).then(r => { - r.text().then(resJson => { - if (r.ok) { - toast.update(toastId, { render: "Deleted", type: "success", autoClose: 3000 }); - setSubmitResponseStatus('success') - } - else { - toast.dismiss(toastId) - setSubmitResponseStatus('error') - setSubmitResponse(resJson) - } - }) - }); - } + const deleteK8Resources = async (): Promise => { + const toastId = toast.info("In Progress ...", { autoClose: 50000 }); + httpClient(`/api/faults?manifestId=${manifestIdParam}`, { + method: "DELETE", + }).then((r) => { + r.text().then((resJson) => { + if (r.ok) { + toast.update(toastId, { + render: "Deleted", + type: "success", + autoClose: 3000, + }); + setSubmitResponseStatus("success"); + } else { + toast.dismiss(toastId); + setSubmitResponseStatus("error"); + setSubmitResponse(resJson); + } + }); + }); + }; - const [csrfToken] = useState(cookies.get("XSRF-TOKEN")); - const [k8Resources, setk8Resources] = useState([]); - const standaloneData = useRef({}); + const [csrfToken] = useState(cookies.get("XSRF-TOKEN")); + const [k8Resources, setk8Resources] = useState([]); + const standaloneData = useRef({}); - useEffect(() => { - fetchK8Resources() - }, []) + useEffect(() => { + fetchK8Resources(); + }, []); - - return (<> - -
-
- - - - - - Chaos Experiment Status: - - -
-                        
-                            
-                                {k8Resources.map((s,i) => {JSON.stringify(s)})}
-                            
-                        
-
-
- { - standaloneData.current = data; - }} - csrfToken={csrfToken} - > - -
- - setSubmitResponseStatus("")}> - - {JSON.stringify(submitResponse)} - - + return ( + <> + +
+
+ { + standaloneData.current = data; + }} + csrfToken={csrfToken} + >
- ) + + setSubmitResponseStatus("")} + > + {JSON.stringify(submitResponse)} + +
+ + ); +}; -} - -export default withCookies(Faults) +export default withCookies(Faults); diff --git a/src/components/manifest/Form.tsx b/src/components/manifest/Form.tsx index 09e0e79..87886ee 100644 --- a/src/components/manifest/Form.tsx +++ b/src/components/manifest/Form.tsx @@ -257,6 +257,15 @@ const Form = (props: any) => { > Inject Faults +   + ) diff --git a/src/components/manifest/Notification.tsx b/src/components/manifest/Notification.tsx new file mode 100644 index 0000000..6837247 --- /dev/null +++ b/src/components/manifest/Notification.tsx @@ -0,0 +1,146 @@ +import { withCookies } from "react-cookie"; +import { useState, useRef, useEffect } from "react"; +import * as React from "react"; +import SchemaForm from "./SchemaForm"; +import MenuAppBar from "../layout/Header"; +import { httpClient } from "../../helper/api-client"; +import { + Button, + Paper, + Typography, + IconButton, + Snackbar, +} from "@material-ui/core"; +import RefreshIcon from "@material-ui/icons/Refresh"; +import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"; +import { toast } from "react-toastify"; +import { Alert } from "@material-ui/lab"; + +const Notification = (props: any) => { + const { cookies } = props; + const manifestIdParam = props?.match?.params?.manifestId; + const [submitResponse, setSubmitResponse] = useState(""); + const [submitResponseStatus, setSubmitResponseStatus] = useState(""); + const [inProgress, setInProgress] = useState(false); + const [formInitData, setFormInitData] = useState({}); + const [loading, setLoading] = useState(true); + const [fetchError, setFetchError] = useState({}); + + const handleSubmit = async (): Promise => { + const toastId = toast.info("In Progress ...", { autoClose: 50000 }); + setInProgress(true); + httpClient(`/api/notification?manifestId=${manifestIdParam}`, { + method: "POST", + body: JSON.stringify(standaloneData.current), + }).then((r) => { + r.text().then((resJson) => { + setInProgress(false); + if (r.ok) { + toast.update(toastId, { + render: "Done", + type: "success", + autoClose: 3000, + }); + setSubmitResponseStatus("success"); + } else { + toast.dismiss(toastId); + setSubmitResponseStatus("error"); + setSubmitResponse(resJson); + } + }); + }); + }; + + const getManifestData = async (manifestId: number): Promise => { + console.log(`Fetching notification info for manifest id ${manifestId}`); + return httpClient(`/api/notification?manifestId=${manifestId}`); + }; + + // const deleteK8Resources = async (): Promise => { + // const toastId = toast.info("In Progress ...", { autoClose: 50000 }); + // httpClient(`/api/faults?manifestId=${manifestIdParam}`, { + // method: "DELETE", + // }).then((r) => { + // r.text().then((resJson) => { + // if (r.ok) { + // toast.update(toastId, { + // render: "Deleted", + // type: "success", + // autoClose: 3000, + // }); + // setSubmitResponseStatus("success"); + // } else { + // toast.dismiss(toastId); + // setSubmitResponseStatus("error"); + // setSubmitResponse(resJson); + // } + // }); + // }); + // }; + + const [csrfToken] = useState(cookies.get("XSRF-TOKEN")); + const standaloneData = useRef({}); + + useEffect(() => { + const queryParams = new URLSearchParams(props.location.search); + const handleFetchResponse = (res: Response) => { + res.json().then((resJson) => { + setLoading(false); + if (res.ok) { + console.log("got json notification reponse"); + setFormInitData(resJson); + } else { + setFetchError(resJson); + } + }); + }; + if (manifestIdParam) { + getManifestData(manifestIdParam).then(handleFetchResponse); + } else { + // getManifestDefaults().then(handleFetchResponse); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + <> + +
+
+ { + standaloneData.current = data; + }} + csrfToken={csrfToken} + manifestData={formInitData} + > +
+ + setSubmitResponseStatus("")} + > + {JSON.stringify(submitResponse)} + +
+ + ); +}; + +export default withCookies(Notification);