INFRA-535| Deepak Jain| adding feature to subscribe to notification

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
           />
+          <ProtectedRoute
+            path="/manifests/:manifestId/notification"
+            component={Notification}
+            loginRedirect={loginRedirect}
+            exact
+          />
           <ProtectedRoute
             path="/manifests/import"
             component={ImportManifestJson}
@@ -78,7 +85,7 @@ function App() {
           />
         </Router>
       </CookiesProvider>
-      <ToastContainer position="bottom-left"/>
+      <ToastContainer position="bottom-left" />
     </div>
   );
 }

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<string>('')
-    const [submitResponseStatus, setSubmitResponseStatus] = useState<string>('')
-    const [inProgress, setInProgress] = useState<boolean>(false)
+  const { cookies } = props;
+  const manifestIdParam = props?.match?.params?.manifestId;
+  const [submitResponse, setSubmitResponse] = useState<string>("");
+  const [submitResponseStatus, setSubmitResponseStatus] = useState<string>("");
+  const [inProgress, setInProgress] = useState<boolean>(false);
 
-    const handleSubmit = async (): Promise<any> => {
-        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<any> => {
+    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<any> => {
-        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<any> => {
+    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<any> => {
-        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<any> => {
+    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<String[]>([]);
-    const standaloneData = useRef<Object>({});
+  const [csrfToken] = useState(cookies.get("XSRF-TOKEN"));
+  const [k8Resources, setk8Resources] = useState<String[]>([]);
+  const standaloneData = useRef<Object>({});
 
-    useEffect(() => {
-        fetchK8Resources()
-    }, [])
+  useEffect(() => {
+    fetchK8Resources();
+  }, []);
 
-
-    return (<>
-        <MenuAppBar name="Fault Injection" />
-        <div style={{ display: "flex", alignItems: "center", flexDirection: "column", marginTop: "1vh" }} >
-            <div style={{ width: "50vw" }}>
-
-                <Paper elevation={2} >
-                    <Typography style={{ paddingTop: "1vh", paddingLeft: "1vw" }}>
-                        <IconButton style={{ float: "right" }} onClick={deleteK8Resources}><DeleteOutlineIcon /></IconButton>
-                        <IconButton style={{ float: "right" }} onClick={fetchK8Resources}><RefreshIcon /></IconButton>
-                Chaos Experiment Status:
-
-                </Typography>
-                    <pre style={{ paddingBottom: "2vh", paddingLeft: "1vw" }}>
-                        <table>
-                            <tbody>
-                                {k8Resources.map((s,i) => <tr key={i}>{JSON.stringify(s)}</tr>)}
-                            </tbody>
-                        </table>
-                    </pre>
-                </Paper>
-                <SchemaForm
-                    name="faultInjection"
-                    onDataChange={(data, errors) => {
-                        standaloneData.current = data;
-                    }}
-                    csrfToken={csrfToken}
-                >
-                </SchemaForm>
-            </div>
-            <Button 
-                variant="outlined"
-                onClick={handleSubmit}
-                disabled={inProgress}
-                color="primary"
-            >
-                Submit
-        </Button>
-        <Snackbar autoHideDuration={6000} open={submitResponseStatus === "error"} onClose={() => setSubmitResponseStatus("")}>
-                <Alert severity="error">
-                    {JSON.stringify(submitResponse)}
-                </Alert>
-        </Snackbar>
+  return (
+    <>
+      <MenuAppBar name="Subscription" />
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          flexDirection: "column",
+          marginTop: "1vh",
+        }}
+      >
+        <div style={{ width: "50vw" }}>
+          <SchemaForm
+            name="faultInjection"
+            onDataChange={(data, errors) => {
+              standaloneData.current = data;
+            }}
+            csrfToken={csrfToken}
+          ></SchemaForm>
         </div>
-    </>)
+        <Button
+          variant="outlined"
+          onClick={handleSubmit}
+          disabled={inProgress}
+          color="primary"
+        >
+          Submit
+        </Button>
+        <Snackbar
+          autoHideDuration={6000}
+          open={submitResponseStatus === "error"}
+          onClose={() => setSubmitResponseStatus("")}
+        >
+          <Alert severity="error">{JSON.stringify(submitResponse)}</Alert>
+        </Snackbar>
+      </div>
+    </>
+  );
+};
 
-}
-
-export default withCookies(Faults)
+export default withCookies(Faults);

src/components/manifest/Form.tsx

@@ -257,6 +257,15 @@ const Form = (props: any) => {
               >
                 Inject Faults
               </Button>
+              &nbsp;
+              <Button
+                variant="outlined"
+                component={Link}
+                to={`/manifests/${manifestIdParam}/notification`}
+                disabled={!manifestIdParam}
+              >
+                notification
+              </Button>
             </Grid>
           </Grid>
         )

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<string>("");
+  const [submitResponseStatus, setSubmitResponseStatus] = useState<string>("");
+  const [inProgress, setInProgress] = useState<boolean>(false);
+  const [formInitData, setFormInitData] = useState<Object>({});
+  const [loading, setLoading] = useState<boolean>(true);
+  const [fetchError, setFetchError] = useState<Object>({});
+
+  const handleSubmit = async (): Promise<any> => {
+    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<Response> => {
+    console.log(`Fetching notification info for manifest id ${manifestId}`);
+    return httpClient(`/api/notification?manifestId=${manifestId}`);
+  };
+
+  // const deleteK8Resources = async (): Promise<any> => {
+  //   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<Object>({});
+
+  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 (
+    <>
+      <MenuAppBar name="Notification" />
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          flexDirection: "column",
+          marginTop: "1vh",
+        }}
+      >
+        <div style={{ width: "50vw" }}>
+          <SchemaForm
+            name="notification"
+            onDataChange={(data, errors) => {
+              standaloneData.current = data;
+            }}
+            csrfToken={csrfToken}
+            manifestData={formInitData}
+          ></SchemaForm>
+        </div>
+        <Button
+          variant="outlined"
+          onClick={handleSubmit}
+          disabled={inProgress}
+          color="primary"
+        >
+          Submit
+        </Button>
+        <Snackbar
+          autoHideDuration={6000}
+          open={submitResponseStatus === "error"}
+          onClose={() => setSubmitResponseStatus("")}
+        >
+          <Alert severity="error">{JSON.stringify(submitResponse)}</Alert>
+        </Snackbar>
+      </div>
+    </>
+  );
+};
+
+export default withCookies(Notification);