From 5baed81f2af073e49904a9429e87eced5bc63b6c Mon Sep 17 00:00:00 2001 From: Jyasveer Gotta Date: Mon, 10 Apr 2017 18:11:49 +0530 Subject: [PATCH] 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 --- src/app/stack/constants/constants.overview.ts | 3 +- .../stack/overview/overview.component.html | 149 +++++++-------- .../stack/overview/overview.component.scss | 1 + src/app/stack/overview/overview.component.ts | 174 +++++++++--------- .../stack-details/stack-details.component.ts | 80 +++++--- 5 files changed, 221 insertions(+), 186 deletions(-) mode change 100644 => 100755 src/app/stack/overview/overview.component.html mode change 100644 => 100755 src/app/stack/overview/overview.component.scss mode change 100644 => 100755 src/app/stack/overview/overview.component.ts mode change 100644 => 100755 src/app/stack/stack-details/stack-details.component.ts diff --git a/src/app/stack/constants/constants.overview.ts b/src/app/stack/constants/constants.overview.ts index aeebf5f..2f330ad 100644 --- a/src/app/stack/constants/constants.overview.ts +++ b/src/app/stack/constants/constants.overview.ts @@ -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' }; diff --git a/src/app/stack/overview/overview.component.html b/src/app/stack/overview/overview.component.html old mode 100644 new mode 100755 index 7b370dc..0839626 --- a/src/app/stack/overview/overview.component.html +++ b/src/app/stack/overview/overview.component.html @@ -1,81 +1,86 @@
-

{{messages && messages.title}}

-
-
-
-
-

- {{messages && messages.summary}} -

-
-
-
-
-
- -
-
- {{summary.numeric}} -
-
-

{{summary.description}}

-

{{summary.subDescription}}

-
-
-
-
+

{{messages && messages.title}}

+
+ +
+
+
+

+ {{messages && messages.dependencies}} +

+
+
+
+
+
+ +
+
+ {{summaryInfo.numeric}} +
+
+

{{summaryInfo.description}}

+

{{summaryInfo.subDescription}}

+
- -
-
-

- {{messages && messages.licenseInformation}} -

-
-
-
-
-

{{licenseChartInfo && licenseChartInfo.code}}

-

{{licenseChartInfo && licenseChartInfo.description}}

-
-
-
- - {{license && license.name}} - {{license && license.comment}} -
-
-
-
+
+
+
+
+
+
+
+

+ {{messages && messages.codeMetrics}} +

+
+
+
+
+
+ +
+
+ {{codeMetric.numeric}} +
+
+

{{codeMetric.description}}

+

{{codeMetric.subDescription}}

+
+
-
- +
+
+
+
+
+

+ {{messages && messages.licenseInformation}} +

-
-
-
-

- {{messages && messages.codeMetrics}} -

-
-
-
-
-
- -
-
- {{codeMetric.numeric}} -
-
-

{{codeMetric.description}}

-

{{codeMetric.subDescription}}

-
-
-
-
+
+
+
+

{{licenseChartInfo && licenseChartInfo.code}}

+

{{licenseChartInfo && licenseChartInfo.description}}

+
+
+
+ {{license && license.name}} {{license && license.comment}} +
+
+
+
diff --git a/src/app/stack/overview/overview.component.scss b/src/app/stack/overview/overview.component.scss old mode 100644 new mode 100755 index 2ee2ad0..a04a447 --- a/src/app/stack/overview/overview.component.scss +++ b/src/app/stack/overview/overview.component.scss @@ -3,6 +3,7 @@ background: #fafafa; .overview-cards { + height: 220px; margin-left: 0; .f8-icon-size { diff --git a/src/app/stack/overview/overview.component.ts b/src/app/stack/overview/overview.component.ts old mode 100644 new mode 100755 index bf572ac..1ab004e --- a/src/app/stack/overview/overview.component.ts +++ b/src/app/stack/overview/overview.component.ts @@ -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 = []; - public codeMetricChartInfo: Array = []; - public licenseChartInfo: any = {}; + public summaryInfo: Array = []; + public codeMetricsInfo: Array = []; + 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 = [{ - 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 = [{ + 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 = [{ - 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): void { - this.summaryChartInfo = summaryChart; - } + private buildCodeMetrics(codeMetrics: Array): 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): 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; + } } diff --git a/src/app/stack/stack-details/stack-details.component.ts b/src/app/stack/stack-details/stack-details.component.ts old mode 100644 new mode 100755 index c8400ff..17fdd75 --- a/src/app/stack/stack-details/stack-details.component.ts +++ b/src/app/stack/stack-details/stack-details.component.ts @@ -82,24 +82,12 @@ export class StackDetailsComponent implements OnInit { ngOnInit() { this.getStackAnalyses(this.stack.uuid); - this.setStackAnalysisChartData(); } public showStackModal(): void { this.modalStackModule.open(); } - /** - * setStackAnalysisChartData - takes nothing and returns nothing - * This function helps in setting the data that will be passed for - * overview component - */ - private setStackAnalysisChartData(): void { - this.stackOverviewData = { - CVEdata: ['CVE-2014-0001', 'CVE-2014-12345', 'CVE-2013-78934'] - }; - } - /** * getRecommendationActions - takes nothing and returns an Array * This function returns the static Array of objects that are to be used @@ -129,11 +117,11 @@ export class StackDetailsComponent implements OnInit { action: 'Add', message: key[0] + ' ' + missing[i][key[0]], codebase: { -         'repository': 'Test_Repo', -         'branch': 'task-1234', -         'filename': 'package.json', -         'linenumber': 35 -       }, + 'repository': 'Test_Repo', + 'branch': 'task-1234', + 'filename': 'package.json', + 'linenumber': 35 + }, pop: this.getRecommendationActions() }); } @@ -147,11 +135,11 @@ export class StackDetailsComponent implements OnInit { action: 'Upgrade', message: key[0] + ' ' + version[i][key[0]], codebase: { -         'repository': 'Exciting', -         'branch': 'task-101', -         'filename': 'package.json', -         'linenumber': 1 -       }, + 'repository': 'Exciting', + 'branch': 'task-101', + 'filename': 'package.json', + 'linenumber': 1 + }, pop: this.getRecommendationActions() }); } @@ -162,6 +150,42 @@ export class StackDetailsComponent implements OnInit { this.dependencies = components; } + private setOverviewData(components: Array): void { + // set the package dependencies number + let noOfComponents: number = components.length; + let totalCyclometricComplex: number = 0; + let avgCyclometricComplex: number = 0; + let totalNoOfLines: number = 0; + let totalNoOfFiles: number = 0; + let cveData: any = { + cveString: '', + cveScore: 0 + }; + let security = { + 'CVE-2014-0001': 2, + 'CVE-2014-12345': 4, + 'CVE-2013-78934': 6 + }; + components.forEach(item => { + totalNoOfFiles += item.code_metrics.total_files; + totalNoOfLines += item.code_metrics.code_lines; + totalCyclometricComplex += item.code_metrics.average_cyclomatic_complexity; + }); + for (let key in security) { + if (security[key] > cveData.cveScore) { + cveData.cveScore = security[key]; + cveData.cveString = key; + } + } + this.stackOverviewData = { + noOfComponents: noOfComponents, + totalNoOfFiles: totalNoOfFiles, + totalNoOfLines: totalNoOfLines, + avgCyclometricComplex: Math.round(totalCyclometricComplex / noOfComponents * 1000) / 1000, + cvdData: cveData + }; + } + private setComponentsToGrid(stackData: any): void { let components: Array = stackData.components; let length: number = components.length; @@ -197,20 +221,25 @@ export class StackDetailsComponent implements OnInit { this.stackAnalysesService .getStackAnalyses(id) .subscribe(data => { - // Enter the actual scene only if the data is valid and the data has something inside. + // Enter the actual scene only if the data is valid and the data + // has something inside. if (data && Object.keys(data).length !== 0) { stackAnalysesData = data; let result: any; let components: Array = []; // Check if the data has results key - if (stackAnalysesData.hasOwnProperty('result') && stackAnalysesData.result.length > 0) { + if (stackAnalysesData.hasOwnProperty('result') && + stackAnalysesData.result.length > 0) { result = stackAnalysesData.result[0]; if (result.hasOwnProperty('components')) { components = result.components; // Call the stack-components with the components information so that // It can parse the necessary information and show relevant things. this.setDependencies(components); + + // set the overview data :- + this.setOverviewData(components); } this.setComponentsToGrid(result); @@ -225,7 +254,8 @@ export class StackDetailsComponent implements OnInit { let missingPackages: Array = analysis.missing_packages; let versionMismatch: Array = analysis.version_mismatch; - // Call the recommendations with the missing packages and version mismatches + // Call the recommendations with the missing packages + // and version mismatches this.setRecommendations(missingPackages, versionMismatch); } }