mirror of https://github.com/portainer/portainer
refactor(namespace): migrate namespace access view to react [r8s-141] (#87)
Ali
2 weeks ago
committed by
GitHub
parent
8ed7cd80cb
commit
e9fc6d5598
@ -1,116 +0,0 @@
|
||||
<page-header
|
||||
ng-if="ctrl.state.viewReady"
|
||||
title="'Namespace access management'"
|
||||
breadcrumbs="[
|
||||
{ label:'Namespaces', link:'kubernetes.resourcePools' },
|
||||
{
|
||||
label:ctrl.pool.Namespace.Name,
|
||||
link: 'kubernetes.resourcePools.resourcePool',
|
||||
linkParams:{id: ctrl.pool.Namespace.Name}
|
||||
},
|
||||
'Access management'
|
||||
]"
|
||||
reload="true"
|
||||
>
|
||||
</page-header>
|
||||
|
||||
<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
|
||||
|
||||
<div ng-if="ctrl.state.viewReady">
|
||||
<div class="row" ng-if="ctrl.pool">
|
||||
<div class="col-sm-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="layers" title-text="Namespace"></rd-widget-header>
|
||||
<rd-widget-body>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>
|
||||
{{ ctrl.pool.Namespace.Name }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<rd-widget ng-if="ctrl.availableUsersAndTeams">
|
||||
<rd-widget-header icon="user-x" title-text="Create access"></rd-widget-header>
|
||||
<rd-widget-body>
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<div
|
||||
ng-if="!ctrl.isRBACEnabled"
|
||||
class="small mx-[15px] mb-6 flex gap-1 rounded-lg border border-solid border-warning-5 bg-warning-2 p-4 text-warning-8 th-highcontrast:bg-yellow-11 th-highcontrast:text-white th-dark:bg-yellow-11 th-dark:text-white"
|
||||
>
|
||||
<div class="mt-0.5">
|
||||
<pr-icon icon="'alert-triangle'" feather="true" class-name="'text-warning-7 th-dark:text-white th-highcontrast:text-white'"></pr-icon>
|
||||
</div>
|
||||
<div>
|
||||
<p> Your cluster does not have Kubernetes role-based access control (RBAC) enabled. </p>
|
||||
<p> This means you can't use Portainer RBAC functionality to regulate access to environment resources based on user roles. </p>
|
||||
<p class="mb-0">
|
||||
To enable RBAC, start the <a
|
||||
class="th-highcontrast:text-blue-4 th-dark:text-blue-7"
|
||||
href="https://kubernetes.io/docs/concepts/overview/components/#kube-apiserver"
|
||||
target="_blank"
|
||||
>API server</a
|
||||
> with the <code class="bg-gray-4 box-decoration-clone th-highcontrast:bg-black th-dark:bg-black">--authorization-mode</code> flag set to a
|
||||
comma-separated list that includes <code class="bg-gray-4 th-highcontrast:bg-black th-dark:bg-black">RBAC</code>, for example:
|
||||
<code class="bg-gray-4 box-decoration-clone th-highcontrast:bg-black th-dark:bg-black">kube-apiserver --authorization-mode=Example1,RBAC,Example2</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="col-sm-12 small text-warning">
|
||||
<p class="vertical-center">
|
||||
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
|
||||
Adding user access will require the affected user(s) to logout and login for the changes to be taken into account.
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 col-lg-2 control-label text-left" for="users-selector"> Select user(s) and/or team(s) </label>
|
||||
<div class="col-sm-9 col-lg-4">
|
||||
<span class="small text-muted" ng-if="ctrl.availableUsersAndTeams.length === 0">
|
||||
No user nor team access has been set on the environment. Head over to the
|
||||
<a ui-sref="portainer.endpoints">Environments view</a> to manage them.
|
||||
</span>
|
||||
<namespace-access-users-selector
|
||||
ng-if="ctrl.availableUsersAndTeams.length > 0"
|
||||
input-id="users-selector"
|
||||
value="ctrl.formValues.multiselectOutput"
|
||||
options="ctrl.availableUsersAndTeams"
|
||||
on-change="(ctrl.onUsersAndTeamsChange)"
|
||||
></namespace-access-users-selector>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- actions -->
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-sm vertical-center !ml-0"
|
||||
ng-disabled="ctrl.formValues.multiselectOutput.length === 0 || ctrl.actionInProgress"
|
||||
ng-click="ctrl.authorizeAccess()"
|
||||
button-spinner="ctrl.actionInProgress"
|
||||
>
|
||||
<span class="vertical-center" ng-hide="ctrl.state.actionInProgress"><pr-icon icon="'plus'" class="vertical-center"></pr-icon> Create access</span>
|
||||
<span ng-show="ctrl.state.actionInProgress">Creating access...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !actions -->
|
||||
</form>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<namespace-access-datatable ng-if="ctrl.authorizedUsersAndTeams" dataset="ctrl.authorizedUsersAndTeams" on-remove="(ctrl.unauthorizeAccess)"> </namespace-access-datatable>
|
||||
</div>
|
||||
@ -1,9 +0,0 @@
|
||||
angular.module('portainer.kubernetes').component('kubernetesResourcePoolAccessView', {
|
||||
templateUrl: './resourcePoolAccess.html',
|
||||
controller: 'KubernetesResourcePoolAccessController',
|
||||
controllerAs: 'ctrl',
|
||||
bindings: {
|
||||
$transition$: '<',
|
||||
endpoint: '<',
|
||||
},
|
||||
});
|
||||
@ -1,145 +0,0 @@
|
||||
import angular from 'angular';
|
||||
import _ from 'lodash-es';
|
||||
import { KubernetesPortainerConfigMapConfigName, KubernetesPortainerConfigMapNamespace, KubernetesPortainerConfigMapAccessKey } from 'Kubernetes/models/config-map/models';
|
||||
import { UserAccessViewModel, TeamAccessViewModel } from 'Portainer/models/access';
|
||||
import KubernetesConfigMapHelper from 'Kubernetes/helpers/configMapHelper';
|
||||
import { getIsRBACEnabled } from '@/react/kubernetes/cluster/getIsRBACEnabled';
|
||||
|
||||
class KubernetesResourcePoolAccessController {
|
||||
/* @ngInject */
|
||||
constructor($async, $state, $scope, Notifications, KubernetesResourcePoolService, KubernetesConfigMapService, GroupService, AccessService, EndpointProvider) {
|
||||
this.$async = $async;
|
||||
this.$state = $state;
|
||||
this.$scope = $scope;
|
||||
this.EndpointProvider = EndpointProvider;
|
||||
this.Notifications = Notifications;
|
||||
this.KubernetesResourcePoolService = KubernetesResourcePoolService;
|
||||
this.KubernetesConfigMapService = KubernetesConfigMapService;
|
||||
|
||||
this.GroupService = GroupService;
|
||||
this.AccessService = AccessService;
|
||||
|
||||
this.onInit = this.onInit.bind(this);
|
||||
this.authorizeAccessAsync = this.authorizeAccessAsync.bind(this);
|
||||
this.unauthorizeAccessAsync = this.unauthorizeAccessAsync.bind(this);
|
||||
this.onUsersAndTeamsChange = this.onUsersAndTeamsChange.bind(this);
|
||||
this.unauthorizeAccess = this.unauthorizeAccess.bind(this);
|
||||
}
|
||||
|
||||
initAccessConfigMap(configMap) {
|
||||
configMap.Name = KubernetesPortainerConfigMapConfigName;
|
||||
configMap.Namespace = KubernetesPortainerConfigMapNamespace;
|
||||
configMap.Data[KubernetesPortainerConfigMapAccessKey] = {};
|
||||
return configMap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Init
|
||||
*/
|
||||
async onInit() {
|
||||
const endpoint = this.endpoint;
|
||||
this.state = {
|
||||
actionInProgress: false,
|
||||
viewReady: false,
|
||||
};
|
||||
|
||||
this.formValues = {
|
||||
multiselectOutput: [],
|
||||
};
|
||||
|
||||
// default to true if error is thrown
|
||||
this.isRBACEnabled = true;
|
||||
|
||||
try {
|
||||
const name = this.$transition$.params().id;
|
||||
let [pool, configMap] = await Promise.all([
|
||||
this.KubernetesResourcePoolService.get(name),
|
||||
this.KubernetesConfigMapService.getAccess(KubernetesPortainerConfigMapNamespace, KubernetesPortainerConfigMapConfigName),
|
||||
]);
|
||||
this.isRBACEnabled = await getIsRBACEnabled(this.EndpointProvider.endpointID());
|
||||
const group = await this.GroupService.group(endpoint.GroupId);
|
||||
const roles = [];
|
||||
const endpointAccesses = await this.AccessService.accesses(endpoint, group, roles);
|
||||
this.pool = pool;
|
||||
if (configMap.Id === 0) {
|
||||
configMap = this.initAccessConfigMap(configMap);
|
||||
}
|
||||
configMap = KubernetesConfigMapHelper.parseJSONData(configMap);
|
||||
|
||||
this.authorizedUsersAndTeams = [];
|
||||
this.accessConfigMap = configMap;
|
||||
const poolAccesses = configMap.Data[KubernetesPortainerConfigMapAccessKey][name];
|
||||
if (poolAccesses) {
|
||||
this.authorizedUsersAndTeams = _.filter(endpointAccesses.authorizedUsersAndTeams, (item) => {
|
||||
if (item instanceof UserAccessViewModel && poolAccesses.UserAccessPolicies) {
|
||||
return poolAccesses.UserAccessPolicies[item.Id] !== undefined;
|
||||
} else if (item instanceof TeamAccessViewModel && poolAccesses.TeamAccessPolicies) {
|
||||
return poolAccesses.TeamAccessPolicies[item.Id] !== undefined;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
this.availableUsersAndTeams = _.without(endpointAccesses.authorizedUsersAndTeams, ...this.authorizedUsersAndTeams);
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to retrieve namespace information');
|
||||
} finally {
|
||||
this.state.viewReady = true;
|
||||
}
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
return this.$async(this.onInit);
|
||||
}
|
||||
|
||||
/**
|
||||
* Authorize access
|
||||
*/
|
||||
async authorizeAccessAsync() {
|
||||
try {
|
||||
this.state.actionInProgress = true;
|
||||
const newAccesses = _.concat(this.authorizedUsersAndTeams, this.formValues.multiselectOutput);
|
||||
const accessConfigMap = KubernetesConfigMapHelper.modifiyNamespaceAccesses(angular.copy(this.accessConfigMap), this.pool.Namespace.Name, newAccesses);
|
||||
await this.KubernetesConfigMapService.updateAccess(accessConfigMap);
|
||||
this.Notifications.success('Success', 'Access successfully created');
|
||||
this.$state.reload(this.$state.current);
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to create accesses');
|
||||
}
|
||||
}
|
||||
|
||||
onUsersAndTeamsChange(value) {
|
||||
this.$scope.$evalAsync(() => {
|
||||
this.formValues.multiselectOutput = value;
|
||||
});
|
||||
}
|
||||
|
||||
authorizeAccess() {
|
||||
return this.$async(this.authorizeAccessAsync);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
async unauthorizeAccessAsync(selectedItems) {
|
||||
try {
|
||||
this.state.actionInProgress = true;
|
||||
const newAccesses = _.without(this.authorizedUsersAndTeams, ...selectedItems);
|
||||
const accessConfigMap = KubernetesConfigMapHelper.modifiyNamespaceAccesses(angular.copy(this.accessConfigMap), this.pool.Namespace.Name, newAccesses);
|
||||
await this.KubernetesConfigMapService.updateAccess(accessConfigMap);
|
||||
this.Notifications.success('Success', 'Access successfully removed');
|
||||
this.$state.reload(this.$state.current);
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to remove accesses');
|
||||
} finally {
|
||||
this.state.actionInProgress = false;
|
||||
}
|
||||
}
|
||||
|
||||
unauthorizeAccess(selectedItems) {
|
||||
return this.$async(this.unauthorizeAccessAsync, selectedItems);
|
||||
}
|
||||
}
|
||||
|
||||
export default KubernetesResourcePoolAccessController;
|
||||
angular.module('portainer.kubernetes').controller('KubernetesResourcePoolAccessController', KubernetesResourcePoolAccessController);
|
||||
@ -1,13 +0,0 @@
|
||||
diff a/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/EnableMetricsInput.tsx b/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/EnableMetricsInput.tsx (rejected hunks)
|
||||
@@ -103,7 +103,10 @@ export function EnableMetricsInput({ value, error, environmentId }: Props) {
|
||||
<TextTip color="red" icon={XCircle}>
|
||||
Unable to reach metrics API. You can enable the metrics-server
|
||||
addon in the{' '}
|
||||
- <Link to="kubernetes.cluster">Cluster Details view</Link>.
|
||||
+ <Link to="kubernetes.cluster" data-cy="cluster-details-view-link">
|
||||
+ Cluster Details view
|
||||
+ </Link>
|
||||
+ .
|
||||
</TextTip>
|
||||
)}
|
||||
{metricsFound === true && (
|
||||
@ -1,2 +1,11 @@
|
||||
export const configurationOwnerUsernameLabel =
|
||||
export const ConfigurationOwnerUsernameLabel =
|
||||
'io.portainer.kubernetes.configuration.owner';
|
||||
|
||||
export const ConfigurationOwnerIdLabel =
|
||||
'io.portainer.kubernetes.configuration.owner.id';
|
||||
|
||||
export const PortainerNamespaceAccessesConfigMap = {
|
||||
namespace: 'portainer',
|
||||
configMapName: 'portainer-config',
|
||||
accessKey: 'NamespaceAccessPolicies',
|
||||
};
|
||||
|
||||
@ -0,0 +1,63 @@
|
||||
import { ConfigMap, ConfigMapList } from 'kubernetes-types/core/v1';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import axios from '@/portainer/services/axios';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
import { error as notifyError } from '@/portainer/services/notifications';
|
||||
|
||||
import { parseKubernetesAxiosError } from '../../axiosError';
|
||||
|
||||
export const configMapQueryKeys = {
|
||||
configMaps: (environmentId: EnvironmentId, namespace?: string) => [
|
||||
'environments',
|
||||
environmentId,
|
||||
'kubernetes',
|
||||
'configmaps',
|
||||
'namespaces',
|
||||
namespace,
|
||||
],
|
||||
};
|
||||
|
||||
/**
|
||||
* returns a usequery hook for the list of configmaps from the kubernetes API
|
||||
*/
|
||||
export function useK8sConfigMaps(
|
||||
environmentId: EnvironmentId,
|
||||
namespace?: string
|
||||
) {
|
||||
return useQuery(
|
||||
configMapQueryKeys.configMaps(environmentId, namespace),
|
||||
() => (namespace ? getConfigMaps(environmentId, namespace) : []),
|
||||
{
|
||||
onError: (err) => {
|
||||
notifyError(
|
||||
'Failure',
|
||||
err as Error,
|
||||
`Unable to get ConfigMaps in namespace '${namespace}'`
|
||||
);
|
||||
},
|
||||
enabled: !!namespace,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// get all configmaps for a namespace
|
||||
async function getConfigMaps(environmentId: EnvironmentId, namespace: string) {
|
||||
try {
|
||||
const { data } = await axios.get<ConfigMapList>(
|
||||
buildUrl(environmentId, namespace)
|
||||
);
|
||||
const configMapsWithKind: ConfigMap[] = data.items.map((configmap) => ({
|
||||
...configmap,
|
||||
kind: 'ConfigMap',
|
||||
}));
|
||||
return configMapsWithKind;
|
||||
} catch (e) {
|
||||
throw parseKubernetesAxiosError(e, 'Unable to retrieve ConfigMaps');
|
||||
}
|
||||
}
|
||||
|
||||
function buildUrl(environmentId: number, namespace: string, name?: string) {
|
||||
const url = `/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/configmaps`;
|
||||
return name ? `${url}/${name}` : url;
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
import { Secret, SecretList } from 'kubernetes-types/core/v1';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import axios from '@/portainer/services/axios';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
import { error as notifyError } from '@/portainer/services/notifications';
|
||||
|
||||
import { parseKubernetesAxiosError } from '../../axiosError';
|
||||
|
||||
export const secretQueryKeys = {
|
||||
secrets: (environmentId: EnvironmentId, namespace?: string) => [
|
||||
'environments',
|
||||
environmentId,
|
||||
'kubernetes',
|
||||
'secrets',
|
||||
'namespaces',
|
||||
namespace,
|
||||
],
|
||||
};
|
||||
|
||||
/**
|
||||
* returns a usequery hook for the list of secrets from the kubernetes API
|
||||
*/
|
||||
export function useK8sSecrets(
|
||||
environmentId: EnvironmentId,
|
||||
namespace?: string
|
||||
) {
|
||||
return useQuery(
|
||||
secretQueryKeys.secrets(environmentId, namespace),
|
||||
() => (namespace ? getSecrets(environmentId, namespace) : []),
|
||||
{
|
||||
onError: (err) => {
|
||||
notifyError(
|
||||
'Failure',
|
||||
err as Error,
|
||||
`Unable to get secrets in namespace '${namespace}'`
|
||||
);
|
||||
},
|
||||
enabled: !!namespace,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// get all secrets for a namespace
|
||||
async function getSecrets(environmentId: EnvironmentId, namespace: string) {
|
||||
try {
|
||||
const { data } = await axios.get<SecretList>(
|
||||
buildUrl(environmentId, namespace)
|
||||
);
|
||||
const secretsWithKind: Secret[] = data.items.map((secret) => ({
|
||||
...secret,
|
||||
kind: 'Secret',
|
||||
}));
|
||||
return secretsWithKind;
|
||||
} catch (e) {
|
||||
throw parseKubernetesAxiosError(e, 'Unable to retrieve secrets');
|
||||
}
|
||||
}
|
||||
|
||||
function buildUrl(environmentId: number, namespace: string, name?: string) {
|
||||
const url = `/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/secrets`;
|
||||
return name ? `${url}/${name}` : url;
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { ConfigMap } from 'kubernetes-types/core/v1';
|
||||
|
||||
import axios from '@/portainer/services/axios';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
import { withInvalidate } from '@/react-tools/react-query';
|
||||
|
||||
import { parseKubernetesAxiosError } from '../../axiosError';
|
||||
|
||||
import { configMapQueryKeys } from './useK8sConfigMaps';
|
||||
|
||||
/**
|
||||
* useUpdateK8sConfigMapMutation returns a mutation hook for updating a Kubernetes ConfigMap using the Kubernetes proxy API.
|
||||
*/
|
||||
export function useUpdateK8sConfigMapMutation(
|
||||
environmentId: EnvironmentId,
|
||||
namespace: string
|
||||
) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({
|
||||
data,
|
||||
configMapName,
|
||||
}: {
|
||||
data: ConfigMap;
|
||||
configMapName: string;
|
||||
}) => updateConfigMap(environmentId, namespace, configMapName, data),
|
||||
...withInvalidate(queryClient, [
|
||||
configMapQueryKeys.configMaps(environmentId, namespace),
|
||||
]),
|
||||
// handle success notifications in the calling component
|
||||
});
|
||||
}
|
||||
|
||||
async function updateConfigMap(
|
||||
environmentId: EnvironmentId,
|
||||
namespace: string,
|
||||
configMap: string,
|
||||
data: ConfigMap
|
||||
) {
|
||||
try {
|
||||
return await axios.put(
|
||||
`/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/configmaps/${configMap}`,
|
||||
data
|
||||
);
|
||||
} catch (e) {
|
||||
throw parseKubernetesAxiosError(
|
||||
e,
|
||||
`Unable to update ConfigMap '${configMap}'`
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,157 +0,0 @@
|
||||
import { Secret, SecretList } from 'kubernetes-types/core/v1';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
|
||||
import { queryClient, withError } from '@/react-tools/react-query';
|
||||
import axios from '@/portainer/services/axios';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
import {
|
||||
error as notifyError,
|
||||
notifySuccess,
|
||||
} from '@/portainer/services/notifications';
|
||||
import { isFulfilled, isRejected } from '@/portainer/helpers/promise-utils';
|
||||
import { pluralize } from '@/portainer/helpers/strings';
|
||||
|
||||
import { parseKubernetesAxiosError } from '../axiosError';
|
||||
|
||||
export const secretQueryKeys = {
|
||||
secrets: (environmentId: EnvironmentId, namespace?: string) => [
|
||||
'environments',
|
||||
environmentId,
|
||||
'kubernetes',
|
||||
'secrets',
|
||||
'namespaces',
|
||||
namespace,
|
||||
],
|
||||
secretsForCluster: (environmentId: EnvironmentId) => [
|
||||
'environments',
|
||||
environmentId,
|
||||
'kubernetes',
|
||||
'secrets',
|
||||
],
|
||||
};
|
||||
|
||||
// returns a usequery hook for the list of secrets from the kubernetes API
|
||||
export function useSecrets(environmentId: EnvironmentId, namespace?: string) {
|
||||
return useQuery(
|
||||
secretQueryKeys.secrets(environmentId, namespace),
|
||||
() => (namespace ? getSecrets(environmentId, namespace) : []),
|
||||
{
|
||||
onError: (err) => {
|
||||
notifyError(
|
||||
'Failure',
|
||||
err as Error,
|
||||
`Unable to get secrets in namespace '${namespace}'`
|
||||
);
|
||||
},
|
||||
enabled: !!namespace,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function useSecretsForCluster(
|
||||
environmentId: EnvironmentId,
|
||||
namespaces?: string[],
|
||||
options?: { autoRefreshRate?: number }
|
||||
) {
|
||||
return useQuery(
|
||||
secretQueryKeys.secretsForCluster(environmentId),
|
||||
() => namespaces && getSecretsForCluster(environmentId, namespaces),
|
||||
{
|
||||
...withError('Unable to retrieve secrets for cluster'),
|
||||
enabled: !!namespaces?.length,
|
||||
refetchInterval() {
|
||||
return options?.autoRefreshRate ?? false;
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function useMutationDeleteSecrets(environmentId: EnvironmentId) {
|
||||
return useMutation(
|
||||
async (secrets: { namespace: string; name: string }[]) => {
|
||||
const promises = await Promise.allSettled(
|
||||
secrets.map(({ namespace, name }) =>
|
||||
deleteSecret(environmentId, namespace, name)
|
||||
)
|
||||
);
|
||||
const successfulSecrets = promises
|
||||
.filter(isFulfilled)
|
||||
.map((_, index) => secrets[index].name);
|
||||
const failedSecrets = promises
|
||||
.filter(isRejected)
|
||||
.map(({ reason }, index) => ({
|
||||
name: secrets[index].name,
|
||||
reason,
|
||||
}));
|
||||
return { failedSecrets, successfulSecrets };
|
||||
},
|
||||
{
|
||||
...withError('Unable to remove secrets'),
|
||||
onSuccess: ({ failedSecrets, successfulSecrets }) => {
|
||||
queryClient.invalidateQueries(
|
||||
secretQueryKeys.secretsForCluster(environmentId)
|
||||
);
|
||||
// show an error message for each secret that failed to delete
|
||||
failedSecrets.forEach(({ name, reason }) => {
|
||||
notifyError(
|
||||
`Failed to remove secret '${name}'`,
|
||||
new Error(reason.message) as Error
|
||||
);
|
||||
});
|
||||
// show one summary message for all successful deletes
|
||||
if (successfulSecrets.length) {
|
||||
notifySuccess(
|
||||
`${pluralize(
|
||||
successfulSecrets.length,
|
||||
'Secret'
|
||||
)} successfully removed`,
|
||||
successfulSecrets.join(', ')
|
||||
);
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async function getSecretsForCluster(
|
||||
environmentId: EnvironmentId,
|
||||
namespaces: string[]
|
||||
) {
|
||||
const secrets = await Promise.all(
|
||||
namespaces.map((namespace) => getSecrets(environmentId, namespace))
|
||||
);
|
||||
return secrets.flat();
|
||||
}
|
||||
|
||||
// get all secrets for a namespace
|
||||
async function getSecrets(environmentId: EnvironmentId, namespace: string) {
|
||||
try {
|
||||
const { data } = await axios.get<SecretList>(
|
||||
buildUrl(environmentId, namespace)
|
||||
);
|
||||
const secretsWithKind: Secret[] = data.items.map((secret) => ({
|
||||
...secret,
|
||||
kind: 'Secret',
|
||||
}));
|
||||
return secretsWithKind;
|
||||
} catch (e) {
|
||||
throw parseKubernetesAxiosError(e, 'Unable to retrieve secrets');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteSecret(
|
||||
environmentId: EnvironmentId,
|
||||
namespace: string,
|
||||
name: string
|
||||
) {
|
||||
try {
|
||||
await axios.delete(buildUrl(environmentId, namespace, name));
|
||||
} catch (e) {
|
||||
throw parseKubernetesAxiosError(e, 'Unable to remove secret');
|
||||
}
|
||||
}
|
||||
|
||||
function buildUrl(environmentId: number, namespace: string, name?: string) {
|
||||
const url = `/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/secrets`;
|
||||
return name ? `${url}/${name}` : url;
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
import { UserX } from 'lucide-react';
|
||||
|
||||
import { name } from '@/react/portainer/access-control/AccessManagement/AccessDatatable/columns/name';
|
||||
import { type } from '@/react/portainer/access-control/AccessManagement/AccessDatatable/columns/type';
|
||||
import { Access } from '@/react/portainer/access-control/AccessManagement/AccessDatatable/types';
|
||||
import { RemoveAccessButton } from '@/react/portainer/access-control/AccessManagement/AccessDatatable/RemoveAccessButton';
|
||||
|
||||
import { createPersistedStore } from '@@/datatables/types';
|
||||
import { useTableState } from '@@/datatables/useTableState';
|
||||
import { Datatable } from '@@/datatables';
|
||||
|
||||
const tableKey = 'kubernetes_resourcepool_access';
|
||||
const columns = [name, type];
|
||||
const store = createPersistedStore(tableKey);
|
||||
|
||||
export function NamespaceAccessDatatable({
|
||||
dataset,
|
||||
onRemove,
|
||||
}: {
|
||||
dataset?: Array<Access>;
|
||||
onRemove(items: Array<Access>): void;
|
||||
}) {
|
||||
const tableState = useTableState(store, tableKey);
|
||||
|
||||
return (
|
||||
<Datatable
|
||||
data-cy="kube-namespace-access-datatable"
|
||||
title="Namespace Access"
|
||||
titleIcon={UserX}
|
||||
dataset={dataset || []}
|
||||
isLoading={!dataset}
|
||||
columns={columns}
|
||||
settingsManager={tableState}
|
||||
renderTableActions={(selectedItems) => (
|
||||
<RemoveAccessButton items={selectedItems} onClick={onRemove} />
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,107 @@
|
||||
import { UserX } from 'lucide-react';
|
||||
import { useMemo } from 'react';
|
||||
import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
|
||||
|
||||
import { useUsers } from '@/portainer/users/queries';
|
||||
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
|
||||
import { useTeams } from '@/react/portainer/users/teams/queries';
|
||||
import { PortainerNamespaceAccessesConfigMap } from '@/react/kubernetes/configs/constants';
|
||||
import { useConfigMap } from '@/react/kubernetes/configs/queries/useConfigMap';
|
||||
import { useUpdateK8sConfigMapMutation } from '@/react/kubernetes/configs/queries/useUpdateK8sConfigMapMutation';
|
||||
import { notifyError, notifySuccess } from '@/portainer/services/notifications';
|
||||
|
||||
import { createPersistedStore } from '@@/datatables/types';
|
||||
import { useTableState } from '@@/datatables/useTableState';
|
||||
import { Datatable } from '@@/datatables';
|
||||
import { DeleteButton } from '@@/buttons/DeleteButton';
|
||||
|
||||
import { parseNamespaceAccesses } from '../parseNamespaceAccesses';
|
||||
import { NamespaceAccess } from '../types';
|
||||
import { createUnauthorizeAccessConfigMapPayload } from '../createAccessConfigMapPayload';
|
||||
|
||||
import { entityType } from './columns/type';
|
||||
import { name } from './columns/name';
|
||||
|
||||
const tableKey = 'kubernetes_resourcepool_access';
|
||||
const columns = [name, entityType];
|
||||
const store = createPersistedStore(tableKey);
|
||||
|
||||
export function AccessDatatable() {
|
||||
const {
|
||||
params: { id: namespaceName },
|
||||
} = useCurrentStateAndParams();
|
||||
const router = useRouter();
|
||||
const environmentId = useEnvironmentId();
|
||||
const tableState = useTableState(store, tableKey);
|
||||
const usersQuery = useUsers(false, environmentId);
|
||||
const teamsQuery = useTeams(false, environmentId);
|
||||
const accessConfigMapQuery = useConfigMap(
|
||||
environmentId,
|
||||
PortainerNamespaceAccessesConfigMap.namespace,
|
||||
PortainerNamespaceAccessesConfigMap.configMapName
|
||||
);
|
||||
const namespaceAccesses = useMemo(
|
||||
() =>
|
||||
parseNamespaceAccesses(
|
||||
accessConfigMapQuery.data ?? null,
|
||||
namespaceName,
|
||||
usersQuery.data ?? [],
|
||||
teamsQuery.data ?? []
|
||||
),
|
||||
[accessConfigMapQuery.data, usersQuery.data, teamsQuery.data, namespaceName]
|
||||
);
|
||||
const configMap = accessConfigMapQuery.data;
|
||||
|
||||
const updateConfigMapMutation = useUpdateK8sConfigMapMutation(
|
||||
environmentId,
|
||||
PortainerNamespaceAccessesConfigMap.namespace
|
||||
);
|
||||
|
||||
return (
|
||||
<Datatable
|
||||
data-cy="kube-namespace-access-datatable"
|
||||
title="Namespace access"
|
||||
titleIcon={UserX}
|
||||
dataset={namespaceAccesses}
|
||||
isLoading={accessConfigMapQuery.isLoading}
|
||||
columns={columns}
|
||||
settingsManager={tableState}
|
||||
// the user id and team id can be the same, so add the type to the id
|
||||
getRowId={(row) => `${row.type}-${row.id}`}
|
||||
renderTableActions={(selectedItems) => (
|
||||
<DeleteButton
|
||||
isLoading={updateConfigMapMutation.isLoading}
|
||||
loadingText="Removing..."
|
||||
confirmMessage="Are you sure you want to unauthorized the selected users or teams?"
|
||||
onConfirmed={() => handleUpdate(selectedItems)}
|
||||
disabled={
|
||||
selectedItems.length === 0 ||
|
||||
usersQuery.isLoading ||
|
||||
teamsQuery.isLoading ||
|
||||
accessConfigMapQuery.isLoading
|
||||
}
|
||||
data-cy="remove-access-button"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
async function handleUpdate(selectedItemsToRemove: Array<NamespaceAccess>) {
|
||||
try {
|
||||
const configMapPayload = createUnauthorizeAccessConfigMapPayload(
|
||||
namespaceAccesses,
|
||||
selectedItemsToRemove,
|
||||
namespaceName,
|
||||
configMap
|
||||
);
|
||||
await updateConfigMapMutation.mutateAsync({
|
||||
data: configMapPayload,
|
||||
configMapName: PortainerNamespaceAccessesConfigMap.configMapName,
|
||||
});
|
||||
notifySuccess('Success', 'Namespace access updated');
|
||||
router.stateService.reload();
|
||||
} catch (error) {
|
||||
notifyError('Failed to update namespace access', error as Error);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
import { createColumnHelper } from '@tanstack/react-table';
|
||||
|
||||
import { NamespaceAccess } from '../../types';
|
||||
|
||||
export const helper = createColumnHelper<NamespaceAccess>();
|
||||
@ -0,0 +1,5 @@
|
||||
import { helper } from './helper';
|
||||
|
||||
export const name = helper.accessor('name', {
|
||||
header: 'Name',
|
||||
});
|
||||
@ -0,0 +1,5 @@
|
||||
import { helper } from './helper';
|
||||
|
||||
export const entityType = helper.accessor('type', {
|
||||
header: 'Type',
|
||||
});
|
||||
@ -0,0 +1,39 @@
|
||||
import { useCurrentStateAndParams } from '@uirouter/react';
|
||||
|
||||
import { useUnauthorizedRedirect } from '@/react/hooks/useUnauthorizedRedirect';
|
||||
|
||||
import { PageHeader } from '@@/PageHeader';
|
||||
|
||||
import { NamespaceDetailsWidget } from './NamespaceDetailsWidget';
|
||||
import { AccessDatatable } from './AccessDatatable/AccessDatatable';
|
||||
import { CreateAccessWidget } from './CreateAccessWidget/CreateAccessWidget';
|
||||
|
||||
export function AccessView() {
|
||||
const {
|
||||
params: { id: namespaceName },
|
||||
} = useCurrentStateAndParams();
|
||||
useUnauthorizedRedirect(
|
||||
{ authorizations: ['K8sResourcePoolDetailsW'] },
|
||||
{ to: 'kubernetes.resourcePools' }
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="Namespace access management"
|
||||
breadcrumbs={[
|
||||
{ label: 'Namespaces', link: 'kubernetes.resourcePools' },
|
||||
{
|
||||
label: namespaceName,
|
||||
link: 'kubernetes.resourcePools.resourcePool',
|
||||
linkParams: { id: namespaceName },
|
||||
},
|
||||
'Access management',
|
||||
]}
|
||||
reload
|
||||
/>
|
||||
<NamespaceDetailsWidget />
|
||||
<CreateAccessWidget />
|
||||
<AccessDatatable />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,199 @@
|
||||
import { Form, FormikProps } from 'formik';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { useEnvironment } from '@/react/portainer/environments/queries';
|
||||
import { useGroup } from '@/react/portainer/environments/environment-groups/queries';
|
||||
import { useUsers } from '@/portainer/users/queries';
|
||||
import { useTeams } from '@/react/portainer/users/teams/queries/useTeams';
|
||||
import { User } from '@/portainer/users/types';
|
||||
import { Environment } from '@/react/portainer/environments/types';
|
||||
import { Team } from '@/react/portainer/users/teams/types';
|
||||
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
|
||||
import { EnvironmentGroup } from '@/react/portainer/environments/environment-groups/types';
|
||||
import { useIsEdgeAdmin } from '@/react/hooks/useUser';
|
||||
|
||||
import { LoadingButton } from '@@/buttons';
|
||||
import { FormControl } from '@@/form-components/FormControl';
|
||||
import { Link } from '@@/Link';
|
||||
|
||||
import { NamespaceAccessUsersSelector } from '../NamespaceAccessUsersSelector';
|
||||
import { EnvironmentAccess, NamespaceAccess } from '../types';
|
||||
|
||||
import { CreateAccessValues } from './types';
|
||||
|
||||
export function CreateAccessInnerForm({
|
||||
values,
|
||||
handleSubmit,
|
||||
setFieldValue,
|
||||
isSubmitting,
|
||||
isValid,
|
||||
dirty,
|
||||
namespaceAccessesGranted,
|
||||
}: FormikProps<CreateAccessValues> & {
|
||||
namespaceAccessesGranted: NamespaceAccess[];
|
||||
}) {
|
||||
const environmentId = useEnvironmentId();
|
||||
const environmentQuery = useEnvironment(environmentId);
|
||||
const groupQuery = useGroup(environmentQuery.data?.GroupId);
|
||||
const usersQuery = useUsers(false, environmentId);
|
||||
const teamsQuery = useTeams();
|
||||
const availableTeamOrUserOptions: EnvironmentAccess[] =
|
||||
useAvailableTeamOrUserOptions(
|
||||
values.selectedUsersAndTeams,
|
||||
namespaceAccessesGranted,
|
||||
environmentQuery.data,
|
||||
groupQuery.data,
|
||||
usersQuery.data,
|
||||
teamsQuery.data
|
||||
);
|
||||
const isAdminQuery = useIsEdgeAdmin();
|
||||
return (
|
||||
<Form className="form-horizontal" onSubmit={handleSubmit} noValidate>
|
||||
<FormControl label="Select user(s) and/or team(s)">
|
||||
{availableTeamOrUserOptions.length > 0 ||
|
||||
values.selectedUsersAndTeams.length > 0 ? (
|
||||
<NamespaceAccessUsersSelector
|
||||
inputId="users-selector"
|
||||
options={availableTeamOrUserOptions}
|
||||
onChange={(opts) => setFieldValue('selectedUsersAndTeams', opts)}
|
||||
value={values.selectedUsersAndTeams}
|
||||
dataCy="namespaceAccess-usersSelector"
|
||||
/>
|
||||
) : (
|
||||
<span className="small text-muted pt-2">
|
||||
No user or team access has been set on the environment.
|
||||
{isAdminQuery.isAdmin && (
|
||||
<>
|
||||
{' '}
|
||||
Head over to the{' '}
|
||||
<Link
|
||||
to="portainer.endpoints"
|
||||
data-cy="namespaceAccess-environmentsLink"
|
||||
>
|
||||
Environments view
|
||||
</Link>{' '}
|
||||
to manage them.
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</FormControl>
|
||||
<div className="form-group mt-5">
|
||||
<div className="col-sm-12">
|
||||
<LoadingButton
|
||||
disabled={!isValid || !dirty}
|
||||
data-cy="namespaceAccess-createAccessButton"
|
||||
isLoading={isSubmitting}
|
||||
loadingText="Creating access..."
|
||||
icon={Plus}
|
||||
className="!ml-0"
|
||||
>
|
||||
Create access
|
||||
</LoadingButton>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the team and user options that can be added to the namespace, excluding the ones that already have access.
|
||||
*/
|
||||
function useAvailableTeamOrUserOptions(
|
||||
selectedAccesses: EnvironmentAccess[],
|
||||
namespaceAccessesGranted: NamespaceAccess[],
|
||||
environment?: Environment,
|
||||
group?: EnvironmentGroup,
|
||||
users?: User[],
|
||||
teams?: Team[]
|
||||
) {
|
||||
return useMemo(() => {
|
||||
// get unique users and teams from environment accesses (the keys are the IDs)
|
||||
const environmentAccessPolicies = environment?.UserAccessPolicies ?? {};
|
||||
const environmentTeamAccessPolicies = environment?.TeamAccessPolicies ?? {};
|
||||
const environmentGroupAccessPolicies = group?.UserAccessPolicies ?? {};
|
||||
const environmentGroupTeamAccessPolicies = group?.TeamAccessPolicies ?? {};
|
||||
|
||||
// get all users that have access to the environment
|
||||
const userAccessPolicies = {
|
||||
...environmentAccessPolicies,
|
||||
...environmentGroupAccessPolicies,
|
||||
};
|
||||
const uniqueUserIds = new Set(Object.keys(userAccessPolicies));
|
||||
const userAccessOptions: EnvironmentAccess[] = Array.from(uniqueUserIds)
|
||||
.map((id) => {
|
||||
const userId = parseInt(id, 10);
|
||||
const user = users?.find((u) => u.Id === userId);
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
// role from the userAccessPolicies is used by default, if not found, role from the environmentTeamAccessPolicies is used
|
||||
const userAccessPolicy =
|
||||
environmentAccessPolicies[userId] ??
|
||||
environmentGroupAccessPolicies[userId];
|
||||
const userAccess: EnvironmentAccess = {
|
||||
id: user?.Id,
|
||||
name: user?.Username,
|
||||
type: 'user',
|
||||
role: {
|
||||
name: 'Standard user',
|
||||
id: userAccessPolicy?.RoleId,
|
||||
},
|
||||
};
|
||||
return userAccess;
|
||||
})
|
||||
.filter((u) => u !== null);
|
||||
|
||||
// get all teams that have access to the environment
|
||||
const teamAccessPolicies = {
|
||||
...environmentTeamAccessPolicies,
|
||||
...environmentGroupTeamAccessPolicies,
|
||||
};
|
||||
const uniqueTeamIds = new Set(Object.keys(teamAccessPolicies));
|
||||
const teamAccessOptions: EnvironmentAccess[] = Array.from(uniqueTeamIds)
|
||||
.map((id) => {
|
||||
const teamId = parseInt(id, 10);
|
||||
const team = teams?.find((t) => t.Id === teamId);
|
||||
if (!team) {
|
||||
return null;
|
||||
}
|
||||
const teamAccessPolicy =
|
||||
environmentTeamAccessPolicies[teamId] ??
|
||||
environmentGroupTeamAccessPolicies[teamId];
|
||||
const teamAccess: EnvironmentAccess = {
|
||||
id: team?.Id,
|
||||
name: team?.Name,
|
||||
type: 'team',
|
||||
role: {
|
||||
name: 'Standard user',
|
||||
id: teamAccessPolicy?.RoleId,
|
||||
},
|
||||
};
|
||||
return teamAccess;
|
||||
})
|
||||
.filter((t) => t !== null);
|
||||
|
||||
// filter out users and teams that already have access to the namespace
|
||||
const userAndTeamEnvironmentAccesses = [
|
||||
...userAccessOptions,
|
||||
...teamAccessOptions,
|
||||
];
|
||||
const filteredAccessOptions = userAndTeamEnvironmentAccesses.filter(
|
||||
(t) =>
|
||||
!selectedAccesses.some((e) => e.id === t.id && e.type === t.type) &&
|
||||
!namespaceAccessesGranted.some(
|
||||
(e) => e.id === t.id && e.type === t.type
|
||||
)
|
||||
);
|
||||
|
||||
return filteredAccessOptions;
|
||||
}, [
|
||||
namespaceAccessesGranted,
|
||||
selectedAccesses,
|
||||
environment,
|
||||
group,
|
||||
users,
|
||||
teams,
|
||||
]);
|
||||
}
|
||||
@ -0,0 +1,119 @@
|
||||
import { UserPlusIcon } from 'lucide-react';
|
||||
import { Formik } from 'formik';
|
||||
import { useMemo } from 'react';
|
||||
import { useCurrentStateAndParams } from '@uirouter/react';
|
||||
|
||||
import { useIsRBACEnabled } from '@/react/kubernetes/cluster/useIsRBACEnabled';
|
||||
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
|
||||
import { RBACAlert } from '@/react/kubernetes/cluster/ConfigureView/ConfigureForm/RBACAlert';
|
||||
import { useUsers } from '@/portainer/users/queries';
|
||||
import { PortainerNamespaceAccessesConfigMap } from '@/react/kubernetes/configs/constants';
|
||||
import { useConfigMap } from '@/react/kubernetes/configs/queries/useConfigMap';
|
||||
import { useTeams } from '@/react/portainer/users/teams/queries';
|
||||
import { useUpdateK8sConfigMapMutation } from '@/react/kubernetes/configs/queries/useUpdateK8sConfigMapMutation';
|
||||
import { notifyError, notifySuccess } from '@/portainer/services/notifications';
|
||||
|
||||
import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
|
||||
import { TextTip } from '@@/Tip/TextTip';
|
||||
|
||||
import { EnvironmentAccess } from '../types';
|
||||
import { createAuthorizeAccessConfigMapPayload } from '../createAccessConfigMapPayload';
|
||||
import { parseNamespaceAccesses } from '../parseNamespaceAccesses';
|
||||
|
||||
import { CreateAccessValues } from './types';
|
||||
import { CreateAccessInnerForm } from './CreateAccessInnerForm';
|
||||
import { validationSchema } from './createAccess.validation';
|
||||
|
||||
export function CreateAccessWidget() {
|
||||
const {
|
||||
params: { id: namespaceName },
|
||||
} = useCurrentStateAndParams();
|
||||
const environmentId = useEnvironmentId();
|
||||
const isRBACEnabledQuery = useIsRBACEnabled(environmentId);
|
||||
const initialValues: {
|
||||
selectedUsersAndTeams: EnvironmentAccess[];
|
||||
} = {
|
||||
selectedUsersAndTeams: [],
|
||||
};
|
||||
const usersQuery = useUsers(false, environmentId);
|
||||
const teamsQuery = useTeams(false, environmentId);
|
||||
const accessConfigMapQuery = useConfigMap(
|
||||
environmentId,
|
||||
PortainerNamespaceAccessesConfigMap.namespace,
|
||||
PortainerNamespaceAccessesConfigMap.configMapName
|
||||
);
|
||||
const namespaceAccesses = useMemo(
|
||||
() =>
|
||||
parseNamespaceAccesses(
|
||||
accessConfigMapQuery.data ?? null,
|
||||
namespaceName,
|
||||
usersQuery.data ?? [],
|
||||
teamsQuery.data ?? []
|
||||
),
|
||||
[accessConfigMapQuery.data, usersQuery.data, teamsQuery.data, namespaceName]
|
||||
);
|
||||
const configMap = accessConfigMapQuery.data;
|
||||
|
||||
const updateConfigMapMutation = useUpdateK8sConfigMapMutation(
|
||||
environmentId,
|
||||
PortainerNamespaceAccessesConfigMap.namespace
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-sm-12">
|
||||
<Widget aria-label="Create access">
|
||||
<WidgetTitle icon={UserPlusIcon} title="Create access" />
|
||||
<WidgetBody>
|
||||
{isRBACEnabledQuery.data === false && <RBACAlert />}
|
||||
<TextTip className="mb-2" childrenWrapperClassName="text-warning">
|
||||
Adding user access will require the affected user(s) to logout and
|
||||
login for the changes to be taken into account.
|
||||
</TextTip>
|
||||
{isRBACEnabledQuery.data !== false && (
|
||||
<Formik<CreateAccessValues>
|
||||
initialValues={initialValues}
|
||||
enableReinitialize
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={onSubmit}
|
||||
validateOnMount
|
||||
>
|
||||
{(formikProps) => (
|
||||
<CreateAccessInnerForm
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...formikProps}
|
||||
namespaceAccessesGranted={namespaceAccesses}
|
||||
/>
|
||||
)}
|
||||
</Formik>
|
||||
)}
|
||||
</WidgetBody>
|
||||
</Widget>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
async function onSubmit(
|
||||
values: {
|
||||
selectedUsersAndTeams: EnvironmentAccess[];
|
||||
},
|
||||
{ resetForm }: { resetForm: () => void }
|
||||
) {
|
||||
try {
|
||||
const configMapPayload = createAuthorizeAccessConfigMapPayload(
|
||||
namespaceAccesses,
|
||||
values.selectedUsersAndTeams,
|
||||
namespaceName,
|
||||
configMap
|
||||
);
|
||||
await updateConfigMapMutation.mutateAsync({
|
||||
data: configMapPayload,
|
||||
configMapName: PortainerNamespaceAccessesConfigMap.configMapName,
|
||||
});
|
||||
notifySuccess('Success', 'Namespace access updated');
|
||||
resetForm();
|
||||
} catch (error) {
|
||||
notifyError('Failed to update namespace access', error as Error);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import { object, array, string, number, SchemaOf, mixed } from 'yup';
|
||||
|
||||
import { CreateAccessValues } from './types';
|
||||
|
||||
export function validationSchema(): SchemaOf<CreateAccessValues> {
|
||||
return object().shape({
|
||||
selectedUsersAndTeams: array(
|
||||
object().shape({
|
||||
type: mixed().oneOf(['team', 'user']).required(),
|
||||
name: string().required(),
|
||||
id: number().required(),
|
||||
role: object().shape({
|
||||
id: number().required(),
|
||||
name: string().required(),
|
||||
}),
|
||||
})
|
||||
).min(1),
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
import { EnvironmentAccess } from '../types';
|
||||
|
||||
export type CreateAccessValues = {
|
||||
selectedUsersAndTeams: EnvironmentAccess[];
|
||||
};
|
||||
@ -0,0 +1,29 @@
|
||||
import { Layers } from 'lucide-react';
|
||||
import { useCurrentStateAndParams } from '@uirouter/react';
|
||||
|
||||
import { WidgetTitle, WidgetBody, Widget } from '@@/Widget';
|
||||
|
||||
export function NamespaceDetailsWidget() {
|
||||
const {
|
||||
params: { id: namespaceName },
|
||||
} = useCurrentStateAndParams();
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-sm-12">
|
||||
<Widget aria-label="Namespace details">
|
||||
<WidgetTitle icon={Layers} title="Namespace" />
|
||||
<WidgetBody>
|
||||
<table className="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>{namespaceName}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</WidgetBody>
|
||||
</Widget>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,90 @@
|
||||
import { ConfigMap } from 'kubernetes-types/core/v1';
|
||||
import { concat, without } from 'lodash';
|
||||
|
||||
import { PortainerNamespaceAccessesConfigMap } from '@/react/kubernetes/configs/constants';
|
||||
import { Configuration } from '@/react/kubernetes/configs/types';
|
||||
|
||||
import { NamespaceAccess } from './types';
|
||||
|
||||
export function createAuthorizeAccessConfigMapPayload(
|
||||
namespaceAccesses: NamespaceAccess[],
|
||||
selectedItems: NamespaceAccess[],
|
||||
namespaceName: string,
|
||||
configMap?: Configuration
|
||||
): ConfigMap {
|
||||
const newRemainingAccesses = concat(namespaceAccesses, ...selectedItems);
|
||||
return createAccessConfigMapPayload(
|
||||
newRemainingAccesses,
|
||||
namespaceName,
|
||||
configMap
|
||||
);
|
||||
}
|
||||
|
||||
export function createUnauthorizeAccessConfigMapPayload(
|
||||
namespaceAccesses: NamespaceAccess[],
|
||||
selectedItems: NamespaceAccess[],
|
||||
namespaceName: string,
|
||||
configMap?: Configuration
|
||||
): ConfigMap {
|
||||
const newRemainingAccesses = without(namespaceAccesses, ...selectedItems);
|
||||
return createAccessConfigMapPayload(
|
||||
newRemainingAccesses,
|
||||
namespaceName,
|
||||
configMap
|
||||
);
|
||||
}
|
||||
|
||||
function createAccessConfigMapPayload(
|
||||
newRemainingAccesses: NamespaceAccess[],
|
||||
namespaceName: string,
|
||||
configMap?: Configuration
|
||||
): ConfigMap {
|
||||
const configMapAccessesValue = JSON.parse(
|
||||
configMap?.Data?.[PortainerNamespaceAccessesConfigMap.accessKey] || '{}'
|
||||
);
|
||||
const newNamespaceAccesses = newRemainingAccesses.reduce(
|
||||
(namespaceAccesses, accessItem) => {
|
||||
if (accessItem.type === 'user') {
|
||||
return {
|
||||
...namespaceAccesses,
|
||||
UserAccessPolicies: {
|
||||
...namespaceAccesses.UserAccessPolicies,
|
||||
// hardcode to 0, as they use their environment role
|
||||
[`${accessItem.id}`]: { RoleId: 0 },
|
||||
},
|
||||
};
|
||||
}
|
||||
return {
|
||||
...namespaceAccesses,
|
||||
TeamAccessPolicies: {
|
||||
...namespaceAccesses.TeamAccessPolicies,
|
||||
// hardcode to 0, as they use their environment role
|
||||
[`${accessItem.id}`]: { RoleId: 0 },
|
||||
},
|
||||
};
|
||||
},
|
||||
{
|
||||
UserAccessPolicies: {},
|
||||
TeamAccessPolicies: {},
|
||||
}
|
||||
);
|
||||
const newConfigMapAccessesValue = {
|
||||
...configMapAccessesValue,
|
||||
[namespaceName]: newNamespaceAccesses,
|
||||
};
|
||||
const updatedConfigMap: ConfigMap = {
|
||||
metadata: {
|
||||
name: PortainerNamespaceAccessesConfigMap.configMapName,
|
||||
namespace: PortainerNamespaceAccessesConfigMap.namespace,
|
||||
uid: configMap?.UID,
|
||||
},
|
||||
data: {
|
||||
...configMap?.Data,
|
||||
[PortainerNamespaceAccessesConfigMap.accessKey]: JSON.stringify(
|
||||
newConfigMapAccessesValue
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
return updatedConfigMap;
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
import { PortainerNamespaceAccessesConfigMap } from '@/react/kubernetes/configs/constants';
|
||||
import { User } from '@/portainer/users/types';
|
||||
import { Team } from '@/react/portainer/users/teams/types';
|
||||
import { Configuration } from '@/react/kubernetes/configs/types';
|
||||
|
||||
import { NamespaceAccess, NamespaceAccessesMap } from './types';
|
||||
|
||||
export function parseNamespaceAccesses(
|
||||
data: Configuration | null,
|
||||
namespaceName: string,
|
||||
users: User[],
|
||||
teams: Team[]
|
||||
) {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
const namespacesAccesses: NamespaceAccessesMap = JSON.parse(
|
||||
data?.Data?.[PortainerNamespaceAccessesConfigMap.accessKey] ?? '{}'
|
||||
);
|
||||
const userAccessesIds = Object.keys(
|
||||
namespacesAccesses[namespaceName]?.UserAccessPolicies ?? {}
|
||||
);
|
||||
const userAccesses: NamespaceAccess[] = users
|
||||
.filter((user) => userAccessesIds.includes(`${user.Id}`))
|
||||
.map((user) => ({
|
||||
id: user.Id,
|
||||
name: user.Username,
|
||||
type: 'user',
|
||||
}));
|
||||
const teamAccessesIds = Object.keys(
|
||||
namespacesAccesses[namespaceName]?.TeamAccessPolicies ?? {}
|
||||
);
|
||||
const teamAccesses: NamespaceAccess[] = teams
|
||||
.filter((team) => teamAccessesIds.includes(`${team.Id}`))
|
||||
.map((team) => ({
|
||||
id: team.Id,
|
||||
name: team.Name,
|
||||
type: 'team',
|
||||
}));
|
||||
return [...userAccesses, ...teamAccesses];
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import {
|
||||
TeamAccessPolicies,
|
||||
UserAccessPolicies,
|
||||
} from '@/react/portainer/environments/types';
|
||||
|
||||
export type NamespaceAccess = {
|
||||
id: number;
|
||||
name: string;
|
||||
type: 'user' | 'team';
|
||||
};
|
||||
|
||||
export type EnvironmentAccess = NamespaceAccess & {
|
||||
role: { name: string; id: number };
|
||||
};
|
||||
|
||||
export interface NamespaceAccesses {
|
||||
UserAccessPolicies?: UserAccessPolicies;
|
||||
TeamAccessPolicies?: TeamAccessPolicies;
|
||||
}
|
||||
|
||||
export interface NamespaceAccessesMap {
|
||||
[key: string]: NamespaceAccesses;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import { EnvironmentGroupId } from '../types';
|
||||
import { EnvironmentGroupId } from '../../types';
|
||||
|
||||
export const queryKeys = {
|
||||
base: () => ['environment-groups'] as const,
|
||||
group: (id: EnvironmentGroupId) => [...queryKeys.base(), id] as const,
|
||||
group: (id?: EnvironmentGroupId) => [...queryKeys.base(), id] as const,
|
||||
};
|
||||
|
||||
Loading…
Reference in new issue