/* -------------------------------------------------------------------------- */
/* Copyright 2002-2015, OpenNebula Project (OpenNebula.org), C12G Labs        */
/*                                                                            */
/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
/* not use this file except in compliance with the License. You may obtain    */
/* a copy of the License at                                                   */
/*                                                                            */
/* http://www.apache.org/licenses/LICENSE-2.0                                 */
/*                                                                            */
/* Unless required by applicable law or agreed to in writing, software        */
/* distributed under the License is distributed on an "AS IS" BASIS,          */
/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
/* See the License for the specific language governing permissions and        */
/* limitations under the License.                                             */
/* -------------------------------------------------------------------------- */


var empty_graph_placeholder =
  '<span class="fa-stack fa-2x" style="color: #dfdfdf">'+
    '<i class="fa fa-cloud fa-stack-2x"></i>'+
    //'<i class="fa fa-info-circle fa-stack-1x fa-inverse"></i>'+
  '</span>'+
  '<br>'+
  '<span style="color: #cfcfcf">'+
    tr("There is no information available")+
  '</span>';

var dashboard_tab_content = 
  '<div>\
    <div id="one_per_row">\
    </div>\
    <div id="three_per_row" class="row">\
    </div>\
    <div id="two_per_row" class="row">\
    </div>\
    <div id="one_footer">\
    </div>\
  </div>';

var widgets = {
  "storage" : '<h5 class="subheader"><i class="fa fa-fw fa-lg fa-upload"></i> '+tr("Storage")+'</h5>\
        <div class="row totals-info dashboard-widget-footer">\
            <div class="small-6 large-6 columns text-right">\
              <h4 class="subheader">\
              <span class="total_images subheader"></span><br>\
              <span class="size_images subheader"></span>\
              </h4>\
            </div>\
            <div class="small-6 large-6 columns text-left">\
              <h4 class="subheader">\
              <small>'+tr("IMAGES")+'</small><br>\
              <small>'+tr("USED")+'</small>\
              </h4>\
            </div>\
        </div>',
  "users" : '<h5 class="subheader"><i class="fa fa-fw fa-lg fa-user"></i> '+tr("Users")+'</h5>\
        <div class="row totals-info">\
          <div class="large-3 small-3 columns">\
            <div class="small-6 large-6 columns text-right">\
              <h4 class="subheader">\
              <span class="subheader total_users">-</span><br>\
              <span class="subheader total_groups">-</span>\
              </h4>\
            </div>\
            <div class="small-6 large-6 columns text-left">\
              <h4 class="subheader">\
              <small>'+tr("USERS")+'</small><br>\
              <small>'+tr("GROUPS")+'</small>\
              </h4>\
            </div>'+
          '</div>'+
          '<div class="large-9 small-9 columns" id="dashboard_vdc_user_accounting">'+
            '<input style="display:none;" value="user" id="acct_group_by"/>'+
            '<div class="small-6 large-6 columns">'+
                '<h3 class="subheader"><small>'+tr("CPU hours")+'</small></h3>'+
                '<div class="large-12 columns centered graph text-center" id="acct_cpu_graph" style="height: 100px;">'+
                  empty_graph_placeholder +
                '</div>'+
            '</div>'+
            '<div class="small-6 large-6 columns">'+
                '<h3 class="subheader"><small>'+tr("Memory GB hours")+'</small></h3>'+
                '<div class="large-12 columns centered graph text-center" id="acct_mem_graph" style="height: 100px;">'+
                  empty_graph_placeholder +
                '</div>'+
            '</div>'+
          '</div>'+
        '</div>\
        <div class="row dashboard-widget-footer">\
            <div class="small-3 large-3 columns text-center">\
            </div>\
            <div class="small-9 large-9 columns text-center">\
              <br>\
              <a class="button secondary radius large-3 small show_users_tab"><i class="fa fa-lg fa-list fa-fw"></i> ' + tr("Users") + '</a>\
              <a class="button secondary radius large-3 small show_create_user"><i class="fa fa-lg fa-plus fa-fw"></i> ' + tr("Create") + '</a>\
            </div>\
        </div>',
  "network" : '<h5 class="subheader"><i class="fa fa-fw fa-lg fa-sitemap"></i> '+tr("Network")+'</h5>\
        <div class="row totals-info dashboard-widget-footer">\
            <div class="small-6 large-6 columns text-right">\
              <h4 class="subheader">\
              <span class="total_vnets subheader"></span><br>\
              <span class="addresses_vnets subheader"></span>\
              </h4>\
            </div>\
            <div class="small-6 large-6 columns text-left">\
              <h4 class="subheader">\
              <small>'+tr("VNETS")+'</small><br>\
              <small>'+tr("USED IPs")+'</small>\
              </h4>\
            </div>\
        </div>',
  "hosts" : '<h5 class="subheader"><i class="fa fa-fw fa-lg fa-hdd-o"></i> '+tr("Hosts")+'</h5>\
        <div class="row  totals-info">\
          <div class="small-3 large-3 columns centered">\
            <div class="small-6 large-6 columns text-right">\
              <h4 class="subheader">\
                <span class="total_hosts subheader"/><br>\
                <span class="on_hosts subheader success-color"/><br>\
                <span class="off_hosts subheader"/><br>\
                <span class="error_hosts subheader alert-color"/><br>\
              </h4>\
            </div>\
            <div class="small-6 large-6 columns text-left">\
              <h4 class="subheader">\
                <small>'+tr("TOTAL")+'</small><br>\
                <small class="success-color">'+tr("ON")+'</small><br>\
                <small>'+tr("OFF")+'</small><br>\
                <small class="alert-color">'+tr("ERROR")+'</small><br>\
              </h4>\
            </div>\
          </div>\
          <div class="small-9 large-9 columns">\
            <div class="row">\
              <div class="small-6 large-6 columns">\
                <div id="dashboard_host_allocated_cpu" style="padding: 0px 40px">\
                </div>\
                <br>\
                <div id="dashboard_host_real_cpu" style="padding: 0px 40px">\
                </div>\
              </div>\
              <div class="small-6 large-6 columns">\
                <div id="dashboard_host_allocated_mem" style="padding: 0px 40px">\
                </div>\
                <br>\
                <div id="dashboard_host_real_mem" style="padding: 0px 40px">\
                </div>\
              </div>\
            </div>\
          </div>\
        </div>\
        <div class="row dashboard-widget-footer">\
            <div class="small-3 large-3 columns text-center">\
            </div>\
            <div class="small-9 large-9 columns text-center">\
              <br>\
              <a class="button secondary radius large-3 small show_hosts_tab"><i class="fa fa-lg fa-list fa-fw"></i> ' + tr("Hosts") + '</a>\
              <a class="button secondary  radius large-3 small show_create_host"><i class="fa fa-lg fa-plus fa-fw"></i> ' + tr("Create") + '</a>\
            </div>\
        </div>',
  "vms" : '<h5 class="subheader"><i class="fa fa-fw fa-lg fa-th"></i> '+tr("Virtual Machines")+'</h5>\
        <div class="row totals-info">\
          <div class="small-3 large-3 columns">\
            <div class="small-6 large-6 columns text-right">\
              <h4 class="subheader">\
              <span class="subheader total_vms"></span><br>\
              <span class="subheader active_vms success-color"></span><br>\
              <span class="subheader pending_vms"></span><br>\
              <span class="subheader failed_vms alert-color"></span>\
              </h4>\
            </div>\
            <div class="small-6 large-6 columns text-left">\
              <h4 class="subheader">\
              <small>'+tr("TOTAL")+'</small><br>\
              <small class="success-color">'+tr("ACTIVE")+'</small><br>\
              <small>'+tr("PENDING")+'</small><br>\
              <small class="alert-color">'+tr("FAILED")+'</small>\
              </h4>\
            </div>\
          </div>'+
          '<div class="large-9 small-9 columns" id="dashboard_vm_accounting">'+
            '<input style="display:none;" value="vm" id="acct_group_by"/>'+
            '<div class="small-6 large-6 columns">'+
                '<h3 class="subheader"><small>'+tr("CPU hours")+'</small></h3>'+
                '<div class="large-12 columns centered graph text-center" id="acct_cpu_graph" style="height: 100px;">'+
                  empty_graph_placeholder +
                '</div>'+
            '</div>'+
            '<div class="small-6 large-6 columns">'+
                '<h3 class="subheader"><small>'+tr("Memory GB hours")+'</small></h3>'+
                '<div class="large-12 columns centered graph text-center" id="acct_mem_graph" style="height: 100px;">'+
                  empty_graph_placeholder +
                '</div>'+
            '</div>'+
          '</div>'+
        '</div>'+
        '<div class="row dashboard-widget-footer">\
            <div class="small-3 large-3 columns text-center">\
            </div>\
            <div class="small-9 large-9 columns text-center">\
              <br>\
              <a class="button secondary radius large-3 small show_vms_tab"><i class="fa fa-lg fa-list fa-fw"></i> ' + tr("VMs") + '</a>\
              <a class="button secondary radius large-3 small show_create_vm"><i class="fa fa-lg fa-plus fa-fw"></i> ' + tr("Create") + '</a>\
            </div>\
        </div>',
  "user_quotas" : '<h5 class="subheader"><i class="fa fa-fw fa-lg fa-align-left"></i> '+tr("User Quotas")+'</h5>\
      <div class="row totals-info dashboard-widget-footer" id="quotas_tab_user">\
        <div class="large-12 small-12 columns">'+
          '<div class="row">'+
            '<div class="large-8 large-centered columns">'+
              '<div class="text-center">'+
                '<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
                  '<i class="fa fa-cloud fa-stack-2x"></i>'+
                  '<i class="fa fa-align-left fa-stack-1x fa-inverse"></i>'+
                '</span>'+
                '<br>'+
                '<p style="font-size: 18px; color: #999">'+
                  tr("There are no quotas defined")+
                '</p>'+
              '</div>'+
            '</div>'+
          '</div>'+
        '</div>\
      </div>',
  "group_quotas" : '<h5 class="subheader"><i class="fa fa-fw fa-lg fa-align-left"></i> '+tr("Group Quotas")+'</h5>\
        <div id="quotas_tab_group_TabBody" class="row">\
          <div class="large-12 columns">'+
            '<div class="row">'+
              '<div class="large-8 large-centered columns">'+
                '<div class="text-center">'+
                  '<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
                    '<i class="fa fa-cloud fa-stack-2x"></i>'+
                    '<i class="fa fa-align-left fa-stack-1x fa-inverse"></i>'+
                  '</span>'+
                  '<br>'+
                  '<p style="font-size: 18px; color: #999">'+
                    tr("There are no quotas defined")+
                  '</p>'+
                '</div>'+
              '</div>'+
            '</div>'+
          '</div>\
        </div>\
        <div class="row dashboard-widget-footer">\
          <div class="large-12 columns">\
            <label>' + tr("Select group") + ':\
              <div id="quotas_tab_group_sel">\
              </div>\
            </label>\
          </div>\
        </div>',
  "accounting" : '<h5 class="subheader"><i class="fa fa-fw fa-lg fa-bar-chart-o"></i> '+tr("Accounting")+'</h5>\
        <div class="row dashboard-widget-footer">\
            <div id="user_dashboard_info_acct_div" class="large-12 columns columns">\
            </div>\
        </div>'
}

var widget_refresh = {
    "storage" : function(){
            Sunstone.runAction("Datastore.list");
        },
    "users" : function(){
            Sunstone.runAction("User.list");

            var start_time =  Math.floor(new Date().getTime() / 1000);
            // ms to s

            // 604800 = 7 days = 7*24*60*60
            start_time = start_time - 604800;

            // today
            var end_time = -1;

            var options = {
              "start_time": start_time,
              "end_time": end_time
            }

            var no_table = true;

            OpenNebula.VM.accounting({
                success: function(req, response){
                    fillAccounting($("#dashboard_vdc_user_accounting"), req, response, no_table);
                },
                error: onError,
                data: options
            });
        },
    "network" : function(){
            Sunstone.runAction("Network.list");
        },
    "hosts" : function(){
            Sunstone.runAction("Host.list");
        },
    "vms" : function(){
            Sunstone.runAction("VM.list");

            var start_time =  Math.floor(new Date().getTime() / 1000);
            // ms to s

            // 604800 = 7 days = 7*24*60*60
            start_time = start_time - 604800;

            // today
            var end_time = -1;

            var options = {
              "start_time": start_time,
              "end_time": end_time
            }

            var no_table = true;

            OpenNebula.VM.accounting({
                success: function(req, response){
                    fillAccounting($("#dashboard_vm_accounting"), req, response, no_table);
                },
                error: onError,
                data: options
            });
        },
    "accounting" : function(){
    },
    "user_quotas" : refreshDashboardUserQuotas,
    "group_quotas" : refreshDashboardGroupQuotas
}

var dashboard_tab_actions = {
    "Dashboard.refresh" : {
        type: "custom",
        call: refreshDashboard
    },
    "dashboard-tab.refresh" : {
        type: "custom",
        call: refreshDashboard
    },
}

var quotas_tab_buttons = {
    "Dashboard.refresh" : {
        type: "action",
        layout: "refresh",
        alwaysActive: true
    },
    "Sunstone.toggle_top" : {
        type: "custom",
        layout: "top",
        alwaysActive: true
    }
}

var dashboard_tab = {
    title: '<i class="fa fa-lg fa-fw fa-tachometer"></i>&emsp;'+tr("Dashboard"),
    buttons: quotas_tab_buttons,
    content: dashboard_tab_content,
    showOnTopMenu: false,
    list_header: '<i class="fa fa-fw fa-tachometer"></i>&emsp;'+tr("Dashboard")
}

Sunstone.addActions(dashboard_tab_actions);
Sunstone.addMainTab('dashboard-tab',dashboard_tab);

var $dashboard;

// Quotas calls

function fillUserQuotasInfo(){
    OpenNebula.User.show({
        data : {
            id: '-1'
        },
        success: updateUserQuotasInfo
    });
}

var dashboard_current_gid = "-1";

function updateUserQuotasInfo(request,user_json) {
    var info = user_json.USER;

    dashboard_current_gid = user_json.USER.GID;

    var default_user_quotas = Quotas.default_quotas(info.DEFAULT_USER_QUOTAS)
    var quotas_tab_html = Quotas.vms(info, default_user_quotas);
    quotas_tab_html += Quotas.cpu(info, default_user_quotas);
    quotas_tab_html += Quotas.memory(info, default_user_quotas);
    quotas_tab_html += Quotas.volatile_size(info, default_user_quotas);
    quotas_tab_html += Quotas.image(info, default_user_quotas);
    quotas_tab_html += Quotas.network(info, default_user_quotas);
    quotas_tab_html += Quotas.datastore(info, default_user_quotas);

    if (emptyQuotas(info)) {
        quotas_tab_html = '<div class="row">'+
                    '<div class="large-8 large-centered columns">'+
                      '<div class="text-center">'+
                        '<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
                          '<i class="fa fa-cloud fa-stack-2x"></i>'+
                          '<i class="fa fa-align-left fa-stack-1x fa-inverse"></i>'+
                        '</span>'+
                        '<br>'+
                        '<p style="font-size: 18px; color: #999">'+
                          tr("There are no quotas defined")+
                        '</p>'+
                      '</div>'+
                    '</div>'+
                  '</div>'
    }

    $("#quotas_tab_user", $dashboard).html(quotas_tab_html);
}

function fillGroupQuotasInfo(group_id){
      OpenNebula.Group.show({
        data : {
            id: group_id
        },
        success: updateGroupQuotasInfo
      });
}

function updateGroupQuotasInfo(request,group_json){
    var info = group_json.GROUP;

    var default_group_quotas = Quotas.default_quotas(info.DEFAULT_GROUP_QUOTAS);

    var quotas_tab_html = Quotas.vms(info, default_group_quotas);
    quotas_tab_html += Quotas.cpu(info, default_group_quotas);
    quotas_tab_html += Quotas.memory(info, default_group_quotas);
    quotas_tab_html += Quotas.volatile_size(info, default_group_quotas);
    quotas_tab_html += Quotas.image(info, default_group_quotas);
    quotas_tab_html += Quotas.network(info, default_group_quotas);
    quotas_tab_html += Quotas.datastore(info, default_group_quotas);

    if (emptyQuotas(info)) {
        quotas_tab_html = '<div class="row">'+
                    '<div class="large-8 large-centered columns">'+
                      '<div class="text-center">'+
                        '<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
                          '<i class="fa fa-cloud fa-stack-2x"></i>'+
                          '<i class="fa fa-align-left fa-stack-1x fa-inverse"></i>'+
                        '</span>'+
                        '<br>'+
                        '<p style="font-size: 18px; color: #999">'+
                          tr("There are no quotas defined")+
                        '</p>'+
                      '</div>'+
                    '</div>'+
                  '</div>'
    }

    $("#quotas_tab_group_TabBody", $dashboard).html(quotas_tab_html);
}

function refreshDashboardUserQuotas(){
    fillUserQuotasInfo();
}

function refreshDashboardGroupQuotas(){
    gid = $("#quotas_tab_group_sel .resource_list_select", $dashboard).val();

    if (gid == "" || gid == undefined){
        gid = dashboard_current_gid;
    }

    fillGroupQuotasInfo(gid);

    insertSelectOptions('div#quotas_tab_group_sel', $dashboard, "Group", gid, false);
}

function refreshDashboard(){
    widget_types = ['widgets_three_per_row', 'widgets_two_per_row',
        'widgets_one_per_row', 'widgets_one_footer'];

    $.each(widget_types, function(index, widget_type){
        $.each(Config.dashboardWidgets(widget_type), function(id, widget){
            widget_refresh[widget]();
        })
    });
}

$(document).ready(function(){
    var tab_name = 'dashboard-tab';

    if (Config.isTabEnabled(tab_name)) {
        $dashboard = $('#dashboard-tab', main_tabs_context);

        $.each(Config.dashboardWidgets('widgets_three_per_row'), function(id, widget){
            var html = '<div class="small-4 large-4 columns">'+widgets[widget]+'</div>';
            $('#three_per_row', $dashboard).append(html);
        })

        $.each(Config.dashboardWidgets('widgets_two_per_row'), function(id, widget){
            var html = '<div class="small-6 large-6 columns">'+widgets[widget]+'</div>';
            $('#two_per_row', $dashboard).append(html);
        })

        $.each(Config.dashboardWidgets('widgets_one_per_row'), function(id, widget){
            var html = '<div class="row"><div class="large-12 columns">'+widgets[widget]+'</div></div>';
            $('#one_per_row', $dashboard).append(html);
        })

        $.each(Config.dashboardWidgets('widgets_one_footer'), function(id, widget){
            var html = '<div class="row"><div class="large-12 columns">'+widgets[widget]+'</div></div>';
            $('#one_footer', $dashboard).append(html);
        });

        $dashboard.off("change", "#quotas_tab_group_sel .resource_list_select");
        $dashboard.on("change", "#quotas_tab_group_sel .resource_list_select", function() {
            var value_str = $(this).val();
            if(value_str!="")
            {
                fillGroupQuotasInfo(value_str);
            }
        });

        $(".show_vms_tab").on("click", function(){
          showTab('vms-tab');
          return false;
        })

        $(".show_hosts_tab").on("click", function(){
          showTab('hosts-tab');
          return false;
        })

        $(".show_users_tab").on("click", function(){
          showTab('users-tab');
          return false;
        })

        $(".show_create_vm").on("click", function(){
          window.scrollTo(0, 0);
          popUpCreateVMDialog();
          return false;
        })

        $(".show_create_host").on("click", function(){
          window.scrollTo(0, 0);
          popUpCreateHostDialog();
          return false;
        })

        $(".show_create_user").on("click", function(){
          window.scrollTo(0, 0);
          popUpCreateUserDialog();
          return false;
        })

        accountingGraphs(
            $("#user_dashboard_info_acct_div"),
            {   fixed_user: config["user_id"],
                fixed_group_by: "vm"
            }
        );

        $(document).foundation();
    }
});
