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