groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/dialog-add-endpoint.tpl.html

   1 <md-dialog ng-cloak class="gbpDialogWrapper">
   2     <form name="endpointForm">
   3         <md-toolbar>
   4             <div class="md-toolbar-tools">
   5                 <h2>Add Endpoint</h2>
   6                 <span flex></span>
   7                 <md-button ng-click="closeDialog()" class="md-button">Close dialog</md-button>
   8             </div>
   9         </md-toolbar>
  10         <md-dialog-content style="width:800px;">
  11             <md-tabs md-dynamic-height flex>
  12                 <md-tab label="Endpoint">
  13                     <div layout="column" class="layout-padding-lr15">
  14                         <div layout="row">
  15                             <md-input-container flex >
  16                                 <label>Tenant Id</label>
  17                                 <md-select ng-model="endpoint.data.tenant" md-on-close="populateScopeAfterTenantSelected();" aria-label="Tenant select">
  18                                     <md-option ng-repeat="tenant in rootTenants.data" ng-value="tenant.data.id">{{ tenant.data.id }}</md-option>
  19                                 </md-select>
  20                             </md-input-container>
  21                         </div>
  22                         <div layout="row">
  23                             <md-input-container flex>
  24                                 <label>Context Type</label>
  25                                 <md-select name="contextTypeSelect" ng-model="endpoint.data['context-type']"
  26                                            ng-change="filterContextIds(endpoint.data['context-type'])"
  27                                            aria-label="Context type select"
  28                                            ng-required="true">
  29                                     <md-option ng-repeat="contextType in ['l2-l3-forwarding:l2-bridge-domain', 'l2-l3-forwarding:l2-flood-domain', 'l2-l3-forwarding:l3-context']"
  30                                                ng-value="contextType">
  31                                         {{ contextType }}
  32                                     </md-option>
  33                                 </md-select>
  34                                 <div ng-messages="endpointForm.contextTypeSelect.$error" ng-show="endpointForm.contextTypeSelect.$touched">
  35                                     <div ng-message="required">Required field</div>
  36                                 </div>
  37                             </md-input-container>
  38                             <md-input-container flex ng-if="forwardingContexts.length">
  39                                 <label>Context Id</label>
  40                                 <md-select name="contextIdSelect" ng-model="endpoint.data['context-id']"
  41                                            aria-label="Context Id select"
  42                                            ng-required="true">
  43                                     <md-option ng-repeat="contextId in forwardingContexts"
  44                                                ng-value="contextId['context-id']">
  45                                         {{ contextId['context-id'] }}
  46                                     </md-option>
  47                                 </md-select>
  48                                 <div ng-messages="endpointForm.contextIdSelect.$error" ng-show="endpointForm.contextIdSelect.$touched">
  49                                     <div ng-message="required">Required field</div>
  50                                 </div>
  51                             </md-input-container>
  52                             <md-input-container flex ng-if="!forwardingContexts.length">
  53                                 <label>Context Id</label>
  54                                 <input ng-model="endpoint.data['context-id']" />
  55                             </md-input-container>
  56                         </div>
  57                         <div layout="row">
  58                             <md-input-container flex>
  59                                 <label>Address Type</label>
  60                                 <md-select name="AddressType" ng-model="endpoint.data['address-type']" aria-label="Address Type select" ng-required="true">
  61                                     <md-option ng-repeat="addressType in ['l2-l3-forwarding:mac-address-type', 'l2-l3-forwarding:ip-prefix-type']"
  62                                                ng-value="addressType">
  63                                         {{ addressType }}
  64                                     </md-option>
  65                                 </md-select>
  66                                 <div ng-messages="endpointForm.AddressType.$error" ng-show="endpointForm.AddressType.$touched">
  67                                     <div ng-message="required">Required field</div>
  68                                 </div>
  69                             </md-input-container>
  70                             <md-input-container flex>
  71                                 <label>Address</label>
  72                                 <input name="address" ng-model="endpoint.data.address" ng-required="true"
  73                                        ng-pattern="(endpoint.data['address-type'] === 'l2-l3-forwarding:mac-address-type' ? regexps['mac-address'] : regexps['ip-prefix'])">
  74                                 <div ng-messages="endpointForm.address.$error" ng-show="endpointForm.address.$touched">
  75                                     <div ng-message="required">Required field</div>
  76                                     <div ng-message="pattern">Expected correct address type format</div>
  77                                </div>
  78                             </md-input-container>
  79                         </div>
  80                         <div layout="row">
  81                             <md-input-container flex ng-if="forwardingNetworkDomainIds.length">
  82                                 <label>Network Containment - Network Domain Id</label>
  83                                 <md-select name="networkDomainIdSelect"
  84                                            ng-model="endpoint.data['network-containment']['network-domain-id']"
  85                                            aria-label="Network Domain Id select">
  86                                     <md-option value="{{undefined}}"></md-option>
  87                                     <md-option ng-repeat="NetworkDomainId in forwardingNetworkDomainIds"
  88                                                ng-value="NetworkDomainId['network-domain-id']"
  89                                                ng-required="true" >
  90                                         {{ NetworkDomainId['network-domain-id'] }}
  91                                     </md-option>
  92                                 </md-select>
  93                             </md-input-container>
  94                             <md-input-container flex ng-if="!forwardingNetworkDomainIds.length">
  95                                 <label>Network Containment - Network Domain Id</label>
  96                                 <input name="networkDomainIdInput" ng-model="endpoint.data['network-containment']['network-domain-id']"/>
  97                             </md-input-container>
  98                         </div>
  99                         <div layout="row">
 100                             <md-input-container flex>
 101                             <label>Endpoint Group</label>
 102                                 <md-chips
 103                                                 name="epgs"
 104                                                 ng-model="endpoint.data['endpoint-group']"
 105                                                 md-autocomplete-snap
 106                                                 flex>
 107                                                 <md-autocomplete
 108                                                         md-selected-item="epgsChips.selectedItem"
 109                                                         md-search-text="epgsChips.searchText"
 110                                                         md-items="epg in searchEpgs(epgsChips.searchText)"
 111                                                         md-item-text="epg"
 112                                         placeholder="{{!endpoint.data.tenant ? 'Select Tenant first' : 'Add an item'}}"
 113                                                         md-autocomplete-wrap-override
 114                                                         md-input-name="epAutocomplete"
 115                                                         flex
 116                                         ng-disabled="!endpoint.data.tenant">
 117                                                         <md-item-template>
 118                                                                 <span md-highlight-text="epgsChips.searchText">{{epg}}</span>
 119                                                         </md-item-template>
 120                                                         <md-not-found>
 121                                                                 No matches found.
 122                                                         </md-not-found>
 123                                                 </md-autocomplete>
 124                                                 <md-chip-template>
 125                                                         <span>{{$chip}}</span>
 126                                                 </md-chip-template>
 127                                     </md-chips>
 128                             </md-input-container>
 129                         </div>
 130                         <div layout="row">
 131                             <md-input-container flex>
 132                                 <label>Condition</label>
 133                                 <md-chips ng-model="endpoint.data.condition"
 134                                           placeholder="Add an item">
 135                                 </md-chips>
 136                             </md-input-container>
 137                         </div>
 138                     </div>
 139                 </md-tab>
 140                 <md-tab label="Location">
 141                     <div layout="column" class="layout-padding-lr15">
 142                         <md-subheader class="md-primary">Absolute location</md-subheader>
 143                         <div layout="row">
 144                             <md-input-container flex>
 145                                 <label>Internal node</label>
 146                                 <input name="AbsoluteLocationInternalNode" ng-model="endpoint.data['absolute-location']['internal-node']">
 147                             </md-input-container>
 148                         </div>
 149                         <div layout="row">
 150                             <md-input-container flex>
 151                                 <label>Internal node connector</label>
 152                                 <input name="AbsoluteLocationInternalNodeConnector" ng-model="endpoint.data['absolute-location']['internal-node-connector']">
 153                             </md-input-container>
 154                         </div>
 155                     </div>
 156                 </md-tab>
 157             </md-tabs>
 158         </md-dialog-content>
 159         <md-dialog-actions layout="row">
 160             <span flex></span>
 161             <md-button ng-click="closeDialog()" class="md-primary">
 162                 Close
 163             </md-button>
 164             <md-button ng-click="save()" style="margin-right:20px;" ng-disabled="endpointForm.$invalid" class="md-primary">
 165                 Save
 166             </md-button>
 167         </md-dialog-actions>
 168     </form>
 169 </md-dialog>