From 9e09a962af79df7aa4b08e1790f700f37b5026f5 Mon Sep 17 00:00:00 2001 From: ibuler Date: Tue, 30 Jan 2018 18:07:51 +0800 Subject: [PATCH] =?UTF-8?q?[Feature]=20=E6=94=AF=E6=8C=81popover?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/assets/api.py | 2 +- apps/assets/serializers.py | 8 +++---- .../templates/assets/asset_group_list.html | 8 +++++-- .../templates/assets/asset_modal_list.html | 1 - .../perms/asset_permission_list.html | 23 +++++++++++++------ apps/static/css/jumpserver.css | 5 ++++ apps/static/js/jumpserver.js | 23 +++++++++++++++++-- apps/users/serializers.py | 6 ++--- .../templates/users/user_group_list.html | 8 +++++-- 9 files changed, 62 insertions(+), 22 deletions(-) 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()