<div class="row"><div class="col-md-12"><ul class="page-breadcrumb breadcrumb"><li><a href="#"><i class="fa fa-home"></i> Dashboard</a></li><li class="active"><i class="fa fa-cogs"></i> Components</li></ul><h3 class="page-title">Components <small>Manage Java Business Integration Binding Components and Service Engines.</small></h3></div></div><div class="row"><div class="col-md-12"><div class="portlet box blue-madison"><div class="portlet-title"><div class="caption"><i class="fa fa-cogs"></i> Binding components and Service Engines &nbsp; <span class="badge badge-info">{{components.length}}</span></div><div class="actions"><a href="#/component/install" class="btn btn-default btn-sm" role="button" tooltip="Install new component"><i class="fa fa-plus"></i> Install</a></div></div><div class="portlet-body"><div class="row"><div class="col-md-6 col-sm-12"><div class="hidden-xs-portrait"><label>Search:<input type="search" placeholder="Enter text" ng-model="query" class="hidden-xs"></label></div></div></div><table class="ng-cloak table table-condensed table-striped table-responsive table-hover" ng-show="components.length > 0"><thead><tr><th><a href="" ng-click="predicate = 'name'; reverse = !reverse">Name</a><th><a href="" ng-click="predicate = 'state'; reverse = !reverse">State</a><th><a href="" ng-click="predicate = 'version'; reverse = !reverse">Version</a><th><a href="" ng-click="predicate = 'buildNumber'; reverse = !reverse">Build Number</a><th><tbody><tr ng-repeat="component in components | filter:query | orderBy:predicate:reverse"><td><a href="#/components/{{component.name}}" class="btn-sm dark" tooltip-placement="right" tooltip="{{component.description}}"><i data-ng-if="component.type === 'SERVICE_ENGINE'" class="fa fa-cog"></i> <i data-ng-if="component.type === 'BINDING_COMPONENT'" class="fa fa-puzzle-piece"></i> {{component.name}}</a><td><jbi-state state="component.state"></jbi-state><td>{{component.version}}<td>{{component.buildNumber}}<td><a href="#/components/{{component.name}}/upgrade" class="btn btn-info btn-sm glyphicon glyphicon-refresh" role="button" tooltip="Upgrade {{component.name}} component"><button class="btn btn-danger btn-sm glyphicon glyphicon-trash" ng-click="delete(component)" ng-disabled="component.state != 'SHUTDOWN'" tooltip="Delete {{component.name}} component"></table></div></div></div></div>