Skip to content

Commit

Permalink
Layout enhancements for Deployments/Pods/Services views.
Browse files Browse the repository at this point in the history 
Change-Id: I271f8d1b86e6e819bf9ff7bb78e0558821ff9ac0
Reviewed-on: https://bellevue-ci.eng.vmware.com:8080/36024
Upgrade-Verified: jenkins <[email protected]>
Closures-Verified: jenkins <[email protected]>
CS-Verified: jenkins <[email protected]>
Bellevue-Verified: jenkins <[email protected]>
Reviewed-by: Iveta Ilieva <[email protected]>
  • Loading branch information
@iilieva
iilieva committed Jun 14, 2018
1 parent 412286c commit 6c11b26
Show file tree
Hide file tree
Showing 9 changed files with 99 additions and 61 deletions.
1 change: 1 addition & 0 deletions ui/ng-app/src/app/kubernetes/deployments/details/deployment-details.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

.deployment-title {
display: inline;
margin-left: 10px;
}

.deployment-summary {
Expand Down
37 changes: 21 additions & 16 deletions ui/ng-app/src/app/kubernetes/deployments/list/deployment-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,30 @@
<div title>{{"kubernetes.deployments.title" | i18n | titlecase}}</div>

<ng-template let-item="item">
<card [routerLink]="['./' + item.documentId]" [ngClass]="{'card-actions-selected': isItemSelected(item)}">
<card [routerLink]="['./' + item.documentId]"
[ngClass]="{'card-actions-selected': isItemSelected(item)}">
<div card-header>
<img [src]="'./container-image-icons?container-image=' + item.documentSelfLink"/>
<div class="titleHolder">
<div class="truncate">{{ item.name }}</div>
</div>
<div>
<img [src]="'./container-image-icons?container-image=' + item.documentSelfLink"/>

<clr-dropdown class="card-actions" (click)="toggleItemSelection($event, item)">
<button type="button" class="btn btn-sm btn-link" clrDropdownTrigger>
<clr-icon shape="ellipsis-vertical" size="20"></clr-icon>
</button>
<clr-dropdown-menu clrPosition="left-top" *clrIfOpen>
<button type="button" class="dropdown-item cluster-details"
[routerLink]="['./' + item.documentId]">
<clr-icon shape="eye" size="20" class="card-drop-down-actions">
</clr-icon>{{"details" | i18n}}
<div class="titleHolder" [title]="item.name">
<div class="truncate">{{ item.name }}</div>
</div>
</div>
<div class="actionsHolder">
<clr-dropdown class="card-actions" (click)="toggleItemSelection($event, item)">
<button type="button" class="btn btn-sm btn-link" clrDropdownTrigger>
<clr-icon shape="ellipsis-vertical" size="20"></clr-icon>
</button>
</clr-dropdown-menu>
</clr-dropdown>
<clr-dropdown-menu clrPosition="left-top" *clrIfOpen>
<button type="button" class="dropdown-item cluster-details"
[routerLink]="['./' + item.documentId]">
<clr-icon shape="eye" size="20" class="card-drop-down-actions">
</clr-icon>{{"details" | i18n}}
</button>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</div>

<div card-content>
Expand Down
10 changes: 8 additions & 2 deletions ui/ng-app/src/app/kubernetes/deployments/list/deployment-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,19 @@

.titleHolder {
display: inline-block;
margin-left: 10px;
margin-left: 5px;
height: 45px;
width: 220px;
max-width: 215px;

.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}

.actionsHolder {
position: absolute;
right: 6px;
top: 12px;
}
1 change: 1 addition & 0 deletions ui/ng-app/src/app/kubernetes/pods/details/pod-details.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

.pod-title {
display: inline;
margin-left: 10px;
}

.pod-summary {
Expand Down
35 changes: 20 additions & 15 deletions ui/ng-app/src/app/kubernetes/pods/list/pod-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,30 @@
<div title>{{"kubernetes.pods.title" | i18n | titlecase}}</div>

<ng-template let-item="item">
<card [routerLink]="['./' + item.documentId]" [ngClass]="{'card-actions-selected': isItemSelected(item)}">
<card [routerLink]="['./' + item.documentId]"
[ngClass]="{'card-actions-selected': isItemSelected(item)}">
<div card-header>
<img [src]="'./container-image-icons?container-image=' + item.documentSelfLink"/>
<div class="titleHolder">
<div class="truncate">{{ item.name }}</div>
<div>
<img [src]="'./container-image-icons?container-image=' + item.documentSelfLink"/>
<div class="titleHolder" [title]="item.name">
<div class="truncate">{{ item.name }}</div>
</div>
</div>

<clr-dropdown class="card-actions" (click)="toggleItemSelection($event, item)">
<button type="button" class="btn btn-sm btn-link" clrDropdownTrigger>
<clr-icon shape="ellipsis-vertical" size="20"></clr-icon>
</button>
<clr-dropdown-menu clrPosition="left-top" *clrIfOpen>
<button type="button" class="dropdown-item cluster-details"
[routerLink]="['./' + item.documentId]">
<clr-icon shape="eye" size="20" class="card-drop-down-actions">
</clr-icon>{{"details" | i18n}}
<div class="actionsHolder">
<clr-dropdown class="card-actions" (click)="toggleItemSelection($event, item)">
<button type="button" class="btn btn-sm btn-link" clrDropdownTrigger>
<clr-icon shape="ellipsis-vertical" size="20"></clr-icon>
</button>
</clr-dropdown-menu>
</clr-dropdown>
<clr-dropdown-menu clrPosition="left-top" *clrIfOpen>
<button type="button" class="dropdown-item cluster-details"
[routerLink]="['./' + item.documentId]">
<clr-icon shape="eye" size="20" class="card-drop-down-actions">
</clr-icon>{{"details" | i18n}}
</button>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</div>

<div card-content>
Expand Down
10 changes: 8 additions & 2 deletions ui/ng-app/src/app/kubernetes/pods/list/pod-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,19 @@

.titleHolder {
display: inline-block;
margin-left: 10px;
margin-left: 5px;
height: 45px;
width: 220px;
max-width: 215px;

.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}

.actionsHolder {
position: absolute;
right: 6px;
top: 12px;
}
24 changes: 14 additions & 10 deletions ui/ng-app/src/app/kubernetes/services/details/service-details.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
// Copyright (c) 2018 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

service-details {
.table {
th, td {
text-align: left;
.service-title {
display: inline;
margin-left: 10px;
}

.table {
margin-bottom: 24px;
}
}
}
}
.service-summary {
margin-top: 20px;
}

.summary-subsection-content-row .left-column {
width: 350px;
}
32 changes: 18 additions & 14 deletions ui/ng-app/src/app/kubernetes/services/list/service-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,28 @@
<card [routerLink]="['./' + item.documentId]"
[ngClass]="{'card-actions-selected': isItemSelected(item)}">
<div card-header>
<img [src]="'./container-image-icons?container-image=' + item.documentSelfLink"/>
<div>
<img [src]="'./container-image-icons?container-image=' + item.documentSelfLink"/>

<div class="titleHolder">
<div class="truncate">{{ item.name }}</div>
<div class="titleHolder" [title]="item.name">
<div class="truncate">{{ item.name }}</div>
</div>
</div>

<clr-dropdown class="card-actions" (click)="toggleItemSelection($event, item)">
<button type="button" class="btn btn-sm btn-link" clrDropdownTrigger>
<clr-icon shape="ellipsis-vertical" size="20"></clr-icon>
</button>
<clr-dropdown-menu clrPosition="left-top" *clrIfOpen>
<button type="button" class="dropdown-item cluster-details"
[routerLink]="['./' + item.documentId]">
<clr-icon shape="eye" size="20" class="card-drop-down-actions">
</clr-icon>{{"details" | i18n}}
<div class="actionsHolder">
<clr-dropdown class="card-actions" (click)="toggleItemSelection($event, item)">
<button type="button" class="btn btn-sm btn-link" clrDropdownTrigger>
<clr-icon shape="ellipsis-vertical" size="20"></clr-icon>
</button>
</clr-dropdown-menu>
</clr-dropdown>
<clr-dropdown-menu clrPosition="left-top" *clrIfOpen>
<button type="button" class="dropdown-item cluster-details"
[routerLink]="['./' + item.documentId]">
<clr-icon shape="eye" size="20" class="card-drop-down-actions">
</clr-icon>{{"details" | i18n}}
</button>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</div>

<div card-content>
Expand Down
10 changes: 8 additions & 2 deletions ui/ng-app/src/app/kubernetes/services/list/service-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,19 @@

.titleHolder {
display: inline-block;
margin-left: 10px;
margin-left: 5px;
height: 45px;
width: 220px;
max-width: 215px;

.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}

.actionsHolder {
position: absolute;
right: 6px;
top: 12px;
}

0 comments on commit 6c11b26

Please sign in to comment.