scripts/apps/ingest/views/settings/ingest-routing-content.html
<div class="sd-page__flex-helper">
<div class="sd-page__header">
<sd-search-handler ng-model="query.name" data-debounce="200"></sd-search-handler>
<span class="sd-page__element-grow"></span>
<button class="btn btn--primary" ng-click="edit({})">
<i class="icon-plus-sign icon--white"></i><span translate>Add New</span>
</button>
</div>
<div class="sd-page__content">
<ul class="sd-list-item-group sd-list-item-group--space-between-items" style="max-width: 1000px;">
<li ng-repeat="scheme in schemes | filter:query" class="sd-list-item sd-shadow--z1">
<div class="sd-list-item__border"></div>
<div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
<div class="sd-list-item__row">
<span class="sd-overflow-ellipsis sd-list-item--element-grow">{{scheme.name}}</span>
</div>
</div>
<div class="sd-list-item__action-menu sd-list-item__action-menu--direction-row">
<button class="icn-btn" ng-click="edit(scheme)" title="{{:: 'Edit scheme' | translate }}"><i class="icon-pencil"></i></button>
<button class="icn-btn" ng-click="remove(scheme)" title="{{:: 'Remove scheme' | translate }}"><i class="icon-trash"></i></button>
</div>
</li>
</ul>
</div>
</div>
<!-- Modal -->
<div sd-modal data-model="editScheme" class="add-scheme-modal modal--tabs sd-wizard">
<div class="modal__header modal__header--flex">
<h3 class="modal__heading" translate ng-show="editScheme._id" translate>Edit Scheme</h3>
<h3 class="modal__heading" translate ng-hide="editScheme._id" translate>Add New Scheme</h3>
<a href="" class="icn-btn close" ng-click="cancel()"><i class="icon-close-small"></i></a>
</div>
<div class="modal__body">
<form name="schemeForm">
<div class="modal__body-content">
<div style="padding: 0.8rem 2rem; border-bottom: 1px solid rgba(123, 123, 123, 0.2); flex-shrink: 0;">
<div class="sd-line-input sd-line-input--required sd-line-input--boxed sd-line-input--no-margin sd-line-input--no-label">
<input class="sd-line-input__input" type="text" class="line-input input" placeholder="{{ 'Scheme name'|translate }}" ng-model="editScheme.name" required autofocus>
</div>
</div>
<div>
<div class="content form-flat">
<div class="grid grid--padding-fix">
<div class="grid__item grid__item--col-4">
<div class="col-heading" translate>Scheme rules</div>
<div class="column">
<div class="selected-field editable addnew" ng-if="rule">
<div class="sd-line-input">
<input class="sd-line-input__input" type="text" ng-model="rule.name" placeholder="{{ 'Rule name' | translate }}" required autofocus>
</div>
</div>
<ul class="pills-list" ng-if="!rule && !editScheme.rules.length">
<li class="empty-info" translate>No rules defined yet</li>
</ul>
<ul sd-sortrules class="pills-list pills-list--draggable" ng-if="!rule">
<li ng-repeat="schemeRule in editScheme.rules" ng-class="{active: selectedRule === schemeRule}" ng-click="selectRule(schemeRule)">
{{schemeRule.name}}
({{getRuleHandlerLabel(schemeRule)}})
<div class="actions">
<button ng-click="editRule(schemeRule)" sd-tooltip="{{ :: 'Edit Rule' | translate }}">
<i class="icon-pencil"></i>
</button>
<button ng-click="removeRule(schemeRule)" sd-tooltip="{{ :: 'Delete Rule' | translate }}">
<i class="icon-trash"></i>
</button>
</div>
</li>
</ul>
<div style="display: flex; flex-direction: column; align-items: center; margin-top: 1rem; margin-bottom: 6rem">
<div
class="dropdown dropdown--add-more dropdown--add-more__bottom dropdown-terms"
dropdown
ng-if="!rule"
ng-disabled="!editScheme.name"
>
<button class="btn btn--primary btn--icon-only-circle" sd-tooltip="{{ :: 'Add Rule' | translate }}" flow="right" dropdown__toggle data-test-id="add-routing-rule-button">
<i class="icon-plus-large"></i>
</button>
<ul class="dropdown__menu nested-menu">
<li class="main-list">
<ul>
<li ng-repeat="handler in ruleHandlers">
<button ng-click="addRule(handler)" data-test-id="{{'rule-handler--' + handler._id}}">
{{handler.name}}
</button>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="grid__item grid__item--col-8">
<div class="col-heading" ng-if="editScheme.rules.length" translate>Scheme details</div>
<div class="column" ng-if="!selectedRule && !rule && editScheme.rules.length">
<i class="icon-info-sign icon--blue"></i><span class="helper-text helper-text--after-icon">{{ :: 'Click on a Scheme rules on the left to view details.' | translate }}</span>
</div>
<div class="column" ng-if="selectedRule && !rule">
<div sd-ingest-routing-general data-rule="selectedRule" data-rule-handler="ruleHandler"></div>
</div>
<div class="column" ng-if="rule">
<div sd-ingest-routing-filter data-rule="rule" data-content-filters="contentFilters"></div>
<div sd-ingest-routing-action data-rule="rule" data-rule-handler="ruleHandler" data-update-rule="updateRule"></div>
<div sd-ingest-routing-schedule data-rule="rule"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal__body-footer">
<div class="button-group button-group--end button-group--comfort" role="group">
<div class="sd-display--contents" ng-if="rule">
<button class="btn" tabindex="0" ng-click="cancelRule(rule)" translate>Cancel</button>
<button class="btn btn--primary" tabindex="0" ng-click="save()" ng-disabled="!rule.name" translate>Save</button>
</div>
<button class="btn btn--primary" tabindex="0" ng-click="done()" ng-disabled="rule" translate>Done</button>
</div>
</div>
</form>
</div>
</div>
<!-- END Modal -->