Add layer and layer open command log

This commit is contained in:
ibuler
2016-10-27 00:52:44 +08:00
parent d19b47a427
commit c0de35a683
16 changed files with 99 additions and 63 deletions

View File

@@ -1,25 +0,0 @@
{% extends '_modal.html' %}
{% load i18n %}
{% block modal_id %}command_table{% endblock %}
{% block modal_body %}
<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="10">
<thead>
<tr>
<th data-toggle="true">ID</th>
<th>Command</th>
<th data-hide="all">Output</th>
<th>Datetime</th>
</tr>
</thead>
<tbody class="table_body">
{% for command in object_list %}
<tr>
<td>{{ command.command_no }}</td>
<td>{{ command.command }}</td>
<td>{{ command.output_decode |safe }}</td>
<td>{{ command.datetime }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}

View File

@@ -0,0 +1,58 @@
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
{% include '_head_css_js.html' %}
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static "css/plugins/footable/footable.core.css" %}" rel="stylesheet">
<script src="{% static 'js/jquery-2.1.1.js' %}"></script>
<script src="{% static 'js/plugins/sweetalert/sweetalert.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="tab-content">
<div class="ibox-content">
<input type="text" class="form-control input-sm m-b-xs" id="filter"
placeholder="Search in table">
<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="10" data-filter=#filter>
<thead>
<tr>
<th data-toggle="true">ID</th>
<th>Command</th>
<th data-hide="all">Output</th>
<th>Datetime</th>
</tr>
</thead>
<tbody class="table_body">
{% for command in object_list %}
<tr>
<td>{{ command.command_no }}</td>
<td>{{ command.command }}</td>
<td>{{ command.output_decode |safe }}</td>
<td>{{ command.datetime }}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<td colspan="5">
<ul class="pagination pull-right"></ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</body>
<script src="{% static "js/plugins/footable/footable.all.min.js" %}"></script>
<script>
$(document).ready(function () {
$('.footable').footable();
});
</script>
</html>

View File

@@ -57,6 +57,13 @@
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<td colspan="5">
<ul class="pagination pull-right"></ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>

View File

@@ -3,6 +3,7 @@
{% block custom_head_css_js %}
{{ block.super }}
<link href="{% static "css/plugins/footable/footable.core.css" %}" rel="stylesheet">
<link href="{% static "css/plugins/layer/layer.css" %}" rel="stylesheet">
<style>
div.dataTables_wrapper div.dataTables_filter,
.dataTables_length {
@@ -40,14 +41,12 @@
<tbody>
</tbody>
</table>
{% include 'audits/proxy_log_command_list_modal.html' %}
{% endblock %}
{% block custom_foot_js %}
<script src="{% static 'js/jquery.form.min.js' %}"></script>
<script src="{% static "js/plugins/footable/footable.all.min.js" %}"></script>
<script src="{% static "js/plugins/layer/layer.js" %}"></script>
<script>
$(document).ready(function(){
$('.footable').footable();
var options = {
ele: $('#proxy_log_list_table'),
columnDefs: [
@@ -57,7 +56,7 @@ $(document).ready(function(){
}},
{targets: 4, createdCell: function (td, cellData, rowData) {
if (cellData) {
$(td).html('<a url="{% url "audits:proxy-log-detail-api" pk=99991938 %}" class="commands">99991937</a>'
$(td).html('<a url="{% url "audits:proxy-log-commands-list" pk=99991938 %}" class="commands">99991937</a>'
.replace('99991937', cellData)
.replace('99991938',rowData.id))
}
@@ -94,28 +93,16 @@ $(document).ready(function(){
jumpserver.initDataTable(options);
}).on('click', '.commands', function () {
var url = $(this).attr('url');
$.ajax({
url: url,
method: 'GET',
success: function (data) {
var table_body = '';
$.each(data.commands_dict, function (index, value) {
table_body += '<tr>' +
'<td>' + value.command_no + '</td>' +
'<td>' + value.command + '</td>' +
'<td>' + value.output + '</td>' +
'<td>' + value.datetime + '</td>' +
'</tr>'
});
console.log(table_body);
$('.table_body').html(table_body);
$('.footable').footable();
$('#command_table').modal('show');
}
layer.open({
type: 2,
title: '很多时候,我们想最大化看,比如像这个页面。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: url
});
})
})
</script>
{% endblock %}

View File

@@ -9,6 +9,7 @@ app_name = 'audits'
urlpatterns = [
url(r'^proxy-log$', views.ProxyLogListView.as_view(), name='proxy-log-list'),
url(r'^proxy-log/(?P<pk>\d+)$', views.ProxyLogDetailView.as_view(), name='proxy-log-detail'),
url(r'^proxy-log/(?P<pk>\d+)/commands$', views.ProxyLogCommandsListView.as_view(), name='proxy-log-commands-list'),
]

View File

@@ -39,3 +39,14 @@ class ProxyLogDetailView(AdminUserRequiredMixin, SingleObjectMixin, ListView):
}
kwargs.update(context)
return super(ProxyLogDetailView, self).get_context_data(**kwargs)
class ProxyLogCommandsListView(AdminUserRequiredMixin, SingleObjectMixin, ListView):
template_name = 'audits/proxy_log_commands_list_modal.html'
def get(self, request, *args, **kwargs):
self.object = self.get_object(queryset=ProxyLog.objects.all())
return super(ProxyLogCommandsListView, self).get(request, *args, **kwargs)
def get_queryset(self):
return list(self.object.command_log.all())