refactor(summary): extract common k-v table module from summary

src/app/components/key-value-table/key-value-table.component.spec.ts

@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { DebugElement } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { KeyValueTableComponent } from './key-value-table.component';
+
+describe('KeyValueTableComponent', () => {
+	let component: KeyValueTableComponent;
+	let fixture: ComponentFixture<KeyValueTableComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [KeyValueTableComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(KeyValueTableComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/components/key-value-table/key-value-table.component.ts

@@ -0,0 +1,48 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-rng-kv-table',
+	template: `
+		<table>
+			<tr *ngFor="let k of keys">
+				<th>{{ k.title ? k.title : k.key }}</th>
+				<td>{{ isDefine(data[k.key]) ? data[k.key] : ' ' }}</td>
+			</tr>
+		</table>
+	`,
+	styles: [
+		`
+			th {
+				text-align: right;
+				min-width: 20%;
+				max-width: 40%;
+				padding: 0.25rem 3% 0.25rem 0.5rem;
+			}
+			th::after {
+				content: ':';
+			}
+			td {
+				min-width: 50%;
+				word-break: break-word;
+				padding: 0.25rem 0.5rem;
+			}
+			tr {
+				vertical-align: top;
+			}
+			table {
+				width: 100%;
+			}
+		`,
+	],
+})
+export class RngKeyValueTableComponent implements OnInit {
+	constructor() {}
+
+	@Input() keys: { key: string; title?: string }[] = [];
+	@Input() data: { [idx: string]: any } = {};
+
+	isDefine(val: any) {
+		return typeof val !== 'undefined';
+	}
+	ngOnInit() {}
+}

src/app/components/rng.module.ts

@@ -3,11 +3,17 @@ import { NgModule } from '@angular/core';
 import { NbIconModule } from '@nebular/theme';
 import { ChartsModule } from 'ng2-charts';
 import { TableModule } from 'ngx-easy-table';
+import { RngKeyValueTableComponent } from './key-value-table/key-value-table.component';
 import { RngSpeedChartComponent } from './speed-chart/speed-chart.component';
 import { RngDiffComponent } from './speed-chart/speed-diff.component';
 import { RngSummaryComponent } from './summary/summary.component';
 
-const RngComponents = [RngSpeedChartComponent, RngDiffComponent, RngSummaryComponent];
+const RngComponents = [
+	RngSpeedChartComponent,
+	RngDiffComponent,
+	RngSummaryComponent,
+	RngKeyValueTableComponent,
+];
 
 @NgModule({
 	declarations: RngComponents,

src/app/components/summary/summary.component.ts

@@ -5,29 +5,8 @@ import { ForamtDuration } from '../../utils/format-duration';
 
 @Component({
 	selector: 'app-rng-summary',
-	template: `
-		<dl>
-			<ng-container *ngFor="let item of keys">
-				<dt>{{ item.title }}</dt>
-				<dd>{{ isDefine(values[item.key]) ? values[item.key] : 'Unknow' }}</dd>
-			</ng-container>
-		</dl>
-	`,
-	styles: [
-		`
-			dl dt {
-				float: left;
-				width: 8rem;
-				text-align: right;
-			}
-			dt::after {
-				content: ': ';
-			}
-			dl dd {
-				margin-left: 10rem;
-			}
-		`,
-	],
+	template: ` <app-rng-kv-table [keys]="keys" [data]="values"> </app-rng-kv-table> `,
+	styles: [],
 })
 export class RngSummaryComponent implements OnInit {
 	@Input()
@@ -42,8 +21,8 @@ export class RngSummaryComponent implements OnInit {
 		{ key: 'deletes', title: 'Delete' },
 		{ key: 'durationHumanReadable', title: 'Duration' },
 		{ key: 'errors', title: 'Errors' },
-		{ key: 'fatalError', title: 'FatalError' },
-		{ key: 'retryError', title: 'RetryError' },
+		{ key: 'fatalError', title: 'Fatal Error' },
+		{ key: 'retryError', title: 'Retry Error' },
 	];
 	values: CoreStatsFlowOutItemNode & {
 		speedHumanReadable: string;