{% extends "base.html" %}

{% import 'utils.jinja' as utils %}

{% 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 js %}
    {{ super() }}
    <script src="static/util.js"></script>
    <script>
        $(document).ready(function() {
            registerKeyboardNavigation();
        });
    </script>
{% endblock js %}

{% 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",
                                   action_url: "showModal('cpus-past-week-modal')",
			                       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",
                                   action_url: "showModal('memory-past-week-modal')",
			                       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",
                                   action_url: "showModal('disk-past-week-modal')",
			                       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",
                                   action_url: "showModal('bcus-past-week-modal')",
			                       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="mem-per-cpu">
                <script>
                    new HTCondorView({
                        dst_id: "mem-per-cpu",
                        title: "Memory per CPU (in GBs)",
                        data_url: "/data/ce_overview?r=week",
                        action_url: "showModal('memory-per-cpu-modal')",
                        graph_query: urlEscapeGraphQuery(`
                            vAxis.maxValue=3
                            filter=Type=R
                            q=MemoryAllocated,MemoryUnallocated,CpusAllocated,CpusUnallocated
                            order=Date
                            pivot=Date;Project;Memory,Cpus
                            unselect=CpusAllocated Memory,CpusUnallocated Memory,MemoryAllocated Cpus,MemoryUnallocated Cpus

                            rename=CpusAllocated Cpus=CpusAllocated
                            rename=CpusUnallocated Cpus=CpusUnallocated
                            rename=MemoryAllocated Memory=MemoryAllocated
                            rename=MemoryUnallocated Memory=MemoryUnallocated

                            add=CpusAllocated,CpusUnallocated,CpusContributed
                            add=MemoryAllocated,MemoryUnallocated,MemoryContributed

                            unselect=CpusUnallocated,MemoryUnallocated

                            div=MemoryAllocated,CpusAllocated,MemoryPerCpuAllocated
                            div=MemoryContributed,CpusContributed,MemoryPerCpuContributed
                            div=MemoryPerCpuAllocated,1000,MemoryPerCpuAllocated
                            div=MemoryPerCpuContributed,1000,MemoryPerCpuContributed

                            unselect=MemoryAllocated,MemoryContributed,CpusAllocated,CpusContributed,MemoryPerCpuAllocated,MemoryPerCpuContributed

                            rename=MemoryPerCpuAllocated=Memory (GB) Per CPU - Allocated
                            rename=MemoryPerCpuContributed=Memory (GB) Per CPU - Contributed

                            series.0.areaOpacity=1
                            series.1.areaOpacity=0.05
                            legend.position=in
                            vAxis.format=short
                            chart=area
                        `)
                    });
                </script>
			</div>
            <div class="col-6 htcv-col-6" id="disk-per-cpu">
                <script>
                    new HTCondorView({
                        dst_id: "disk-per-cpu",
                        title: "Disk per CPU (in GBs)",
                        data_url: "/data/ce_overview?r=week",
                        action_url: "showModal('disk-per-cpu-modal')",
                        graph_query: urlEscapeGraphQuery(`
                            vAxis.maxValue=3
                            filter=Type=R
                            q=DiskAllocated,DiskUnallocated,CpusAllocated,CpusUnallocated
                            order=Date
                            pivot=Date;Project;Disk,Cpus
                            unselect=CpusAllocated Disk,CpusUnallocated Disk,DiskAllocated Cpus,DiskUnallocated Cpus

                            rename=CpusAllocated Cpus=CpusAllocated
                            rename=CpusUnallocated Cpus=CpusUnallocated
                            rename=DiskAllocated Disk=DiskAllocated
                            rename=DiskUnallocated Disk=DiskUnallocated

                            add=CpusAllocated,CpusUnallocated,CpusContributed
                            add=DiskAllocated,DiskUnallocated,DiskContributed

                            unselect=CpusUnallocated,DiskUnallocated

                            div=DiskAllocated,CpusAllocated,DiskPerCpuAllocated
                            div=DiskContributed,CpusContributed,DiskPerCpuContributed

                            unselect=DiskAllocated,DiskContributed,CpusAllocated,CpusContributed

                            rename=DiskPerCpuAllocated=Disk (GB) Per CPU - Allocated
                            rename=DiskPerCpuContributed=Disk (GB) Per CPU - Contributed

                            series.0.areaOpacity=1
                            series.1.areaOpacity=0.05
                            legend.position=in
                            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",
                        action_url: "showModal('groups-per-day-modal')",
						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",
                        action_url: "showModal('resources-per-day-modal')",
						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",
                        action_url: "showModal('resource-limited-per-day-modal')",
                        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",
                        action_url: "showModal('eps-past-week-modal')",
                        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",
                        action_url: "showModal('allocation-modal')",
						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 -->

        <!-- Help Modal for Cpus Allocated -->
        {% call utils.bootstrap_modal('cpus-past-week-modal', 'About: CPUs Past Week') %}
            <p>Displays the CPUs allocated to and contributed by EPs at this site.</p>
            <ul>
                <li>CPUs Allocated: Total count of CPUs allocated to EPs running at this site.</li>
                <li>CPUs Contributed: CPUs utilized by jobs running at this site.</li>
            </ul>
        {% endcall %}

        <!-- Help Modal for Memory Past Week -->
        {% call utils.bootstrap_modal('memory-past-week-modal', 'About: Memory Past Week') %}
            <p>Displays the memory allocated to and contributed by EPs at this site.</p>
            <ul>
                <li>Memory Allocated: Total amount of memory (in GB) allocated to EPs running at this site.</li>
                <li>Memory Contributed: Memory (in GB) utilized by jobs running at this site.</li>
            </ul>
        {% endcall %}

        <!-- Help Modal for Disk Past Week -->
        {% call utils.bootstrap_modal('disk-past-week-modal', 'About: Disk Past Week') %}
            <p>Displays the disk allocated to and contributed by EPs at this site.</p>
            <ul>
                <li>Disk Allocated: Total amount of disk space (in GB) allocated to EPs running at this site.</li>
                <li>Disk Contributed: Disk space (in GB) utilized by jobs running at this site.</li>
            </ul>
        {% endcall %}

        <!-- Help Modal for BCUs Past Week -->
        {% call utils.bootstrap_modal('bcus-past-week-modal', 'About: BCUs Past Week') %}
            <p>
                Displays the Basic Compute Units (BCUs) allocated to and contributed by EPs at this site.
                1 BCU is defined as 1 CPU core, 4 GB of memory, and 4 GB of disk. Total BCUs are calculated 
                based on the most constrained resource.
            </p>
            <p>
                For example, if a site contributes the following:
            </p>
            <ul>
                <li>2 CPU cores</li>
                <li>16 GB of memory</li>
                <li>16 GB of disk</li>
            </ul>
            <p>
                Its BCU contribution would be 2 BCUs, since the CPU cores are the limiting factor.
            </p>
        {% endcall %}

        <!-- Help Modal for Memory Past Week -->
        {% call utils.bootstrap_modal('memory-per-cpu-modal', 'About: Memory per CPU') %}
            <p>Displays the ratio between memory and cpus allocated to and contributed by EPs at this site.</p>
            <ul>
                <li>Memory per CPU - Allocated: Amount of memory (in GB) allocated to EPs running at this site for each CPU allocated to those EPs.</li>
                <li>Memory per CPU - Contributed: Memory (in GB) utilized by jobs running at this site for each CPU utilized by those jobs.</li>
            </ul>
        {% endcall %}

        <!-- Help Modal for Disk Past Week -->
        {% call utils.bootstrap_modal('disk-per-cpu-modal', 'About: Disk per CPU') %}
            <p>Displays the ratio between disk and cpus allocated to and contributed by EPs at this site.</p>
            <ul>
                <li>Disk per CPU - Allocated: Amount of disk (in GB) allocated to EPs running at this site for each CPU allocated to those EPs.</li>
                <li>Disk per CPU - Contributed: disk (in GB) utilized by jobs running at this site for each CPU utilized by those jobs.</li>
            </ul>
        {% endcall %}

        <!-- Help Modal for Groups Served Per Day -->
        {% call utils.bootstrap_modal('groups-per-day-modal', 'About: Groups Served per Day') %}
            <p>Displays the count of different organizational units that have utilized resources at this site.</p>
        {% endcall %}

        <!-- Help Modal for Resources Past Day -->
        {% call utils.bootstrap_modal('resources-per-day-modal', 'About: CPU (l), Memory (r), Disk (r) Allocated per Day') %}
            <p>
                Displays the sum total of resources allocated by the site per day, multiplied by the duration
                for which they were allocated. For example, if 4 CPUs were allocated for 5 hours, that would 
                contribute 20 CPU Hours to the total for that day.
            </p>
        {% endcall %}

        <!-- Help Modal for Resource Limited Glideins per day -->
        {% call utils.bootstrap_modal('resource-limited-per-day-modal', 'About: Maximum Concurrent Resource-Limited Glideins Per Day') %}
            <p>
                For each resource type, display the maximum percentage of running Execution Points (EPs)
                that were limited by that resource on a given day. Here, "limited" is defined as having over 
                90% of a resource allocated to the EP used by running jobs. 
            </p>
            <p>
                For example, if an EP has 16 GB of memory and jobs running on the EP occupy 15 GB of memory, 
                then the EP would be considered memory-limited. If 8 of the 10 EPs running at the site were memory-limited, 
                then the site would be 80% memory-limited at that time.
            </p>
            <p>
                Values displayed are the maximum percentages observed on that day. If, at any point in the day,
                90% of concurrently running EPs were CPU-limited, the value for that day would be 90%.
            </p>
        {% endcall %}

        <!-- Help Modal for EPs Running Past Week -->
        {% call utils.bootstrap_modal('eps-past-week-modal', 'About: Running Execution Points Past Week') %}
            <p>
                Displays the count of running execution points at this site.
            </p>
        {% endcall %}

        <!-- Help Modal for Cpu Allocation Percentage by Project -->
        {% call utils.bootstrap_modal('allocation-modal', 'About: CPU Allocation Percentage by Project') %}
            <p>
                For the given time range (day, week, or month), display the percentage of total CPU allocation
                at the site used by each project that ran jobs at the site.
            </p>
        {% endcall %}

    </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 %}