From 43a969b7bdbefde61a2e07f70d255744436b7636 Mon Sep 17 00:00:00 2001 From: joan Date: Tue, 10 May 2022 15:02:05 -0700 Subject: [PATCH 1/6] fix bulk delete #267, updates to diagram management #58 --- source/html/index.html | 15 +++ source/html/js/app/ui/diagram_menu.js | 4 +- source/html/js/app/ui/diagrams.js | 178 ++++++++++++++++--------- source/html/js/app/ui/settings_menu.js | 19 +-- source/html/js/app/ui/tile_view.js | 13 +- 5 files changed, 152 insertions(+), 77 deletions(-) diff --git a/source/html/index.html b/source/html/index.html index 0e90249b..db13c626 100644 --- a/source/html/index.html +++ b/source/html/index.html @@ -268,6 +268,8 @@
+
+
CloudWatch Event D
+ + +
+
+
Click on a hidden diagram to display
+ +
+
+
+
+
+
+ \ No newline at end of file diff --git a/source/html/js/app/ui/diagram_menu.js b/source/html/js/app/ui/diagram_menu.js index 07f4fd72..97ed43bd 100644 --- a/source/html/js/app/ui/diagram_menu.js +++ b/source/html/js/app/ui/diagram_menu.js @@ -295,9 +295,7 @@ $("#remove-diagram-button,#diagram_remove_diagram").on("click", function () { $("#diagram_hide_diagram").on("click", function () { let diagram = diagrams.shown(); if (diagram) { - diagrams.hide(diagram.name); - let message = `${diagram.name} hidden`; - alert.show(message); + diagrams.hide(diagram, true, true); } }); diff --git a/source/html/js/app/ui/diagrams.js b/source/html/js/app/ui/diagrams.js index 1b5d1d52..50b9123f 100644 --- a/source/html/js/app/ui/diagrams.js +++ b/source/html/js/app/ui/diagrams.js @@ -3,7 +3,7 @@ import * as settings from "../settings.js"; import * as diagram_factory from "./diagram_factory.js"; -import * as nav_alert from "./alert.js"; +import * as alert from "./alert.js"; var diagrams = {}; @@ -52,43 +52,37 @@ var add_diagram = function (name, view_id, save) { if (diagrams_shown > max_number_diagrams) { console.log("exceeded number of diagrams to show"); let diagram_to_hide = oldest_viewed_diagram(); - hide_diagram(diagram_to_hide.name, false); - window.localStorage.setItem("DIAGRAMS_SHOWN", diagrams_shown - 1); + hide_diagram(diagrams[diagram_to_hide.name], false, true); } }); return new_diagram; }; -var show_diagram = function (name, view_id) { - const new_diagram = diagram_factory.create(name, view_id); - diagrams[name] = new_diagram; - new_diagram.add_singleclick_callback(function (diagram, event) { - for (let callback of selection_callbacks) { - try { - callback(diagram, event); - } catch (error) { - console.log(error); - } - } - }); - return new_diagram; +// hides the tab of the diagram +var hide_diagram = function (diagram, show_tile = true, decrement) { + $("#" + diagram.tab_id).hide(); + if (decrement){ + let diagrams_shown = parseInt(window.localStorage.getItem("DIAGRAMS_SHOWN")); + window.localStorage.setItem("DIAGRAMS_SHOWN", diagrams_shown-1); + } + window.localStorage.setItem(diagram.name, 'HIDDEN'); + alert.show(`${diagram.name} hidden`); }; -var hide_diagram = function (name, show_tile = true) { - console.log(`hiding ${name}`); - const view_id = diagrams[name].view_id; - // remove page elements - diagrams[name].remove(); - // remove the lock settings - const key = `diagram_lock_${view_id}`; - settings.remove(key); - if (show_tile){ - $("#channel-tiles-tab").tab("show"); - } +var show_diagram = function (name) { let diagrams_shown = parseInt(window.localStorage.getItem("DIAGRAMS_SHOWN")); - window.localStorage.setItem("DIAGRAMS_SHOWN", diagrams_shown-1); - window.localStorage.removeItem(name); - window.localStorage.setItem(name, 'HIDDEN'); + let diagram = get_by_name(name); + $("#" + diagram.tab_id).show(); + window.localStorage.setItem(diagram.name, Date.now()); + window.localStorage.setItem("DIAGRAMS_SHOWN", diagrams_shown+=1); + settings.get("max-number-displayed-diagrams").then(function (max_number_diagrams) { + if (diagrams_shown > max_number_diagrams) { + console.log("exceeded number of diagrams to show"); + let diagram_to_hide = oldest_viewed_diagram(); + hide_diagram(diagrams[diagram_to_hide.name], false, true); + } + }); + }; var remove_diagram = function (name) { @@ -139,36 +133,25 @@ var load_diagrams = function () { if (!diagrams_shown) { // first load of the app, and no diagrams are being tracked yet localStorage.setItem('DIAGRAMS_SHOWN', 0); // load diagram names from the cloud on initialization - settings.get("diagrams").then(function (all_diagrams) { - settings.get("max-number-displayed-diagrams").then(function (max_number_diagrams) { - var diagrams_to_show = Math.min(max_number_diagrams, all_diagrams.length); - console.log( - "load user-defined diagrams: " + JSON.stringify(all_diagrams) - ); - if (Array.isArray(all_diagrams) && all_diagrams.length > 0) { - for (let i=0; i < diagrams_to_show; i++) { - console.log(`loading ${all_diagrams[i].name}`); - add_diagram(all_diagrams[i].name, all_diagrams[i].view_id, false); - } - for (let i=diagrams_to_show; i < all_diagrams.length; i++) { - localStorage.setItem(all_diagrams[i].name, 'HIDDEN'); - } - } else { - // no diagrams, create default View from previous Global View - console.log( - "no used-defined diagrams, creating default diagram" - ); - add_diagram("Default", "global", true); - } - }); - }); + settings.get("diagrams").then(function (diagrams) { + console.log("load user-defined diagrams: " + JSON.stringify(diagrams)); + if (Array.isArray(diagrams) && diagrams.length > 0) { + for (let diagram of diagrams) { + add_diagram(diagram.name, diagram.view_id, false); + } + } else { + // no diagrams, create default View from previous Global View + console.log("no used-defined diagrams, creating default diagram"); + add_diagram("Default", "global", true); + } + }); } else { // if there's already diagrams shown saved in local storage, // show those instead of the first MAX_NUM_DIAGRAMS console.log('restoring diagrams'); restore_diagrams(); - } + } resolve(); }); }; @@ -223,14 +206,30 @@ function get_displayed_diagrams() { return displayed_diagrams; } -async function restore_diagrams() { - const local_lodash = _; - let displayed_diagrams = get_displayed_diagrams(); - let all_diagrams = await settings.get("diagrams"); - for (let name of displayed_diagrams) { - let diagram = local_lodash.find(all_diagrams, { 'name': name }); - show_diagram(name, diagram.view_id); +function get_hidden_diagrams() { + let hidden_diagrams = [] + for (let [key,value] of Object.entries(localStorage)) { + if (key != "DIAGRAMS_SHOWN" && value == "HIDDEN"){ + hidden_diagrams.push({"hidden_diagram": key}); + } } + return hidden_diagrams; +} + +async function restore_diagrams() { + // zero out the number of diagrams shown and start the count over + localStorage.setItem('DIAGRAMS_SHOWN', 0); + let hidden_diagrams = get_hidden_diagrams(); + settings.get("diagrams").then(function (diagrams) { + for (let diagram of diagrams) { + let this_diagram = add_diagram(diagram.name, diagram.view_id, false); + if(_.find(hidden_diagrams, {'hidden_diagram': diagram.name})){ + hide_diagram(this_diagram, false, true); + } + } + }); + //show tiles tab after restoring + $("#channel-tiles-tab").tab("show"); } function oldest_viewed_diagram (){ @@ -251,7 +250,8 @@ const update_lock_visibility = () => { if (diagram) { // show the lock window.localStorage.setItem(diagram.name, Date.now()); - $("#diagram-lock-button").removeClass("d-none"); + $("#diagram-lock-button").removeClass("d-none"); + $("#diagram-list-button").removeClass("d-none"); } else { // hide the lock $("#diagram-lock-button").addClass("d-none"); @@ -313,7 +313,7 @@ const refresh_lock_compartment = () => { const width = diagramDiv.width(); // create const h_offset = 30; - const v_offset = 2; + const v_offset = 30; const style = `position: absolute; top: ${diagramPosition.top + v_offset }px; left: ${width - h_offset}px; z-index: 500; cursor: pointer;`; const buttonContent = `
lock_open
`; @@ -326,23 +326,72 @@ const refresh_lock_compartment = () => { diagram.lock(locked).then(() => { update_lock_state(); const message = locked ? "Diagram locked" : "Diagram unlocked"; - nav_alert.show(message); + alert.show(message); }); }); }); update_lock_visibility(); }; +const hidden_diagrams_tabulator = new Tabulator( + "#hidden_diagrams_content", + { + placeholder: "No hidden diagrams", + tooltips: true, + layout: "fitDataStretch", + selectable: true, + selectableRangeMode: "click", + columns: [ + { + title: "Hidden Diagram", + field: "hidden_diagram", + headerFilter: true, + cellClick: function (e, cell) { + let name = cell.getRow()._row.data.hidden_diagram; + // let this_diagram = add_diagram(name, _.snakeCase(name), false); + // this_diagram.show(); + show_diagram(name); + $("#hidden_diagrams").offcanvas("hide"); + } + } + ] + } +); + +const load_hidden_diagrams_list = () => { + const diagramListDiv = $("#diagram-list-button"); + // do this relative to the diagram div + const diagramDiv = $("#diagram"); + // get the location and size of the diagram div + const diagramPosition = diagramDiv.position(); + const width = diagramDiv.width(); + // create + const h_offset = 30; + const v_offset = 2; + const listStyle = `position: absolute; top: ${diagramPosition.top + v_offset}px; left: ${width - h_offset}px; z-index: 500; cursor: pointer;`; + const diagramListButtonContent = `
list
`; + diagramListDiv.replaceWith(diagramListButtonContent); + $("#diagram-list-button").click(() => { + console.log("button clicked"); + $("#hidden_diagrams_lg").empty(); + // populate div inside the offcanvas with list of hidden diagrams + let hidden_diagrams_list = get_hidden_diagrams(); + hidden_diagrams_tabulator.replaceData(hidden_diagrams_list); + $("#hidden_diagrams").offcanvas("show"); + }); +}; // detect window resize events window.addEventListener('resize', function () { // reposition absolute diagram elements if needed refresh_lock_compartment(); update_lock_state(); + load_hidden_diagrams_list(); }); // this is the initialization code for the diagrams component load_diagrams().then(() => { refresh_lock_compartment(); + load_hidden_diagrams_list(); $("#diagram-tab").on("shown.bs.tab", () => { update_lock_visibility(); update_lock_state(); @@ -366,4 +415,5 @@ export { have_any, add_selection_callback, hide_diagram as hide, + get_hidden_diagrams }; diff --git a/source/html/js/app/ui/settings_menu.js b/source/html/js/app/ui/settings_menu.js index a25d7033..c3961fca 100644 --- a/source/html/js/app/ui/settings_menu.js +++ b/source/html/js/app/ui/settings_menu.js @@ -389,9 +389,9 @@ $("#bulk-delete-all-diagrams-button").click(async function () { `< p > This action will delete ${count} diagram${count == 1 ? "" : "s" }. The browser will reload after completion.Continue ?

`, async function () { - const layout = await import("./layout.js"); - layout.delete_all(); - window.location.reload(); + (await import("./layout.js")).delete_all().then(function() { + window.location.reload(); + }); } ); }); @@ -404,8 +404,9 @@ $("#bulk-delete-all-tiles-button").click(async function () { `< p > This action will delete ${count} tile${count == 1 ? "" : "s" }. The browser will reload after completion.Continue ?

`, async function () { - (await import("../channels.js")).delete_all(); - window.location.reload(); + (await import("../channels.js")).delete_all().then(function() { + window.location.reload(); + }); } ); }); @@ -415,8 +416,9 @@ $("#bulk-delete-all-alarm-subscriptions-button").click(async function () { confirmation.show( "

This action will delete all alarm subscriptions in the tool. The browser will reload after completion. Continue?

", async function () { - (await import("../alarms.js")).delete_all_subscribers(); - window.location.reload(); + (await import("../alarms.js")).delete_all_subscribers().then(function(){ + window.location.reload(); + }); } ); }); @@ -426,8 +428,9 @@ $("#bulk-delete-all-notes-button").click(async function () { confirmation.show( "

This action will delete all notes associated with nodes, edges, and tiles. The browser will reload after completion. Continue?

", async function () { - (await import("../notes.js")).delete_all_resource_notes(); + (await import("../notes.js")).delete_all_resource_notes().then(function(){ window.location.reload(); + }); } ); }); diff --git a/source/html/js/app/ui/tile_view.js b/source/html/js/app/ui/tile_view.js index bb9e3f43..695fb674 100644 --- a/source/html/js/app/ui/tile_view.js +++ b/source/html/js/app/ui/tile_view.js @@ -387,7 +387,15 @@ const redraw_tiles = async function () { }); diagram.blink(10, match.found); }); - diagram.show(); + let hidden_diagrams = diagrams.get_hidden_diagrams(); + if (_.find(hidden_diagrams, {'hidden_diagram': diagram.name})){ + let this_diagram = diagrams.add(diagram.name, diagram.view_id, false); + this_diagram.blink(10, match.found); + this_diagram.show(); + } + else { + diagram.show(); + } }); })(); } @@ -404,6 +412,7 @@ const redraw_tiles = async function () { const diagram = diagrams.add( local_channel_name, _.snakeCase(local_channel_name), + true, true ); const callback = function () { @@ -483,7 +492,7 @@ $("#view_tile_diagram_generate_diagram_button").on("click", function () { const node_ids = JSON.parse( $("#view_tile_diagram_dialog").attr("data-node-ids") ); - const diagram = diagrams.add(tile_name, _.snakeCase(tile_name), true); + const diagram = diagrams.add(tile_name, _.snakeCase(tile_name), true, true); // populate const nodes = _.compact(model.nodes.get(node_ids)); diagram.nodes.update(nodes); From 99a40ff595251ca371788f7a47f0dbc910a606a1 Mon Sep 17 00:00:00 2001 From: joan Date: Tue, 10 May 2022 15:19:43 -0700 Subject: [PATCH 2/6] eslint fix --- source/html/js/app/ui/diagrams.js | 34 +++++-------------------------- 1 file changed, 5 insertions(+), 29 deletions(-) diff --git a/source/html/js/app/ui/diagrams.js b/source/html/js/app/ui/diagrams.js index 50b9123f..a90a6cb4 100644 --- a/source/html/js/app/ui/diagrams.js +++ b/source/html/js/app/ui/diagrams.js @@ -61,6 +61,9 @@ var add_diagram = function (name, view_id, save) { // hides the tab of the diagram var hide_diagram = function (diagram, show_tile = true, decrement) { $("#" + diagram.tab_id).hide(); + if (show_tile) { + $("#channel-tiles-tab").tab("show"); + } if (decrement){ let diagrams_shown = parseInt(window.localStorage.getItem("DIAGRAMS_SHOWN")); window.localStorage.setItem("DIAGRAMS_SHOWN", diagrams_shown-1); @@ -69,22 +72,6 @@ var hide_diagram = function (diagram, show_tile = true, decrement) { alert.show(`${diagram.name} hidden`); }; -var show_diagram = function (name) { - let diagrams_shown = parseInt(window.localStorage.getItem("DIAGRAMS_SHOWN")); - let diagram = get_by_name(name); - $("#" + diagram.tab_id).show(); - window.localStorage.setItem(diagram.name, Date.now()); - window.localStorage.setItem("DIAGRAMS_SHOWN", diagrams_shown+=1); - settings.get("max-number-displayed-diagrams").then(function (max_number_diagrams) { - if (diagrams_shown > max_number_diagrams) { - console.log("exceeded number of diagrams to show"); - let diagram_to_hide = oldest_viewed_diagram(); - hide_diagram(diagrams[diagram_to_hide.name], false, true); - } - }); - -}; - var remove_diagram = function (name) { const view_id = diagrams[name].view_id; // remove page elements @@ -196,16 +183,6 @@ function have_any(node_ids, match_sort = false) { } } -function get_displayed_diagrams() { - let displayed_diagrams = [] - for (let [key,value] of Object.entries(localStorage)) { - if (key != "DIAGRAMS_SHOWN" && value != "HIDDEN"){ - displayed_diagrams.push(key); - } - } - return displayed_diagrams; -} - function get_hidden_diagrams() { let hidden_diagrams = [] for (let [key,value] of Object.entries(localStorage)) { @@ -348,9 +325,8 @@ const hidden_diagrams_tabulator = new Tabulator( headerFilter: true, cellClick: function (e, cell) { let name = cell.getRow()._row.data.hidden_diagram; - // let this_diagram = add_diagram(name, _.snakeCase(name), false); - // this_diagram.show(); - show_diagram(name); + let this_diagram = add_diagram(name, _.snakeCase(name), false); + this_diagram.show(); $("#hidden_diagrams").offcanvas("hide"); } } From 669cbb30ee07b490979cda2c450760ec7f08f493 Mon Sep 17 00:00:00 2001 From: joan Date: Wed, 11 May 2022 13:50:40 -0700 Subject: [PATCH 3/6] fix opening hidden diagram from matched diagrams #58 --- source/html/js/app/ui/settings_menu.js | 5 +++-- source/html/js/app/ui/tile_view.js | 17 +++++++---------- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/source/html/js/app/ui/settings_menu.js b/source/html/js/app/ui/settings_menu.js index c3961fca..87b42c8e 100644 --- a/source/html/js/app/ui/settings_menu.js +++ b/source/html/js/app/ui/settings_menu.js @@ -442,9 +442,10 @@ $("#bulk-delete-all-button").click(async function () { let diagrams = await settings.get("diagrams"); let diagram_count = diagrams.length; confirmation.show( - `< p > This action will delete ${diagram_count} diagram${diagram_count == 1 ? "" : "s" + `

This action will delete ${diagram_count} diagram${diagram_count == 1 ? "" : "s" }, ${channel_count} tile${channel_count == 1 ? "" : "s" - }, and all alarm subscriptions in the tool.The browser will reload after completion.Continue ?

`, + }, all alarm subscriptions and notes associated with resources in the tool. + The browser will reload after completion. Continue?

`, async function () { await Promise.all([ (await import("./layout.js")).delete_all(), diff --git a/source/html/js/app/ui/tile_view.js b/source/html/js/app/ui/tile_view.js index 695fb674..68ffbb49 100644 --- a/source/html/js/app/ui/tile_view.js +++ b/source/html/js/app/ui/tile_view.js @@ -379,7 +379,11 @@ const redraw_tiles = async function () { $(`#${dropdown_id}`).append(item); (function () { $(`#${menu_item_id}`).click(() => { - const diagram = diagrams.get_by_name(match.diagram); + let hidden_diagrams = diagrams.get_hidden_diagrams(); + var diagram = diagrams.get_by_name(match.diagram); + if (_.find(hidden_diagrams, {'hidden_diagram': diagram.name})){ + diagrams.add(diagram.name, diagram.view_id, false); + } diagram.network.once("afterDrawing", function () { diagram.network.fit({ nodes: match.found, @@ -387,15 +391,8 @@ const redraw_tiles = async function () { }); diagram.blink(10, match.found); }); - let hidden_diagrams = diagrams.get_hidden_diagrams(); - if (_.find(hidden_diagrams, {'hidden_diagram': diagram.name})){ - let this_diagram = diagrams.add(diagram.name, diagram.view_id, false); - this_diagram.blink(10, match.found); - this_diagram.show(); - } - else { - diagram.show(); - } + $("#view_tile_diagram_dialog").modal("hide"); + diagram.show(); }); })(); } From c9890ff465ad266cc742f95b162252677dd7b689 Mon Sep 17 00:00:00 2001 From: joan Date: Thu, 12 May 2022 09:34:40 -0700 Subject: [PATCH 4/6] fix connection settings dialog layout #344 --- source/html/index.html | 22 ++++++++++------------ source/html/js/app/ui/settings_menu.js | 2 +- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/source/html/index.html b/source/html/index.html index db13c626..13e11a7a 100644 --- a/source/html/index.html +++ b/source/html/index.html @@ -514,20 +514,18 @@