Skip to content
This repository has been archived by the owner on Dec 30, 2024. It is now read-only.

Commit

Permalink
Merge pull request #347 from aws-solutions/morjoan-dev
Browse files Browse the repository at this point in the history 
Changes for #344 and #58
  • Loading branch information
@JimTharioAmazon
JimTharioAmazon authored May 13, 2022
2 parents 884085c + 24ac67d commit fd04593
Show file tree
Hide file tree
Showing 6 changed files with 161 additions and 110 deletions.
39 changes: 26 additions & 13 deletions source/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,8 @@
</div>
</nav>
<div id="diagram-lock-button" class="d-none"></div>
<div id="diagram-list-button" class="d-none"></div>

<div id="diagram" style="height: 60%; width: 100%;">
<div class="tab-content" id="diagram-tab-content" style="height: 100%; width: 100%;">
<div id="channel-tiles-outer" class="tab-pane d-none" role="tabpanel" aria-labelledby="channel-tiles-tab"
Expand Down Expand Up @@ -465,7 +467,7 @@ <h6 class="mb-2 text-muted" id="nav-events-selected-item">Events: Nothing Select
</div>
<div id="notes-editable-markdown" class="d-none">
<h6 class="card-subtitle mb-2 text-muted" id="notes-editable-markdown-header">Header Placeholder</h6>
<div class="form-group">
<div class="mb-3">
<label for="notes-textarea">Edit Resource Notes - Markdown Supported</label>
<textarea class="form-control" id="notes-textarea" rows="3"></textarea>
</div>
Expand Down Expand Up @@ -512,20 +514,18 @@ <h5 class="modal-title" id="endpoint_connection_modal_title">API Endpoint Connec
</div>
<div class="modal-body">
<div class="container">
<form>
<div class="form-group row">
<label for="input_endpoint_url" class="col-2 col-form-label">Endpoint URL</label>
<div class="col-10">
<input type="text" class="form-control" id="input_endpoint_url" placeholder="">
</div>
<div class="row mb-3">
<label for="input_endpoint_url" class="col-2 col-form-label">Endpoint URL</label>
<div class="col-10">
<input type="text" class="form-control" id="input_endpoint_url" placeholder="">
</div>
<div class="form-group row">
<label for="input_endpoint_key" class="col-2 col-form-label">API Key</label>
<div class="col-10">
<input type="password" class="form-control" id="input_endpoint_key" placeholder="">
</div>
</div>
<div class="row mb-3">
<label for="input_endpoint_key" class="col-2 col-form-label">API Key</label>
<div class="col-10">
<input type="password" class="form-control" id="input_endpoint_key" placeholder="">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<!-- <div class="btn-group-toggle" data-bs-toggle="buttons"> -->
Expand Down Expand Up @@ -1050,6 +1050,19 @@ <h5 class="modal-title" id="cloudwatch_event_data_view_title">CloudWatch Event D
</div>
</div>

<!-- Hidden diagrams dialog -->
<!-- Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="hidden_diagrams" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Click on a hidden diagram to display</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div id="hidden_diagrams_content">
</div>
</div>
</div>

</body>

</html>
1 change: 1 addition & 0 deletions source/html/js/app/ui/diagram_factory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,6 +351,7 @@ class Diagram {
}

show() {
$("#" + this.tab_id).show();
$("#" + this.tab_id).tab("show");
}

Expand Down
4 changes: 1 addition & 3 deletions source/html/js/app/ui/diagram_menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
});

Expand Down
191 changes: 110 additions & 81 deletions source/html/js/app/ui/diagrams.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};

Expand Down Expand Up @@ -32,63 +32,48 @@ 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;
var new_diagram = get_by_name(name);
if (!new_diagram){
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);
}
}
});
}
if (save) {
save_diagrams();
}
new_diagram.add_singleclick_callback(function (diagram, event) {
for (let callback of selection_callbacks) {
try {
callback(diagram, event);
} catch (error) {
console.log(error);
}
}
});
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);
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;
};

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){
// 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");
}
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');
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 remove_diagram = function (name) {
Expand Down Expand Up @@ -139,36 +124,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();
});
};
Expand Down Expand Up @@ -213,24 +187,30 @@ function have_any(node_ids, match_sort = false) {
}
}

function get_displayed_diagrams() {
let displayed_diagrams = []
function get_hidden_diagrams() {
let hidden_diagrams = []
for (let [key,value] of Object.entries(localStorage)) {
if (key != "DIAGRAMS_SHOWN" && value != "HIDDEN"){
displayed_diagrams.push(key);
if (key != "DIAGRAMS_SHOWN" && value == "HIDDEN"){
hidden_diagrams.push({"hidden_diagram": key});
}
}
return displayed_diagrams;
return hidden_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);
}
// 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 (){
Expand All @@ -251,7 +231,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");
Expand Down Expand Up @@ -313,7 +294,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 = `<div id="diagram-lock-button" style="${style}"><span title="Lock/Unlock Changes" id="diagram-lock-icon" class="material-icons">lock_open</span></div>`;
Expand All @@ -326,23 +307,70 @@ 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();
$("#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 = `<div id="diagram-list-button" style="${listStyle}"><span title="Show List of Hidden Diagrams" id="diagram-list-icon" class="material-icons">list</span></div>`;
diagramListDiv.replaceWith(diagramListButtonContent);
$("#diagram-list-button").click(() => {
$("#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();
Expand All @@ -366,4 +394,5 @@ export {
have_any,
add_selection_callback,
hide_diagram as hide,
get_hidden_diagrams
};
Loading

0 comments on commit fd04593

Please sign in to comment.