Add UI for managing repo notifications
This commit is contained in:
Joseph Schorr
parent
a84fe0681a
commit
de8e898ad0
11 changed files with 450 additions and 81 deletions
91
static/directives/create-external-notification-dialog.html
Normal file
91
static/directives/create-external-notification-dialog.html
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<!-- Modal message dialog -->
|
||||
<div class="modal fade" id="createNotificationModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<form id="createForm" name="createForm" ng-submit="createNotification()">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-disabled="creating">×</button>
|
||||
<h4 class="modal-title">
|
||||
Create Repository Notification
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="quay-spinner" ng-show="creating"></div>
|
||||
|
||||
<table style="width: 100%" ng-show="!creating">
|
||||
<tr>
|
||||
<td style="width: 120px">When this occurs:</td>
|
||||
<td>
|
||||
<div class="dropdown-select" placeholder="'(Notification Event)'" selected-item="currentEvent.title"
|
||||
handle-item-selected="handleEventSelected(datum)">
|
||||
<!-- Icons -->
|
||||
<i class="dropdown-select-icon fa fa-lg" ng-class="currentEvent.icon"></i>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<ul class="dropdown-select-menu pull-right" role="menu">
|
||||
<li ng-repeat="event in events">
|
||||
<a href="javascript:void(0)" ng-click="setEvent(event)">
|
||||
<i class="fa fa-lg" ng-class="event.icon"></i> {{ event.title }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Then issue a:</td>
|
||||
<td>
|
||||
<div class="dropdown-select" placeholder="'(Notification Action)'" selected-item="currentMethod.title"
|
||||
handle-item-selected="handleMethodSelected(datum)">
|
||||
<!-- Icons -->
|
||||
<i class="dropdown-select-icon fa fa-lg" ng-class="currentMethod.icon"></i>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<ul class="dropdown-select-menu pull-right" role="menu">
|
||||
<li ng-repeat="method in methods">
|
||||
<a href="javascript:void(0)" ng-click="setMethod(method)">
|
||||
<i class="fa fa-lg" ng-class="method.icon"></i> {{ method.title }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr ng-if="currentMethod.fields.length"><td colspan="2"><hr></td></tr>
|
||||
|
||||
<tr ng-repeat="field in currentMethod.fields">
|
||||
<td>{{ field.title }}:</td>
|
||||
<td>
|
||||
<div ng-switch on="field.type">
|
||||
<input type="email" class="form-control" ng-model="currentConfig[field.name]" ng-switch-when="email" required>
|
||||
<input type="url" class="form-control" ng-model="currentConfig[field.name]" ng-switch-when="url" required>
|
||||
<input type="text" class="form-control" ng-model="currentConfig[field.name]" ng-switch-when="string" required>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr ng-if="currentMethod.id == 'webhook'">
|
||||
<td colspan="2">
|
||||
<div class="alert alert-info" style="margin-top: 20px; margin-bottom: 0px">
|
||||
JSON metadata representing the event will be <b>POST</b>ed to the URL.
|
||||
<br><br>
|
||||
The contents for each event can be found in the user guide:
|
||||
<a href="http://docs.quay.io/guides/notifications.html" target="_blank">http://docs.quay.io/guides/notifications.html</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary"
|
||||
ng-disabled="createForm.$invalid || !currentMethod || !currentEvent || creating">
|
||||
Create Notification
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal" ng-disabled="creating">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<div class="dropdown-select-element" ng-class="selectedItem ? 'has-item' : ''">
|
||||
<div class="current-item">
|
||||
<div class="dropdown-select-icon-transclude"></div>
|
||||
<input type="text" class="lookahead-input form-control" placeholder="{{ placeholder }}"></input>
|
||||
<input type="text" class="lookahead-input form-control" placeholder="{{ placeholder }}"
|
||||
ng-readonly="!lookaheadItems || !lookaheadItems.length"></input>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
|
|
|
|||
50
static/directives/external-notification-view.html
Normal file
50
static/directives/external-notification-view.html
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<div class="external-notification-view-element">
|
||||
<div class="side-controls">
|
||||
<div class="dropdown" style="display: inline-block">
|
||||
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="fa fa-cog"></i>
|
||||
<b class="caret"></b>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right pull-right">
|
||||
<li><a href="javascript:void(0)" ng-click="testNotification()">
|
||||
<i class="fa fa-send"></i>
|
||||
Issue Test Notification</a>
|
||||
</li>
|
||||
<li><a href="javascript:void(0)" ng-click="deleteNotification()">
|
||||
<i class="fa fa-times"></i>
|
||||
Delete</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view-row">
|
||||
<span class="flow-text">On A</span>
|
||||
<span class="notification-event">
|
||||
<i class="fa fa-lg" ng-class="eventInfo.icon"></i>
|
||||
{{ eventInfo.title }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="view-row">
|
||||
<span class="flow-text">Issue A</span>
|
||||
<span class="notification-method">
|
||||
<i class="fa fa-lg" ng-class="methodInfo.icon"></i>
|
||||
{{ methodInfo.title }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="view-row" ng-if="methodInfo.id == 'email' || methodInfo.id == 'webhook'">
|
||||
<span ng-switch on="methodInfo.id">
|
||||
<span ng-switch-when="email">
|
||||
<span class="flow-text">To</span>
|
||||
<code>{{ config.email }}</code>
|
||||
</span>
|
||||
|
||||
<span ng-switch-when="webhook">
|
||||
<span class="flow-text">To</span>
|
||||
<code>{{ config.url }}</code>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
Reference in a new issue