Skip to content

Commit 644fff1

Browse files
ishwaryamamidiishwaryamamidi
committed
Cleaned up the code and removed unused code. Added Paginator and Filter functionality for all the tables
1 parent dcebdfe commit 644fff1

17 files changed

+96
-215
lines changed

‎client/src/app/dashboard/crawler/crawler.component.html

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,5 @@
1818

1919
<h4> Crawler Details</h4>
2020
<div class="container">
21-
<div class="row">
22-
<app-table-all type="Crawler" [dataArray] = "tableData"> </app-table-all>
23-
</div>
2421
</div>
2522

‎client/src/app/dashboard/crawler/crawler.component.ts

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@
1717
*/
1818

1919
import {Component, OnInit} from '@angular/core';
20-
import { Instance, ComponentType, ComponentTypeEnum} from '../../model/models/instance';
21-
import { ModelService } from 'src/app/model/model.service';
2220

2321

2422
@Component({
@@ -28,18 +26,12 @@ import { ModelService } from 'src/app/model/model.service';
2826
})
2927
export class CrawlerComponent implements OnInit {
3028

31-
// this array is inserted into the table all component in the html code
32-
tableData: Instance[];
33-
compType: ComponentType;
29+
constructor() {
3430

35-
constructor(private modelService: ModelService) {
36-
this.tableData = [];
3731
}
3832

3933
ngOnInit() {
40-
this.modelService.getObservableForInstances().subscribe(() => {
41-
this.tableData = this.modelService.getComponentsByType(ComponentTypeEnum.Crawler);
42-
});
34+
4335
}
4436

4537
}

‎client/src/app/dashboard/dashboard-overview/dashboard-overview.component.html

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@
2020
<div class="row">
2121
<div class="col-md-11 col-sm-11">
2222
<h2 class="alignHeading">System Overview</h2>
23-
<button type="button" class="btn btn-primary" routerLink="/dashboard/instanceDetails" routerLinkActive="active">Go To Details
24-
</button>
2523
</div>
2624
<div class="col-md-1 col-sm-1">
2725
<button mat-icon-button matTooltip="Graph View" routerLink="/dashboard/graphView" routerLinkActive="active">
@@ -35,18 +33,7 @@ <h2 class="alignHeading">System Overview</h2>
3533
<div class="row">
3634
<div class=" col-md-8 col-sm-12">
3735
<div class="row">
38-
<div class=" col-md-3 col-sm-2">
39-
<app-dashboard-card route="crawler" componentType={{crawler}} title="Crawler" img="../assets/images/crawler.png"></app-dashboard-card>
40-
</div>
41-
<div class=" col-md-3 col-sm-2">
42-
<app-dashboard-card title="Eastic Search"></app-dashboard-card>
43-
</div>
44-
<div class=" col-md-3 col-sm-2">
45-
<app-dashboard-card route="webApi" componentType={{webApi}} title="Web API" img="../assets/images/webapi.png"></app-dashboard-card>
46-
</div>
47-
<div class=" col-md-3 col-sm-2">
48-
<app-dashboard-card route="webapp" componentType={{webApp}} title="Web APP" img="../assets/images/webapp.png"></app-dashboard-card>
49-
</div>
36+
Graph View goes here!!
5037
</div>
5138
</div>
5239
<div class="col-md-4 col-sm-4">

‎client/src/app/dashboard/dashboard.component.css

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,4 @@
1616
* limitations under the License.
1717
*/
1818

19-
/*.custom_title{
20-
text-align: center;
21-
}
22-
.custom_img{
23-
display: block;
24-
margin-left: auto;
25-
margin-right: auto;
26-
}*/
19+

‎client/src/app/dashboard/infor-center/infor-center.component.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.infoCenter{
2+
border: 1px solid black;
3+
}

‎client/src/app/dashboard/infor-center/infor-center.component.html

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,2 @@
11
<h4>Information Center</h4>
2-
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
3-
<ng-container matColumnDef="type">
4-
<mat-header-cell class="column" *matHeaderCellDef> Type </mat-header-cell>
5-
<mat-cell class="column" *matCellDef="let element"> {{element.type}} </mat-cell>
6-
</ng-container>
7-
<ng-container matColumnDef="time">
8-
<mat-header-cell class="column" *matHeaderCellDef> Time </mat-header-cell>
9-
<mat-cell class="column" *matCellDef="let element"> {{element.time}} </mat-cell>
10-
</ng-container>
11-
<ng-container matColumnDef="description">
12-
<mat-header-cell class="column" *matHeaderCellDef> Description </mat-header-cell>
13-
<mat-cell class="column" *matCellDef="let element"> {{element.description}} </mat-cell>
14-
</ng-container>
15-
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
16-
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
17-
</mat-table>
2+
<div [ngClass]="'infoCenter'">Information Center data goes here!!</div>

‎client/src/app/dashboard/infor-center/infor-center.component.ts

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,6 @@ import { MatTableDataSource } from '@angular/material';
44

55

66

7-
const infoTable: InfoCenter[] = [
8-
{ type: 'Warning', time: '2017-11-27T09:10:00', description: 'Public WebApi is overloaded' },
9-
{ type: 'Error', time: '2017-11-27T09:10:00', description: 'Private Crawler is stopped' },
10-
{ type: 'Information', time: '2017-11-27T09:10:00', description: 'Dubug Crawler was added' },
11-
{ type: 'Information', time: '2017-11-27T09:10:00', description: 'Private Crawler was added' }
12-
];
13-
14-
157
@Component({
168
selector: 'app-infor-center',
179
templateUrl: './infor-center.component.html',
@@ -22,13 +14,7 @@ const infoTable: InfoCenter[] = [
2214

2315
export class InforCenterComponent implements OnInit {
2416

25-
displayedColumns: string[] = ['type', 'time', 'description'];
26-
dataSource = new MatTableDataSource<InfoCenter>();
27-
28-
2917
constructor() {
30-
31-
this.dataSource.data = infoTable;
3218
}
3319

3420
ngOnInit() {

‎client/src/app/dashboard/instance-details/instance-details.component.html

Lines changed: 8 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -12,74 +12,46 @@ <h4>Instance Details</h4>
1212
<p>Name:</p>
1313
</mat-grid-tile>
1414
<mat-grid-tile>
15-
<p><b>Demo</b></p>
15+
<p><b></b></p>
1616
</mat-grid-tile>
1717
<mat-grid-tile>
1818
<p>Host:</p>
1919
</mat-grid-tile>
2020
<mat-grid-tile>
21-
<p><b>1800</b></p>
21+
<p><b></b></p>
2222
</mat-grid-tile>
2323
<mat-grid-tile>
2424
<p>Port Number:</p>
2525
</mat-grid-tile>
2626
<mat-grid-tile>
27-
<p><b>123.45.67.89</b></p>
27+
<p><b></b></p>
2828
</mat-grid-tile>
2929
<mat-grid-tile>
3030
<p>DockerId:</p>
3131
</mat-grid-tile>
3232
<mat-grid-tile>
33-
<p><b>12345678901234</b></p>
33+
<p><b></b></p>
3434
</mat-grid-tile>
3535
<mat-grid-tile>
3636
<p>Labels:</p>
3737
</mat-grid-tile>
3838
<mat-grid-tile>
39-
<p><b>Not available</b></p>
39+
<p><b></b></p>
4040
</mat-grid-tile>
4141
</mat-grid-list>
4242
</div>
4343
<div class="col-md-6 col-sm-12">
4444
<h4>Operations</h4>
4545
<div [ngClass]="'bgOperation'">
46-
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
47-
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
48-
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
49-
It has survived not only five centuries, but also the leap into electronic typesetting,
50-
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
51-
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
52-
Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and
53-
typesetting industry.
54-
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
55-
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
56-
It has survived not only five centuries, but also the leap into electronic typesetting,
57-
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
58-
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
59-
Aldus PageMaker including versions of Lorem Ipsum.</p>
46+
<p>The console terminal data goes here!!</p>
6047
</div>
6148
</div>
6249
</div>
6350
<div class="row">
6451

6552
<div class="col-md-10 col-sm-12">
66-
<h4 [ngClass]="'detailAlign'">Notofications</h4>
67-
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
68-
<ng-container matColumnDef="type">
69-
<mat-header-cell class="column" *matHeaderCellDef> Type </mat-header-cell>
70-
<mat-cell class="column" *matCellDef="let element"> {{element.type}} </mat-cell>
71-
</ng-container>
72-
<ng-container matColumnDef="time">
73-
<mat-header-cell class="column" *matHeaderCellDef> Time </mat-header-cell>
74-
<mat-cell class="column" *matCellDef="let element"> {{element.time}} </mat-cell>
75-
</ng-container>
76-
<ng-container matColumnDef="description">
77-
<mat-header-cell class="column" *matHeaderCellDef> Description </mat-header-cell>
78-
<mat-cell class="column" *matCellDef="let element"> {{element.description}} </mat-cell>
79-
</ng-container>
80-
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
81-
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
82-
</mat-table>
53+
<h4 [ngClass]="'detailAlign'">Notifications</h4>
54+
8355
</div>
8456

8557
</div>

‎client/src/app/dashboard/instance-details/instance-details.component.ts

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
import { Component, OnInit, Input, ViewChild } from '@angular/core';
22
import { InstanceDetails } from '../../model/models/instance';
3-
import { MatTableDataSource } from '@angular/material';
43

5-
const details: InstanceDetails[] = [
6-
{ type: 'Warning', time: '2017-11-27T09:10:00', description: 'Public WebApi is overloaded' },
7-
{ type: 'Error', time: '2017-11-27T09:10:00', description: 'Private Crawler is stopped' },
8-
{ type: 'Information', time: '2017-11-27T09:10:00', description: 'Dubug Crawler was added' },
9-
{ type: 'Information', time: '2017-11-27T09:10:00', description: 'Private Crawler was added' }
10-
];
114

125
@Component({
136
selector: 'app-instance-details',
@@ -16,13 +9,8 @@ const details: InstanceDetails[] = [
169
})
1710
export class InstanceDetailsComponent implements OnInit {
1811

19-
displayedColumns: string[] = ['type', 'time', 'description'];
20-
dataSource = new MatTableDataSource<InstanceDetails>();
21-
2212
constructor() { }
2313

2414
ngOnInit() {
25-
this.dataSource.data = details;
26-
}
27-
15+
}
2816
}

‎client/src/app/dashboard/table-all/table-all.component.html

Lines changed: 55 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
~ See the License for the specific language governing permissions and
1616
~ limitations under the License.
1717
-->
18-
<div *ngIf="dataSource.data.length == 0; else tableBlock">
18+
<div *ngIf="dataSource.data.length == 0; else tableBlock">
1919
There are currently no instances running.
2020
</div>
2121
<ng-template #tableBlock>
@@ -51,71 +51,79 @@
5151

5252
<ng-container matColumnDef="Details">
5353
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
54-
<mat-cell *matCellDef="let element; let row" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
54+
<mat-cell *matCellDef="let element; let row" class="example-element-row"
55+
[class.example-expanded-row]="expandedElement === element"
5556
(click)="expandedElement = expandedElement === element ? null : element; data = onRowClicked(row)">
56-
<button mat-button [ngClass] = "'customOutline'">
57+
<button mat-button [ngClass]="'customOutline'">
5758
View Details
5859
</button>
5960
</mat-cell>
6061
</ng-container>
6162

62-
<ng-container matColumnDef="action">
63-
<mat-header-cell [ngClass]="'customWidthClass'" *matHeaderCellDef> Action </mat-header-cell>
64-
<mat-cell [ngClass]="'customWidthClass customWidthClassNew'" *matCellDef="let element; let i=index; let row;" >
65-
<div *ngIf="!element.dockerId; else actions">
66-
Instance not hosted with docker.
67-
</div>
68-
<ng-template #actions>
69-
<button [disabled]="!(element.instanceState==='Stopped')" mat-icon-button (click)= startInstance(element.id) matTooltip="Start">
70-
<mat-icon aria-label="play_circle_filled_white">play_circle_filled_white</mat-icon>
71-
</button>
72-
<button [disabled]="!(element.instanceState==='Running')" mat-icon-button (click)= stopInstance(element.id) matTooltip="Stop">
73-
<mat-icon aria-label="stop">stop</mat-icon>
74-
</button>
75-
<button [disabled]="!(element.instanceState==='Running')" mat-icon-button (click)= pauseInstance(element.id) matTooltip="Pause">
76-
<mat-icon aria-label="pause_circle_outline">pause_circle_outline</mat-icon>
77-
</button>
78-
<button [disabled]="!(element.instanceState==='Paused')" mat-icon-button (click)= resumeInstance(element.id) matTooltip="Resume">
79-
<mat-icon aria-label="play_circle_outline">play_circle_outline</mat-icon>
80-
</button>
81-
<button [disabled]="!(element.instanceState==='Stopped')" id="deleteButton" (click)="openDeleteDialog(i,row, element.id)" mat-icon-button matTooltip="Delete">
82-
<mat-icon aria-label="delete" id="deleteButton" >delete</mat-icon>
83-
</button>
84-
</ng-template>
85-
</mat-cell>
63+
<ng-container matColumnDef="action">
64+
<mat-header-cell [ngClass]="'customWidthClass'" *matHeaderCellDef> Action </mat-header-cell>
65+
<mat-cell [ngClass]="'customWidthClass customWidthClassNew'"
66+
*matCellDef="let element; let i=index; let row;">
67+
<div *ngIf="!element.dockerId; else actions">
68+
Instance not hosted with docker.
69+
</div>
70+
<ng-template #actions>
71+
<button [disabled]="!(element.instanceState==='Stopped')" mat-icon-button
72+
(click)=startInstance(element.id) matTooltip="Start">
73+
<mat-icon aria-label="play_circle_filled_white">play_circle_filled_white</mat-icon>
74+
</button>
75+
<button [disabled]="!(element.instanceState==='Running')" mat-icon-button
76+
(click)=stopInstance(element.id) matTooltip="Stop">
77+
<mat-icon aria-label="stop">stop</mat-icon>
78+
</button>
79+
<button [disabled]="!(element.instanceState==='Running')" mat-icon-button
80+
(click)=pauseInstance(element.id) matTooltip="Pause">
81+
<mat-icon aria-label="pause_circle_outline">pause_circle_outline</mat-icon>
82+
</button>
83+
<button [disabled]="!(element.instanceState==='Paused')" mat-icon-button
84+
(click)=resumeInstance(element.id) matTooltip="Resume">
85+
<mat-icon aria-label="play_circle_outline">play_circle_outline</mat-icon>
86+
</button>
87+
<button [disabled]="!(element.instanceState==='Stopped')" id="deleteButton"
88+
(click)="openDeleteDialog(i,row, element.id)" mat-icon-button matTooltip="Delete">
89+
<mat-icon aria-label="delete" id="deleteButton">delete</mat-icon>
90+
</button>
91+
</ng-template>
92+
</mat-cell>
8693

8794
</ng-container>
88-
95+
8996
<ng-container matColumnDef="expandedDetail">
9097
<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
91-
<div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
98+
<div class="example-element-detail"
99+
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
92100
<table mat-table [dataSource]="data" class="mat-elevation-z8">
93101
<ng-container matColumnDef="dockerId">
94-
<th mat-header-cell *matHeaderCellDef> DockerID </th>
95-
<td mat-cell *matCellDef="let element"> {{element.dockerId}} </td>
96-
</ng-container>
97-
<ng-container matColumnDef="labels">
98-
<th mat-header-cell *matHeaderCellDef> Labels </th>
99-
<td mat-cell *matCellDef="let element"> {{element.labels}} </td>
100-
</ng-container>
101-
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
102-
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
103-
</table>
104-
105-
</div>
106-
</td>
102+
<th mat-header-cell *matHeaderCellDef> DockerID </th>
103+
<td mat-cell *matCellDef="let element"> {{element.dockerId}} </td>
104+
</ng-container>
105+
<ng-container matColumnDef="labels">
106+
<th mat-header-cell *matHeaderCellDef> Labels </th>
107+
<td mat-cell *matCellDef="let element"> {{element.labels}} </td>
107108
</ng-container>
109+
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
110+
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
111+
</table>
108112

109-
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
110-
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
111-
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
113+
</div>
114+
</td>
115+
</ng-container>
112116

113-
</table>
117+
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
118+
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
119+
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
120+
121+
</table>
114122
</div>
115123
</ng-template>
116124

117125
<mat-paginator class="paginator" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
118126

119127
<div class="button-row">
120128
<button mat-raised-button color="primary" id="addButton" (click)="openAddDialog()">Add Instance</button>
121-
</div>
129+
</div>

0 commit comments

Comments
 (0)