✨ Complete alerts system

nest_frontend/components/interactive/BoxAlerts.js

@@ -0,0 +1,15 @@
+import React from "react"
+import BoxFullScrollable from "../base/BoxFullScrollable"
+import SummaryAlert from "./SummaryAlert"
+import useStrings from "../../hooks/useStrings"
+
+
+export default function BoxAlerts({ alerts, destroy, running, ...props }) {
+    const strings = useStrings()
+
+    return (
+        <BoxFullScrollable header={strings.alertTitle} {...props}>
+            {alerts.map(alert => <SummaryAlert alert={alert} destroy={() => destroy(alert["id"])} running={running}/>)}
+        </BoxFullScrollable>
+    )
+}

nest_frontend/components/interactive/SummaryAlert.js

@@ -0,0 +1,51 @@
+import React, { useContext } from "react"
+import { faBell, faShare, faStar, faTrash, faUser } from "@fortawesome/free-solid-svg-icons"
+import SummaryBase from "../base/summary/SummaryBase"
+import SummaryLeft from "../base/summary/SummaryLeft"
+import SummaryLabels from "../base/summary/SummaryLabels"
+import SummaryButton from "../base/summary/SummaryButton"
+import SummaryRight from "../base/summary/SummaryRight"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import ContextUser from "../../contexts/ContextUser"
+import useStrings from "../../hooks/useStrings"
+
+
+/**
+ * A {@link SummaryBase} representing a N.E.S.T. alert.
+ *
+ * @param alert - The alert to represent.
+ * @param destroy - Async function with no parameters to destroy the alert from the frontend.
+ * @param running - Whether another request is already running.
+ * @param props - Additional props to pass to the summary.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function SummaryAlert({ alert, destroy, running, ...props }) {
+    const strings = useStrings()
+
+    return (
+        <SummaryBase {...props}>
+            <SummaryLeft
+                icon={faBell}
+                title={alert.name}
+            />
+            <SummaryLabels
+                upperLabel={strings.alertLimit}
+                upperValue={alert.limit}
+                lowerLabel={strings.alertWindow}
+                lowerValue={alert.window_size}
+            />
+            {destroy ?
+             <SummaryButton
+                 color={"Red"}
+                 icon={faTrash}
+                 onClick={destroy}
+                 disabled={running}
+             >
+                 {strings.delete}
+             </SummaryButton>
+            : null}
+            <SummaryRight/>
+        </SummaryBase>
+    )
+}

nest_frontend/routes/PageRepositoryAlerts.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useCallback, useContext } from "react"
 import BoxFull from "../components/base/BoxFull"
 import ContextLanguage from "../contexts/ContextLanguage"
 import BoxHeader from "../components/base/BoxHeader"
@@ -7,12 +7,49 @@ import { faBell, faPlus } from "@fortawesome/free-solid-svg-icons"
 import PageWithHeader from "../components/base/layout/PageWithHeader"
 import ButtonHeader from "../components/base/ButtonHeader"
 import makeIcon from "../utils/makeIcon"
+import useBackendViewset from "../hooks/useBackendViewset"
+import BoxAlerts from "../components/interactive/BoxAlerts"
 
 
 export default function PageRepositoryAlerts() {
     const { strings } = useContext(ContextLanguage)
     const { id } = useParams()
     const history = useHistory()
+    const {resources, running: repoRunning, listResources} = useBackendViewset(
+        `/api/v1/repositories/${id}/alerts/`,
+        "id",
+        {
+            list: true,
+            create: false,
+            retrieve: false,
+            edit: false,
+            destroy: false,
+            command: false,
+            action: false,
+        }
+    )
+    const {destroyResource, running: alertRunning} = useBackendViewset(
+        `/api/v1/alert/`,
+        "id",
+        {
+            list: false,
+            create: false,
+            retrieve: false,
+            edit: false,
+            destroy: true,
+            command: false,
+            action: false,
+        }
+    )
+
+    // FIXME: A bit of an hack but it works for small amounts of repositories
+    const destroyAndRefresh = useCallback(
+        async (id) => {
+            await destroyResource(id)
+            await listResources()
+        },
+        [destroyResource, listResources]
+    )
 
     return (
         <PageWithHeader
@@ -31,9 +68,7 @@ export default function PageRepositoryAlerts() {
                 </ButtonHeader>
             }
         >
-            <BoxFull header={strings.alertTitle}>
-                {strings.notImplemented}
-            </BoxFull>
+            <BoxAlerts alerts={resources} destroy={destroyAndRefresh} running={repoRunning || alertRunning}/>
         </PageWithHeader>
     )
 }