vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Abstract out an expiration status view into its own component

Browse source
This commit is contained in:
Joseph Schorr 2017-06-21 17:03:02 -04:00
parent c5d8b5f86b
commit 977539bf08
7 changed files with 78 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
static/css/directives/ui/expiration-status-view.css Normal file
View file

@ -0,0 +1,23 @@
.expiration-status-view-element .expired, .expiration-status-view-element .expired a {
color: #D64456;
}
.expiration-status-view-element .critical, .expiration-status-view-element .critical a {
color: #F77454;
}
.expiration-status-view-element .warning, .expiration-status-view-element .warning a {
color: #FCA657;
}
.expiration-status-view-element .info, .expiration-status-view-element .info a {
color: #2FC98E;
}
.expiration-status-view-element .no-expiration, .expiration-status-view-element .no-expiration a {
color: #aaa;
}
.expiration-status-view-element .fa {
margin-right: 6px;
}

20
static/css/directives/ui/service-keys-manager.css
View file

@ -20,30 +20,10 @@
color: #777;
}
.service-keys-manager-element .expired a {
color: #D64456;
}
.service-keys-manager-element .critical a {
color: #F77454;
}
.service-keys-manager-element .warning a {
color: #FCA657;
}
.service-keys-manager-element .info a {
color: #2FC98E;
}
.service-keys-manager-element .rotation {
color: #777;
}
.service-keys-manager-element .no-expiration {
color: #128E72;
}
.service-keys-manager-element .approval-automatic {
font-size: 12px;
color: #777;

16
static/directives/service-keys-manager.html
View file

@ -113,20 +113,14 @@
<span am-time-ago="key.created_date"></span>
</td>
<td>
<span class="rotation" bo-if="key.expiration_date && getExpirationInfo(key).willRotate">
<span class="rotation" bo-if="key.expiration_date && willRotate(key)">
<i class="fa" ng-class="getExpirationInfo(key).icon"></i>
Automatically rotated <span am-time-ago="getRotationDate(key)"></span>
</span>
<span bo-if="key.expiration_date && !getExpirationInfo(key).willRotate">
<span ng-class="getExpirationInfo(key).className">
<a ng-click="showChangeExpiration(key)">
<i class="fa" ng-class="getExpirationInfo(key).icon"></i>
Expire<span bo-if="getExpirationInfo(key).className != 'expired'">s</span><span bo-if="getExpirationInfo(key).className == 'expired'">d</span> <span am-time-ago="key.expiration_date"></span>
</a>
</span>
</span>
<span class="no-expiration" bo-if="!key.expiration_date">
<i class="fa fa-check"></i> Does not expire
<span bo-if="!willRotate(key)">
<a ng-click="showChangeExpiration(key)">
<expiration-status-view expiration-date="key.expiration_date"></expiration-status-view>
</a>
</span>
</td>
<td>

10
static/js/directives/ui/expiration-status-view/expiration-status-view.component.html Normal file
View file

@ -0,0 +1,10 @@
<span class="expiration-status-view-element">
<span ng-if="::$ctrl.expirationDate" ng-class="::$ctrl.getExpirationInfo($ctrl.expirationDate).className" data-title="{{ $ctrl.expirationDate | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}" bs-tooltip>
<i class="fa" ng-class="::$ctrl.getExpirationInfo($ctrl.expirationDate).icon"></i>
<span am-time-ago="$ctrl.expirationDate"></span>
</a>
</span>
<span class="no-expiration" ng-if="::!$ctrl.expirationDate">
Never
</span>
</span>

34
static/js/directives/ui/expiration-status-view/expiration-status-view.component.ts Normal file
View file

@ -0,0 +1,34 @@
import { Input, Component, Inject } from 'ng-metadata/core';
import * as moment from "moment";
/**
* A component that displays expiration status.
*/
@Component({
selector: 'expiration-status-view',
templateUrl: '/static/js/directives/ui/expiration-status-view/expiration-status-view.component.html',
})
export class ExpirationStatusViewComponent {
@Input('<') public expirationDate: Date;
private getExpirationInfo(expirationDate): any {
if (!expirationDate) {
return '';
}
var expiration_date = moment(expirationDate);
if (moment().isAfter(expiration_date)) {
return {'className': 'expired', 'icon': 'fa-warning'};
}
if (moment().add(1, 'week').isAfter(expiration_date)) {
return {'className': 'critical', 'icon': 'fa-warning'};
}
if (moment().add(1, 'month').isAfter(expiration_date)) {
return {'className': 'warning', 'icon': 'fa-warning'};
}
return {'className': 'info', 'icon': 'fa-clock-o'};
}
}

21
static/js/directives/ui/service-keys-manager.js
View file

@ -80,32 +80,19 @@ angular.module('quay').directive('serviceKeysManager', function () {
return moment(key.created_date).add(key.rotation_duration, 's').format('LLL');
};
$scope.getExpirationInfo = function(key) {
$scope.willRotate = function(key) {
if (!key.expiration_date) {
return '';
return false;
}
if (key.rotation_duration) {
var rotate_date = moment(key.created_date).add(key.rotation_duration, 's')
if (moment().isBefore(rotate_date)) {
return {'className': 'rotation', 'icon': 'fa-refresh', 'willRotate': true};
return true;
}
}
expiration_date = moment(key.expiration_date);
if (moment().isAfter(expiration_date)) {
return {'className': 'expired', 'icon': 'fa-warning'};
}
if (moment().add(1, 'week').isAfter(expiration_date)) {
return {'className': 'critical', 'icon': 'fa-warning'};
}
if (moment().add(1, 'month').isAfter(expiration_date)) {
return {'className': 'warning', 'icon': 'fa-warning'};
}
return {'className': 'info', 'icon': 'fa-check'};
return false;
};
$scope.showChangeName = function(key) {

2
static/js/quay.module.ts
View file

@ -31,6 +31,7 @@ import { MarkdownToolbarComponent } from './directives/ui/markdown/markdown-tool
import { MarkdownEditorComponent } from './directives/ui/markdown/markdown-editor.component';
import { DockerfileCommandComponent } from './directives/ui/dockerfile-command/dockerfile-command.component';
import { ImageCommandComponent } from './directives/ui/image-command/image-command.component';
import { ExpirationStatusViewComponent } from './directives/ui/expiration-status-view/expiration-status-view.component';
import { BrowserPlatform, browserPlatform } from './constants/platform.constant';
import { ManageTriggerComponent } from './directives/ui/manage-trigger/manage-trigger.component';
import { ClipboardCopyDirective } from './directives/ui/clipboard-copy/clipboard-copy.directive';
@ -74,6 +75,7 @@ import * as Clipboard from 'clipboard';
ImageCommandComponent,
TypeaheadDirective,
ManageTriggerComponent,
ExpirationStatusViewComponent,
ClipboardCopyDirective,
TriggerDescriptionComponent,
],