Add UI support for multiple operations on keys
This commit is contained in:
parent
726cb5fe6a
commit
a55e92bc95
6 changed files with 283 additions and 22 deletions
|
@ -27,17 +27,17 @@
|
|||
|
||||
<div class="co-check-bar">
|
||||
<span class="cor-checkable-menu" controller="checkedTags">
|
||||
<div class="cor-checkable-menu-item" item-filter="allTagFilter">
|
||||
<div class="cor-checkable-menu-item" item-filter="allTagFilter(item)">
|
||||
<i class="fa fa-check-square-o"></i>All Tags
|
||||
</div>
|
||||
<div class="cor-checkable-menu-item" item-filter="noTagFilter(tag)">
|
||||
<div class="cor-checkable-menu-item" item-filter="noTagFilter(item)">
|
||||
<i class="fa fa-square-o"></i>No Tags
|
||||
</div>
|
||||
<div class="cor-checkable-menu-item" item-filter="commitTagFilter(tag)">
|
||||
<div class="cor-checkable-menu-item" item-filter="commitTagFilter(item)">
|
||||
<i class="fa fa-git"></i>Commit SHAs
|
||||
</div>
|
||||
|
||||
<div class="cor-checkable-menu-item" item-filter="imageIDFilter(it.image_id, tag)"
|
||||
<div class="cor-checkable-menu-item" item-filter="imageIDFilter(it.image_id, item)"
|
||||
ng-repeat="it in imageTracks">
|
||||
<i class="fa fa-circle-o" ng-style="{'color': it.color}"></i> {{ it.image_id.substr(0, 12) }}
|
||||
</div>
|
||||
|
|
|
@ -11,12 +11,56 @@
|
|||
<a href="https://tectonic.com/quay-enterprise/docs/latest/build-support.html" target="_blank">build workers</a>.
|
||||
</div>
|
||||
|
||||
<span class="co-filter-box" ng-if="keys.length">
|
||||
<span class="filter-message" ng-if="options.filter">
|
||||
Showing {{ orderedKeys.entries.length }} of {{ keys.length }} keys
|
||||
<div class="co-check-bar" ng-show="keys.length">
|
||||
<span class="cor-checkable-menu" controller="checkedKeys">
|
||||
<div class="cor-checkable-menu-item" item-filter="allKeyFilter(item)">
|
||||
<i class="fa fa-check-square-o"></i>All Keys
|
||||
</div>
|
||||
<div class="cor-checkable-menu-item" item-filter="noKeyFilter(item)">
|
||||
<i class="fa fa-square-o"></i>No Keys
|
||||
</div>
|
||||
<div class="cor-checkable-menu-item" item-filter="unapprovedKeyFilter(item)">
|
||||
<i class="fa fa-question-circle"></i>Unapproved Keys
|
||||
</div>
|
||||
<div class="cor-checkable-menu-item" item-filter="expiredKeyFilter(item)">
|
||||
<i class="fa fa-warning"></i>Expired Keys
|
||||
</div>
|
||||
</span>
|
||||
<input class="form-control" type="text" ng-model="options.filter" placeholder="Filter Keys...">
|
||||
</span>
|
||||
|
||||
<span class="co-checked-actions" ng-if="checkedKeys.checked.length">
|
||||
<button class="btn btn-primary"
|
||||
ng-click="askApproveMultipleKeys(checkedKeys.checked)"
|
||||
ng-show="allRequireApproval(checkedKeys.checked)">
|
||||
<i class="fa fa-check"></i><span class="text">Approve Keys</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary"
|
||||
ng-click="askChangeExpirationMultipleKeys(checkedKeys.checked)"
|
||||
ng-if="allExpired(checkedKeys.checked)">
|
||||
<i class="fa fa-refresh"></i>
|
||||
<span class="text">Revive Keys</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-default"
|
||||
ng-click="askChangeExpirationMultipleKeys(checkedKeys.checked)"
|
||||
ng-if="!allExpired(checkedKeys.checked)">
|
||||
<i class="fa fa-clock-o"></i>
|
||||
<span class="text">Change Keys Expiration</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-default"
|
||||
ng-click="askDeleteMultipleKeys(checkedKeys.checked)">
|
||||
<i class="fa fa-times"></i><span class="text">Delete Keys</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span class="co-filter-box">
|
||||
<span class="filter-message" ng-if="options.filter">
|
||||
Showing {{ orderedKeys.entries.length }} of {{ keys.length }} keys
|
||||
</span>
|
||||
<input class="form-control" type="text" ng-model="options.filter" placeholder="Filter Keys...">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="empty" ng-if="!keys.length" style="margin-top: 20px;">
|
||||
|
@ -26,6 +70,7 @@
|
|||
|
||||
<table class="co-table" ng-show="keys.length">
|
||||
<thead>
|
||||
<td class="checkbox-col"></td>
|
||||
<td class="caret-col"></td>
|
||||
<td ng-class="TableService.tablePredicateClass('name', options.predicate, options.reverse)">
|
||||
<a href="javascript:void(0)" ng-click="TableService.orderBy('name', options)">Name</a>
|
||||
|
@ -44,8 +89,12 @@
|
|||
</td>
|
||||
<td class="hidden-xs options-col"></td>
|
||||
</thead>
|
||||
<tbody ng-repeat="key in orderedKeys.visibleEntries" bindonce>
|
||||
<tbody class="co-checkable-row"
|
||||
ng-repeat="key in orderedKeys.visibleEntries"
|
||||
ng-class="checkedKeys.isChecked(key, checkedKeys.checked) ? 'checked' : ''"
|
||||
bindonce>
|
||||
<tr>
|
||||
<td><span class="cor-checkable-item" controller="checkedKeys" item="key"></span></td>
|
||||
<td class="caret-col">
|
||||
<span ng-click="toggleDetails(key)">
|
||||
<i class="fa"
|
||||
|
@ -88,7 +137,6 @@
|
|||
<i class="fa fa-refresh"></i>Approved via key rotation
|
||||
</span>
|
||||
<span class="approval-required" bo-if="!key.approval">
|
||||
<i class="fa fa-warning"></i>
|
||||
Awaiting Approval <a ng-click="showApproveKey(key)">Approve Now</a>
|
||||
</span>
|
||||
</td>
|
||||
|
@ -130,6 +178,24 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Change Keys Expiration Confirm -->
|
||||
<div class="cor-confirm-dialog"
|
||||
dialog-context="changeKeysInfo"
|
||||
dialog-action="changeKeysExpiration(changeKeysInfo, callback)"
|
||||
dialog-title="Change Service Keys Expiration"
|
||||
dialog-action-title="Change Expiration">
|
||||
<form class="expiration-form">
|
||||
Please choose the new expiration date and time (if any) for the following keys:
|
||||
<ul class="keys-list">
|
||||
<li ng-repeat="key in changeKeysInfo.keys">{{ getKeyTitle(key) }}</li>
|
||||
</ul>
|
||||
<label>Expiration Date:</label>
|
||||
<span class="datetime-picker" datetime="changeKeysInfo.expiration_date"></span>
|
||||
<span class="co-help-text">
|
||||
If specified, the date and time at which the keys expire. It is highly recommended to have an expiration date.
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Change Key Expiration Confirm -->
|
||||
<div class="cor-confirm-dialog"
|
||||
|
@ -137,7 +203,8 @@
|
|||
dialog-action="changeKeyExpiration(context.expirationChangeInfo, callback)"
|
||||
dialog-title="Change Service Key Expiration"
|
||||
dialog-action-title="Change Expiration">
|
||||
<form>
|
||||
<form class="expiration-form">
|
||||
<label>Expiration Date:</label>
|
||||
<span class="datetime-picker" datetime="context.expirationChangeInfo.expiration_date"></span>
|
||||
<span class="co-help-text">
|
||||
If specified, the date and time that the key expires. It is highly recommended to have an expiration date.
|
||||
|
@ -145,6 +212,19 @@
|
|||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Delete Keys Confirm -->
|
||||
<div class="cor-confirm-dialog"
|
||||
dialog-context="deleteKeysInfo"
|
||||
dialog-action="deleteKeys(deleteKeysInfo, callback)"
|
||||
dialog-title="Delete Service Keys"
|
||||
dialog-action-title="Delete Keys">
|
||||
Are you <strong>sure</strong> you want to delete the follopwing service keys?<br>
|
||||
All external services that use these keys for authentication will fail.
|
||||
<ul class="keys-list">
|
||||
<li ng-repeat="key in deleteKeysInfo.keys">{{ getKeyTitle(key) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Delete Key Confirm -->
|
||||
<div class="cor-confirm-dialog"
|
||||
dialog-context="deleteKeyInfo"
|
||||
|
@ -155,6 +235,26 @@
|
|||
All external services that use this key for authentication will fail.
|
||||
</div>
|
||||
|
||||
<!-- Approve Keys Confirm -->
|
||||
<div class="cor-confirm-dialog"
|
||||
dialog-context="approveKeysInfo"
|
||||
dialog-action="approveKeys(approveKeysInfo, callback)"
|
||||
dialog-title="Approve Service Keys"
|
||||
dialog-action-title="Approve Keys">
|
||||
<form>
|
||||
<div style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee;">
|
||||
Approve the following service keys?
|
||||
<ul class="keys-list">
|
||||
<li ng-repeat="key in approveKeysInfo.keys">{{ getKeyTitle(key) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="markdown-editor" content="approveKeysInfo.notes"></div>
|
||||
<span class="co-help-text">
|
||||
Enter optional notes for additional human-readable information about why the keys were approved.
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Approve Key Confirm -->
|
||||
<div class="cor-confirm-dialog"
|
||||
dialog-context="approvalKeyInfo"
|
||||
|
|
Reference in a new issue