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

Changes for #344 and #58 #347

Merged
merged 6 commits into from
May 13, 2022
Merged

Changes for #344 and #58 #347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
43a969b
fix bulk delete #267, updates to diagram management #58
morjoan May 10, 2022
99a40ff
eslint fix
morjoan May 10, 2022
669cbb3
fix opening hidden diagram from matched diagrams #58
morjoan May 11, 2022
c9890ff
fix connection settings dialog layout #344
morjoan May 12, 2022
49ce620
more BS5 cleanup #344, do not recreate an existing diagram to accommo…
morjoan May 13, 2022
24ac67d
removed unused function
morjoan May 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 26 additions & 13 deletions source/html/index.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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