Implement notifications framework

notifications.yaml

@@ -0,0 +1,6 @@
+customEndpoints:
+  - name: "Package updates notifications"
+    isBanner: false
+    correlationId: "dappmanager-update-pkg"
+    description: "This endpoint notifies users about available package updates."
+    enabled: true

packages/admin-ui/server-mock/index.ts

@@ -49,7 +49,6 @@ startHttpApi({
     env: () => {},
     fileDownload: () => {},
     globalEnvs: () => {},
-    notificationSend: () => {},
     packageManifest: () => {},
     metrics: () => {},
     publicPackagesData: () => {},

packages/admin-ui/src/__mock-backend__/index.ts

@@ -183,10 +183,6 @@ export const otherCalls: Omit<Routes, keyof typeof namedSpacedCalls> = {
   newFeatureStatusSet: async () => {},
   poweroffHost: async () => {},
   rebootHost: async () => {},
-  rebootHostIsRequiredGet: async () => ({
-    rebootRequired: true,
-    pkgs: "docker"
-  }),
   setStaticIp: async () => {},
 
   systemInfoGet: async () => ({
@@ -385,8 +381,19 @@ export const otherCalls: Omit<Routes, keyof typeof namedSpacedCalls> = {
     dockerHostVersion: "20.10.7",
     dockerLatestVersion: "20.10.8"
   }),
-  getIsConnectedToInternet: async () => false,
-  getCoreVersion: async () => "0.2.92"
+  getCoreVersion: async () => "0.2.92",
+  notificationsGetAllEndpoints: async () => {
+    return { "geth.dnp.dappnode.eth": { endpoints: [], customEndpoints: [], isCore: false } };
+  },
+  notificationsGetUnseenCount: async () => 2,
+  notificationsSetAllSeen: async () => {},
+  notificationSetSeenByCorrelationID: async () => {},
+  notificationsUpdateEndpoints: async () => {},
+  notificationsGetAll: async () => [],
+  notificationsGetBanner: async () => [],
+  notificationsApplyPreviousEndpoints: async () => {
+    return { endpoints: [], customEndpoints: [] };
+  }
 };
 
 export const calls: Routes = {

packages/admin-ui/src/__mock-backend__/wifi.ts

@@ -34,7 +34,9 @@ export const wifi: Pick<Routes, "wifiCredentialsGet" | "wifiReportGet"> = {
       report: {
         lastLog: "[Error] any wifi error".replace(/\[.*?\]/g, ""),
         exitCode: 57
-      }
+      },
+      isDefaultPassphrase: false,
+      isRunning: false
     };
   }
 };

packages/admin-ui/src/api/initialCalls.ts

@@ -2,24 +2,12 @@
 import { store } from "../store";
 import { fetchDnpInstalled } from "services/dnpInstalled/actions";
 import { fetchCoreUpdateData } from "services/coreUpdate/actions";
-import {
-  fetchSystemInfo,
-  fetchVolumes,
-  fetchPasswordIsSecure,
-  fetchWifiCredentials,
-  fetchRebootIsRequired,
-  fetchShouldShowSmooth,
-  fetchIsConnectedToInternet
-} from "services/dappnodeStatus/actions";
+import { fetchSystemInfo, fetchVolumes, fetchShouldShowSmooth } from "services/dappnodeStatus/actions";
 
 export function initialCallsOnOpen() {
   store.dispatch<any>(fetchDnpInstalled());
   store.dispatch<any>(fetchCoreUpdateData());
   store.dispatch<any>(fetchSystemInfo());
   store.dispatch<any>(fetchVolumes());
-  store.dispatch<any>(fetchPasswordIsSecure());
-  store.dispatch<any>(fetchWifiCredentials());
-  store.dispatch<any>(fetchRebootIsRequired());
   store.dispatch<any>(fetchShouldShowSmooth());
-  store.dispatch<any>(fetchIsConnectedToInternet());
 }

packages/admin-ui/src/api/subscriptions.ts

@@ -1,6 +1,5 @@
 import { store } from "../store";
 // Actions to push received content
-import { pushNotification } from "services/notifications/actions";
 import { clearIsInstallingLog, updateIsInstallingLog } from "services/isInstallingLogs/actions";
 import { updateVolumes, setSystemInfo } from "services/dappnodeStatus/actions";
 import { setDnpInstalled } from "services/dnpInstalled/actions";
@@ -27,10 +26,6 @@ export function mapSubscriptionsToRedux(subscriptions: Subscriptions): void {
     else store.dispatch(updateIsInstallingLog({ id, dnpName, log }));
   });
 
-  subscriptions.pushNotification.on((notification) => {
-    store.dispatch(pushNotification(notification));
-  });
-
   subscriptions.systemInfo.on((systemInfo) => {
     store.dispatch(setSystemInfo(systemInfo));
   });

packages/admin-ui/src/components/NotificationsMain.tsx

@@ -1,116 +1,138 @@
-import React from "react";
-import { useSelector } from "react-redux";
+import React, { useEffect, useMemo, useState } from "react";
 import { NavLink } from "react-router-dom";
-import { useApi } from "api";
 import RenderMarkdown from "components/RenderMarkdown";
-// Selectors
-import { getCoreUpdateAvailable, getIsCoreUpdateTypePatch, getUpdatingCore } from "services/coreUpdate/selectors";
-import {
-  getWifiStatus,
-  getPasswordIsSecure,
-  getRebootIsRequired,
-  getIsConnectedToInternet
-} from "services/dappnodeStatus/selectors";
-import { pathName as systemPathName, subPaths as systemSubPaths } from "pages/system/data";
-import Button from "components/Button";
-// Style
+import Button, { ButtonVariant } from "components/Button";
+import { api, useApi } from "api";
+import { Notification, Priority } from "@dappnode/types";
 import "./notificationsMain.scss";
-import { autoUpdateIds } from "params";
-import { AlertDismissible } from "./AlertDismissible";
+import { MdClose } from "react-icons/md";
+import { Accordion } from "react-bootstrap";
+import { dappmanagerAliases, externalUrlProps } from "params";
 
 /**
- * Aggregate notification and display logic
+ * Displays banner notifications among all tabs
  */
 export default function NotificationsView() {
-  const coreUpdateAvailable = useSelector(getCoreUpdateAvailable);
-  const updatingCore = useSelector(getUpdatingCore);
-  const isCoreUpdateTypePatch = useSelector(getIsCoreUpdateTypePatch);
-  const wifiStatus = useSelector(getWifiStatus);
-  const passwordIsSecure = useSelector(getPasswordIsSecure);
-  const rebootHostIsRequired = useSelector(getRebootIsRequired);
-  const isConnectedToInternet = useSelector(getIsConnectedToInternet);
-
-  // Check is auto updates are enabled for the core
-  const autoUpdateSettingsReq = useApi.autoUpdateDataGet();
-  const isCoreAutoUpdateActive = ((autoUpdateSettingsReq.data?.settings || {})[autoUpdateIds.SYSTEM_PACKAGES] || {})
-    .enabled;
-
-  const notifications = [
-    /**
-     * [HOST-CONNECTED-TO-INTERNET]
-     * Tell the user if is connected to internet
-     */
-    {
-      id: "connectedToInternet",
-      linkText: "Navigate",
-      linkPath: "support/auto-diagnose",
-      body: `**Dappnode host is not connected to internet.** Click **Navigate** to autodiagnose and check the dappnode health.`,
-      active: isConnectedToInternet === false
-    },
-    /**
-     * [HOST-REBOOT]
-     * Tell the user to reboot the host
-     */
-    {
-      id: "hostReboot",
-      linkText: "Reboot",
-      linkPath: systemPathName + "/" + systemSubPaths.power,
-      body: `**Dappnode host reboot required.** Click **Reboot** to reboot the host and apply the changes. The following packages will be updated: ${rebootHostIsRequired?.pkgs}`,
-      active: rebootHostIsRequired?.rebootRequired
-    },
-    /**
-     * [SYSTEM-UPDATE]
-     * Tell the user to update the core DNPs
-     */
-    {
-      id: "systemUpdate",
-      linkText: "Update",
-      linkPath: systemPathName + "/" + systemSubPaths.update,
-      body: "**Dappnode system update available.** Click **Update** to review and approve it",
-      active:
-        coreUpdateAvailable &&
-        !updatingCore &&
-        // Show if NOT patch, or if patch is must not be active
-        (!isCoreUpdateTypePatch || !isCoreAutoUpdateActive)
-    },
-    /**
-     * [WIFI-PASSWORD]
-     * Tell the user to change the wifi credentials
-     */
-    {
-      id: "wifiCredentials",
-      linkText: "Change",
-      linkPath: systemPathName + "/" + systemSubPaths.security,
-      body: "**Change the Dappnode WiFi credentials**, they are insecure default values.",
-      active: wifiStatus?.isDefaultPassphrase && wifiStatus?.isRunning
-    },
-    /**
-     * [HOST-USER-PASSWORD]
-     * Tell the user to change the host's "dappnode" user password
-     */
-    {
-      id: "hostPasswordInsecure",
-      linkText: "Change",
-      linkPath: systemPathName + "/" + systemSubPaths.security,
-      body: "**Change the host 'dappnode' user password**, it's an insecure default.",
-      active: passwordIsSecure === false
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  const numOfBannersShown = 3; // Number of banners that will be shown in the UI
+
+  // gets the timestamp of one month ago in UNIX format
+  const oneMonthAgoTimestamp = useMemo(() => {
+    const now = new Date();
+    now.setMonth(now.getMonth() - 1);
+    return Math.floor(now.getTime() / 1000); // Convert to seconds
+  }, []);
+
+  const notificationsCall = useApi.notificationsGetBanner(oneMonthAgoTimestamp);
+
+  useEffect(() => {
+    if (notificationsCall.data) {
+      setNotifications(filterNotifications(notificationsCall.data));
     }
-  ];
+  }, [notificationsCall.data]);
+
+  /**
+   * filters notifications:
+   * 1. Filters out notifications that have errors
+   * 2. Filters out duplicate notifications by correlationId, keeping the most recent one
+   * 3. Filters out resolved notifications
+   * 4. Filters out seen notifications
+   * 5. Sorts notifications by priority
+   */
+
+  function filterNotifications(notifications: Notification[]): Notification[] {
+    const priorityOrder = [Priority.critical, Priority.high, Priority.medium, Priority.low];
+
+    const map = new Map<string, Notification>();
+
+    notifications
+      .filter((n) => !n.errors) // Filter out notifications with errors
+      .forEach((notification) => {
+        const existing = map.get(notification.correlationId);
+
+        if (!existing || new Date(notification.timestamp) > new Date(existing.timestamp)) {
+          map.set(notification.correlationId, notification);
+        }
+      });
+
+    return Array.from(map.values())
+      .filter((n) => n.status === "triggered") // Filter out resolved notifications
+      .filter((n) => n.seen === false) // Filter out seen notifications
+      .sort((a, b) => priorityOrder.indexOf(a.priority) - priorityOrder.indexOf(b.priority));
+  }
 
   return (
-    <div>
-      {notifications
-        .filter(({ active }) => active)
-        .map(({ id, linkText, linkPath, body }) => (
-          <AlertDismissible key={id} className="main-notification" variant="warning">
-            <RenderMarkdown source={body} />
-            {linkText && linkPath ? (
-              <NavLink to={linkPath}>
-                <Button variant="warning">{linkText}</Button>
-              </NavLink>
-            ) : null}
-          </AlertDismissible>
+    notifications &&
+    notifications.length > 0 && (
+      <div className="banner-notifications-col">
+        {notifications.slice(0, numOfBannersShown).map((notification) => (
+          <CollapsableBannerNotification
+            notification={notification}
+            key={notification.id}
+            onClose={() => setNotifications((prev) => prev.filter((n) => n.id !== notification.id))}
+          />
         ))}
-    </div>
+      </div>
+    )
+  );
+}
+
+const priorityBtnVariants: Record<Priority, ButtonVariant> = {
+  [Priority.low]: "dappnode",
+  [Priority.medium]: "dappnode",
+  [Priority.high]: "warning",
+  [Priority.critical]: "danger"
+};
+
+export function CollapsableBannerNotification({
+  notification,
+  onClose
+}: {
+  notification: Notification;
+  onClose: () => void;
+}) {
+  const [isOpen, setIsOpen] = useState(notification.priority === Priority.critical);
+  const [hasClosed, setHasClosed] = useState(false);
+
+  const handleClose = () => {
+    api.notificationSetSeenByCorrelationID(notification.correlationId);
+    setHasClosed(true);
+    onClose();
+  };
+
+  const isExternalUrl =
+    notification.callToAction && !dappmanagerAliases.some((alias) => notification.callToAction!.url.includes(alias));
+
+  return (
+    !hasClosed && (
+      <Accordion defaultActiveKey={isOpen ? "0" : "1"}>
+        <Accordion.Toggle
+          as={"div"}
+          eventKey="0"
+          onClick={() => setIsOpen(!isOpen)}
+          className={`banner-card ${notification.priority}-priority`}
+        >
+          <div className="banner-header">
+            <h5>{notification.title}</h5>
+            <button className="close-btn" onClick={handleClose}>
+              <MdClose />
+            </button>
+          </div>
+          <Accordion.Collapse eventKey="0">
+            <div className="banner-body">
+              <RenderMarkdown source={notification.body} />
+              {notification.callToAction && (
+                <NavLink to={notification.callToAction.url} {...(isExternalUrl ? externalUrlProps : {})}>
+                  <Button variant={priorityBtnVariants[notification.priority]}>
+                    <div>{notification.callToAction.title}</div>
+                  </Button>
+                </NavLink>
+              )}
+            </div>
+          </Accordion.Collapse>
+        </Accordion.Toggle>
+      </Accordion>
+    )
   );
 }

packages/admin-ui/src/components/Searchbar.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { BiSearch } from "react-icons/bi";
+
+import "./searchbar.scss";
+
+interface SearchbarProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  classname?: string;
+  placeholder?: string;
+}
+
+export function Searchbar({ value, onChange, classname, placeholder = "Search..." }: SearchbarProps) {
+  return (
+    <div className="searchbar-wrapper">
+      <BiSearch className="search-icon" />
+
+      <input
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        className={`searchbar ${classname}`}
+      />
+    </div>
+  );
+}