var display_selected_nodes = function()

in source/html/js/app/ui/selected_item_view.js [23:136]

• 68 lines of code
• 14 McCabe index (conditional complexity)

        var display_selected_nodes = function(diagram, node_ids) {
            nodes_ids = (Array.isArray(node_ids) ? node_ids : [node_ids]);
            // console.log("this node");
            // console.log(node_ids);
            var node = model.nodes.get(node_ids[0]);
            var found_on = diagrams.have_all(node.id);
            // console.log(found_on);
            var diagram_links = "";
            var diagram_link_ids = [];
            for (let diagram of found_on) {
                var id = ui_util.makeid();
                var html = `<a href="#" data-diagram-name="${diagram.name}" draggable="true" id="${id}">${diagram.name}</a>&nbsp;&nbsp;&nbsp;&nbsp;`;
                diagram_link_ids.push({
                    id: id,
                    node_id: node.id,
                    diagram: diagram
                });
                diagram_links += html;
            }
            var diagram_html = `<p class="card-text small text-muted mb-0 pb-0"><b>Diagrams:</b>&nbsp;&nbsp;${diagram_links}</p>`;
            channels.arn_to_channels(node.id).then(function(tile_names) {
                var channel_tile_link_ids = [];
                var tile_html = "";
                if (tile_names.length > 0) {
                    var tile_links = "";
                    for (let name of tile_names) {
                        let id = ui_util.makeid();
                        channel_tile_link_ids.push({
                            id: id,
                            name: name
                        });
                        let html = `<a href="#" data-tile-name="${name}" draggable="true" id="${id}">${name}</a>&nbsp;&nbsp;&nbsp;&nbsp;`;
                        tile_links = tile_links + html;
                    }
                    tile_html = `<p class="card-text small text-muted mb-0 pb-0"><b>Tiles:</b>&nbsp;&nbsp;${tile_links}</p>`;
                }
                var cache_html = "";
                if (node.cache_update != 0) {
                    var updated = new Date();
                    updated.setTime(Number.parseInt(node.cache_update) * 1000);
                    cache_html = `<p class="card-text small text-muted mt-0 pt-0"><b>Updated:</b> ${updated.toString()}</p>`;
                }
                var data = node.data;
                // console.log(data);
                // $("#search_input").val("");
                // $("#nav-data-subtitle").html(node.title);
                renderjson.set_icons("+", "-");
                renderjson.set_show_to_level(1);
                let html = `
                    <h6 class="card-subtitle mb-2 text-muted" id="${data_div_id}-subtitle">${node.header}&nbsp;&nbsp;&nbsp;&nbsp;<small><a target="_blank" class="mb-2" href="${node.console_link()}">AWS Console</a>&nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" class="mb-2" href="${node.cloudwatch_link()}">AWS CloudWatch</a></small></h6>
                    ${tile_html}
                    ${diagram_html}
                    ${cache_html}
                    <p class="card-text small" id="${data_div_id}-text"></p>
                    `;
                // if (empty) {
                $("#" + data_div_id).empty();
                // }
                $("#" + data_div_id).append(html);
                var json = renderjson(data);
                $("#" + data_div_id + "-text")[0].appendChild(
                    json
                );
                // attach click handlers to tile links
                for (let link of channel_tile_link_ids) {
                    let id = link.id;
                    let eventClosure = (function(local_tile_view, local_link, local_jq) {
                        var local_view = local_tile_view;
                        var local_name = local_link.name;
                        return function(event) {
                            var tab = local_jq("#channel-tiles-tab");
                            if (tab.attr("aria-selected") == "false") {
                                local_jq("#channel-tiles-tab").tab("show");
                            }
                            local_view.blink(local_name);
                        };
                    })(tile_view, link, $);
                    $("#" + id).on("click", eventClosure);
                }
                // attach click handlers to diagram links
                for (let item of diagram_link_ids) {
                    let id = item.id;
                    let eventClosure = function(local_item) {
                        var local_diagram = local_item.diagram;
                        var local_node_id = local_item.node_id;
                        var local_blinks = blinks;
                        return function(event) {
                            local_diagram.network.once("afterDrawing", (function() {
                                return function() {
                                    local_diagram.network.fit({
                                        nodes: [local_node_id],
                                        animation: true
                                    });
                                    local_diagram.blink(local_blinks, local_node_id);
                                };
                            })());
                            local_diagram.show();
                        };
                    }(item);
                    $("#" + id).on("click", eventClosure);
                }
            });
            // if node is managed instance, alerts and cloudwatch events don't apply
            // if medialive channel/multiplex or mediaconnect flow, alerts apply
            if (node_ids[0].includes("managed-instance")) {
                show_elements([data_div_id, alarms_div_id, data_tab_id, alarms_tab_id]);
                hide_elements([alerts_div_id, events_div_id, alerts_tab_id, events_tab_id]);
            } else if ((node_ids[0].includes("medialive") && node_ids[0].includes("channel")) || node_ids[0].includes("multiplex") || node_ids[0].includes("mediaconnect")) {
                show_elements([data_div_id, alerts_div_id, alarms_div_id, events_div_id, data_tab_id, alarms_tab_id, alerts_tab_id, events_tab_id]);
            } else {
                show_elements([data_div_id, alarms_div_id, events_div_id, data_tab_id, alarms_tab_id, events_tab_id]);
                hide_elements([alerts_div_id, alerts_tab_id]);
            }
        };