QPS Stats

pages/time.js

@@ -16,9 +16,9 @@ import {
 } from "@mui/material";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import config from '../next.config';
+import config from "../next.config";
 
-const prefix = config.basePath ? config.basePath : '';
+const prefix = config.basePath ? config.basePath : "";
 
 export default function Time(props) {
   const [ranges, setRanges] = useState([]);
@@ -29,9 +29,20 @@ export default function Time(props) {
   const [snackbarSuccess, setSnackbarSuccess] = useState(false);
   const [limit, setLimit] = useState(1);
   const [token, setToken] = useState("");
+  const [stats, setStats] = useState({});
 
   const router = useRouter();
 
+  const getStats = () => {
+    fetch(`${prefix}/api/stats`, {
+      method: "GET",
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        setStats(res);
+      });
+  };
+
   const setStarted = (started) => {
     fetch(`${prefix}/api/time/started`, {
       method: "PUT",
@@ -98,6 +109,7 @@ export default function Time(props) {
 
   const refreshRanges = () => {
     getLimit();
+    getStats();
     fetch(`${prefix}/api/time/ranges`)
       .then((res) => res.json())
       .then((res) => {
@@ -275,13 +287,20 @@ export default function Time(props) {
         }}
       >
         <Button
+          sx={{
+            userSelect: "none",
+          }}
           variant="contained"
           color="primary"
           onClick={() => refreshRanges()}
         >
           Refresh
         </Button>
-        <Typography>当前每人排班数量上限：{limit}</Typography>
+        <Typography>
+          当前每人数量上限: {limit}
+          <br />
+          服务器负载 (QPS): {stats.apiqps}
+        </Typography>
       </Box>
       <TableContainer>
         <Table>