[ONOS-8095] GUI2 Adjusted the width of columns in the flow table view
Change-Id: I4ffa81a82d1c7baa0758ce158a4c7a8d0af53a49
diff --git a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.css b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.css
index dd40001..7e53e0c 100644
--- a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.css
+++ b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.css
@@ -31,6 +31,15 @@
#ov-flow td.right {
text-align: right;
}
+
+#ov-flow td.col8pct {
+ width: 8%;
+}
+#ov-flow td.col10pct {
+ width: 10%;
+}
+
+
#ov-flow td.selector,
#ov-flow td.treatment {
text-align: left;
diff --git a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.html b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.html
index a0b97b7..4ff2afe 100644
--- a/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.html
+++ b/web/gui2/src/main/webapp/app/view/flow/flow/flow.component.html
@@ -79,16 +79,16 @@
<div class="table-header">
<table>
<tr>
- <td colId="state" (click)="onSort('state')">{{lionFn('state')}}
+ <td class="col8pct" colId="state" (click)="onSort('state')">{{lionFn('state')}}
<onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('state')"></onos-icon>
</td>
- <td colId="packets" (click)="onSort('packets')">{{lionFn('packets')}}
+ <td class="col8pct" colId="packets" (click)="onSort('packets')">{{lionFn('packets')}}
<onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('packets')"></onos-icon>
</td>
- <td colId="duration" (click)="onSort('duration')">{{lionFn('duration')}}
+ <td class="col10pct" colId="duration" (click)="onSort('duration')">{{lionFn('duration')}}
<onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('duration')"></onos-icon>
</td>
- <td colId="priority" (click)="onSort('priority')">{{lionFn('priority')}}
+ <td class="col8pct" colId="priority" (click)="onSort('priority')">{{lionFn('priority')}}
<onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('priority')"></onos-icon>
</td>
<td colId="tableName" (click)="onSort('tableName')">{{lionFn('tableName')}}
@@ -100,7 +100,7 @@
<td colId="treatment" (click)="onSort('treatment')">{{lionFn('treatment')}}
<onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('treatment')"></onos-icon>
</td>
- <td colId="appName" (click)="onSort('appName')">{{lionFn('appName')}}
+ <td class="col8pct" colId="appName" (click)="onSort('appName')">{{lionFn('appName')}}
<onos-icon classes="active-sort" [iconSize]="10" [iconId]="sortIcon('appName')"></onos-icon>
</td>
</tr>
@@ -114,14 +114,14 @@
</tr>
<ng-template ngFor let-flow [ngForOf]="tableData | filter : tableDataFilter">
<tr (click)="selectCallback($event, flow)" [ngClass]="{selected: flow.id === selId, 'data-change': isChanged(flow.id)}">
- <td>{{flow.state}}</td>
- <td>{{flow.packets}}</td>
- <td>{{flow.duration}}</td>
- <td>{{flow.priority}}</td>
+ <td class="col8pct">{{flow.state}}</td>
+ <td class="col8pct">{{flow.packets}}</td>
+ <td class="col10pct">{{flow.duration}}</td>
+ <td class="col8pct">{{flow.priority}}</td>
<td>{{flow.tableName}}</td>
<td>{{flow.selector_c}}</td>
<td>{{flow.treatment_c}}</td>
- <td>{{flow.appName}}</td>
+ <td class="col10pct">{{flow.appName}}</td>
</tr>
<tr (click)="selectCallback($event, flow)" [ngClass]="{selected: flow.id === selId, 'data-change': isChanged(flow.id)}" [hidden]="brief">
<td class="selector" colspan="8">{{flow.selector}} </td>