Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[type feature ]new home-page #206

Merged
merged 1 commit into from
May 10, 2022
Merged

[type feature ]new home-page #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 11 additions & 12 deletions src/layouts/BasicLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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;
};
Expand Down Expand Up @@ -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()}`,
Expand Down
20 changes: 19 additions & 1 deletion src/routes/Home/home.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
175 changes: 162 additions & 13 deletions src/routes/Home/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,45 +15,194 @@
* 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 {

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>
);
}
Expand Down
Loading