You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by ha...@apache.org on 2018/01/22 08:18:04 UTC
[incubator-skywalking-ui] branch feature/5.0.0 updated: Add default
selected item for application and server pages
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch feature/5.0.0
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/feature/5.0.0 by this push:
new 2e7d442 Add default selected item for application and server pages
2e7d442 is described below
commit 2e7d4429079caa95cff8bfa115fabcb90469e62a
Author: hanahmily <ha...@gmail.com>
AuthorDate: Mon Jan 22 16:17:28 2018 +0800
Add default selected item for application and server pages
---
.../frontend/src/routes/Application/Application.js | 48 ++++++++++++++++------
src/main/frontend/src/routes/Server/Server.js | 48 ++++++++++++++++------
src/main/frontend/src/routes/Service/Service.js | 2 +-
3 files changed, 73 insertions(+), 25 deletions(-)
diff --git a/src/main/frontend/src/routes/Application/Application.js b/src/main/frontend/src/routes/Application/Application.js
index 77843e9..e7ca6ed 100644
--- a/src/main/frontend/src/routes/Application/Application.js
+++ b/src/main/frontend/src/routes/Application/Application.js
@@ -1,15 +1,32 @@
import React, { Component } from 'react';
import { connect } from 'dva';
-import { Row, Col, Select, Card, Table } from 'antd';
+import { Row, Col, Select, Card, Table, Form } from 'antd';
import { AppTopology } from '../../components/Topology';
const { Option } = Select;
+const { Item: FormItem } = Form;
@connect(state => ({
application: state.application,
duration: state.global.duration,
}))
+@Form.create({
+ mapPropsToFields() {
+ return {
+ appId: Form.createFormField({
+ value: 'App1',
+ }),
+ };
+ },
+})
export default class Application extends Component {
+ componentDidMount() {
+ this.props.form.validateFields((err, values) => {
+ if (!err) {
+ this.handleChange(values.appId);
+ }
+ });
+ }
shouldComponentUpdate(nextProps) {
if (this.props.duration !== nextProps.duration) {
this.props.dispatch({
@@ -26,6 +43,7 @@ export default class Application extends Component {
});
}
render() {
+ const { getFieldDecorator } = this.props.form;
const tableColumns = [{
title: 'Name',
dataIndex: 'name',
@@ -56,17 +74,23 @@ export default class Application extends Component {
};
return (
<div>
- <Select
- showSearch
- style={{ width: 200 }}
- placeholder="Select a application"
- optionFilterProp="children"
- onChange={this.handleChange.bind(this)}
- >
- <Option value="App1">App1</Option>
- <Option value="App2">App2</Option>
- <Option value="App3">App3</Option>
- </Select>
+ <Form layout="inline">
+ <FormItem>
+ {getFieldDecorator('appId')(
+ <Select
+ showSearch
+ style={{ width: 200 }}
+ placeholder="Select a application"
+ optionFilterProp="children"
+ onSelect={this.handleChange.bind(this)}
+ >
+ <Option value="App1">App1</Option>
+ <Option value="App2">App2</Option>
+ <Option value="App3">App3</Option>
+ </Select>
+ )}
+ </FormItem>
+ </Form>
<Card
bordered={false}
bodyStyle={{ padding: 0, marginTop: 24 }}
diff --git a/src/main/frontend/src/routes/Server/Server.js b/src/main/frontend/src/routes/Server/Server.js
index e5f920e..4cb2f58 100644
--- a/src/main/frontend/src/routes/Server/Server.js
+++ b/src/main/frontend/src/routes/Server/Server.js
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { connect } from 'dva';
-import { Row, Col, Select, Card } from 'antd';
+import { Row, Col, Select, Card, Form } from 'antd';
import {
ChartCard, MiniArea, MiniBar, Line, Area, StackBar,
} from '../../components/Charts';
@@ -9,12 +9,29 @@ import { timeRange } from '../../utils/utils';
const { Description } = DescriptionList;
const { Option } = Select;
+const { Item: FormItem } = Form;
@connect(state => ({
server: state.server,
duration: state.global.duration,
}))
+@Form.create({
+ mapPropsToFields() {
+ return {
+ serverId: Form.createFormField({
+ value: 'Server1',
+ }),
+ };
+ },
+})
export default class Server extends Component {
+ componentDidMount() {
+ this.props.form.validateFields((err, values) => {
+ if (!err) {
+ this.handleChange(values.serverId);
+ }
+ });
+ }
shouldComponentUpdate(nextProps) {
if (this.props.duration !== nextProps.duration) {
this.props.dispatch({
@@ -33,22 +50,29 @@ export default class Server extends Component {
avg = list => (list.length > 0 ?
(list.reduce((acc, curr) => acc + curr) / list.length).toFixed(2) : 0)
render() {
+ const { getFieldDecorator } = this.props.form;
const { getServerResponseTimeTrend, getServerTPSTrend,
getCPUTrend, getMemoryTrend, getGCTrend } = this.props.server;
const timeRangeArray = timeRange(this.props.duration);
return (
<div>
- <Select
- showSearch
- style={{ width: 200 }}
- placeholder="Select a server"
- optionFilterProp="children"
- onChange={this.handleChange.bind(this)}
- >
- <Option value="Server1">Server1</Option>
- <Option value="Server2">Server2</Option>
- <Option value="Server3">Server3</Option>
- </Select>
+ <Form layout="inline">
+ <FormItem>
+ {getFieldDecorator('serverId')(
+ <Select
+ showSearch
+ style={{ width: 200 }}
+ placeholder="Select a server"
+ optionFilterProp="children"
+ onChange={this.handleChange.bind(this)}
+ >
+ <Option value="Server1">Server1</Option>
+ <Option value="Server2">Server2</Option>
+ <Option value="Server3">Server3</Option>
+ </Select>
+ )}
+ </FormItem>
+ </Form>
<Card title="Info" style={{ marginTop: 24 }} bordered={false}>
<DescriptionList>
<Description term="OS Name">Mac OS X</Description>
diff --git a/src/main/frontend/src/routes/Service/Service.js b/src/main/frontend/src/routes/Service/Service.js
index 021f7e4..c08ffe6 100644
--- a/src/main/frontend/src/routes/Service/Service.js
+++ b/src/main/frontend/src/routes/Service/Service.js
@@ -39,7 +39,7 @@ export default class Service extends Component {
<div>
<Select
showSearch
- style={{ width: 200 }}
+ style={{ width: 600 }}
placeholder="Select a service"
optionFilterProp="children"
onChange={this.handleChange.bind(this)}
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.