Add basic uptime visualisation (wip)

Author: mcbloch

.gitignore

@@ -35,3 +35,5 @@ npm-debug.log
 .idea/
 *.iml
 /tmp/
+
+*.swp

assets/css/app.scss

@@ -118,3 +118,10 @@
   0% { opacity: 1; }
   100% { opacity: 0; }
 }
+
+.loading-container {
+  margin: 20px;
+  width: 100px;
+  height: 100px;
+  position: relative;
+}

assets/js/app.js

@@ -1,6 +1,6 @@
 // We import the CSS which is extracted to its own file by esbuild.
 // Remove this line if you add a your own CSS build pipeline (e.g postcss).
-import "../css/app.scss"
+import "../css/app.scss";
 
 // If you want to use Phoenix channels, run `mix help phx.gen.channel`
 // to get started and then uncomment the line below.
@@ -20,26 +20,68 @@ import "../css/app.scss"
 //
 
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
-import "phoenix_html"
+import "phoenix_html";
 // Establish Phoenix Socket and LiveView configuration.
-import {Socket} from "phoenix"
-import {LiveSocket} from "phoenix_live_view"
-import topbar from "../vendor/topbar"
+import { Socket } from "phoenix";
+import { LiveSocket } from "phoenix_live_view";
+import topbar from "../vendor/topbar";
+import ProgressBar from "progressbar.js";
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let csrfToken = document
+  .querySelector("meta[name='csrf-token']")
+  .getAttribute("content");
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: { _csrf_token: csrfToken },
+});
 
 // Show progress bar on live navigation and form submits
-topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
-window.addEventListener("phx:page-loading-start", info => topbar.show())
-window.addEventListener("phx:page-loading-stop", info => topbar.hide())
+topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
+window.addEventListener("phx:page-loading-start", (info) => topbar.show());
+window.addEventListener("phx:page-loading-stop", (info) => topbar.hide());
 
 // connect if there are any LiveViews on the page
-liveSocket.connect()
+liveSocket.connect();
 
 // expose liveSocket on window for web console debug logs and latency simulation:
 // >> liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
-window.liveSocket = liveSocket
+window.liveSocket = liveSocket;
 
+// progressbar.js@1.0.0 version is used
+// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
+
+window.loadStatusProgressBar = function(divId) {
+  console.log(`Loading bar for id ${divId}`);
+  let bar = new ProgressBar.Circle(`#${divId}`, {
+    color: "#aaa",
+    // This has to be the same size as the maximum width to
+    // prevent clipping
+    strokeWidth: 4,
+    trailWidth: 1,
+    easing: "easeInOut",
+    duration: 1400,
+    text: {
+      autoStyleContainer: false,
+    },
+    from: { color: "#aaa", width: 1 },
+    to: { color: "#5cb571", width: 4 }, // #333
+
+    // Set default step function for all animate calls
+    step: function (state, circle) {
+      circle.path.setAttribute("stroke", state.color);
+      circle.path.setAttribute("stroke-width", state.width);
+
+      var value = Math.round(circle.value() * 100);
+      if (value === 0) {
+        circle.setText("");
+      } else {
+        circle.setText(value);
+      }
+    },
+  });
+  bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
+  bar.text.style.fontSize = "2rem";
+
+  bar.animate(1.0); // Number from 0.0 to 1.0
+}

assets/package-lock.json

@@ -8,6 +8,7 @@
     "font-awesome": "^4.7.0",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
-    "phoenix_live_view": "file:../deps/phoenix_live_view"
+    "phoenix_live_view": "file:../deps/phoenix_live_view",
+    "progressbar.js": "^1.1.0"
   }
 }

assets/package.json

@@ -6,6 +6,7 @@
     <meta name="csrf-token" content={csrf_token_value()}>
     <%= live_title_tag assigns[:page_title] || "Zout", suffix: " · Phoenix Framework" %>
     <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
+    <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
     <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
   </head>
   <body>

lib/zout_web/templates/layout/root.html.heex

@@ -5,6 +5,7 @@
   <tr>
     <th>Project</th>
     <th>Status</th>
+    <th>Uptime</th>
   </tr>
   </thead>
   <tbody>
@@ -14,7 +15,13 @@
         <td>
           <%= render_status(downtime) %>
         </td>
+        <td><div class="loading-container" id={"loading-container-#{ project.id }"}></div></td>
       </tr>
+      <script>
+        window.addEventListener("load",function(event) {
+          loadStatusProgressBar("loading-container-<%= project.id %>");
+        });
+      </script>
     <% end %>
   </tbody>
 </table>