Adds frontend support for notifications (#334)

petethepig · web-flow · commit bdaaaf68a235 · 2021-08-12T18:06:28.000-07:00
* adds frontend support for notifications

* js lint fixes
diff --git a/pkg/server/handler.go b/pkg/server/handler.go
@@ -386,9 +386,15 @@ func (ctrl *Controller) renderIndexPage(w http.ResponseWriter, _ *http.Request)
 		"LatestVersionInfo": updates.LatestVersionJSON(),
 		"ExtraMetadata":     extraMetadataStr,
 		"BaseURL":           ctrl.config.BaseURL,
+		"NotificationText":  ctrl.NotificationText(),
 	})
 }
 
+func (ctrl *Controller) NotificationText() string {
+	// TODO: implement backend support for alert text
+	return ""
+}
+
 func mustExecute(t *template.Template, w io.Writer, v interface{}) {
 	if err := t.Execute(w, v); err != nil {
 		panic(err)
diff --git a/webapp/javascript/components/Notifications.jsx b/webapp/javascript/components/Notifications.jsx
@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
+import "react-dom";
+
+import { withShortcut } from "react-keybind";
+import Modal from "react-modal";
+import clsx from "clsx";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+
+function Notifications(props) {
+  const { notificationText } = window;
+
+  const [hidden, setHidden] = useState(notificationText === "");
+
+  return (
+    <div className={clsx("notifications", { hidden })}>
+      <div className="notifications-container">
+        <div className="notification-icon">
+          <FontAwesomeIcon icon={faExclamationTriangle} />
+        </div>
+        <div className="notification-body">{notificationText}</div>
+        <div
+          className="notification-close-btn"
+          onClick={function () {
+            setHidden(true);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default connect((x) => x, {})(Notifications);
diff --git a/webapp/javascript/index.jsx b/webapp/javascript/index.jsx
@@ -11,6 +11,7 @@ import PyroscopeApp from "./components/PyroscopeApp";
 import ComparisonApp from "./components/ComparisonApp";
 import ComparisonDiffApp from "./components/ComparisonDiffApp";
 import Sidebar from "./components/Sidebar";
+import Notifications from "./components/Notifications";
 
 import history from "./util/history";
 
@@ -39,6 +40,7 @@ ReactDOM.render(
             <ComparisonDiffApp />
           </Route>
         </Switch>
+        <Notifications />
       </ShortcutProvider>
     </Router>
     {showFps ? <FPSStats left="auto" top="auto" bottom={2} right={2} /> : ""}
diff --git a/webapp/sass/profile.scss b/webapp/sass/profile.scss
@@ -679,3 +679,42 @@ $sidebar-tooltip-color: #777;
 .main-wrapper {
   margin-left: $sidebar-size;
 }
+
+.notifications {
+  position: fixed;
+  top: 58px;
+  right: 15px;
+
+  &.hidden {
+    display: none;
+  }
+
+  .notifications-container {
+    display: flex;
+    overflow: hidden;
+    background-color: rgb(78, 81, 90);
+    border-radius: 4px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+
+    .notification-icon {
+      padding: 15px;
+      background-color: #c43028bb;
+    }
+
+    .notification-body {
+      padding: 15px;
+      max-width: 30vw;
+    }
+    .notification-close-btn {
+      text-align: center;
+      font-weight: bold;
+      cursor: pointer;
+      background-color: rgba(0,0,0,0.1);
+      padding: 15px;
+      &::before {
+        content: '×';
+        display: inline;
+      }
+    }
+  }
+}
diff --git a/webapp/templates/index.html b/webapp/templates/index.html
@@ -17,6 +17,7 @@
 <body>
   <div id="root"></div>
   <script type="text/javascript">window.initialState = {{ .InitialState }};</script>
+  <script type="text/javascript">window.notificationText = "{{ .NotificationText }}";</script>
   <script type="text/javascript">window.buildInfo = {{ .BuildInfo }};</script>
   <script type="text/javascript">window.latestVersionInfo = {{ .LatestVersionInfo }};</script>
   <script src="/assets/app.<%= webpack.hash %>.js" type="text/javascript"></script>
