Merge pull request #589 from devsecopsmaturitymodel/wurstbrot-patch-3

add new YAML

Author: wurstbrot

.github/workflows/main.yml

@@ -20,15 +20,23 @@ jobs:
         with:
           persist-credentials: false # This is important if you have branch protection rules!
       - name: Semantic Release
+        id: semantic
         uses: cycjimmy/semantic-release-action@v4
         with:
           branch: 'main'
+          extra_plugins: |
+            @semantic-release/changelog
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Get Semantic Release Version
         id: get-version
         run: |
-          echo "::set-output name=version::$(grep -oP '\[\d+\.\d+\.\d+\]' CHANGELOG.md | tr -d '[]')"
+          version="${{ steps.semantic.outputs.new_release_version }}"
+          if [ -z "$version" ]; then
+            # No new release in this run (e.g. scheduled build) -> fall back to latest tag
+            version="$(git describe --tags --abbrev=0 2>/dev/null | sed 's/^v//')"
+          fi
+          echo "version=${version}" >> "$GITHUB_OUTPUT"
 
       - name: show version
         run: |

Dockerfile

@@ -19,7 +19,7 @@ RUN mkdir -p /usr/src/app/dist/dsomm/assets && \
     echo "branch: \"${GIT_BRANCH:-unknown}\"" >> /usr/src/app/dist/dsomm/assets/build-info.yaml
 
 
-FROM wurstbrot/dsomm-yaml-generation:4.2.0 AS yaml
+FROM wurstbrot/dsomm-yaml-generation:5.0.0 AS yaml
 
 FROM caddy:2.10.2
 ENV PORT=8080

README.md

@@ -58,22 +58,55 @@ In case you would like to perform a DevSecOps assessment, the following tools ar
 ## Container
 
 1. Install [Docker](https://www.docker.com)
-2. Run `docker pull wurstbrot/dsomm:latest && docker run --rm -p 8080:8080 wurstbrot/dsomm:latest`
+2. Run
+   ```bash
+   docker pull wurstbrot/dsomm:latest && docker run --rm -p 8080:8080 wurstbrot/dsomm:latest
+   ```
 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. 
+For customized DSOMM, take a look at https://github.com/wurstbrot/DevSecOps-MaturityModel-custom.
 
-You can download your current state from the circular heatmap and mount it again via 
+### Use the latest model data
 
 ```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)
-docker run -p 8080:8080 -v /tmp/generated.yaml:/srv/assets/YAML/generated/generated.yaml wurstbrot/dsomm:latest
+wget https://raw.githubusercontent.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data/refs/heads/main/generated/model.yaml
+docker run -p 8080:8080 -v "$PWD/model.yaml:/srv/assets/YAML/default/model.yaml" wurstbrot/dsomm:latest
 ```
 
-.
-
-This approach also allows teams to perform self assessment with changes tracked in a repository.
+If the old model version is still referenced, clear your browser cache!
+
+### Download and upload the current state
+
+1. Go to `/circular-heatmap`.
+2. Download team progress and team evidence via buttons in the bottom-right.
+3. Mount the downloaded YAML-files in the container:
+   ```bash
+   docker run -p 8080:8080 \
+     -v "$PWD/team-evidence.yaml:/srv/assets/YAML/team-evidence.yaml" \
+     -v "$PWD/team-progress.yaml:/srv/assets/YAML/team-progress.yaml" \
+     wurstbrot/dsomm:latest
+   ```
+This approach also allows teams to perform self-assessment with changes tracked in a repository.
+
+### Docker Compose
+
+You can also track everything in a repository with a `docker compose` setup.
+
+1. Ensure all files you want to track are present (`model.yaml`, `meta.yaml`, etc.).
+2. Copy the upstream compose.yaml:
+   ```bash
+   wget https://raw.githubusercontent.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/refs/heads/main/compose.yaml
+   ```
+3. Edit the file if necessary.
+4. Start the service:
+   ```bash
+   docker compose up -d
+   ```
+5. Stop the service and delete the container:
+   ```bash
+   docker compose down
+   ```
 
 ## Amazon EC2 Instance
 
@@ -93,34 +126,32 @@ 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:
+## Generating the `model.yaml` file
 
-**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.
+The `model.yaml` file is dynamically created during the build process. If you don’t see this file after setup, follow these steps to generate it:
 
-**2. Run the Build Command:**
-Navigate to the project directory and run the following command:
-- *Using npm:*
+1. **Clone the Required Repository:**
+   The `model.yaml` file is built via the [DevSecOps-MaturityModel-data repository](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data). Make sure you have cloned and set it up correctly.
 
-```sh
-npm run build
-````
-
-- *Using yarn:*
-
-```sh
-yarn build
-```
+2. **Run the Build Command:**
+   Navigate to the project directory and run the following command:
+   - Using `npm`:
+      ```bash
+      npm run build
+      ```
+   - Using `yarn`:
+      ```bash
+      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). 
 
 ## Teams and Groups
-To customize these teams, you can create your own [meta.yaml](src/assets/YAML/meta.yaml)  file with your unique team definitions.
+
+To customize these teams, you can create your own [meta.yaml](src/assets/YAML/meta.yaml) file with your unique team definitions.
 
 Assessments within the framework can be based on either a team or a specific application, which can be referred to as the context. Depending on how you define the context or teams, you may want to group them together.
 
@@ -129,21 +160,27 @@ Here are a couple of examples to illustrate this, in breakers the DSOMM word:
 - Multiple teams (teams) can belong to a larger department (group).
 
 Feel free to create your own [meta.yaml](src/assets/YAML/meta.yaml) file to tailor the framework to your specific needs and mount it in your environment (e.g. kubernetes or docker).
+
 Here is an example to start docker with customized meta.yaml:
-```
+
+```bash
 # Customized meta.yaml
 cp src/assets/YAML/meta.yaml .
-docker run -v $(pwd)/meta.yaml:/srv/assets/YAML/meta.yaml -p 8080:8080 wurstbrot/dsomm
+docker run -v "$PWD/meta.yaml:/srv/assets/YAML/meta.yaml" -p 8080:8080 wurstbrot/dsomm
 
-# Customized meta.yaml and generated.yaml
+# Customized meta.yaml and model.yaml
 cp src/assets/YAML/meta.yaml .
-cp $(pwd)/src/assets/YAML/generated/generated.yaml .
-docker run -v  $(pwd)/meta.yaml:/srv/assets/YAML/meta.yaml -v $(pwd)/generated.yaml:/srv/assets/YAML/generated/generated.yaml -p 8080:8080 wurstbrot/dsomm
+cp "$PWD/src/assets/YAML/generated/model.yaml" .
+docker run \
+  -v "$PWD/meta.yaml:/srv/assets/YAML/meta.yaml" \
+  -v "$PWD/model.yaml:/srv/assets/YAML/default/model.yaml" \
+  -p 8080:8080 wurstbrot/dsomm
 ```
 
 In the corresponding [dimension YAMLs](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data/tree/main/src/assets/YAML/default), use:
-```
-[...]
+
+```yaml
+#[...]
       teamsImplemented:
         Default: false
         B: true
@@ -156,7 +193,8 @@ In the corresponding [dimension YAMLs](https://github.com/devsecopsmaturitymodel
           
           _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 
+
+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

compose.yaml

@@ -0,0 +1,14 @@
+services:
+  dsomm:
+    image: wurstbrot/dsomm:latest
+    container_name: dsomm
+    ports:
+      - "8080:8080"
+    volumes:
+      ## uncomment the following line to add a modified meta.yaml
+      ## (see: https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel#teams-and-groups)
+      # - ./meta.yaml:/srv/assets/YAML/meta.yaml
+      - ./model.yaml:/srv/assets/YAML/default/model.yaml
+      - ./team-evidence.yaml:/srv/assets/YAML/team-evidence.yaml
+      - ./team-progress.yaml:/srv/assets/YAML/team-progress.yaml
+      ## add other files if needed

src/app/app.component.css

@@ -76,7 +76,7 @@
 }
 
 .content {
-  padding: 24px;
+  padding: 12px;
   animation: fadeSlide 1s ease;
   height: 100%;
   box-sizing: border-box;

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

@@ -346,15 +346,15 @@ export class CircularHeatmapComponent {
   ) {
     let _self = this;
     var imageWidth = 1200;
-    var marginAll = 5;
+    var marginAll = 0;
     var margin = {
       top: marginAll,
       right: marginAll,
       bottom: marginAll,
       left: marginAll,
     };
     var bbWidth = imageWidth - Math.max(margin.left + margin.right, margin.top + margin.bottom) * 2; // bounding box
-    var segmentLabelHeight = bbWidth * 0.0166; // Magic fudge number. to match the longest label within one sector
+    var segmentLabelHeight = 42;
     var outerRadius = bbWidth / 2 - segmentLabelHeight;
     var innerRadius = outerRadius / (maxLevel + 1);
     var segmentHeight = (outerRadius - innerRadius) / maxLevel;
@@ -504,10 +504,11 @@ export class CircularHeatmapComponent {
         // console.log(d3.selectAll(".circular-heat")["_groups"][0].length)
         var id = 1;
 
-        //Segment labels
-        var segmentLabelFontSize = (segmentLabelHeight * 2) / 3;
-        var segmentLabelOffset = (segmentLabelHeight * 1) / 3;
-        var r =
+        var segmentLabelOffset = 7;
+        var labelLineSpacing = 1.1;
+        var labelLineHeight = (segmentLabelHeight - segmentLabelOffset) / 2;
+        var segmentLabelFontSize = labelLineHeight / labelLineSpacing;
+        var labelBaseRadius =
           innerRadius + Math.ceil(data.length / numSegments) * segmentHeight + segmentLabelOffset;
         var labels = svg
           .append('g')
@@ -518,27 +519,59 @@ export class CircularHeatmapComponent {
             'translate(' + (margin.left + offset) + ',' + (margin.top + offset) + ')'
           );
 
+        function wordWrap(text: string, maxLen = 18): string[] {
+          if (text.length <= maxLen) return [text];
+          var mid = Math.floor(text.length / 2);
+          for (var d = 0; d <= mid; d++) {
+            if (text[mid + d] === ' ')
+              return [text.substring(0, mid + d), text.substring(mid + d + 1)];
+            if (mid - d >= 0 && text[mid - d] === ' ')
+              return [text.substring(0, mid - d), text.substring(mid - d + 1)];
+          }
+          return [text];
+        }
+
+        var wrappedLabels = segmentLabels.map((l: string) => wordWrap(l));
+        var hasMultiLine = wrappedLabels.some((parts: string[]) => parts.length > 1);
+        var outerLabelRadius = hasMultiLine ? labelBaseRadius + labelLineHeight : labelBaseRadius;
+
+        function arcPath(radius: number): string {
+          return 'm0 -' + radius + ' a' + radius + ' ' + radius + ' 0 1 1 -1 0';
+        }
+
+        var labelPathIds = ['segment-label-path-' + id + '-outer'];
         labels
           .append('def')
           .append('path')
-          .attr('id', 'segment-label-path-' + id)
-          .attr('d', 'm0 -' + r + ' a' + r + ' ' + r + ' 0 1 1 -1 0');
+          .attr('id', labelPathIds[0])
+          .attr('d', arcPath(outerLabelRadius));
+
+        if (hasMultiLine) {
+          labelPathIds.push('segment-label-path-' + id + '-inner');
+          labels
+            .append('def')
+            .append('path')
+            .attr('id', labelPathIds[1])
+            .attr('d', arcPath(labelBaseRadius));
+        }
 
-        labels
-          .selectAll('text')
-          .data(segmentLabels)
-          .enter()
-          .append('text')
-          .append('textPath')
-          .attr('text-anchor', 'middle')
-          .attr('xlink:href', '#segment-label-path-' + id)
-          .style('font-size', segmentLabelFontSize + 'px')
-          .attr('startOffset', function (d, i) {
-            return ((i + 0.5) * 100) / numSegments + '%'; // shift ½ segment to center
-          })
-          .text(function (d: any) {
-            return d;
+        wrappedLabels.forEach(function (parts: string[], i: number) {
+          var startOffset = ((i + 0.5) * 100) / numSegments + '%';
+          parts.forEach(function (line: string, lineIndex: number) {
+            var pathId =
+              lineIndex === 0 && parts.length > 1
+                ? labelPathIds[0]
+                : labelPathIds[hasMultiLine ? 1 : 0];
+            labels
+              .append('text')
+              .append('textPath')
+              .attr('text-anchor', 'middle')
+              .attr('xlink:href', '#' + pathId)
+              .style('font-size', segmentLabelFontSize + 'px')
+              .attr('startOffset', startOffset)
+              .text(line);
           });
+        });
         var cursors = svg
           .append('g')
           .classed('cursors', true)