From 4cea7fe9f42c93fe43beac8e001c7dfca366002f Mon Sep 17 00:00:00 2001 From: adpare <106263513+adpare@users.noreply.github.com> Date: Tue, 21 Jan 2025 15:13:07 -0500 Subject: [PATCH] add stix ids to object view pages (#584) * add stix ids to object pages * update to position of stix id * minor changes * css updates --- app/src/app/app.module.ts | 3 +++ .../attackid-property.component.html | 2 +- .../attackid-view.component.spec.ts | 10 +++---- .../components/stix/stixid-property/README.md | 2 ++ .../stixid-property.component.html | 10 +++++++ .../stixid-property.component.scss | 6 +++++ .../stixid-property.component.spec.ts | 25 +++++++++++++++++ .../stixid-property.component.ts | 27 +++++++++++++++++++ .../subheading/subheading.component.html | 5 ++++ app/src/style/layouts/extended-button.scss | 22 +++++++++++++++ 10 files changed, 106 insertions(+), 6 deletions(-) create mode 100644 app/src/app/components/stix/stixid-property/README.md create mode 100644 app/src/app/components/stix/stixid-property/stixid-property.component.html create mode 100644 app/src/app/components/stix/stixid-property/stixid-property.component.scss create mode 100644 app/src/app/components/stix/stixid-property/stixid-property.component.spec.ts create mode 100644 app/src/app/components/stix/stixid-property/stixid-property.component.ts diff --git a/app/src/app/app.module.ts b/app/src/app/app.module.ts index 9d75c967..c657b299 100644 --- a/app/src/app/app.module.ts +++ b/app/src/app/app.module.ts @@ -103,6 +103,8 @@ import { AttackIDPropertyComponent } from "./components/stix/attackid-property/a import { AttackIDEditComponent } from "./components/stix/attackid-property/attackid-edit/attackid-edit.component"; import { AttackIDViewComponent } from "./components/stix/attackid-property/attackid-view/attackid-view.component"; +import { StixIDPropertyComponent } from "./components/stix/stixid-property/stixid-property.component"; + import { ListPropertyComponent } from "./components/stix/list-property/list-property.component"; import { ListEditComponent } from "./components/stix/list-property/list-edit/list-edit.component"; import { ListViewComponent } from "./components/stix/list-property/list-view/list-view.component"; @@ -262,6 +264,7 @@ export function initConfig(appConfigService: AppConfigService) { AttackIDPropertyComponent, AttackIDEditComponent, AttackIDViewComponent, + StixIDPropertyComponent, ListPropertyComponent, ListEditComponent, ListViewComponent, diff --git a/app/src/app/components/stix/attackid-property/attackid-property.component.html b/app/src/app/components/stix/attackid-property/attackid-property.component.html index 53416660..5907c968 100644 --- a/app/src/app/components/stix/attackid-property/attackid-property.component.html +++ b/app/src/app/components/stix/attackid-property/attackid-property.component.html @@ -8,7 +8,7 @@ content_copy - ID + ATT&CK ID \ No newline at end of file diff --git a/app/src/app/components/stix/attackid-property/attackid-view/attackid-view.component.spec.ts b/app/src/app/components/stix/attackid-property/attackid-view/attackid-view.component.spec.ts index 178f529f..6481481f 100644 --- a/app/src/app/components/stix/attackid-property/attackid-view/attackid-view.component.spec.ts +++ b/app/src/app/components/stix/attackid-property/attackid-view/attackid-view.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { AttackidViewComponent } from './attackid-view.component'; +import { AttackIDViewComponent } from './attackid-view.component'; describe('AttackidViewComponent', () => { - let component: AttackidViewComponent; - let fixture: ComponentFixture; + let component: AttackIDViewComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ AttackidViewComponent ] + declarations: [ AttackIDViewComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(AttackidViewComponent); + fixture = TestBed.createComponent(AttackIDViewComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/app/src/app/components/stix/stixid-property/README.md b/app/src/app/components/stix/stixid-property/README.md new file mode 100644 index 00000000..ad06a19a --- /dev/null +++ b/app/src/app/components/stix/stixid-property/README.md @@ -0,0 +1,2 @@ +# stixid-property +`stixid-property.component` is used for displaying ATT&CK STIX IDs of an object. \ No newline at end of file diff --git a/app/src/app/components/stix/stixid-property/stixid-property.component.html b/app/src/app/components/stix/stixid-property/stixid-property.component.html new file mode 100644 index 00000000..78f60083 --- /dev/null +++ b/app/src/app/components/stix/stixid-property/stixid-property.component.html @@ -0,0 +1,10 @@ +
+
+ {{config.object["stixID"]}} + +
+
\ No newline at end of file diff --git a/app/src/app/components/stix/stixid-property/stixid-property.component.scss b/app/src/app/components/stix/stixid-property/stixid-property.component.scss new file mode 100644 index 00000000..56addbbc --- /dev/null +++ b/app/src/app/components/stix/stixid-property/stixid-property.component.scss @@ -0,0 +1,6 @@ +.stix-header { + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; +} \ No newline at end of file diff --git a/app/src/app/components/stix/stixid-property/stixid-property.component.spec.ts b/app/src/app/components/stix/stixid-property/stixid-property.component.spec.ts new file mode 100644 index 00000000..29fcbee4 --- /dev/null +++ b/app/src/app/components/stix/stixid-property/stixid-property.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StixIDPropertyComponent } from './stixid-property.component'; + +describe('StixidPropertyComponent', () => { + let component: StixIDPropertyComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ StixIDPropertyComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(StixIDPropertyComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/app/src/app/components/stix/stixid-property/stixid-property.component.ts b/app/src/app/components/stix/stixid-property/stixid-property.component.ts new file mode 100644 index 00000000..8e2e7acd --- /dev/null +++ b/app/src/app/components/stix/stixid-property/stixid-property.component.ts @@ -0,0 +1,27 @@ +import { Component, Input } from '@angular/core'; +import { MatSnackBar } from '@angular/material/snack-bar'; +import { StixObject } from 'src/app/classes/stix/stix-object'; + +@Component({ + selector: 'app-stixid-property', + templateUrl: './stixid-property.component.html', + styleUrls: ['./stixid-property.component.scss'] +}) +export class StixIDPropertyComponent { + @Input() public config: StixIDPropertyConfig; + public get stixIdLink(): string { return `${this.config.object["stixID"]}`; } + + constructor(public snackbar: MatSnackBar) { + // intentionally left blank + } +} +export interface StixIDPropertyConfig { + /* What is the current mode? + * view: viewing the list property + */ + mode: "view" + /* The object to show the field of + * Note: if mode is diff, pass an array of two objects to diff + */ + object: StixObject | [StixObject, StixObject]; +} \ No newline at end of file diff --git a/app/src/app/components/subheading/subheading.component.html b/app/src/app/components/subheading/subheading.component.html index f73a31bf..6570b26f 100644 --- a/app/src/app/components/subheading/subheading.component.html +++ b/app/src/app/components/subheading/subheading.component.html @@ -1,3 +1,8 @@ + + +
diff --git a/app/src/style/layouts/extended-button.scss b/app/src/style/layouts/extended-button.scss index 42a61f02..803ad0f0 100644 --- a/app/src/style/layouts/extended-button.scss +++ b/app/src/style/layouts/extended-button.scss @@ -31,4 +31,26 @@ width: 24px !important; height: 24px !important; } +} + +.mini-icon-button { + @extend .small-icon-button; + width: 20px !important; + height: 20px !important; + + & > *[role=img] { + width: 12px; + height: 12px; + font-size: 12px; + + svg { + width: 12px; + height: 12px; + } + } + + .mat-mdc-button-touch-target { + width: 12px !important; + height: 12px !important; + } } \ No newline at end of file