Tabs refactor

layers/LAYERFORMATv4_1.md

@@ -34,7 +34,7 @@ This document describes **Version 4.1** of the MITRE ATT&CK Navigator Layer file
 | Name     | Type     | Required? | Default Value (if not present) | Description |
 | :------------- | :------------- | :------------- | :------------- | :------------- |
 | attack | String | No | Current version of ATT&CK: "8" | ATT&CK version of this layer |
-| navigator | String | Yes | | Must be "4.1" |
+| navigator | String | Yes | | Must be "4.2" |
 | layer | String | Yes | | Must be "4.1" |
 
 ## Technique Object properties
@@ -90,7 +90,7 @@ The following example illustrates the layer file format:
     "name": "example layer",
     "versions": {
         "attack": "8",
-        "navigator": "4.1",
+        "navigator": "4.2",
         "layer": "4.1"
     },
     "domain": "enterprise-attack",

nav-app/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/mitre-attack/attack-navigator.git"
   },
-  "version": "4.1.0",
+  "version": "4.2.0",
   "license": "Apache-2.0",
   "scripts": {
     "ng": "ng",

nav-app/src/app/app.module.ts

@@ -20,8 +20,6 @@ import { HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
 import { DataTableComponent } from './datatable/data-table.component';
 import { TabsComponent } from './tabs/tabs.component';
-import { DynamicTabsDirective } from './tabs/dynamic-tabs.directive';
-import { TabComponent } from './tab/tab.component';
 import { HelpComponent } from './help/help.component';
 import { ExporterComponent } from './exporter/exporter.component';
 import { TechniqueCellComponent } from './matrix/technique-cell/technique-cell.component';
@@ -41,8 +39,6 @@ import { VersionUpgradeComponent } from './version-upgrade/version-upgrade.compo
     AppComponent,
     DataTableComponent,
     TabsComponent,
-    TabComponent,
-    DynamicTabsDirective,
     HelpComponent,
     ExporterComponent,
     TechniqueCellComponent,
@@ -83,6 +79,6 @@ import { VersionUpgradeComponent } from './version-upgrade/version-upgrade.compo
   ],
   providers: [],
   bootstrap: [AppComponent],
-  entryComponents: [ TabComponent, VersionUpgradeComponent ]
+  entryComponents: [ VersionUpgradeComponent, HelpComponent, ExporterComponent ]
 })
 export class AppModule { }

nav-app/src/app/data.service.ts

@@ -252,7 +252,7 @@ export class DataService {
             if (domain) {
                 this.getDomainData(domain, refresh).subscribe((data: Object[]) => {
                     this.parseBundle(domain, data);
-                    resolve();
+                    resolve(null);
                 });
             } else if (!domain) { // domain not defined in config
                 reject("'" + domainID + "' is not a valid domain.")

nav-app/src/app/datatable/data-table.component.ts

@@ -343,9 +343,6 @@ export class DataTableComponent implements AfterViewInit {
      * open an export layer render tab for the current layer
      */
     exportRender(): void {
-        let viewModelCopy = new ViewModel(this.viewModel.name, "vm" + this.viewModelsService.getNonce(), this.viewModel.domainID, this.dataService);
-        viewModelCopy.deSerialize(this.viewModel.serialize());
-        // let exportData = new ExportData(viewModelCopy, JSON.parse(JSON.stringify(this.tactics)), this.dataService.tacticNames(this.filteredTechniques),  JSON.parse(JSON.stringify(this.filteredTechniques)));
-        this.tabs.newExporterTab(this.viewModel);
+        this.tabs.openSVGDialog(this.viewModel);
     }
 }

nav-app/src/app/exporter/exporter.component.html

@@ -234,3 +234,7 @@
 <div class="svgcontainer" [id]="'svgInsert' + viewModel.uid">
     loading...
 </div>
+
+<div class="close-button">
+    <button mat-button mat-dialog-close>close</button>
+</div>

nav-app/src/app/exporter/exporter.component.scss

@@ -1,5 +1,19 @@
+@import "../../colors.scss";
+
 .svgcontainer {
-    overflow-x: auto
+    overflow-x: auto;
+    text-align: center;
+    min-height: 60vh;
+    max-height: 60vh;
+    min-width: 75vw;
+    max-width: 75vw;
+    padding:25px;
+}
+
+.close-button {
+    margin-top: 25px;
+    margin-bottom: 25px;
+    text-align: center;
 }
 
 .dropdown-container {

nav-app/src/app/exporter/exporter.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, AfterContentInit } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ViewModel, TechniqueVM } from "../viewmodels.service";
 import { ConfigService } from "../config.service";
 import { Technique, DataService, Tactic, Matrix } from '../data.service';
@@ -12,20 +13,22 @@ import { ColorPickerModule } from 'ngx-color-picker';
     templateUrl: './exporter.component.html',
     styleUrls: ['./exporter.component.scss']
 })
-export class ExporterComponent implements AfterContentInit {
-
+export class ExporterComponent implements OnInit {
+    
     public currentDropdown: string = null;
-
-    @Input() viewModel: ViewModel;
-
+    viewModel: ViewModel;
     public config: any = {}
+
     public isIE() {
         return is.ie();
     }
 
     private svgDivName = "svgInsert_tmp"
     unitEnum = 0; //counter for unit change ui element
-    constructor(public configService: ConfigService, private dataService: DataService) {
+    constructor(private dialogRef: MatDialogRef<ExporterComponent>, 
+                private configService: ConfigService, 
+                private dataService: DataService,
+                @Inject(MAT_DIALOG_DATA) public data) {
         this.config = { 
             "width": 11,
             "height": 8.5,
@@ -52,10 +55,12 @@ export class ExporterComponent implements AfterContentInit {
             "showAbout": true,
             "showDomain": true,
         }
-     }
+    }
 
-    ngAfterContentInit() {
+    ngOnInit() {
+        this.viewModel = this.data.vm;
         this.svgDivName = "svgInsert" + this.viewModel.uid;
+
         let self = this;
         //determine if the layer has any scores
         for (let matrix of this.dataService.getDomain(this.viewModel.domainID).matrices) {

nav-app/src/app/globals.ts

@@ -5,5 +5,5 @@
  //
 'use strict';
 
-export const nav_version: string="4.1"
+export const nav_version: string="4.2"
 export const layer_version: string="4.1"