diff --git a/.github/workflows/deploy_demo.yaml b/.github/workflows/deploy_demo.yaml index 4131578..1b93ba2 100644 --- 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 index 8b9e88d..eeae322 100644 --- 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 index 48e152a..4dab310 100644 --- 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,7 +67,7 @@ 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", {}, [ @@ -106,13 +75,21 @@ function viewTitle({ title, refreshing, countdown, autoRefresh, currentPage }) { [ 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,7 +166,7 @@ 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 }); @@ -197,6 +174,8 @@ function update(state, msg, enqueue) { } } 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 index d203da9..a5aba64 100644 --- 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 }; })();