#code

function draw_network_topology(){
    response = listServices();
    var services = JSON.parse(response);
    store_response = listStores();
    var branchstore = JSON.parse(store_response[0]);
    var nodes = [];
    var edges = [];
    prefixes = [];
    var branchs = [];
    prefixes_b = [];
    var edges_b = [];

    for ( var i = 0; i < services.length; i++){
        // check ip prefix
        prefix = services[i].ip.split('.')[0];
        if (!( prefixes.includes(prefix) )){
            prefixes.push(prefix);
            nodes.push({
                id: prefix+".",
                label: prefix+".",
                image: "https://i.ibb.co/WB3M1Cc/Edgemaster.png",
                shape: "image"
            });
        }
        // add service to topology
        nodes.push({
            id: services[i].ip,
            label: services[i].ip,
            image: "https://i.ibb.co/zszT32D/node.png",
            shape: "image"
        });
        edges.push({
            from: prefix+".",
            to: services[i].ip
        });
    }  console.log('services', services)
     for ( i = 0; i < branchstore.length; i++){
        // check ip prefix
          prefix_b = prefixes[0];
            nodes.push({
                id: branchstore[i].ip,
                label: branchstore[i].ip,
                image: "https://i.ibb.co/9WCtqkd/branch.png",
                shape: "image"
            });
            edges.push({
                from: prefix_b+".",
                to: branchstore[i].ip
            });

    }console.log('branchstore',branchstore)

    var data = {
        nodes: nodes,
        edges: edges,
        //branchs: branchs,
    };
    var options = {};
    var container = document.querySelector('.network');
    network = new vis.Network(container, data, options);
    network.on('click',(obj)=>{
        document.querySelector('.report').innerHTML = obj.nodes[0];
        selectnode=obj.nodes[0];

        var list=""
        var listbranch=""

        for(i = 0; i < services.length; i++){
            if(selectnode==services[i].ip){
                list=services[i];
                console.log('list',list);
                break;
            }else{
                list=""
            }
        }

        for(i = 0; i < branchstore.length; i++){
            if(selectnode==branchstore[i].ip){
                listbranch=branchstore[i];
                console.log('branch',listbranch);
                break;
            }else{
                listbranch=""
            }
        }

        const manis = getManifest(list.name);
        console.log('manis',manis);
        list.description = "";
        /*manis.forEach(mani => {
            data= JSON.parse(mani.data);
            if ("annotations" in data.metadata) {
               list.description = data.metadata.annotations.description;
            }
        })*/
        const manis_b = getManifest(listbranch.name);
        console.log('mains_b',manis_b);
        listbranch.description = "";
        /*manis_b.forEach(mani => {
            data = JSON.parse(mani.data);
            if ("annotations" in data.metadata) {
                listbranch.description = data.metadata.annotations.description;
            }
        })*/


    if (list !== "" ){
        var content='<img src="https://i.ibb.co/zszT32D/node.png" width="100">'
        content+=['<center><table class=topo_table>',
        '<tr>',
            '<td colspan="2" height="60"><span style="border-bottom: 2px #6C6C6C solid;font-size: x-large;">'+list.name+'</td>',
        '</tr>',
        '<tr>',
            '<td>IP</td>',
            '<td>'+list.ip+'</td>',
        '</tr>',
        '<tr>',
            '<td>port</td>',
            '<td>'+list.port+'</td>',
            '</tr>',
            '<tr>',
                '<td colspan="2" height="50"><span style="border-bottom: 2px #6C6C6C solid;">description</td>',
            '</tr>',
            '<tr>',
                '<td colspan="2">'+list.description+'</td>',
            '</tr>'
            ].join("\n");
        }
                else{
                var content ="";
             }
    
            if (listbranch !== "" ){
            var content='<img src="https://i.ibb.co/9WCtqkd/branch.png" width="100">'
            content+=['<center><table class=topo_table>',
            '<tr>',
                '<td colspan="2" height="60"><span style="border-bottom: 2px #6C6C6C solid;font-size: x-large;">'+listbranch.name+'</td>',
            '</tr>',
            '<tr>',
                '<td>IP</td>',
                '<td>'+listbranch.ip+'</td>',
            '</tr>',
            '<tr>',
                '<td>port</td>',
                '<td>'+listbranch.port+'</td>',
            '</tr>',
        '<tr>',
            '<td colspan="2" height="50"><span style="border-bottom: 2px #6C6C6C solid;">description</td>',
        '</tr>',
        '<tr>',
            '<td colspan="2">'+listbranch.description+'</td>',
        '</tr>',
        '<button onclick="showpopup();" class=learn_more>more</button>'
        ].join("\n");
    }else{
        var content = "";
    }
    document.querySelector('.report').innerHTML = content;

    document.querySelector('.branch_name').innerHTML = listbranch.name;
    document.querySelector('.branch_ip').innerHTML = listbranch.ip;
    document.querySelector('.branch_port').innerHTML = listbranch.port;
    document.querySelector('.branch_image_list').innerHTML = listbranch.image_list;
    document.querySelector('.branch_total').innerHTML = listbranch.total_package_size;
    document.querySelector('.branch_available').innerHTML = listbranch.available_size;

    });
}