<div> <rd-widget> <rd-widget-header icon="list" feather-icon="true" title-text="Hosts file entries"> <div class="nopadding" authorization="DockerServiceUpdate"> <a class="btn btn-secondary btn-sm pull-right" ng-click="isUpdating ||addHostsEntry(service)" ng-disabled="isUpdating"> <pr-icon icon="'plus'" feather="true"></pr-icon> add host entry </a> </div> </rd-widget-header> <rd-widget-body ng-if="!service.Hosts || service.Hosts.length === 0"> <p>The Hosts file has no extra entries.</p> </rd-widget-body> <rd-widget-body ng-if="service.Hosts.length > 0" classes="no-padding"> <table class="table"> <thead> <tr> <th>Hostname</th> <th>IP</th> </tr> </thead> <tbody> <tr ng-repeat="entry in service.Hosts"> <td> <div class="input-group input-group-sm"> <input type="text" class="form-control" ng-model="entry.hostname" placeholder="e.g. example.com" ng-change="updateHostsEntry(service, entry)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate" /> </div> </td> <td> <div class="input-group input-group-sm"> <input type="text" class="form-control" ng-model="entry.ip" placeholder="e.g. 10.0.1.1" ng-change="updateHostsEntry(service, entry)" ng-disabled="isUpdating" disable-authorization="DockerServiceUpdate" /> <span class="input-group-btn" authorization="DockerServiceUpdate"> <button class="btn btn-dangerlight" type="button" ng-click="removeHostsEntry(service, $index)" ng-disabled="isUpdating"> <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon> </button> </span> </div> </td> </tr> </tbody> </table> </rd-widget-body> <rd-widget-footer authorization="DockerServiceUpdate"> <div class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['Hosts'])" ng-click="updateService(service)">Apply changes</button> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a ng-click="cancelChanges(service, ['Hosts'])">Reset changes</a></li> <li><a ng-click="cancelChanges(service)">Reset all changes</a></li> </ul> </div> </div> </rd-widget-footer> </rd-widget> </div>