#1948 WIP: Add datalist-header component and use it in cases, alert, …

…task and observables lists
TheHive-Project · Apr 11, 2021 · ba515db · ba515db
1 parent 8bb5b7c
commit ba515db
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 40 deletions.
diff --git a/frontend/app/index.html b/frontend/app/index.html
@@ -140,6 +140,7 @@
     <script src="scripts/components/charts/donut-chart.component.js"></script>
     <script src="scripts/components/common/custom-field-input.component.js"></script>
     <script src="scripts/components/common/custom-field-labels.component.js"></script>
+    <script src="scripts/components/common/datalist-header.component.js"></script>
     <script src="scripts/components/common/observable-flags.component.js"></script>
     <script src="scripts/components/common/tag.component.js"></script>
     <script src="scripts/components/common/task-flags.component.js"></script>

diff --git a/frontend/app/scripts/components/common/datalist-header.component.js b/frontend/app/scripts/components/common/datalist-header.component.js
@@ -0,0 +1,15 @@
+(function () {
+    'use strict';
+
+    angular.module('theHiveComponents')
+        .component('datalistHeader', {
+            controller: function () { },
+            controllerAs: '$ctrl',
+            templateUrl: 'views/components/common/datalist-header.component.html',
+            bindings: {
+                title: '@',
+                list: '<',
+                total: '<'
+            }
+        });
+})();
diff --git a/frontend/app/scripts/services/api/TagSrv.js b/frontend/app/scripts/services/api/TagSrv.js
@@ -21,7 +21,7 @@
                             { _name: 'filter', _ne: { '_field': 'colour', '_value': defaultColour } }
                         ], {
                             params: {
-                                name: 'list-tags'
+                                name: 'freetags-cache'
                             }
                         })
                     })

diff --git a/frontend/app/scripts/services/common/data/PaginatedQuerySrv.js b/frontend/app/scripts/services/common/data/PaginatedQuerySrv.js
@@ -35,6 +35,8 @@
                 this.extraData = options.extraData || undefined;
                 this.name = options.name || undefined;
                 this.config = options.config || {};
+                this.loading = false;
+                this.loadingCount = false;
 
                 this.operations = options.operations;
 
@@ -134,45 +136,54 @@
                     var filters = self.getFilter();
 
                     // Get the list
+                    this.loading = true;
                     QuerySrv.call(this.version, this.operations, {
                         filter: filters,
                         sort: self.getSort(),
                         page: self.getPage(),
                         config: self.config,
                         withParent: false,
                         name: self.name
-                    }).then(function (data) {
-                        if (self.loadAll) {
-                            self.allValues = data;
-
-                            self.total = data.length;
-
-                            self.changePage();
-                        } else {
-                            self.values = data;
-                            if (angular.isFunction(self.onUpdate)) {
-                                self.onUpdate(updates);
+                    })
+                        .then(function (data) {
+                            if (self.loadAll) {
+                                self.allValues = data;
+
+                                self.total = data.length;
+
+                                self.changePage();
+                            } else {
+                                self.values = data;
+                                if (angular.isFunction(self.onUpdate)) {
+                                    self.onUpdate(updates);
+                                }
                             }
-                        }
-                    }).catch(function (err) {
-                        if (self.onFailure) {
-                            self.onFailure(err);
-                        }
-                    });
+                        })
+                        .catch(function (err) {
+                            if (self.onFailure) {
+                                self.onFailure(err);
+                            }
+                        })
+                        .finally(function () {
+                            self.loading = false;
+                        });
 
                     // get the total if not cached
                     var hash = $filter('md5')(JSON.stringify(this.filter));
                     if (forceCount || (!!!this.loadAll && this.filterHash !== hash)) {
                         this.filterHash = hash;
 
                         // Compute the total again
+                        self.loadingCount = true;
                         QuerySrv.count('v1', this.operations, {
                             filter: filters,
                             name: self.name,
                             config: self.config,
                             limitedCount: self.limitedCount
                         }).then(function (total) {
                             self.total = total;
+                        }).finally(function () {
+                            self.loadingCount = false;
                         });
                     }
 

diff --git a/frontend/app/views/components/common/datalist-header.component.html b/frontend/app/views/components/common/datalist-header.component.html
@@ -0,0 +1,11 @@
+<span>
+    <span class="mr-xxxs">{{$ctrl.title}}</span>
+    <span ng-if="!!$ctrl.list.total">({{$ctrl.list.total | limitedCount}}</span>
+    <span ng-if="!!!$ctrl.list.total">(<i class="fa fa-spinner fa-pulse"></i></span>
+    <span ng-if="!!$ctrl.total"> of {{$ctrl.total}})</span>
+    <span ng-if="!!!$ctrl.total"> of <i class="fa fa-spinner fa-pulse"></i>)</span>
+    <em class="ml-xxxs text-muted" ng-show="$ctrl.list.loading"><i class="fa fa-spinner fa-pulse"></i> Fetching
+        data...</em>
+    <em class="ml-xxxs text-muted" ng-show="!$ctrl.list.loading && $ctrl.list.loadingCount"><i
+            class="fa fa-spinner fa-pulse"></i> Counting records...</em>
+</span>
diff --git a/frontend/app/views/components/org/custom-tags/tag-list.html b/frontend/app/views/components/org/custom-tags/tag-list.html
@@ -8,7 +8,8 @@
     <div class="col-md-12 clearfix">
         <div class="pull-left">
             <h4>
-                List of custom tags ({{$vm.list.total | limitedCount}} of {{$vm.freetagsCount}})
+                <datalist-header title="List of custom tags" list="$vm.list" total="$vm.freetagsCount">
+                </datalist-header>
             </h4>
         </div>
 
@@ -19,11 +20,11 @@ <h4>
 
 <!-- Datalist  -->
 <div class="row mt-xs">
-    <div class="col-md-12 mv-s" ng-show="$vm.list.total === 0">
+    <div class="col-md-12 mv-s" ng-show="$vm.list.total === 0 && $vm.list.values.length === 0">
         <div class="empty-message">No records</div>
     </div>
 
-    <div class="col-md-12" ng-show="$vm.list.total != 0">
+    <div class="col-md-12" ng-show="!$vm.list.loading && $vm.list.values.length !== 0">
         <psearch control="$vm.list"></psearch>
 
         <table class="table table-striped case-tags">

diff --git a/frontend/app/views/directives/psearch.html b/frontend/app/views/directives/psearch.html
@@ -1,3 +1,13 @@
-<center ng-show="control.total > control.pageSize">
-	<ul uib-pagination total-items="control.total" ng-change="control.changePage()" ng-model="control.currentPage" class="pagination-sm" boundary-links="true" items-per-page="control.pageSize" max-size="5" rotate="false"></ul>
-</center>
+<div class="text-center list-pagination">
+    <div class="text-center" ng-show="control.total > 0 && control.total > control.pageSize">
+        <ul uib-pagination total-items="control.total" ng-change="control.changePage()" ng-model="control.currentPage"
+            class="pagination-sm" boundary-links="true" items-per-page="control.pageSize" max-size="5" rotate="false">
+        </ul>
+    </div>
+
+    <div class="text-center" ng-show="control.total < 0 && (-1*control.total) > control.pageSize">
+        <ul uib-pagination total-items="-1*control.total" ng-change="control.changePage()"
+            ng-model="control.currentPage" class="pagination-sm" boundary-links="true" items-per-page="control.pageSize"
+            max-size="5" rotate="false"></ul>
+    </div>
+</div>
diff --git a/frontend/app/views/partials/alert/list.html b/frontend/app/views/partials/alert/list.html
@@ -2,7 +2,9 @@
     <div class="col-md-12">
         <div class="box">
             <div class="box-header with-border">
-                <h3 class="box-title">List of alerts ({{$vm.list.total | limitedCount}} of {{$vm.alertCountAll}})</h3>
+                <h3 class="box-title">
+                    <datalist-header title="List of alerts" list="$vm.list" total="$vm.alertCountAll"></datalist-header>
+                </h3>
             </div>
             <div class="box-body">
                 <div ng-include="'views/partials/alert/list/toolbar.html'"></div>
@@ -23,11 +25,12 @@ <h3 class="box-title">List of alerts ({{$vm.list.total | limitedCount}} of {{$vm
 
                 <!-- Datalist  -->
                 <div class="row mt-xs">
-                    <div class="col-md-12 mv-s" ng-show="$vm.list.total === 0">
+
+                    <div class="col-md-12 mv-s" ng-show="$vm.list.total === 0 && $vm.list.values.length === 0">
                         <div class="empty-message">No records</div>
                     </div>
 
-                    <div class="col-md-12" ng-show="$vm.list.total !== 0">
+                    <div class="col-md-12" ng-show="!$vm.list.loading && $vm.list.values.length !== 0">
                         <psearch control="$vm.list"></psearch>
 
                         <table class="table tbody-stripped case-list">
@@ -156,12 +159,14 @@ <h3 class="box-title">List of alerts ({{$vm.list.total | limitedCount}} of {{$vm
                                     <td align="center">
                                         <span class="clickable label label-default"
                                             ng-class="{'label-danger': !event.caseId}"
-                                            ng-click="$vm.addFilterValue('imported', !!event.caseId)">{{event.caseId ?
+                                            ng-click="$vm.addFilterValue('imported', !!event.caseId)">{{event.caseId
+                                            ?
                                             'Imported' : 'New'}}</span>
                                     </td>
                                     <td align="center">
                                         <span class="clickable label label-default"
-                                            ng-click="$vm.addFilterValue('read', !!event.read)">{{event.read ? 'Read' :
+                                            ng-click="$vm.addFilterValue('read', !!event.read)">{{event.read ?
+                                            'Read' :
                                             'Unread'}}</span>
                                     </td>
                                     <td class="wrap">

diff --git a/frontend/app/views/partials/case/case.list.html b/frontend/app/views/partials/case/case.list.html
@@ -2,7 +2,9 @@
     <div ng-Class="{ 'col-md-9': appLayout.showFlow, 'col-md-12': !appLayout.showFlow}">
         <div class="box">
             <div class="box-header with-border">
-                <h3 class="box-title">List of alerts ({{$vm.list.total | limitedCount}} of {{$vm.caseCountAll}})</h3>
+                <h3 class="box-title">
+                    <datalist-header title="List of cases" list="$vm.list" total="$vm.caseCountAll"></datalist-header>
+                </h3>
                 <div class="box-tools pull-right" ng-show="!appLayout.showFlow">
                     <span class="ml-xs" tooltip="Open in new window">
                         <a class="text-muted" href ng-click="layoutSrv.showFlow(true)">
@@ -29,11 +31,11 @@ <h3 class="box-title">List of alerts ({{$vm.list.total | limitedCount}} of {{$vm
                 </div>
 
                 <div class="row">
-                    <div class="col-md-12 mv-s" ng-show="$vm.list.total === 0">
+                    <div class="col-md-12 mv-s" ng-show="$vm.list.total === 0 && $vm.list.values.length === 0">
                         <div class="empty-message">No records</div>
                     </div>
 
-                    <div class="col-md-12" ng-show="$vm.list.total !== 0">
+                    <div class="col-md-12" ng-show="!$vm.list.loading && $vm.list.values.length !== 0">
                         <psearch control="$vm.list"></psearch>
 
                         <table class="table table-striped case-list">

diff --git a/frontend/app/views/partials/case/case.tasks.html b/frontend/app/views/partials/case/case.tasks.html
@@ -8,7 +8,7 @@
     <div class="col-md-12 clearfix">
         <div class="pull-left">
             <h4>
-                List of tasks ({{list.total | limitedCount}} of {{tasksCount}})
+                <datalist-header title="List of tasks" list="list" total="tasksCount"></datalist-header>
             </h4>
         </div>
 
@@ -17,7 +17,7 @@ <h4>
     </div>
 </div>
 
-<div class="row mv-s" ng-show="list.total === 0">
+<div class="row mv-s" ng-show="list.total === 0 && list.values.length === 0">
     <div class="col-md-12">
         <div class="empty-message">No task found for this case.</div>
     </div>
@@ -53,7 +53,7 @@ <h4>
     </div>
 </div>
 
-<div class="row" ng-if="!state.showGrouped && list.total !== 0">
+<div class="row" ng-if="!state.showGrouped && !list.loading && list.values.length !== 0">
     <div class="col-md-12">
 
         <psearch control="list"></psearch>
@@ -191,7 +191,7 @@ <h4>
     </div>
 </div>
 
-<div class="row" ng-if="state.showGrouped && list.total !== 0">
+<div class="row" ng-if="state.showGrouped && !list.loading && list.values.length !== 0">
     <div class="col-md-12">
 
         <psearch control="list"></psearch>

diff --git a/frontend/app/views/partials/observables/list/observables.html b/frontend/app/views/partials/observables/list/observables.html
@@ -1,8 +1,7 @@
 <div class="col-md-12 mb-s clearfix">
     <div class="pull-left">
         <h4>
-            List of observables ({{artifacts.total | limitedCount}} of {{observablesCount}})
-            <!-- Observable List ({{artifacts.total || 0}} of {{observableCount}}) -->
+            <datalist-header title="List of observables" list="artifacts" total="observablesCount"></datalist-header>
             <small class="ml-xxs" ng-if="selection.artifacts.length > 0 ">
                 ({{selection.artifacts.length}} selected)
             </small>
@@ -12,12 +11,12 @@ <h4>
         on-clear-all="clearFilters()"></filters-preview>
 </div>
 
-<div class="col-md-12 mv-s" ng-show="artifacts.total === 0">
+<div class="col-md-12 mv-s" ng-show="artifacts.total === 0 && artifacts.values.length === 0">
     <div class="empty-message">No records.</div>
 </div>
 
 <!-- list of artifacts-->
-<div class="col-md-12" ng-show="artifacts.total !== 0">
+<div class="col-md-12" ng-show="!artifacts.loading && artifacts.values.length !== 0">
     <psearch ng-if="!switchTEList" control="artifacts"></psearch>
 
     <table class="table table-striped table-hover case-list">