Skip to content

Commit

Permalink
#1637 Refind the alert list:
Browse files Browse the repository at this point in the history
- Remove useless columns
- Display tags in a dedicated row
- Display custom fields in a dedicated row
  • Loading branch information
nadouani authored and To-om committed Nov 13, 2020
1 parent 8a1abb0 commit 1892b74
Show file tree
Hide file tree
Showing 7 changed files with 168 additions and 32 deletions.
2 changes: 2 additions & 0 deletions frontend/app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
<link rel="stylesheet" href="styles/main.css"/>
<link rel="stylesheet" href="styles/case.css"/>
<link rel="stylesheet" href="styles/flow.css"/>
<link rel="stylesheet" href="styles/label.css"/>
<link rel="stylesheet" href="styles/flex-table.css"/>
<link rel="stylesheet" href="styles/search.css"/>
<link rel="stylesheet" href="styles/filters.css"/>
Expand Down Expand Up @@ -133,6 +134,7 @@
<script src="scripts/components/alert/AlertSimilarCaseListCmp.js"></script>
<script src="scripts/components/app-container.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/observable-flags.component.js"></script>
<script src="scripts/components/control-sidebar.component.js"></script>
<script src="scripts/components/header.component.js"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
(function() {
'use strict';

angular.module('theHiveComponents')
.component('customFieldLabels', {
controller: function() {
this.fieldClicked = function(fieldName, newValue) {
this.onFieldClick({
name: fieldName,
value: newValue
});
};
},
controllerAs: '$cmp',
templateUrl: 'views/components/common/custom-field-labels.component.html',
bindings: {
customFields: '<',
onFieldClick: '&'
}
});
})();
5 changes: 5 additions & 0 deletions frontend/app/styles/case.css
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,11 @@ table.case-list .case-tags .label,
font-weight: normal;
}

table.case-list .btn-icon {
padding: 6px;
padding-top: 0;
}

pre.error-trace {
color: #a94442;
border: none;
Expand Down
53 changes: 53 additions & 0 deletions frontend/app/styles/label.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
.double-val-label {
display: table;
/* margin: .2em .6em .3em; */
margin-top: 0;
margin-left: 0;
}
.double-val-label>span {
color: #ffffff;
display: table-cell;
/* font-size: 0.9em; */
font-weight: 400;
line-height: 1;
padding: .3em .6em;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
}
.double-val-label>span:first-child {
border-bottom-left-radius: 0.25em;
border-top-left-radius: .25em;
border-left-color: #3c8dbc;
border-left-width: 3px;
border-left-style: solid;
}
.double-val-label>span:nth-child(2) {
border-bottom-right-radius: 0.25em;
border-top-right-radius: .25em;
/* border-left: 1px dashed #777; */
border-left: 1px dashed #3c8dbc;
/* background-color: #d2d6de;
color: #444; */
}
.double-val-label>span.primary {
background-color: #3c8dbc;
color: #fff;
}
.double-val-label>span.default {
background-color: #d2d6de;
color: #444;
}
/*
.double-val-label>span.success {
background-color: #5cb85c;
}
.double-val-label>span.info {
background-color: #5bc0de;
}
.double-val-label>span.warning {
background-color: #f0ad4e;
}
.double-val-label>span.danger {
background-color: #d9534f;
} */
24 changes: 24 additions & 0 deletions frontend/app/styles/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -737,3 +737,27 @@ table tr td.task-actions span.action-button {
.icon-bar {
background-color: #FFF;
}


table.tbody-stripped > tbody:nth-child(2n+1) > tr > td,
table.tbody-stripped > tbody:nth-child(2n+1) > tr > th {
background-color: #f9f9f9;
}

table.tbody-stripped > tbody > tr:first-child > td {
padding-bottom:0;
}

/* table.tbody-stripped > tbody > tr:nth-child(2n) > td { */
table.tbody-stripped > tbody > tr:not(:first-child) > td {
padding-top:0;
border-top: none;
}

table.tbody-stripped>tbody+tbody {
border: none;
}

table.tbody-stripped > tbody > tr > td {

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<div class="case-tags flexwrap">
<span class="mr-xxxs text-muted"><i class="fa fa-code"></i></span>

<strong class="text-muted mr-xxxs" ng-if="!$cmp.customFields || $cmp.customFields.length === 0">None</strong>

<span class="double-val-label mb-xxxs mr-xxxs pointer"
ng-repeat="cf in $cmp.customFields | orderBy:'order' track by $index"
ng-click="$cmp.fieldClicked('customFields.' + cf.name, cf.value)"
ng-if="cf.value !== undefined && cf.value !== null">

<span class="default">{{cf.name}}</span>
<span class="default">{{cf.value}}</span>
</span>
</div>
81 changes: 49 additions & 32 deletions frontend/app/views/partials/alert/list.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h3 class="box-title">List of alerts ({{$vm.list.total || 0}} of {{$vm.alertList
<div class="col-md-12" ng-show="$vm.list.total > 0">
<psearch control="$vm.list"></psearch>

<table class="table table-striped case-list">
<table class="table tbody-stripped case-list">
<thead>
<tr>
<th width="20px" if-permission="manageAlert">
Expand Down Expand Up @@ -79,28 +79,20 @@ <h3 class="box-title">List of alerts ({{$vm.list.total || 0}} of {{$vm.alertList
<th width="80px">
Observables
</th>
<th style="width: 160px">
<th style="width: 120px">
<a href class="text-default" ng-click="$vm.sortByField('date')">
Date
<i ng-show="$vm.filtering.context.sort.indexOf('+date') === -1 && $vm.filtering.context.sort.indexOf('-date') === -1" class="fa fa-sort"></i>
<i ng-show="$vm.filtering.context.sort.indexOf('+date') !== -1" class="fa fa-caret-up"></i>
<i ng-show="$vm.filtering.context.sort.indexOf('-date') !== -1" class="fa fa-caret-down"></i>
</a>
</th>
<th style="width: 50px">
<a href class="text-default" ng-click="$vm.sortByField('_createdBy')">
By
<i ng-show="$vm.filtering.context.sort.indexOf('+_createdBy') === -1 && $vm.filtering.context.sort.indexOf('-_createdBy') === -1" class="fa fa-sort"></i>
<i ng-show="$vm.filtering.context.sort.indexOf('+_createdBy') !== -1" class="fa fa-caret-up"></i>
<i ng-show="$vm.filtering.context.sort.indexOf('-_createdBy') !== -1" class="fa fa-caret-down"></i>
</a>
</th>
<th style="width: 160px"></th>
</tr>
</thead>

<tbody>
<tr ng-repeat="event in $vm.list.values">
<tbody ng-repeat="event in $vm.list.values">
<tr>
<td if-permission="manageAlert">
<input type="checkbox" ng-model="event.selected" ng-change="$vm.select(event)">
</td>
Expand Down Expand Up @@ -134,11 +126,6 @@ <h3 class="box-title">List of alerts ({{$vm.list.total || 0}} of {{$vm.alertList
</span>
</span>
</div>
<div class="case-tags flexwrap mt-xxs">
<span class="mr-xxxs text-muted"><i class="fa fa-tags"></i></span>
<strong class="text-muted mr-xxxs" ng-if="!event.tags || event.tags.length === 0">None</strong>
<span ng-repeat="tag in event.tags track by $index" class="label label-primary mb-xxxs mr-xxxs pointer" ng-click="$vm.addFilterValue('tags', tag)">{{tag}}</span>
</div>
</td>
<td><a href ng-click="$vm.addFilterValue('source', event.source)">{{event.source}}</a></td>
<td class="text-center">
Expand All @@ -150,36 +137,66 @@ <h3 class="box-title">List of alerts ({{$vm.list.total || 0}} of {{$vm.alertList
<td>
<a href ng-click="$vm.addFilterValue('date', event.date)">{{event.date | shortDate}}</a>
</td>
<td>
<user user-id="event._createdBy" icon-only="true"></user>
</td>
<td class="clearfix">
<div class="pull-right" if-permission="manageAlert">
<a class="btn btn-xs btn-icon btn-clear" href ng-click="$vm.follow(event)" uib-tooltip="{{event.follow ? 'Ignore new updates' : 'Track new updates'}}">
<i class="text-info text-20 fa" ng-class="{'fa-eye': event.follow, 'fa-eye-slash': !event.follow}"></i>
<a class="btn btn-icon btn-clear" href ng-click="$vm.follow(event)" uib-tooltip="{{event.follow ? 'Ignore new updates' : 'Track new updates'}}">
<i class="text-info fa" ng-class="{'fa-eye': event.follow, 'fa-eye-slash': !event.follow}"></i>
</a>
<a class="btn btn-xs btn-icon btn-clear" href ng-click="$vm.markAsRead(event)" uib-tooltip="Mark as read" ng-if="$vm.canMarkAsRead(event)">
<i class="text-info text-20 fa fa-envelope"></i>
<a class="btn btn-icon btn-clear" href ng-click="$vm.markAsRead(event)" uib-tooltip="Mark as read" ng-if="$vm.canMarkAsRead(event)">
<i class="text-info fa fa-envelope"></i>
</a>
<a class="btn btn-xs btn-icon btn-clear" href ng-click="$vm.markAsRead(event)" uib-tooltip="Mark as unread" ng-if="$vm.canMarkAsUnread(event)">
<i class="text-info text-20 fa fa-envelope-open-o"></i>
<a class="btn btn-icon btn-clear" href ng-click="$vm.markAsRead(event)" uib-tooltip="Mark as unread" ng-if="$vm.canMarkAsUnread(event)">
<i class="text-info fa fa-envelope-open-o"></i>
</a>
<a class="btn btn-xs btn-icon btn-clear" href ng-click="$vm.getResponders(event, true)" uib-tooltip="Run responders"
<a class="btn btn-icon btn-clear" href ng-click="$vm.getResponders(event, true)" uib-tooltip="Run responders"
ng-if="appConfig.connectors.cortex.enabled" if-permission="manageAction">
<i class="text-info text-20 fa fa-cog"></i>
<i class="text-info fa fa-cog"></i>
</a>
</div>

<div class="pull-right">
<a class="btn btn-xs btn-icon btn-clear" href ng-click="$vm.import(event)" uib-tooltip="Preview and Import" ng-if="!event.caseId">
<i class="text-info text-20 fa fa-file-text-o"></i>
<a class="btn btn-icon btn-clear" href ng-click="$vm.import(event)" uib-tooltip="Preview and Import" ng-if="!event.caseId">
<i class="text-info fa fa-file-text-o"></i>
</a>
<a class="btn btn-xs btn-icon btn-clear" href ui-sref="app.case.details({caseId: event.caseId})" uib-tooltip="View case" ng-if="event.caseId">
<i class="text-info text-20 fa fa-search"></i>
<a class="btn btn-icon btn-clear" href ui-sref="app.case.details({caseId: event.caseId})" uib-tooltip="View case" ng-if="event.caseId">
<i class="text-info fa fa-search"></i>
</a>
</div>
</td>
</tr>
<tr>
<td></td>
<td colspan="9">
<div class="case-tags flexwrap">
<span class="mr-xxxs text-muted"><i class="fa fa-tags"></i></span>
<strong class="text-muted mr-xxxs" ng-if="!event.tags || event.tags.length === 0">None</strong>
<span ng-repeat="tag in event.tags track by $index" class="label label-primary mb-xxxs mr-xxxs pointer" ng-click="$vm.addFilterValue('tags', tag)">{{tag}}</span>
</div>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="9">
<!-- <div class="case-tags flexwrap">
<span class="mr-xxxs text-muted"><i class="fa fa-code"></i></span>
<strong class="text-muted mr-xxxs" ng-if="!event.customFields || event.customFields.length === 0">None</strong>
<span class="double-val-label mb-xxxs mr-xxxs pointer"
ng-repeat="cf in event.customFields | orderBy:'order' track by $index"
ng-click="$vm.addFilterValue('customFields.'+cf.name, cf.value)"
ng-if="cf.value !== undefined && cf.value !== null">
<span class="default">{{cf.name}}</span>
<span class="default">{{cf.value}}</span>
</span>
</div>
<hr /> -->

<custom-field-labels custom-fields="event.customFields" on-field-click="$vm.addFilterValue(name, value)"><custom-field-labels>
</td>
<td></td>
</tr>
</tbody>
</table>

Expand Down

0 comments on commit 1892b74

Please sign in to comment.