This is an automated email from the ASF dual-hosted git repository.
dayu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-shenyu-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new 4f3b7a94 feature/new-home-part1 (#206)
4f3b7a94 is described below
commit 4f3b7a9441142390c7e8a26df2589bc1aaee1de5
Author: likeguo <[email protected]>
AuthorDate: Tue May 10 19:46:12 2022 +0800
feature/new-home-part1 (#206)
---
src/layouts/BasicLayout.js | 23 +++---
src/routes/Home/home.less | 20 +++++-
src/routes/Home/index.js | 175 +++++++++++++++++++++++++++++++++++++++++----
src/services/api.js | 109 ++++++++++++++++------------
4 files changed, 256 insertions(+), 71 deletions(-)
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index c10eeb97..6256eaf3 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -17,19 +17,19 @@
import React from "react";
import PropTypes from "prop-types";
-import { Layout, message } from "antd";
+import {Layout, message} from "antd";
import DocumentTitle from "react-document-title";
-import { connect } from "dva";
-import { Route, Redirect, Switch } from "dva/router";
-import { ContainerQuery } from "react-container-query";
+import {connect} from "dva";
+import {Redirect, Route, Switch} from "dva/router";
+import {ContainerQuery} from "react-container-query";
import classNames from "classnames";
import pathToRegexp from "path-to-regexp";
import GlobalHeader from "../components/GlobalHeader";
import SiderMenu from "../components/SiderMenu";
import NotFound from "../routes/Exception/404";
-import { getRoutes } from "../utils/utils";
-import AuthRoute, { checkMenuAuth, getAuthMenus } from "../utils/AuthRoute";
-import { getMenuData } from "../common/menu";
+import {getRoutes} from "../utils/utils";
+import AuthRoute, {checkMenuAuth, getAuthMenus} from "../utils/AuthRoute";
+import {getMenuData} from "../common/menu";
import logo from "../assets/logo.svg";
const MyContext = React.createContext();
@@ -177,10 +177,9 @@ class BasicLayout extends React.PureComponent {
} else {
const { routerData, permissions } = this.props;
// get the first authorized route path in routerData
- const authorizedPath = Object.keys(routerData).find(
+ return Object.keys(routerData).find(
item => checkMenuAuth(item, permissions) && item !== "/"
);
- return authorizedPath;
}
return redirect;
};
@@ -228,17 +227,17 @@ class BasicLayout extends React.PureComponent {
}
menuMap[item.role].push(item);
});
- Object.keys(menuMap).forEach((key, index) => {
+ Object.keys(menuMap).forEach((key) => {
menus[0].children.push({
name: key,
- path: `/plug/${index}`,
+ path: `/plug/${menuMap[key][0].role}`,
authority: undefined,
icon: "unordered-list",
children: menuMap[key].map(item => {
const { name } = item;
return {
name: name.replace(name[0], name[0].toUpperCase()),
- path: `/plug/${index}/${item.name}`,
+ path: `/plug/${item.role}/${item.name}`,
authority: undefined,
id: item.id,
locale: `SHENYU.MENU.PLUGIN.${item.name.toUpperCase()}`,
diff --git a/src/routes/Home/home.less b/src/routes/Home/home.less
index 538f0610..feae880c 100644
--- a/src/routes/Home/home.less
+++ b/src/routes/Home/home.less
@@ -16,11 +16,29 @@
*/
@import "~antd/lib/style/themes/default.less";
+
.content {
text-align: center;
- padding-top: 200px;
+ padding-top: 40px;
+ padding-bottom: 20px;
+
span {
font-size: 32px;
color: @primary-color;
}
}
+
+.processContent {
+ margin-left: 30px;
+ margin-right: 30px;
+}
+
+.contextHide {
+ margin-bottom: 0;
+ margin-right: 0;
+ margin-left: 0;
+}
+
+.logItem {
+ padding: 10px 5px 5px 10px !important;
+}
diff --git a/src/routes/Home/index.js b/src/routes/Home/index.js
index 56991964..0de685b8 100644
--- a/src/routes/Home/index.js
+++ b/src/routes/Home/index.js
@@ -15,12 +15,19 @@
* limitations under the License.
*/
-import React, { Component } from "react";
-import { connect } from "dva";
+import React, {Component} from "react";
+import {Steps, Divider, Card, Col, Row, Timeline, Statistic, Icon, Popover,
Tag, Alert} from 'antd';
+import {connect} from "dva";
+import { routerRedux } from 'dva/router';
import styles from "./home.less";
-import { getCurrentLocale, getIntlContent } from '../../utils/IntlUtils'
+import {getIntlContent} from '../../utils/IntlUtils';
+import {activePluginSnapshot, getNewEventRecodLogList} from
"../../services/api";
-@connect(({ global }) => ({
+const {Step} = Steps;
+
+const colors = ["magenta","red","green","cyan","purple","blue","orange"];
+
+@connect(({global}) => ({
global
}))
export default class Home extends Component {
@@ -28,32 +35,174 @@ export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
- localeName: ''
+ // eslint-disable-next-line react/no-unused-state
+ localeName: '',
+ activePluginSnapshot: [],
+ activeLog: [],
}
}
componentDidMount() {
const token = window.sessionStorage.getItem("token");
if (token) {
- const { dispatch } = this.props;
+ const {dispatch} = this.props;
dispatch({
type: "global/fetchPlatform"
});
}
+ activePluginSnapshot().then(res => {
+ if (res){
+ this.setState({activePluginSnapshot: res.data || []})
+ }
+ });
+ getNewEventRecodLogList().then(res =>{
+ if (res){
+ this.setState({activeLog: res.data || []})
+ }
+ })
+
}
- changeLocales(locale) {
- this.setState({
- localeName: locale
- });
- getCurrentLocale(this.state.localeName);
+ componentWillUnmount() {
+ this.setState = ()=>false;
+ }
+
+ pluginOnClick = (plugin) =>{
+ const {dispatch} = this.props;
+ dispatch(routerRedux.push(`plug/${plugin.role}/${plugin.name}`));
}
render() {
+ const contextStyle = {"fontWeight": "bold",color:"#3b9a9c"}
+ const pluginSteps = this.state.activePluginSnapshot.map((p,index )=> {
+ const content = (
+ <div>
+ <p><Tag color={colors[(p.role.length + index) %
colors.length]}>{p.role}</Tag></p>
+ <p>the plugin has handle is : <span
style={contextStyle}>{p.handleCount}</span></p>
+ <p>the plugin has selector is : <span
style={contextStyle}>{p.selectorCount} </span></p>
+ <hr />
+ <div style={contextStyle}>
+ <pre><code>{JSON.stringify(JSON.parse(p.config !== null ? p.config
: '{}'), null, 4)}</code></pre>
+ </div>
+ </div>
+ );
+ const title = (
+ <Popover placement="topLeft" content={content} title={<Tag
color="geekblue" onClick={this.pluginOnClick.bind(this,p)}>{p.name} </Tag>}>
+ <Tag color="geekblue" onClick={this.pluginOnClick.bind(this,p)}
style={{"fontWeight": "bold"}}>{p.name} </Tag>
+ <Tag color={colors[(p.role.length + index) %
colors.length]}>{p.role}</Tag>
+ </Popover>
+ );
+ const description = <span>handle is <span
style={contextStyle}>{p.handleCount}</span> selector is <span
style={contextStyle}>{p.selectorCount} </span></span>;
+ return <Step title={title} key={index} description={description} />;
+ })
+ const activeLogItems = this.state.activeLog.map((log,index) =>{
+ const textStyle = {"fontWeight": "bold",color:log.color};
+ const type = log.operationType.startsWith("CREATE") ? "success" :
log.operationType.startsWith("DELETE") ? "warning" : "info";
+ return(
+ <Timeline.Item color={log.color} label={index} key={index}>
+ <Alert
+ className={styles.logItem}
+ message={<p><span style={textStyle}>{log.operationType}</span> by
<span style={textStyle}>{log.operator}</span></p>}
+ description={<p className={styles.contextHide}>{log.operationTime}
: <span>{log.context}</span></p>}
+ type={type}
+ />
+ </Timeline.Item>
+ )
+ })
+
return (
- <div className={styles.content}>
- <span>{getIntlContent("SHENYU.HOME.WELCOME")}</span>
+ <div>
+ <div className={styles.content}>
+ <span>{getIntlContent("SHENYU.HOME.WELCOME")}</span>
+ </div>
+ <div className={styles.processContent}>
+ <Steps current={1}>
+ <Step title="User Request" />
+ <Step title="Shenyu-Gateway BootStrap Proxy" subTitle="plugin
list" description="Admin manager." />
+ <Step title="Server Waiting" description="do server processing" />
+ </Steps>
+ <Divider />
+ <div style={{background: '#ECECEC', padding: '15px'}}>
+ <Row gutter={16}>
+ <Col span={10}>
+ <Card title="Activity plugin list" bordered={false}>
+ <Steps size="small"
current={this.state.activePluginSnapshot.length} direction="vertical">
+ {pluginSteps}
+ </Steps>
+ <Divider />
+ </Card>
+ </Col>
+ <Col span={0}>
+ <Card title="Monitor" bordered={false}>
+ <div style={{padding: '10px'}}>
+ <Row gutter={16}>
+ <Col span={12}>
+ <Statistic title="RPC plugin" value={5} prefix={<Icon
type="plugin" />} />
+ </Col>
+ <Col span={12}>
+ <Statistic title="Active/Plugin" value={7} suffix="/
28" />
+ </Col>
+ </Row>
+ </div>
+ <div style={{padding: '10px'}}>
+ <Row gutter={16}>
+ <Col span={12}>
+ <Statistic title="rule" value={238} prefix={<Icon
type="plugin" />} />
+ </Col>
+ <Col span={12}>
+ <Statistic title="Selector" value={87} suffix="/ 3
plugin" />
+ </Col>
+ </Row>
+ </div>
+ <div style={{padding: '10px'}}>
+ <Row gutter={16}>
+ <Col span={12}>
+ <Statistic title="metadata" value={0} prefix={<Icon
type="plugin" />} />
+ </Col>
+ <Col span={12}>
+ <Statistic title="Dictionary" value={55} />
+ </Col>
+ </Row>
+ </div>
+ <div style={{padding: '10px'}}>
+ <Row gutter={16}>
+ <Col span={12}>
+ <Statistic
+ title="Proxy count"
+ value={11280}
+ precision={0}
+ valueStyle={{color: '#3f8600'}}
+ prefix={<Icon type="arrow-up" />}
+ suffix=""
+ />
+ </Col>
+ <Col span={12}>
+ <Statistic
+ title="Fail count"
+ value={930}
+ precision={0}
+ valueStyle={{color: '#cf1322'}}
+ prefix={<Icon type="arrow-down" />}
+ suffix=""
+ />
+ </Col>
+ </Row>
+ </div>
+ <Divider />
+ </Card>
+ </Col>
+ <Col span={14}>
+ <Card title="Event log" bordered={false}>
+ <Timeline>
+ {activeLogItems}
+ </Timeline>
+ <Divider />
+ </Card>
+ </Col>
+ </Row>
+ </div>
+ </div>
</div>
);
}
diff --git a/src/services/api.js b/src/services/api.js
index 6779a6dd..46f81425 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -15,10 +15,11 @@
* limitations under the License.
*/
-import { stringify } from "qs";
+import {stringify} from "qs";
import request from "../utils/request";
const baseUrl = document.getElementById("httpPath").innerHTML;
+
/* add user */
export async function addUser(params) {
return request(`${baseUrl}/dashboardUser`, {
@@ -29,6 +30,7 @@ export async function addUser(params) {
}
});
}
+
/* delete user */
export async function deleteUser(params) {
return request(`${baseUrl}/dashboardUser/batch`, {
@@ -36,6 +38,7 @@ export async function deleteUser(params) {
body: [...params.list]
});
}
+
/* update user */
export async function updateUser(params) {
return request(`${baseUrl}/dashboardUser/${params.id}`, {
@@ -63,31 +66,18 @@ export async function updatePassword(params) {
/* get all metadata */
export async function getAllMetadata(params) {
- const { appName, currentPage, pageSize } = params;
- let myParams = params;
- if (appName) {
- myParams = params;
- } else {
- myParams = { currentPage, pageSize };
- }
-
- return request(`${baseUrl}/meta-data/queryList?${stringify(myParams)}`, {
+ const {appName, currentPage, pageSize} = params;
+ return request(`${baseUrl}/meta-data/queryList?${stringify(appName ? params
: {currentPage, pageSize})}`, {
method: `GET`
});
}
export async function findMetadata(params) {
- // const { appName, currentPage, pageSize } = params;
- // let myParams = params;
- // if (appName) {
- // myParams = params;
- // } else {
- // myParams = { currentPage, pageSize };
- // }
return request(`${baseUrl}/meta-data/${params.id}`, {
method: `GET`
});
}
+
/* addMetadata */
export async function addMetadata(params) {
return request(`${baseUrl}/meta-data/createOrUpdate`, {
@@ -97,6 +87,7 @@ export async function addMetadata(params) {
}
});
}
+
/* updateMetadata */
export async function updateMetadata(params) {
return request(`${baseUrl}/meta-data/createOrUpdate`, {
@@ -115,6 +106,7 @@ export async function updateMetadata(params) {
}
});
}
+
/* syncData */
export async function syncData() {
return request(`${baseUrl}/meta-data/syncData`, {
@@ -137,6 +129,7 @@ export async function deleteMetadata(params) {
body: [...params.list]
});
}
+
/* updateEnabled */
export async function updateEnabled(params) {
return request(`${baseUrl}/meta-data/batchEnabled`, {
@@ -147,19 +140,16 @@ export async function updateEnabled(params) {
}
});
}
+
/* getAllUsers */
export async function getAllUsers(params) {
- const { userName, currentPage, pageSize } = params;
- let myParams = params;
- if (userName) {
- myParams = params;
- } else {
- myParams = { currentPage, pageSize };
- }
+ const {userName, currentPage, pageSize} = params;
+ const myParams = userName ? params : {currentPage, pageSize};
return request(`${baseUrl}/dashboardUser?${stringify(myParams)}`, {
method: `GET`
});
}
+
/* findUser */
export async function findUser(params) {
return request(`${baseUrl}/dashboardUser/${params.id}`, {
@@ -176,6 +166,7 @@ export async function addPlugin(params) {
}
});
}
+
/* deletePlugin */
export async function deletePlugin(params) {
return request(`${baseUrl}/plugin/batch`, {
@@ -183,6 +174,7 @@ export async function deletePlugin(params) {
body: [...params.list]
});
}
+
/* updatePlugin */
export async function updatePlugin(params) {
return request(`${baseUrl}/plugin/${params.id}`, {
@@ -204,12 +196,21 @@ export async function getAllPlugins(params) {
method: `GET`
});
}
+
+/* get Plugins snapshot */
+export function activePluginSnapshot() {
+ return request(`${baseUrl}/plugin/snapshot/active`, {
+ method: `GET`
+ });
+}
+
/* findPlugin */
export async function findPlugin(params) {
return request(`${baseUrl}/plugin/${params.id}`, {
method: `GET`
});
}
+
/* updatepluginEnabled */
export async function updatepluginEnabled(params) {
return request(`${baseUrl}/plugin/enabled`, {
@@ -230,6 +231,7 @@ export async function addAuth(params) {
}
});
}
+
/* deleteAuth */
export async function deleteAuth(params) {
return request(`${baseUrl}/appAuth/batch`, {
@@ -237,6 +239,7 @@ export async function deleteAuth(params) {
body: [...params.list]
});
}
+
/* updateAuth */
export async function updateAuth(params) {
return request(`${baseUrl}/appAuth/${params.id}`, {
@@ -248,19 +251,16 @@ export async function updateAuth(params) {
}
});
}
+
/* getAllAuth */
export async function getAllAuth(params) {
- const { appKey, currentPage, pageSize } = params;
- let myParams = params;
- if (appKey) {
- myParams = params;
- } else {
- myParams = { currentPage, pageSize };
- }
+ const {appKey, currentPage, pageSize} = params;
+ let myParams = appKey ? params : {currentPage, pageSize};
return request(`${baseUrl}/appAuth?${stringify(myParams)}`, {
method: `GET`
});
}
+
/* syncAuthsData */
export async function syncAuthsData() {
return request(`${baseUrl}/appAuth/syncData`, {
@@ -268,15 +268,11 @@ export async function syncAuthsData() {
body: {}
});
}
+
/* getAllAuths */
export async function getAllAuths(params) {
- const { appKey, phone, currentPage, pageSize } = params;
- let myParams = params;
- if (appKey || phone) {
- myParams = params;
- } else {
- myParams = { currentPage, pageSize };
- }
+ const {appKey, phone, currentPage, pageSize} = params;
+ const myParams = appKey || phone ? params : {currentPage, pageSize};
return request(`${baseUrl}/appAuth/findPageByQuery?${stringify(myParams)}`, {
method: `GET`
});
@@ -288,18 +284,21 @@ export async function findAuthData(params) {
method: `GET`
});
}
+
/* findAuthDataDel */
export async function findAuthDataDel(params) {
return request(`${baseUrl}/appAuth/detailPath?id=${params.id}`, {
method: `GET`
});
}
+
/* get all metadatas */
export async function getAllMetadatas() {
return request(`${baseUrl}/meta-data/findAll`, {
method: `GET`
});
}
+
/* update auth */
export async function updateAuthData(params) {
return request(`${baseUrl}/appAuth/updateDetail`, {
@@ -309,6 +308,7 @@ export async function updateAuthData(params) {
}
});
}
+
/* update authDel */
export async function updateAuthDel(params) {
return request(`${baseUrl}/appAuth/updateDetailPath`, {
@@ -316,6 +316,7 @@ export async function updateAuthDel(params) {
body: params
});
}
+
/* add auth */
export async function addAuthData(params) {
return request(`${baseUrl}/appAuth/apply`, {
@@ -325,6 +326,7 @@ export async function addAuthData(params) {
}
});
}
+
/* batch enable auth */
export async function updateAuthEnabled(params) {
return request(`${baseUrl}/appAuth/batchEnabled`, {
@@ -335,6 +337,7 @@ export async function updateAuthEnabled(params) {
}
});
}
+
/* batch delete auth */
export async function deleteAuths(params) {
return request(`${baseUrl}/appAuth/batchDelete`, {
@@ -342,6 +345,7 @@ export async function deleteAuths(params) {
body: [...params.list]
});
}
+
/* find auth */
export async function findAuth(params) {
return request(`${baseUrl}/appAuth/${params.id}`, {
@@ -358,6 +362,7 @@ export async function addSelector(params) {
}
});
}
+
/* delete selector */
export async function deleteSelector(params) {
return request(`${baseUrl}/selector/batch`, {
@@ -365,6 +370,7 @@ export async function deleteSelector(params) {
body: [...params.list]
});
}
+
/* update selector */
export async function updateSelector(params) {
return request(`${baseUrl}/selector/${params.id}`, {
@@ -374,12 +380,14 @@ export async function updateSelector(params) {
}
});
}
+
/* get all selectors */
export async function getAllSelectors(params) {
return request(`${baseUrl}/selector?${stringify(params)}`, {
method: `GET`
});
}
+
/* get single selector */
export async function findSelector(params) {
return request(`${baseUrl}/selector/${params.id}`, {
@@ -401,6 +409,7 @@ export async function addRule(params) {
}
});
}
+
export async function deleteRule(params) {
return request(`${baseUrl}/rule/batch`, {
method: `DELETE`,
@@ -443,6 +452,7 @@ export async function asyncPlugin() {
method: `POST`
});
}
+
// 同步单个插件
export async function asyncOnePlugin(params) {
return request(`${baseUrl}/plugin/syncPluginData/${params.id}`, {
@@ -463,6 +473,7 @@ export async function getAllPluginHandles(params) {
method: `GET`
});
}
+
// add plugin handle
export async function addPluginHandle(params) {
return request(`${baseUrl}/plugin-handle`, {
@@ -472,6 +483,7 @@ export async function addPluginHandle(params) {
}
});
}
+
// get detail of plugin handle
export async function findPluginHandle(params) {
return request(`${baseUrl}/plugin-handle/${params.id}`, {
@@ -573,10 +585,10 @@ export async function getAllRoles() {
/* get roles by page */
export async function getRoleList(params) {
- const { roleName, currentPage, pageSize } = params;
- let myParams = { ...params };
+ const {roleName, currentPage, pageSize} = params;
+ let myParams = {...params};
if (!roleName) {
- myParams = { currentPage, pageSize };
+ myParams = {currentPage, pageSize};
}
return request(`${baseUrl}/role?${stringify(myParams)}`, {
method: `GET`
@@ -622,10 +634,10 @@ export async function updateRole(params) {
/* get resources by page */
export async function getAllResources(params) {
- const { title, currentPage, pageSize } = params;
- let myParams = { ...params };
+ const {title, currentPage, pageSize} = params;
+ let myParams = {...params};
if (!title) {
- myParams = { currentPage, pageSize };
+ myParams = {currentPage, pageSize};
}
return request(`${baseUrl}/resource?${stringify(myParams)}`, {
method: `GET`
@@ -724,7 +736,7 @@ export async function addDataPermisionRule(params) {
}
});
}
-
+// Can't perform a React state update on an unmounted component. This is a
no-op, but it indicates a memory leak in your application. To fix, cancel all
subscriptions and
/* delete dataPermision's selector */
export async function deleteDataPermisionSelector(params) {
return request(`${baseUrl}/data-permission/selector`, {
@@ -744,3 +756,10 @@ export async function deleteDataPermisionRule(params) {
}
});
}
+
+/* get new event recode logs */
+export function getNewEventRecodLogList() {
+ return request(`${baseUrl}/operation-record/log/list`, {
+ method: `GET`
+ });
+}
