Skip to content

Commit 33b598c

Browse files
nadouaninadouani
committed
#229 Update the case > links page to display more details about the related cases
1 parent 867b2b9 commit 33b598c

File tree

4 files changed

+107
-41
lines changed

4 files changed

+107
-41
lines changed

‎ui/app/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,9 @@
4545
<link rel="stylesheet" href="styles/flow.css"/>
4646
<link rel="stylesheet" href="styles/search.css"/>
4747
<link rel="stylesheet" href="styles/filters.css"/>
48+
<link rel="stylesheet" href="styles/case-item.css"/>
4849
<link rel="stylesheet" href="styles/directives/page-sizer.css"/>
49-
<link rel="stylesheet" href="styles/directives/user.css"/>
50+
<link rel="stylesheet" href="styles/directives/user.css"/>
5051
<!-- endbuild -->
5152

5253
<style>

‎ui/app/styles/case-item.css

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
div.case-collection:nth-of-type(odd) {
2+
background-color: #f9f9f9;
3+
}
4+
5+
div.case-item {
6+
margin-bottom: 1px;
7+
display: flex;
8+
justify-content: space-around;
9+
align-items: stretch;
10+
}
11+
12+
div.case-item>div {
13+
padding: 5px;
14+
}
15+
16+
div.case-item>div.case-tlp {
17+
width: 8px;
18+
}
19+
20+
div.case-item>div.case-details {
21+
flex: 1;
22+
}
23+
24+
div.case-item>div.case-owner {
25+
width: 50px;
26+
}
27+
28+
div.case-item>div.case-severity {
29+
width: 40px;
30+
}
31+
32+
div.case-item>div.case-date {
33+
width: 120px;
34+
}
35+
36+
div.case-item>div.case-observables-count {
37+
width: 30px;
38+
}
39+
40+
div.case-item>div.case-observables-list {
41+
width: 400px;
42+
}

‎ui/app/views/partials/case/case.links.html

+62-39
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,65 @@
11
<div class="case-links" ng-show="links.length > 0">
22
<h4 class="vpad10 text-primary">Related cases ({{links.length}})</h4>
3-
<table class="table table-striped">
4-
<thead>
5-
<tr>
6-
<th>Case</th>
7-
<th>Tags</th>
8-
<th colspan="2">Linked observables</th>
9-
</tr>
10-
</thead>
11-
<tbody>
12-
<tr ng-repeat="link in links">
13-
<td class="wrap">
14-
<div>
15-
{{link.startDate | showDate:'YYYY-MM-DD HH:mm'}}
16-
<tlp value="link.tlp"></tlp>
17-
</div>
18-
<div class="small">
19-
<i class="glyphicon glyphicon-folder-open text-muted mr-xxxs"></i>
20-
<a href ui-sref="app.case.details({caseId: link.id})"># {{link.caseId}} - {{link.title | limitTo: 100}}</a>
21-
</div>
22-
</td>
23-
<td>
24-
<tag-list data="link.tags"></tag-list>
25-
</td>
26-
<td><span class="badge">{{link.linkedWith.length}}</span></td>
27-
<td>
28-
<div ng-repeat="observable in link.linkedWith | limitTo:5" class="wrap">
29-
<a href ui-sref="app.case.observables-item({caseId: link.id, itemId: observable.id})">
30-
<strong>[{{observable.dataType}}]</strong>:
31-
<span ng-if="observable.attachment"></span>{{observable.attachment.name}}
32-
<span ng-if="!observable.attachment"></span>{{observable.data | fang}}
33-
</a>
34-
</div>
35-
<div class="mt-xs" ng-if="link.linkedWith.length > 5">
36-
<a href ui-sref="app.case.observables({caseId: caseId})"><strong>See ({{link.linkedWith.length - 5}}) more links</strong></a>
37-
</div>
38-
</td>
39-
</tr>
40-
</tbody>
41-
</table>
3+
<div class="case-item">
4+
<div class="case-details text-bold">Title</div>
5+
<div class="case-date text-bold">Date</div>
6+
<div class="case-observables-list text-bold">Linked observables</div>
7+
</div>
8+
<div class="case-collection" ng-repeat="item in links">
9+
<div class="case-item" >
10+
<!-- case severity -->
11+
<div class="case-tlp bg-tlp-{{item.tlp}}"></div>
12+
13+
<!-- case title and main details -->
14+
<div class="case-details">
15+
<div class="case-title">
16+
<a ui-sref="app.case.details({caseId: item.id})">#{{item.caseId}} - {{item.title}}</a>
17+
</div>
18+
<div class="case-tags flexwrap mt-xxs">
19+
<span class="mr-xxxs text-muted"><i class="fa fa-tags"></i></span>
20+
<strong class="text-muted mr-xxxs" ng-if="!item.tags || item.tags.length === 0">None</strong>
21+
<span ng-repeat="tag in item.tags track by $index" class="label label-primary mb-xxxs mr-xxxs pointer">{{tag}}</span>
22+
</div>
23+
<div class="text-success" ng-show="item.status !== 'Open'">
24+
<small>
25+
(Closed at {{item.endDate | showDate}} as <strong>{{CaseResolutionStatus[item.resolutionStatus]}}</strong>)
26+
</small>
27+
</div>
28+
<div class="text-danger" ng-if="item.mergeFrom">
29+
<small>
30+
Merged from <a href ui-sref="app.case.details({caseId: item.mergeFrom[0]})"> Case #{{item.stats.mergeFrom[0].caseId}}</a> and
31+
<a href ui-sref="app.case.details({caseId: item.mergeFrom[1]})"> Case #{{utem.stats.mergeFrom[1].caseId}}</a>
32+
</small>
33+
</div>
34+
</div>
35+
36+
<div class="case-severity">
37+
<div class="clickable">
38+
<severity active="false" value="item.severity"></severity>
39+
</div>
40+
</div>
41+
42+
<div class="case-date">
43+
<span uib-tooltip="{{item.startDate | showDate}}" tooltip-popup-delay="500" tooltip-placement="bottom">{{item.startDate | shortDate}}</span>
44+
</div>
45+
46+
<div class="case-observables-count">
47+
<span class="badge">{{item.linkedWith.length}}</span>
48+
</div>
49+
50+
<div class="case-observables-list">
51+
<div ng-repeat="observable in item.linkedWith | limitTo:5" class="wrap">
52+
<a href ui-sref="app.case.observables-item({caseId: item.id, itemId: observable.id})">
53+
<strong>[{{observable.dataType}}]</strong>:
54+
<span ng-if="observable.attachment"></span>{{observable.attachment.name}}
55+
<span ng-if="!observable.attachment"></span>{{observable.data | fang}}
56+
</a>
57+
</div>
58+
<div class="mt-xs" ng-if="item.linkedWith.length > 5">
59+
<a href ui-sref="app.case.observables({caseId: caseId})"><strong>See ({{item.linkedWith.length - 5}}) more links</strong></a>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
4265
</div>

‎ui/app/views/partials/case/case.panelinfo.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ <h3 class="box-title">
3232
<span class="ml-xxs text-danger" ng-show="links.length > 0">
3333
<i class="glyphicon glyphicon-link"></i>
3434
<strong>
35-
<ng-pluralize count="links.length" when="{'one': '1 Related case', 'other': '{} Related cases'}"></ng-pluralize>
35+
<a class="text-danger" href ui-sref="app.case.links({caseId:caze.id})"><ng-pluralize count="links.length" when="{'one': '1 Related case', 'other': '{} Related cases'}"></ng-pluralize></a>
3636
</strong>
3737
</span>
3838

0 commit comments

Comments
 (0)