feat: add model page (#757)

* feat: add model page

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

* feat: support config model for permission

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

* translation and indentation

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

controllers/model.go

@@ -0,0 +1,120 @@
+// Copyright 2021 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.
+
+package controllers
+
+import (
+	"encoding/json"
+
+	"github.com/astaxie/beego/utils/pagination"
+	"github.com/casdoor/casdoor/object"
+	"github.com/casdoor/casdoor/util"
+)
+
+// GetModels
+// @Title GetModels
+// @Tag Model API
+// @Description get models
+// @Param   owner     query    string  true        "The owner of models"
+// @Success 200 {array} object.Model The Response object
+// @router /get-models [get]
+func (c *ApiController) GetModels() {
+	owner := c.Input().Get("owner")
+	limit := c.Input().Get("pageSize")
+	page := c.Input().Get("p")
+	field := c.Input().Get("field")
+	value := c.Input().Get("value")
+	sortField := c.Input().Get("sortField")
+	sortOrder := c.Input().Get("sortOrder")
+	if limit == "" || page == "" {
+		c.Data["json"] = object.GetModels(owner)
+		c.ServeJSON()
+	} else {
+		limit := util.ParseInt(limit)
+		paginator := pagination.SetPaginator(c.Ctx, limit, int64(object.GetModelCount(owner, field, value)))
+		models := object.GetPaginationModels(owner, paginator.Offset(), limit, field, value, sortField, sortOrder)
+		c.ResponseOk(models, paginator.Nums())
+	}
+}
+
+// GetModel
+// @Title GetModel
+// @Tag Model API
+// @Description get model
+// @Param   id    query    string  true        "The id of the model"
+// @Success 200 {object} object.Model The Response object
+// @router /get-model [get]
+func (c *ApiController) GetModel() {
+	id := c.Input().Get("id")
+
+	c.Data["json"] = object.GetModel(id)
+	c.ServeJSON()
+}
+
+// UpdateModel
+// @Title UpdateModel
+// @Tag Model API
+// @Description update model
+// @Param   id    query    string  true        "The id of the model"
+// @Param   body    body   object.Model  true        "The details of the model"
+// @Success 200 {object} controllers.Response The Response object
+// @router /update-model [post]
+func (c *ApiController) UpdateModel() {
+	id := c.Input().Get("id")
+
+	var model object.Model
+	err := json.Unmarshal(c.Ctx.Input.RequestBody, &model)
+	if err != nil {
+		panic(err)
+	}
+
+	c.Data["json"] = wrapActionResponse(object.UpdateModel(id, &model))
+	c.ServeJSON()
+}
+
+// AddModel
+// @Title AddModel
+// @Tag Model API
+// @Description add model
+// @Param   body    body   object.Model  true        "The details of the model"
+// @Success 200 {object} controllers.Response The Response object
+// @router /add-model [post]
+func (c *ApiController) AddModel() {
+	var model object.Model
+	err := json.Unmarshal(c.Ctx.Input.RequestBody, &model)
+	if err != nil {
+		panic(err)
+	}
+
+	c.Data["json"] = wrapActionResponse(object.AddModel(&model))
+	c.ServeJSON()
+}
+
+// DeleteModel
+// @Title DeleteModel
+// @Tag Model API
+// @Description delete model
+// @Param   body    body   object.Model  true        "The details of the model"
+// @Success 200 {object} controllers.Response The Response object
+// @router /delete-model [post]
+func (c *ApiController) DeleteModel() {
+	var model object.Model
+	err := json.Unmarshal(c.Ctx.Input.RequestBody, &model)
+	if err != nil {
+		panic(err)
+	}
+
+	c.Data["json"] = wrapActionResponse(object.DeleteModel(&model))
+	c.ServeJSON()
+}

object/adapter.go

@@ -138,6 +138,11 @@ func (a *Adapter) createTable() {
 		panic(err)
 	}
 
+	err = a.Engine.Sync2(new(Model))
+	if err != nil {
+		panic(err)
+	}
+
 	err = a.Engine.Sync2(new(Provider))
 	if err != nil {
 		panic(err)

object/model.go

@@ -0,0 +1,122 @@
+// Copyright 2021 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.
+
+package object
+
+import (
+	"fmt"
+
+	"github.com/casdoor/casdoor/util"
+	"xorm.io/core"
+)
+
+type Model struct {
+	Owner       string `xorm:"varchar(100) notnull pk" json:"owner"`
+	Name        string `xorm:"varchar(100) notnull pk" json:"name"`
+	CreatedTime string `xorm:"varchar(100)" json:"createdTime"`
+	DisplayName string `xorm:"varchar(100)" json:"displayName"`
+
+	ModelText 	string `xorm:"mediumtext" json:"modelText"`
+	IsEnabled 	bool   `json:"isEnabled"`
+}
+
+func GetModelCount(owner, field, value string) int {
+	session := GetSession(owner, -1, -1, field, value, "", "")
+	count, err := session.Count(&Model{})
+	if err != nil {
+		panic(err)
+	}
+
+	return int(count)
+}
+
+func GetModels(owner string) []*Model {
+	models := []*Model{}
+	err := adapter.Engine.Desc("created_time").Find(&models, &Model{Owner: owner})
+	if err != nil {
+		panic(err)
+	}
+
+	return models
+}
+
+func GetPaginationModels(owner string, offset, limit int, field, value, sortField, sortOrder string) []*Model {
+	models := []*Model{}
+	session := GetSession(owner, offset, limit, field, value, sortField, sortOrder)
+	err := session.Find(&models)
+	if err != nil {
+		panic(err)
+	}
+
+	return models
+}
+
+func getModel(owner string, name string) *Model {
+	if owner == "" || name == "" {
+		return nil
+	}
+
+	model := Model{Owner: owner, Name: name}
+	existed, err := adapter.Engine.Get(&model)
+	if err != nil {
+		panic(err)
+	}
+
+	if existed {
+		return &model
+	} else {
+		return nil
+	}
+}
+
+func GetModel(id string) *Model {
+	owner, name := util.GetOwnerAndNameFromId(id)
+	return getModel(owner, name)
+}
+
+func UpdateModel(id string, model *Model) bool {
+	owner, name := util.GetOwnerAndNameFromId(id)
+	if getModel(owner, name) == nil {
+		return false
+	}
+
+	affected, err := adapter.Engine.ID(core.PK{owner, name}).AllCols().Update(model)
+	if err != nil {
+		panic(err)
+	}
+
+	return affected != 0
+}
+
+func AddModel(model *Model) bool {
+	affected, err := adapter.Engine.Insert(model)
+	if err != nil {
+		panic(err)
+	}
+
+	return affected != 0
+}
+
+func DeleteModel(model *Model) bool {
+	affected, err := adapter.Engine.ID(core.PK{model.Owner, model.Name}).Delete(&Model{})
+	if err != nil {
+		panic(err)
+	}
+
+	return affected != 0
+}
+
+func (model *Model) GetId() string {
+	return fmt.Sprintf("%s/%s", model.Owner, model.Name)
+}

object/permission.go

@@ -30,6 +30,7 @@ type Permission struct {
 	Users []string `xorm:"mediumtext" json:"users"`
 	Roles []string `xorm:"mediumtext" json:"roles"`
 
+	Model        string   `xorm:"varchar(100)" json:"model"`
 	ResourceType string   `xorm:"varchar(100)" json:"resourceType"`
 	Resources    []string `xorm:"mediumtext" json:"resources"`
 	Actions      []string `xorm:"mediumtext" json:"actions"`

routers/router.go

@@ -84,6 +84,12 @@ func initAPI() {
 	beego.Router("/api/add-permission", &controllers.ApiController{}, "POST:AddPermission")
 	beego.Router("/api/delete-permission", &controllers.ApiController{}, "POST:DeletePermission")
 
+	beego.Router("/api/get-models", &controllers.ApiController{}, "GET:GetModels")
+	beego.Router("/api/get-model", &controllers.ApiController{}, "GET:GetModel")
+	beego.Router("/api/update-model", &controllers.ApiController{}, "POST:UpdateModel")
+	beego.Router("/api/add-model", &controllers.ApiController{}, "POST:AddModel")
+	beego.Router("/api/delete-model", &controllers.ApiController{}, "POST:DeleteModel")
+
 	beego.Router("/api/set-password", &controllers.ApiController{}, "POST:SetPassword")
 	beego.Router("/api/check-user-password", &controllers.ApiController{}, "POST:CheckUserPassword")
 	beego.Router("/api/get-email-and-phone", &controllers.ApiController{}, "POST:GetEmailAndPhone")

web/src/App.js

@@ -69,6 +69,8 @@ import PromptPage from "./auth/PromptPage";
 import OdicDiscoveryPage from "./auth/OidcDiscoveryPage";
 import SamlCallback from './auth/SamlCallback';
 import CasLogout from "./auth/CasLogout";
+import ModelListPage from "./ModelListPage";
+import ModelEditPage from "./ModelEditPage";
 
 const { Header, Footer } = Layout;
 
@@ -118,6 +120,8 @@ class App extends Component {
       this.setState({ selectedMenuKey: '/roles' });
     } else if (uri.includes('/permissions')) {
       this.setState({ selectedMenuKey: '/permissions' });
+    } else if (uri.includes('/models')) {
+      this.setState({ selectedMenuKey: '/models' });
     } else if (uri.includes('/providers')) {
       this.setState({ selectedMenuKey: '/providers' });
     } else if (uri.includes('/applications')) {
@@ -382,6 +386,13 @@ class App extends Component {
           </Link>
         </Menu.Item>
       );
+      res.push(
+        <Menu.Item key="/models">
+          <Link to="/models">
+            {i18next.t("general:Models")}
+          </Link>
+        </Menu.Item>
+      );
       res.push(
         <Menu.Item key="/providers">
           <Link to="/providers">
@@ -514,6 +525,8 @@ class App extends Component {
           <Route exact path="/roles/:organizationName/:roleName" render={(props) => this.renderLoginIfNotLoggedIn(<RoleEditPage account={this.state.account} {...props} />)}/>
           <Route exact path="/permissions" render={(props) => this.renderLoginIfNotLoggedIn(<PermissionListPage account={this.state.account} {...props} />)}/>
           <Route exact path="/permissions/:organizationName/:permissionName" render={(props) => this.renderLoginIfNotLoggedIn(<PermissionEditPage account={this.state.account} {...props} />)}/>
+          <Route exact path="/models" render={(props) => this.renderLoginIfNotLoggedIn(<ModelListPage account={this.state.account} {...props} />)}/>
+          <Route exact path="/models/:organizationName/:modelName" render={(props) => this.renderLoginIfNotLoggedIn(<ModelEditPage account={this.state.account} {...props} />)}/>
           <Route exact path="/providers" render={(props) => this.renderLoginIfNotLoggedIn(<ProviderListPage account={this.state.account} {...props} />)}/>
           <Route exact path="/providers/:providerName" render={(props) => this.renderLoginIfNotLoggedIn(<ProviderEditPage account={this.state.account} {...props} />)}/>
           <Route exact path="/applications" render={(props) => this.renderLoginIfNotLoggedIn(<ApplicationListPage account={this.state.account} {...props} />)}/>

web/src/ModelEditPage.js

@@ -0,0 +1,208 @@
+// Copyright 2021 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 {Button, Card, Col, Input, Row, Select, Switch} from 'antd';
+import * as ModelBackend from "./backend/ModelBackend";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+import TextArea from "antd/es/input/TextArea";
+
+const { Option } = Select;
+
+class ModelEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      organizationName: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
+      modelName: props.match.params.modelName,
+      model: null,
+      organizations: [],
+      users: [],
+      models: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getModel();
+    this.getOrganizations();
+  }
+
+  getModel() {
+    ModelBackend.getModel(this.state.organizationName, this.state.modelName)
+      .then((model) => {
+        this.setState({
+          model: model,
+        });
+
+        this.getModels(model.owner);
+      });
+  }
+
+  getOrganizations() {
+    OrganizationBackend.getOrganizations("admin")
+      .then((res) => {
+        this.setState({
+          organizations: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  getModels(organizationName) {
+    ModelBackend.getModels(organizationName)
+      .then((res) => {
+        this.setState({
+          models: res,
+        });
+      });
+  }
+
+  parseModelField(key, value) {
+    if ([""].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateModelField(key, value) {
+    value = this.parseModelField(key, value);
+
+    let model = this.state.model;
+    model[key] = value;
+    this.setState({
+      model: model,
+    });
+  }
+
+  renderModel() {
+    return (
+      <Card size="small" title={
+        <div>
+          {this.state.mode === "add" ? i18next.t("model:New Model") : i18next.t("model:Edit Model")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitModelEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitModelEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deleteModel()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
+        <Row style={{marginTop: '10px'}} >
+          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Organization"), i18next.t("general:Organization - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: '100%'}} value={this.state.model.owner} onChange={(value => {this.updateModelField('owner', value);})}>
+              {
+                this.state.organizations.map((organization, index) => <Option key={index} value={organization.name}>{organization.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Name"), i18next.t("general:Name - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.model.name} onChange={e => {
+              this.updateModelField('name', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Display name"), i18next.t("general:Display name - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.model.displayName} onChange={e => {
+              this.updateModelField('displayName', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("model:Model"), i18next.t("model:Model - Tooltip"))} :
+          </Col>
+          <Col span={22}>
+            <TextArea rows={10} value={this.state.model.modelText} onChange={e => {
+              this.updateModelField('modelText', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 19 : 2}>
+            {Setting.getLabel(i18next.t("general:Is enabled"), i18next.t("general:Is enabled - Tooltip"))} :
+          </Col>
+          <Col span={1} >
+            <Switch checked={this.state.model.isEnabled} onChange={checked => {
+              this.updateModelField('isEnabled', checked);
+            }} />
+          </Col>
+        </Row>
+      </Card>
+    )
+  }
+
+  submitModelEdit(willExist) {
+    let model = Setting.deepCopy(this.state.model);
+    ModelBackend.updateModel(this.state.organizationName, this.state.modelName, model)
+      .then((res) => {
+        if (res.msg === "") {
+          Setting.showMessage("success", `Successfully saved`);
+          this.setState({
+            modelName: this.state.model.name,
+          });
+
+          if (willExist) {
+            this.props.history.push(`/models`);
+          } else {
+            this.props.history.push(`/models/${this.state.model.owner}/${this.state.model.name}`);
+          }
+        } else {
+          Setting.showMessage("error", res.msg);
+          this.updateModelField('name', this.state.modelName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Failed to connect to server: ${error}`);
+      });
+  }
+
+  deleteModel() {
+    ModelBackend.deleteModel(this.state.model)
+      .then(() => {
+        this.props.history.push(`/models`);
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Model failed to delete: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.model !== null ? this.renderModel() : null
+        }
+        <div style={{marginTop: '20px', marginLeft: '40px'}}>
+          <Button size="large" onClick={() => this.submitModelEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitModelEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deleteModel()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ModelEditPage;

web/src/ModelListPage.js

@@ -0,0 +1,201 @@
+// Copyright 2021 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 {Link} from "react-router-dom";
+import {Button, Popconfirm, Switch, Table} from 'antd';
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as ModelBackend from "./backend/ModelBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+
+class ModelListPage extends BaseListPage {
+  newModel() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "built-in",
+      name: `model_${randomName}`,
+      createdTime: moment().format(),
+      displayName: `New Model - ${randomName}`,
+      modelText: "",
+      isEnabled: true,
+    }
+  }
+
+  addModel() {
+    const newModel = this.newModel();
+    ModelBackend.addModel(newModel)
+      .then((res) => {
+          this.props.history.push({pathname: `/models/${newModel.owner}/${newModel.name}`, mode: "add"});
+        }
+      )
+      .catch(error => {
+        Setting.showMessage("error", `Model failed to add: ${error}`);
+      });
+  }
+
+  deleteModel(i) {
+    ModelBackend.deleteModel(this.state.data[i])
+      .then((res) => {
+          Setting.showMessage("success", `Model deleted successfully`);
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        }
+      )
+      .catch(error => {
+        Setting.showMessage("error", `Model failed to delete: ${error}`);
+      });
+  }
+
+  renderTable(models) {
+    const columns = [
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: 'owner',
+        key: 'owner',
+        width: '120px',
+        sorter: true,
+        ...this.getColumnSearchProps('owner'),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          )
+        }
+      },
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: 'name',
+        key: 'name',
+        width: '150px',
+        fixed: 'left',
+        sorter: true,
+        ...this.getColumnSearchProps('name'),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/models/${text}`}>
+              {text}
+            </Link>
+          )
+        }
+      },
+      {
+        title: i18next.t("general:Created time"),
+        dataIndex: 'createdTime',
+        key: 'createdTime',
+        width: '160px',
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        }
+      },
+      {
+        title: i18next.t("general:Display name"),
+        dataIndex: 'displayName',
+        key: 'displayName',
+        width: '200px',
+        sorter: true,
+        ...this.getColumnSearchProps('displayName'),
+      },
+      {
+        title: i18next.t("general:Is enabled"),
+        dataIndex: 'isEnabled',
+        key: 'isEnabled',
+        width: '120px',
+        sorter: true,
+        render: (text, record, index) => {
+          return (
+            <Switch disabled checkedChildren="ON" unCheckedChildren="OFF" checked={text}/>
+          )
+        }
+      },
+      {
+        title: i18next.t("general:Action"),
+        dataIndex: '',
+        key: 'op',
+        width: '170px',
+        fixed: (Setting.isMobile()) ? "false" : "right",
+        render: (text, record, index) => {
+          return (
+            <div>
+              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary"
+                      onClick={() => this.props.history.push(`/models/${record.owner}/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <Popconfirm
+                title={`Sure to delete model: ${record.name} ?`}
+                onConfirm={() => this.deleteModel(index)}
+              >
+                <Button style={{marginBottom: '10px'}} type="danger">{i18next.t("general:Delete")}</Button>
+              </Popconfirm>
+            </div>
+          )
+        }
+      },
+    ];
+
+    const paginationProps = {
+      total: this.state.pagination.total,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
+    };
+
+    return (
+      <div>
+        <Table scroll={{x: 'max-content'}} columns={columns} dataSource={models} rowKey="name" size="middle" bordered
+               pagination={paginationProps}
+               title={() => (
+                 <div>
+                   {i18next.t("general:Models")}&nbsp;&nbsp;&nbsp;&nbsp;
+                   <Button type="primary" size="small"
+                           onClick={this.addModel.bind(this)}>{i18next.t("general:Add")}</Button>
+                 </div>
+               )}
+               loading={this.state.loading}
+               onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    let sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.type !== undefined && params.type !== null) {
+      field = "type";
+      value = params.type;
+    }
+    this.setState({loading: true});
+    ModelBackend.getModels("", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.setState({
+            loading: false,
+            data: res.data,
+            pagination: {
+              ...params.pagination,
+              total: res.data2,
+            },
+            searchText: params.searchText,
+            searchedColumn: params.searchedColumn,
+          });
+        }
+      });
+  };
+}
+
+export default ModelListPage;

web/src/PermissionEditPage.js

@@ -20,6 +20,7 @@ import * as UserBackend from "./backend/UserBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
 import * as RoleBackend from "./backend/RoleBackend";
+import * as ModelBackend from "./backend/ModelBackend";
 
 const { Option } = Select;
 
@@ -34,6 +35,7 @@ class PermissionEditPage extends React.Component {
       organizations: [],
       users: [],
       roles: [],
+      models: [],
       mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
   }
@@ -52,6 +54,7 @@ class PermissionEditPage extends React.Component {
 
         this.getUsers(permission.owner);
         this.getRoles(permission.owner);
+        this.getModels(permission.owner);
       });
   }
 
@@ -82,6 +85,15 @@ class PermissionEditPage extends React.Component {
       });
   }
 
+  getModels(organizationName) {
+    ModelBackend.getModels(organizationName)
+      .then((res) => {
+        this.setState({
+          models: res,
+        });
+      });
+  }
+
   parsePermissionField(key, value) {
     if ([""].includes(key)) {
       value = Setting.myParseInt(value);
@@ -146,6 +158,20 @@ class PermissionEditPage extends React.Component {
             }} />
           </Col>
         </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Model"), i18next.t("general:Model - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: '100%'}} value={this.state.permission.model} onChange={(model => {
+              this.updatePermissionField('model', model);
+            })}>
+              {
+                this.state.models.map((model, index) => <Option key={index} value={model.name}>{model.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("role:Sub users"), i18next.t("role:Sub users - Tooltip"))} :

web/src/backend/ModelBackend.js

@@ -0,0 +1,56 @@
+// Copyright 2021 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 * as Setting from "../Setting";
+
+export function getModels(owner, page = "", pageSize = "", field = "", value = "", sortField = "", sortOrder = "") {
+  return fetch(`${Setting.ServerUrl}/api/get-models?owner=${owner}&p=${page}&pageSize=${pageSize}&field=${field}&value=${value}&sortField=${sortField}&sortOrder=${sortOrder}`, {
+    method: "GET",
+    credentials: "include"
+  }).then(res => res.json());
+}
+
+export function getModel(owner, name) {
+  return fetch(`${Setting.ServerUrl}/api/get-model?id=${owner}/${encodeURIComponent(name)}`, {
+    method: "GET",
+    credentials: "include"
+  }).then(res => res.json());
+}
+
+export function updateModel(owner, name, model) {
+  let newModel = Setting.deepCopy(model);
+  return fetch(`${Setting.ServerUrl}/api/update-model?id=${owner}/${encodeURIComponent(name)}`, {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify(newModel),
+  }).then(res => res.json());
+}
+
+export function addModel(model) {
+  let newModel = Setting.deepCopy(model);
+  return fetch(`${Setting.ServerUrl}/api/add-model`, {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify(newModel),
+  }).then(res => res.json());
+}
+
+export function deleteModel(model) {
+  let newModel = Setting.deepCopy(model);
+  return fetch(`${Setting.ServerUrl}/api/delete-model`, {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify(newModel),
+  }).then(res => res.json());
+}

web/src/locales/zh/data.json

@@ -131,6 +131,7 @@
     "Master password": "万能密码",
     "Master password - Tooltip": "可用来登录该组织下的所有用户，方便管理员以该用户身份登录，以解决技术问题",
     "Method": "方法",
+    "Models": "模型",
     "Name": "名称",
     "Name - Tooltip": "唯一的、字符串式的ID",
     "OAuth providers": "OAuth提供方",
@@ -243,6 +244,10 @@
     "sign up now": "立即注册",
     "username, Email or phone": "用户名、Email或手机号"
   },
+  "model": {
+    "Edit Model": "编辑模型",
+    "Model": "模型"
+  },
   "organization": {
     "Default avatar": "默认头像",
     "Edit Organization": "编辑组织",