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

Commit

Permalink
feat(stack overview): add new overview feature changes.
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@arunkumars08
Jyasveer Gotta authored and arunkumars08 committed Apr 10, 2017
1 parent 228ca7d commit 5baed81
Show file tree
Hide file tree
Showing 5 changed files with 221 additions and 186 deletions.
3 changes: 2 additions & 1 deletion src/app/stack/constants/constants.overview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,6 @@ export const OVERVIEW_CONSTANT: any = {
'licenseInformation': 'License Information',
'issueMetrics': 'Issue Metrics',
'activity': 'Activity',
'codeMetrics': 'Code Metrics'
'codeMetrics': 'Code Metrics',
'dependencies': 'Dependencies'
};
149 changes: 77 additions & 72 deletions src/app/stack/overview/overview.component.html
100644 → 100755
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,86 @@
<div class="overview-stack">
<h1>{{messages && messages.title}}</h1>
<div class="row">
<div class="col-xs-5">
<div class="overview-cards card-pf card-pf-utilization">
<div>
<h2 class="card-pf-title">
{{messages && messages.summary}}
</h2>
</div>
<div class="card-pf-body">
<div class="row make-center">
<div *ngFor="let summary of summaryChartInfo" class="col-md-4">
<div class="row f8-icon-size {{summary.className}}">
<i class="fa {{summary.icon}}"></i>
</div>
<div class="row f8-chart-numeric">
{{summary.numeric}}
</div>
<div class="row f8-chart-description">
<p>{{summary.description}}</p>
<p *ngIf="summary.subDescription" class="sub-description">{{summary.subDescription}}</p>
</div>
</div>
</div>
</div>
<h1>{{messages && messages.title}}</h1>
<div class="row">
<!--<div class="col-sm-4 col-xs-12">
<div class="overview-cards card-pf card-pf-utilization">
<div>
<h2 class="card-pf-title">
{{messages && messages.security}}
</h2>
</div>
</div>
</div>-->
<div class="col-sm-2 col-xs-12">
<div class="overview-cards card-pf card-pf-utilization ">
<div>
<h2 class="card-pf-title ">
{{messages && messages.dependencies}}
</h2>
</div>
<div class="card-pf-body ">
<div class="row make-center ">
<div class="col-sm-12">
<div class="row f8-icon-size {{summaryInfo.className}} ">
<i class="fa {{summaryInfo.icon}} "></i>
</div>
<div class="row f8-chart-numeric ">
{{summaryInfo.numeric}}
</div>
<div class="row f8-chart-description ">
<p>{{summaryInfo.description}}</p>
<p *ngIf="summaryInfo.subDescription " class="sub-description ">{{summaryInfo.subDescription}}</p>
</div>
</div>

<div class="overview-cards card-pf card-pf-utilization">
<div>
<h2 class="card-pf-title">
{{messages && messages.licenseInformation}}
</h2>
</div>
<div class="card-pf-body">
<div class="row">
<div class="col-md-6">
<h2>{{licenseChartInfo && licenseChartInfo.code}}</h2>
<p>{{licenseChartInfo && licenseChartInfo.description}}</p>
</div>
<div class="col-md-6 license-entries">
<div *ngFor="let license of licenseChartInfo.each">
<i class="fa {{license.icon}}"></i>
{{license && license.name}}
{{license && license.comment}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="overview-cards card-pf card-pf-utilization ">
<div>
<h2 class="card-pf-title ">
{{messages && messages.codeMetrics}}
</h2>
</div>
<div class="card-pf-body ">
<div class="row make-center ">
<div *ngFor="let codeMetric of codeMetricsInfo " class="col-sm-4 ">
<div class="row f8-icon-size {{codeMetric.className}} ">
<i class="fa {{codeMetric.icon}} "></i>
</div>
<div class="row f8-chart-numeric ">
{{codeMetric.numeric}}
</div>
<div class="row f8-chart-description ">
<p>{{codeMetric.description}}</p>
<p *ngIf="codeMetric.subDescription " class="sub-description ">{{codeMetric.subDescription}}</p>
</div>
</div>
</div>
</div>
<div class="col-md-3">

</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="overview-cards card-pf card-pf-utilization ">
<div>
<h2 class="card-pf-title ">
{{messages && messages.licenseInformation}}
</h2>
</div>
<div class="col-md-4">
<div class="overview-cards card-pf card-pf-utilization">
<div>
<h2 class="card-pf-title">
{{messages && messages.codeMetrics}}
</h2>
</div>
<div class="card-pf-body">
<div class="row make-center">
<div *ngFor="let codeMetric of codeMetricChartInfo" class="col-md-4">
<div class="row f8-icon-size {{codeMetric.className}}">
<i class="fa {{codeMetric.icon}}"></i>
</div>
<div class="row f8-chart-numeric">
{{codeMetric.numeric}}
</div>
<div class="row f8-chart-description">
<p>{{codeMetric.description}}</p>
<p *ngIf="codeMetric.subDescription" class="sub-description">{{codeMetric.subDescription}}</p>
</div>
</div>
</div>
</div>
<div class="card-pf-body ">
<div class="row ">
<div class="col-md-6 ">
<h2>{{licenseChartInfo && licenseChartInfo.code}}</h2>
<p>{{licenseChartInfo && licenseChartInfo.description}}</p>
</div>
<div class="col-md-6 license-entries ">
<div *ngFor="let license of licenseChartInfo.each ">
<i class="fa {{license.icon}} "></i> {{license && license.name}} {{license && license.comment}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
1 change: 1 addition & 0 deletions src/app/stack/overview/overview.component.scss
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
background: #fafafa;

.overview-cards {
height: 220px;
margin-left: 0;

.f8-icon-size {
Expand Down
174 changes: 86 additions & 88 deletions src/app/stack/overview/overview.component.ts
100644 → 100755
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,102 @@
import { Component, Input, OnInit } from '@angular/core';
import { Component, Input, OnInit, OnChanges } from '@angular/core';
import { GlobalConstants } from '../constants/constants.service';

@Component({
selector: 'overview-stack',
templateUrl: './overview.component.html',
styleUrls: ['./overview.component.scss'],
selector: 'overview-stack',
templateUrl: './overview.component.html',
styleUrls: ['./overview.component.scss'],
})
export class OverviewComponent implements OnInit {
@Input() stackOverviewData;
export class OverviewComponent implements OnChanges {
@Input() stackOverviewData;

public summaryChartInfo: Array<any> = [];
public codeMetricChartInfo: Array<any> = [];
public licenseChartInfo: any = {};
public summaryInfo: Array<any> = [];
public codeMetricsInfo: Array<any> = [];
public licenseChartInfo: any = {};

private cveDataList: any;
private messages: any;
private cveDataList: any;
private messages: any;

constructor(private constants: GlobalConstants) {
this.constants.getMessages('overview').subscribe((message) => {
this.messages = message;
});
}
constructor(private constants: GlobalConstants) {
this.constants.getMessages('overview').subscribe((message) => {
this.messages = message;
});
}

ngOnInit() {
this.initOverviewComponents(this.stackOverviewData);
ngOnChanges() {
console.log(this.stackOverviewData);
let summaryInfo: any = {
icon: 'pficon-replicator',
numeric: 0,
description: 'Dependencies',
subDescription: '(direct declared)',
className: 'overview-depen-icon'
};

let summaryChart: Array<any> = [{
icon: 'fa-star',
numeric: 5664,
description: 'Github Stars',
className: 'overview-star-icon'
}, {
icon: 'pficon-virtual-machine',
numeric: 1077,
description: 'Github forks',
className: 'overview-fork-icon'
}, {
icon: 'pficon-replicator',
numeric: 6,
description: 'Dependencies',
subDescription: '(direct declared)',
className: 'overview-depen-icon'
}];
let codeMetrics: Array<any> = [{
key: 'noOfLines',
icon: 'fa-list-alt',
numeric: 0,
description: 'lines of code',
className: 'overview-code-metric-icon'
}, {
key: 'avgCyclometricComplex',
icon: 'pficon-virtual-machine',
numeric: 0,
description: 'Avg. cyclomatic complexity',
className: 'overview-code-metric-icon'
}, {
key: 'noOfFiles',
icon: 'pficon-replicator',
numeric: 0,
description: 'total files',
className: 'overview-code-metric-icon'
}];

let codeMetricChart: Array<any> = [{
icon: 'fa-list-alt',
numeric: 42336,
description: 'lines of code',
className: 'overview-code-metric-icon'
}, {
icon: 'pficon-virtual-machine',
numeric: 1.34,
description: 'Avg. cyclomatic complexity',
className: 'overview-code-metric-icon'
}, {
icon: 'pficon-replicator',
numeric: 441,
description: 'total files',
className: 'overview-code-metric-icon'
}];
let licenseChart: any = {
code: 'ASL 2.0',
description: 'Common stack license',
each: [{
icon: 'pficon-warning-triangle-o',
name: 'Free Art license',
comment: 'is outlier'
}, {
icon: 'pficon-warning-triangle-o',
name: 'Rsfs license',
comment: 'is outlier'
}, {
icon: 'pficon-warning-triangle-o',
name: 'MITNFA license',
comment: 'is outlier'
}]
};

let licenseChart: any = {
code: 'ASL 2.0',
description: 'Common stack license',
each: [{
icon: 'pficon-warning-triangle-o',
name: 'Free Art license',
comment: 'is outlier'
}, {
icon: 'pficon-warning-triangle-o',
name: 'Rsfs license',
comment: 'is outlier'
}, {
icon: 'pficon-warning-triangle-o',
name: 'MITNFA license',
comment: 'is outlier'
}]
};
this.buildSummary(summaryInfo);
this.buildCodeMetrics(codeMetrics);
this.buildLicenseChart(licenseChart);
}

this.summaryChart(summaryChart);
this.codeMetricsChart(codeMetricChart);
this.licenseChart(licenseChart);
}
private buildSummary(summaryChart: any): void {
summaryChart.numeric = this.stackOverviewData.noOfComponents;
this.summaryInfo = summaryChart;
}

private summaryChart(summaryChart: Array<any>): void {
this.summaryChartInfo = summaryChart;
}
private buildCodeMetrics(codeMetrics: Array<any>): void {
codeMetrics.forEach(item => {
switch (item.key) {
case 'noOfLines': item.numeric = this.stackOverviewData.totalNoOfLines;
break;
case 'noOfFiles': item.numeric = this.stackOverviewData.totalNoOfFiles;
break;
case 'avgCyclometricComplex': item.numeric = this.stackOverviewData.avgCyclometricComplex;
break;
default:
}
});
this.codeMetricsInfo = codeMetrics;
}

private codeMetricsChart(codeMetricChart: Array<any>): void {
this.codeMetricChartInfo = codeMetricChart;
}

private licenseChart(licenseChart: any): void {
this.licenseChartInfo = licenseChart;
}

private initOverviewComponents(stackOverviewData: any): void {
if (stackOverviewData) {
this.cveDataList = stackOverviewData.CVEdata;
}
}
private buildLicenseChart(licenseChart: any): void {
this.licenseChartInfo = licenseChart;
}
}

Loading

0 comments on commit 5baed81

Please sign in to comment.