{% extends "base.html" %}

{% block style %}
    <style>
        .graph .vizchart {
            height: 40vh;
        }
		#table-now .graph .vizchart {
			height: 8vh;
		}
		#table-now .google-visualization-table {
			border-style: groove;
		}
		#table-now .google-visualization-table-td {
		    text-align: center;
			font-size: 125%;
		}
		.htcv-col-6 .graph .vizchart {
			height: 20vh;
		}
    </style>
{% endblock style %}

{% block body %}

    <div class="container-fluid">


<div class="row">
<div class="col">
<p style="text-align: center">
Contribution of compute capacity from the
{{ ce_facility_name }} entity named {{ ce_site_name }}.
<br>Description of this Compute Entrypoint (CE): {{ ce_description }}
</p>
</div>
</div>
		<div class="row">
            <div class="col" id="table-now">
                <script>
                    new HTCondorView({
                        dst_id: "table-now",
						has_fullscreen_link: false,
						data_url: "/data/ce_overview?r=day",
						graph_query: urlEscapeGraphQuery(`
                            filter=Type=P
                            limit=lastDate
                            filter=Cpus>0
                            group=Date;Date,Project,Field,Organization,Cpus
                            addRowIfEmpty=None
                            ceil=Cpus,Cpus
                            unselect=Cpus
                            rename=Date=Last Update Time
                            rename=Project=Projects
                            rename=Field=Fields
                            rename=Organization=Organizations
                            rename=Cpus=Cpus
                            rename=Date=CE Health
                            allowHtml=True
                            set_val=CE Health=Good
                            intensify=health
                        `)
                    });
                </script>

			</div>
		</div>
		
		<div class="row">
            <div class="col-6 htcv-col-6" id="cpu-by-project1">
			                <script>
			                    new HTCondorView({
			                       dst_id: "cpu-by-project1",
			                       title: "CPUs Past Week",
			                       data_url: "/data/ce_overview?r=week",
			                       graph_query: urlEscapeGraphQuery(`
                                        vAxis.maxValue=3
                                        filter=Type=R
                                        q=Cpus
                                        order=Date
                                        pivot=Date;Project;Cpus
                                        legend.position=in
                                        add=CpusAllocated,CpusUnallocated,CpusContributed
                                        unselect=CpusUnallocated
                                        series.0.areaOpacity=1
                                        series.1.areaOpacity=0.05
                                        vAxis.format=short
                                        chart=area
                                   `)
			                    });
			                </script>
			</div>
            <div class="col-6 htcv-col-6" id="cpu-by-project2">
			                <script>
			                    new HTCondorView({
			                       dst_id: "cpu-by-project2",
			                       title: "Memory Past Week (in GBs)",
			                       data_url: "/data/ce_overview?r=week",
			                       graph_query: urlEscapeGraphQuery(`
                                        vAxis.maxValue=3
                                        filter=Type=R
                                        q=MemoryAllocated,MemoryUnallocated
                                        div=Memory,1000,Memory
                                        unselect=Memory
                                        order=Date
                                        pivot=Date;Project;Memory
                                        legend.position=in
                                        vAxis.format=short
                                        add=MemoryAllocated,MemoryUnallocated,MemoryContributed
                                        unselect=MemoryUnallocated
                                        series.0.areaOpacity=1
                                        series.1.areaOpacity=0.05
                                        chart=area
                                    `)
			                    });
			                </script>
			</div>
        </div>

		<div class="row">
            <div class="col-6 htcv-col-6" id="cpu-by-project3">
			                <script>
			                    new HTCondorView({
			                       dst_id: "cpu-by-project3",
			                       title: "Disk Past Week (in GBs)",
			                       data_url: "/data/ce_overview?r=week",
			                       graph_query: urlEscapeGraphQuery(`
                                        vAxis.maxValue=3
                                        filter=Type=R
                                        q=DiskAllocated,DiskUnallocated
                                        order=Date
                                        pivot=Date;Project;Disk
                                        legend.position=in
                                        add=DiskAllocated,DiskUnallocated,DiskContributed
                                        unselect=DiskUnallocated
                                        series.0.areaOpacity=1
                                        series.1.areaOpacity=0.05
                                        vAxis.format=short
                                        chart=area
                                    `)
			                    });
			                </script>
			</div>
            <div class="col-6 htcv-col-6" id="cpu-by-project4">
			                <script>
			                    new HTCondorView({
			                       dst_id: "cpu-by-project4",
			                       title: "BCUs Past Week (1core/4GB Mem/4GB Disk)",
			                       data_url: "/data/ce_overview?r=week",
			                       graph_query: urlEscapeGraphQuery(`
                                        vAxis.maxValue=3
                                        filter=Type=R
                                        q=Bcus
                                        order=Date
                                        pivot=Date;Project;Bcus
                                        legend.position=in
                                        add=BcusAllocated,BcusUnallocated,BcusContributed
                                        unselect=BcusUnallocated
                                        series.0.areaOpacity=1
                                        series.1.areaOpacity=0.05
                                        vAxis.format=short
                                        chart=area
                                   `)
			                    });
			                </script>
			</div>
        </div>

		<div class="row">
            <div class="col-6 htcv-col-6" id="col-chart">
                <script>
                    new HTCondorView({
                        dst_id: "col-chart",
                        title: "Groups Served per Day",
						data_url: "/data/ce_overview?r=week",
						graph_query: urlEscapeGraphQuery(`
                            filter=Type=P
                            filter=Cpus>0
                            extract_regexp=Date=-(.*) .*
                            group=Date;Project,Organization,Field
                            rename=Project=Projects
                            rename=Organization=Organizations
                            rename=Field=Fields
                            order=Date
                            addRowIfEmpty=Nobody Served This Week
                            vAxis.maxValue=2
                            chart=column
                            legend.position=in
                        `)
                    });
                </script>
            </div>
            <div class="col-6 htcv-col-6" id="cpu-by-day">
                <script>
                    new HTCondorView({
                        dst_id: "cpu-by-day",
                        title: "CPU (l), Memory (r), Disk (r) Allocated per Day",
						data_url: "/data/ce_overview?r=week",
						graph_query: urlEscapeGraphQuery(`
                            vAxis.maxValue=3
                            filter=Type=R
                            q=Allocated

                            group=Date;Cpus,Memory,Disk
                            div=Memory,1000,Memory

                            unselect=Memory
                            extract_regexp=Date=-(.*) .*
                            group=Date;avg(Cpus),avg(Memory),avg(Disk)

                            mult=avgCpus,24,CPU Hours
                            mult=avgMemory,24,Mem GB Hours
                            mult=avgDisk,24,Disk GB Hours

                            unselect=avgCpus,avgMemory,avgDisk
                            order=Date

                            vAxes.0.minValue=0
                            vAxes.1.minValue=0
                            vAxes.0.title=CPU Hours
                            vAxes.1.title=GB Hours
                            
                            series.0.targetAxisIndex=0
                            series.1.targetAxisIndex=1
                            series.2.targetAxisIndex=1
                            
                            legend.position=in
                            vAxis.format=short
                            chartArea.left=13%
                            chartArea.right=13%
                            chart=column
                        `)
                    });
                </script>
            </div>
		</div>
  
		<div class="row">
            <div class="col-6 htcv-col-6" id="glidein-limits">
                <script>
                    new HTCondorView({
                        dst_id: "glidein-limits",
                        title: "Maximum Concurrent Resource-Limited Glideins per Day",
						data_url: "/data/ce_overview?r=week",
                        graph_query: urlEscapeGraphQuery(`
                            filter=Type=R
                            q=EPs
                            group=Date;EPsCpuLimited,EPsMemoryLimited,EPsDiskLimited,EPsRunning

                            div=EPsCpuLimited,EPsRunning,FractionCpuLimited
                            mult=FractionCpuLimited,100,PercentCpuLimited

                            div=EPsMemoryLimited,EPsRunning,FractionMemoryLimited
                            mult=FractionMemoryLimited,100,PercentMemoryLimited

                            div=EPsDiskLimited,EPsRunning,FractionDiskLimited
                            mult=FractionDiskLimited,100,PercentDiskLimited

                            extract_regexp=Date=-(.*) .*
                            group=Date;max(PercentCpuLimited),max(PercentMemoryLimited),max(PercentDiskLimited)
                            order=Date

                            rename=maxPercentCpuLimited=% CPU Limited
                            rename=maxPercentMemoryLimited=% Memory Limited
                            rename=maxPercentDiskLimited=% Disk Limited

                            legend.position=in
                            vAxis.format=short
                            vAxes.0.title=% Running EPs
                            chart=column
                        `)
                    });
                </script>
            </div>
            <div class="col-6 htcv-col-6" id="eps-running">
                <script>
                    new HTCondorView({
                        dst_id: "eps-running",
                        title: "Running Execution Points Past Week",
						data_url: "/data/ce_overview?r=week",
                        graph_query: urlEscapeGraphQuery(`
                            vAxis.maxValue=3
                            filter=Type=R
                            q=EPsRunning
                            order=Date
                            pivot=Date;Project;EPsRunning
                            legend.position=in
                            series.0.areaOpacity=0.5
                            vAxis.format=short
                            chart=area
                        `)
                    });
                </script>
            </div>
        </div>

		<p><p>
        <div class="row">
            <div class="col" id="pie-by-project">
                <script>
                    new HTCondorViewRanged({
                        dst_id: "pie-by-project",
                        title: "CPU Allocation Percentage by Project",
						data_url: "/data/ce_overview",
						graph_query: urlEscapeGraphQuery(`
                            filter=Type=P
                            group=Project;Cpus
                            filter=Cpus>0
                            order=-Cpus
                            chart=pie
                            tooltip.text=percentage
                            tooltip.isHtml=false
                            sliceVisibilityThreshold=0
                        `),
						table_query: urlEscapeGraphQuery(`
                            filter=Type=P
                            group=Project,Field,Organization;avg(Cpus),max(Cpus)
                            filter=maxCpus>0
                            order=-avgCpus
                            ceil=maxCpus,maxCpus
                            unselect=maxCpus
                            make_url=Project=https://osg-htc.org/services/ospool/projects?project=*
                        `)
                    });
                </script>
            </div>
        </div>
        
        <!-- Bootstrap Modal -->
        <div class="modal fade" id="cookieModal" tabindex="-1" aria-labelledby="cookieModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="cookieModalLabel">Make this CE Dashboard your default?</h5>
                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Click "Yes" to return to this page directly whenever visiting <a href='{{request.url_root}}'>{{ request.url_root }}</a>.<br>
                        Click "No" to not save this CE as your default.<br>
                        Click "Stop Asking" to stop asking this question; useful if you want regularly look at different CEs.<br>
                        <br>
                        <strong>Note:</strong> Your choice is stored in a browser cookie. Answer "No" if you are using a public computer or do not consent to use of cookies.<br>
                        <br>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" id="saveUrlButtonStop">Stop Asking</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                        <button type="button" class="btn btn-primary" id="saveUrlButtonYes">Yes</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Bootstrap Modal -->

    </div>

        
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Check if the cookie exists
            const cookieName = "ceDashStoredHost";
            const cookieExists = document.cookie.split("; ").some((cookie) => cookie.startsWith(cookieName + "="));
            // Check if there is host parameter in the URL
            const urlParams = new URLSearchParams(window.location.search);
            const hostParam = urlParams.get("host");
            // If no host parameter exists, redirect to the home page
            if (!hostParam) {
                window.location.href = "/";
            }

            // Show the modal if the cookie does not exist
            if (!cookieExists) {
                const cookieModal = new bootstrap.Modal(document.getElementById("cookieModal"));
                cookieModal.show();

                // Add event listener to the "Yes" button
				document.getElementById("saveUrlButtonYes").addEventListener("click", function () {
					if (hostParam) {
						document.cookie = `${cookieName}=${encodeURIComponent(hostParam)}; path=/; max-age=94608000`; // 3 years
					}
					cookieModal.hide();
				});

                // Add event listener to the "Stop Asking" button
				document.getElementById("saveUrlButtonStop").addEventListener("click", function () {
					if (hostParam) {
						document.cookie = `${cookieName}=${encodeURIComponent('none')}; path=/; max-age=94608000`; // 3 years
					}
					cookieModal.hide();
				});

/*
                // Add event listener to the "No" button
                document.querySelector(".btn-secondary").addEventListener("click", function () {
                    cookieModal.hide();
                });
*/
            }
        });
    </script>

{% endblock body %}
