diff --git a/apps/assets/api.py b/apps/assets/api.py
index 317ed51c2..937670092 100644
--- a/apps/assets/api.py
+++ b/apps/assets/api.py
@@ -42,7 +42,7 @@ class AssetViewSet(CustomFilterMixin, LabelFilter, BulkModelViewSet):
"""
filter_fields = ("hostname", "ip")
search_fields = filter_fields
- ordering_fields = ("hostname", "ip", "port", "cluster", "type", "env", "cpu_cores")
+ ordering_fields = ("hostname", "ip", "port", "cluster", "cpu_cores")
queryset = Asset.objects.all()
serializer_class = serializers.AssetSerializer
pagination_class = LimitOffsetPagination
diff --git a/apps/assets/serializers.py b/apps/assets/serializers.py
index 1b40ef371..08a27b358 100644
--- a/apps/assets/serializers.py
+++ b/apps/assets/serializers.py
@@ -12,7 +12,7 @@ class AssetGroupSerializer(BulkSerializerMixin, serializers.ModelSerializer):
"""
资产组序列化数据模型
"""
- assets_amount = serializers.SerializerMethodField()
+ assets_display = serializers.SerializerMethodField()
assets = serializers.PrimaryKeyRelatedField(
many=True, queryset=Asset.objects.all(), required=False
)
@@ -20,11 +20,11 @@ class AssetGroupSerializer(BulkSerializerMixin, serializers.ModelSerializer):
class Meta:
model = AssetGroup
list_serializer_class = BulkListSerializer
- fields = ['id', 'name', 'comment', 'assets_amount', 'assets']
+ fields = ['id', 'name', 'comment', 'assets_display', 'assets']
@staticmethod
- def get_assets_amount(obj):
- return obj.assets.all().count()
+ def get_assets_display(obj):
+ return [asset.hostname for asset in obj.assets.all()]
class AssetUpdateSystemUserSerializer(serializers.ModelSerializer):
diff --git a/apps/assets/templates/assets/asset_group_list.html b/apps/assets/templates/assets/asset_group_list.html
index 58fbbc51c..449486e58 100644
--- a/apps/assets/templates/assets/asset_group_list.html
+++ b/apps/assets/templates/assets/asset_group_list.html
@@ -33,14 +33,18 @@ $(document).ready(function(){
{targets: 1, createdCell: function (td, cellData, rowData) {
var detail_btn = '' + cellData + '';
$(td).html(detail_btn.replace('{{ DEFAULT_PK }}', rowData.id));
- }},
+ }},
+ {targets: 2, createdCell: function (td, cellData, rowData) {
+ var html = createPopover(cellData);
+ $(td).html(html);
+ }},
{targets: 4, createdCell: function (td, cellData, rowData) {
var update_btn = '{% trans "Update" %}'.replace('{{ DEFAULT_PK }}', cellData);
var del_btn = '{% trans "Delete" %}'.replace('{{ DEFAULT_PK }}', cellData);
$(td).html(update_btn + del_btn)
}}],
ajax_url: '{% url "api-assets:asset-group-list" %}',
- columns: [{data: "id"}, {data: "name" }, {data: "assets_amount" }, {data: "comment" }, {data: "id"}],
+ columns: [{data: "id"}, {data: "name" }, {data: "assets_display" }, {data: "comment" }, {data: "id"}],
op_html: $('#actions').html()
};
jumpserver.initDataTable(options);
diff --git a/apps/assets/templates/assets/asset_modal_list.html b/apps/assets/templates/assets/asset_modal_list.html
index ee82d530e..ee418c435 100644
--- a/apps/assets/templates/assets/asset_modal_list.html
+++ b/apps/assets/templates/assets/asset_modal_list.html
@@ -29,7 +29,6 @@
{{ asset.id }} |
{{ asset.hostname }} |
{{ asset.ip }} |
- {{ asset.env }}-{{ asset.type }} |
{% endfor %}
diff --git a/apps/perms/templates/perms/asset_permission_list.html b/apps/perms/templates/perms/asset_permission_list.html
index a8bdab5a1..1844d61f1 100644
--- a/apps/perms/templates/perms/asset_permission_list.html
+++ b/apps/perms/templates/perms/asset_permission_list.html
@@ -48,19 +48,24 @@ function initTable() {
$(td).html(detail_btn.replace('{{ DEFAULT_PK }}', rowData.id));
}},
{targets: 2, createdCell: function (td, cellData) {
- $(td).html(cellData.length);
+ var html = createPopover(cellData);
+ $(td).html(html);
}},
{targets: 3, createdCell: function (td, cellData) {
- $(td).html(cellData.length);
+ var html = createPopover(cellData);
+ $(td).html(html);
}},
{targets: 4, createdCell: function (td, cellData) {
- $(td).html(cellData.length);
+ var html = createPopover(cellData);
+ $(td).html(html);
}},
{targets: 5, createdCell: function (td, cellData) {
- $(td).html(cellData.length);
+ var html = createPopover(cellData);
+ $(td).html(html);
}},
{targets: 6, createdCell: function (td, cellData) {
- $(td).html(cellData.length);
+ var html = createPopover(cellData);
+ $(td).html(html);
}},
{targets: 7, createdCell: function (td, cellData) {
if (!cellData) {
@@ -85,11 +90,15 @@ function initTable() {
],
op_html: $('#actions').html()
};
- jumpserver.initDataTable(options);
+ jumpserver.initDataTable(options).on('daw', function () {
+ $('[data-toggle="popover"]').popover({
+ html: true
+ });
+ });
}
$(document).ready(function(){
- initTable();
+ initTable()
})
.on('click', '.btn-del', function () {
diff --git a/apps/static/css/jumpserver.css b/apps/static/css/jumpserver.css
index 2a3226796..1b82ed794 100644
--- a/apps/static/css/jumpserver.css
+++ b/apps/static/css/jumpserver.css
@@ -340,4 +340,9 @@ div.dataTables_wrapper div.dataTables_filter {
border: none;
}
+.popover{
+ max-width: 100%; /* Max Width of the popover (depending on the container!) */
+ padding-left: 20px;
+ padding-right: 20px;
+}
diff --git a/apps/static/js/jumpserver.js b/apps/static/js/jumpserver.js
index 8a0e97605..7fac3d1d3 100644
--- a/apps/static/js/jumpserver.js
+++ b/apps/static/js/jumpserver.js
@@ -310,10 +310,15 @@ jumpserver.initDataTable = function (options) {
var $node = table[ type ]( indexes ).nodes().to$();
$node.find('input.ipt_check').prop('checked', false);
jumpserver.selected[$node.find('input.ipt_check').prop('id')] = false
- }).
- on('draw', function(){
+ }).on('draw', function(){
$('#op').html(options.op_html || '');
$('#uc').html(options.uc_html || '');
+ $('[data-toggle="popover"]').popover({
+ html: true,
+ placement: 'bottom',
+ trigger: 'hover',
+ container: 'body'
+ });
});
$('.ipt_check_all').on('click', function() {
if (!jumpserver.checked) {
@@ -512,3 +517,17 @@ function delCookie(key) {
document.cookie = key + '=' + val + ";expires" + expires.toUTCString() + ';path=/';
}
}
+
+function createPopover(dataset, title, callback) {
+ if (callback !== undefined){
+ var new_dataset = [];
+ $.each(dataset, function (index, value) {
+ new_dataset.push(callback(value))
+ });
+ dataset = new_dataset;
+ }
+ var data_content = dataset.join("");
+
+ var html = "" + dataset.length + "";
+ return html;
+}
\ No newline at end of file
diff --git a/apps/users/serializers.py b/apps/users/serializers.py
index ba88438bf..e72f97407 100644
--- a/apps/users/serializers.py
+++ b/apps/users/serializers.py
@@ -52,7 +52,7 @@ class UserUpdateGroupSerializer(serializers.ModelSerializer):
class UserGroupSerializer(BulkSerializerMixin, serializers.ModelSerializer):
- user_amount = serializers.SerializerMethodField()
+ users = serializers.SerializerMethodField()
class Meta:
model = UserGroup
@@ -60,8 +60,8 @@ class UserGroupSerializer(BulkSerializerMixin, serializers.ModelSerializer):
fields = '__all__'
@staticmethod
- def get_user_amount(obj):
- return obj.users.count()
+ def get_users(obj):
+ return [user.name for user in obj.users.all()]
class UserGroupUpdateMemeberSerializer(serializers.ModelSerializer):
diff --git a/apps/users/templates/users/user_group_list.html b/apps/users/templates/users/user_group_list.html
index bc909ceb4..48d4a2711 100644
--- a/apps/users/templates/users/user_group_list.html
+++ b/apps/users/templates/users/user_group_list.html
@@ -10,7 +10,7 @@
{% trans 'Name' %} |
- {% trans 'User count' %} |
+ {% trans 'User' %} |
{% trans 'Comment' %} |
{% trans 'Action' %} |
@@ -31,6 +31,10 @@ $(document).ready(function() {
var detail_btn = '' + cellData + '';
$(td).html(detail_btn.replace('{{ DEFAULT_PK }}', rowData.id));
}},
+ {targets: 2, createdCell: function (td, cellData, rowData) {
+ var html = createPopover(cellData);
+ $(td).html(html);
+ }},
{targets: 3, createdCell: function (td, cellData) {
var innerHtml = cellData.length > 30 ? cellData.substring(0, 30) + '...': cellData;
$(td).html('' + innerHtml + '');
@@ -49,7 +53,7 @@ $(document).ready(function() {
}}
],
ajax_url: '{% url "api-users:user-group-list" %}',
- columns: [{data: function(){return ""}}, {data: "name" }, {data: "user_amount"},
+ columns: [{data: function(){return ""}}, {data: "name" }, {data: "users"},
{data: "comment"}, {data: "id" }],
order: [],
op_html: $('#actions').html()