[%
USE Api2;
SET CPANEL.CPVAR.dprefix = "../";
SET usage_data = Api2.exec("LVEInfo", "getUsage2", {period=FORM.period, timeUnit=FORM.timeUnit});
SET summary_data = Api2.exec("LVEInfo", "getSummary", {lveinodes=CPANEL.CPCONF.item('lve_showinodeusage')});

%]

[% css_code = PROCESS css_block %]
[% WRAPPER '_assets/master.html.tt'
    page_title = "Resource Usage Overview"
    page_styles = css_code
    include_legacy_stylesheets = 0
    include_legacy_scripts = 1
    include_cjt = 1
    page_scripts = ["js/x3main_optimized.js", "/3rdparty/cloudlinux/clutils.js"]
    page_stylesheets = ["css2-min/index.css"]
    hide_page_heading = 1
    app_key = "resourceusage"
%]

[%js_block %]
<div class="body-content">
<div>
<table align="center">
<caption>[% locale.maketext("Current Usage") %]</caption>
<thead><tr>
    <th>[% locale.maketext("Description") %]</th>
    <th>[% locale.maketext("Usage") %]</th>
    <th>[% locale.maketext("Limit") %]</th>
    <th>[% locale.maketext("Fault") %]</th>
</tr></thead>
<tbody>
[% FOR line IN summary_data %]
   <tr>
   <td>[% line.title %]</td>
   <td>[% line.usage %]</td>
   <td>[% line.limit %]</td>
   <td>[% line.faults %]</td>
   </tr>
[% END %]
</tbody>
</table>
<br/><br/>
</div>

<div align="center">
<form method="get">
[% locale.maketext("Timeframe") %]:
    <select id='period' name='period' size='1'>
        <option value='10m'>[% locale.maketext("Last 10 minutes") %]</option>
        <option value='30m'>[% locale.maketext("Last 30 minutes") %]</option>
        <option value='1h'>[% locale.maketext("Last hour") %]</option>
        <option value='4h'>[% locale.maketext("Last 4 hours") %]</option>
        <option value='1d'>[% locale.maketext("Last 24 hours") %]</option>
        <option value='today'>[% locale.maketext("Today") %]</option>
        <option value='yesterday'>[% locale.maketext("Yesterday") %]</option>
        <option value='7d'>[% locale.maketext("Last 7 days") %]</option>
        <option value='30d'>[% locale.maketext("Last 30 days") %]</option>
    </select>
[% locale.maketext("Time unit") %]:
        <select id='timeUnit' name='timeUnit' size='1'>
            <option value='1d'>
                [% locale.maketext("Days") %]
            </option>
            <option value='1h'>
                [% locale.maketext("Hours") %]
            </option>
            <option value='1m'>
                [% locale.maketext("Minutes") %]
            </option>
        </select>

    <input type="submit" value="[% locale.maketext("Submit") %]" />
</form>

<script type="text/javascript">
var periodElement = document.getElementById('period');
var periodOptions = periodElement.options;
var period = '[% FORM.period %]';
var timeUnitElement = document.getElementById('timeUnit');
var timeUnitOptions = timeUnitElement.options;
var timeUnit = '[% FORM.timeUnit %]';
var chart_stats_url = "[% CPANEL.ENV.cp_security_token %]/3rdparty/cloudlinux/lvechart.cgi?period=[% FORM.period %]";
if (period == '') {
  period = '1d';
}
if (timeUnit == '') {
  timeUnit = '1h';
}
for (var i = 0; i < periodOptions.length; i++) {
  if (periodOptions[i].value == period) {
            periodElement.selectedIndex=i;
            break;
  }
}
for (var i = 0; i < timeUnitOptions.length; i++) {
  if (timeUnitOptions[i].value == timeUnit) {
            timeUnitElement.selectedIndex=i;
            break;
  }
}
function my_loadImage() {
    insertImage(chart_stats_url, 'stats-chart');
}
document.addEventListener("DOMContentLoaded", my_loadImage);
</script>
<div id='stats-chart'></div>
</div>

<div style="text-align: center;"><b>[% locale.maketext("USAGE") %]</b></div>
[% INCLUDE "lveusage.tmpl" return_=usage_data period=FORM.period timeUnit=FORM.timeUnit %]
<script type="text/javascript">
<!--
(function(win){
    var doc     = win.document,
        cpanel = doc.getElementById('content'),
        cpanelWidth = parseInt(win.getComputedStyle(cpanel,null).width),
        lveTable = doc.getElementById('lve-table'),
        lveTableWidth = parseInt(win.getComputedStyle(lveTable,null).width),
        headitems   = doc.getElementById("lve-table-head")
                         .getElementsByTagName("td"),
        tbody       = doc.getElementById("lve-table-body"),
        trows       = Array.prototype.slice.call(tbody.getElementsByTagName("tr"),0);

        if ( ( cpanelWidth - 40 ) < lveTableWidth ) {
            cpanel.style.width=(lveTableWidth+60)+'px';
        }


        for ( var h in headitems ) {
            if ( headitems[h].className === undefined || headitems[h].className.indexOf('lve-sortable') < 0 ) continue;
            headitems[h].onclick = function(e){
                var findSortKey,
                    dir = 0,
                    colindex = 0,
                    pSib = e.target,
                    i,
                    tClassName;

                while ( pSib.previousElementSibling ) {
                    pSib = pSib.previousElementSibling;
                    colindex += 1;
                }

                if ( e.target.className.indexOf('lve-non-sorted') >= 0 ) {
                    for ( var hi in headitems ) {
                        if ( headitems[hi].className === undefined || headitems[hi].className.indexOf('lve-sortable') < 0 ) continue;
                        tClassName = headitems[hi].className;
                        tClassName = tClassName.replace('lve-sorted-asc',"");
                        tClassName = tClassName.replace('lve-sorted-desc',"");
                        if ( tClassName.indexOf('lve-non-sorted') < 0 )
                            tClassName += 'lve-non-sorted';
                        headitems[hi].className = tClassName;
                    }
                    tClassName = e.target.className;
                    tClassName = tClassName.replace('lve-non-sorted',"");
                    tClassName += 'lve-sorted-desc';
                    e.target.className = tClassName;
                    dir = -1;
                }
                else if ( e.target.className.indexOf('lve-sorted-asc') >= 0 ) {
                    tClassName = e.target.className;
                    tClassName = tClassName.replace('lve-sorted-asc',"");
                    tClassName += 'lve-sorted-desc';
                    e.target.className = tClassName;
                    dir = -1;
                }
                else if ( e.target.className.indexOf('lve-sorted-desc') >= 0 ) {
                    tClassName = e.target.className;
                    tClassName = tClassName.replace('lve-sorted-desc',"");
                    tClassName += 'lve-sorted-asc';
                    e.target.className = tClassName;
                    dir = 1;
                }
                if ( e.target.className.indexOf('alpha') >= 0 ) {
                    findSortKey = function(cellitem){
                        var ct = cellitem.firstChild.nodeValue;
                        return ct.toUpperCase();
                    };
                }
                else if ( e.target.className.indexOf('num') >= 0 ) {
                    findSortKey = function(cellitem){
                        var ct = cellitem.firstChild.nodeValue;
                        return isNaN(ct) ? 0 : parseFloat(ct);
                    };
                }
                else if ( e.target.className.indexOf('date') >= 0 ) {
                    findSortKey = function(cellitem){
                        var stripZeroes = function(val){
                           if ( ( val.length > 1 ) && ( val.substr(0,1) == "0" ) ) {
                               return val.substr(1);
                           }
                           else {
                               return val;
                           }
                        };
                        var ct  = cellitem.firstChild.nodeValue,
                            d   = new Date(),
                            year= d.getFullYear(),
                            parts = ct.match(/(\d+)-(\d+)\s(\d+):(\d+)/) || [],
                            month = stripZeroes( isNaN(parts[1]) ? 0 : parseInt(parts[1],10) - 1 ),
                            day   = stripZeroes( isNaN(parts[2]) ? 0 : parseInt(parts[2],10) ),
                            hour  = stripZeroes( isNaN(parts[3]) ? 0 : parseInt(parts[3],10) ),
                            min   = stripZeroes( isNaN(parts[4]) ? 0 : parseInt(parts[4],10) );
                        return parseInt(( Date.UTC( year, month, day, hour,min,0 ) / 1000.0 ),10);
                    };
                }
                for ( i=0; i<trows.length; i++ ) {
                    trows[i].sortKey = findSortKey(trows[i].getElementsByTagName("td")[colindex]);
                }
                trows.sort(function(a,b){
                    if(a.sortKey > b.sortKey) return dir == 1 ? -1 : 1;
                    if(a.sortKey < b.sortKey) return dir == 1 ? 1 : -1;
                    return 0;
                });

                while(tbody.firstChild)
                    tbody.removeChild(tbody.firstChild);

                for ( i=0; i<trows.length; i++ ) {
                    var oddity = i % 2 ? 'odd' : 'even';
                    var rowclass = trows[i].className;
                    trows[i].className = rowclass.replace(/(?:odd|even)/,oddity);
                    tbody.appendChild(trows[i]);
                    trows[i].sortKey = null;
                }
            };
        }
}(window));
//-->
</script>
</div>

[% BLOCK css_block %]
<style type="text/css">
table#lve-table {
    border-collapse: separate;
    border-spacing: 0;
}
table#lve-table thead tr.lve-upper td.lve-filled {
     border-bottom: 1px solid #014D5F;
     text-align: center;
     font-weight: bold;
     color: #014D5F;
}
table#lve-table thead tr.lve-lower td {
    color: #014D5F;
    font-weight: bold;
    border-bottom: 2px solid #014D5F;
    height: 16px;
}
table#lve-table thead td.filter {
    text-align: center;
}
table#lve-table tbody td {
    text-align: right;
    padding-right: 4px;
    border-bottom: 1px solid #014D5F;
    border-right: 1px solid #014D5F;
}
table#lve-table tbody td.first-cell {
    border-left: 1px solid #014D5F;
}
td.tdh {
    color: #F00;
}
tr.trh {
    color: #00F;
}
table#lve-table tbody tr.odd {
    background-color: #E6F1F4;
}
td.lve-sortable {
    padding-left: 12px;
    cursor: pointer;
}
td.lve-sorted-asc {
    background: transparent url([% theme_magic_url("/frontend/x3/images/lve/lve_sorted_asc.png") %]) no-repeat scroll 4px 6px;
}
td.lve-sorted-desc {
    background: transparent url([% theme_magic_url("/frontend/x3/images/lve/lve_sorted_desc.png") %]) no-repeat scroll 4px 6px;
}
td.lve-non-sorted {
    background: transparent url([% theme_magic_url("/frontend/x3/images/lve/lve_non_sorted.png") %]) no-repeat scroll 4px 6px;
}
div#lve-form-body {
    width: 400px;
    margin-left: 16%;
}
ul#lve-unlim-list {
    color: #014D5F;
    font-style: italic;
    list-style: square;
}
</style>
[% END #css_block %]

[% END #wrapper %]