mirror of
https://github.com/portainer/portainer.git
synced 2025-08-05 05:45:22 +02:00
refactor(edge/stacks): migrate envs table to react [EE-5613] (#9093)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
dfc1a7b1d7
commit
11571fd6ea
24 changed files with 652 additions and 281 deletions
|
|
@ -1,91 +0,0 @@
|
|||
<div class="datatable">
|
||||
<rd-widget>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<div class="toolBar">
|
||||
<div class="toolBarTitle vertical-center"> <pr-icon icon="$ctrl.titleIcon"></pr-icon> {{ $ctrl.titleText }} </div>
|
||||
<div class="searchBar vertical-center">
|
||||
<pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
|
||||
<input
|
||||
type="text"
|
||||
class="searchInput"
|
||||
auto-focus
|
||||
placeholder="Search..."
|
||||
ng-model="$ctrl.state.textFilter"
|
||||
ng-change="$ctrl.onTextFilterChange()"
|
||||
ng-model-options="{ debounce: 300 }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table-hover nowrap-cells table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<table-column-header
|
||||
col-title="'Name'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Name'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Name')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<table-column-header
|
||||
col-title="'Status'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Status'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Status')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<table-column-header
|
||||
col-title="'Error'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Error'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Error' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Error')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
dir-paginate="item in $ctrl.state.filteredDataSet | itemsPerPage: $ctrl.state.paginatedItemLimit"
|
||||
total-items="$ctrl.state.totalFilteredDataSet"
|
||||
ng-class="{ active: item.Checked }"
|
||||
>
|
||||
<td>{{ item.Name }}</td>
|
||||
<td>{{ $ctrl.endpointStatusLabel(item.Id) }}</td>
|
||||
<td>{{ $ctrl.endpointStatusError(item.Id) }}</td>
|
||||
</tr>
|
||||
<tr ng-if="$ctrl.state.loading">
|
||||
<td colspan="5" class="text-muted text-center">Loading...</td>
|
||||
</tr>
|
||||
<tr ng-if="!$ctrl.state.loading && $ctrl.state.filteredDataSet.length === 0">
|
||||
<td colspan="5" class="text-muted text-center">No environment available.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="footer" ng-if="!$ctrl.state.loading">
|
||||
<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()" data-cy="component-paginationSelect">
|
||||
<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" on-page-change="$ctrl.onPageChange(newPageNumber, oldPageNumber)"></dir-pagination-controls>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
import angular from 'angular';
|
||||
|
||||
export class EdgeStackEndpointsDatatableController {
|
||||
/* @ngInject */
|
||||
constructor($async, $scope, $controller, DatatableService, PaginationService, Notifications) {
|
||||
this.extendGenericController($controller, $scope);
|
||||
this.DatatableService = DatatableService;
|
||||
this.PaginationService = PaginationService;
|
||||
this.Notifications = Notifications;
|
||||
this.$async = $async;
|
||||
|
||||
this.state = Object.assign(this.state, {
|
||||
orderBy: this.orderBy,
|
||||
loading: true,
|
||||
filteredDataSet: [],
|
||||
totalFilteredDataset: 0,
|
||||
pageNumber: 1,
|
||||
});
|
||||
|
||||
this.onPageChange = this.onPageChange.bind(this);
|
||||
this.paginationChanged = this.paginationChanged.bind(this);
|
||||
this.paginationChangedAsync = this.paginationChangedAsync.bind(this);
|
||||
}
|
||||
|
||||
extendGenericController($controller, $scope) {
|
||||
// extending the controller overrides the current controller functions
|
||||
const $onInit = this.$onInit.bind(this);
|
||||
const changePaginationLimit = this.changePaginationLimit.bind(this);
|
||||
const onTextFilterChange = this.onTextFilterChange.bind(this);
|
||||
angular.extend(this, $controller('GenericDatatableController', { $scope }));
|
||||
this.$onInit = $onInit;
|
||||
this.changePaginationLimit = changePaginationLimit;
|
||||
this.onTextFilterChange = onTextFilterChange;
|
||||
}
|
||||
|
||||
getEndpointStatus(endpointId) {
|
||||
return this.endpointsStatus[endpointId];
|
||||
}
|
||||
|
||||
endpointStatusLabel(endpointId) {
|
||||
const status = this.getEndpointStatus(endpointId);
|
||||
const details = (status && status.Details) || {};
|
||||
|
||||
return (details.Error && 'Error') || (details.Ok && 'Ok') || (details.ImagesPulled && 'Images pre-pulled') || (details.Acknowledged && 'Acknowledged') || 'Pending';
|
||||
}
|
||||
|
||||
endpointStatusError(endpointId) {
|
||||
const status = this.getEndpointStatus(endpointId);
|
||||
|
||||
return status && status.Error ? status.Error : '-';
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
this.setDefaults();
|
||||
this.prepareTableFromDataset();
|
||||
|
||||
var storedOrder = this.DatatableService.getDataTableOrder(this.tableKey);
|
||||
if (storedOrder !== null) {
|
||||
this.state.reverseOrder = storedOrder.reverse;
|
||||
this.state.orderBy = storedOrder.orderBy;
|
||||
}
|
||||
|
||||
var textFilter = this.DatatableService.getDataTableTextFilters(this.tableKey);
|
||||
if (textFilter !== null) {
|
||||
this.state.textFilter = textFilter;
|
||||
this.onTextFilterChange();
|
||||
}
|
||||
|
||||
var storedFilters = this.DatatableService.getDataTableFilters(this.tableKey);
|
||||
if (storedFilters !== null) {
|
||||
this.filters = storedFilters;
|
||||
}
|
||||
if (this.filters && this.filters.state) {
|
||||
this.filters.state.open = false;
|
||||
}
|
||||
|
||||
this.paginationChanged();
|
||||
}
|
||||
|
||||
onPageChange(newPageNumber) {
|
||||
this.state.pageNumber = newPageNumber;
|
||||
this.paginationChanged();
|
||||
}
|
||||
|
||||
/**
|
||||
* Overridden
|
||||
*/
|
||||
changePaginationLimit() {
|
||||
this.PaginationService.setPaginationLimit(this.tableKey, this.state.paginatedItemLimit);
|
||||
this.paginationChanged();
|
||||
}
|
||||
|
||||
/**
|
||||
* Overridden
|
||||
*/
|
||||
onTextFilterChange() {
|
||||
var filterValue = this.state.textFilter;
|
||||
this.DatatableService.setDataTableTextFilters(this.tableKey, filterValue);
|
||||
this.paginationChanged();
|
||||
}
|
||||
|
||||
paginationChanged() {
|
||||
this.$async(this.paginationChangedAsync);
|
||||
}
|
||||
|
||||
async paginationChangedAsync() {
|
||||
this.state.loading = true;
|
||||
this.state.filteredDataSet = [];
|
||||
const start = (this.state.pageNumber - 1) * this.state.paginatedItemLimit + 1;
|
||||
try {
|
||||
const { endpoints, totalCount } = await this.retrievePage(start, this.state.paginatedItemLimit, this.state.textFilter);
|
||||
this.state.filteredDataSet = endpoints;
|
||||
this.state.totalFilteredDataSet = totalCount;
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to retrieve environments');
|
||||
} finally {
|
||||
this.state.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import angular from 'angular';
|
||||
|
||||
import { EdgeStackEndpointsDatatableController } from './edgeStackEndpointsDatatableController';
|
||||
|
||||
angular.module('portainer.edge').component('edgeStackEndpointsDatatable', {
|
||||
templateUrl: './edgeStackEndpointsDatatable.html',
|
||||
controller: EdgeStackEndpointsDatatableController,
|
||||
bindings: {
|
||||
titleText: '@',
|
||||
titleIcon: '@',
|
||||
tableKey: '@',
|
||||
orderBy: '@',
|
||||
reverseOrder: '<',
|
||||
retrievePage: '<',
|
||||
edgeStackId: '<',
|
||||
endpointsStatus: '<',
|
||||
},
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue