This is an automated email from the ASF dual-hosted git repository.
likeguo pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shenyu-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new 6d1a5b78 Home page optimization (#426)
6d1a5b78 is described below
commit 6d1a5b78feedf2bfb237d81cd2f8b76856f2a112
Author: Kerwin Bryant <[email protected]>
AuthorDate: Wed Mar 20 21:45:11 2024 +0800
Home page optimization (#426)
---
.../Home => components/GlobalHeader}/AddModal.js | 0
.../GlobalHeader}/ImportResultModal.js | 0
src/components/GlobalHeader/index.js | 75 ++++++++++++++-
src/routes/Home/index.js | 106 ++++-----------------
4 files changed, 90 insertions(+), 91 deletions(-)
diff --git a/src/routes/Home/AddModal.js
b/src/components/GlobalHeader/AddModal.js
similarity index 100%
rename from src/routes/Home/AddModal.js
rename to src/components/GlobalHeader/AddModal.js
diff --git a/src/routes/Home/ImportResultModal.js
b/src/components/GlobalHeader/ImportResultModal.js
similarity index 100%
rename from src/routes/Home/ImportResultModal.js
rename to src/components/GlobalHeader/ImportResultModal.js
diff --git a/src/components/GlobalHeader/index.js
b/src/components/GlobalHeader/index.js
index 16e179c2..d9060fac 100644
--- a/src/components/GlobalHeader/index.js
+++ b/src/components/GlobalHeader/index.js
@@ -18,6 +18,8 @@
import React, { PureComponent } from "react";
import { Dropdown, Form, Icon, Input, Menu, Modal, Button } from "antd";
import { connect } from "dva";
+import AddModal from "./AddModal";
+import ImportResultModal from "./ImportResultModal";
import styles from "./index.less";
import { getIntlContent, getCurrentLocale } from "../../utils/IntlUtils";
import { checkUserPassword } from "../../services/api";
@@ -77,7 +79,8 @@ class GlobalHeader extends PureComponent {
: "en-US",
userName: window.sessionStorage.getItem("userName"),
visible: false,
- display: "none"
+ display: "none",
+ popup: "",
};
}
@@ -116,6 +119,59 @@ class GlobalHeader extends PureComponent {
getCurrentLocale(this.state.localeName);
};
+ importConfigClick = () => {
+ this.setState({
+ popup: (
+ <AddModal
+ disabled={false}
+ handleOk={values => {
+ const { dispatch } = this.props;
+ dispatch({
+ type: "common/import",
+ payload: values,
+ callback: (res) => {
+ this.closeModal(true);
+ this.showImportRestlt(JSON.parse(res));
+ }
+ });
+ }}
+ handleCancel={() => {
+ this.closeModal();
+ }}
+ />
+ )
+ });
+ };
+
+ showImportRestlt = (json) => {
+ this.setState({
+ popup: (
+ <ImportResultModal
+ disabled={false}
+ json={json}
+ title={getIntlContent("SHENYU.COMMON.IMPORT.RESULT")}
+ onCancel={() => this.closeModal(true)}
+ onOk={() => this.closeModal(true)}
+ />
+ )
+ });
+ };
+
+ closeModal = (refresh) => {
+ if (refresh) {
+ this.setState({ popup: "" }, this.query);
+ }
+ this.setState({ popup: "" });
+ };
+
+ // 导出数据
+ exportAllClick = () => {
+ const { dispatch } = this.props;
+ dispatch({
+ type: "common/exportAll"
+ });
+ };
+
render() {
const {
onLogout,
@@ -123,7 +179,7 @@ class GlobalHeader extends PureComponent {
dispatch,
loading
} = this.props;
- const { userName, visible } = this.state;
+ const { popup, userName, visible } = this.state;
const menu = (
<Menu>
<Menu.Item
@@ -135,6 +191,20 @@ class GlobalHeader extends PureComponent {
<Icon type="form" />{" "}
{getIntlContent("SHENYU.GLOBALHEADER.CHANGE.PASSWORD")}
</Menu.Item>
+ <Menu.Item
+ key="2"
+ onClick={this.exportAllClick}
+ >
+ <Icon type="export" />{" "}
+ {getIntlContent("SHENYU.COMMON.EXPORT")}
+ </Menu.Item>
+ <Menu.Item
+ key="3"
+ onClick={this.importConfigClick}
+ >
+ <Icon type="import" />{" "}
+ {getIntlContent("SHENYU.COMMON.IMPORT")}
+ </Menu.Item>
<Menu.Item key="0" onClick={onLogout}>
<Icon type="logout" /> {getIntlContent("SHENYU.GLOBALHEADER.LOGOUT")}
</Menu.Item>
@@ -301,6 +371,7 @@ class GlobalHeader extends PureComponent {
</Form.Item>
</Form>
</Modal>
+ {popup}
</div>
);
}
diff --git a/src/routes/Home/index.js b/src/routes/Home/index.js
index 7bdc667a..5c8bff2e 100644
--- a/src/routes/Home/index.js
+++ b/src/routes/Home/index.js
@@ -22,8 +22,6 @@ import { routerRedux } from 'dva/router';
import styles from "./home.less";
import { getIntlContent } from '../../utils/IntlUtils';
import { activePluginSnapshot, getNewEventRecodLogList } from
"../../services/api";
-import AddModal from "./AddModal";
-import ImportResultModal from "./ImportResultModal";
const { Step } = Steps;
@@ -41,7 +39,6 @@ export default class Home extends Component {
localeName: '',
activePluginSnapshot: [],
activeLog: [],
- popup: "",
};
}
@@ -85,7 +82,9 @@ export default class Home extends Component {
);
};
- showEventLogDetail = (log) => {
+ showEventLogDetail = (e, log) => {
+ e.stopPropagation();
+ e.preventDefault();
Modal.info({
title: this.getEventLogTitle(log),
icon: null,
@@ -99,61 +98,7 @@ export default class Home extends Component {
});
};
- // 导出数据
- exportAllClick = () => {
- const { dispatch } = this.props;
- dispatch({
- type: "common/exportAll"
- });
- };
-
- closeModal = (refresh) => {
- if (refresh) {
- this.setState({ popup: "" }, this.query);
- }
- this.setState({ popup: "" });
- };
-
- importConfigClick = () => {
- this.setState({
- popup: (
- <AddModal
- disabled={false}
- handleOk={values => {
- const { dispatch } = this.props;
- dispatch({
- type: "common/import",
- payload: values,
- callback: (res) => {
- this.closeModal(true);
- this.showImportRestlt(JSON.parse(res));
- }
- });
- }}
- handleCancel={() => {
- this.closeModal();
- }}
- />
- )
- });
- };
-
- showImportRestlt = (json) => {
- this.setState({
- popup: (
- <ImportResultModal
- disabled={false}
- json={json}
- title={getIntlContent("SHENYU.COMMON.IMPORT.RESULT")}
- onCancel={() => this.closeModal(true)}
- onOk={() => this.closeModal(true)}
- />
- )
- });
- };
-
render () {
- const { popup } = this.state;
const contextStyle = { "fontWeight": "bold", color: "#3b9a9c" };
const pluginSteps = this.state.activePluginSnapshot.map((p, index) => {
const content = (
@@ -180,16 +125,18 @@ export default class Home extends Component {
const type = log.operationType.startsWith("CREATE") ? "success" :
log.operationType.startsWith("DELETE") ? "warning" : "info";
return (
<Timeline.Item color="#e8e8e8" label={index} key={index}>
- <Alert
- className={styles.logItem}
- message={
- <div style={{ display: "flex", alignItems: "center",
justifyContent: "space-between" }}>
- {this.getEventLogTitle(log)}
- <Button type="link"
onClick={this.showEventLogDetail.bind(this, log)}>Detail</Button>
- </div>
- }
- type={type}
- />
+ <div style={{ cursor: "pointer" }} onClick={(e) =>
this.showEventLogDetail(e, log)}>
+ <Alert
+ className={styles.logItem}
+ message={
+ <div style={{ display: "flex", alignItems: "center",
justifyContent: "space-between" }}>
+ {this.getEventLogTitle(log)}
+ <Button type="link" onClick={(e) =>
this.showEventLogDetail(e, log)}>Detail</Button>
+ </div>
+ }
+ type={type}
+ />
+ </div>
</Timeline.Item>
);
});
@@ -199,24 +146,6 @@ export default class Home extends Component {
<div className={styles.content}>
<span style={{ textShadow: '1px 1px 3px'
}}>{getIntlContent("SHENYU.HOME.WELCOME")}</span>
</div>
- <div>
- <Button
- style={{ marginLeft: 20, marginBottom: 20 }}
- icon="export"
- type="primary"
- onClick={this.exportAllClick}
- >
- {getIntlContent("SHENYU.COMMON.EXPORT")}
- </Button>
- <Button
- style={{ marginLeft: 20, marginBottom: 20 }}
- icon="import"
- type="primary"
- onClick={this.importConfigClick}
- >
- {getIntlContent("SHENYU.COMMON.IMPORT")}
- </Button>
- </div>
<div className={styles.processContent}>
<Steps current={1}>
<Step title="User Request" />
@@ -225,7 +154,7 @@ export default class Home extends Component {
</Steps>
<Divider />
<Row gutter={16} className={styles.row}>
- <Col span={10}>
+ <Col span={12}>
<Card title="Activity plugin list" bordered={false}
className={styles.card}>
<Steps size="small"
current={this.state.activePluginSnapshot.length} direction="vertical">
{pluginSteps}
@@ -292,7 +221,7 @@ export default class Home extends Component {
<Divider />
</Card>
</Col>
- <Col span={14}>
+ <Col span={12}>
<Card title="Event log" bordered={false} className={styles.card}>
<Timeline>
{activeLogItems}
@@ -302,7 +231,6 @@ export default class Home extends Component {
</Col>
</Row>
</div>
- {popup}
</div>
);
}
