client_management/app/views/admin/site_panel/_certs_table.html.erb

<table class="table table-bordered main-list default">
  <thead>
    <tr>
      <th><%=t('client_management.upload_date')%></th>
      <th><%=t('client_management.status')%></th>
      <th><%=t('client_management.start_date')%></th>
      <th><%=t('client_management.end_date')%></th>
      <th><%=t('client_management.domain_name')%></th>
      <th><%=t('client_management.cert_file')%></th>
      <th><%=t('client_management.ca_bundle')%></th>
      <th><%=t('client_management.private_key')%></th>
      <th><%=t('client_management.action')%></th>
    </tr>
  </thead>
  <tbody>
    <% @site_certs.each do |site_cert| %>
      <tr>
        <td><%=site_cert.upload_date %></td>
        <td>
          <span class="<%=site_cert.is_valid ? 'valid_icon' : 'invalid_icon' %>" aria-hidden="true"></span>
          <%= site_cert.invalid_message %>
        </td>
        <td><%=site_cert.display_start_date %></td>
        <td><%=site_cert.display_end_date %></td>
        <td><%=site_cert.display_domain_names %></td>
        <td><%=site_cert.generate_file_link('cert_file')%></td>
        <td><%=site_cert.generate_file_link('ca_bundle')%></td>
        <td><%=site_cert.generate_file_link('private_key')%></td>
        <td>
          <%= link_to t("client_management.batch_install"),"#",:class=>"btn btn-success btn-small batch_install_cert",:data=>{:id=>site_cert.id.to_s} %>
          <%= link_to t(:edit),admin_site_panel_edit_cert_path(site_cert.id),:class=>"btn btn-primary btn-small" %>
          <%= link_to t(:delete_),admin_site_panel_destroy_cert_path(site_cert.id),:class=>"btn btn-danger btn-small",:data=>{:method=>"delete",:confirm=>t("client_management.confirm_delete")} %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>
<div class="bottomnav clearfix">
  <div class="pagination pagination-centered"><%=paginate(@site_certs)%></div>
  <a class="btn btn-primary pull-right" href="<%=upload_cert_admin_site_panel_index_path%>" title="<%=t('client_management.upload_cert')%>"><%=t('client_management.upload_cert')%></a>
</div>
<style type="text/css">
  .valid_icon:before {
    content: "✔";
    font-weight: bold;
    color: green;
    font-size: 2em;
  }
  .invalid_icon:before {
    content: "✖";
    font-weight: bold;
    color: red;
    font-size: 2em;
  }
</style>
<script>
  var close_info = false;
  var timeout_id;
  var cert_id;
  var status_relation = {"starting":"<span style=\"color: skyblue;\">starting</span>","execing":"<span style=\"color: skyblue;\">execing</span>","detecting":"<span style=\"color: skyblue;\">detecting</span>","error":"<span style=\"color: red;\">error</span>","finish": "<span style=\"color: darkseagreen;\">finish</span>","closed":"<span style=\"color: red;\">closed</span>"};
  $(".batch_install_cert").off('click').on('click',function(){
    cert_id = $(this).data("id");
    $.post("<%=admin_site_panel_edit_server_info_path%>",{"type":"get_server_names"}).done(function(server_names){
      var server_names = Array.isArray(server_names) ? server_names : [];
      show_exec_commands_block(server_names);
    })
  });
  function show_exec_commands_block(server_names){
    if($("#batch_install_cert-dialog-confirm").length == 0){
      $("#main-wrap").before("<div id='batch_install_cert-dialog-confirm' title='Select servers need to install this cert'>"+
                    "<div style='clear: both;'></div><div class='control-group'><label style='font-size: 1.2em; font-weight: bold;'><%= check_box_tag("redirect_to_https",1,(@site_construct.redirect_to_https rescue false)).gsub('"',"'").html_safe %><%=t("client_management.redirect_to_https")%></label></div><div id='server_names_block'></div></div>");
    };
    $( "#batch_install_cert-dialog-confirm" ).dialog({
      resizable: true,
      minHeight: 300,
      maxHeight: 400,
      modal: true,
      width: '80%',
      open: function(){
        $(this).parent().css("top",$(document).height() - $(window).height() + "px");
      },
      close: function(){$( this ).dialog( "close" );},
      buttons: {
      "<%= t(:submit) %>": function(){$( this ).dialog( "close" );exec_commands()},
      }
    });
    $("#server_names_block").html($.map(server_names,function(server_name){
      return "<input style='float: left;' class='server_name_checkbox' type='checkbox' id='server_name_"+server_name+"'><label style='float: left;' for='server_name_"+server_name+"'>"+server_name+"</label>"
    }))
  }
  function exec_commands(){
    var server_names = [];
    var $els = $(".server_name_checkbox");
    for(var i = 0; i < $els.length; i++){
      if($els.eq(i).prop("checked")){
        console.log($els.eq(i));
        server_names.push($("label[for='"+$els.eq(i).attr('id')+"']").text().trim());
      }
    }
    var redirect_to_https = ($('#batch_install_cert-dialog-confirm [name="redirect_to_https"]:checked').length != 0);
    $.post("<%=admin_site_panel_edit_site_path%>",{'server_names':server_names,'type':'select_cert', 'is_server': true, 'site_cert_id': cert_id, 'redirect_to_https': redirect_to_https}).done(function(){
     show_infos_dialog("batch_install_certs");
    });
  }
  function see_infos(key){
    key = key || "";
    if(!close_info){
      var request = $.post("<%=admin_site_panel_edit_server_info_path%>",{"type":'see_infos',"key":key});
      request.done(function(data){
        var infos = request.responseJSON.infos;
        var status = request.responseJSON.status;
        if($("#info_texts").length == 0)
          return infos.join("<br>")
        else{
          if(status == "")
            var status_text = "not yet create";
          else
            var status_text = status_relation[status];
          if(!status_text){
            status_text = "<span style=\"color: skyblue;\">"+status+"</span>";
          }
          $("#info_texts").html(status_text+"<div style='clear:both;'></div>"+infos.join("<br>"));
          msg_end.scrollIntoView();
          timeout_id = window.setTimeout(see_infos(key),1000);
        }
      })
    }else{
      window.clearTimeout(timeout_id);
    }
  };
  function show_infos_dialog(key){
    key = key || "";
    close_info = true;
    window.clearTimeout(timeout_id);
    close_info = false;
    if($("#dialog-confirm").length == 0){
      $("#main-wrap").before("<div id='dialog-confirm' title='site infos'>"+
                    "<div style='clear:both;'></div><div id='info_texts'>"+see_infos(key)+"</div><div id='msg_end' style='height:0px; overflow:hidden'></div>"+
                    "</div>");
    }else{
      see_infos(key);
    };
    $( "#dialog-confirm" ).dialog({
      resizable: true,
      minHeight: 100,
      maxHeight: 400,
      width: '80%',
      modal: true,
      open: function(){
        $(this).parent().css("top",$(document).height() - $(window).height() + "px");
      },
      close: function(){close_info = true;},
      buttons: {
      "<%= t('client_management.confirm') %>": function(){$( this ).dialog( "close" );close_info = true;},
      "stop update": function(){close_info = true;}
      }
    });
  }
</script>