{% 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: "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={{ ce_health }}&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: "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: "vAxis.maxValue=3&filter=Type=R&q=Memory&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: "vAxis.maxValue=3&filter=Type=R&q=Disk&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: "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: "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: "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%25&chartArea.right=13%25&chart=column",
                    });
                </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: "filter=Type=P&group=Project;Cpus&filter=Cpus>0&order=-Cpus&chart=pie&tooltip.text=percentage&tooltip.isHtml=false&sliceVisibilityThreshold=0",
						table_query: "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 %}
