<div class="datatable"> <rd-widget> <rd-widget-body classes="no-padding"> <div class="toolBar"> <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div> </div> <div class="actionBar"> <button type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.rescanAction()"> <i class="fa fa-sync space-right" aria-hidden="true"></i>Rescan drives </button> </div> <div class="searchBar"> <i class="fa fa-search searchIcon" aria-hidden="true"></i> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" /> </div> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr> <th> <a ng-click="$ctrl.changeOrderBy('Id')"> Id <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && !$ctrl.state.reverseOrder"></i> <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"></i> </a> </th> <th> <a ng-click="$ctrl.changeOrderBy('Node')"> Node <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Node' && !$ctrl.state.reverseOrder"></i> <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Node' && $ctrl.state.reverseOrder"></i> </a> </th> <th> <a ng-click="$ctrl.changeOrderBy('Device')"> Device <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Device' && !$ctrl.state.reverseOrder"></i> <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Device' && $ctrl.state.reverseOrder"></i> </a> </th> <th> <a ng-click="$ctrl.changeOrderBy('Size')"> Size <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Size' && !$ctrl.state.reverseOrder"></i> <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Size' && $ctrl.state.reverseOrder"></i> </a> </th> <th> <a ng-click="$ctrl.changeOrderBy('Use')"> Use <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Use' && !$ctrl.state.reverseOrder"></i> <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Use' && $ctrl.state.reverseOrder"></i> </a> </th> <th> <a ng-click="$ctrl.changeOrderBy('Type')"> Type <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && !$ctrl.state.reverseOrder"></i> <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"></i> </a> </th> <th> <a ng-click="$ctrl.changeOrderBy('Status')"> Status <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></i> <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i> </a> </th> <th> Actions </th> </tr> </thead> <tbody> <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{ active: item.Checked }" > <td> <a ui-sref="storidge.drives.drive({id: item.Id})"> {{ item.Id }}</a> </td> <td>{{ item.Node }}</td> <td>{{ item.Device }}</td> <td>{{ item.Size }}</td> <td>{{ item.Use }}</td> <td>{{ item.Type }}</td> <td> <span class="label label-{{ item.Status | drivestatusbadge }}">{{ item.Status | capitalize }}</span> </td> <td> <button ng-if="item.Status === 'available'" type="button" class="btn btn-sm btn-primary btn-datatable" ng-click="$ctrl.addAction(item, $index)" button-spinner="$ctrl.additionInProgress[$index]" ng-disabled="$ctrl.actionInProgress" > <span ng-hide="$ctrl.additionInProgress[$index]"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add to storage pool</span> <span ng-show="$ctrl.additionInProgress[$index]">Addition in progress...</span> </button> </td> </tr> <tr ng-if="!$ctrl.dataset"> <td colspan="7" class="text-center text-muted">Loading...</td> </tr> <tr ng-if="$ctrl.state.filteredDataSet.length === 0"> <td class="text-center text-muted">No drives available.</td> </tr> </tbody> </table> </div> <div class="footer" ng-if="$ctrl.dataset"> <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div> <div class="paginationControls"> <form class="form-inline"> <span class="limitSelector"> <span style="margin-right: 5px;"> Items per page </span> <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()"> <option value="0">All</option> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select> </span> <dir-pagination-controls max-size="5"></dir-pagination-controls> </form> </div> </div> </rd-widget-body> </rd-widget> </div>