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); } }