Merge pull request #122 from 0x41head/angular-ui

0x41head · web-flow · commit f39c201efa18 · 2022-07-07T13:44:07.000+05:30
Added 'isImplemented' in YAML and made circular heatmap dynamic
diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.ts b/src/app/component/circular-heatmap/circular-heatmap.component.ts
@@ -1,126 +1,92 @@
 import { Component, OnInit } from '@angular/core';
+import { ymlService } from '../../service/yaml-parser/yaml-parser.service';
 import * as d3 from 'd3';
 
+export interface task{
+  name:string
+  done:boolean
+}
+
+export interface dataset{
+  Name:string
+  Level:string
+  "Done%":number
+  Task:task[]
+}
+
 @Component({
   selector: 'app-circular-heatmap',
   templateUrl: './circular-heatmap.component.html',
   styleUrls: ['./circular-heatmap.component.css']
 })
 export class CircularHeatmapComponent implements OnInit {
-  
-  show:number=0
+  maxLevel:number=-1
+  show:boolean=false
   header:string=''
   subheader:string=''
   tasks:any[]=[]
-  data:any[] =[{
-    "Name": "Build",
-    "Level": "Level 1",
-    "Done%":1/2,
-    "Task":[
-      { name:"temp1",
-        done:1  
-    },
-      { name:"temp2",
-        done:0
-    }
-    ]
-  },{
-    "Name": "Deployment",
-    "Level": "Level 1",
-    "Done%":1/2,
-    "Task":[
-      { name:"temp1",
-        done:1  
-    },
-      { name:"temp2",
-        done:0
-    }
-    ]
-  },{
-    "Name": "Build",
-    "Level": "Level 2",
-    "Done%":1/2,
-    "Task":[
-      { name:"temp1",
-        done:1  
-    },
-      { name:"temp2",
-        done:0
-    }
-    ]
-  },{
-    "Name": "Deployment",
-    "Level": "Level 2",
-    "Done%":1/2,
-    "Task":[
-      { name:"temp1",
-        done:1  
-    },
-      { name:"temp2",
-        done:0
-    }
-    ]
-  }, {
-    "Name": "Build",
-    "Level": "Level 3",
-    "Done%":1/2,
-    "Task":[
-      { name:"temp1",
-        done:1  
-    },
-      { name:"temp2",
-        done:0
-    }
-    ]
-  },{
-    "Name": "Deployment",
-    "Level": "Level 3",
-    "Done%":1/2,
-    "Task":[
-      { name:"temp1",
-        done:1  
-    },
-      { name:"temp2",
-        done:0
-    }
-    ]
-  },{
-    "Name": "Build",
-    "Level": "Level 4",
-    "Done%":1/2,
-    "Task":[
-      { name:"temp1",
-        done:1  
-    },
-      { name:"temp2",
-        done:0
-    }
-    ]
-  },{
-    "Name": "Deployment",
-    "Level": "Level 4",
-    "Done%":1/3,
-    "Task":[
-      { name:"temp1",
-        done:1  
-    },
-      { name:"temp2",
-        done:0
-    },
-    { name:"temp3",
-        done:0
-    }
-    ]
-  }];
-  radial_labels = ['Level 1','Level 2','Level 3','Level 4'];
-
-  segment_labels = ['Build', 'Deployment'];
-  constructor() { }
+  tempdata:dataset[]=[]
+  data:dataset[] =[];
+  radial_labels:string[]= [];
+  YamlObject:any;
+  segment_labels:string[] = [];
+  constructor(private yaml:ymlService) { }
 
   ngOnInit(): void {
+    this.yaml.setURI('./assets/YAML/sample.yaml');
+    // Function sets column header
+    this.yaml.getJson().subscribe((data) => {
+      this.YamlObject = data;
 
-  this.loadCircularHeatMap(this.data, "#chart", this.radial_labels, this.segment_labels);
+      // Levels header
+      for(let x in this.YamlObject['strings']['en']['maturity_levels']){
+        var y=parseInt(x)+1
+        this.radial_labels.push('Level '+y)
+        this.maxLevel=y
+        }      
+      
+    });
 
+    this.yaml.setURI('./assets/YAML/generated/sample.yaml');
+    // Function sets data 
+    this.yaml.getJson().subscribe((data) => {
+      console.log(this.radial_labels)
+      this.YamlObject = data;
+      
+      for(var x in this.YamlObject['dimension']){
+        this.segment_labels.push(this.YamlObject['dimension'][x]['subdimension']['name'])
+      }
+      for(var l=0 ; l<this.maxLevel; l++){
+        for(var x in this.YamlObject['dimension']){
+          var tempdata:dataset={
+            "Name": "",
+            "Level": "",
+            "Done%":0,
+            "Task":[]
+          }
+          var totalDone:number=0
+          try{
+            tempdata["Name"]=this.YamlObject['dimension'][x]['subdimension']['name']
+            tempdata["Level"]="Level "+(l+1) 
+            for(var i=0;i<this.YamlObject['dimension'][x]['subdimension']['level-'+(l+1)].length;i++){
+              var nameOfTask=this.YamlObject['dimension'][x]['subdimension']['level-'+(l+1)][i]['name']
+              var Status:boolean=this.YamlObject['dimension'][x]['subdimension']['level-'+(l+1)][i]['isImplemented']
+              if(Status){
+                totalDone+=1
+              }
+              tempdata["Task"].push({"name":nameOfTask,"done":Status})
+            }
+            tempdata["Done%"]=totalDone/this.YamlObject['dimension'][x]['subdimension']['level-'+(l+1)].length
+          }
+          catch{
+            tempdata["Done%"]=0
+          }
+          this.data.push(tempdata)
+        }
+      }
+      console.log(this.data)
+      this.loadCircularHeatMap(this.data, "#chart", this.radial_labels, this.segment_labels);
+    })
   }
 
   checkboxToggle(taskIndex:number){
@@ -134,16 +100,16 @@ export class CircularHeatmapComponent implements OnInit {
         break;
       }
     }
-    if(this.data[index]["Task"][taskIndex]["done"]==1){
-      this.data[index]["Task"][taskIndex]["done"]=0
+    if(this.data[index]["Task"][taskIndex]["done"]){
+      this.data[index]["Task"][taskIndex]["done"]=false
     }
     else{
-      this.data[index]["Task"][taskIndex]["done"]=1
+      this.data[index]["Task"][taskIndex]["done"]=true
     }
     //console.log(this.data[i]["Task"][taskIndex]["done"])
     for(var i=0;i< this.data[index]["Task"].length;i++){
       console.log(this.data[index]["Task"][i]["done"])
-      if(this.data[index]["Task"][i]["done"]==1){
+      if(this.data[index]["Task"][i]["done"]){
         cnt+=1
       } 
     }
@@ -152,7 +118,7 @@ export class CircularHeatmapComponent implements OnInit {
     var color = d3.scaleLinear<string,string>().domain([0,1]).range(["white", "green"]);
     
     this.loadCircularHeatMap(this.data, "#chart", this.radial_labels, this.segment_labels);
-    d3.selectAll("#segment-" + this.data[index]["Name"]+'-'+this.data[index]["Level"].replaceAll(' ','-')).attr("fill", function(p) {
+    d3.selectAll("#segment-" + this.data[index]["Name"]+'-'+this.data[index]["Level"].replace(' ','-')).attr("fill", function(p) {
       return color(_self.data[index]["Done%"])
     });
     
@@ -168,7 +134,7 @@ export class CircularHeatmapComponent implements OnInit {
       bottom: 50,
       left: 50
     };
-    var width = 1000 - margin.left - margin.right;
+    var width = 950 - margin.left - margin.right;
     var curr:any;
     var height = width;
     var innerRadius = 100; // width/14;
@@ -214,7 +180,7 @@ export class CircularHeatmapComponent implements OnInit {
         _self.subheader=d.explicitOriginalTarget.__data__.Level
         _self.tasks=d.explicitOriginalTarget.__data__.Task;
         _self.header=d.explicitOriginalTarget.__data__.Name
-        _self.show=1
+        _self.show=true
         console.log(_self.tasks)
       })
       .on('mouseover', function(d) {
@@ -412,5 +378,7 @@ export class CircularHeatmapComponent implements OnInit {
   
     return chart;
   }
+
+  
   
 }
diff --git a/src/assets/YAML/generated/sample.yaml b/src/assets/YAML/generated/sample.yaml
@@ -46,8 +46,10 @@ dimension:
         - Quality is not visible to everyone, quality checks are distributed or
           manually and not deterministic.
         usefulness: 2
+        isImplemented: true
       - dependsOn:
         - Continuous Integration
+        isImplemented: false
         description: 'Sample evidence as an attribute in the yaml: The build process
           is defined in <a href="REPLACE-ME">REPLACE-ME Pipeline</a>
 
@@ -92,6 +94,7 @@ dimension:
           knowledge: 2
           resources: 2
           time: 2
+        isImplemented: true
         implementation:
         - name: CI/CD tools # string
           tags:
@@ -135,6 +138,7 @@ dimension:
         level: 2
         measure: Pinning of artifacts ensure that changes are performed only when intended.
         name: Pinning of artifacts
+        isImplemented: false
         references:
           iso27001-2017:
           - 14.2.6
@@ -162,6 +166,7 @@ dimension:
         - '8.1'
         - '8.2'
         level: 2
+        isImplemented: true
         measure: Creation of an SBOM of components (e.g. application and container image
           content) during build.
         name: SBOM of components
@@ -184,6 +189,7 @@ dimension:
             CI/CD tools such as jenkins, gitlab-ci or github-actions 
         - name: Container technologies and orchestration like Docker, Kubernetes # string
         level: 3
+        isImplemented: true
         measure: Digitally signing commits helps to prevent unauthorized manipulation
           of source code.
         name: Signing of code
@@ -210,6 +216,7 @@ dimension:
           description: CI/CD tools such as jenkins, gitlab-ci or github-actions 
         - name: Container technologies and orchestration like Docker, Kubernetes # string
         level: 3
+        isImplemented: false
         measure: Digitally signing artifacts for all steps during the build and especially
           docker images, helps to ensure their integrity.
         name: Signing of artifacts
@@ -244,6 +251,7 @@ dimension:
         measure: A defined deployment process significantly lowers the likelihood of
           errors during the deployment phase.
         name: Defined deployment process
+        isImplemented: true
         references:
           iso27001-2017:
           - 12.1.1
@@ -267,6 +275,7 @@ dimension:
           description: CI/CD tools such as jenkins, gitlab-ci or github-actions 
         - name: Container technologies and orchestration like Docker, Kubernetes # string
         level: 2
+        isImplemented: false
         measure: 'Configuration parameters are set for each environment not in the source
           code.
 
@@ -306,6 +315,7 @@ dimension:
         - 15.1.3
         - 14.1.3
         level: 2
+        isImplemented: true
         measure: Create image assessment criteria, perform an evaluation of images and
           create a whitelist of artifacts/container images/virtual machine images.
         name: Usage of trusted images
@@ -320,6 +330,7 @@ dimension:
           resources: 1
           time: 2
         level: 2
+        isImplemented: false
         measure: By having a clear decommissioning process, applicaitons not used are
           not running anymore and can therefore not be explointed.
         name: Defined decommissioning process
@@ -352,6 +363,7 @@ dimension:
         - 14.2.2
         - 17.2.1
         level: 3
+        isImplemented: true
         measure: A deployment without downtime is performed*.
         name: Rolling update on deployment
         risk:
@@ -377,6 +389,7 @@ dimension:
         - 14.2.8
         - 12.1.4
         level: 3
+        isImplemented: false
         measure: Building an artifact once and deploying it to different environments
           means that only tested artifacts are allowed to reach the production environment
         name: Same artifact for environments
@@ -404,6 +417,7 @@ dimension:
           file system. Also, the usage of a credential management system can help protect
           credentials.
         name: Handover of confidential parameters
+        isImplemented: true
         references:
           iso27001-2017:
           - 14.1.3
@@ -439,6 +453,7 @@ dimension:
         - 14.2.9
         - 12.1.4
         level: 3
+        isImplemented: false
         measure: Usage of environment independent configuration parameter, called feature
           toggles, helps to enhance the test coverage. Only what has been tested, goes
           to production.
@@ -464,6 +479,7 @@ dimension:
         - '8.1'
         - '8.2'
         level: 3
+        isImplemented: true
         measure: A documented inventory or a possibility to gather the needed information.
         name: Inventory of running artifacts
         risk:
@@ -492,6 +508,7 @@ dimension:
         - '8.1'
         - '8.2'
         level: 3
+        isImplemented: false
         measure: A documented inventory of dependencies used in images and containers
           exists.
         name: Inventory of dependencies
@@ -517,6 +534,7 @@ dimension:
           description: CI/CD tools such as jenkins, gitlab-ci or github-actions 
         - name: Container technologies and orchestration like Docker, Kubernetes # string
         level: 4
+        isImplemented: true
         measure: By having multiple production environments, a deployment can be performant
           on the first environment to spot possible defects before it is deployment
           in the production environment(s)
