mirror of
https://github.com/portainer/portainer.git
synced 2025-08-08 23:35:31 +02:00
refactor(environments): migrate table to react [EE-4702] (#8882)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
f7dd73b0f7
commit
caf87bb0b5
28 changed files with 492 additions and 411 deletions
|
|
@ -171,7 +171,7 @@ angular
|
|||
url: '/endpoints',
|
||||
views: {
|
||||
'content@': {
|
||||
component: 'endpointsView',
|
||||
component: 'environmentsListView',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,167 +0,0 @@
|
|||
<div class="datatable">
|
||||
<rd-widget>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<div class="toolBar">
|
||||
<div class="toolBarTitle vertical-center">
|
||||
<div class="widget-icon space-right">
|
||||
<pr-icon icon="$ctrl.titleIcon"></pr-icon>
|
||||
</div>
|
||||
|
||||
{{ $ctrl.titleText }}
|
||||
</div>
|
||||
<div class="searchBar vertical-center">
|
||||
<pr-icon icon="'search'" class="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 }"
|
||||
data-cy="endpoint-searchInput"
|
||||
/>
|
||||
</div>
|
||||
<div class="actionBar !gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-dangerlight h-fit"
|
||||
ng-disabled="$ctrl.state.selectedItemCount === 0"
|
||||
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
|
||||
data-cy="endpoint-removeEndpointButton"
|
||||
>
|
||||
<pr-icon icon="'trash-2'" class-name="'icon-white'"></pr-icon>
|
||||
<span>Remove</span>
|
||||
</button>
|
||||
|
||||
<import-fdo-device-button></import-fdo-device-button>
|
||||
|
||||
<button ng-if="$ctrl.isBE" type="button" class="btn btn-sm btn-secondary vertical-center" ui-sref="portainer.endpoints.edgeAutoCreateScript">
|
||||
<pr-icon icon="'plus'"></pr-icon>
|
||||
<span>Generate AEEC script</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary vertical-center"
|
||||
ng-click="$ctrl.setReferrer()"
|
||||
ui-sref="portainer.wizard.endpoints"
|
||||
data-cy="endpoint-addEndpointButton"
|
||||
>
|
||||
<pr-icon icon="'plus'" class-name="'icon-white'"></pr-icon>
|
||||
<span>Add environment</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table-hover nowrap-cells table" data-cy="endpoint-endpointTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<div class="vertical-center">
|
||||
<span class="md-checkbox vertical-center">
|
||||
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
|
||||
<label for="select_all"></label>
|
||||
</span>
|
||||
<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>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<table-column-header
|
||||
col-title="'Type'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Type'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Type')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<table-column-header
|
||||
col-title="'URL'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'URL'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'URL' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('URL')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<table-column-header
|
||||
col-title="'GroupName'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'GroupName'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'GroupName' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('GroupName')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<table-column-header col-title="'Actions'" can-sort="false"></table-column-header>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
dir-paginate="item in $ctrl.state.filteredDataSet | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit"
|
||||
total-items="$ctrl.state.totalFilteredDataSet"
|
||||
ng-class="{ active: item.Checked }"
|
||||
>
|
||||
<td>
|
||||
<span class="md-checkbox">
|
||||
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
|
||||
<label for="select_{{ $index }}"></label>
|
||||
</span>
|
||||
<a ui-sref="portainer.endpoints.endpoint({id: item.Id})">{{ item.Name }}</a>
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
<i ng-class="item.Type | endpointtypeicon" aria-hidden="true" style="margin-right: 2px"></i>
|
||||
{{ item.Type | endpointtypename }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span ng-if="item.Type !== 4">{{ item.URL | stripprotocol }}</span>
|
||||
<span ng-if="item.Type === 4">-</span>
|
||||
</td>
|
||||
<td>{{ item.GroupName }}</td>
|
||||
<td>
|
||||
<a ui-sref="portainer.endpoints.endpoint.access({id: item.Id})">
|
||||
<pr-icon icon="'users'"></pr-icon>
|
||||
Manage access
|
||||
</a>
|
||||
</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 vertical-center">
|
||||
<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,13 +0,0 @@
|
|||
angular.module('portainer.app').component('endpointsDatatable', {
|
||||
templateUrl: './endpointsDatatable.html',
|
||||
controller: 'EndpointsDatatableController',
|
||||
bindings: {
|
||||
titleText: '@',
|
||||
titleIcon: '@',
|
||||
tableKey: '@',
|
||||
orderBy: '@',
|
||||
reverseOrder: '<',
|
||||
removeAction: '<',
|
||||
retrievePage: '<',
|
||||
},
|
||||
});
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
import _ from 'lodash-es';
|
||||
import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
|
||||
|
||||
angular.module('portainer.app').controller('EndpointsDatatableController', [
|
||||
'$scope',
|
||||
'$controller',
|
||||
'DatatableService',
|
||||
'PaginationService',
|
||||
function ($scope, $controller, DatatableService, PaginationService) {
|
||||
angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
|
||||
|
||||
this.isBE = isBE;
|
||||
|
||||
this.state = Object.assign(this.state, {
|
||||
orderBy: this.orderBy,
|
||||
loading: true,
|
||||
filteredDataSet: [],
|
||||
totalFilteredDataset: 0,
|
||||
pageNumber: 1,
|
||||
});
|
||||
|
||||
this.paginationChanged = async function () {
|
||||
try {
|
||||
this.state.loading = true;
|
||||
this.state.filteredDataSet = [];
|
||||
const start = (this.state.pageNumber - 1) * this.state.paginatedItemLimit + 1;
|
||||
const { endpoints, totalCount } = await this.retrievePage(start, this.state.paginatedItemLimit, this.state.textFilter);
|
||||
this.state.filteredDataSet = endpoints;
|
||||
this.state.totalFilteredDataSet = totalCount;
|
||||
this.refreshSelectedItems();
|
||||
} finally {
|
||||
this.state.loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
this.onPageChange = function (newPageNumber) {
|
||||
this.state.pageNumber = newPageNumber;
|
||||
this.paginationChanged();
|
||||
};
|
||||
|
||||
this.setReferrer = function () {
|
||||
window.localStorage.setItem('wizardReferrer', 'environments');
|
||||
};
|
||||
|
||||
/**
|
||||
* Overridden
|
||||
*/
|
||||
this.onTextFilterChange = function () {
|
||||
var filterValue = this.state.textFilter;
|
||||
DatatableService.setDataTableTextFilters(this.tableKey, filterValue);
|
||||
this.resetSelectionState();
|
||||
this.paginationChanged();
|
||||
};
|
||||
|
||||
/**
|
||||
* Overriden
|
||||
*/
|
||||
this.uniq = function () {
|
||||
return _.uniqBy(_.concat(this.state.filteredDataSet, this.state.selectedItems), 'Id');
|
||||
};
|
||||
|
||||
/**
|
||||
* Overridden
|
||||
*/
|
||||
this.changePaginationLimit = function () {
|
||||
PaginationService.setPaginationLimit(this.tableKey, this.state.paginatedItemLimit);
|
||||
this.paginationChanged();
|
||||
};
|
||||
|
||||
this.refreshSelectedItems = function () {
|
||||
_.forEach(this.state.filteredDataSet, (item) => {
|
||||
if (_.filter(this.state.selectedItems, (i) => i.Id == item.Id).length > 0) {
|
||||
item.Checked = true;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Overridden
|
||||
*/
|
||||
this.$onInit = function () {
|
||||
this.setDefaults();
|
||||
this.prepareTableFromDataset();
|
||||
|
||||
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
|
||||
if (storedOrder !== null) {
|
||||
this.state.reverseOrder = storedOrder.reverse;
|
||||
this.state.orderBy = storedOrder.orderBy;
|
||||
}
|
||||
|
||||
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
|
||||
if (textFilter !== null) {
|
||||
this.state.textFilter = textFilter;
|
||||
this.onTextFilterChange();
|
||||
}
|
||||
|
||||
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
|
||||
if (storedFilters !== null) {
|
||||
this.filters = storedFilters;
|
||||
}
|
||||
if (this.filters && this.filters.state) {
|
||||
this.filters.state.open = false;
|
||||
}
|
||||
|
||||
this.paginationChanged();
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
@ -9,6 +9,7 @@ import { CreateAccessToken } from '@/react/portainer/account/CreateAccessTokenVi
|
|||
import { EdgeComputeSettingsView } from '@/react/portainer/settings/EdgeComputeView/EdgeComputeSettingsView';
|
||||
import { withI18nSuspense } from '@/react-tools/withI18nSuspense';
|
||||
import { EdgeAutoCreateScriptView } from '@/react/portainer/environments/EdgeAutoCreateScriptView';
|
||||
import { ListView as EnvironmentsListView } from '@/react/portainer/environments/ListView';
|
||||
|
||||
import { wizardModule } from './wizard';
|
||||
import { teamsModule } from './teams';
|
||||
|
|
@ -44,4 +45,8 @@ export const viewsModule = angular
|
|||
withUIRouter(withReactQuery(withCurrentUser(EdgeComputeSettingsView))),
|
||||
['onSubmit', 'settings']
|
||||
)
|
||||
)
|
||||
.component(
|
||||
'environmentsListView',
|
||||
r2a(withUIRouter(withReactQuery(withCurrentUser(EnvironmentsListView))), [])
|
||||
).name;
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
<page-header title="'Environments'" breadcrumbs="['Environment management']" reload="true"> </page-header>
|
||||
|
||||
<view-loading ng-if="$ctrl.state.loadingMessage" message="$ctrl.state.loadingMessage"></view-loading>
|
||||
|
||||
<div class="row" ng-if="!$ctrl.state.loadingMessage">
|
||||
<div class="col-sm-12">
|
||||
<endpoints-datatable
|
||||
title-text="Environments"
|
||||
title-icon="hard-drive"
|
||||
table-key="$ctrl.endpoints"
|
||||
order-by="Name"
|
||||
remove-action="$ctrl.removeAction"
|
||||
retrieve-page="$ctrl.getPaginatedEndpoints"
|
||||
set-loading-message="$ctr.setLoadingMessage"
|
||||
></endpoints-datatable>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { EndpointsController } from './endpointsController';
|
||||
|
||||
angular.module('portainer.app').component('endpointsView', {
|
||||
templateUrl: './endpoints.html',
|
||||
controller: EndpointsController,
|
||||
});
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
import { map } from 'lodash';
|
||||
import EndpointHelper from '@/portainer/helpers/endpointHelper';
|
||||
import { getEnvironments } from '@/react/portainer/environments/environment.service';
|
||||
import { confirmDelete } from '@@/modals/confirm';
|
||||
|
||||
export class EndpointsController {
|
||||
/* @ngInject */
|
||||
constructor($state, $async, EndpointService, GroupService, Notifications, EndpointProvider, StateManager) {
|
||||
Object.assign(this, {
|
||||
$state,
|
||||
$async,
|
||||
EndpointService,
|
||||
GroupService,
|
||||
Notifications,
|
||||
EndpointProvider,
|
||||
StateManager,
|
||||
});
|
||||
|
||||
this.state = {
|
||||
loadingMessage: '',
|
||||
};
|
||||
|
||||
this.setLoadingMessage = this.setLoadingMessage.bind(this);
|
||||
this.getPaginatedEndpoints = this.getPaginatedEndpoints.bind(this);
|
||||
this.removeAction = this.removeAction.bind(this);
|
||||
}
|
||||
|
||||
setLoadingMessage(message) {
|
||||
this.state.loadingMessage = message;
|
||||
}
|
||||
|
||||
removeAction(endpoints) {
|
||||
confirmDelete('This action will remove all configurations associated to your environment(s). Continue?').then((confirmed) => {
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
return this.$async(async () => {
|
||||
try {
|
||||
await Promise.all(endpoints.map(({ Id }) => this.EndpointService.deleteEndpoint(Id)));
|
||||
this.Notifications.success('Environments successfully removed', map(endpoints, 'Name').join(', '));
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to remove environment');
|
||||
}
|
||||
|
||||
const id = this.EndpointProvider.endpointID();
|
||||
// If the current endpoint was deleted, then clean endpoint store
|
||||
if (endpoints.some((e) => e.Id === id)) {
|
||||
this.StateManager.cleanEndpoint();
|
||||
}
|
||||
|
||||
this.$state.reload();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getPaginatedEndpoints(start, limit, search) {
|
||||
return this.$async(async () => {
|
||||
try {
|
||||
const [{ value: endpoints, totalCount }, groups] = await Promise.all([
|
||||
getEnvironments({ start, limit, query: { search, excludeSnapshots: true } }),
|
||||
this.GroupService.groups(),
|
||||
]);
|
||||
EndpointHelper.mapGroupNameToEndpoint(endpoints, groups);
|
||||
return { endpoints, totalCount };
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to retrieve environment information');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue