From 640074f063a6fbb68fc3ac2964cd6a251e86be04 Mon Sep 17 00:00:00 2001 From: Unknown Date: Wed, 23 Jan 2019 10:43:07 +0100 Subject: [PATCH 1/4] Added table expand feature to display docker ID and labels. --- client/package-lock.json | 77 +++++-------------- .../table-all/table-all.component.css | 30 +++++++- .../table-all/table-all.component.html | 38 ++++++++- .../table-all/table-all.component.ts | 33 +++++++- 4 files changed, 111 insertions(+), 67 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index f3e70ec2..bf65dc74 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1242,7 +1242,6 @@ "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, - "optional": true, "requires": { "delegates": "^1.0.0", "readable-stream": "^2.0.6" @@ -2458,8 +2457,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true, - "optional": true + "dev": true }, "constants-browserify": { "version": "1.0.0", @@ -2861,8 +2859,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", - "dev": true, - "optional": true + "dev": true }, "depd": { "version": "1.1.2", @@ -3942,8 +3939,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -3964,14 +3960,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3986,20 +3980,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -4116,8 +4107,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -4129,7 +4119,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4144,7 +4133,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4152,14 +4140,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -4178,7 +4164,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -4259,8 +4244,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -4272,7 +4256,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -4358,8 +4341,7 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -4395,7 +4377,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4415,7 +4396,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4459,14 +4439,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -4475,7 +4453,6 @@ "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz", "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=", "dev": true, - "optional": true, "requires": { "graceful-fs": "^4.1.2", "inherits": "~2.0.0", @@ -4488,7 +4465,6 @@ "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, - "optional": true, "requires": { "aproba": "^1.0.3", "console-control-strings": "^1.0.0", @@ -4526,8 +4502,7 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=", - "dev": true, - "optional": true + "dev": true }, "get-stream": { "version": "3.0.0", @@ -4771,8 +4746,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", - "dev": true, - "optional": true + "dev": true }, "has-value": { "version": "1.0.0", @@ -5528,8 +5502,7 @@ "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=", - "dev": true, - "optional": true + "dev": true }, "is-windows": { "version": "1.0.2", @@ -6234,7 +6207,6 @@ "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, - "optional": true, "requires": { "graceful-fs": "^4.1.2", "parse-json": "^2.2.0", @@ -6247,8 +6219,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true, - "optional": true + "dev": true } } }, @@ -6523,8 +6494,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz", "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=", - "dev": true, - "optional": true + "dev": true }, "map-visit": { "version": "1.0.0", @@ -7156,7 +7126,6 @@ "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, - "optional": true, "requires": { "are-we-there-yet": "~1.1.2", "console-control-strings": "~1.1.0", @@ -8283,7 +8252,6 @@ "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=", "dev": true, - "optional": true, "requires": { "load-json-file": "^1.0.0", "normalize-package-data": "^2.3.2", @@ -8295,7 +8263,6 @@ "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz", "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=", "dev": true, - "optional": true, "requires": { "graceful-fs": "^4.1.2", "pify": "^2.0.0", @@ -8306,8 +8273,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true, - "optional": true + "dev": true } } }, @@ -8316,7 +8282,6 @@ "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz", "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=", "dev": true, - "optional": true, "requires": { "find-up": "^1.0.0", "read-pkg": "^1.0.0" @@ -8327,7 +8292,6 @@ "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz", "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=", "dev": true, - "optional": true, "requires": { "path-exists": "^2.0.0", "pinkie-promise": "^2.0.0" @@ -8338,7 +8302,6 @@ "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz", "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=", "dev": true, - "optional": true, "requires": { "pinkie-promise": "^2.0.0" } @@ -9629,7 +9592,6 @@ "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz", "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=", "dev": true, - "optional": true, "requires": { "is-utf8": "^0.2.0" } @@ -10951,7 +10913,6 @@ "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, - "optional": true, "requires": { "string-width": "^1.0.2 || 2" } diff --git a/client/src/app/dashboard/table-all/table-all.component.css b/client/src/app/dashboard/table-all/table-all.component.css index f63e6b96..dea6ee20 100644 --- a/client/src/app/dashboard/table-all/table-all.component.css +++ b/client/src/app/dashboard/table-all/table-all.component.css @@ -35,15 +35,15 @@ table { } .customWidthClass{ - width:350px; + width: 320px; } .mat-elevation-z8 { box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } -.customWidthClass_new{ - margin-left: 20px; -} +.customWidthClassNew{ + padding-right: 50px; + } .mat_cell{ border-bottom-width:0px !important; @@ -56,3 +56,25 @@ table { float:right; margin-top:15px; } + +.example-element-detail { + overflow: hidden; + display: flex; +} + +tr.example-detail-row { + height: 0; +} + +tr.example-element-row:not(.example-expanded-row):hover { + background: #f5f5f5; +} + +tr.example-element-row:not(.example-expanded-row):active { + background: #efefef; +} + +.example-element-row td { + border-bottom-width: 0; +} + diff --git a/client/src/app/dashboard/table-all/table-all.component.html b/client/src/app/dashboard/table-all/table-all.component.html index c369d874..0cffea46 100644 --- a/client/src/app/dashboard/table-all/table-all.component.html +++ b/client/src/app/dashboard/table-all/table-all.component.html @@ -23,7 +23,7 @@ - + ID {{element.id}} @@ -49,9 +49,19 @@ {{element.instanceState}} + + + + + + + Action - +
Instance not hosted with docker.
@@ -75,10 +85,32 @@ + + + + - + + +
+
+ + + + + + + + + + + +
DockerID {{element.dockerId}} Labels {{element.labels}}
+ +
+
diff --git a/client/src/app/dashboard/table-all/table-all.component.ts b/client/src/app/dashboard/table-all/table-all.component.ts index cd00ccec..d4e20ea1 100644 --- a/client/src/app/dashboard/table-all/table-all.component.ts +++ b/client/src/app/dashboard/table-all/table-all.component.ts @@ -21,6 +21,7 @@ import { Component, OnInit, Input, ViewChild } from '@angular/core'; import { MatDialog, MatPaginator, MatTableDataSource } from '@angular/material'; import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component'; import { AddDialogComponent } from '../add-dialog/add-dialog.component'; +import { animate, state, style, transition, trigger } from '@angular/animations'; import { HttpEvent } from '@angular/common/http'; import { ModelService } from 'src/app/model/model.service'; import { ApiService } from 'src/app/api/api/api.service'; @@ -29,7 +30,14 @@ import { ApiService } from 'src/app/api/api/api.service'; @Component({ selector: 'app-table-all', templateUrl: './table-all.component.html', - styleUrls: ['./table-all.component.css'] + styleUrls: ['./table-all.component.css'], + animations: [ + trigger('detailExpand', [ + state('collapsed', style({ height: '0px', minHeight: '0', display: 'none' })), + state('expanded', style({ height: '*' })), + transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')), + ]), + ] }) export class TableAllComponent implements OnInit { @Input() type: Instance['componentType']; @@ -44,9 +52,12 @@ export class TableAllComponent implements OnInit { @Input() compType: string; - displayedColumns = ['ID', 'name', 'host', 'portNumber', 'instanceState', 'action']; + displayedColumns = ['ID', 'name', 'host', 'portNumber', 'instanceState', 'Details', 'action']; + columnsToDisplay: string[] = ['dockerId', 'labels']; dataSource: MatTableDataSource = new MatTableDataSource(this.dataArray); + data = new MatTableDataSource(); dialogResult: string; + expandedElement: any; constructor(public dialog: MatDialog, private apiService: ApiService, private modelService: ModelService) { } @@ -171,6 +182,24 @@ export class TableAllComponent implements OnInit { }); } + /** + * Function used to expand table row and show details of Docker and Labels + */ + onRowClicked(row: Instance) { + let filteredList; + const NoId = 'Not available'; + if (row.dockerId !== undefined && row.labels.length !== 0) { + filteredList = [{ dockerId: row.dockerId, labels: row.labels }]; + } else if (row.dockerId === undefined && row.labels.length !== 0) { + filteredList = [{ dockerId: NoId, labels: row.labels }]; + } else if (row.dockerId !== undefined && row.labels.length === 0) { + filteredList = [{ dockerId: row.dockerId, labels: NoId }]; + } else { + filteredList = [{ dockerId: NoId, labels: NoId }]; + } + return filteredList; +} + } From 366782f4ecacf5f9a3db94aee83a82a316b058e1 Mon Sep 17 00:00:00 2001 From: Unknown Date: Thu, 24 Jan 2019 10:09:35 +0100 Subject: [PATCH 2/4] Changed the datatype. --- client/src/app/dashboard/table-all/table-all.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/app/dashboard/table-all/table-all.component.ts b/client/src/app/dashboard/table-all/table-all.component.ts index d4e20ea1..ae3324fd 100644 --- a/client/src/app/dashboard/table-all/table-all.component.ts +++ b/client/src/app/dashboard/table-all/table-all.component.ts @@ -57,7 +57,7 @@ export class TableAllComponent implements OnInit { dataSource: MatTableDataSource = new MatTableDataSource(this.dataArray); data = new MatTableDataSource(); dialogResult: string; - expandedElement: any; + expandedElement: number; constructor(public dialog: MatDialog, private apiService: ApiService, private modelService: ModelService) { } From b4930350d43911cfb97a613f57f48218567429cb Mon Sep 17 00:00:00 2001 From: Unknown Date: Thu, 24 Jan 2019 14:05:28 +0100 Subject: [PATCH 3/4] Fixed the button outline and overflowing of table. --- client/src/app/dashboard/table-all/table-all.component.css | 5 ++++- client/src/app/dashboard/table-all/table-all.component.html | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/client/src/app/dashboard/table-all/table-all.component.css b/client/src/app/dashboard/table-all/table-all.component.css index dea6ee20..a85be91b 100644 --- a/client/src/app/dashboard/table-all/table-all.component.css +++ b/client/src/app/dashboard/table-all/table-all.component.css @@ -35,7 +35,7 @@ table { } .customWidthClass{ - width: 320px; + width: 300px; } .mat-elevation-z8 { @@ -78,3 +78,6 @@ tr.example-element-row:not(.example-expanded-row):active { border-bottom-width: 0; } +.customOutline { + outline: none; +} diff --git a/client/src/app/dashboard/table-all/table-all.component.html b/client/src/app/dashboard/table-all/table-all.component.html index 0cffea46..87001599 100644 --- a/client/src/app/dashboard/table-all/table-all.component.html +++ b/client/src/app/dashboard/table-all/table-all.component.html @@ -53,7 +53,7 @@ - From 14316fd67f46e06f5c1762746a658dd8987d77fd Mon Sep 17 00:00:00 2001 From: Unknown Date: Thu, 24 Jan 2019 17:42:13 +0100 Subject: [PATCH 4/4] fixed the pull request comments. --- .../app/dashboard/table-all/table-all.component.css | 6 ++++-- .../app/dashboard/table-all/table-all.component.ts | 13 +++++++------ 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/client/src/app/dashboard/table-all/table-all.component.css b/client/src/app/dashboard/table-all/table-all.component.css index a85be91b..8d8e4a14 100644 --- a/client/src/app/dashboard/table-all/table-all.component.css +++ b/client/src/app/dashboard/table-all/table-all.component.css @@ -35,14 +35,14 @@ table { } .customWidthClass{ - width: 300px; + width: 235px; } .mat-elevation-z8 { box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } .customWidthClassNew{ - padding-right: 50px; + padding-right: 75px; } .mat_cell{ @@ -81,3 +81,5 @@ tr.example-element-row:not(.example-expanded-row):active { .customOutline { outline: none; } + + diff --git a/client/src/app/dashboard/table-all/table-all.component.ts b/client/src/app/dashboard/table-all/table-all.component.ts index ae3324fd..094c596c 100644 --- a/client/src/app/dashboard/table-all/table-all.component.ts +++ b/client/src/app/dashboard/table-all/table-all.component.ts @@ -57,7 +57,7 @@ export class TableAllComponent implements OnInit { dataSource: MatTableDataSource = new MatTableDataSource(this.dataArray); data = new MatTableDataSource(); dialogResult: string; - expandedElement: number; + expandedElement: Instance; constructor(public dialog: MatDialog, private apiService: ApiService, private modelService: ModelService) { } @@ -185,17 +185,18 @@ export class TableAllComponent implements OnInit { /** * Function used to expand table row and show details of Docker and Labels */ - onRowClicked(row: Instance) { - let filteredList; - const NoId = 'Not available'; + onRowClicked(row: Instance): Array<{dockerId: string, labels: string[]}> { + let filteredList: Array<{dockerId: string, labels: string[]}>; + const NoId = 'Id not available'; + const NoIdLabels = ['Labels not available']; if (row.dockerId !== undefined && row.labels.length !== 0) { filteredList = [{ dockerId: row.dockerId, labels: row.labels }]; } else if (row.dockerId === undefined && row.labels.length !== 0) { filteredList = [{ dockerId: NoId, labels: row.labels }]; } else if (row.dockerId !== undefined && row.labels.length === 0) { - filteredList = [{ dockerId: row.dockerId, labels: NoId }]; + filteredList = [{ dockerId: row.dockerId, labels: NoIdLabels }]; } else { - filteredList = [{ dockerId: NoId, labels: NoId }]; + filteredList = [{ dockerId: NoId, labels: NoIdLabels }]; } return filteredList; }