[Feature] 支持popover

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

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):
+    def get_assets_display(obj):
-        return obj.assets.all().count()
+        return [asset.hostname for asset in obj.assets.all()]
 
 
 class AssetUpdateSystemUserSerializer(serializers.ModelSerializer):

apps/assets/templates/assets/asset_group_list.html

@@ -34,13 +34,17 @@ $(document).ready(function(){
                 var detail_btn = '<a href="{% url "assets:asset-group-detail" pk=DEFAULT_PK %}">' + cellData + '</a>';
                 $(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 = '<a href="{% url "assets:asset-group-update" pk=DEFAULT_PK %}" class="btn btn-xs m-l-xs btn-info">{% trans "Update" %}</a>'.replace('{{ DEFAULT_PK }}', cellData);
                 var del_btn = '<a class="btn btn-xs btn-danger m-l-xs btn_asset_group_delete" data-uid="{{ DEFAULT_PK }}">{% trans "Delete" %}</a>'.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);

apps/assets/templates/assets/asset_modal_list.html

@@ -29,7 +29,6 @@
                 <td class="text-center">{{ asset.id }}</td>
                 <td class="text-center">{{ asset.hostname }}</td>
                 <td class="text-center">{{ asset.ip }}</td>
-                <td class="text-center">{{ asset.env }}-{{ asset.type }}</td>
             </tr>
         {% endfor %}
         </tbody>

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 () {

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;
+}
 

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("</br>");
+
+    var html = "<a data-toggle='popover' data-content='" + data_content + "'>" + dataset.length + "</a>";
+    return html;
+}

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):
+    def get_users(obj):
-        return obj.users.count()
+        return [user.name for user in obj.users.all()]
 
 
 class UserGroupUpdateMemeberSerializer(serializers.ModelSerializer):

apps/users/templates/users/user_group_list.html

@@ -10,7 +10,7 @@
                 <input id="" type="checkbox" class="ipt_check_all">
             </th>
             <th class="text-center">{% trans 'Name' %}</th>
-            <th class="text-center">{% trans 'User count' %}</th>
+            <th class="text-center">{% trans 'User' %}</th>
             <th class="text-center">{% trans 'Comment' %}</th>
             <th class="text-center">{% trans 'Action' %}</th>
         </tr>
@@ -31,6 +31,10 @@ $(document).ready(function() {
                 var detail_btn = '<a href="{% url "users:user-group-detail" pk=DEFAULT_PK %}">' + cellData + '</a>';
                 $(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('<span href="javascript:void(0);" data-toggle="tooltip" title="' + cellData + '">' + innerHtml + '</span>');
@@ -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()