refactor(environments): migrate table to react [EE-4702] (#8882)
Chaim Lev-Ari
GitHub
parent
f7dd73b0f7
commit
caf87bb0b5
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -116,5 +116,9 @@ export function createMockEnvironment(): Environment {
|
|||
EndTime: '',
|
||||
StartTime: '',
|
||||
},
|
||||
StatusMessage: {
|
||||
Detail: '',
|
||||
Summary: '',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
|
|||
pageLimit,
|
||||
...queryWithSort,
|
||||
},
|
||||
refetchIfAnyOffline
|
||||
{ refetchInterval: refetchIfAnyOffline }
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
import { HardDrive, Plus, Trash2 } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { useEnvironmentList } from '@/react/portainer/environments/queries';
|
||||
import { useGroups } from '@/react/portainer/environments/environment-groups/queries';
|
||||
|
||||
import { Datatable } from '@@/datatables';
|
||||
import { createPersistedStore } from '@@/datatables/types';
|
||||
import { Button } from '@@/buttons';
|
||||
import { Link } from '@@/Link';
|
||||
import { useTableState } from '@@/datatables/useTableState';
|
||||
|
||||
import { isBE } from '../../feature-flags/feature-flags.service';
|
||||
import { refetchIfAnyOffline } from '../queries/useEnvironmentList';
|
||||
|
||||
import { columns } from './columns';
|
||||
import { EnvironmentListItem } from './types';
|
||||
import { ImportFdoDeviceButton } from './ImportFdoDeviceButton';
|
||||
|
||||
const tableKey = 'environments';
|
||||
const settingsStore = createPersistedStore(tableKey, 'Name');
|
||||
|
||||
export function EnvironmentsDatatable({
|
||||
onRemove,
|
||||
}: {
|
||||
onRemove: (environments: Array<EnvironmentListItem>) => void;
|
||||
}) {
|
||||
const tableState = useTableState(settingsStore, tableKey);
|
||||
|
||||
const [page, setPage] = useState(0);
|
||||
|
||||
const groupsQuery = useGroups();
|
||||
const { environments, isLoading, totalCount } = useEnvironmentList(
|
||||
{
|
||||
search: tableState.search,
|
||||
excludeSnapshots: true,
|
||||
page: page + 1,
|
||||
pageLimit: tableState.pageSize,
|
||||
sort: tableState.sortBy.id,
|
||||
order: tableState.sortBy.desc ? 'desc' : 'asc',
|
||||
},
|
||||
{ enabled: groupsQuery.isSuccess, refetchInterval: refetchIfAnyOffline }
|
||||
);
|
||||
|
||||
const environmentsWithGroups = environments.map<EnvironmentListItem>(
|
||||
(env) => {
|
||||
const groupId = env.GroupId;
|
||||
const group = groupsQuery.data?.find((g) => g.Id === groupId);
|
||||
return {
|
||||
...env,
|
||||
GroupName: group?.Name,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<Datatable
|
||||
title="Environments"
|
||||
titleIcon={HardDrive}
|
||||
dataset={environmentsWithGroups}
|
||||
columns={columns}
|
||||
settingsManager={tableState}
|
||||
pageCount={Math.ceil(totalCount / tableState.pageSize)}
|
||||
onPageChange={setPage}
|
||||
isLoading={isLoading}
|
||||
totalCount={totalCount}
|
||||
renderTableActions={(selectedRows) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
color="dangerlight"
|
||||
disabled={selectedRows.length === 0}
|
||||
onClick={() => onRemove(selectedRows)}
|
||||
icon={Trash2}
|
||||
className="!m-0"
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
|
||||
<ImportFdoDeviceButton />
|
||||
|
||||
{isBE && (
|
||||
<Button
|
||||
as={Link}
|
||||
color="secondary"
|
||||
icon={Plus}
|
||||
props={{ to: 'portainer.endpoints.edgeAutoCreateScript' }}
|
||||
>
|
||||
Auto onboarding
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
as={Link}
|
||||
props={{ to: 'portainer.environments.new' }}
|
||||
icon={Plus}
|
||||
className="!m-0"
|
||||
>
|
||||
Add environment
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import { useStore } from 'zustand';
|
||||
import _ from 'lodash';
|
||||
|
||||
import { environmentStore } from '@/react/hooks/current-environment-store';
|
||||
import { notifySuccess } from '@/portainer/services/notifications';
|
||||
|
||||
import { PageHeader } from '@@/PageHeader';
|
||||
import { confirmDelete } from '@@/modals/confirm';
|
||||
|
||||
import { Environment } from '../types';
|
||||
|
||||
import { EnvironmentsDatatable } from './EnvironmentsDatatable';
|
||||
import { useDeleteEnvironmentsMutation } from './useDeleteEnvironmentsMutation';
|
||||
|
||||
export function ListView() {
|
||||
const constCurrentEnvironmentStore = useStore(environmentStore);
|
||||
const deletionMutation = useDeleteEnvironmentsMutation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="Environments"
|
||||
breadcrumbs="Environment management"
|
||||
reload
|
||||
/>
|
||||
|
||||
<EnvironmentsDatatable onRemove={handleRemove} />
|
||||
</>
|
||||
);
|
||||
|
||||
async function handleRemove(environments: Array<Environment>) {
|
||||
const confirmed = await confirmDelete(
|
||||
'This action will remove all configurations associated to your environment(s). Continue?'
|
||||
);
|
||||
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const id = constCurrentEnvironmentStore.environmentId;
|
||||
// If the current endpoint was deleted, then clean endpoint store
|
||||
if (environments.some((e) => e.Id === id)) {
|
||||
constCurrentEnvironmentStore.clear();
|
||||
}
|
||||
|
||||
deletionMutation.mutate(
|
||||
environments.map((e) => e.Id),
|
||||
{
|
||||
onSuccess() {
|
||||
notifySuccess(
|
||||
'Environments successfully removed',
|
||||
_.map(environments, 'Name').join(', ')
|
||||
);
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { CellContext } from '@tanstack/react-table';
|
||||
import { Users } from 'lucide-react';
|
||||
|
||||
import { EnvironmentStatus } from '@/react/portainer/environments/types';
|
||||
|
||||
import { Button } from '@@/buttons';
|
||||
import { Link } from '@@/Link';
|
||||
|
||||
import { EnvironmentListItem } from '../types';
|
||||
|
||||
import { columnHelper } from './helper';
|
||||
|
||||
export const actions = columnHelper.display({
|
||||
header: 'Actions',
|
||||
cell: Cell,
|
||||
});
|
||||
|
||||
function Cell({
|
||||
row: { original: environment },
|
||||
}: CellContext<EnvironmentListItem, unknown>) {
|
||||
if (
|
||||
environment.Status === EnvironmentStatus.Provisioning ||
|
||||
environment.Status === EnvironmentStatus.Error
|
||||
) {
|
||||
return <>-</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
as={Link}
|
||||
props={{
|
||||
to: 'portainer.endpoints.endpoint.access',
|
||||
params: { id: environment.Id },
|
||||
}}
|
||||
color="link"
|
||||
icon={Users}
|
||||
>
|
||||
Manage access
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { createColumnHelper } from '@tanstack/react-table';
|
||||
|
||||
import { EnvironmentListItem } from '../types';
|
||||
|
||||
export const columnHelper = createColumnHelper<EnvironmentListItem>();
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { actions } from './actions';
|
||||
import { columnHelper } from './helper';
|
||||
import { name } from './name';
|
||||
import { type } from './type';
|
||||
import { url } from './url';
|
||||
|
||||
export const columns = [
|
||||
name,
|
||||
type,
|
||||
url,
|
||||
columnHelper.accessor('GroupName', {
|
||||
header: 'Group Name',
|
||||
}),
|
||||
actions,
|
||||
];
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { EnvironmentStatus } from '@/react/portainer/environments/types';
|
||||
|
||||
import { Link } from '@@/Link';
|
||||
|
||||
import { columnHelper } from './helper';
|
||||
|
||||
export const name = columnHelper.accessor('Name', {
|
||||
header: 'Name',
|
||||
cell: ({ getValue, row: { original: environment } }) => {
|
||||
const name = getValue();
|
||||
if (environment.Status === EnvironmentStatus.Provisioning) {
|
||||
return name;
|
||||
}
|
||||
|
||||
return (
|
||||
<Link to="portainer.endpoints.endpoint" params={{ id: environment.Id }}>
|
||||
{name}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { CellContext } from '@tanstack/react-table';
|
||||
|
||||
import { environmentTypeIcon } from '@/portainer/filters/filters';
|
||||
import {
|
||||
Environment,
|
||||
EnvironmentType,
|
||||
} from '@/react/portainer/environments/types';
|
||||
import { getPlatformTypeName } from '@/react/portainer/environments/utils';
|
||||
|
||||
import { Icon } from '@@/Icon';
|
||||
|
||||
import { columnHelper } from './helper';
|
||||
|
||||
export const type = columnHelper.accessor('Type', {
|
||||
header: 'Type',
|
||||
cell: Cell,
|
||||
});
|
||||
|
||||
function Cell({ getValue }: CellContext<Environment, EnvironmentType>) {
|
||||
const type = getValue();
|
||||
|
||||
return (
|
||||
<span className="flex items-center gap-1">
|
||||
<Icon icon={environmentTypeIcon(type)} />
|
||||
{getPlatformTypeName(type)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
import { CellContext } from '@tanstack/react-table';
|
||||
import { AlertCircle, HelpCircle, Settings } from 'lucide-react';
|
||||
|
||||
import {
|
||||
EnvironmentStatus,
|
||||
EnvironmentStatusMessage,
|
||||
EnvironmentType,
|
||||
} from '@/react/portainer/environments/types';
|
||||
import { notifySuccess } from '@/portainer/services/notifications';
|
||||
|
||||
import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
|
||||
import { Button } from '@@/buttons';
|
||||
|
||||
import { EnvironmentListItem } from '../types';
|
||||
import { useUpdateEnvironmentMutation } from '../../queries/useUpdateEnvironmentMutation';
|
||||
|
||||
import { columnHelper } from './helper';
|
||||
|
||||
export const url = columnHelper.accessor('URL', {
|
||||
header: 'URL',
|
||||
cell: Cell,
|
||||
});
|
||||
|
||||
function Cell({
|
||||
row: { original: environment },
|
||||
}: CellContext<EnvironmentListItem, string>) {
|
||||
const mutation = useUpdateEnvironmentMutation();
|
||||
|
||||
if (
|
||||
environment.Type !== EnvironmentType.EdgeAgentOnDocker &&
|
||||
environment.Status !== EnvironmentStatus.Provisioning
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
{environment.URL}
|
||||
{environment.StatusMessage.Summary &&
|
||||
environment.StatusMessage.Detail && (
|
||||
<div className="ml-2 inline-block">
|
||||
<span className="text-danger vertical-center inline-flex">
|
||||
<AlertCircle className="lucide" aria-hidden="true" />
|
||||
<span>{environment.StatusMessage.Summary}</span>
|
||||
</span>
|
||||
<TooltipWithChildren
|
||||
message={
|
||||
<div>
|
||||
{environment.StatusMessage.Detail}
|
||||
{environment.URL && (
|
||||
<div className="mt-2 text-right">
|
||||
<Button
|
||||
color="link"
|
||||
className="small !ml-0 p-0"
|
||||
onClick={handleDismissButton}
|
||||
>
|
||||
<span className="text-muted-light">
|
||||
Dismiss error (still visible in logs)
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
position="bottom"
|
||||
>
|
||||
<span className="vertical-center inline-flex text-base">
|
||||
<HelpCircle className="lucide ml-1" aria-hidden="true" />
|
||||
</span>
|
||||
</TooltipWithChildren>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (environment.Type === 4) {
|
||||
return <>-</>;
|
||||
}
|
||||
|
||||
if (environment.Status === 3) {
|
||||
const status = (
|
||||
<span className="vertical-center inline-flex text-base">
|
||||
<Settings className="lucide animate-spin-slow" />
|
||||
{environment.StatusMessage.Summary}
|
||||
</span>
|
||||
);
|
||||
if (!environment.StatusMessage.Detail) {
|
||||
return status;
|
||||
}
|
||||
return (
|
||||
<TooltipWithChildren
|
||||
message={environment.StatusMessage.Detail}
|
||||
position="bottom"
|
||||
>
|
||||
{status}
|
||||
</TooltipWithChildren>
|
||||
);
|
||||
}
|
||||
|
||||
return <>-</>;
|
||||
|
||||
function handleDismissButton() {
|
||||
mutation.mutate(
|
||||
{
|
||||
id: environment.Id,
|
||||
payload: {
|
||||
IsSetStatusMessage: true,
|
||||
StatusMessage: {} as EnvironmentStatusMessage,
|
||||
},
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
notifySuccess('Success', 'Error dismissed successfully');
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { ListView } from './ListView';
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { Environment } from '@/react/portainer/environments/types';
|
||||
|
||||
export type EnvironmentListItem = {
|
||||
GroupName?: string;
|
||||
} & Environment;
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { useMutation, useQueryClient } from 'react-query';
|
||||
|
||||
import { promiseSequence } from '@/portainer/helpers/promise-utils';
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import {
|
||||
mutationOptions,
|
||||
withError,
|
||||
withInvalidate,
|
||||
} from '@/react-tools/react-query';
|
||||
|
||||
import { buildUrl } from '../environment.service/utils';
|
||||
import { EnvironmentId } from '../types';
|
||||
|
||||
export function useDeleteEnvironmentsMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation(
|
||||
(environments: EnvironmentId[]) =>
|
||||
promiseSequence(
|
||||
environments.map(
|
||||
(environmentId) => () => deleteEnvironment(environmentId)
|
||||
)
|
||||
),
|
||||
mutationOptions(
|
||||
withError('Unable to delete environment(s)'),
|
||||
withInvalidate(queryClient, [['environments']])
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
async function deleteEnvironment(id: EnvironmentId) {
|
||||
try {
|
||||
await axios.delete(buildUrl(id));
|
||||
} catch (e) {
|
||||
throw parseAxiosError(e as Error, 'Unable to delete environment');
|
||||
}
|
||||
}
|
||||
|
|
@ -39,12 +39,18 @@ export function refetchIfAnyOffline(data?: GetEndpointsResponse) {
|
|||
|
||||
export function useEnvironmentList(
|
||||
{ page = 1, pageLimit = 100, sort, order, ...query }: Query = {},
|
||||
refetchInterval?:
|
||||
| number
|
||||
| false
|
||||
| ((data?: GetEndpointsResponse) => false | number),
|
||||
staleTime = 0,
|
||||
enabled = true
|
||||
{
|
||||
enabled,
|
||||
refetchInterval,
|
||||
staleTime,
|
||||
}: {
|
||||
refetchInterval?:
|
||||
| number
|
||||
| false
|
||||
| ((data?: GetEndpointsResponse) => false | number);
|
||||
staleTime?: number;
|
||||
enabled?: boolean;
|
||||
} = {}
|
||||
) {
|
||||
const { isLoading, data } = useQuery(
|
||||
[
|
||||
|
|
|
|||
|
|
@ -1,21 +1,23 @@
|
|||
import { useMutation, useQueryClient } from 'react-query';
|
||||
import { useQueryClient, useMutation } from 'react-query';
|
||||
|
||||
import { withError, withInvalidate } from '@/react-tools/react-query';
|
||||
import {
|
||||
EnvironmentId,
|
||||
EnvironmentStatusMessage,
|
||||
Environment,
|
||||
} from '@/react/portainer/environments/types';
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { TagId } from '@/portainer/tags/types';
|
||||
import { withError } from '@/react-tools/react-query';
|
||||
|
||||
import { EnvironmentGroupId } from '../environment-groups/types';
|
||||
import { buildUrl } from '../environment.service/utils';
|
||||
import { EnvironmentId, Environment } from '../types';
|
||||
|
||||
import { queryKeys } from './query-keys';
|
||||
|
||||
export function useUpdateEnvironmentMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation(updateEnvironment, {
|
||||
onSuccess(data, { id }) {
|
||||
queryClient.invalidateQueries(queryKeys.item(id));
|
||||
},
|
||||
...withInvalidate(queryClient, [queryKeys.base()]),
|
||||
...withError('Unable to update environment'),
|
||||
});
|
||||
}
|
||||
|
|
@ -38,6 +40,9 @@ export interface UpdatePayload {
|
|||
AzureApplicationID: string;
|
||||
AzureTenantID: string;
|
||||
AzureAuthenticationKey: string;
|
||||
|
||||
IsSetStatusMessage: boolean;
|
||||
StatusMessage: Partial<EnvironmentStatusMessage>;
|
||||
}
|
||||
|
||||
async function updateEnvironment({
|
||||
|
|
|
|||
|
|
@ -131,6 +131,10 @@ interface EndpointChangeWindow {
|
|||
StartTime: string;
|
||||
EndTime: string;
|
||||
}
|
||||
export interface EnvironmentStatusMessage {
|
||||
Summary: string;
|
||||
Detail: string;
|
||||
}
|
||||
|
||||
export type Environment = {
|
||||
Agent: { Version: string };
|
||||
|
|
@ -163,6 +167,10 @@ export type Environment = {
|
|||
|
||||
/** GitOps update change window restriction for stacks and apps */
|
||||
ChangeWindow: EndpointChangeWindow;
|
||||
/**
|
||||
* A message that describes the status. Should be included for Status Provisioning or Error.
|
||||
*/
|
||||
StatusMessage: EnvironmentStatusMessage;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ import { EdgeTypes, EnvironmentId } from '@/react/portainer/environments/types';
|
|||
export function useEnvironments(environmentsIds: Array<EnvironmentId>) {
|
||||
const environmentsQuery = useEnvironmentList(
|
||||
{ endpointIds: environmentsIds, types: EdgeTypes },
|
||||
undefined,
|
||||
undefined,
|
||||
environmentsIds.length > 0
|
||||
{
|
||||
enabled: environmentsIds.length > 0,
|
||||
}
|
||||
);
|
||||
|
||||
return environmentsQuery.environments;
|
||||
|
|
|
|||
|
|
@ -28,19 +28,21 @@ interface Props {
|
|||
export function WizardEndpointsList({ environmentIds }: Props) {
|
||||
const { environments } = useEnvironmentList(
|
||||
{ endpointIds: environmentIds },
|
||||
(environments) => {
|
||||
if (!environments) {
|
||||
return false;
|
||||
}
|
||||
{
|
||||
refetchInterval: (environments) => {
|
||||
if (!environments) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!environments.value.some(isUnassociatedEdgeEnvironment)) {
|
||||
return false;
|
||||
}
|
||||
if (!environments.value.some(isUnassociatedEdgeEnvironment)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return ENVIRONMENTS_POLLING_INTERVAL;
|
||||
},
|
||||
0,
|
||||
environmentIds.length > 0
|
||||
return ENVIRONMENTS_POLLING_INTERVAL;
|
||||
},
|
||||
|
||||
enabled: environmentIds.length > 0,
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -76,8 +76,10 @@ function useFetchLocalEnvironment() {
|
|||
pageLimit: 1,
|
||||
types: [EnvironmentType.Docker, EnvironmentType.KubernetesLocal],
|
||||
},
|
||||
false,
|
||||
Infinity
|
||||
{
|
||||
refetchInterval: false,
|
||||
staleTime: Infinity,
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue