baha/skyline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Refactor user group

Browse Source 
1. Refactor group store
2. Refactor create group: add domain prop when create
3. Refactor edit group
4. Refactor user group manage user
5. Refactor group detail
6. Suppport actions in role detail
7. Refactor group list: add project/role column && domain dolumn; remove
user number column

Change-Id: If8f250da3ac27e5050c9fd4d31ad9954177ed0fe
This commit is contained in:
Jingwei.Zhang 2022-06-07 11:44:37 +08:00
parent 633fcdec63
commit b6999ea0a1
16 changed files with 544 additions and 894 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/FormItem/Label/index.jsx
View File

@ -34,6 +34,8 @@ import {
HddOutlined,
CloudServerOutlined,
LoadingOutlined,
TeamOutlined,
ProjectOutlined,
} from '@ant-design/icons';
import styles from './index.less';
@ -66,6 +68,8 @@ const iconTypeMap = {
host: <CloudServerOutlined />,
security: SecurityIcon,
lb: LBIcon,
group: <TeamOutlined />,
project: <ProjectOutlined />,
};
export default class index extends Component {

6
src/locales/en.json
View File

@ -1345,6 +1345,7 @@
"Manage User": "Manage User",
"Manage User Group": "Manage User Group",
"Manage host": "Manage host",
"Manage user": "Manage user",
"Manageable": "Manageable",
"Management": "Management",
"Management Reason": "Management Reason",
@ -1620,7 +1621,6 @@
"Pending Create": "Pending Create",
"Pending Delete": "Pending Delete",
"Pending Update": "Pending Update",
"People Num": "People Num",
"Perform a consistent hash operation on the source IP address of the request to obtain a specific value. At the same time, the back-end server is numbered, and the request is distributed to the server with the corresponding number according to the calculation result. This can enable load distribution of visits from different source IPs, and at the same time enable requests from the same client IP to always be dispatched to a specific server. This method is suitable for load balancing TCP protocol without cookie function.": "Perform a consistent hash operation on the source IP address of the request to obtain a specific value. At the same time, the back-end server is numbered, and the request is distributed to the server with the corresponding number according to the calculation result. This can enable load distribution of visits from different source IPs, and at the same time enable requests from the same client IP to always be dispatched to a specific server. This method is suitable for load balancing TCP protocol without cookie function.",
"Permanent": "Permanent",
"Persistent": "Persistent",
@ -1759,6 +1759,7 @@
"Project Range": "Project Range",
"Project Reader": "Project Reader",
"Project Scope": "Project Scope",
"Project Scope (Project Name: Role Names)": "Project Scope (Project Name: Role Names)",
"Project User": "Project User",
"Project User Group": "Project User Group",
"Projects": "Projects",
@ -1955,7 +1956,6 @@
"Select Project Role": "Select Project Role",
"Select Snapshot": "Select Snapshot",
"Select System Role": "Select System Role",
"Select User": "Select User",
"Select User Group": "Select User Group",
"Select a domain": "Select a domain",
"Select a region": "Select a region",
@ -2159,7 +2159,6 @@
"System Load": "System Load",
"System Reader": "System Reader",
"System Running Time": "System Running Time",
"System Scope": "System Scope",
"System is error, please try again later.": "System is error, please try again later.",
"TCP": "TCP",
"TCP Connections": "TCP Connections",
@ -2392,7 +2391,6 @@
"User Detail": "User Detail",
"User Edit": "User Edit",
"User Group Detail": "User Group Detail",
"User Group ID": "User Group ID",
"User Group ID/Name": "User Group ID/Name",
"User Group Name": "User Group Name",
"User Group Num": "User Group Num",

6
src/locales/zh.json
View File

@ -1345,6 +1345,7 @@
"Manage User": "管理用户",
"Manage User Group": "管理用户组",
"Manage host": "管理主机",
"Manage user": "管理用户",
"Manageable": "可管理",
"Management": "维护",
"Management Reason": "维护原因",
@ -1620,7 +1621,6 @@
"Pending Create": "等待创建",
"Pending Delete": "等待删除",
"Pending Update": "等待更新",
"People Num": "",
"Perform a consistent hash operation on the source IP address of the request to obtain a specific value. At the same time, the back-end server is numbered, and the request is distributed to the server with the corresponding number according to the calculation result. This can enable load distribution of visits from different source IPs, and at the same time enable requests from the same client IP to always be dispatched to a specific server. This method is suitable for load balancing TCP protocol without cookie function.": "将请求的源IP地址进行一致性Hash运算，得到一个具体的数值，同时对后端服务器进行编号，按照运算结果将请求分发到对应编号的服务器上。这可以使得对不同源IP的访问进行负载分发，同时使得同一个客户端IP的请求始终被派发至某特定的服务器。该方式适合负载均衡无cookie功能的TCP协议。",
"Permanent": "长期保留",
"Persistent": "持久性",
@ -1759,6 +1759,7 @@
"Project Range": "项目范围",
"Project Reader": "项目只读权限",
"Project Scope": "所属项目",
"Project Scope (Project Name: Role Names)": "所属项目(项目名称：角色名称)",
"Project User": "项目用户",
"Project User Group": "项目用户组",
"Projects": "项目",
@ -1955,7 +1956,6 @@
"Select Project Role": "选择项目角色",
"Select Snapshot": "选择快照",
"Select System Role": "选择系统角色",
"Select User": "选择用户",
"Select User Group": "选择用户组",
"Select a domain": "请选择Domain",
"Select a region": "请选择Region",
@ -2159,7 +2159,6 @@
"System Load": "系统负载",
"System Reader": "系统只读权限",
"System Running Time": "",
"System Scope": "绑定系统范围",
"System is error, please try again later.": "系统出错，请稍后再试。",
"TCP": "",
"TCP Connections": "TCP连接数",
@ -2392,7 +2391,6 @@
"User Detail": "用户详情",
"User Edit": "编辑用户",
"User Group Detail": "用户组详情",
"User Group ID": "用户组ID",
"User Group ID/Name": "用户组ID/名称",
"User Group Name": "用户组名称",
"User Group Num": "用户组数",

5
src/pages/identity/containers/Role/Detail/index.jsx
View File

@ -18,6 +18,7 @@ import Base from 'containers/TabDetail';
import User from '../../User';
import Group from '../../UserGroup';
import impliedRole from './BaseDetail';
import actionConfigs from '../actions';
export class RoleDetail extends Base {
get name() {
@ -32,6 +33,10 @@ export class RoleDetail extends Base {
return this.getRoutePath('role');
}
get actionConfigs() {
return actionConfigs;
}
init() {
this.store = new RoleStore();
}

65
src/pages/identity/containers/UserGroup/Detail/index.jsx
View File

@ -12,16 +12,11 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Divider } from 'antd';
import { UpOutlined, DownOutlined } from '@ant-design/icons';
import globalDomainStore from 'stores/keystone/domain';
import { GroupStore } from 'stores/keystone/user-group';
import Base from 'containers/TabDetail';
import User from '../../User';
import Project from '../../Project';
import styles from './index.less';
import actionConfigs from '../actions';
export class Detail extends Base {
@ -43,17 +38,6 @@ export class Detail extends Base {
init() {
this.store = new GroupStore();
this.domainStore = globalDomainStore;
this.getDomains();
}
getDomains() {
this.domainStore.fetchDomain();
}
get domainList() {
const { domains } = this.domainStore;
return domains || [];
}
get detailInfos() {
@ -62,20 +46,14 @@ export class Detail extends Base {
title: t('User Group Name'),
dataIndex: 'name',
},
// {
// title: t('People Num'),
// dataIndex: 'user_num',
// },
{
title: t('Affiliated Domain'),
dataIndex: 'domain_id',
render: (domain_id) => {
const domain = this.domainList.filter((it) => it.id === domain_id);
if (domain[0]) {
return domain[0].name;
}
return domain_id;
},
dataIndex: 'domain',
render: (value, record) => (value || {}).name || record.domain_id,
},
{
title: t('User Num'),
dataIndex: 'userCount',
},
{
title: t('Description'),
@ -99,37 +77,6 @@ export class Detail extends Base {
];
return tabs;
}
goEdit = () => {
const {
params: { id },
} = this.props.match;
this.routing.push(`${this.listUrl}/edit/${id}`);
};
get detailTitle() {
const {
detail: { id },
} = this.store;
const { collapsed } = this.state;
const icon = collapsed ? <DownOutlined /> : <UpOutlined />;
return (
<div>
<span className={styles['title-label']}>{t('User Group ID')}:</span>
<span className={styles['header-title']}>{id}</span>
<Divider type="vertical" className={styles['header-divider']} />
<Button onClick={this.goBack} type="link">
{t('Back')}
</Button>
<Button
onClick={this.handleDetailInfo}
icon={icon}
type="link"
className={styles['header-button']}
/>
</div>
);
}
}
export default inject('rootStore')(observer(Detail));

201
src/pages/identity/containers/UserGroup/actions/Create.jsx
View File

@ -12,62 +12,24 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import React from 'react';
import { inject, observer } from 'mobx-react';
import globalUserStore from 'stores/keystone/user';
import { has } from 'lodash';
import { ModalAction } from 'containers/Action';
import { Select } from 'antd';
import globalProjectStore from 'stores/keystone/project';
import globalRoleStore from 'stores/keystone/role';
import globalDomainStore from 'stores/keystone/domain';
import globalGroupStore from 'stores/keystone/user-group';
import { getDomainFormItem } from 'resources/keystone/domain';
export class CreateForm extends ModalAction {
constructor(props) {
super(props);
this.state = {
domain: null,
more: false,
newProjectRoles: {},
};
}
export class Create extends ModalAction {
init() {
this.userStore = globalUserStore;
this.userGroupStore = globalGroupStore;
this.projectStore = globalProjectStore;
this.store = globalGroupStore;
this.domainStore = globalDomainStore;
this.roleStore = globalRoleStore;
this.getUser();
this.getProject();
this.getDomains();
this.getRole();
}
getUser() {
this.userStore.fetchList();
}
getProject() {
this.projectStore.fetchList();
}
getDomains() {
this.domainStore.fetchDomain();
}
getRole() {
this.roleStore.fetchList();
}
static id = 'user-group-create';
static title = t('Create User Group');
// static path = '/identity/user-group-admin/create';
static policy = ['identity:create_group', 'identity:add_user_to_group'];
static policy = 'identity:create_group';
static allowed() {
return Promise.resolve(true);
@ -77,128 +39,20 @@ export class CreateForm extends ModalAction {
return t('Create User Group');
}
get domainDefault() {
const { domains } = this.domainStore;
const domainDefault = domains.filter((it) => it.id === 'default');
return domainDefault[0];
}
get defaultValue() {
const data = {
more: false,
domain_id: 'default',
};
return data;
}
get domainList() {
const { domains } = this.domainStore;
return (domains || []).map((it) => ({
label: it.name,
value: it.id,
}));
}
get userList() {
return (this.userStore.list.data || []).map((it) => ({
...it,
key: it.id,
}));
}
get projects() {
return (this.projectStore.list.data || []).map((it) => ({
...it,
key: it.id,
}));
}
groupRolesList = (groupId) => {
return (this.roleStore.list.data || []).map((it) => ({
label: it.name,
value: it.id,
groupId,
}));
};
defaultRoles = () => {
return [this.roleStore.list.data[0].id];
};
groupRoleChange = (value, option) => {
const { newProjectRoles } = this.state;
const { groupId } = option[0];
newProjectRoles[groupId] = value;
this.setState({ newProjectRoles });
};
onValuesChange = (changedFields) => {
if (has(changedFields, 'more')) {
this.setState({
more: changedFields.more,
});
}
};
get leftProjectTable() {
return [
{
dataIndex: 'name',
title: t('Name'),
},
];
}
get rightProjectTable() {
return [
{
dataIndex: 'name',
title: t('Name'),
},
{
title: t('Select Project Role'),
dataIndex: 'id',
render: (id) => {
return (
<Select
size="small"
options={this.groupRolesList(id)}
defaultValue={this.defaultRoles()}
onChange={this.groupRoleChange}
mode="multiple"
/>
);
},
},
];
}
get leftUserTable() {
return [
{
dataIndex: 'name',
title: t('Name'),
},
];
}
get rightUserTable() {
return [
{
dataIndex: 'name',
title: t('Name'),
},
];
}
checkName = (rule, value) => {
if (!value) {
return Promise.reject(t('Please input'));
}
const {
list: { data },
} = this.userGroupStore;
const nameUsed = data.filter((it) => it.name === value);
if (nameUsed[0]) {
const { list: { data = [] } = {} } = this.store;
const nameUsed = data.find((it) => it.name === value);
if (nameUsed) {
return Promise.reject(
t('Invalid: User Group name can not be duplicated')
);
@ -207,6 +61,7 @@ export class CreateForm extends ModalAction {
};
get formItems() {
const domainFormItem = getDomainFormItem(this);
return [
{
name: 'name',
@ -218,50 +73,18 @@ export class CreateForm extends ModalAction {
extra: t('User Groups') + t('Name can not be duplicated'),
maxLength: 30,
},
domainFormItem,
{
name: 'description',
label: t('Description'),
type: 'textarea',
},
// {
// type: 'divider',
// },
// {
// name: 'more',
// label: t('Advanced Options'),
// type: 'more',
// },
// {
// name: 'select_project',
// label: t('Select Project'),
// type: 'transfer',
// leftTableColumns: this.leftProjectTable,
// rightTableColumns: this.rightProjectTable,
// dataSource: domain ? this.projects.filter(it => it.domain_id === domain) : [],
// disabled: false,
// showSearch: true,
// hidden: !more || !domain,
// },
// {
// name: 'select_user',
// label: t('Select User'),
// type: 'transfer',
// leftTableColumns: this.leftUserTable,
// rightTableColumns: this.rightUserTable,
// dataSource: domain ? this.userList.filter(it => it.domain_id === domain) : [],
// disabled: false,
// showSearch: true,
// hidden: !more || !domain,
// },
];
}
onSubmit = (values) => {
const defaultRole = this.roleStore.list.data[0].id;
values.domain_id = this.domainDefault.id;
const { newProjectRoles } = this.state;
return this.userGroupStore.create(values, newProjectRoles, defaultRole);
return this.store.create(values);
};
}
export default inject('rootStore')(observer(CreateForm));
export default inject('rootStore')(observer(Create));

12
src/pages/identity/containers/UserGroup/actions/DomainPermission.jsx
View File

@ -103,17 +103,17 @@ export class DomainPermission extends ModalAction {
} = this.props;
const promiseList = [];
oldRoles.forEach((role) => {
const { id: role_id } = role;
if (newRoles.indexOf(role_id) === -1) {
const { id: roleId } = role;
if (newRoles.indexOf(roleId) === -1) {
promiseList.push(
globalGroupStore.deleteDomainRole({ id, role_id, domain_id })
globalGroupStore.deleteDomainRole({ id, roleId, domain_id })
);
}
});
newRoles.forEach((role_id) => {
if (oldRoles.indexOf(role_id) === -1) {
newRoles.forEach((roleId) => {
if (oldRoles.indexOf(roleId) === -1) {
promiseList.push(
globalGroupStore.assignDomainRole({ id, role_id, domain_id })
globalGroupStore.assignDomainRole({ id, roleId, domain_id })
);
}
});

17
src/pages/identity/containers/UserGroup/actions/Edit.jsx
View File

@ -14,13 +14,11 @@
import { inject, observer } from 'mobx-react';
import { ModalAction } from 'containers/Action';
import globalDomainStore from 'stores/keystone/domain';
import globalGroupStore from 'stores/keystone/user-group';
export class EditForm extends ModalAction {
init() {
this.store = globalGroupStore;
this.domainStore = globalDomainStore;
}
static id = 'user-group-edit';
@ -35,17 +33,10 @@ export class EditForm extends ModalAction {
get defaultValue() {
const { name, description } = this.item;
if (name && this.formRef.current) {
this.formRef.current.setFieldsValue({
name,
description,
});
}
const data = {
return {
name,
description,
};
return data;
}
checkName = (rule, value) => {
@ -55,9 +46,9 @@ export class EditForm extends ModalAction {
const {
list: { data },
} = this.store;
const { name } = this.item;
const nameUsed = data.filter((it) => it.name === value);
if (nameUsed[0] && nameUsed[0].name !== name) {
const { id } = this.item;
const nameUsed = data.find((it) => it.name === value && it.id !== id);
if (nameUsed) {
return Promise.reject(
t('Invalid: User Group name can not be duplicated')
);

145
src/pages/identity/containers/UserGroup/actions/ManageUser.jsx Normal file
View File

@ -0,0 +1,145 @@
// Copyright 2021 99cloud
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { inject, observer } from 'mobx-react';
import { UserStore } from 'stores/keystone/user';
import { GroupStore } from 'stores/keystone/user-group';
import { ModalAction } from 'containers/Action';
import {
nameDomainColumns,
transferFilterOption,
} from 'resources/keystone/domain';
export class ManageUser extends ModalAction {
static id = 'manage-user';
static title = t('Manage User');
get name() {
return t('Manage user');
}
static get modalSize() {
return 'large';
}
getModalSize() {
return 'large';
}
async init() {
this.state.groupUsers = [];
this.store = new GroupStore();
this.userStore = new UserStore();
this.getGroupUsers();
this.getAllUser();
}
getAllUser() {
this.userStore.fetchAllWithDomain();
}
async getGroupUsers() {
await this.store.fetchGroupUsers(this.item);
this.setState({
groupUsers: this.groupUsers,
});
this.updateDefaultValue();
}
get userList() {
const users = this.userStore.list.data || [];
return users.map((it) => ({
...it,
key: it.id,
}));
}
get groupUsers() {
return (this.store.groupUsers || []).map((it) => it.id);
}
static policy = [
'identity:list_users_in_group',
'identity:list_users_in_group',
'identity:add_user_to_group',
];
static allowed = () => Promise.resolve(true);
get leftUserTable() {
return nameDomainColumns;
}
get rightUserTable() {
return nameDomainColumns;
}
get defaultValue() {
const { name, domainName } = this.item;
const data = {
name,
domain: domainName,
select_user: this.groupUsers,
};
return data;
}
get formItems() {
return [
{
name: 'name',
type: 'label',
label: t('Name'),
iconType: 'group',
},
{
name: 'domain',
type: 'label',
label: t('Domain'),
},
{
name: 'select_user',
type: 'transfer',
label: t('User'),
leftTableColumns: this.leftUserTable,
rightTableColumns: this.rightUserTable,
dataSource: this.userList,
disabled: false,
showSearch: true,
filterOption: transferFilterOption,
},
];
}
onSubmit = async (values) => {
const { select_user: newUsers } = values;
const { id } = this.item;
const promiseList = [];
this.groupUsers.forEach((userId) => {
if (newUsers.indexOf(userId) === -1) {
promiseList.push(this.store.deleteGroupUsers({ id, userId }));
}
});
newUsers.forEach((userId) => {
if (this.groupUsers.indexOf(userId) === -1) {
promiseList.push(this.store.addGroupUsers({ id, userId }));
}
});
const results = await Promise.all(promiseList);
return results;
};
}
export default inject('rootStore')(observer(ManageUser));

12
src/pages/identity/containers/UserGroup/actions/SystemPermission.jsx
View File

@ -103,14 +103,14 @@ export class SystemPermission extends ModalAction {
} = this.props;
const promiseList = [];
oldRoles.forEach((role) => {
const { id: role_id } = role;
if (newRoles.indexOf(role_id) === -1) {
promiseList.push(globalGroupStore.deleteSystemRole({ id, role_id }));
const { id: roleId } = role;
if (newRoles.indexOf(roleId) === -1) {
promiseList.push(globalGroupStore.deleteSystemRole({ id, roleId }));
}
});
newRoles.forEach((role_id) => {
if (oldRoles.indexOf(role_id) === -1) {
promiseList.push(globalGroupStore.assignSystemRole({ id, role_id }));
newRoles.forEach((roleId) => {
if (oldRoles.indexOf(roleId) === -1) {
promiseList.push(globalGroupStore.assignSystemRole({ id, roleId }));
}
});
const results = await Promise.all(promiseList);

182
src/pages/identity/containers/UserGroup/actions/UserManager.jsx
View File

@ -1,182 +0,0 @@
// Copyright 2021 99cloud
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { inject, observer } from 'mobx-react';
import { UserStore } from 'stores/keystone/user';
import globalGroupStore from 'stores/keystone/user-group';
import { ModalAction } from 'containers/Action';
import globalDomainStore from 'stores/keystone/domain';
export class UserManager extends ModalAction {
constructor(props) {
super(props);
this.state = {
domainDefault: this.item.domain_id,
userList: [],
};
}
init() {
// this.store = globalUserStore;
this.domainStore = globalDomainStore;
this.userStore = new UserStore();
this.getDomains();
this.getUser();
}
// componentDidMount() {
// globalUserStore.fetchList().then((res) => {
// const domainUsers = res.filter(it => it.domain_id === this.item.domain_id);
// const userList = domainUsers.map(it => ({
// ...it,
// key: it.id,
// }));
// this.setState({ userList });
// });
// }
static id = 'management-user';
static title = t('Manage User');
get name() {
return t('Manager user');
}
getDomains() {
this.domainStore.fetchDomain();
}
getUser() {
this.userStore.fetchList();
}
static get modalSize() {
return 'large';
}
getModalSize() {
return 'large';
}
get domainList() {
const { domains } = this.domainStore;
return (domains || []).map((it) => ({
label: it.name,
value: it.id,
}));
}
get userList() {
return (this.userStore.list.data || []).map((it) => ({
...it,
key: it.id,
}));
}
static policy = [
'identity:list_users_in_group',
'identity:list_users_in_group',
'identity:add_user_to_group',
];
static allowed = () => Promise.resolve(true);
get leftUserTable() {
return [
{
dataIndex: 'name',
title: t('Name'),
},
];
}
get rightUserTable() {
return [
{
dataIndex: 'name',
title: t('Name'),
},
];
}
onSubChange = (value, option) => {
const { userRoles } = this.state;
userRoles[option.userId] = [value];
this.setState({
userRoles,
});
};
get defaultValue() {
const { domain_id: domain } = this.item;
const data = {
domain_id: domain || 'default',
};
return data;
}
get formItems() {
const { domainDefault } = this.state;
const { users: oldUsers } = this.item;
return [
{
name: 'domain_id',
label: t('Affiliated Domain'),
type: 'select',
options: this.domainList,
onChange: (e) => {
this.setState({
domainDefault: e,
});
},
required: true,
},
{
name: 'select_user',
type: 'transfer',
label: t('User'),
leftTableColumns: this.leftUserTable,
rightTableColumns: this.rightUserTable,
dataSource: this.userList
? this.userList.filter((it) => it.domain_id === domainDefault)
: [],
disabled: false,
showSearch: true,
oriTargetKeys: oldUsers,
},
];
}
onSubmit = async (values) => {
const { select_user: newUsers } = values;
const { users: oldUsers } = this.item;
const { id } = this.item;
const promiseList = [];
oldUsers.forEach((user_id) => {
if (newUsers.indexOf(user_id) === -1) {
promiseList.push(globalGroupStore.deleteGroupUsers({ id, user_id }));
}
});
newUsers.forEach((user_id) => {
if (oldUsers.indexOf(user_id) === -1) {
promiseList.push(globalGroupStore.addGroupUsers({ id, user_id }));
}
});
const results = await Promise.all(promiseList);
return results;
};
}
export default inject('rootStore')(observer(UserManager));

4
src/pages/identity/containers/UserGroup/actions/index.jsx
View File

@ -15,7 +15,7 @@
import Create from './Create';
import Delete from './Delete';
import Edit from './Edit';
import UserManager from './UserManager';
import ManageUser from './ManageUser';
// import SystemPermission from './SystemPermission';
// import DomainPermission from './DomainPermission';
@ -30,7 +30,7 @@ const actionConfigs = {
// action: DomainPermission,
// },
{
action: UserManager,
action: ManageUser,
},
{
action: Delete,

219
src/pages/identity/containers/UserGroup/index.jsx
View File

@ -15,18 +15,15 @@
import React from 'react';
import { observer, inject } from 'mobx-react';
import Base from 'containers/List';
import globalGroupStore from 'stores/keystone/user-group';
import { Badge } from 'antd';
import globalGroupStore, { GroupStore } from 'stores/keystone/user-group';
import { Typography } from 'antd';
import { emptyActionConfig } from 'utils/constants';
import { isEmpty } from 'lodash';
import actionConfigs from './actions';
export class UserGroups extends Base {
init() {
this.store = globalGroupStore;
}
get tabs() {
return [];
this.store = this.inDetailPage ? new GroupStore() : globalGroupStore;
}
get policy() {
@ -41,50 +38,143 @@ export class UserGroups extends Base {
return false;
}
getColumns() {
const {
match: { path },
} = this.props;
const components = [
get inUserDetail() {
const { pathname } = this.props.location;
return this.inDetailPage && pathname.includes('user-admin/detail');
}
get inProjectDetail() {
const { pathname } = this.props.location;
return this.inDetailPage && pathname.includes('project-admin/detail');
}
get inRoleDetail() {
const { pathname } = this.props.location;
return this.inDetailPage && pathname.includes('role-admin/detail');
}
getBaseColumns() {
return [
{
title: t('User Group ID/Name'),
dataIndex: 'name',
routeName: 'userGroupDetailAdmin',
},
{
title: t('Project Scope'),
dataIndex: 'projectScope',
title: t('Project Scope (Project Name: Role Names)'),
dataIndex: 'projects',
isHideable: true,
render: (projectScope) => {
if (projectScope && projectScope[0]) {
return projectScope.map((it, idx) => <div key={idx}>{it}</div>);
width: 500,
render: (value) => {
if (isEmpty(value)) {
return '-';
}
return Object.keys(value).map((projectId) => {
const { project, roles } = value[projectId];
const roleNames = roles
.map((role) => {
return role.name;
})
.join(', ');
const { id, name } = project;
const link = this.getLinkRender(
'projectDetail',
name,
{ id },
{ tab: 'userGroup' }
);
return (
<div key={projectId}>
<Typography.Text strong>{link}</Typography.Text>: {roleNames}
</div>
);
});
},
},
// {
// title: t('System Scope'),
// dataIndex: 'systemScope',
// isHideable: true,
// render: (systemScope) => {
// if (systemScope === true) {
// return 'All';
// }
// return '-';
// },
// },
{
title: t('Project Num'),
dataIndex: 'project_num',
render: (project_num) => {
if (project_num === 0) {
return <Badge color="red" text={project_num} />;
stringify: (value) => {
if (isEmpty(value)) {
return '-';
}
return <Badge color="green" text={project_num} />;
return Object.keys(value)
.map((projectId) => {
const { project, roles } = value[projectId];
const roleNames = roles.map((it) => it.name).join('|');
return `${project.name}: ${roleNames}`;
})
.join(';');
},
},
{
title: t('User Num'),
dataIndex: 'user_num',
title: t('Roles'),
dataIndex: 'rolesInProjectDetailPage',
isHideable: true,
render: (_, record) => {
const { projects = {} } = record;
if (isEmpty(projects)) {
return '-';
}
return Object.keys(projects).map((projectId) => {
const { roles } = projects[projectId];
return roles.map((role) => {
const { id, name } = role;
const link = this.getLinkRender(
'roleDetail',
name,
{ id },
{ tab: 'group' }
);
return <div key={id}>{link}</div>;
});
});
},
stringify: (_, record) => {
const { projects = {} } = record;
if (isEmpty(projects)) {
return '-';
}
return Object.keys(projects).map((projectId) => {
const { roles } = projects[projectId];
return roles.map((role) => role.name).join(';');
});
},
},
{
title: t('Project Scope'),
dataIndex: 'projectsInRoleDetailPage',
isHideable: true,
render: (_, record) => {
const { projects = {} } = record;
if (isEmpty(projects)) {
return '-';
}
return Object.keys(projects).map((projectId) => {
const { project } = projects[projectId];
const { id, name } = project;
const link = this.getLinkRender(
'projectDetail',
name,
{ id },
{ tab: 'userGroup' }
);
return <div key={id}>{link}</div>;
});
},
stringify: (_, record) => {
const { projects = {} } = record;
if (isEmpty(projects)) {
return '-';
}
return Object.keys(projects)
.map((projectId) => {
const { project } = projects[projectId];
return project.name;
})
.join(';');
},
},
{
title: t('Affiliated Domain'),
dataIndex: 'domainName',
isHideable: true,
},
{
title: t('Description'),
@ -92,21 +182,32 @@ export class UserGroups extends Base {
isHideable: true,
},
];
}
if (path.indexOf('role-admin/detail') === -1) {
components.splice(1, 1);
getColumns() {
const columns = this.getBaseColumns();
if (!this.inDetailPage || this.inUserDetail) {
return columns.filter((it) => !it.dataIndex.includes('DetailPage'));
}
if (path.indexOf('user-group-admin') === -1) {
components.splice(2, 1);
if (this.inProjectDetail) {
return columns.filter(
(it) =>
it.dataIndex !== 'projects' &&
it.dataIndex !== 'projectsInRoleDetailPage'
);
}
return components;
if (this.inRoleDetail) {
return columns.filter(
(it) =>
it.dataIndex !== 'rolesInProjectDetailPage' &&
it.dataIndex !== 'projects'
);
}
return columns;
}
get actionConfigs() {
const {
match: { path },
} = this.props;
if (path.indexOf('identity/user-group') >= 0) {
if (!this.inDetailPage) {
return actionConfigs;
}
return emptyActionConfig;
@ -121,27 +222,19 @@ export class UserGroups extends Base {
];
}
async getData({ silent, ...params } = {}) {
updateFetchParams = (params) => {
const { match } = this.props;
const { path } = match;
const { id } = match.params || {};
const newParams = { ...params };
if (path.indexOf('project-admin/detail') >= 0) {
const { id } = match.params;
newParams.projectId = id;
await this.store.fetchListInProjectDetail(newParams);
} else if (path.indexOf('user-admin/detail') >= 0) {
const { id } = match.params;
if (this.inUserDetail) {
newParams.userId = id;
await this.store.fetchListInUserDetail(newParams);
} else if (path.indexOf('role-admin/detail') >= 0) {
const { id } = match.params;
} else if (this.inProjectDetail) {
newParams.projectId = id;
} else if (this.inRoleDetail) {
newParams.roleId = id;
await this.store.fetchListInRoleDetail(newParams);
} else {
await this.store.fetchList(newParams);
}
this.list.silent = false;
}
return newParams;
};
}
export default inject('rootStore')(observer(UserGroups));

60
src/resources/keystone/domain.jsx
View File

@ -1,5 +1,7 @@
import React from 'react';
import { Badge } from 'antd';
import globalDomainStore from 'stores/keystone/domain';
import globalRootStore from 'src/stores/root';
export const statusTypes = [
{
@ -12,6 +14,48 @@ export const statusTypes = [
},
];
export const getDomainOptions = (self) => {
const { baseDomains } = globalRootStore;
const { domains } = globalDomainStore;
const domainList = (domains || []).filter(
(it) =>
baseDomains.indexOf(it.name) === -1 ||
it.id === (self.item || {}).domain_id
);
return domainList.map((it) => ({
label: it.name,
value: it.id,
key: it.id,
}));
};
export const getCheckedOptions = () => {
const { domains } = globalDomainStore;
return (domains || []).map((it) => ({
label: it.name,
value: it.id,
key: it.id,
}));
};
export const getDomainFormItem = (self) => {
return {
name: 'domain_id',
label: t('Affiliated Domain'),
type: 'select',
checkOptions: getCheckedOptions(),
checkBoxInfo: t('Show All Domain'),
options: getDomainOptions(self),
allowClear: false,
onChange: (e) => {
self.setState({
domain: e,
});
},
required: true,
};
};
export const enabledColumn = {
title: t('Enabled'),
dataIndex: 'enabled',
@ -24,3 +68,19 @@ export const enabledColumn = {
},
stringify: (val) => (val ? t('Yes') : t('No')),
};
export const nameDomainColumns = [
{
dataIndex: 'name',
title: t('Name'),
},
{
dataIndex: 'domainName',
title: t('Domain'),
},
];
export const transferFilterOption = (inputValue, record) => {
const { domainName, name } = record;
return name.includes(inputValue) || domainName.includes(inputValue);
};

472
src/stores/keystone/user-group.js
View File

@ -13,15 +13,10 @@
// limitations under the License.
import { action, observable } from 'mobx';
import { get } from 'lodash';
import client from 'client';
import Base from 'stores/base';
import globalProjectStore from 'stores/keystone/project';
export class GroupStore extends Base {
@observable
domains = [];
@observable
systemRoles = [];
@ -59,68 +54,36 @@ export class GroupStore extends Base {
return client.keystone.projects;
}
@action
async create(data, newProjectRoles, defaultRole) {
const body = {};
const { select_user, select_project, ...other } = data;
body[this.responseKey] = other;
this.isSubmitting = true;
const result = await this.client.create(body);
const {
group: { id: group_id },
} = result;
const promiseList = [];
if (select_user || select_project) {
const newProjects = Object.keys(newProjectRoles);
select_user.forEach((user_id) => {
promiseList.push(this.addGroupUsers({ id: group_id, user_id }));
});
select_project.forEach((id) => {
if (newProjects.indexOf(id) === -1) {
const role_id = defaultRole;
promiseList.push(
globalProjectStore.assignGroupRole({ id, group_id, role_id })
);
} else {
newProjectRoles[id].forEach((role_id) => {
promiseList.push(
globalProjectStore.assignGroupRole({ id, group_id, role_id })
);
});
}
});
await Promise.all(promiseList);
}
this.isSubmitting = false;
return result;
}
@action
async fetchDomain() {
const domainsResult = await this.domainClient.list();
this.domains = domainsResult.domains;
}
get mapper() {
return (item) => {
const domain = this.domains.filter((it) => it.id === item.domain_id);
if (domain[0]) {
item.domain_name = domain[0].name;
}
return item;
get paramsFunc() {
return (params) => {
const {
id,
userId,
groupId,
roleId,
projectId,
withRole,
all_projects,
...rest
} = params;
return rest;
};
}
listFetchByClient(params, originParams) {
const { userId } = originParams;
if (userId) {
return this.userClient.groups.list(userId, params);
}
return this.client.list(params);
}
@action
async edit({ id, description, name }) {
this.isSubmitting = true;
const reqBody = {
group: { description, name },
};
const result = await this.client.patch(id, reqBody);
this.isSubmitting = false;
return result;
return this.submitting(this.client.patch(id, reqBody));
}
@action
@ -131,13 +94,13 @@ export class GroupStore extends Base {
}
@action
async assignSystemRole({ id, role_id }) {
return this.systemGroupClient.roles.update(id, role_id);
async assignSystemRole({ id, roleId }) {
return this.systemGroupClient.roles.update(id, roleId);
}
@action
async deleteSystemRole({ id, role_id }) {
return this.systemGroupClient.roles.delete(id, role_id);
async deleteSystemRole({ id, roleId }) {
return this.systemGroupClient.roles.delete(id, roleId);
}
@action
@ -151,328 +114,113 @@ export class GroupStore extends Base {
}
@action
async assignDomainRole({ id, role_id, domain_id }) {
return this.domainClient.groups.roles.update(domain_id, id, role_id);
async assignDomainRole({ id, roleId, domain_id }) {
return this.domainClient.groups.roles.update(domain_id, id, roleId);
}
@action
async deleteDomainRole({ id, role_id, domain_id }) {
return this.domainClient.groups.roles.delete(domain_id, id, role_id);
}
@action
async fetchListInProjectDetail({
limit,
page,
sortKey,
sortOrder,
conditions,
...filters
} = {}) {
this.list.isLoading = true;
const { projectId } = filters;
const params = {};
const [roleAssignmentsResult, result] = await Promise.all([
this.roleAssignmentClient.list(),
this.client.list(params),
]);
const projectGroupIds = [];
roleAssignmentsResult.role_assignments.forEach((roleAssignment) => {
if (roleAssignment.group) {
const {
group: { id: group_id },
scope: { project: { id } = {} } = {},
} = roleAssignment;
if (id && id === projectId) {
projectGroupIds.push(group_id);
}
}
});
let data = get(result, this.listResponseKey, []);
data = data.filter((it) => projectGroupIds.indexOf(it.id) >= 0);
// const items = data.map(this.mapper);
// const newData = await this.listDidFetch(items);
Promise.all(data.map((it) => this.client.users.list(it.id))).then(
(rest) => {
const addUserItem = data.map((it, index) => {
const { users } = rest[index];
const userIds = users.map((user) => user.id);
const userInfo = users.map((user) => ({
id: user.id,
name: user.name,
}));
it.users = userIds;
it.user_num = users.length;
it.user_info = userInfo;
return it;
});
const items = addUserItem.map((item) =>
this.mapperProject(roleAssignmentsResult, item)
);
this.list.update({
data: items,
total: items.length || 0,
limit: Number(limit) || 10,
page: Number(page) || 1,
sortKey,
sortOrder,
filters,
isLoading: false,
...(this.list.silent ? {} : { selectedRowKeys: [] }),
});
return items;
}
);
}
@action
async fetchListInUserDetail({
limit,
page,
sortKey,
sortOrder,
conditions,
...filters
} = {}) {
this.list.isLoading = true;
const { userId } = filters;
const params = {};
const [roleAssignmentsResult, result] = await Promise.all([
this.roleAssignmentClient.list(),
this.userClient.groups.list(userId, params),
]);
const projectGroupIds = [];
roleAssignmentsResult.role_assignments.forEach((roleAssignment) => {
if (roleAssignment.group) {
const {
group: { id: group_id },
scope: { project: { id } = {} } = {},
} = roleAssignment;
if (id && id === userId) {
projectGroupIds.push(group_id);
}
}
});
const data = get(result, this.listResponseKey, []);
const items = data.map((item) =>
this.mapperProject(roleAssignmentsResult, item)
);
this.list.update({
data: items,
total: items.length || 0,
limit: Number(limit) || 10,
page: Number(page) || 1,
sortKey,
sortOrder,
filters,
isLoading: false,
...(this.list.silent ? {} : { selectedRowKeys: [] }),
});
return items;
async deleteDomainRole({ id, roleId, domain_id }) {
return this.domainClient.groups.roles.delete(domain_id, id, roleId);
}
@action
async fetchGroupUsers({ id }) {
const usersResult = await this.client.users.list(id);
const { users: result } = usersResult;
this.groupUsers = result;
return result;
const { users } = usersResult;
this.groupUsers = users;
return users;
}
@action
async deleteGroupUsers({ id, user_id }) {
return this.client.users.delete(id, user_id);
async deleteGroupUsers({ id, userId }) {
return this.client.users.delete(id, userId);
}
@action
async addGroupUsers({ id, user_id }) {
return this.client.users.update(id, user_id);
async addGroupUsers({ id, userId }) {
return this.client.users.update(id, userId);
}
mapperProject = (roleAssignmentsResult, item) => {
const projects = roleAssignmentsResult.role_assignments.filter(
(it) =>
it.group &&
it.group.id === item.id &&
it.scope &&
it.scope.project &&
it.scope.project.id
);
item.projects = projects;
item.project_num = projects.length;
return item;
};
@action
async fetchList({
limit,
page,
sortKey,
sortOrder,
conditions,
...filters
} = {}) {
this.list.isLoading = true;
// todo: no page, no limit, fetch all
const params = { ...filters };
const result = await this.client.list(params);
const roleAssignmentsResult = await this.roleAssignmentClient.list();
const data = get(result, this.listResponseKey, []);
Promise.all(
data.map(
(it) => this.client.users.list(it.id)
// const { users } = userResult;
// return { ...it, users };
)
).then((rest) => {
const addUserItem = data.map((it, index) => {
const { users } = rest[index];
const userIds = users.map((user) => user.id);
const userInfo = users.map((user) => ({
id: user.id,
name: user.name,
}));
it.users = userIds;
it.user_num = users.length;
it.user_info = userInfo;
return it;
});
const items = addUserItem.map((item) =>
this.mapperProject(roleAssignmentsResult, item)
);
// const items = addUserItem.map(this.mapperProject);
this.list.update({
data: items,
total: items.length || 0,
limit: Number(limit) || 10,
page: Number(page) || 1,
sortKey,
sortOrder,
filters,
isLoading: false,
...(this.list.silent ? {} : { selectedRowKeys: [] }),
});
return items;
});
}
@action
async fetchDetail({ id, silent }) {
if (!silent) {
this.isLoading = true;
}
const [roleAssignmentsResult, groupResult, usersInGroup] =
await Promise.all([
this.roleAssignmentClient.list(),
this.client.show(id),
this.client.users.list(id),
]);
const originData = get(groupResult, this.responseKey) || groupResult;
const { users } = usersInGroup;
const userIds = users.map((user) => user.id);
originData.users = userIds;
originData.user_num = users.length;
originData.user_info = users.map((user) => ({
id: user.id,
name: user.name,
}));
const group = this.mapperProject(roleAssignmentsResult, originData);
this.detail = group;
this.isLoading = false;
return this.detail;
}
@action
async fetchGroupData() {
const result = await this.client.list();
const { groups } = result;
return groups;
}
@action
async fetchListInRoleDetail({
limit,
page,
sortKey,
sortOrder,
conditions,
...filters
} = {}) {
this.list.isLoading = true;
const { roleId } = filters;
const params = {};
const [roleAssignmentsResult, projectResult, result] = await Promise.all([
this.roleAssignmentClient.list(),
this.projectClient.list(),
this.client.list(params),
]);
const projectRoleUsers = {};
const systemRoleUsers = {};
roleAssignmentsResult.role_assignments.forEach((roleAssignment) => {
if (roleAssignment.group) {
const {
group: { id: group_id },
role: { id: role_id },
scope: { project, system } = {},
} = roleAssignment;
if (role_id === roleId && project) {
const projectData = projectResult.projects.find(
(it) => it.id === project.id
);
if (projectRoleUsers[group_id]) {
projectRoleUsers[group_id].push(projectData.name);
updateUserGroup = (group, roleAssignments, roles, domains, projects) => {
const projectMapRoles = {};
const { id } = group || {};
roleAssignments.forEach((roleAssignment) => {
const {
scope: { project: { id: projectId } = {} } = {},
group: { id: groupId } = {},
role: { id: roleId } = {},
} = roleAssignment;
if (groupId === id && roleId) {
const roleItem = roles.find((it) => it.id === roleId);
if (projectId) {
if (!projectMapRoles[projectId]) {
const projectItem = projects.find((it) => it.id === projectId);
projectMapRoles[projectId] = {
project: projectItem,
roles: [roleItem],
};
} else {
projectRoleUsers[group_id] = [projectData.name];
projectMapRoles[projectId].roles = [
...projectMapRoles[projectId].roles,
roleItem,
];
}
} else if (role_id === roleId && system) {
systemRoleUsers[group_id] = system.all;
}
}
});
const data = get(result, this.listResponseKey, []);
const items = data
.filter((it) => projectRoleUsers[it.id] || systemRoleUsers[it.id])
.map((it) => ({
projectScope: projectRoleUsers[it.id] || [],
systemScope: systemRoleUsers[it.id] || [],
...it,
}));
const domain = domains.find((it) => it.id === group.domain_id);
return {
...group,
projects: projectMapRoles,
projectCount: Object.keys(projectMapRoles).length,
domain,
domainName: (domain || {}).name || group.domain_id,
};
};
// const items = data.map(this.mapper);
// const newData = await this.listDidFetch(items);
Promise.all(data.map((it) => this.client.users.list(it.id))).then(
(rest) => {
items.map((it, index) => {
const { users } = rest[index];
const userIds = users.map((user) => user.id);
const userInfo = users.map((user) => ({
id: user.id,
name: user.name,
}));
it.users = userIds;
it.user_num = users.length;
it.user_info = userInfo;
return it;
});
this.list.update({
data: items,
total: items.length || 0,
limit: Number(limit) || 10,
page: Number(page) || 1,
sortKey,
sortOrder,
filters,
isLoading: false,
...(this.list.silent ? {} : { selectedRowKeys: [] }),
});
async listDidFetch(items, allProjects, filters) {
if (!items.length) {
return items;
}
const { projectId, roleId, withRole = true } = filters;
const params = {};
if (projectId) {
params['project.id'] = projectId;
}
if (roleId) {
params['role.id'] = roleId;
}
const [roleAssignmentResult, roleResult, domainResult, projectsResult] =
await Promise.all([
withRole ? this.roleAssignmentClient.list(params) : null,
withRole ? this.roleClient.list() : null,
this.domainClient.list(),
withRole ? this.projectClient.list() : null,
]);
const { roles = [] } = roleResult || {};
const { domains = [] } = domainResult;
const { projects = [] } = projectsResult || {};
const { role_assignments: assigns = [] } = roleAssignmentResult || {};
const newItems = items.map((group) => {
return this.updateUserGroup(group, assigns, roles, domains, projects);
});
if (projectId || roleId) {
return newItems.filter((it) => it.projectCount);
}
return newItems;
}
return items;
}
);
async detailDidFetch(item) {
const { id } = item;
const [domainResult, userResult] = await Promise.all([
this.domainClient.list(),
this.client.users.list(id),
]);
const { domains = [] } = domainResult;
const { users = [] } = userResult;
const newItem = this.updateUserGroup(item, [], [], domains, []);
newItem.userCount = users.length;
return newItem;
}
}

28
src/stores/keystone/user.js
View File

@ -96,7 +96,9 @@ export class UserStore extends Base {
if (select_user_group[0] || select_project[0]) {
const newProjects = Object.keys(newProjectRoles);
select_user_group.forEach((id) => {
promiseList.push(globalGroupStore.addGroupUsers({ id, user_id }));
promiseList.push(
globalGroupStore.addGroupUsers({ id, userId: user_id })
);
});
select_project.forEach((id) => {
if (!newProjects.includes(id)) {
@ -128,9 +130,10 @@ export class UserStore extends Base {
get mapper() {
return (item) => {
const domain = this.domains.filter((it) => it.id === item.domain_id);
if (domain[0]) {
item.domain_name = domain[0].name;
const domain = this.domains.find((it) => it.id === item.domain_id);
if (domain) {
item.domain_name = domain.name;
item.domainName = domain.name;
}
return item;
};
@ -624,6 +627,23 @@ export class UserStore extends Base {
return newData;
}
@action
async fetchAllWithDomain() {
this.list.isLoading = true;
await this.fetchDomain();
const result = await this.client.list();
const data = get(result, this.listResponseKey, []);
const items = data.map(this.mapper);
const newData = await this.listDidFetch(items);
this.list.update({
data: newData,
total: items.length || 0,
isLoading: false,
});
return items;
}
}
const globalUserStore = new UserStore();