Merge pull request #349 from vbakke/feat/344-team-names

Allow team names to be controlled by meta.yaml

Author: wurstbrot

src/app/app-routing.module.ts

@@ -7,15 +7,15 @@ import { MappingComponent } from './component/mapping/mapping.component';
 import { MatrixComponent } from './component/matrix/matrix.component';
 import { ActivityDescriptionComponent } from './component/activity-description/activity-description.component';
 import { UsageComponent } from './component/usage/usage.component';
-import { Teams } from './component/teams/teams.component';
+import { TeamsComponent } from './component/teams/teams.component';
 
 const routes: Routes = [
   { path: '', component: MatrixComponent },
   { path: 'circular-heatmap', component: CircularHeatmapComponent },
   { path: 'activity-description', component: ActivityDescriptionComponent },
   { path: 'mapping', component: MappingComponent },
   { path: 'usage', component: UsageComponent },
-  { path: 'teams', component: Teams },
+  { path: 'teams', component: TeamsComponent },
   { path: 'about', component: AboutUsComponent },
   { path: 'userday', component: UserdayComponent },
 ];

src/app/app.module.ts

@@ -20,7 +20,7 @@ import { UsageComponent } from './component/usage/usage.component';
 import { UserdayComponent } from './component/userday/userday.component';
 import { AboutUsComponent } from './component/about-us/about-us.component';
 import { DependencyGraphComponent } from './component/dependency-graph/dependency-graph.component';
-import { Teams } from './component/teams/teams.component';
+import { TeamsComponent } from './component/teams/teams.component';
 import { ToStringValuePipe } from './pipe/to-string-value.pipe';
 
 @NgModule({
@@ -37,7 +37,7 @@ import { ToStringValuePipe } from './pipe/to-string-value.pipe';
     UsageComponent,
     AboutUsComponent,
     DependencyGraphComponent,
-    Teams,
+    TeamsComponent,
     ToStringValuePipe,
     UserdayComponent,
   ],

src/app/component/activity-description/activity-description.component.ts

@@ -37,7 +37,7 @@ export interface activityDescription {
   assessment: string;
   comments: string;
   isImplemented: boolean;
-  teamsImplemented: Object;
+  teamsImplemented: Record<string, any>;
 }
 
 @Component({
@@ -78,6 +78,7 @@ export class ActivityDescriptionComponent implements OnInit {
   YamlObject: any;
   GeneralLabels: string[] = [];
   KnowledgeLabels: string[] = [];
+  TeamList: string[] = [];
   rowIndex: number = 0;
   markdown: md = md();
   SAMMVersion: string = 'OWASP SAMM VERSION 2';
@@ -95,16 +96,20 @@ export class ActivityDescriptionComponent implements OnInit {
     //gets value from sample file
     this.yaml.setURI('./assets/YAML/meta.yaml');
     // Function sets label data
+    console.log(this.perfNow() + 's: meta.yaml fetch');
     this.yaml.getJson().subscribe(data => {
-      this.YamlObject = data;
-      this.GeneralLabels = this.YamlObject['strings']['en']['labels'];
-      this.KnowledgeLabels =
-        this.YamlObject['strings']['en']['KnowledgeLabels'];
+      console.log(this.perfNow() + 's: meta.yaml');
+      this.GeneralLabels = data['strings']['en']['labels'];
+      this.KnowledgeLabels = data['strings']['en']['KnowledgeLabels'];
+      this.TeamList = data['teams']; // Genuine teams (the true source)
+      console.log(this.perfNow() + 's: meta.yaml processed');
     });
     //gets value from generated folder
+    console.log(this.perfNow() + 's: generated.yaml fetch');
     this.yaml.setURI('./assets/YAML/generated/generated.yaml');
     // Function sets data
     this.yaml.getJson().subscribe(data => {
+      console.log(this.perfNow() + 's: generated.yaml downloaded');
       this.YamlObject = data;
 
       var allDimensionNames = Object.keys(this.YamlObject);
@@ -250,40 +255,48 @@ export class ActivityDescriptionComponent implements OnInit {
         data['isImplemented'],
         false
       );
-      const dataFromLocalStorage = localStorage.getItem('dataset');
+      let combinedTeamsImplemented: any = {};
+      const dataFromLocalStorage: string | null =
+        localStorage.getItem('dataset');
       if (dataFromLocalStorage !== null) {
-        var parsedDataFromLocalStorage = JSON.parse(dataFromLocalStorage);
-        var index = -1;
-        for (var i = 0; i < parsedDataFromLocalStorage.length; i++) {
-          for (
-            var j = 0;
-            j < parsedDataFromLocalStorage[i]['Activity'].length;
-            j++
-          ) {
-            if (
-              parsedDataFromLocalStorage[i]['Activity'][j]['uuid'] ===
-              data['uuid']
-            ) {
-              console.log('test', parsedDataFromLocalStorage[i]['Activity'][j]);
-
-              index = i;
-              this.currentActivity.teamsImplemented =
-                parsedDataFromLocalStorage[i]['Activity'][j][
-                  'teamsImplemented'
-                ];
+        let localData = JSON.parse(dataFromLocalStorage);
+        let localDataActivity = null;
 
+        // Find the activity with the correct uuid
+        for (let subdim of localData) {
+          for (let activity of subdim?.Activity) {
+            if (activity?.uuid === data?.uuid) {
+              console.log('Found', activity);
+              localDataActivity = activity;
               break;
             }
           }
+          if (localDataActivity) break;
         }
-        // this.currentActivity.teamsEvidence = this.defineEvidenceObject();
-      } else this.currentActivity.teamsImplemented = data['teamsImplemented'];
+
+        // Combine teams status from local storage and loaded yaml file
+        combinedTeamsImplemented = Object.assign(
+          {},
+          localDataActivity?.teamsImplemented,
+          this.currentActivity?.teamsImplemented
+        );
+      } else {
+        combinedTeamsImplemented = data['teamsImplemented'];
+      }
+
+      // Only keep genuine teams
+      this.currentActivity.teamsImplemented = {};
+      for (let team of this.TeamList) {
+        this.currentActivity.teamsImplemented[team] =
+          combinedTeamsImplemented[team];
+      }
 
       this.currentActivity.teamsEvidence = this.defineEvidenceObject(
         data['teamsEvidence']
       );
       // console.log("data['teamsEvidence']", data['teamsEvidence']);
       this.openall();
+      console.log(this.perfNow() + 's: generated.yaml processed');
     });
   }
 
@@ -378,4 +391,8 @@ export class ActivityDescriptionComponent implements OnInit {
       element.closeAll();
     });
   }
+
+  perfNow() {
+    return (performance.now() / 1000).toFixed(3);
+  }
 }

src/app/component/circular-heatmap/circular-heatmap.component.html

@@ -218,7 +218,7 @@ <h2>Nothing to show</h2>
                 </mat-chip>
                 <mat-chip
                   #c="matChip"
-                  *ngFor="let group of teamGroups | keyvalue"
+                  *ngFor="let group of teamGroups | keyvalue : unsorted"
                   (click)="toggleTeamGroupSelection(c)">
                   {{ group.key }}
                 </mat-chip>
@@ -263,14 +263,15 @@ <h2>Nothing to show</h2>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
                   <ul class="team-list">
-                    <li
-                      *ngFor="let item of activity.teamsImplemented | keyvalue">
+                    <li *ngFor="let teamname of teamVisible">
                       <mat-checkbox
-                        [checked]="item.value === true"
-                        *ngIf="teamVisible.includes(item.key | ToStringValue)"
+                        [checked]="activity.teamsImplemented[teamname]"
                         color="primary"
-                        (click)="this.teamCheckbox(activityIndex, item.key)">
-                        {{ item.key }}
+                        (click)="
+                          this.teamCheckbox(activityIndex, teamname);
+                          $event.preventDefault()
+                        ">
+                        {{ teamname }}
                       </mat-checkbox>
                     </li>
                   </ul>
@@ -288,7 +289,7 @@ <h2>Nothing to show</h2>
           class="normal-button"
           mat-raised-button
           class="downloadButtonClass"
-          (click)="SaveEditedYAMLfile()">
+          (click)="saveEditedYAMLfile()">
           Download edited YAML file
         </button>
         <button