feat: support for prometheus (#1784)

* fix: fixed failed to update information when name duplicate

* fix: Use GetOwnerAndNameFromId and GetId functions instead of split

* Update organization.go

* Update role.go

---------

Co-authored-by: hsluoyz <hsluoyz@qq.com>

.github/workflows/build.yml

@@ -66,7 +66,7 @@ jobs:
       - uses: actions/setup-go@v4
         with:
           go-version: '^1.16.5'
-          cache-dependency-path: ./go.mod
+          cache: false
 
       # gen a dummy config file
       - run: touch dummy.yml

authz/authz.go

@@ -121,6 +121,8 @@ p, *, *, *, /cas, *, *
 p, *, *, *, /api/webauthn, *, *
 p, *, *, GET, /api/get-release, *, *
 p, *, *, GET, /api/get-default-application, *, *
+p, *, *, GET, /api/get-prometheus-info, *, *
+p, *, *, *, /api/metrics, *, *
 `
 
 		sa := stringadapter.NewAdapter(ruleText)

controllers/prometheus.go

@@ -0,0 +1,39 @@
+// Copyright 2023 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 (
+	"github.com/casdoor/casdoor/object"
+)
+
+// GetPrometheusInfo
+// @Title GetPrometheusInfo
+// @Tag Prometheus API
+// @Description get Prometheus Info
+// @Success 200 {object} object.PrometheusInfo The Response object
+// @router /get-prometheus-info [get]
+func (c *ApiController) GetPrometheusInfo() {
+	_, ok := c.RequireAdmin()
+	if !ok {
+		return
+	}
+	prometheusInfo, err := object.GetPrometheusInfo()
+	if err != nil {
+		c.ResponseError(err.Error())
+		return
+	}
+
+	c.ResponseOk(prometheusInfo)
+}

go.mod

@@ -36,6 +36,8 @@ require (
 	github.com/markbates/goth v1.75.2
 	github.com/nu7hatch/gouuid v0.0.0-20131221200532-179d4d0c4d8d // indirect
 	github.com/nyaruka/phonenumbers v1.1.5
+	github.com/prometheus/client_golang v1.7.0
+	github.com/prometheus/client_model v0.2.0
 	github.com/qiangmzsx/string-adapter/v2 v2.1.0
 	github.com/robfig/cron/v3 v3.0.1
 	github.com/russellhaering/gosaml2 v0.6.0

main.go

@@ -82,6 +82,7 @@ func main() {
 	logs.SetLogFuncCall(false)
 
 	go ldap.StartLdapServer()
+	go object.ClearThroughputPerSecond()
 
-	beego.Run(fmt.Sprintf(":%v", port))
+	beego.RunWithMiddleWares(fmt.Sprintf(":%v", port), routers.PrometheusMiddleWare)
 }

object/chat.go

@@ -135,6 +135,10 @@ func DeleteChat(chat *Chat) bool {
 		panic(err)
 	}
 
+	if affected != 0 {
+		return DeleteChatMessages(chat.Name)
+	}
+
 	return affected != 0
 }
 

object/message.go

@@ -143,6 +143,15 @@ func DeleteMessage(message *Message) bool {
 	return affected != 0
 }
 
+func DeleteChatMessages(chat string) bool {
+	affected, err := adapter.Engine.Delete(&Message{Chat: chat})
+	if err != nil {
+		panic(err)
+	}
+
+	return affected != 0
+}
+
 func (p *Message) GetId() string {
 	return fmt.Sprintf("%s/%s", p.Owner, p.Name)
 }

object/organization.go

@@ -16,7 +16,6 @@ package object
 
 import (
 	"fmt"
-	"strings"
 
 	"github.com/casdoor/casdoor/cred"
 	"github.com/casdoor/casdoor/i18n"
@@ -299,18 +298,16 @@ func organizationChangeTrigger(oldName string, newName string) error {
 	}
 	for i, u := range role.Users {
 		// u = organization/username
-		split := strings.Split(u, "/")
-		if split[0] == oldName {
-			split[0] = newName
-			role.Users[i] = split[0] + "/" + split[1]
+		owner, name := util.GetOwnerAndNameFromId(u)
+		if name == oldName {
+			role.Users[i] = util.GetId(owner, newName)
 		}
 	}
 	for i, u := range role.Roles {
 		// u = organization/username
-		split := strings.Split(u, "/")
-		if split[0] == oldName {
-			split[0] = newName
-			role.Roles[i] = split[0] + "/" + split[1]
+		owner, name := util.GetOwnerAndNameFromId(u)
+		if name == oldName {
+			role.Roles[i] = util.GetId(owner, newName)
 		}
 	}
 	role.Owner = newName
@@ -326,18 +323,16 @@ func organizationChangeTrigger(oldName string, newName string) error {
 	}
 	for i, u := range permission.Users {
 		// u = organization/username
-		split := strings.Split(u, "/")
-		if split[0] == oldName {
-			split[0] = newName
-			permission.Users[i] = split[0] + "/" + split[1]
+		owner, name := util.GetOwnerAndNameFromId(u)
+		if name == oldName {
+			permission.Users[i] = util.GetId(owner, newName)
 		}
 	}
 	for i, u := range permission.Roles {
 		// u = organization/username
-		split := strings.Split(u, "/")
-		if split[0] == oldName {
-			split[0] = newName
-			permission.Roles[i] = split[0] + "/" + split[1]
+		owner, name := util.GetOwnerAndNameFromId(u)
+		if name == oldName {
+			permission.Roles[i] = util.GetId(owner, newName)
 		}
 	}
 	permission.Owner = newName

object/prometheus.go

@@ -0,0 +1,129 @@
+// Copyright 2023 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"
+	"time"
+
+	"github.com/prometheus/client_golang/prometheus"
+	"github.com/prometheus/client_golang/prometheus/promauto"
+	"github.com/prometheus/client_model/go"
+)
+
+type PrometheusInfo struct {
+	APIThroughput   []GaugeVecInfo     `json:"apiThroughput"`
+	APILatency      []HistogramVecInfo `json:"apiLatency"`
+	TotalThroughput float64            `json:"totalThroughput"`
+}
+
+type GaugeVecInfo struct {
+	Method     string  `json:"method"`
+	Name       string  `json:"name"`
+	Throughput float64 `json:"throughput"`
+}
+
+type HistogramVecInfo struct {
+	Name    string `json:"name"`
+	Method  string `json:"method"`
+	Count   uint64 `json:"count"`
+	Latency string `json:"latency"`
+}
+
+var (
+	APIThroughput = promauto.NewGaugeVec(prometheus.GaugeOpts{
+		Name: "casdoor_api_throughput",
+		Help: "The throughput of each api access",
+	}, []string{"path", "method"})
+
+	APILatency = promauto.NewHistogramVec(prometheus.HistogramOpts{
+		Name: "casdoor_api_latency",
+		Help: "API processing latency in milliseconds",
+	}, []string{"path", "method"})
+
+	CpuUsage = promauto.NewGaugeVec(prometheus.GaugeOpts{
+		Name: "casdoor_cpu_usage",
+		Help: "Casdoor cpu usage",
+	}, []string{"cpuNum"})
+
+	MemoryUsage = promauto.NewGaugeVec(prometheus.GaugeOpts{
+		Name: "casdoor_memory_usage",
+		Help: "Casdoor memory usage in Byte",
+	}, []string{"type"})
+
+	TotalThroughput = promauto.NewGauge(prometheus.GaugeOpts{
+		Name: "casdoor_total_throughput",
+		Help: "The total throughput of casdoor",
+	})
+)
+
+func ClearThroughputPerSecond() {
+	// Clear the throughput every second
+	ticker := time.NewTicker(time.Second)
+	for range ticker.C {
+		APIThroughput.Reset()
+		TotalThroughput.Set(0)
+	}
+}
+
+func GetPrometheusInfo() (*PrometheusInfo, error) {
+	res := &PrometheusInfo{}
+	metricFamilies, err := prometheus.DefaultGatherer.Gather()
+	if err != nil {
+		return nil, err
+	}
+	for _, metricFamily := range metricFamilies {
+		switch metricFamily.GetName() {
+		case "casdoor_api_throughput":
+			res.APIThroughput = getGaugeVecInfo(metricFamily)
+		case "casdoor_api_latency":
+			res.APILatency = getHistogramVecInfo(metricFamily)
+		case "casdoor_total_throughput":
+			res.TotalThroughput = metricFamily.GetMetric()[0].GetGauge().GetValue()
+		}
+	}
+
+	return res, nil
+}
+
+func getHistogramVecInfo(metricFamily *io_prometheus_client.MetricFamily) []HistogramVecInfo {
+	var histogramVecInfos []HistogramVecInfo
+	for _, metric := range metricFamily.GetMetric() {
+		sampleCount := metric.GetHistogram().GetSampleCount()
+		sampleSum := metric.GetHistogram().GetSampleSum()
+		latency := sampleSum / float64(sampleCount)
+		histogramVecInfo := HistogramVecInfo{
+			Method:  metric.Label[0].GetValue(),
+			Name:    metric.Label[1].GetValue(),
+			Count:   sampleCount,
+			Latency: fmt.Sprintf("%.3f", latency),
+		}
+		histogramVecInfos = append(histogramVecInfos, histogramVecInfo)
+	}
+	return histogramVecInfos
+}
+
+func getGaugeVecInfo(metricFamily *io_prometheus_client.MetricFamily) []GaugeVecInfo {
+	var counterVecInfos []GaugeVecInfo
+	for _, metric := range metricFamily.GetMetric() {
+		counterVecInfo := GaugeVecInfo{
+			Method:     metric.Label[0].GetValue(),
+			Name:       metric.Label[1].GetValue(),
+			Throughput: metric.Gauge.GetValue(),
+		}
+		counterVecInfos = append(counterVecInfos, counterVecInfo)
+	}
+	return counterVecInfos
+}

object/role.go

@@ -16,7 +16,6 @@ package object
 
 import (
 	"fmt"
-	"strings"
 
 	"github.com/casdoor/casdoor/util"
 	"github.com/xorm-io/core"
@@ -182,13 +181,12 @@ func roleChangeTrigger(oldName string, newName string) error {
 	}
 	for _, role := range roles {
 		for j, u := range role.Roles {
-			split := strings.Split(u, "/")
-			if split[1] == oldName {
-				split[1] = newName
-				role.Roles[j] = split[0] + "/" + split[1]
+			owner, name := util.GetOwnerAndNameFromId(u)
+			if name == oldName {
+				role.Roles[j] = util.GetId(owner, newName)
 			}
 		}
-		_, err = session.Where("name=?", role.Name).Update(role)
+		_, err = session.Where("name=?", role.Name).And("owner=?", role.Owner).Update(role)
 		if err != nil {
 			return err
 		}
@@ -202,13 +200,12 @@ func roleChangeTrigger(oldName string, newName string) error {
 	for _, permission := range permissions {
 		for j, u := range permission.Roles {
 			// u = organization/username
-			split := strings.Split(u, "/")
-			if split[1] == oldName {
-				split[1] = newName
-				permission.Roles[j] = split[0] + "/" + split[1]
+			owner, name := util.GetOwnerAndNameFromId(u)
+			if name == oldName {
+				permission.Roles[j] = util.GetId(owner, newName)
 			}
 		}
-		_, err = session.Where("name=?", permission.Name).Update(permission)
+		_, err = session.Where("name=?", permission.Name).And("owner=?", permission.Owner).Update(permission)
 		if err != nil {
 			return err
 		}

object/user.go

@@ -657,13 +657,12 @@ func userChangeTrigger(oldName string, newName string) error {
 	for _, role := range roles {
 		for j, u := range role.Users {
 			// u = organization/username
-			split := strings.Split(u, "/")
-			if split[1] == oldName {
-				split[1] = newName
-				role.Users[j] = split[0] + "/" + split[1]
+			owner, name := util.GetOwnerAndNameFromId(u)
+			if name == oldName {
+				role.Users[j] = util.GetId(owner, newName)
 			}
 		}
-		_, err = session.Where("name=?", role.Name).Update(role)
+		_, err = session.Where("name=?", role.Name).And("owner=?", role.Owner).Update(role)
 		if err != nil {
 			return err
 		}
@@ -677,13 +676,12 @@ func userChangeTrigger(oldName string, newName string) error {
 	for _, permission := range permissions {
 		for j, u := range permission.Users {
 			// u = organization/username
-			split := strings.Split(u, "/")
-			if split[1] == oldName {
-				split[1] = newName
-				permission.Users[j] = split[0] + "/" + split[1]
+			owner, name := util.GetOwnerAndNameFromId(u)
+			if name == oldName {
+				permission.Users[j] = util.GetId(owner, newName)
 			}
 		}
-		_, err = session.Where("name=?", permission.Name).Update(permission)
+		_, err = session.Where("name=?", permission.Name).And("owner=?", permission.Owner).Update(permission)
 		if err != nil {
 			return err
 		}

routers/prometheus_filter.go

@@ -0,0 +1,51 @@
+package routers
+
+import (
+	"fmt"
+	"net/http"
+	"strings"
+	"time"
+
+	"github.com/casdoor/casdoor/object"
+	"github.com/casdoor/casdoor/util"
+)
+
+type PrometheusMiddleWareWrapper struct {
+	handler http.Handler
+}
+
+func PrometheusMiddleWare(h http.Handler) http.Handler {
+	return &PrometheusMiddleWareWrapper{
+		handler: h,
+	}
+}
+
+func (p PrometheusMiddleWareWrapper) ServeHTTP(w http.ResponseWriter, req *http.Request) {
+	method := req.Method
+	endpoint := req.URL.Path
+	if strings.HasPrefix(endpoint, "/api/metrics") {
+		systemInfo, err := util.GetSystemInfo()
+		if err == nil {
+			recordSystemInfo(systemInfo)
+		}
+		p.handler.ServeHTTP(w, req)
+		return
+	}
+
+	if strings.HasPrefix(endpoint, "/api") {
+		start := time.Now()
+		p.handler.ServeHTTP(w, req)
+		latency := time.Since(start).Milliseconds()
+		object.TotalThroughput.Inc()
+		object.APILatency.WithLabelValues(endpoint, method).Observe(float64(latency))
+		object.APIThroughput.WithLabelValues(endpoint, method).Inc()
+	}
+}
+
+func recordSystemInfo(systemInfo *util.SystemInfo) {
+	for i, value := range systemInfo.CpuUsage {
+		object.CpuUsage.WithLabelValues(fmt.Sprintf("%d", i)).Set(value)
+	}
+	object.MemoryUsage.WithLabelValues("memoryUsed").Set(float64(systemInfo.MemoryUsed))
+	object.MemoryUsage.WithLabelValues("memoryTotal").Set(float64(systemInfo.MemoryTotal))
+}

routers/router.go

@@ -21,8 +21,8 @@ package routers
 
 import (
 	"github.com/beego/beego"
-
 	"github.com/casdoor/casdoor/controllers"
+	"github.com/prometheus/client_golang/prometheus/promhttp"
 )
 
 func init() {
@@ -239,4 +239,7 @@ func initAPI() {
 
 	beego.Router("/api/get-system-info", &controllers.ApiController{}, "GET:GetSystemInfo")
 	beego.Router("/api/get-version-info", &controllers.ApiController{}, "GET:GetVersionInfo")
+	beego.Router("/api/get-prometheus-info", &controllers.ApiController{}, "GET:GetPrometheusInfo")
+
+	beego.Handler("/api/metrics", promhttp.Handler())
 }

web/src/AdapterListPage.js

@@ -225,7 +225,7 @@ class AdapterListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={adapters} rowKey="name" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={adapters} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Adapters")}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/ApplicationListPage.js

@@ -254,7 +254,7 @@ class ApplicationListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={applications} rowKey="name" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={applications} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Applications")}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/ChatBox.js

@@ -13,8 +13,9 @@
 // limitations under the License.
 
 import React from "react";
-import {Avatar, Input, List} from "antd";
+import {Avatar, Input, List, Spin} from "antd";
 import {CopyOutlined, DislikeOutlined, LikeOutlined, SendOutlined} from "@ant-design/icons";
+import i18next from "i18next";
 
 const {TextArea} = Input;
 
@@ -29,7 +30,7 @@ class ChatBox extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.messages !== this.props.messages) {
+    if (prevProps.messages !== this.props.messages && this.props.messages !== null) {
       this.scrollToListItem(this.props.messages.length);
     }
   }
@@ -74,11 +75,19 @@ class ChatBox extends React.Component {
   };
 
   renderList() {
+    if (this.props.messages === undefined || this.props.messages === null) {
+      return (
+        <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
+          <Spin size="large" tip={i18next.t("login:Loading")} style={{paddingTop: "20%"}} />
+        </div>
+      );
+    }
+
     return (
       <div ref={this.listContainerRef} style={{position: "relative", maxHeight: "calc(100vh - 140px)", overflowY: "auto"}}>
         <List
           itemLayout="horizontal"
-          dataSource={this.props.messages === undefined ? undefined : [...this.props.messages, {}]}
+          dataSource={[...this.props.messages, {}]}
           renderItem={(item, index) => {
             if (Object.keys(item).length === 0 && item.constructor === Object) {
               return <List.Item id={`chatbox-list-item-${index}`} style={{

web/src/ChatListPage.js

@@ -241,7 +241,7 @@ class ChatListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={chats} rowKey="name" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={chats} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Chats")}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/ChatMenu.js

@@ -13,8 +13,8 @@
 // limitations under the License.
 
 import React from "react";
-import {Menu} from "antd";
-import {LayoutOutlined} from "@ant-design/icons";
+import {Button, Menu} from "antd";
+import {DeleteOutlined, LayoutOutlined, PlusOutlined} from "@ant-design/icons";
 
 class ChatMenu extends React.Component {
   constructor(props) {
@@ -38,6 +38,7 @@ class ChatMenu extends React.Component {
       categories[chat.category].push(chat);
     });
 
+    const selectedKeys = this.state === undefined ? [] : this.state.selectedKeys;
     return Object.keys(categories).map((category, index) => {
       return {
         key: `${index}`,
@@ -45,10 +46,50 @@ class ChatMenu extends React.Component {
         label: category,
         children: categories[category].map((chat, chatIndex) => {
           const globalChatIndex = chats.indexOf(chat);
+          const isSelected = selectedKeys.includes(`${index}-${chatIndex}`);
           return {
             key: `${index}-${chatIndex}`,
             index: globalChatIndex,
-            label: chat.displayName,
+            label: (
+              <div
+                className="menu-item-container"
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                {chat.displayName}
+                {isSelected && (
+                  <DeleteOutlined
+                    className="menu-item-delete-icon"
+                    style={{
+                      visibility: "visible",
+                      color: "inherit",
+                      transition: "color 0.3s",
+                    }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.color = "rgba(89,54,213,0.6)";
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.color = "inherit";
+                    }}
+                    onMouseDown={(e) => {
+                      e.currentTarget.style.color = "rgba(89,54,213,0.4)";
+                    }}
+                    onMouseUp={(e) => {
+                      e.currentTarget.style.color = "rgba(89,54,213,0.6)";
+                    }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (this.props.onDeleteChat) {
+                        this.props.onDeleteChat(globalChatIndex);
+                      }
+                    }}
+                  />
+                )}
+              </div>
+            ),
           };
         }),
       };
@@ -60,8 +101,8 @@ class ChatMenu extends React.Component {
     const selectedItem = this.chatsToItems(this.props.chats)[categoryIndex].children[chatIndex];
     this.setState({selectedKeys: [`${categoryIndex}-${chatIndex}`]});
 
-    if (this.props.onSelect) {
-      this.props.onSelect(selectedItem.index);
+    if (this.props.onSelectChat) {
+      this.props.onSelectChat(selectedItem.index);
     }
   };
 
@@ -85,14 +126,40 @@ class ChatMenu extends React.Component {
     const items = this.chatsToItems(this.props.chats);
 
     return (
-      <Menu
-        mode="inline"
-        openKeys={this.state.openKeys}
-        selectedKeys={this.state.selectedKeys}
-        onOpenChange={this.onOpenChange}
-        onSelect={this.onSelect}
-        items={items}
-      />
+      <>
+        <Button
+          icon={<PlusOutlined />}
+          style={{
+            width: "calc(100% - 8px)",
+            height: "40px",
+            margin: "4px",
+            borderColor: "rgb(229,229,229)",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.borderColor = "rgba(89,54,213,0.6)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.borderColor = "rgba(0, 0, 0, 0.1)";
+          }}
+          onMouseDown={(e) => {
+            e.currentTarget.style.borderColor = "rgba(89,54,213,0.4)";
+          }}
+          onMouseUp={(e) => {
+            e.currentTarget.style.borderColor = "rgba(89,54,213,0.6)";
+          }}
+          onClick={this.props.onAddChat}
+        >
+          New Chat
+        </Button>
+        <Menu
+          mode="inline"
+          openKeys={this.state.openKeys}
+          selectedKeys={this.state.selectedKeys}
+          onOpenChange={this.onOpenChange}
+          onSelect={this.onSelect}
+          items={items}
+        />
+      </>
     );
   }
 }

web/src/ChatPage.js

@@ -24,7 +24,7 @@ import i18next from "i18next";
 import BaseListPage from "./BaseListPage";
 
 class ChatPage extends BaseListPage {
-  newChat() {
+  newChat(chat) {
     const randomName = Setting.getRandomName();
     return {
       owner: "admin", // this.props.account.applicationName,
@@ -33,8 +33,8 @@ class ChatPage extends BaseListPage {
       updatedTime: moment().format(),
       organization: this.props.account.owner,
       displayName: `New Chat - ${randomName}`,
-      type: "Single",
-      category: "Chat Category - 1",
+      type: "AI",
+      category: chat !== undefined ? chat.category : "Chat Category - 1",
       user1: `${this.props.account.owner}/${this.props.account.name}`,
       user2: "",
       users: [`${this.props.account.owner}/${this.props.account.name}`],
@@ -42,40 +42,6 @@ class ChatPage extends BaseListPage {
     };
   }
 
-  // addChat() {
-  //   const newChat = this.newChat();
-  //   ChatBackend.addChat(newChat)
-  //     .then((res) => {
-  //       if (res.status === "ok") {
-  //         this.props.history.push({pathname: `/chats/${newChat.name}`, mode: "add"});
-  //         Setting.showMessage("success", i18next.t("general:Successfully added"));
-  //       } else {
-  //         Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
-  //       }
-  //     })
-  //     .catch(error => {
-  //       Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
-  //     });
-  // }
-  //
-  // deleteChat(i) {
-  //   ChatBackend.deleteChat(this.state.data[i])
-  //     .then((res) => {
-  //       if (res.status === "ok") {
-  //         Setting.showMessage("success", i18next.t("general:Successfully deleted"));
-  //         this.setState({
-  //           data: Setting.deleteRow(this.state.data, i),
-  //           pagination: {total: this.state.pagination.total - 1},
-  //         });
-  //       } else {
-  //         Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
-  //       }
-  //     })
-  //     .catch(error => {
-  //       Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
-  //     });
-  // }
-
   newMessage(text) {
     const randomName = Setting.getRandomName();
     return {
@@ -115,39 +81,116 @@ class ChatPage extends BaseListPage {
       });
   }
 
+  addChat(chat) {
+    const newChat = this.newChat(chat);
+    ChatBackend.addChat(newChat)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+          this.setState({
+            chatName: newChat.name,
+            messages: null,
+          });
+          this.getMessages(newChat.name);
+
+          const {pagination} = this.state;
+          this.fetch({pagination});
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteChat(chats, i, chat) {
+    ChatBackend.deleteChat(chat)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          const data = Setting.deleteRow(this.state.data, i);
+          const j = Math.min(i, data.length - 1);
+          if (j < 0) {
+            this.setState({
+              chatName: undefined,
+              messages: undefined,
+              data: data,
+            });
+          } else {
+            const focusedChat = data[j];
+            this.setState({
+              chatName: focusedChat.name,
+              messages: null,
+              data: data,
+            });
+            this.getMessages(focusedChat.name);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
   renderTable(chats) {
-    return (this.state.loading) ? <Spin size="large" style={{marginLeft: "50%", marginTop: "10%"}} /> : (
-      (
-        <div style={{display: "flex", height: "calc(100vh - 140px)"}}>
-          <div style={{width: "250px", height: "100%", backgroundColor: "white", borderRight: "1px solid rgb(245,245,245)"}}>
-            <ChatMenu chats={chats} onSelect={(i) => {
-              const chat = chats[i];
-              this.getMessages(chat.name);
-              this.setState({
-                chatName: chat.name,
-              });
-            }} />
-          </div>
-          <div style={{flex: 1, height: "100%", backgroundColor: "white", position: "relative"}}>
-            <div style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              backgroundImage: "url(https://cdn.casbin.org/img/casdoor-logo_1185x256.png)",
-              backgroundPosition: "center",
-              backgroundRepeat: "no-repeat",
-              backgroundSize: "200px auto",
-              backgroundBlendMode: "luminosity",
-              filter: "grayscale(80%) brightness(140%) contrast(90%)",
-              opacity: 0.5,
-            }}>
-            </div>
-            <ChatBox messages={this.state.messages} sendMessage={(text) => {this.sendMessage(text);}} account={this.props.account} />
-          </div>
+    const onSelectChat = (i) => {
+      const chat = chats[i];
+      this.setState({
+        chatName: chat.name,
+        messages: null,
+      });
+      this.getMessages(chat.name);
+    };
+
+    const onAddChat = () => {
+      const chat = this.state.data.filter(chat => chat.name === this.state.chatName)[0];
+      this.addChat(chat);
+    };
+
+    const onDeleteChat = (i) => {
+      const chat = chats[i];
+      this.deleteChat(chats, i, chat);
+    };
+
+    if (this.state.loading) {
+      return (
+        <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
+          <Spin size="large" tip={i18next.t("login:Loading")} style={{paddingTop: "10%"}} />
         </div>
-      )
+      );
+    }
+
+    return (
+      <div style={{display: "flex", height: "calc(100vh - 140px)"}}>
+        <div style={{width: "250px", height: "100%", backgroundColor: "white", borderRight: "1px solid rgb(245,245,245)"}}>
+          <ChatMenu chats={chats} onSelectChat={onSelectChat} onAddChat={onAddChat} onDeleteChat={onDeleteChat} />
+        </div>
+        <div style={{flex: 1, height: "100%", backgroundColor: "white", position: "relative"}}>
+          {
+            this.state.messages === null ? null : (
+              <div style={{
+                position: "absolute",
+                top: -50,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundImage: "url(https://cdn.casbin.org/img/casdoor-logo_1185x256.png)",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+                backgroundSize: "200px auto",
+                backgroundBlendMode: "luminosity",
+                filter: "grayscale(80%) brightness(140%) contrast(90%)",
+                opacity: 0.5,
+              }}>
+              </div>
+            )
+          }
+          <ChatBox messages={this.state.messages} sendMessage={(text) => {this.sendMessage(text);}} account={this.props.account} />
+        </div>
+      </div>
     );
   }
 

web/src/MessageListPage.js

@@ -183,7 +183,7 @@ class MessageListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={messages} rowKey="name" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={messages} rowKey={(record) => `${record.owner}/${record.name}`}size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Messages")}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/ModelListPage.js

@@ -163,7 +163,7 @@ class ModelListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={models} rowKey="name" size="middle" bordered
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={models} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered
           pagination={paginationProps}
           title={() => (
             <div>

web/src/PaymentListPage.js

@@ -243,7 +243,7 @@ class PaymentListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={payments} rowKey="name" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={payments} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Payments")}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/PermissionListPage.js

@@ -321,7 +321,7 @@ class PermissionListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={permissions} rowKey="name" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={permissions} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Permissions")}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/ProviderEditPage.js

@@ -125,6 +125,8 @@ class ProviderEditPage extends React.Component {
       } else {
         return Setting.getLabel(i18next.t("provider:Secret key"), i18next.t("provider:Secret key - Tooltip"));
       }
+    case "AI":
+      return Setting.getLabel(i18next.t("provider:Secret key"), i18next.t("provider:Secret key - Tooltip"));
     default:
       return Setting.getLabel(i18next.t("provider:Client secret"), i18next.t("provider:Client secret - Tooltip"));
     }
@@ -278,17 +280,20 @@ class ProviderEditPage extends React.Component {
                 this.updateProviderField("type", "Alipay");
               } else if (value === "Captcha") {
                 this.updateProviderField("type", "Default");
+              } else if (value === "AI") {
+                this.updateProviderField("type", "OpenAI API - GPT");
               }
             })}>
               {
                 [
-                  {id: "OAuth", name: "OAuth"},
+                  {id: "AI", name: "AI"},
+                  {id: "Captcha", name: "Captcha"},
                   {id: "Email", name: "Email"},
+                  {id: "OAuth", name: "OAuth"},
+                  {id: "Payment", name: "Payment"},
+                  {id: "SAML", name: "SAML"},
                   {id: "SMS", name: "SMS"},
                   {id: "Storage", name: "Storage"},
-                  {id: "SAML", name: "SAML"},
-                  {id: "Payment", name: "Payment"},
-                  {id: "Captcha", name: "Captcha"},
                 ]
                   .sort((a, b) => a.name.localeCompare(b.name))
                   .map((providerCategory, index) => <Option key={index} value={providerCategory.id}>{providerCategory.name}</Option>)
@@ -437,16 +442,20 @@ class ProviderEditPage extends React.Component {
         {
           this.state.provider.category === "Captcha" && this.state.provider.type === "Default" ? null : (
             <React.Fragment>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {this.getClientIdLabel(this.state.provider)}
-                </Col>
-                <Col span={22} >
-                  <Input value={this.state.provider.clientId} onChange={e => {
-                    this.updateProviderField("clientId", e.target.value);
-                  }} />
-                </Col>
-              </Row>
+              {
+                this.state.provider.category === "AI" ? null : (
+                  <Row style={{marginTop: "20px"}} >
+                    <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                      {this.getClientIdLabel(this.state.provider)}
+                    </Col>
+                    <Col span={22} >
+                      <Input value={this.state.provider.clientId} onChange={e => {
+                        this.updateProviderField("clientId", e.target.value);
+                      }} />
+                    </Col>
+                  </Row>
+                )
+              }
               <Row style={{marginTop: "20px"}} >
                 <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
                   {this.getClientSecretLabel(this.state.provider)}

web/src/ProviderListPage.js

@@ -227,7 +227,7 @@ class ProviderListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={providers} rowKey="name" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={providers} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Providers")}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/RoleListPage.js

@@ -196,7 +196,7 @@ class RoleListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={roles} rowKey="name" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={roles} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Roles")}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/SessionListPage.js

@@ -118,7 +118,7 @@ class SessionListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={sessions} rowKey="name" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={sessions} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
           loading={this.state.loading}
           onChange={this.handleTableChange}
         />

web/src/Setting.js

@@ -204,6 +204,12 @@ export const OtherProviderInfo = {
       url: "https://www.cloudflare.com/products/turnstile/",
     },
   },
+  AI: {
+    "OpenAI API - GPT": {
+      logo: `${StaticBaseUrl}/img/social_openai.svg`,
+      url: "https://platform.openai.com",
+    },
+  },
 };
 
 export function initCountries() {
@@ -855,6 +861,10 @@ export function getProviderTypeOptions(category) {
       {id: "GEETEST", name: "GEETEST"},
       {id: "Cloudflare Turnstile", name: "Cloudflare Turnstile"},
     ]);
+  } else if (category === "AI") {
+    return ([
+      {id: "OpenAI API - GPT", name: "OpenAI API - GPT"},
+    ]);
   } else {
     return [];
   }

web/src/SyncerListPage.js

@@ -253,7 +253,7 @@ class SyncerListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={syncers} rowKey="name" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={syncers} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Syncers")}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/SystemInfo.js

@@ -17,6 +17,7 @@ import * as SystemBackend from "./backend/SystemInfo";
 import React from "react";
 import * as Setting from "./Setting";
 import i18next from "i18next";
+import PrometheusInfoTable from "./table/PrometheusInfoTable";
 
 class SystemInfo extends React.Component {
 
@@ -25,6 +26,7 @@ class SystemInfo extends React.Component {
     this.state = {
       systemInfo: {cpuUsage: [], memoryUsed: 0, memoryTotal: 0},
       versionInfo: {},
+      prometheusInfo: {apiThroughput: [], apiLatency: [], totalThroughput: 0},
       intervalId: null,
       loading: true,
     };
@@ -45,6 +47,11 @@ class SystemInfo extends React.Component {
         }).catch(error => {
           Setting.showMessage("error", `System info failed to get: ${error}`);
         });
+        SystemBackend.getPrometheusInfo().then(res => {
+          this.setState({
+            prometheusInfo: res.data,
+          });
+        });
       }, 1000 * 2);
       this.setState({intervalId: id});
     }).catch(error => {
@@ -80,7 +87,10 @@ class SystemInfo extends React.Component {
         <br /> <br />
         <Progress type="circle" percent={Number((Number(this.state.systemInfo.memoryUsed) / Number(this.state.systemInfo.memoryTotal) * 100).toFixed(2))} />
       </div>;
-
+    const latencyUi = this.state.prometheusInfo.apiLatency.length <= 0 ? <Spin size="large" /> :
+      <PrometheusInfoTable prometheusInfo={this.state.prometheusInfo} table={"latency"} />;
+    const throughputUi = this.state.prometheusInfo.apiLatency.length <= 0 ? <Spin size="large" /> :
+      <PrometheusInfoTable prometheusInfo={this.state.prometheusInfo} table={"throughput"} />;
     const link = this.state.versionInfo?.version !== "" ? `https://github.com/casdoor/casdoor/releases/tag/${this.state.versionInfo?.version}` : "";
     let versionText = this.state.versionInfo?.version !== "" ? this.state.versionInfo?.version : i18next.t("system:Unknown version");
     if (this.state.versionInfo?.commitOffset > 0) {
@@ -103,6 +113,16 @@ class SystemInfo extends React.Component {
                   {this.state.loading ? <Spin size="large" /> : memUi}
                 </Card>
               </Col>
+              <Col span={24}>
+                <Card title={i18next.t("system:API Latency")} bordered={true} style={{textAlign: "center", height: "100%"}}>
+                  {this.state.loading ? <Spin size="large" /> : latencyUi}
+                </Card>
+              </Col>
+              <Col span={24}>
+                <Card title={i18next.t("system:API Throughput")} bordered={true} style={{textAlign: "center", height: "100%"}}>
+                  {this.state.loading ? <Spin size="large" /> : throughputUi}
+                </Card>
+              </Col>
             </Row>
             <Divider />
             <Card title={i18next.t("system:About Casdoor")} bordered={true} style={{textAlign: "center"}}>

web/src/TokenListPage.js

@@ -222,7 +222,7 @@ class TokenListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={tokens} rowKey="name" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={tokens} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Tokens")}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/WebhookListPage.js

@@ -218,7 +218,7 @@ class WebhookListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={webhooks} rowKey="name" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={webhooks} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Webhooks")}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/auth/SignupPage.js

@@ -66,7 +66,7 @@ class SignupPage extends React.Component {
     super(props);
     this.state = {
       classes: props,
-      applicationName: props.match?.params?.applicationName ?? null,
+      applicationName: (props.applicationName ?? props.match?.params?.applicationName) ?? null,
       email: "",
       phone: "",
       countryCode: "",

web/src/backend/SystemInfo.js

@@ -33,3 +33,13 @@ export function getVersionInfo() {
     },
   }).then(res => res.json());
 }
+
+export function getPrometheusInfo() {
+  return fetch(`${Setting.ServerUrl}/api/get-prometheus-info `, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}

web/src/table/PrometheusInfoTable.js

@@ -0,0 +1,82 @@
+// Copyright 2023 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 {Table} from "antd";
+
+class PrometheusInfoTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      table: props.table,
+    };
+  }
+  render() {
+    const latencyColumns = [
+      {
+        title: "Name",
+        dataIndex: "name",
+        key: "name",
+      },
+      {
+        title: "Method",
+        dataIndex: "method",
+        key: "method",
+      },
+      {
+        title: "Count",
+        dataIndex: "count",
+        key: "count",
+      },
+      {
+        title: "Latency(ms)",
+        dataIndex: "latency",
+        key: "latency",
+      },
+    ];
+    const throughputColumns = [
+      {
+        title: "Name",
+        dataIndex: "name",
+        key: "name",
+      },
+      {
+        title: "Method",
+        dataIndex: "method",
+        key: "method",
+      },
+      {
+        title: "Throughput",
+        dataIndex: "throughput",
+        key: "throughput",
+      },
+    ];
+    if (this.state.table === "latency") {
+      return (
+        <div style={{height: "300px", overflow: "auto"}}>
+          <Table columns={latencyColumns} dataSource={this.props.prometheusInfo.apiLatency} pagination={false} />
+        </div>
+      );
+    } else if (this.state.table === "throughput") {
+      return (
+        <div style={{height: "300px", overflow: "auto"}}>
+            Total Throughput: {this.props.prometheusInfo.totalThroughput}
+          <Table columns={throughputColumns} dataSource={this.props.prometheusInfo.apiThroughput} pagination={false} />
+        </div>
+      );
+    }
+  }
+}
+
+export default PrometheusInfoTable;