Remove logs from menu and add auto refresh toggle

ambarltd · Mar 22, 2024 · b937958 · b937958
1 parent 2c1134f
commit b937958
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 65 deletions.
diff --git a/.github/workflows/deploy_demo.yaml b/.github/workflows/deploy_demo.yaml
@@ -67,8 +67,6 @@ jobs:
           --tag $(echo '${{ secrets.GH_ACTION_SECRET }}' | base64 --decode | jq .github_action.frontend_ecr_repository_url -r):LATEST 
           --file Dockerfile .
           --build-arg="ARG_BE_DOMAIN=$(echo '${{ secrets.GH_ACTION_SECRET }}' | base64 --decode | jq .domains.backend_domain_name -r)"
-          --build-arg="ARG_BEL_DOMAIN=$(echo '${{ secrets.GH_ACTION_SECRET }}' | base64 --decode | jq .domains.backend_logs_domain_name -r)"
-          --build-arg="ARG_FEL_DOMAIN=$(echo '${{ secrets.GH_ACTION_SECRET }}' | base64 --decode | jq .domains.frontend_logs_domain_name -r)"
           --build-arg="ARG_REPO_BASE_URL=${{ github.server_url }}/${{ github.repository }}"
 
       - name: Push Frontend Image

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -7,12 +7,6 @@ RUN mkdir -p /usr/share/nginx/html/domains
 ARG ARG_BE_DOMAIN
 RUN echo $ARG_BE_DOMAIN > /usr/share/nginx/html/domains/be-domain.txt
 
-ARG ARG_BEL_DOMAIN
-RUN echo $ARG_BEL_DOMAIN > /usr/share/nginx/html/domains/bel-domain.txt
-
-ARG ARG_FEL_DOMAIN
-RUN echo $ARG_FEL_DOMAIN > /usr/share/nginx/html/domains/fel-domain.txt
-
 ARG ARG_REPO_BASE_URL
 RUN echo $ARG_REPO_BASE_URL > /usr/share/nginx/html/domains/repo-base-url.txt
 

diff --git a/frontend/static/script.js b/frontend/static/script.js
@@ -1,5 +1,5 @@
 window.Ambar = (function() {
-const { h, empty, text } = UI;
+const { h, text } = UI;
 const pageSize = 10;
 const maxCountdown = 5;
 
@@ -33,46 +33,15 @@ async function sidebar(active, nav) {
               text("Shipping Application")
             ])
           ]),
-
-          h("li", {}, [
-            h("a", { "href": state.backendLogs, "class": "nav-link link-dark" }, [
-              h("i", { "class": "bi bi-file-earmark-text-fill me-2" }, []),
-              text("Backend logs")
-            ])
-          ]),
-
-          h("li", {}, [
-            h("a", { "href": state.frontendLogs, "class": "nav-link link-dark" }, [
-              h("i", { "class": "bi bi-file-earmark-text me-2" }, []),
-              text("Frontend logs")
-            ])
-          ]),
         ]),
       ]
     }
 
-    const initialState = {
-      backendLogs : null,
-      frontendLogs : null
-    }
-
     function update(state, msg) {
-      if (msg.setBackendLogs) {
-        state.backendLogs = msg.setBackendLogs;
-      }
-      if (msg.setFrontendLogs) {
-        state.frontendLogs = msg.setFrontendLogs;
-      }
-
       return state;
     }
 
-    let bar = UI.init(nav, {}, update, view);
-
-    let bel_domain = await getDomain('/domains/bel-domain.txt');
-    bar.enqueue({ setBackendLogs : `http://${bel_domain}` })
-    let fel_domain = await getDomain('/domains/fel-domain.txt');
-    bar.enqueue({ setFrontendLogs : `http://${fel_domain}` })
+    UI.init(nav, {}, update, view);
 }
 
 async function getDomain(file) {
@@ -98,21 +67,29 @@ async function fetchEvents(url) {
   return [];
 }
 
-function viewTitle({ title, refreshing, countdown, autoRefresh, currentPage }) {
+function viewTitle({ title, refreshing, countdown, autoRefresh, autoRefreshOn, currentPage }) {
   let r = h("div", { "class" : "d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom" }, [
     h("h3", {}, [text(title)]),
     h("span", {}, [
       h("div", { "class" : "btn-group me-2" },
         [ h("button", { class : "btn btn-sm btn-outline-secondary", onClick: { refresh: true } }, [
           refreshing
             ? h("div", { class:"spinner-border spinner-border-sm", role: "status" }, [])
-            : autoRefresh
+            : (autoRefresh && autoRefreshOn)
             ? text(`Refresh (${countdown})`)
             : text(`Refresh`)
           ])
-          , autoRefresh ? empty() : h("button", { class : "btn btn-sm btn-outline-secondary", onClick: { prevPage: true } }, [text("Newer")])
-          , autoRefresh ? empty() : h("button", { class : "btn btn-sm btn-outline-secondary", onClick: { nextPage: true } }, [text("Older")])
-        ])
+        ].concat(
+          autoRefresh
+          ? [ h("button", {
+              class : `btn btn-sm btn-outline-primary ${autoRefreshOn ? "active" : ""}`,
+              onClick : { setAutoRefreshOn: true, value: !autoRefreshOn } },
+              [ text("Auto refresh") ]
+            ) ]
+          : [ h("button", { class : "btn btn-sm btn-outline-secondary", onClick: { prevPage: true } }, [text("Newer")]),
+              h("button", { class : "btn btn-sm btn-outline-secondary", onClick: { nextPage: true } }, [text("Older")]),
+            ]
+        ))
     ])
   ]);
   return r;
@@ -145,9 +122,9 @@ function viewNoResults(title) {
   ]);
 }
 
-function view({ title, refreshing, countdown, currentPage, events, autoRefresh}) {
+function view({ title, refreshing, countdown, currentPage, events, autoRefresh, autoRefreshOn }) {
   return events.length == 0 ? [viewNoResults(title)] : [
-    viewTitle({ title, refreshing, countdown, autoRefresh, currentPage }),
+    viewTitle({ title, refreshing, countdown, autoRefresh, autoRefreshOn, currentPage }),
     viewTable(getPage(events, currentPage)),
   ]
 }
@@ -189,14 +166,16 @@ function update(state, msg, enqueue) {
       state.refreshing = false;
       state.currentPage = 0;
   } else if (msg.countdownTick) {
-    if (!state.refreshing) {
+    if (!state.refreshing && state.autoRefreshOn) {
       state.countdown = Math.max(0, state.countdown - 1);
       if (state.countdown == 0) {
         enqueue({ refresh: true });
       }
     }
   } else if (msg.setUrl) {
     state.url = msg.setUrl;
+  } else if (msg.setAutoRefreshOn) {
+    state.autoRefreshOn = msg.value;
   }
   return state;
 }
@@ -206,6 +185,7 @@ async function createInteractiveTable(title, root, url_suffix, autoRefresh) {
       title,
       url: null,
       autoRefresh,
+      autoRefreshOn: true,
       countdown: maxCountdown,
       currentPage: 0,
       events : [],

diff --git a/frontend/static/ui.js b/frontend/static/ui.js
@@ -5,7 +5,6 @@
 //      , children : [Spec]
 //      }
 //    | { textContent : string }
-//    | { empty : true }      -- an element that doesn't render anything
 //
 // ElementDiff
 //    = Replace Element
@@ -84,13 +83,7 @@ function diffOne(l, r) {
   return { modify: { removeAttr, setAttr, removeListeners, addListeners, children } };
 }
 
-function removeEmpty(els) {
-  return Array.from(els).filter(e => !e.empty);
-}
-
-function diffList(ls_raw, rs_raw) {
-  let ls = removeEmpty(ls_raw);
-  let rs = removeEmpty(rs_raw);
+function diffList(ls, rs) {
   let len = Math.max(ls.length, rs.length);
   let diffs = [];
   for (let i = 0; i < len; i++) {
@@ -121,8 +114,7 @@ function create(enqueue, spec) {
       : el.setAttribute(attr, value);
   }
 
-  let children = removeEmpty(spec.children);
-  for (let i in children) {
+  for (let i in spec.children) {
     const childSpec = spec.children[i];
     const child = create(enqueue, childSpec);
     el.appendChild(child);
@@ -178,6 +170,9 @@ function apply(el, enqueue, childrenDiff) {
 
 // Create an HTML element
 function h(tag, attributes, children) {
+  if (children.includes(undefined)) {
+    throw new Error("Undefined children in: ", JSON.stringify(children));
+  }
   return { tag, attributes, children };
 }
 
@@ -186,11 +181,6 @@ function text(textContent) {
   return { textContent }
 }
 
-// Create an elements that will be disregarded.
-function empty() {
-  return { empty : true }
-}
-
 // Start managing the contents of an HTML node.
 function init(root, initialState, update, view) {
   let state = initialState; // client application state
@@ -233,5 +223,5 @@ function init(root, initialState, update, view) {
   return { enqueue };
 }
 
-return { init, h, empty, text };
+return { init, h, text };
 })();