Merge branch 'master' into feat/347-responsive-app

Author: vbakke

.github/workflows/main.yml

@@ -14,6 +14,7 @@ permissions:
 
 jobs:
   build:
+    if: github.repository == 'devsecopsmaturitymodel/DevSecOps-MaturityModel'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -73,11 +74,14 @@ jobs:
             echo "HEROKU_BRANCH=master" >> $GITHUB_ENV
           fi
           echo "HEROKU_BRANCH=master" >> $GITHUB_ENV
+      - name: Install Heroku CLI
+        run: |
+          curl https://cli-assets.heroku.com/install.sh | sh 
       - name: "Deploy ${{ github.ref }} to Heroku"
-        uses: akhileshns/heroku-deploy@9fd0f9faae4aa93a38d6f5e25b9128589f1371b0 #v3.12.14
+        uses: akhileshns/heroku-deploy@v3.13.15
         with:
           heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
           heroku_app_name: "dsomm"
           heroku_email: timo.pagel@owasp.org
           branch: ${{ env.HEROKU_BRANCH }}
-          usedocker: true
+          usedocker: true          

.github/workflows/tests.yml

@@ -13,6 +13,6 @@ jobs:
       with:
         node-version: 16.0
     - name: Install dependencies
-      run: npm install
+      run: npm install --legacy-peer-deps
     - name: Test
       run: npm test -- --watch=false --browsers=ChromeHeadless

Development.md

@@ -1,42 +1,72 @@
-# DSOMM
+# DevSecOps Maturity Model (DSOMM)
 
-## Development server
+## Introduction
 
-- Clone the repo
+The DevSecOps Maturity Model (DSOMM) is an open-source framework designed to help organizations evaluate and improve their **DevSecOps** practices.  
+It provides structured **security maturity levels**, recommendations, and automation insights to enable teams to build **secure, efficient, and scalable software**.
+
+This guide walks you through **setting up the project locally**, making contributions, and submitting a pull request.
+
+## **Project Setup**
+
+### Development Server
+
+The DSOMM is based [Angular](https://angular.dev/) and uses npm for package management.
+
+- If you have not yet installed npm or the Angular command line tools, install them now. First [NodeJS](https://nodejs.org/en/download) (which provides npm), then Angular:
+
+```bash
+npm install -g @angular/cli
 ```
+
+- Clone the DSOMM repo
+
+```bash
 git clone https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel.git
 ```
+
 - Change directory to DSOMM
-```
+
+```bash
 cd DevSecOps-MaturityModel
 ```
+
 - Install Dependencies
-```
+
+```bash
 npm install
 ```
-- Downloads the generated.yaml and put it in the required folder
-```
+
+- **NB!** The DSOMM activities are maintained separately. Download the `generated.yaml` and put it in the required folder
+
+```bash
 curl https://raw.githubusercontent.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data/main/src/assets/YAML/generated/generated.yaml -o src/assets/YAML/generated/generated.yaml
 ```
 
 - Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
-
-## Code scaffolding
+## Code Scaffolding
 
 Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 
 Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-## Running unit tests
+## Running Unit Tests
 
 Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
 ## Coding Style Conventions
 
-- We follow the coding style defined by [ESLint](https://eslint.org/). 
+- We follow the coding style defined by [ESLint](https://eslint.org/).
 - We also use [Prettier](https://prettier.io/docs/en/index.html) as our opinionated code formatter.
-- To validate the schemas of the DSOMM yaml files in the IDE, it is recommended to use the VS Code extension [redhat.vscode-yaml](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml). The schemas are stored in /src/assets/YAML/schemas
+- To validate the schemas of the DSOMM yaml files in the IDE, it is recommended to use the VS Code extension [redhat.vscode-yaml](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml). The schemas are stored in `/src/assets/YAML/schemas`
+
+### Running Linter
+
+Run `ng lint` to run the linter from the command line.  
+If you want to lint only a specific component, use:
 
+```bash
+ng lint --lint-file-patterns .\src\app\component\xxxxxx\

README.md

@@ -4,7 +4,7 @@ From a startup to a multinational corporation the software development industry
 
 The OWASP DevSecOps Maturity Model provides opportunities to harden DevOps strategies and shows how these can be prioritized.
 
-With the help of DevOps strategies security can also be enhanced. For example, each component such as application libraries and operating system libraries in docker images can be tested for known vulnerabilities. 
+With the help of DevOps strategies security can also be enhanced. For example, each component such as application libraries and operating system libraries in docker images can be tested for known vulnerabilities.
 
 Attackers are intelligent and creative, equipped with new technologies and purpose. Under the guidance of the forward-looking DevSecOps Maturity Model, appropriate principles and measures are at hand implemented which counteract the attacks.
 
@@ -63,9 +63,9 @@ In case you would like to perform a DevSecOps assessment, the following tools ar
 3. Browse to <http://localhost:8080> (on macOS and Windows browse to <http://192.168.99.100:8080> if you are using docker-machine instead
    of the native docker installation)
 
-For customized DSOMM, take a look at https://github.com/wurstbrot/DevSecOps-MaturityModel-custom. In case you would like to have perform an assessment for multiple teams, iterate from port 8080 to 8XXX, depending of the size of your team.
+For customized DSOMM, take a look at https://github.com/wurstbrot/DevSecOps-MaturityModel-custom. 
 
-You can download your current state from the circular headmap and mount it again via 
+You can download your current state from the circular heatmap and mount it again via 
 
 ```bash
 wget https://raw.githubusercontent.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data/main/src/assets/YAML/generated/generated.yaml # or go to /circular-heatmap and download edited yaml (bottom right)
@@ -94,6 +94,29 @@ service docker start
 docker run -d -p 80:8080 wurstbrot/dsomm:latest
 ```
 
+## Generating the `generated.yaml` File
+
+The `generated.yaml` file is dynamically created during the build process. If you don’t see this file after setup, follow these steps to generate it:
+
+**1. Clone the Required Repository:**
+The `generated.yaml` file is built via the DevSecOps-MaturityModel-data repository. Make sure you have cloned and set it up correctly.
+
+**2. Run the Build Command:**
+Navigate to the project directory and run the following command:
+- *Using npm:*
+
+```sh
+npm run build
+````
+
+- *Using yarn:*
+
+```sh
+yarn build
+```
+
+*If the file is missing, ensure all dependencies are installed and that you have the correct access to the `DevSecOps-MaturityModel-data` repository.*
+
 ## Activity Definitions
 The definition of the activities are in the [data-repository](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data). 
 
@@ -124,10 +147,18 @@ In the corresponding [dimension YAMLs](https://github.com/devsecopsmaturitymodel
 [...]
       teamsImplemented:
         Default: false
+        B: true
         C: true
-      evidence:
-        B: Showed Jenkinsfile
+      teamsEvidence:
+        B: All team members completed OWASP Secure Coding Dojo training on 2025-01-11. 
+        C: |
+          The pentest report from 2025 has been split into Jira tasks under
+          [TODO-123](https://jira.example.com/issues/TODO-123).
+          
+          _2025-04-01:_ All fixes of **critical** findings are deployed to production.
 ```
+The `|` is yaml syntax to indicate that the evidence spans multiple lines. Markdown 
+syntax can be used. The evidence is currently visible on the activity from the Matrix page.
 
 # Back link
 

package-lock.json

@@ -15,7 +15,8 @@ const routes: Routes = [
   { path: 'matrix', component: MatrixComponent },
   { path: 'activity-description', component: ActivityDescriptionComponent },
   { path: 'mapping', component: MappingComponent },
-  { path: 'usage', component: UsageComponent },
+  { path: 'usage', redirectTo: 'usage/' },
+  { path: 'usage/:page', component: UsageComponent },
   { path: 'teams', component: TeamsComponent },
   { path: 'about', component: AboutUsComponent },
   { path: 'userday', component: UserdayComponent },

src/app/app-routing.module.ts

@@ -22,6 +22,12 @@ import { AboutUsComponent } from './component/about-us/about-us.component';
 import { DependencyGraphComponent } from './component/dependency-graph/dependency-graph.component';
 import { TeamsComponent } from './component/teams/teams.component';
 import { ToStringValuePipe } from './pipe/to-string-value.pipe';
+import { ModalMessageComponent } from './component/modal-message/modal-message.component';
+import {
+  MatDialogModule,
+  MAT_DIALOG_DATA,
+  MatDialogRef,
+} from '@angular/material/dialog';
 
 @NgModule({
   declarations: [
@@ -40,16 +46,23 @@ import { ToStringValuePipe } from './pipe/to-string-value.pipe';
     TeamsComponent,
     ToStringValuePipe,
     UserdayComponent,
+    ModalMessageComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     MaterialModule,
+    MatDialogModule,
     ReactiveFormsModule,
     HttpClientModule,
   ],
-  providers: [ymlService],
+  providers: [
+    ymlService,
+    ModalMessageComponent,
+    { provide: MAT_DIALOG_DATA, useValue: {} },
+    { provide: MatDialogRef, useValue: { close: (dialogResult: any) => {} } },
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/app.module.ts

@@ -4,26 +4,25 @@ import { ymlService } from 'src/app/service/yaml-parser/yaml-parser.service';
 import { CircularHeatmapComponent } from './circular-heatmap.component';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MatChip } from '@angular/material/chips';
+import { ModalMessageComponent } from '../modal-message/modal-message.component';
 
 describe('CircularHeatmapComponent', () => {
   let component: CircularHeatmapComponent;
   let fixture: ComponentFixture<CircularHeatmapComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      providers: [ymlService, HttpClient, HttpHandler],
+      declarations: [CircularHeatmapComponent, MatChip],
       imports: [RouterTestingModule],
-      declarations: [CircularHeatmapComponent],
+      providers: [
+        ymlService,
+        HttpClient,
+        HttpHandler,
+        { provide: ModalMessageComponent, useValue: {} },
+      ],
     }).compileComponents();
-  });
-  beforeEach(async () => {
-    TestBed.configureTestingModule({
-      declarations: [MatChip],
-    }).compileComponents();
-  });
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CircularHeatmapComponent);
+    fixture = TestBed.createComponent(CircularHeatmapComponent); // Create fixture and component here
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/component/circular-heatmap/circular-heatmap.component.spec.ts

@@ -11,6 +11,10 @@ import * as yaml from 'js-yaml';
 import { Router } from '@angular/router';
 import { MatChip } from '@angular/material/chips';
 import * as md from 'markdown-it';
+import {
+  ModalMessageComponent,
+  DialogInfo,
+} from '../modal-message/modal-message.component';
 
 export interface activitySchema {
   uuid: string;
@@ -63,7 +67,7 @@ export class CircularHeatmapComponent implements OnInit {
   constructor(
     private yaml: ymlService,
     private router: Router,
-    private changeDetector: ChangeDetectorRef
+    public modal: ModalMessageComponent
   ) {
     this.showOverlay = false;
     this.showFilters = true;
@@ -85,6 +89,14 @@ export class CircularHeatmapComponent implements OnInit {
   @ViewChildren(MatChip) chips!: QueryList<MatChip>;
   matChipsArray: MatChip[] = [];
 
+  displayMessage(dialogInfo: DialogInfo) {
+    // Remove focus from the button that becomes aria unavailable (avoids ugly console error message)
+    const buttonElement = document.activeElement as HTMLElement;
+    buttonElement.blur();
+
+    this.modal.openDialog(dialogInfo);
+  }
+
   private LoadMaturityDataFromGeneratedYaml() {
     return new Promise<void>((resolve, reject) => {
       console.log(`${this.perfNow()}s: LoadMaturityData Fetch`);
@@ -826,9 +838,26 @@ export class CircularHeatmapComponent implements OnInit {
     }
   }
 
-  ResetIsImplemented() {
-    localStorage.removeItem('dataset');
-    this.loadDataset();
+  deleteLocalTeamsProgress() {
+    // Remove focus from the button that becomes aria unavailable (avoids ugly console error message)
+    const buttonElement = document.activeElement as HTMLElement;
+    buttonElement.blur();
+
+    let title: string = 'Delete local browser data';
+    let message: string =
+      'Do you want to delete all progress for each team?' +
+      '\n\nThis deletes all progress stored in your local browser, but does ' +
+      'not change any progress stored in the yaml file on the server.';
+    let buttons: string[] = ['Cancel', 'Delete'];
+    this.modal
+      .openDialog({ title, message, buttons, template: '' })
+      .afterClosed()
+      .subscribe(data => {
+        if (data === 'Delete') {
+          localStorage.removeItem('dataset');
+          location.reload(); // Make sure all load routines are initialized
+        }
+      });
   }
 
   saveDataset() {

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

@@ -0,0 +1,14 @@
+.dialog {
+    margin: 0.5em;
+    padding: 1em;
+}
+
+.dialog-buttons {
+    display: flex;
+    justify-content: flex-end;
+}
+
+button {
+    min-width: 5rem;
+    margin: 0 1rem;
+}