Skip to content

Commit

Permalink
#1948 WIP: Use optimised counts in alert observable list
Browse files Browse the repository at this point in the history
  • Loading branch information
@nadouani
nadouani committed Apr 12, 2021
1 parent ce0fca7 commit 6c63d78
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 40 deletions.
39 changes: 23 additions & 16 deletions frontend/app/scripts/components/alert/AlertObservableListCmp.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
(function() {
(function () {
'use strict';

angular.module('theHiveComponents')
.component('alertObservableList', {
controller: function($scope, FilteringSrv, PaginatedQuerySrv) {
controller: function ($scope, FilteringSrv, QuerySrv, PaginatedQuerySrv) {
var self = this;

self.$onInit = function() {
self.$onInit = function () {
this.filtering = new FilteringSrv('observable', 'alert.dialog.observables', {
version: 'v1',
defaults: {
Expand All @@ -19,37 +19,44 @@
});

self.filtering.initContext(this.alertId)
.then(function() {
.then(function () {
self.load();

$scope.$watch('$cmp.list.pageSize', function (newValue) {
self.filtering.setPageSize(newValue);
});
});

$scope.$watch('$cmp.list.total', function (total) {
self.onListLoad({count: total});
});
QuerySrv.query(
'v1',
[{ '_name': 'countAlertObservable', 'alertId': self.alertId }],
{
params: {
name: 'alert-all-observables.count'
}
})
.then(function (response) {
self.observablesCount = response.data;
self.onListLoad({ count: self.observablesCount });
});
};

this.load = function() {
this.load = function () {
this.list = new PaginatedQuerySrv({
name: 'alert-observables',
skipStream: true,
version: 'v1',
sort: self.filtering.context.sort,
loadAll: false,
limitedCount: true,
pageSize: self.filtering.context.pageSize,
filter: this.filtering.buildQuery(),
operations: [
{'_name': 'getAlert', 'idOrName': this.alertId},
{'_name': 'observables'}
{ '_name': 'getAlert', 'idOrName': this.alertId },
{ '_name': 'observables' }
],
extraData: ['seen'],
onUpdate: function() {
//self.resetSelection();

}
onUpdate: function () { }
});
};

Expand All @@ -63,9 +70,9 @@
this.search();
};

this.filterBy = function(field, value) {
this.filterBy = function (field, value) {
this.filtering.clearFilters()
.then(function() {
.then(function () {
self.addFilterValue(field, value);
});
};
Expand Down
52 changes: 30 additions & 22 deletions frontend/app/views/components/alert/observable-list.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
<div class="alert-observable-list">
<div class="alert-observable-list">

<div ng-include="'views/components/alert/observables/toolbar.html'"></div>

<div class="mt-xs filter-panel" ng-include="'views/components/alert/observables/filters.html'" ng-show="$cmp.filtering.context.showFilters"></div>
<div class="mt-xs filter-panel" ng-include="'views/components/alert/observables/filters.html'"
ng-show="$cmp.filtering.context.showFilters"></div>

<div class="row mt-xs">
<div class="col-md-12 clearfix">

<filters-preview filters="$cmp.filtering.context.filters"
on-clear-item="$cmp.removeFilter(field)"
<filters-preview filters="$cmp.filtering.context.filters" on-clear-item="$cmp.removeFilter(field)"
on-clear-all="$cmp.clearFilters()"></filters-preview>
</div>
</div>

<div class="row">

<div class="col-md-12" ng-show="$cmp.list.total === 0">
<div class="col-md-12" ng-show="$cmp.list.total === 0 && $cmp.list.values.length === 0">
<div class="empty-message">No records</div>
</div>

<div class="col-md-12" ng-show="$cmp.list.total > 0">
<div class="col-md-12" ng-show="!$cmp.list.loading && $cmp.list.values.length !== 0">
<psearch control="$cmp.list"></psearch>

<table class="table table-striped">
Expand All @@ -34,28 +34,36 @@
<tbody>
<tr ng-repeat="observable in $cmp.list.values">
<td class="nowrap">
<observable-flags observable="observable" inline="true" on-filter="$cmp.addFilterValue(fieldName, value)"></observable-flags>
<observable-flags observable="observable" inline="true"
on-filter="$cmp.addFilterValue(fieldName, value)"></observable-flags>
</td>
<td>
<a href ng-click="$cmp.addFilterValue('dataType', observable.dataType)">{{observable.dataType}}</a>
<a href
ng-click="$cmp.addFilterValue('dataType', observable.dataType)">{{observable.dataType}}</a>
</td>
<td class="wrap">
<div class="wrap" ng-if="observable.dataType !== 'file'" uib-tooltip="{{observable.message}}" tooltip-placement="top-left">
{{observable.data | fang | ellipsis:250}}
</div>
<div class="wrap" ng-if="observable.dataType === 'file' && observable.attachment" uib-tooltip="{{observable.message}}" tooltip-placement="top-left">
{{observable.attachment.name}} ({{observable.attachment.size}} bytes)
</div>
<div class="wrap" ng-if="observable.dataType === 'file' && observable.remoteAttachment" uib-tooltip="{{observable.message}}" tooltip-placement="top-left">
{{observable.remoteAttachment.filename}}
</div>
<div class="case-tags flexwrap mt-xxs" ng-if="observable.tags.length > 0">
<strong><i class="fa fa-tags mr-xxxs"></i></strong>
<tag-item ng-repeat="tag in observable.tags track by $index" ng-click="$cmp.addFilterValue('tags', tag)" value="tag"></tag-item>
</div>
<div class="wrap" ng-if="observable.dataType !== 'file'"
uib-tooltip="{{observable.message}}" tooltip-placement="top-left">
{{observable.data | fang | ellipsis:250}}
</div>
<div class="wrap" ng-if="observable.dataType === 'file' && observable.attachment"
uib-tooltip="{{observable.message}}" tooltip-placement="top-left">
{{observable.attachment.name}} ({{observable.attachment.size}} bytes)
</div>
<div class="wrap" ng-if="observable.dataType === 'file' && observable.remoteAttachment"
uib-tooltip="{{observable.message}}" tooltip-placement="top-left">
{{observable.remoteAttachment.filename}}
</div>
<div class="case-tags flexwrap mt-xxs" ng-if="observable.tags.length > 0">
<strong><i class="fa fa-tags mr-xxxs"></i></strong>
<tag-item ng-repeat="tag in observable.tags track by $index"
ng-click="$cmp.addFilterValue('tags', tag)" value="tag"></tag-item>
</div>
</td>
<td>
<a href ng-click="$cmp.addFilterValue('_createdAt', observable._createdAt)">{{observable._createdAt | shortDate}}</a>
<a href
ng-click="$cmp.addFilterValue('_createdAt', observable._createdAt)">{{observable._createdAt
| shortDate}}</a>
</td>
</tr>
</tbody>
Expand Down
13 changes: 11 additions & 2 deletions frontend/app/views/components/alert/observables/toolbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,22 @@
<div class="row">
<div class="col-md-12">
<div class="btn-toolbar" role="toolbar">
<div class="pull-left">
<h4>
<datalist-header title="List of observables" list="$cmp.list" total="$cmp.observablesCount">
</datalist-header>
</h4>

</div>

<div class="btn-group pull-right" role="group">
<page-sizer collection="$cmp.list" sizes="[10, 15, 30, 100]"></page-sizer>
<page-sizer collection="$cmp.list" sizes="[10, 15, 30, 100]"></page-sizer>
</div>

<div class="btn-group pull-right" role="group">
<button class="btn btn-sm" ng-class="{true: 'btn-primary', false:'btn-default'}[$cmp.filtering.context.showFilters]" type="button" ng-click="$cmp.toggleFilters()">
<button class="btn btn-sm"
ng-class="{true: 'btn-primary', false:'btn-default'}[$cmp.filtering.context.showFilters]"
type="button" ng-click="$cmp.toggleFilters()">
<i class="fa fa-search"></i> Filters
</button>
</div>
Expand Down

0 comments on commit 6c63d78

Please sign in to comment.