Skip to content

Commit

Permalink
#1766 WIP: Update TTP selection dialog and procedure list to include …
Browse files Browse the repository at this point in the history 
…sub techniques full name
  • Loading branch information
@nadouani
nadouani committed Feb 17, 2021
1 parent a6d5468 commit 052b09c
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 63 deletions.
4 changes: 2 additions & 2 deletions frontend/app/scripts/controllers/case/CaseProceduresCtrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
});
};

this.showProcedure = function(procedure) {
this.addProcedure = function(procedure) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'views/partials/case/procedures/add-procedure.modal.html',
Expand Down Expand Up @@ -91,7 +91,7 @@
{'_name': 'getCase', "idOrName": self.caseId},
{'_name': 'procedures'}
],
extraData: ['pattern']
extraData: ['pattern', 'patternParent']
});
};

Expand Down
4 changes: 3 additions & 1 deletion frontend/app/scripts/controllers/case/procedure/AddProcedureModalCtrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@
};

this.cancel = function() {
$rootScope.markdownEditorObjects.procedure.hidePreview();
if($rootScope.markdownEditorObjects.procedure) {
$rootScope.markdownEditorObjects.procedure.hidePreview();
}

$uibModalInstance.dismiss();
};
Expand Down
12 changes: 6 additions & 6 deletions frontend/app/scripts/services/api/AttackPatternSrv.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,21 +107,21 @@
{
_field: 'revoked',
_value: false
},
{
_not: {
_contains: 'parent'
}
}
]
},
sort: ['+patternId'],
page: {
from: 0,
to: 100,
extraData: ['children']
extraData: ['parent']
}
}).then(function(techniques) {

_.each(techniques, function(technique) {
technique.isSubTechnique = !!technique.extraData.parent;
});

self.tacticsCache[tactic] = techniques;

defer.resolve(techniques);
Expand Down
9 changes: 0 additions & 9 deletions frontend/app/styles/case.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,12 +95,3 @@ pre.error-trace {
white-space: pre-wrap;
background-color: #f9f1f1;
}

.procedure-techniques-list {
height: 200px;
overflow-y: scroll;
border-radius: 0;
box-shadow: none;
border: 1px solid #d2d6de;

}
46 changes: 45 additions & 1 deletion frontend/app/styles/procedure.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
}

.ttp-tactic {
width: 200px;
width: 250px;
vertical-align: middle;
}
.ttp-name {
Expand Down Expand Up @@ -78,3 +78,47 @@
font-weight: bold;
padding: 10px;
}

.procedure-techniques-list {
/* height: 400px;
overflow-y: scroll; */
border-radius: 0;
box-shadow: none;
border: 1px solid #d2d6de;
}

.procedure-techniques-list .tooltip {
width: 600px;
text-align: left;
}
.procedure-techniques-list .tooltip-inner {
max-width: 100%;
text-align: left;
}

.procedure-techniques-list .procedure-techniques-item {
display: block;
padding: 2px 5px;
}

.procedure-techniques-list .procedure-techniques-item:hover {
background-color: #f5f5f5;
}

.procedure-techniques-list .procedure-techniques-item.active,
.procedure-techniques-list .procedure-techniques-item.active:hover {
background-color: #3c8dbc;
color: #fff;
}

.procedure-techniques-list .procedure-techniques-item.active a{
color: #fff;
}

.procedure-technique {
display: block;
}

.procedure-technique.sub-technique {
margin-left: 30px;
}
6 changes: 3 additions & 3 deletions frontend/app/views/partials/case/case.procedures.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,14 @@ <h4>
<a href class="pull-right" ng-click="$vm.addFilterValue('tactic', proc.tactic)"><i class="fa fa-filter"></i></a>
</div>
</div>
<div class="ttp-name" ng-if="proc.extraData.pattern.parent">
<div class="ttp-name" ng-if="proc.extraData.patternParent">
<div>
<a href ng-click="$vm.showPattern(proc.patternId)">{{proc.patternId}}</a> - {{proc.extraData.parent}}:{{proc.extraData.pattern.name}}
<a href ng-click="$vm.showPattern(proc.patternId)">{{proc.patternId}}</a> - {{proc.extraData.patternParent.name}}:{{proc.extraData.pattern.name}}

<a href class="pull-right" ng-click="$vm.addFilterValue('patternId', proc.patternId)"><i class="fa fa-filter"></i></a>
</div>
</div>
<div class="ttp-name" ng-if="!proc.extraData.pattern.parent">
<div class="ttp-name" ng-if="!proc.extraData.patternParent">
<div>
<a href ng-click="$vm.showPattern(proc.patternId)">{{proc.patternId}}</a> - {{proc.extraData.pattern.name}}

Expand Down
108 changes: 67 additions & 41 deletions frontend/app/views/partials/case/procedures/add-procedure.modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,47 +4,85 @@ <h3 class="modal-title">Add Tactic, Technique and Procedure</h3>
</div>
<div class="modal-body">

<div class="form-group" ng-class="{ 'has-error' : procedureForm.tactic.$invalid && !procedureForm.tactic.$pristine }">
<label>
Tactic
<i class="fa fa-asterisk text-danger"></i>
</label>
<select class="form-control" name="tactic" ng-model="$modal.procedure.tactic" autofocus="beforeProcedureModalShow"
ng-options="tactic as $modal.tactics.values[tactic].label for tactic in $modal.tactics.keys" required ng-change="$modal.showTechniques()">
</select>
<p class="help-block" ng-show="procedureForm.tactic.$invalid && !procedureForm.tactic.$pristine">This field is required.</p>
<div class="row">
<div class="col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : procedureForm.tactic.$invalid && !procedureForm.tactic.$pristine }">
<label>
Tactic
<i class="fa fa-asterisk text-danger"></i>
</label>
<select class="form-control" name="tactic" ng-model="$modal.procedure.tactic" autofocus="beforeProcedureModalShow"
ng-options="tactic as $modal.tactics.values[tactic].label for tactic in $modal.tactics.keys" required ng-change="$modal.showTechniques()">
</select>
<p class="help-block" ng-show="procedureForm.tactic.$invalid && !procedureForm.tactic.$pristine">This field is required.</p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : procedureForm.occureDate.$invalid && !procedureForm.occureDate.$pristine }">
<label>
Occur Date
<i class="fa fa-asterisk text-danger"></i>
</label>
<div>
<date-time-picker date="$modal.procedure.occurDate" name="occurDate"></date-time-picker>
<p class="help-block" ng-show="procedureForm.occureDate.$invalid && !procedureForm.occureDate.$pristine">The field is required.</p>
</div>
</div>
</div>
</div>

<div ng-show="$modal.procedure.tactic" class="form-group" ng-class="{ 'has-error' : procedureForm.pattern.$invalid && !procedureForm.pattern.$pristine }">

<div class="form-group" ng-class="{ 'has-error' : procedureForm.pattern.$invalid && !procedureForm.pattern.$pristine }">
<label>
Technique
<i class="fa fa-asterisk text-danger"></i>
</label>
<input type="text" class="form-control mv-xxxs" placeholder="Filter techniques" ng-model="$modal.state.search.name">
<input type="hidden"ng-model="$modal.procedure.patternId" required>
<div class="procedure-techniques-list p-xxs">

<div ng-repeat="technique in $modal.state.techniques | filter:$modal.state.search">
<div class="radio">
<label>
<input type="radio" name="pattern" ng-value="technique.patternId" ng-model="$modal.procedure.patternId">
{{technique.patternId}} - {{technique.name}}
</label>
</div>
<div ng-repeat="subTechnique in technique.extraData.children | filter:$modal.state.search" class="ml-m" ng-if="!subTechnique.revoked">
<div class="radio">
<label>
<input type="radio" name="pattern" ng-value="subTechnique.patternId" ng-model="$modal.procedure.patternId">
{{subTechnique.patternId}} - {{subTechnique.name}}
</label>

<div ng-show="!$modal.procedure.tactic" class="text-muted">
Please select a tactic above.
</div>

<div ng-show="$modal.procedure.tactic">
<input type="text" class="form-control mv-xxxs" placeholder="Filter techniques" ng-model="$modal.state.search">
<input type="hidden"ng-model="$modal.procedure.patternId" required>
<div class="procedure-techniques-list p-xxs">

<div ng-repeat="technique in $modal.state.techniques | filter:$modal.state.search">
<div class="procedure-techniques-item" ng-class="{'active': $modal.procedure.patternId === technique.patternId}"
ng-click="$modal.procedure.patternId = technique.patternId">
<div class="radio">
<label class="procedure-technique" ng-class="{'sub-technique': technique.isSubTechnique}">
<input type="radio" name="pattern" ng-value="technique.patternId" ng-model="$modal.procedure.patternId">

<span ng-if="!!!technique.isSubTechnique">{{technique.patternId}} - {{technique.name}}</span>
<span ng-if="!!technique.isSubTechnique">{{technique.patternId}} - {{technique.extraData.parent.name}}:{{technique.name}}</span>

<span class="pull-right ml-xxs">
<a href="{{technique.url}}" target="_blank">
<i class="fa fa-external-link"></i>
</a>
</span>
<span class="pull-right">
<i class="fa fa-question-circle" uib-tooltip="{{technique.description}}" tooltip-placement="left-center"></i>
</span>

</label>
</div>
</div>
</div>
</div>
<p class="help-block" ng-show="procedureForm.pattern.$invalid && !procedureForm.pattern.$pristine">This field is required.</p>
</div>
<p class="help-block" ng-show="procedureForm.pattern.$invalid && !procedureForm.pattern.$pristine">This field is required.</p>



</div>

<div class="mv-xxs" ng-if="!$modal.showProcedure">
<a href ng-click="$modal.showProcedure = true"><i class="fa fa-plus"></i> Add Procedure</a>
</div>

<div class="form-group" ng-class="{ 'has-error' : procedureForm.description.$invalid && !procedureForm.description.$pristine }">
<div class="form-group" ng-if="$modal.showProcedure" ng-class="{ 'has-error' : procedureForm.description.$invalid && !procedureForm.description.$pristine }">
<label>Procedure</label>
<div>
<div class="clearfix">
Expand All @@ -59,18 +97,6 @@ <h3 class="modal-title">Add Tactic, Technique and Procedure</h3>
<p class="help-block" ng-show="procedureForm.description.$invalid && !procedureForm.description.$pristine">This field is required.</p>
</div>
</div>

<div class="form-group" ng-class="{ 'has-error' : procedureForm.occureDate.$invalid && !procedureForm.occureDate.$pristine }">
<label>
Occur Date
<i class="fa fa-asterisk text-danger"></i>
</label>
<div>
<date-time-picker date="$modal.procedure.occurDate" name="occurDate"></date-time-picker>
<p class="help-block" ng-show="procedureForm.occureDate.$invalid && !procedureForm.occureDate.$pristine">The field is required.</p>
</div>
</div>

</div>
<div class="modal-footer text-left">
<button class="btn btn-default" ng-click="$modal.cancel()" type="button">Cancel</button>
Expand Down

0 comments on commit 052b09c

Please sign in to comment.