feat: finish policy list management (#1317)

This commit is contained in:
Yaodong Yu
2022-11-25 16:02:20 +08:00
committed by GitHub
parent b337b908ea
commit b10fb97c92
16 changed files with 582 additions and 153 deletions

View File

@ -13,7 +13,7 @@
// limitations under the License.
import React from "react";
import {Button, Card, Col, Input, InputNumber, Row, Select, Switch, Table, Tooltip} from "antd";
import {Button, Card, Col, Input, InputNumber, Row, Select, Switch} from "antd";
import * as AdapterBackend from "./backend/AdapterBackend";
import * as OrganizationBackend from "./backend/OrganizationBackend";
import * as Setting from "./Setting";
@ -21,7 +21,7 @@ import i18next from "i18next";
import "codemirror/lib/codemirror.css";
import * as ModelBackend from "./backend/ModelBackend";
import {EditOutlined, MinusOutlined} from "@ant-design/icons";
import PolicyTable from "./common/PoliciyTable";
require("codemirror/theme/material-darker.css");
require("codemirror/mode/javascript/javascript");
@ -32,12 +32,11 @@ class AdapterEditPage extends React.Component {
super(props);
this.state = {
classes: props,
organizationName: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
owner: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
adapterName: props.match.params.adapterName,
adapter: null,
organizations: [],
models: [],
policyLists: [],
mode: props.location.mode !== undefined ? props.location.mode : "edit",
};
}
@ -48,7 +47,7 @@ class AdapterEditPage extends React.Component {
}
getAdapter() {
AdapterBackend.getAdapter(this.state.organizationName, this.state.adapterName)
AdapterBackend.getAdapter(this.state.owner, this.state.adapterName)
.then((adapter) => {
this.setState({
adapter: adapter,
@ -93,93 +92,6 @@ class AdapterEditPage extends React.Component {
});
}
synPolicies() {
this.setState({loading: true});
AdapterBackend.syncPolicies(this.state.adapter.owner, this.state.adapter.name)
.then((res) => {
this.setState({loading: false, policyLists: res});
})
.catch(error => {
this.setState({loading: false});
Setting.showMessage("error", `Adapter failed to get policies: ${error}`);
});
}
renderTable(table) {
const columns = [
{
title: "Rule Type",
dataIndex: "PType",
key: "PType",
width: "100px",
},
{
title: "V0",
dataIndex: "V0",
key: "V0",
width: "100px",
},
{
title: "V1",
dataIndex: "V1",
key: "V1",
width: "100px",
},
{
title: "V2",
dataIndex: "V2",
key: "V2",
width: "100px",
},
{
title: "V3",
dataIndex: "V3",
key: "V3",
width: "100px",
},
{
title: "V4",
dataIndex: "V4",
key: "V4",
width: "100px",
},
{
title: "V5",
dataIndex: "V5",
key: "V5",
width: "100px",
},
{
title: "Option",
key: "option",
width: "100px",
render: (text, record, index) => {
return (
<div>
<Tooltip placement="topLeft" title="Edit">
<Button style={{marginRight: "0.5rem"}} icon={<EditOutlined />} size="small" />
</Tooltip>
<Tooltip placement="topLeft" title="Delete">
<Button icon={<MinusOutlined />} size="small" />
</Tooltip>
</div>
);
},
}];
return (
<div>
<Table
pagination={{
defaultPageSize: 10,
}}
columns={columns} dataSource={table} rowKey="name" size="middle" bordered
loading={this.state.loading}
/>
</div>
);
}
renderAdapter() {
return (
<Card size="small" title={
@ -329,19 +241,8 @@ class AdapterEditPage extends React.Component {
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("adapter:Policies"), i18next.t("adapter:Policies - Tooltip"))} :
</Col>
<Col span={2}>
<Button type="primary" onClick={() => {this.synPolicies();}}>
{i18next.t("adapter:Sync")}
</Button>
</Col>
</Row>
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
</Col>
<Col span={22} >
{
this.renderTable(this.state.policyLists)
}
<Col span={22}>
<PolicyTable owner={this.state.owner} name={this.state.adapterName} mode={this.state.mode} />
</Col>
</Row>
<Row style={{marginTop: "20px"}} >
@ -371,7 +272,7 @@ class AdapterEditPage extends React.Component {
if (willExist) {
this.props.history.push("/adapters");
} else {
this.props.history.push(`/adapters/${this.state.adapter.name}`);
this.props.history.push(`/adapters/${this.state.owner}/${this.state.adapter.name}`);
}
} else {
Setting.showMessage("error", res.msg);

View File

@ -45,7 +45,7 @@ class AdapterListPage extends BaseListPage {
const newAdapter = this.newAdapter();
AdapterBackend.addAdapter(newAdapter)
.then((res) => {
this.props.history.push({pathname: `/adapters/${newAdapter.owner}/${newAdapter.name}`, mode: "add"});
this.props.history.push({pathname: `/adapters/${newAdapter.organization}/${newAdapter.name}`, mode: "add"});
}
)
.catch(error => {

View File

@ -416,9 +416,7 @@ export function goToLinkSoft(ths, link) {
}
export function showMessage(type, text) {
if (type === "") {
return;
} else if (type === "success") {
if (type === "success") {
message.success(text);
} else if (type === "error") {
message.error(text);
@ -445,8 +443,8 @@ export function deepCopy(obj) {
return Object.assign({}, obj);
}
export function addRow(array, row) {
return [...array, row];
export function addRow(array, row, position = "end") {
return position === "end" ? [...array, row] : [row, ...array];
}
export function prependRow(array, row) {

View File

@ -70,6 +70,41 @@ export function deleteAdapter(Adapter) {
}).then(res => res.json());
}
export function UpdatePolicy(owner, name, policy) {
// eslint-disable-next-line no-console
console.log(policy);
return fetch(`${Setting.ServerUrl}/api/update-policy?id=${owner}/${encodeURIComponent(name)}`, {
method: "POST",
credentials: "include",
body: JSON.stringify(policy),
headers: {
"Accept-Language": Setting.getAcceptLanguage(),
},
}).then(res => res.json());
}
export function AddPolicy(owner, name, policy) {
return fetch(`${Setting.ServerUrl}/api/add-policy?id=${owner}/${encodeURIComponent(name)}`, {
method: "POST",
credentials: "include",
body: JSON.stringify(policy),
headers: {
"Accept-Language": Setting.getAcceptLanguage(),
},
}).then(res => res.json());
}
export function RemovePolicy(owner, name, policy) {
return fetch(`${Setting.ServerUrl}/api/remove-policy?id=${owner}/${encodeURIComponent(name)}`, {
method: "POST",
credentials: "include",
body: JSON.stringify(policy),
headers: {
"Accept-Language": Setting.getAcceptLanguage(),
},
}).then(res => res.json());
}
export function syncPolicies(owner, name) {
return fetch(`${Setting.ServerUrl}/api/sync-policies?id=${owner}/${encodeURIComponent(name)}`, {
method: "GET",

View File

@ -0,0 +1,308 @@
// Copyright 2022 The Casdoor Authors. All Rights Reserved.
//
// 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 React from "react";
import {DeleteOutlined, EditOutlined} from "@ant-design/icons";
import {Button, Input, Popconfirm, Table, Tooltip} from "antd";
import * as Setting from "../Setting";
import * as AdapterBackend from "../backend/AdapterBackend";
import i18next from "i18next";
class PolicyTable extends React.Component {
constructor(props) {
super(props);
this.state = {
policyLists: [],
loading: false,
editingIndex: "",
oldPolicy: "",
add: false,
};
}
UNSAFE_componentWillMount() {
if (this.props.mode === "edit") {
this.synPolicies();
}
}
isEditing = (index) => {
return index === this.state.editingIndex;
};
edit = (record, index) => {
this.setState({editingIndex: index, oldPolicy: Setting.deepCopy(record)});
};
cancel = (table, index) => {
Object.keys(table[index]).forEach((key) => {
table[index][key] = this.state.oldPolicy[key];
});
this.updateTable(table);
this.setState({editingIndex: "", oldPolicy: ""});
if (this.state.add) {
this.deleteRow(this.state.policyLists, index);
this.setState({add: false});
}
};
updateTable(table) {
this.setState({policyLists: table});
}
updateField(table, index, key, value) {
table[index][key] = value;
this.updateTable(table);
}
addRow(table) {
const row = {Ptype: "p"};
if (table === undefined) {
table = [];
}
table = Setting.addRow(table, row, "top");
this.updateTable(table);
this.edit(row, 0);
this.setState({add: true});
}
deleteRow(table, i) {
table = Setting.deleteRow(table, i);
this.updateTable(table);
}
save(table, i) {
this.state.add ? this.addPolicy(table, i) : this.updatePolicy(table, i);
}
synPolicies() {
this.setState({loading: true});
AdapterBackend.syncPolicies(this.props.owner, this.props.name)
.then((res) => {
if (res.status !== "error") {
this.setState({loading: false, policyLists: res});
} else {
this.setState({loading: false});
Setting.showMessage("error", `Adapter failed to get policies, ${res.msg}`);
}
})
.catch(error => {
this.setState({loading: false});
Setting.showMessage("error", `Adapter failed to get policies, ${error}`);
});
}
updatePolicy(table, i) {
AdapterBackend.UpdatePolicy(this.props.owner, this.props.name, [this.state.oldPolicy, table[i]]).then(res => {
if (res.status === "ok") {
this.setState({editingIndex: "", oldPolicy: ""});
Setting.showMessage("success", i18next.t("adapter:Update policy successfully"));
} else {
Setting.showMessage("error", i18next.t(`adapter:Update policy failed, ${res.msg}`));
}
});
}
addPolicy(table, i) {
AdapterBackend.AddPolicy(this.props.owner, this.props.name, table[i]).then(res => {
if (res.status === "ok") {
this.setState({editingIndex: "", oldPolicy: "", add: false});
if (res.data !== "Affected") {
Setting.showMessage("info", i18next.t("adapter:Repeated policy"));
} else {
Setting.showMessage("success", i18next.t("adapter:Add policy successfully"));
}
} else {
Setting.showMessage("error", i18next.t(`adapter:Add policy failed, ${res.msg}`));
}
});
}
deletePolicy(table, i) {
AdapterBackend.RemovePolicy(this.props.owner, this.props.name, table[i]).then(res => {
if (res.status === "ok") {
table = Setting.deleteRow(table, i);
this.updateTable(table);
Setting.showMessage("success", i18next.t("adapter:Delete policy successfully"));
} else {
Setting.showMessage("error", i18next.t(`adapter:Delete policy failed, ${res.msg}`));
}
});
}
renderTable(table) {
const columns = [
{
title: "Rule Type",
dataIndex: "Ptype",
width: "100px",
// render: (text, record, index) => {
// const editing = this.isEditing(index);
// return (
// editing ?
// <Input value={text} onChange={e => {
// this.updateField(table, index, "Ptype", e.target.value);
// }} />
// : text
// );
// },
},
{
title: "V0",
dataIndex: "V0",
width: "100px",
render: (text, record, index) => {
const editing = this.isEditing(index);
return (
editing ?
<Input value={text} onChange={e => {
this.updateField(table, index, "V0", e.target.value);
}} />
: text
);
},
},
{
title: "V1",
dataIndex: "V1",
width: "100px",
render: (text, record, index) => {
const editing = this.isEditing(index);
return (
editing ?
<Input value={text} onChange={e => {
this.updateField(table, index, "V1", e.target.value);
}} />
: text
);
},
},
{
title: "V2",
dataIndex: "V2",
width: "100px",
render: (text, record, index) => {
const editing = this.isEditing(index);
return (
editing ?
<Input value={text} onChange={e => {
this.updateField(table, index, "V2", e.target.value);
}} />
: text
);
},
},
{
title: "V3",
dataIndex: "V3",
width: "100px",
render: (text, record, index) => {
const editing = this.isEditing(index);
return (
editing ?
<Input value={text} onChange={e => {
this.updateField(table, index, "V3", e.target.value);
}} />
: text
);
},
},
{
title: "V4",
dataIndex: "V4",
width: "100px",
render: (text, record, index) => {
const editing = this.isEditing(index);
return (
editing ?
<Input value={text} onChange={e => {
this.updateField(table, index, "V4", e.target.value);
}} />
: text
);
},
},
{
title: "V5",
dataIndex: "V5",
width: "100px",
render: (text, record, index) => {
const editing = this.isEditing(index);
return (
editing ?
<Input value={text} onChange={e => {
this.updateField(table, index, "V5", e.target.value);
}} />
: text
);
},
},
{
title: "Option",
key: "option",
width: "100px",
render: (text, record, index) => {
const editable = this.isEditing(index);
return editable ? (
<span>
<Button style={{marginRight: 8}} onClick={() => this.save(table, index)}>
Save
</Button>
<Popconfirm title="Sure to cancel?" onConfirm={() => this.cancel(table, index)}>
<a>Cancel</a>
</Popconfirm>
</span>
) : (
<div>
<Tooltip placement="topLeft" title="Edit">
<Button disabled={this.state.editingIndex !== ""} style={{marginRight: "5px"}} icon={<EditOutlined />} size="small" onClick={() => this.edit(record, index)} />
</Tooltip>
<Tooltip placement="topLeft" title="Delete">
<Button disabled={this.state.editingIndex !== ""} style={{marginRight: "5px"}} icon={<DeleteOutlined />} size="small" onClick={() => this.deletePolicy(table, index)} />
</Tooltip>
</div>
);
},
}];
return (
<Table
pagination={{
defaultPageSize: 10,
}}
columns={columns} dataSource={table} rowKey="index" size="middle" bordered
loading={this.state.loading}
title={() => (
<div>
<Button disabled={this.state.editingIndex !== ""} style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
</div>
)}
/>
);
}
render() {
return (<>
<Button type="primary" onClick={() => {this.synPolicies();}}>
{i18next.t("adapter:Sync")}
</Button>
{
this.renderTable(this.state.policyLists)
}
</>
);
}
}
export default PolicyTable;

View File

@ -6,11 +6,15 @@
"Sign Up": "Registrieren"
},
"adapter": {
"Add policy successfully": "Add policy successfully",
"Delete policy successfully": "Delete policy successfully",
"Edit Adapter": "Edit Adapter",
"New Adapter": "New Adapter",
"Policies": "Policies",
"Policies - Tooltip": "Policies - Tooltip",
"Sync": "Sync"
"Repeated policy": "Repeated policy",
"Sync": "Sync",
"Update policy successfully": "Update policy successfully"
},
"application": {
"Always": "Always",
@ -555,6 +559,7 @@
"UserInfo URL": "UserInfo URL",
"UserInfo URL - Tooltip": "UserInfo URL - Tooltip",
"Visible": "Visible",
"admin (share)": "admin (share)",
"alertType": "alarmtyp"
},
"record": {

View File

@ -6,11 +6,15 @@
"Sign Up": "Sign Up"
},
"adapter": {
"Add policy successfully": "Add policy successfully",
"Delete policy successfully": "Delete policy successfully",
"Edit Adapter": "Edit Adapter",
"New Adapter": "New Adapter",
"Policies": "Policies",
"Policies - Tooltip": "Policies - Tooltip",
"Sync": "Sync"
"Repeated policy": "Repeated policy",
"Sync": "Sync",
"Update policy successfully": "Update policy successfully"
},
"application": {
"Always": "Always",
@ -555,6 +559,7 @@
"UserInfo URL": "UserInfo URL",
"UserInfo URL - Tooltip": "UserInfo URL - Tooltip",
"Visible": "Visible",
"admin (share)": "admin (share)",
"alertType": "alertType"
},
"record": {

View File

@ -6,11 +6,15 @@
"Sign Up": "S'inscrire"
},
"adapter": {
"Add policy successfully": "Add policy successfully",
"Delete policy successfully": "Delete policy successfully",
"Edit Adapter": "Edit Adapter",
"New Adapter": "New Adapter",
"Policies": "Policies",
"Policies - Tooltip": "Policies - Tooltip",
"Sync": "Sync"
"Repeated policy": "Repeated policy",
"Sync": "Sync",
"Update policy successfully": "Update policy successfully"
},
"application": {
"Always": "Always",
@ -555,6 +559,7 @@
"UserInfo URL": "UserInfo URL",
"UserInfo URL - Tooltip": "UserInfo URL - Tooltip",
"Visible": "Visible",
"admin (share)": "admin (share)",
"alertType": "Type d'alerte"
},
"record": {

View File

@ -6,11 +6,15 @@
"Sign Up": "新規登録"
},
"adapter": {
"Add policy successfully": "Add policy successfully",
"Delete policy successfully": "Delete policy successfully",
"Edit Adapter": "Edit Adapter",
"New Adapter": "New Adapter",
"Policies": "Policies",
"Policies - Tooltip": "Policies - Tooltip",
"Sync": "Sync"
"Repeated policy": "Repeated policy",
"Sync": "Sync",
"Update policy successfully": "Update policy successfully"
},
"application": {
"Always": "Always",
@ -555,6 +559,7 @@
"UserInfo URL": "UserInfo URL",
"UserInfo URL - Tooltip": "UserInfo URL - Tooltip",
"Visible": "Visible",
"admin (share)": "admin (share)",
"alertType": "alertType"
},
"record": {

View File

@ -6,11 +6,15 @@
"Sign Up": "Sign Up"
},
"adapter": {
"Add policy successfully": "Add policy successfully",
"Delete policy successfully": "Delete policy successfully",
"Edit Adapter": "Edit Adapter",
"New Adapter": "New Adapter",
"Policies": "Policies",
"Policies - Tooltip": "Policies - Tooltip",
"Sync": "Sync"
"Repeated policy": "Repeated policy",
"Sync": "Sync",
"Update policy successfully": "Update policy successfully"
},
"application": {
"Always": "Always",
@ -555,6 +559,7 @@
"UserInfo URL": "UserInfo URL",
"UserInfo URL - Tooltip": "UserInfo URL - Tooltip",
"Visible": "Visible",
"admin (share)": "admin (share)",
"alertType": "alertType"
},
"record": {

View File

@ -6,11 +6,15 @@
"Sign Up": "Регистрация"
},
"adapter": {
"Add policy successfully": "Add policy successfully",
"Delete policy successfully": "Delete policy successfully",
"Edit Adapter": "Edit Adapter",
"New Adapter": "New Adapter",
"Policies": "Policies",
"Policies - Tooltip": "Policies - Tooltip",
"Sync": "Sync"
"Repeated policy": "Repeated policy",
"Sync": "Sync",
"Update policy successfully": "Update policy successfully"
},
"application": {
"Always": "Always",
@ -555,6 +559,7 @@
"UserInfo URL": "UserInfo URL",
"UserInfo URL - Tooltip": "UserInfo URL - Tooltip",
"Visible": "Visible",
"admin (share)": "admin (share)",
"alertType": "тип оповещения"
},
"record": {

View File

@ -6,11 +6,15 @@
"Sign Up": "注册"
},
"adapter": {
"Add policy successfully": "添加策略成功",
"Delete policy successfully": "删除策略成功",
"Edit Adapter": "编辑适配器",
"New Adapter": "添加适配器",
"Policies": "策略",
"Policies - Tooltip": "策略",
"Sync": "同步"
"Repeated policy": "策略重复",
"Sync": "同步",
"Update policy successfully": "更新策略成功"
},
"application": {
"Always": "始终开启",
@ -555,6 +559,7 @@
"UserInfo URL": "UserInfo URL",
"UserInfo URL - Tooltip": "UserInfo URL - 工具提示",
"Visible": "是否可见",
"admin (share)": "admin (share)",
"alertType": "警报类型"
},
"record": {