jumpserver/apps/assets/templates/assets/asset_group_detail.html

{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block custom_head_css_js %}
    <link href="{% static 'css/plugins/select2/select2.min.css' %}" rel="stylesheet">
    <script src="{% static 'js/plugins/select2/select2.full.min.js' %}"></script>
{% endblock %}
{% block content %}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="panel-options">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="" class="text-center"><i class="fa fa-laptop"></i> {% trans 'Group assets' %} </a></li>
                            <li class="pull-right">
                                <a class="btn btn-outline btn-default" href="{% url 'assets:asset-group-update' pk=asset_group.id %}"><i class="fa fa-edit"></i>{% trans 'Update' %}</a>
                            </li>
                            <li class="pull-right">
                                <a class="btn btn-outline btn-danger btn-del">
                                    <i class="fa fa-trash-o"></i>{% trans 'Delete' %}
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="col-sm-8" style="padding-left: 0">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <span style="float: left">{% trans 'Asset list of ' %} <b>{{ asset_group.name }} </b><span class="badge"> {{ asset_group.assets.all.count }}</span></span>
                                    <div class="ibox-tools">
                                        <a class="collapse-link">
                                            <i class="fa fa-chevron-up"></i>
                                        </a>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                            <i class="fa fa-wrench"></i>
                                        </a>
                                        <ul class="dropdown-menu dropdown-user">
                                        </ul>
                                        <a class="close-link">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="ibox-content">
                                    <table class="table table-hover " id="asset_list_table" >
                                        <thead>
                                            <tr>
                                                <th>{% trans 'Hostname' %}</th>
                                                <th>{% trans 'IP' %}</th>
                                                <th>{% trans 'Port' %}</th>
                                                <th>{% trans 'Alive' %}</th>
	                                            <th>{% trans 'Action' %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4" style="padding-left: 0;padding-right: 0">
                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <i class="fa fa-info-circle"></i> {% trans 'Add assets to this group' %}
                                </div>
                                <div class="panel-body">
                                    <table class="table">
                                        <tbody>
                                        <form>
                                            <tr class="no-borders-tr">
                                                <td colspan="2">
                                                    <select data-placeholder="{% trans 'Select assets' %}" class="select2 asset-select" style="width: 100%" multiple="" tabindex="4">
                                                        {% for asset in assets_remain %}
                                                            <option value="{{ asset.id }}"> {{ asset.hostname }} </option>
                                                        {% endfor %}
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr class="no-borders-tr">
                                                <td colspan="2">
                                                    <button type="button" class="btn btn-primary btn-sm btn-add-asset">{% trans 'Add' %}</button>
                                                </td>
                                            </tr>
                                        </form>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block custom_foot_js %}
<script>
jumpserver.assets_selected = {};
function addAssets(assets) {
    var the_url = "{% url 'api-assets:group-add-assets' pk=asset_group.id %}";
    var body = {
        assets: assets
    };

    var $data_table = $("#asset_list_table").DataTable();
    var success = function(data) {
        $('.select2-selection__rendered').empty();
        $data_table.ajax.reload();
        jumpserver.groups_selected = {};
    };

    APIUpdateAttr({
        url: the_url,
        body: JSON.stringify(body),
        method: 'PUT',
        success: success
    });
}

function leaveGroup(obj, name, url, data) {
        var body = data;
        var success = function() {
            $(obj).parent().parent().remove();
        };
        var fail = function() {
            console.log("Remove failed")
        };
        APIUpdateAttr({
            url: url,
            body: JSON.stringify(body),
            method: 'PATCH',
            success: success,
            error: fail
        });
}

Array.prototype.remove = function(val) {
	var index = this.indexOf(val);
		if (index > -1) {
		this.splice(index, 1);
	}
};

Array.prototype.unique = function(){
	var res = [];
	var json = {};
 	for(var i = 0; i < this.length; i++){
  		if(!json[this[i]]){
   			res.push(this[i]);
   			json[this[i]] = 1;
  		}
 	}
 	return res;
};

function initTable() {
    var options = {
		ele: $('#asset_list_table'),
		buttons: [],
		order: [],
		columnDefs: [
			{targets: 0, createdCell: function (td, cellData, rowData) {
				var detail_btn = '<a href="{% url "assets:asset-detail" pk=DEFAULT_PK %}" data-aid="'+rowData.id+'">' + cellData + '</a>';
				$(td).html(detail_btn.replace('{{ DEFAULT_PK }}', rowData.id));
			}},
			{targets: 3, createdCell: function (td, cellData) {
				if (!cellData) {
					$(td).html('<i class="fa fa-times text-danger"></i>')
				} else {
					$(td).html('<i class="fa fa-check text-navy"></i>')
				}
			}},
			{targets: 4, createdCell: function (td, cellData, rowData) {
				var update_btn = '<a href="{% url "assets:asset-update" pk=DEFAULT_PK %}" class="btn btn-xs btn-info">{% trans "Update" %}</a>'.replace('{{ DEFAULT_PK }}', rowData.id);
				var del_btn = '<a class="btn btn-xs btn-danger m-l-xs btn-leave-group" data-aid="{{ DEFAULT_PK }}">{% trans "Remove" %}</a>'.replace('{{ DEFAULT_PK }}', rowData.id);
				$(td).html(update_btn + del_btn)
			}}
		],
		ajax_url: '{% url "api-assets:asset-list" %}?asset_group_id={{ asset_group.id }}',
		columns: [
		    {data: "hostname" }, {data: "ip" }, {data: "port" },
			{data: "is_connective" }, {data: "id"}],
		op_html: $('#actions').html()
	};
	jumpserver.initServerSideDataTable(options);

}

$(document).ready(function () {
  $('.select2').select2();

  $('.select2.asset-select').select2()
      .on('select2:select', function(evt) {
          var data = evt.params.data;
          jumpserver.assets_selected[data.id] = data.text;
      })
      .on('select2:unselect', function(evt) {
          var data = evt.params.data;
          delete jumpserver.assets_selected[data.id]
      });

  initTable();

})

.on('click', ".btn-add-asset", function () {
  if (Object.keys(jumpserver.assets_selected).length === 0) {
    return false;
  }
  var assets_id = [];
  $.map(jumpserver.assets_selected, function(value, index) {
      assets_id.push(index);
  });

  addAssets(assets_id);
})

.on('click', '.btn-leave-group', function () {
	var $this = $(this);
	var the_url = "{% url 'api-assets:group-update-assets' pk=asset_group.id %}";
	var name = $(this).closest("tr").find(":nth-child(1) > a").html();
	var assets = [];
	$('#asset_list_table > tbody > tr').map(function () {
		assets.push($(this).closest("tr").find(":nth-child(1) > a").attr("data-aid"))
	});
	var delete_asset_id = $(this).data('aid');
	assets.remove(delete_asset_id);
	var data = {"assets": assets};
	leaveGroup($this, name, the_url, data);
}).on('click', '.btn-del', function () {
    var $this = $(this);
    var name = "{{ asset_group.name}}";
    var uid = "{{ asset_group.id }}";
    var the_url = '{% url "api-assets:asset-group-detail" pk=DEFAULT_PK %}'.replace('{{ DEFAULT_PK }}', uid);
    var redirect_url = "{% url 'assets:asset-group-list' %}";
    objectDelete($this, name, the_url, redirect_url);
})



</script>
{% endblock %}