window.loadInfrastructure = async function(){

    const resources = window.resources || []
    const mappings = await api(API + "/domainmap")
    const subs = await api(API + "/subdomains")

    const container = document.getElementById("infraView")
    container.innerHTML = ""

    resources.forEach(r => {

        let html = `<div class="infra-server"><b>${r.name}</b></div>`

        if(Array.isArray(r.ips)){

            r.ips.forEach(ip => {

                html += `<div class="infra-ip">└ ${ip.ip}</div>`

                const domains = mappings.filter(m =>
                    m.resource_id == r.id && m.ip_address == ip.ip
                )

                domains.forEach(d => {

                    html += `<div class="infra-domain">　└ 🌐 ${d.domain_name}</div>`

                    const sublist = subs.filter(s =>
                        s.domain_id == d.domain_id || s.domain_name == d.domain_name
                    )

                    sublist.forEach(s => {

                        if(s.ip_address == ip.ip){

                            html += `<div class="infra-sub">　　　└ ${s.subdomain}.${s.domain_name}</div>`

                        }

                    })

                })

            })

        }

        container.innerHTML += html

    })

}