Merge pull request #345 from aws-solutions/morjoan-dev

Updates to diagram behavior and upgrade to Bootstrap 5

source/html/js/app/ui/confirmation.js

@@ -5,6 +5,7 @@ export const show = function (html, on_proceed) {
     $("#confirmation_dialog_proceed").on("click", function (event) {
         console.log(event);
         on_proceed();
+        $("#confirmation_dialog").modal("hide");
     });
     $("#confirmation_dialog").on("hide.bs.modal", function (event) {
         console.log(event);

source/html/js/app/ui/diagram_menu.js

@@ -292,6 +292,15 @@ $("#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);
+    }
+});
+
 $("#diagram_contents_modal").on("shown.bs.modal", function () {
     inventory_tabulator.setData(model.nodes.get());
     var current = diagrams.shown();

source/html/js/app/ui/diagram_statemachine_factory.js

@@ -21,7 +21,7 @@ export function create(diagram) {
                 "create-page-container": {
                     _onEnter: function () {
                         // create the html
-                        var tab = `<a class="nav-item nav-link" id="${my_diagram.tab_id}" title="Click or Drag to a Diagram or Tile" data-diagram-name="${my_diagram.name}" draggable="true" data-toggle="tab" href="#${my_diagram.diagram_id}" role="tab" aria-controls="${my_diagram.diagram_id}" aria-selected="false">${my_diagram.name}<i id="${my_diagram.tab_icon_id}" class="material-icons pl-1 small">image_aspect_ratio</i></a>`;
+                        var tab = `<a class="nav-item nav-link" id="${my_diagram.tab_id}" title="Click or Drag to a Diagram or Tile" data-diagram-name="${my_diagram.name}" draggable="true" data-bs-toggle="tab" data-bs-target="#${my_diagram.diagram_id}" href="#${my_diagram.diagram_id}" role="tab" aria-controls="${my_diagram.diagram_id}" aria-selected="false">${my_diagram.name}<i id="${my_diagram.tab_icon_id}" class="material-icons pl-1 small">image_aspect_ratio</i></a>`;
                         var diagram_div = `<div id="${my_diagram.diagram_id}" class="tab-pane fade" role="tabpanel" aria-labelledby="${my_diagram.tab_id}" style="height: inherit; width: inherit;"></div>`;
                         // add to containers
                         // skip Tiles tab

source/html/js/app/ui/diagrams.js

@@ -31,6 +31,7 @@ var add_selection_callback = function (callback) {
 };
 
 var add_diagram = function (name, view_id, save) {
+    let diagrams_shown = parseInt(window.localStorage.getItem("DIAGRAMS_SHOWN"));
     const new_diagram = diagram_factory.create(name, view_id);
     diagrams[name] = new_diagram;
     if (save) {
@@ -45,9 +46,51 @@ var add_diagram = function (name, view_id, save) {
             }
         }
     });
+    window.localStorage.setItem(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(diagram_to_hide.name, false);
+            window.localStorage.setItem("DIAGRAMS_SHOWN", diagrams_shown - 1);
+        }
+    });
+    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;
 };
 
+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");
+    }
+    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');  
+};
+
 var remove_diagram = function (name) {
     const view_id = diagrams[name].view_id;
     // remove page elements
@@ -61,6 +104,12 @@ var remove_diagram = function (name) {
     settings.remove(key);
     // select the tile tab
     $("#channel-tiles-tab").tab("show");
+    // remove from local storage
+    window.localStorage.removeItem(name);
+    // decrement number of diagrams shown
+    let diagrams_shown = parseInt(window.localStorage.getItem("DIAGRAMS_SHOWN"));
+    window.localStorage.setItem("DIAGRAMS_SHOWN", diagrams_shown-1);
+    window.localStorage.removeItem(name);
 };
 
 var get_by_name = function (name) {
@@ -86,24 +135,41 @@ var save_diagrams = function () {
 
 var load_diagrams = function () {
     return new Promise((resolve) => {
-        // load diagram names from the cloud on initialization
-        settings.get("diagrams").then(function (all_diagrams) {
-            console.log(
-                "load user-defined diagrams: " + JSON.stringify(all_diagrams)
-            );
-            if (Array.isArray(all_diagrams) && all_diagrams.length > 0) {
-                for (let diagram of all_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);
-            }
-            resolve();
-        });
+        let diagrams_shown = localStorage.getItem('DIAGRAMS_SHOWN');
+        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);
+                    } 
+                });
+            }); 
+        }
+        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();
     });
 };
 
@@ -147,11 +213,45 @@ 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;
+}
+
+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 oldest_viewed_diagram (){
+    let displayed_diagrams = [];
+    const local_lodash = _;
+    for (let [key, value] of Object.entries(localStorage)) {
+        if (key != "DIAGRAMS_SHOWN"){
+            displayed_diagrams.push({"name": key, "time": value});
+        }
+    }
+    let sorted_diagrams = local_lodash.sortBy(displayed_diagrams, ['time']);
+    return (sorted_diagrams.shift());
+}
+
 const update_lock_visibility = () => {
     // are we showing a diagram or tiles?
-    if (shown_diagram()) {
+    let diagram = shown_diagram();
+    if (diagram) {
         // show the lock
-        $("#diagram-lock-button").removeClass("d-none");
+        window.localStorage.setItem(diagram.name, Date.now());
+        $("#diagram-lock-button").removeClass("d-none");        
     } else {
         // hide the lock
         $("#diagram-lock-button").addClass("d-none");
@@ -175,6 +275,8 @@ const update_lock_state = () => {
     // only update if we're showing a diagram
     let diagram = shown_diagram();
     if (diagram) {
+        // update the date of the diagram
+        window.localStorage.setItem(diagram.name, Date.now());
         // get the lock state from settings
         diagram.isLocked().then((locked) => {
             console.log(
@@ -263,4 +365,5 @@ export {
     have_all,
     have_any,
     add_selection_callback,
+    hide_diagram as hide,
 };

source/html/js/app/ui/monitor_view.js

@@ -96,7 +96,7 @@ var alarm_tabulator = new Tabulator("#nav-monitor-alarms-text", {
             tooltip: "Navigate to Alarm",
             headerSort: false,
             formatter: consoleIcon,
-            width: 40,
+            width: 42,
             hozAlign: "center",
             cellClick: function (e, cell) {
                 navigate_to_alarm(cell.getRow()._row.data);
@@ -106,7 +106,7 @@ var alarm_tabulator = new Tabulator("#nav-monitor-alarms-text", {
             tooltip: "Unsubscribe Alarm",
             headerSort: false,
             formatter: trashIcon,
-            width: 40,
+            width: 42,
             hozAlign: "center",
             cellClick: function (e, cell) {
                 unsubscribe_alarm(cell.getRow()._row.data);

source/html/js/app/ui/settings_menu.js

@@ -276,6 +276,7 @@ $("#advanced_settings_button").on("click", async function () {
         const tiles_interval = (
             await import("./tile_view.js")
         ).get_update_interval();
+        const number_displayed_diagrams = await settings.get("max-number-displayed-diagrams");
         const inventory_regions = await get_inventory_regions();
         const module = await regions.refresh();
         // populate the dialog
@@ -299,6 +300,7 @@ $("#advanced_settings_button").on("click", async function () {
         $("#advanced-tiles-refresh-interval").val(
             Math.round(tiles_interval / 1000)
         );
+        $("#advanced-tiles-displayed-diagrams").val(number_displayed_diagrams);
         // get the layout method and update the choice
         const value = await settings.get("layout-method");
         $("#layout-method-select option[value='" + value.method + "']").prop(
@@ -322,6 +324,9 @@ $("#advanced_settings_modal_save").on("click", async function () {
     const tiles_interval = Number.parseInt(
         $("#advanced-tiles-refresh-interval").val()
     );
+    const number_displayed_diagrams = Number.parseInt(
+        $("#advanced-tiles-displayed-diagrams").val()
+    );
     const regions_array = _.map(
         $(
             "#advanced-inventory-regions input:checked,#advanced-inventory-global input:checked"
@@ -341,6 +346,10 @@ $("#advanced_settings_modal_save").on("click", async function () {
         setAdvancedSettingsAlert(
             "Please check the Refresh Tile Inventory Interval"
         );
+    } else if (Number.isNaN(number_displayed_diagrams)) {
+        setAdvancedSettingsAlert(
+            "Please check the Maximum Number of Diagrams to Display"
+        );
     } else if (!Array.isArray(regions_array)) {
         setAdvancedSettingsAlert("Please check the Inventory Regions input");
     } else {
@@ -351,6 +360,9 @@ $("#advanced_settings_modal_save").on("click", async function () {
         (await import("../events.js")).set_update_interval(event_interval);
         (await import("./tile_view.js")).set_update_interval(tiles_interval);
         set_inventory_regions(regions_array);
+        // number of diagrams to display
+        const number_diagrams = $("#advanced-tiles-displayed-diagrams").val();
+        settings.put("max-number-displayed-diagrams", number_diagrams);
         // save layout method
         const method = $("#layout-method-select").val();
         console.log("layout-method is " + method);

source/html/js/app/ui/tile_view.js

@@ -10,6 +10,7 @@ import * as settings from "../settings.js";
 import * as diagrams from "./diagrams.js";
 import * as confirmation from "./confirmation.js";
 import * as channels_menu from "./channels_menu.js";
+import * as alert from "./alert.js"
 
 const tile_row_div_id = "channel-tile-row-zkjewrvwdqywhwx";
 
@@ -293,7 +294,7 @@ const filter_tiles = function () {
 const redraw_tiles = async function () {
     $("#" + tile_outer_div).addClass("d-none");
     $("#" + content_div).html(
-        `<div id="${tile_row_div_id}" data-tile-row="true" class="row ml-3">`
+        `<div id="${tile_row_div_id}" data-tile-row="true" class="row ms-3">`
     );
     const channel_list = await channels.channel_list();
     const cached_events = event_alerts.get_cached_events();
@@ -334,7 +335,7 @@ const redraw_tiles = async function () {
         const menu_id = channel_card_id + "_menu";
         const dropdown_id = channel_card_id + "_dropdown";
         const tile = `
-                        <div draggable="true" class="card ${border_class} ml-4 mb-4" id="${channel_card_id}" data-alert-count="${alert_count}" data-alarm-count="${alarm_count}" data-channel-name="${channel_name}" data-tile-name="${channel_name}" data-resource-count="${channel_members.length}" data-missing-count="${missing_count}" style="border-width: 3px; width: ${tile_width_px}px; min-width: ${tile_width_px}px; max-width: ${tile_width_px}px; height: ${tile_height_px}px; min-height: ${tile_height_px}px; max-height: ${tile_height_px}px;">
+                        <div draggable="true" class="card ${border_class} ms-4 mb-4 px-0" id="${channel_card_id}" data-alert-count="${alert_count}" data-alarm-count="${alarm_count}" data-channel-name="${channel_name}" data-tile-name="${channel_name}" data-resource-count="${channel_members.length}" data-missing-count="${missing_count}" style="border-width: 3px; width: ${tile_width_px}px; min-width: ${tile_width_px}px; max-width: ${tile_width_px}px; height: ${tile_height_px}px; min-height: ${tile_height_px}px; max-height: ${tile_height_px}px;">
                             <div class="card-header" style="cursor: pointer;" title="Click to Select, Doubleclick to Edit" id="${header_id}">${local_channel_name}
                             </div>
                             <div class="card-body text-info my-0 py-1">
@@ -346,7 +347,7 @@ const redraw_tiles = async function () {
                             <div class="btn-group btn-group-sm" aria-label="Tile Footer" style="height: 14%;">
                                 <div style="position: absolute; top: 0; left: ${tile_width_px - 32}px; cursor: pointer;">
                                     <div class="dropdown">
-                                        <button class="btn btn-sm p-0 m-0" type="button" id="${menu_id}" data-toggle="dropdown" style="color: grey;">
+                                        <button class="btn btn-sm p-0 m-0" type="button" id="${menu_id}" data-bs-toggle="dropdown" style="color: grey;">
                                             <span title="Matching diagrams" class="material-icons">image_aspect_ratio</span>
                                         </button>
                                         <div class="dropdown-menu m-0 p-0" aria-labelledby="${menu_id}" id="${dropdown_id}">
@@ -543,19 +544,13 @@ $("#tiles_edit_selected_tile_button").on("click", function () {
 $("#tiles_delete_selected_tile_button").on("click", function () {
     const tile_name = selected();
     if (shown() && tile_name && tile_name !== "") {
-        $("#confirmation_dialog_proceed").on("click", function () {
+        let html = `Delete the tile named ${tile_name}?`;
+        confirmation.show(html, function () {
             channels.delete_channel(tile_name).then(function () {
                 redraw_tiles();
+                alert.show("Tile deleted");
             });
         });
-        $("#confirmation_dialog").on("hide.bs.modal", function (event) {
-            console.log(event);
-            $("#confirmation_dialog_proceed").unbind("click");
-        });
-        $("#confirmation_dialog_body").html(
-            "<p>Delete the tile named " + tile_name + "?</p>"
-        );
-        $("#confirmation_dialog").modal("show");
     }
 });