{% extends "layout2.html" %}
{% load i18n %}
{% load static %}

{% block css_include %}

{% endblock %}

{% block js_include %}

{% endblock %}


{% block content %}

  <!-- Main content -->
  <section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="panel">
                <div class="panel-heading">
                    <h1 class="panel-title"><i class="fa fa-at">&nbsp;</i>{% translate "Nodes" %}</h1>
                </div>
                <div class="panel-body">
                    <table class="table table-bordered table-striped table-hover table-heading table-datatable" id="node_list">
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
        </div>
    </div>

    <div id="modal_node" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><i class="pci-cross pci-circle"></i></button>
            <h4 class="modal-title">{% translate "Cluster configuration" %}</h4>
          </div>
          <div class="modal-body" style="text-align: center">
            <div class="row">
              <div class="col-sm-12">
                <p id="node_msg"></p>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default btn-flat" data-dismiss="modal">{% translate "Cancel" %}</button>
          </div>
        </div>
      </div>
    </div>

  </section>

{% endblock %}

{% block jquery_code %}

  var datatableCanRedraw = true;

  var aoColumns = [
    {
      sTitle: "ID",
      name: "id",
      aTargets: [0],
      defaultContent: "",
      mData: "id",
      bVisible: false
    },
    {
      sTitle: '{% translate "Name" %}',
      name: "name", aTargets: [1],
      defaultContent: "",
      mData: "name",
      mRender: function(data, type, row) {
        var result = "";

        switch( row.state ) {
            case "UP":
              result += '<img width="16" height="16" src="{% static 'img/status_green.png' %}" class="img_responsive"/>&nbsp;';
              break;
            case "DOWN":
              result += '<img width="16" height="16" src="{% static 'img/status_red.png' %}" class="img_responsive"/>&nbsp;';
              break;
            case "MAINTENANCE":
              result += '<img width="16" height="16" src="{% static 'img/status_orange.png' %}" class="img_responsive"/>&nbsp;';
              break;
          }
          result += data+':<font size="-2">'+row.state+'</font>';

          return result;
      }
    },
    {
      sTitle: '{% translate "Network Interfaces" %}',
      name: "addresses", aTargets: [2],
      defaultContent: "",
      mData: "addresses",
      mRender: function(data, type, row){
        return data.join('<br/>')
      }
    },
     {
      sTitle: '{% translate "MongoDB" %}',
      name: "name", aTargets: [3],
      defaultContent: "",
      mData: "name",
      mRender: function(data, type, row) {
        buffer =  '';
        if (row.mongo_state === "PRIMARY") {
            buffer = buffer + '<label class="label label-success">PRIMARY</label>&nbsp;&nbsp;<button class="btn btn-flat btn-xs btn-danger" id="stepdown" title="{% translate "Step Down" %}"><span><i class="fa fa-chevron-down"></i></span></button>';
        }
        else if (row.mongo_state === "SECONDARY") {
            buffer = buffer + '<label class="label label-warning">SECONDARY</label>';
        }
        else if (row.addresses) {
            buffer = buffer + '<label class="label label-danger">UNKNOWN</label>';
        }
        else {
            buffer = 'Not configured';
        }
        if (!row.is_master_mongo && !row.is_standalone) {
            buffer = buffer + '&nbsp;&nbsp;<a class="btn btn-flat btn-xs btn-danger" id="remove" title="{% translate "Remove from replicaset" %}"><i class="fa fa-unlink"></i></a>';
        }
        else if (!row.is_master_mongo && row.is_standalone && row.addresses) {
            buffer = buffer + '&nbsp;&nbsp;<a class="btn btn-flat btn-xs btn-danger" id="join" title="{% translate "Add to replicaset" %}"><i class="fa fa-link"></i></a>';
        }
        return buffer;
      }
    },
     {
      sTitle: '{% translate "Redis" %}',
      name: "name", aTargets: [4],
      defaultContent: "",
      mData: "name",
      mRender: function(data, type, row) {
        buffer =  '';
        if (row.is_master_redis === true) {
            buffer = buffer + '<label class="label label-success">MASTER</label>';
        }
        else if (row.is_master_redis === false) {
            buffer = buffer + '<label class="label label-warning">REPLICA</label>';
        }
        else if (row.addresses) {
            buffer = buffer + '<label class="label label-danger">UNKNOWN</label>';
        }
        else {
            buffer = 'Not configured';
        }
        return buffer;
      }
    },
    {
      sTitle: '{% translate "Action" %}',
      mData:"id",
      aTargets: [5],
      defaultContent: "",
      mRender: function(data, type, row) {
        result = '';
        if ( !row.is_master_redis && !row.is_master_mongo) {
            result += '&nbsp;&nbsp;<a class="btn btn-flat btn-xs btn-danger" href="/system/cluster/delete/' + row.id + '" title="{% translate "delete" %}"><i class="fas fa-trash-alt"></i></a>';
        }
        return result;
      }
    }
  ];

  var columns = [];
  for (var i in aoColumns){
    var col = aoColumns[i].mData;
    columns.push(col);
  }

  var cluster_table = $("#node_list").dataTable({
      bServerSide   : true,
      order         : [[1, 'desc']],
      iDisplayLength: 10,
      bProcessing   : true,
      bSort         : true,
      sAjaxSource   : '',
      sServerMethod : 'POST',
      aoColumnDefs: aoColumns,
      language: language_datatable,
      fnServerData  : function(sSource, aoData, fnCallback){
        aoData.push({
          name: 'columns',
          value: JSON.stringify(columns)
        })

        $.ajax({
          type   : "POST",
          url    : sSource,
          data   : aoData,
          success: function(data, callback){
            if (check_json_error(data))
              fnCallback(data);
          }
        });
      },
      fnCreatedRow: function(nRow, aData, iDataIndex){

        $(nRow).find(".btn-console").on('click', function(e){
          e.stopPropagation();
        })

        /* REPL Step DOWN */
        $(nRow).find("#stepdown").on("click", function(e) {
          e.stopPropagation();

          $('#node_msg').html('<i class="fas fa-spinner fa-spin"></i>{% translate "Please wait ..." %}');
          $("#modal_node").modal('show');

          var id = aData['id'];
          url = "/system/cluster/stepdown/" + id ;
          $.ajax({
            type   : "GET",
            url    : url,
          }).fail( function( jqXHR, textStatus ) {
            $('#node_msg').html("<b style='color:red;'>{% translate 'Failure: '%}" + textStatus + "</b></br>" +
                                    "Status code : " + jqXHR.status + "</br>" +
                                    "Message : " + jqXHR.responseJSON.error);
          }).done( function( msg ) {
            $('#node_msg').html("<b style='color:green;'>{% translate 'Success: '%}</b><br>" +
                                      "node " + id + " stepped down" );
          });
        });

        /* REMOVE From Cluster */
        $(nRow).find("#remove").on("click", function(e) {
          e.stopPropagation();

          $('#node_msg').html('<i class="fas fa-spinner fa-spin"></i>{% translate "Please wait ..." %}');
          $("#modal_node").modal('show');

          var id = aData['id'];
          url = "/system/cluster/remove/" + id ;
          $.ajax({
            type   : "GET",
            url    : url,
          }).fail( function( jqXHR, textStatus ) {
            $('#node_msg').html("<b style='color:red;'>{% translate 'API request failure: '%}" + textStatus + "</b></br>" +
                                     "Status code : " + jqXHR.status + "</br>" +
                                     "Message : " + jqXHR.statusText);
          }).done( function( msg ) {
            $('#node_msg').html('<p>' + msg['message'] + '</p>')
          });
        });

        /* JOIN into Cluster */
        $(nRow).find("#join").on("click", function(e) {
          e.stopPropagation();

          $('#node_msg').html('<i class="fas fa-spinner fa-spin"></i>{% translate "Please wait ..." %}');
          $("#modal_node").modal('show');

          var id = aData['id'];
          url = "/system/cluster/join/" + id ;
          $.ajax({
            type   : "GET",
            url    : url,
          }).fail( function( jqXHR, textStatus ) {
            $('#node_msg').html("<b style='color:red;'>{% translate 'API request failure: '%}" + textStatus + "</b></br>" +
                                     "Status code : " + jqXHR.status + "</br>" +
                                     "Message : " + jqXHR.statusText);
          }).done( function( msg ) {
            $('#node_msg').html('<p>' + msg['message'] + '</p>')
          });
        });

        /* Events binding to edit a cluster */
        $(nRow).on('click', 'td', function(e) {
          if (e.target.tagName !== "TD") return;
          const url = "/system/cluster/edit/" + aData.id
          /* Open a cluster edition in a new tab with ctrl click */
          if (e.ctrlKey || e.metaKey) {
            window.open(url, '_blank');
          } else {
            window.location.href = url;
          }
        }); // /$(nRow).on('click', 'td'

        /* Open a cluster edition in a new tab with middle click */
        $(nRow).on('mousedown', 'td', function(e){
          if (e.target.tagName === "TD" && e.button === 1) {
            window.open("/system/cluster/edit/" + aData.id, '_blank');
          }
        }); // /$(nRow).on('mousedown', 'td'
      }, // fnCreatedRow: function

      fnDrawCallback: function(settings){
        datatableCanRedraw = true;
      }, // fnDrawCallback: function
  });

  /* Reload table data every 5 seconds if previous one answered */
  setInterval(function(){
    if(datatableCanRedraw == true) {
      datatableCanRedraw = false;
      cluster_table.fnDraw(false);
    }
  }, 5000);

{% endblock %}