Skip to content
This repository was archived by the owner on May 7, 2021. It is now read-only.

Commit 5baed81

Browse files
Jyasveer Gottaarunkumars08
Jyasveer Gotta
authored and
arunkumars08
committed
feat(stack overview): add new overview feature changes.
Changes: 1. Dependencies section now displays the data from the api. Got rid of hard coded values 2. Code metrics section shows the data aggregated for all the dependencies. Got rid of hard coded values. 3. Add constants
1 parent 228ca7d commit 5baed81

5 files changed

Lines changed: 221 additions & 186 deletions

File tree

‎src/app/stack/constants/constants.overview.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@ export const OVERVIEW_CONSTANT: any = {
99
'licenseInformation': 'License Information',
1010
'issueMetrics': 'Issue Metrics',
1111
'activity': 'Activity',
12-
'codeMetrics': 'Code Metrics'
12+
'codeMetrics': 'Code Metrics',
13+
'dependencies': 'Dependencies'
1314
};

‎src/app/stack/overview/overview.component.html‎

100644100755
Lines changed: 77 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,86 @@
11
<div class="overview-stack">
2-
<h1>{{messages && messages.title}}</h1>
3-
<div class="row">
4-
<div class="col-xs-5">
5-
<div class="overview-cards card-pf card-pf-utilization">
6-
<div>
7-
<h2 class="card-pf-title">
8-
{{messages && messages.summary}}
9-
</h2>
10-
</div>
11-
<div class="card-pf-body">
12-
<div class="row make-center">
13-
<div *ngFor="let summary of summaryChartInfo" class="col-md-4">
14-
<div class="row f8-icon-size {{summary.className}}">
15-
<i class="fa {{summary.icon}}"></i>
16-
</div>
17-
<div class="row f8-chart-numeric">
18-
{{summary.numeric}}
19-
</div>
20-
<div class="row f8-chart-description">
21-
<p>{{summary.description}}</p>
22-
<p *ngIf="summary.subDescription" class="sub-description">{{summary.subDescription}}</p>
23-
</div>
24-
</div>
25-
</div>
26-
</div>
2+
<h1>{{messages && messages.title}}</h1>
3+
<div class="row">
4+
<!--<div class="col-sm-4 col-xs-12">
5+
<div class="overview-cards card-pf card-pf-utilization">
6+
<div>
7+
<h2 class="card-pf-title">
8+
{{messages && messages.security}}
9+
</h2>
10+
</div>
11+
</div>
12+
</div>-->
13+
<div class="col-sm-2 col-xs-12">
14+
<div class="overview-cards card-pf card-pf-utilization ">
15+
<div>
16+
<h2 class="card-pf-title ">
17+
{{messages && messages.dependencies}}
18+
</h2>
19+
</div>
20+
<div class="card-pf-body ">
21+
<div class="row make-center ">
22+
<div class="col-sm-12">
23+
<div class="row f8-icon-size {{summaryInfo.className}} ">
24+
<i class="fa {{summaryInfo.icon}} "></i>
25+
</div>
26+
<div class="row f8-chart-numeric ">
27+
{{summaryInfo.numeric}}
28+
</div>
29+
<div class="row f8-chart-description ">
30+
<p>{{summaryInfo.description}}</p>
31+
<p *ngIf="summaryInfo.subDescription " class="sub-description ">{{summaryInfo.subDescription}}</p>
32+
</div>
2733
</div>
28-
29-
<div class="overview-cards card-pf card-pf-utilization">
30-
<div>
31-
<h2 class="card-pf-title">
32-
{{messages && messages.licenseInformation}}
33-
</h2>
34-
</div>
35-
<div class="card-pf-body">
36-
<div class="row">
37-
<div class="col-md-6">
38-
<h2>{{licenseChartInfo && licenseChartInfo.code}}</h2>
39-
<p>{{licenseChartInfo && licenseChartInfo.description}}</p>
40-
</div>
41-
<div class="col-md-6 license-entries">
42-
<div *ngFor="let license of licenseChartInfo.each">
43-
<i class="fa {{license.icon}}"></i>
44-
{{license && license.name}}
45-
{{license && license.comment}}
46-
</div>
47-
</div>
48-
</div>
49-
</div>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
<div class="col-sm-3 col-xs-12">
39+
<div class="overview-cards card-pf card-pf-utilization ">
40+
<div>
41+
<h2 class="card-pf-title ">
42+
{{messages && messages.codeMetrics}}
43+
</h2>
44+
</div>
45+
<div class="card-pf-body ">
46+
<div class="row make-center ">
47+
<div *ngFor="let codeMetric of codeMetricsInfo " class="col-sm-4 ">
48+
<div class="row f8-icon-size {{codeMetric.className}} ">
49+
<i class="fa {{codeMetric.icon}} "></i>
50+
</div>
51+
<div class="row f8-chart-numeric ">
52+
{{codeMetric.numeric}}
53+
</div>
54+
<div class="row f8-chart-description ">
55+
<p>{{codeMetric.description}}</p>
56+
<p *ngIf="codeMetric.subDescription " class="sub-description ">{{codeMetric.subDescription}}</p>
57+
</div>
5058
</div>
59+
</div>
5160
</div>
52-
<div class="col-md-3">
53-
61+
</div>
62+
</div>
63+
<div class="col-sm-3 col-xs-12">
64+
<div class="overview-cards card-pf card-pf-utilization ">
65+
<div>
66+
<h2 class="card-pf-title ">
67+
{{messages && messages.licenseInformation}}
68+
</h2>
5469
</div>
55-
<div class="col-md-4">
56-
<div class="overview-cards card-pf card-pf-utilization">
57-
<div>
58-
<h2 class="card-pf-title">
59-
{{messages && messages.codeMetrics}}
60-
</h2>
61-
</div>
62-
<div class="card-pf-body">
63-
<div class="row make-center">
64-
<div *ngFor="let codeMetric of codeMetricChartInfo" class="col-md-4">
65-
<div class="row f8-icon-size {{codeMetric.className}}">
66-
<i class="fa {{codeMetric.icon}}"></i>
67-
</div>
68-
<div class="row f8-chart-numeric">
69-
{{codeMetric.numeric}}
70-
</div>
71-
<div class="row f8-chart-description">
72-
<p>{{codeMetric.description}}</p>
73-
<p *ngIf="codeMetric.subDescription" class="sub-description">{{codeMetric.subDescription}}</p>
74-
</div>
75-
</div>
76-
</div>
77-
</div>
70+
<div class="card-pf-body ">
71+
<div class="row ">
72+
<div class="col-md-6 ">
73+
<h2>{{licenseChartInfo && licenseChartInfo.code}}</h2>
74+
<p>{{licenseChartInfo && licenseChartInfo.description}}</p>
75+
</div>
76+
<div class="col-md-6 license-entries ">
77+
<div *ngFor="let license of licenseChartInfo.each ">
78+
<i class="fa {{license.icon}} "></i> {{license && license.name}} {{license && license.comment}}
79+
</div>
7880
</div>
81+
</div>
7982
</div>
83+
</div>
8084
</div>
85+
</div>
8186
</div>

‎src/app/stack/overview/overview.component.scss‎

100644100755
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
background: #fafafa;
44

55
.overview-cards {
6+
height: 220px;
67
margin-left: 0;
78

89
.f8-icon-size {

‎src/app/stack/overview/overview.component.ts‎

100644100755
Lines changed: 86 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,102 @@
1-
import { Component, Input, OnInit } from '@angular/core';
1+
import { Component, Input, OnInit, OnChanges } from '@angular/core';
22
import { GlobalConstants } from '../constants/constants.service';
33

44
@Component({
5-
selector: 'overview-stack',
6-
templateUrl: './overview.component.html',
7-
styleUrls: ['./overview.component.scss'],
5+
selector: 'overview-stack',
6+
templateUrl: './overview.component.html',
7+
styleUrls: ['./overview.component.scss'],
88
})
9-
export class OverviewComponent implements OnInit {
10-
@Input() stackOverviewData;
9+
export class OverviewComponent implements OnChanges {
10+
@Input() stackOverviewData;
1111

12-
public summaryChartInfo: Array<any> = [];
13-
public codeMetricChartInfo: Array<any> = [];
14-
public licenseChartInfo: any = {};
12+
public summaryInfo: Array<any> = [];
13+
public codeMetricsInfo: Array<any> = [];
14+
public licenseChartInfo: any = {};
1515

16-
private cveDataList: any;
17-
private messages: any;
16+
private cveDataList: any;
17+
private messages: any;
1818

19-
constructor(private constants: GlobalConstants) {
20-
this.constants.getMessages('overview').subscribe((message) => {
21-
this.messages = message;
22-
});
23-
}
19+
constructor(private constants: GlobalConstants) {
20+
this.constants.getMessages('overview').subscribe((message) => {
21+
this.messages = message;
22+
});
23+
}
2424

25-
ngOnInit() {
26-
this.initOverviewComponents(this.stackOverviewData);
25+
ngOnChanges() {
26+
console.log(this.stackOverviewData);
27+
let summaryInfo: any = {
28+
icon: 'pficon-replicator',
29+
numeric: 0,
30+
description: 'Dependencies',
31+
subDescription: '(direct declared)',
32+
className: 'overview-depen-icon'
33+
};
2734

28-
let summaryChart: Array<any> = [{
29-
icon: 'fa-star',
30-
numeric: 5664,
31-
description: 'Github Stars',
32-
className: 'overview-star-icon'
33-
}, {
34-
icon: 'pficon-virtual-machine',
35-
numeric: 1077,
36-
description: 'Github forks',
37-
className: 'overview-fork-icon'
38-
}, {
39-
icon: 'pficon-replicator',
40-
numeric: 6,
41-
description: 'Dependencies',
42-
subDescription: '(direct declared)',
43-
className: 'overview-depen-icon'
44-
}];
35+
let codeMetrics: Array<any> = [{
36+
key: 'noOfLines',
37+
icon: 'fa-list-alt',
38+
numeric: 0,
39+
description: 'lines of code',
40+
className: 'overview-code-metric-icon'
41+
}, {
42+
key: 'avgCyclometricComplex',
43+
icon: 'pficon-virtual-machine',
44+
numeric: 0,
45+
description: 'Avg. cyclomatic complexity',
46+
className: 'overview-code-metric-icon'
47+
}, {
48+
key: 'noOfFiles',
49+
icon: 'pficon-replicator',
50+
numeric: 0,
51+
description: 'total files',
52+
className: 'overview-code-metric-icon'
53+
}];
4554

46-
let codeMetricChart: Array<any> = [{
47-
icon: 'fa-list-alt',
48-
numeric: 42336,
49-
description: 'lines of code',
50-
className: 'overview-code-metric-icon'
51-
}, {
52-
icon: 'pficon-virtual-machine',
53-
numeric: 1.34,
54-
description: 'Avg. cyclomatic complexity',
55-
className: 'overview-code-metric-icon'
56-
}, {
57-
icon: 'pficon-replicator',
58-
numeric: 441,
59-
description: 'total files',
60-
className: 'overview-code-metric-icon'
61-
}];
55+
let licenseChart: any = {
56+
code: 'ASL 2.0',
57+
description: 'Common stack license',
58+
each: [{
59+
icon: 'pficon-warning-triangle-o',
60+
name: 'Free Art license',
61+
comment: 'is outlier'
62+
}, {
63+
icon: 'pficon-warning-triangle-o',
64+
name: 'Rsfs license',
65+
comment: 'is outlier'
66+
}, {
67+
icon: 'pficon-warning-triangle-o',
68+
name: 'MITNFA license',
69+
comment: 'is outlier'
70+
}]
71+
};
6272

63-
let licenseChart: any = {
64-
code: 'ASL 2.0',
65-
description: 'Common stack license',
66-
each: [{
67-
icon: 'pficon-warning-triangle-o',
68-
name: 'Free Art license',
69-
comment: 'is outlier'
70-
}, {
71-
icon: 'pficon-warning-triangle-o',
72-
name: 'Rsfs license',
73-
comment: 'is outlier'
74-
}, {
75-
icon: 'pficon-warning-triangle-o',
76-
name: 'MITNFA license',
77-
comment: 'is outlier'
78-
}]
79-
};
73+
this.buildSummary(summaryInfo);
74+
this.buildCodeMetrics(codeMetrics);
75+
this.buildLicenseChart(licenseChart);
76+
}
8077

81-
this.summaryChart(summaryChart);
82-
this.codeMetricsChart(codeMetricChart);
83-
this.licenseChart(licenseChart);
84-
}
78+
private buildSummary(summaryChart: any): void {
79+
summaryChart.numeric = this.stackOverviewData.noOfComponents;
80+
this.summaryInfo = summaryChart;
81+
}
8582

86-
private summaryChart(summaryChart: Array<any>): void {
87-
this.summaryChartInfo = summaryChart;
88-
}
83+
private buildCodeMetrics(codeMetrics: Array<any>): void {
84+
codeMetrics.forEach(item => {
85+
switch (item.key) {
86+
case 'noOfLines': item.numeric = this.stackOverviewData.totalNoOfLines;
87+
break;
88+
case 'noOfFiles': item.numeric = this.stackOverviewData.totalNoOfFiles;
89+
break;
90+
case 'avgCyclometricComplex': item.numeric = this.stackOverviewData.avgCyclometricComplex;
91+
break;
92+
default:
93+
}
94+
});
95+
this.codeMetricsInfo = codeMetrics;
96+
}
8997

90-
private codeMetricsChart(codeMetricChart: Array<any>): void {
91-
this.codeMetricChartInfo = codeMetricChart;
92-
}
93-
94-
private licenseChart(licenseChart: any): void {
95-
this.licenseChartInfo = licenseChart;
96-
}
97-
98-
private initOverviewComponents(stackOverviewData: any): void {
99-
if (stackOverviewData) {
100-
this.cveDataList = stackOverviewData.CVEdata;
101-
}
102-
}
98+
private buildLicenseChart(licenseChart: any): void {
99+
this.licenseChartInfo = licenseChart;
100+
}
103101
}
104102

0 commit comments

Comments
 (0)