Skip to content

Commit

Permalink
fix(orb-ui): improvements on view headers
Browse files Browse the repository at this point in the history
  • Loading branch information
@joao-mendonca-encora
joao-mendonca-encora committed Oct 3, 2023
1 parent 6b71ea9 commit a350ece
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 85 deletions.
23 changes: 20 additions & 3 deletions ui/src/app/@theme/styles/_overrides.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,13 +199,13 @@
}

.orb-service- {
&new {
&new, &unknown {
color: #9b51e0;
}
&online, &healthy {
&online, &healthy, &active {
color: #6fcf97;
}
&stale {
&stale, &idle {
color: #f2994a;
}
&error, &failure {
Expand All @@ -215,6 +215,23 @@
color: #969fb9;
}
}
.orb-service-background- {
&new, &unknown {
background-color: #9b51e0;
}
&online, &healthy, &active {
background-color: #6fcf97;
}
&stale, &idle {
background-color: #f2994a;
}
&error, &failure {
background-color: #df316f;
}
&offline, &none {
background-color: #969fb9;
}
}
.required {
color: #df316f;
padding-left: 2px;
Expand Down
59 changes: 32 additions & 27 deletions ui/src/app/pages/fleet/agents/view/agent.view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,41 @@
</xng-breadcrumb>
<div><h4>Agent View</h4></div>
</div>
<div class="right-content" style="margin-right: 15px;">
<ngx-poll-control></ngx-poll-control>
</div>
<div *ngIf="!isLoading" style="margin: 0 20px 0 10px;">
<button (click)="openDeleteModal()" class="card-button delete-button" data-orb-qa-id="button#reset" nbButton shape="round" style="color: #df316f !important;">
<nb-icon icon="trash-2-outline"></nb-icon>
Delete Agent
</button>
</div>
<div *ngIf="!isLoading" style="margin-bottom: 23px;">
<div style="float: right;">
<span class="orb-service-{{ agent?.state }} state">
<i aria-hidden="true" *ngIf="agent?.state !== agentStates.offline" class="fa fa-circle orb-service-{{ agent?.state }}"></i>
<i aria-hidden="true" *ngIf="agent?.state === agentStates.offline" class="fa offline-circle"></i>
{{ agent?.state | ngxCapitalize }}
</span>
<div class="right-content">
<ngx-poll-control style="margin-top: 3px;"></ngx-poll-control>
<div *ngIf="!isLoading">
<button
(click)="openDeleteModal()"
class="card-button delete-button"
nbButton
shape="round"
style="color: #df316f !important; margin: 0 20px;">
<nb-icon icon="trash-2-outline"></nb-icon>
Delete Agent
</button>
</div>
<div style="font-size: 14px; font-weight: 400; margin-top: 23px;">
<span *ngIf="agent?.state !== agentStates.new">
Last activity
<span *ngIf="isToday()">
today, at {{ agent?.ts_last_hb | date: 'HH:mm z' }}
<div *ngIf="!isLoading" class="state-div">
<div style="float: right;">
<span class="orb-service-{{ agent?.state }} state">
<i aria-hidden="true" *ngIf="agent?.state !== agentStates.offline" class="fa state-circle orb-service-background-{{ agent?.state }}"></i>
<i aria-hidden="true" *ngIf="agent?.state === agentStates.offline" class="fa offline-circle"></i>
{{ agent?.state | ngxCapitalize }}
</span>
<span *ngIf="!isToday()">
on {{ agent?.ts_last_hb | date: 'M/d/yy, HH:mm z' }}
</div>
<div class="date">
<span *ngIf="agent?.state !== agentStates.new">
Last activity
<span *ngIf="isToday()">
today, at {{ agent?.ts_last_hb | date: 'HH:mm z' }}
</span>
<span *ngIf="!isToday()">
on {{ agent?.ts_last_hb | date: 'M/d/yy, HH:mm z' }}
</span>
</span>
</span>
<span *ngIf="agent?.state === agentStates.new">
This Agent has been provisioned but never connected.
</span>
<span *ngIf="agent?.state === agentStates.new">
This Agent has been provisioned but never connected.
</span>
</div>
</div>
</div>
</header>
Expand Down
29 changes: 21 additions & 8 deletions ui/src/app/pages/fleet/agents/view/agent.view.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,18 +202,31 @@ nb-card {
color: #969fb9;
font-size: 14px;
}
.state {
font-size: 15px;
font-weight: 700;
}
.fa.fa-circle {
font-size: 11px;

.state-circle {
width: 9px;
height: 9px;
border-radius: 50%;
}
.offline-circle {
width: 10px;
height: 10px;
width: 9px;
height: 9px;
border: 2px solid #969fb9;
border-radius: 50%;
background-color: transparent;
}
.state {
font-size: 15px;
font-weight: 700;
font-family: 'Montserrat';
}
.state-div {
margin-bottom: 23px;
}
.date {
font-size: 14px;
font-weight: 400;
margin-top: 23px;
line-height: 1.25rem;
}

85 changes: 41 additions & 44 deletions ui/src/app/pages/sinks/view/sink.view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,53 +12,50 @@
<h4>{{ strings.sink.view.header }}</h4>
</div>
<div class="right-content">
<ngx-poll-control></ngx-poll-control>
</div>
<div *ngIf="!isLoading" style="margin: 0 20px;">
<button
(click)="openDeleteModal()"
class="card-button delete-button"
nbButton shape="round"
*ngIf="!isEditMode()"
style="color: #df316f !important; float: none !important;">
<nb-icon icon="trash-2-outline"></nb-icon>
Delete Sink
</button>
<button
(click)="save()"
[disabled]="!canSave() || isRequesting || !hasChanges()"
class="policy-save"
nbButton
*ngIf="isEditMode()"
shape="round"
>
<nb-icon icon="save-outline"></nb-icon>
Save
</button>
<button
(click)="discard()"
class="policy-discard"
nbButton
shape="round"
*ngIf="isEditMode()"
>
Discard
</button>
</div>
<div style="margin-bottom: 23px;" *ngIf="!isLoading && !isEditMode()">
<div style="float: right;">
<span class="orb-service-{{ sink?.state }} state" style="margin-left: 10px;">
<i aria-hidden="true" class="fa fa-circle orb-service-{{ sink?.state }}"></i>
{{ sink?.state | ngxCapitalize }}
</span>
<ngx-poll-control style="margin-top: 3px;"></ngx-poll-control>
<div *ngIf="!isLoading">
<button
(click)="openDeleteModal()"
class="card-button delete-button"
nbButton shape="round"
*ngIf="!isEditMode()"
style="color: #df316f !important; float: none !important; margin: 0 20px;">
<nb-icon icon="trash-2-outline"></nb-icon>
Delete Sink
</button>
<button
(click)="save()"
[disabled]="!canSave() || isRequesting || !hasChanges()"
class="policy-save"
nbButton
*ngIf="isEditMode()"
shape="round">
<nb-icon icon="save-outline"></nb-icon>
Save
</button>
<button
(click)="discard()"
class="policy-discard"
nbButton
shape="round"
*ngIf="isEditMode()">
Discard
</button>
</div>
<div style="font-size: 14px; font-weight: 400; margin-top: 23px;">
<span>
Created on {{ sink?.ts_created | date: 'M/d/yy, HH:mm z' }}
</span>
<div class="state-div" *ngIf="!isLoading && !isEditMode()">
<div style="float: right;">
<span class="orb-service-{{ sink?.state }} state" style="margin-left: 10px;">
<i aria-hidden="true" class="fa state-circle orb-service-background-{{ sink?.state }}"></i>
{{ sink?.state | ngxCapitalize }}
</span>
</div>
<div class="date">
<span>
Created on {{ sink?.ts_created | date: 'M/d/yy, HH:mm z' }}
</span>
</div>
</div>
</div>

</header>

<div *ngIf="isLoading">
Expand Down
18 changes: 15 additions & 3 deletions ui/src/app/pages/sinks/view/sink.view.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,12 +96,15 @@ h4 {
}
}
}
.fa.fa-circle {
font-size: 11px;
.state-circle {
width: 9px;
height: 9px;
border-radius: 50%;
}
.state {
font-size: 16px;
font-size: 15px;
font-weight: 700;
font-family: 'Montserrat';
}
.orb-service- {
&active {
Expand All @@ -122,4 +125,13 @@ h4 {
color: #969fb9;
font-size: 14px;
}
.state-div {
margin-bottom: 23px;
}
.date {
font-size: 14px;
font-weight: 400;
margin-top: 23px;
line-height: 1.25rem;
}

0 comments on commit a350ece

Please sign in to comment.