Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layer Upgrade UI #318

Merged
merged 102 commits into from
Aug 23, 2021
Merged
Changes from 1 commit
Commits
Show all changes
102 commits
Select commit Hold shift + click to select a range
ba49817
Merge pull request #289 from mitre-attack/feature/#181-layer-upgrade-…
clemiller May 17, 2021
f945629
Merge pull request #296 from mitre-attack/feature/#181-layer-upgrade-…
clemiller May 17, 2021
bfb6a1f
minor changes to version upgrade prompt
clemiller May 18, 2021
bd9acda
small refactor to layer upgrade/version dialog code
clemiller May 18, 2021
9e14436
merged in feature/#181-layer-upgrade-ui-update
clemiller May 19, 2021
37e7c1e
fix for bug causing tabs to show only the domain of the first loaded tab
clemiller May 20, 2021
92b288f
Merge branch 'develop' into feature/#181-layer-upgrade-ui
clemiller May 21, 2021
8d14618
load tab with latest version data
clemiller May 21, 2021
7087720
moved changelog to the viewmodel
clemiller May 21, 2021
e450cc1
removed outer accordion from changelog
clemiller May 21, 2021
1381527
moved assignment of domain subtechniques s.t. they are the same insta…
clemiller May 27, 2021
ae9c0fd
upgrade ui styling; added checkboxes for each changelog object
clemiller May 27, 2021
9658e72
set sidebar width
clemiller May 27, 2021
d56748c
copy/undo annotations ui; reviewed checkboxes; layer upgrade techniqu…
clemiller Jun 1, 2021
6e4e650
fixed html formatting
clemiller Jun 1, 2021
ed0d25d
display warning dialog when user closes layer upgrade ui
clemiller Jun 1, 2021
35a5228
separated changelog sections by tactic & added select all checkbox
clemiller Jun 3, 2021
4e4f335
added unchanged objects to total changelog length
clemiller Jun 8, 2021
74b8766
added filter for showing annotated/unannotated objects
clemiller Jun 8, 2021
1e77c87
remove unused code
clemiller Jun 8, 2021
0e66d2b
only show tactics which have objects in the changelog
clemiller Jun 8, 2021
31c1a38
update sections; fix select-all checkbox bug
clemiller Jun 8, 2021
afe0f69
updated changelog length to include all technique tactic IDs
clemiller Jun 8, 2021
0abda32
created changelog cell component
clemiller Jun 9, 2021
508e5b1
updated table to iterate through objects rather than ids
clemiller Jun 10, 2021
238b801
show changelog cell for related object
clemiller Jun 10, 2021
02fe3e0
added logic for copy/revert copy of technique annotations
clemiller Jun 10, 2021
8192eaf
turn off technique selection/highlight across tactics when upgrading
clemiller Jun 10, 2021
c682c19
sort tactic sections by order as seen in the matrix; small ui changes…
clemiller Jun 15, 2021
36aade1
created parent cell class
clemiller Jun 15, 2021
879f512
fixed technique count for changelog sections
clemiller Jun 15, 2021
1352ada
remove unused code
clemiller Jun 15, 2021
27d06f3
added copy all annotations button
clemiller Jun 15, 2021
ced8e33
store revoked-by relationships
clemiller Jun 22, 2021
eb381c2
logic to retrieve revoked and revoking objects, and their annotations
clemiller Jun 22, 2021
62e19fb
refactor revocation section
clemiller Jun 22, 2021
d7b3beb
changelog table formatting
clemiller Jun 22, 2021
de99af2
Merge branch 'develop' into feature/#181-layer-upgrade-ui
clemiller Jun 23, 2021
5c3b367
style similarly to the search and multi-select component
clemiller Jun 23, 2021
5276e13
refactor to show changelog by technique rather than tactic
clemiller Jun 25, 2021
92131ea
bug fix for additions section; show version header in expansion panel…
clemiller Jun 25, 2021
d3c1476
sort tactic lists before comparison
clemiller Jun 28, 2021
942b2ba
replace unicode characters with mat icons
clemiller Jun 28, 2021
3e3d8f3
disable open search & multiselect when layer upgrade UI is open
clemiller Jun 28, 2021
db10ecf
bug fix for retrieving revoking techniques from the wrong ATT&CK version
clemiller Jun 30, 2021
f8c0841
updated version header
clemiller Jul 1, 2021
208a351
implemented ngx drag&drop to copy annotations
clemiller Jul 2, 2021
59a51b0
clear annotations option in drag&drop ui
clemiller Jul 9, 2021
067403b
layer upgrade directory restructure for consistency; minor updates to ui
clemiller Jul 9, 2021
e61ecd8
update changelog for 181
clemiller Jul 9, 2021
aed3124
track reviewed/copied in changelog
clemiller Jul 9, 2021
48a0c14
force layer upgrade UI reload when switching between tabs
clemiller Jul 9, 2021
54f69f4
pr review updates
clemiller Jul 12, 2021
e1ac524
cells from the old version no longer appear selectable
clemiller Jul 13, 2021
0fd2e6c
rename 'domainID' variable to 'domainVersionID' for clarity
clemiller Jul 13, 2021
c869f6c
added object lookup to optimize ATT&CK version comparisons
clemiller Jul 13, 2021
ad1e4b1
show comment annotations
clemiller Jul 13, 2021
506cc32
updated version upgrade dialog
clemiller Jul 13, 2021
4b14f0b
close expansion panel on review
clemiller Jul 13, 2021
9e62e4d
replaced the 'select-all' checkbox with a set of buttons
clemiller Jul 14, 2021
fd2cdee
Merge branch 'develop' into feature/#181-layer-upgrade-ui
clemiller Jul 14, 2021
c5d152d
updated the total count to incorporate the annotation filter
clemiller Jul 15, 2021
a9d288b
updated mark all as reviewed/unreviewed buttons to incorporate the an…
clemiller Jul 15, 2021
48c78b6
validate drag&drop target cell
clemiller Jul 15, 2021
45c6d2e
update default version in url setup
clemiller Jul 15, 2021
31bc137
added hyperlinks to object pages in the version header
clemiller Jul 15, 2021
1ec5a7e
removed matrix styling
clemiller Jul 15, 2021
7d05b8d
set nav version to 4.4
clemiller Jul 15, 2021
7e3cd3d
disable close sidebar with 'esc'
clemiller Jul 20, 2021
f6996b5
added more filter options for the changelog
clemiller Jul 20, 2021
1b56273
bug fix for hidden technique expansion panels
clemiller Jul 20, 2021
b7f8595
Merge branch 'develop' into feature/#181-layer-upgrade-ui
clemiller Jul 21, 2021
de36f63
bug fix for selecting/highlighting techniques in the layer upgrade ui
clemiller Jul 23, 2021
2193054
technique header alignment
clemiller Jul 27, 2021
da57b97
close annototation dialogs when techniques are unselected in the sidebar
clemiller Jul 27, 2021
aa98e5f
bug fix for reviewing/unreviewing all techniques in a section
clemiller Jul 28, 2021
37f9cc4
layer upgrade interface readme
clemiller Jul 28, 2021
8b72605
fix for bug causing domains to load multiple times & display duplicat…
clemiller Jul 29, 2021
8e62492
redesigned the layer upgrade ui to a stepper/wizard layout
clemiller Aug 2, 2021
42f5369
prevent skipping steps by clicking headers
clemiller Aug 2, 2021
8a4f411
add section descriptions; stepper navigation buttons
clemiller Aug 3, 2021
b4091ee
removed mark/unmark all as reviewed
clemiller Aug 3, 2021
38a237c
pagination for techniques
clemiller Aug 4, 2021
8ec0a42
overview/complete upgrade step
clemiller Aug 4, 2021
b05e5e7
disable annotation filter if there are no annotated techniques in the…
clemiller Aug 4, 2021
52d23da
deemphasize unreviewed status marker
clemiller Aug 4, 2021
2f9a789
remove narrow help page styling when layer upgrade is open
clemiller Aug 4, 2021
a1bd24a
bug fixes for paginator
clemiller Aug 5, 2021
f7a9219
omit unchanged revoked/deprecated techniques; reset scoreColor on cop…
clemiller Aug 5, 2021
178d3e4
lazy load content in each step
clemiller Aug 5, 2021
de02831
template for sections without objects
clemiller Aug 5, 2021
c62b8a5
render spinner while interface loads
clemiller Aug 5, 2021
6e36003
removed paginator from lazy loading container causing subsequent step…
clemiller Aug 6, 2021
357f02d
updates to the layer upgrade section of the help page
clemiller Aug 9, 2021
f799f13
stepper section descriptions
clemiller Aug 10, 2021
c18e30a
refine layer upgrade documentation
clemiller Aug 16, 2021
8917349
removed close dialog
clemiller Aug 16, 2021
12120db
unchanged annotations are copied by default
clemiller Aug 18, 2021
ade994b
update score color on drag&drop; table alignment issues
clemiller Aug 19, 2021
cc7fdde
bug fix for issues in retrieving the revoking techniques
clemiller Aug 19, 2021
b2cd583
Merge branch 'develop' into feature/#181-layer-upgrade-ui
clemiller Aug 19, 2021
516c92e
suppress search & multiselect notification if the user is upgrading …
clemiller Aug 23, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
created changelog cell component
clemiller committed Jun 9, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 0abda32eac75134139f6628bcafc17a347bcb1c4
2 changes: 2 additions & 0 deletions nav-app/src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -36,6 +36,7 @@ import { TacticCellComponent } from './matrix/tactic-cell/tactic-cell.component'
import { VersionUpgradeComponent } from './version-upgrade/version-upgrade.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { LayerUpgradeComponent } from './sidebar/layer-upgrade/layer-upgrade.component';
import { ChangelogCellComponent } from './sidebar/changelog-cell/changelog-cell.component';


@NgModule({
@@ -57,6 +58,7 @@ import { LayerUpgradeComponent } from './sidebar/layer-upgrade/layer-upgrade.com
VersionUpgradeComponent,
SidebarComponent,
LayerUpgradeComponent,
ChangelogCellComponent,
],
imports: [
BrowserModule,
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<div class="technique-cell" [ngStyle]="getTechniqueBackground()" [ngClass]="getClass()">
<div (click)="onLeftClick($event)" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
<span [style.border-color]="configService.comment_color" [style.color]="getTechniqueTextColor()">
{{technique.attackID}}
<div class="id-name-break"></div>
{{technique.name}}
</span>
</div>
</div>
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ChangelogCellComponent } from './changelog-cell.component';

describe('ChangelogCellComponent', () => {
let component: ChangelogCellComponent;
let fixture: ComponentFixture<ChangelogCellComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ChangelogCellComponent]
})
.compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(ChangelogCellComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
23 changes: 23 additions & 0 deletions nav-app/src/app/sidebar/changelog-cell/changelog-cell.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { Component, Input, OnInit } from '@angular/core';
import { ViewModel } from '../../viewmodels.service';
import { ConfigService } from '../../config.service';
import { DataService, Technique } from '../../data.service';
import { TechniqueCellComponent } from '../../matrix/technique-cell/technique-cell.component';

@Component({
selector: 'changelog-cell',
templateUrl: './changelog-cell.component.html',
styleUrls: ['./changelog-cell.component.scss']
})
export class ChangelogCellComponent extends TechniqueCellComponent implements OnInit {
@Input() compareTo?: Technique;
@Input() compareToVM?: ViewModel;

constructor(public configService: ConfigService, public dataService: DataService) {
super(configService, dataService);
}

ngOnInit(): void {
}

}
46 changes: 19 additions & 27 deletions nav-app/src/app/sidebar/layer-upgrade/layer-upgrade.component.html
Original file line number Diff line number Diff line change
@@ -31,60 +31,52 @@
</mat-expansion-panel-header>

<table *ngIf="['additions', 'deprecations'].includes(section)">
<ng-container *ngFor="let id of getTacticObjects(section, tactic)">
<ng-container *ngFor="let id of getTacticObjectIDs(section, tactic)">
<tr>
<td>
<mat-checkbox [checked]="isReviewed(id)" (change)="reviewedChanged(id)"></mat-checkbox>
</td>
<td>
{{id}}
<!-- <technique-cell
[tactic]="getTactic(id, viewModel)"
[technique]="getTechnique(id, viewModel)"
<changelog-cell
[tactic]="getTactic(id)"
[technique]="getTechnique(id)"
[viewModel]="viewModel"
[matrix]="getMatrix(id, viewModel)"
(highlight)="onTechniqueHighlight($event, getTechnique(id, viewModel), getTactic(id, viewModel))"
(highlight)="onTechniqueHighlight($event, getTechnique(id), getTactic(id))"
(unhighlight)="onTechniqueUnhighlight($event)">
</technique-cell> -->
</changelog-cell>
</td>
</tr>
</ng-container>
</table>
<table *ngIf="['changes', 'minor_changes', 'revocations', 'unchanged'].includes(section)">
<ng-container *ngFor="let id of getTacticObjects(section, tactic)">
<ng-container *ngFor="let id of getTacticObjectIDs(section, tactic)">
<tr>
<td>
<mat-checkbox [checked]="isReviewed(id)" (change)="reviewedChanged(id)"></mat-checkbox>
</td>
<!-- Technique from previous version -->
<td>
{{id}}
<!-- <technique-cell
[tactic]="getTactic(id, compareTo)"
[technique]="getTechnique(id, compareTo)"
[viewModel]="compareTo"
[matrix]="getMatrix(id, compareTo)"
(highlight)="onTechniqueHighlight($event, getTechnique(id, compareTo), getTactic(id, compareTo))"
(unhighlight)="onTechniqueUnhighlight($event)">
</technique-cell> -->
<!-- <changelog-cell
[tactic]="getTactic(id, false)"
[technique]="getTechnique(id, false)"
[viewModel]="compareTo">
</changelog-cell> -->
</td>
<!-- copy/undo button -->
<!-- <td> -->
<!-- <button *ngIf="!isReviewed(id)" class="button" matTooltipPosition="above" matTooltip="copy annotations" (click)="copyAnnotations(id)">&gt;</button> -->
<!-- <button *ngIf="isReviewed(id)" class="button" matTooltipPosition="above" matTooltip="undo copy" (click)="undoCopy(id)">&lt;</button> -->
<!-- </td> -->
<!-- Technique from new layer -->
<!-- <td> -->
<!-- {{id}} -->
<!-- <technique-cell
[tactic]="getTactic(id, viewModel)"
[technique]="getTechnique(id, viewModel)"
<td>
<changelog-cell
[tactic]="getTactic(id)"
[technique]="getTechnique(id)"
[viewModel]="viewModel"
[matrix]="getMatrix(id, viewModel)"
(highlight)="onTechniqueHighlight($event, getTechnique(id, viewModel), getTactic(id, viewModel))"
(highlight)="onTechniqueHighlight($event, getTechnique(id), getTactic(id))"
(unhighlight)="onTechniqueUnhighlight($event)">
</technique-cell> -->
<!-- </td> -->
</changelog-cell>
</td>
</tr>
</ng-container>
</table>
30 changes: 18 additions & 12 deletions nav-app/src/app/sidebar/layer-upgrade/layer-upgrade.component.ts
Original file line number Diff line number Diff line change
@@ -114,7 +114,7 @@ export class LayerUpgradeComponent implements OnInit {
return tactics;
}

public getTacticObjects(section: string, tactic: string) {
public getTacticObjectIDs(section: string, tactic: string) {
let objectIDs = [];
let sectionObjects = this.applyFilter()[section];
for (let object of sectionObjects) {
@@ -148,7 +148,10 @@ export class LayerUpgradeComponent implements OnInit {
}
}

public getTactic(id: string, vm: ViewModel) {
public getTactic(id: string, isCurrent: boolean = true) {
let vm = this.viewModel;
if (!isCurrent) vm = this.compareTo;

let shortname = vm.getTechniqueVM_id(id).tactic;
let domain = this.dataService.getDomain(vm.domainID);
let tactics = [];
@@ -158,22 +161,25 @@ export class LayerUpgradeComponent implements OnInit {
return tactics.find(t => t.shortname == shortname);
}

public getTechnique(id: string, vm: ViewModel) {
public getTechnique(id: string, isCurrent: boolean = true) {
let vm = this.viewModel;
if (!isCurrent) vm = this.compareTo;

let technique_id = vm.getTechniqueVM_id(id).techniqueID;
let domain = this.dataService.getDomain(vm.domainID);
let techniques = domain.techniques.concat(domain.subtechniques);
return techniques.find(t => t.attackID == technique_id);
}

public getMatrix(id: string, vm: ViewModel) {
let domain = this.dataService.getDomain(vm.domainID);
for (let matrix of domain.matrices) {
for (let tactic of matrix.tactics) {
if (tactic.techniques.includes(this.getTechnique(id, vm))) return matrix;
}
}
return;
}
// public getMatrix(id: string, vm: ViewModel) {
// let domain = this.dataService.getDomain(vm.domainID);
// for (let matrix of domain.matrices) {
// for (let tactic of matrix.tactics) {
// if (tactic.techniques.includes(this.getTechnique(id, vm))) return matrix;
// }
// }
// return;
// }

public onTechniqueHighlight(event: any, technique: Technique, tactic: Tactic) {
this.viewModel.highlightTechnique(technique, tactic);