<div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <rd-widget> <rd-widget-header icon="fa-code" title-text="Node Details"></rd-widget-header> <rd-widget-body classes="no-padding"> <table class="table"> <tbody> <tr ng-if="$ctrl.details.name"> <td>Node name</td> <td>{{ $ctrl.details.name }}</td> </tr> <tr> <td>Role</td> <td>{{ $ctrl.details.role }} {{ $ctrl.state.managerAddress }}</td> </tr> <tr> <td>Availability</td> <td> <node-availability-select on-save="$ctrl.updateNodeAvailability(availability)" availability="$ctrl.details.availability" original-value="$ctrl.details.availability"> </node-availability-select> </td> </tr> <tr> <td>Status</td> <td><span class="label label-{{ $ctrl.details.status | nodestatusbadge }}">{{ $ctrl.details.status }}</span></td> </tr> <tr> <td> <div class="nopadding"> <a class="btn btn-default btn-sm pull-right" ng-click="$ctrl.addLabel(node)"> <i class="fa fa-plus-circle" aria-hidden="true"></i> label </a> </div> Node Labels </td> <td></td> </tr> <tr> <td colspan="2"> <node-labels-table labels="$ctrl.details.nodeLabels" on-changed-labels="$ctrl.updateNodeLabels(labels)"></node-labels-table> </td> </tr> <tr> <td> <div class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button type="button" class="btn btn-primary btn-sm" ng-disabled="!$ctrl.state.hasChanges" ng-click="$ctrl.saveChanges()"> 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="$ctrl.cancelChanges()">Reset changes</a></li> </ul> </div> </div> </td> </tr> </tbody> </table> </rd-widget-body> </rd-widget> </div> </div>