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/04/22 15:29:48 UTC
[incubator-skywalking-ui] branch 5.0.0/beta updated: Add selecting
server from application page
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch 5.0.0/beta
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/5.0.0/beta by this push:
new ee37483 Add selecting server from application page
ee37483 is described below
commit ee37483fcd851f5ea2ece294b51fc1556df277a3
Author: gaohongtao <ha...@gmail.com>
AuthorDate: Sun Apr 22 23:29:05 2018 +0800
Add selecting server from application page
---
mock/application.js | 2 +-
src/components/RankList/index.js | 10 +-
src/components/ServerLitePanel/index.js | 99 ++++++++++++++++++
src/models/application.js | 13 ++-
src/routes/Application/Application.js | 75 ++++++++++----
src/routes/Application/Server.js | 171 ++++++++++++++++----------------
src/utils/utils.js | 8 ++
7 files changed, 264 insertions(+), 114 deletions(-)
diff --git a/mock/application.js b/mock/application.js
index 4db60b7..4cc34a8 100644
--- a/mock/application.js
+++ b/mock/application.js
@@ -32,7 +32,7 @@ export default {
res.json(mockjs.mock(
{
data: {
- 'getSlowService|10': [{ 'key|+1': 1, name: '@name', 'avgResponseTime|200-1000': 1 }],
+ 'getSlowService|10': [{ 'key|+1': 1, label: '@url', 'value|200-1000': 1 }],
'getServerThroughput|10': [{
'key|+1': 3,
osName: 'Linux-@name',
diff --git a/src/components/RankList/index.js b/src/components/RankList/index.js
index 72ac1bb..aaec6dc 100644
--- a/src/components/RankList/index.js
+++ b/src/components/RankList/index.js
@@ -36,16 +36,16 @@ class RankList extends PureComponent {
}
return renderValue(item);
}
- renderTitle = (item, maxDuration) => {
- const { onClick } = this.props;
+ renderTitle = (item, maxValue) => {
+ const { onClick, color = '#87CEFA' } = this.props;
return (
<div className={styles.progressWrap}>
- {maxDuration > 0 ? (
+ {maxValue > 0 ? (
<div
className={styles.progress}
style={{
- backgroundColor: '#87CEFA',
- width: `${(item.value * 100) / maxDuration}%`,
+ backgroundColor: color,
+ width: `${(item.value * 100) / maxValue}%`,
height: 25,
}}
/>
diff --git a/src/components/ServerLitePanel/index.js b/src/components/ServerLitePanel/index.js
new file mode 100644
index 0000000..4ad7447
--- /dev/null
+++ b/src/components/ServerLitePanel/index.js
@@ -0,0 +1,99 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+import React, { PureComponent } from 'react';
+import { Row, Col, Card, Select } from 'antd';
+import {
+ ChartCard, MiniArea, MiniBar,
+} from '../../components/Charts';
+import DescriptionList from '../../components/DescriptionList';
+import { axis } from '../../utils/time';
+import { avgTimeSeries, getServerId } from '../../utils/utils';
+
+const { Option } = Select;
+const { Description } = DescriptionList;
+
+export default class ServerLitePanel extends PureComponent {
+ bytesToMB = list => list.map(_ => parseFloat((_ / (1024 ** 2)).toFixed(2)))
+ render() {
+ const { serverList, duration, data, onSelectServer } = this.props;
+ if (serverList.length < 1) {
+ return null;
+ }
+ const { serverInfo, getServerResponseTimeTrend, getServerTPSTrend } = data;
+ if (!serverInfo.key) {
+ onSelectServer(serverList[0].key, serverList[0]);
+ return null;
+ }
+ return (
+ <div>
+ <Row gutter={0}>
+ <Col span={24}>
+ <Select
+ size="small"
+ value={serverInfo.key}
+ onChange={value => onSelectServer(value, serverList.find(_ => _.key === value))}
+ style={{ width: '100%' }}
+ >
+ {serverList.map(_ => <Option key={_.key} value={_.key}>{getServerId(_)}</Option>)}
+ </Select>
+ </Col>
+ <Col span={24}>
+ <Card bordered={false} bodyStyle={{ padding: 5 }}>
+ <DescriptionList col={1} gutter={0} size="small">
+ <Description term="Host">{serverInfo.host}</Description>
+ <Description term="OS">{serverInfo.osName}</Description>
+ </DescriptionList>
+ </Card>
+ </Col>
+ <Col span={24}>
+ <ChartCard
+ title="Avg Throughput"
+ total={`${avgTimeSeries(getServerTPSTrend.trendList)}`}
+ contentHeight={46}
+ bordered={false}
+ bodyStyle={{ padding: 5 }}
+ >
+ <MiniBar
+ data={axis(duration, getServerTPSTrend.trendList)}
+ color="#975FE4"
+ />
+ </ChartCard>
+ </Col>
+ <Col span={24}>
+ <ChartCard
+ title="Avg Response Time"
+ total={`${avgTimeSeries(getServerResponseTimeTrend.trendList)} ms`}
+ contentHeight={46}
+ bordered={false}
+ bodyStyle={{ padding: 5 }}
+ >
+ {getServerResponseTimeTrend.trendList.length > 0 ? (
+ <MiniArea
+ animate={false}
+ color="#87cefa"
+ data={axis(duration, getServerResponseTimeTrend.trendList)}
+ />
+ ) : (<span style={{ display: 'none' }} />)}
+ </ChartCard>
+ </Col>
+ </Row>
+ </div>
+ );
+ }
+}
diff --git a/src/models/application.js b/src/models/application.js
index 99590db..1c24e71 100644
--- a/src/models/application.js
+++ b/src/models/application.js
@@ -32,8 +32,8 @@ const dataQuery = `
query Application($applicationId: ID!, $duration: Duration!) {
getSlowService(applicationId: $applicationId, duration: $duration, topN: 10) {
key: id
- name
- avgResponseTime
+ label: name
+ value: avgResponseTime
}
getServerThroughput(applicationId: $applicationId, duration: $duration, topN: 999999) {
key: id
@@ -152,6 +152,15 @@ export default generateModal({
...data,
serverInfo,
...payload,
+ },
+ };
+ },
+ showServer(preState) {
+ const { data } = preState;
+ return {
+ ...preState,
+ data: {
+ ...data,
showServer: true,
},
};
diff --git a/src/routes/Application/Application.js b/src/routes/Application/Application.js
index e8cd473..1363350 100644
--- a/src/routes/Application/Application.js
+++ b/src/routes/Application/Application.js
@@ -18,11 +18,13 @@
import React, { PureComponent } from 'react';
import { connect } from 'dva';
-import { Row, Col, Select, Card, Form, Breadcrumb } from 'antd';
+import { Row, Col, Select, Card, Form, Breadcrumb, Icon } from 'antd';
import Server from './Server';
import { AppTopology } from '../../components/Topology';
-import { Panel, Ranking } from '../../components/Page';
+import { Panel } from '../../components/Page';
import RankList from '../../components/RankList';
+import ServerLitePanel from '../../components/ServerLitePanel';
+import { getServerId } from '../../utils/utils';
const { Option } = Select;
const { Item: FormItem } = Form;
@@ -85,6 +87,9 @@ export default class Application extends PureComponent {
type: 'application/fetchData',
payload: { variables },
});
+ if (serverInfo.key) {
+ this.handleSelectServer(serverInfo.key, serverInfo);
+ }
}
}
handleGoApplication = () => {
@@ -92,6 +97,11 @@ export default class Application extends PureComponent {
type: 'application/hideServer',
});
}
+ handleGoServer = () => {
+ this.props.dispatch({
+ type: 'application/showServer',
+ });
+ }
handleSelectServer = (serverId, serverInfo) => {
const { globalVariables: { duration } } = this.props;
this.props.dispatch({
@@ -126,28 +136,33 @@ export default class Application extends PureComponent {
globalVariables={this.props.globalVariables}
onChange={this.handleChange}
>
- <Row gutter={8}>
- <Col {...{ ...middleColResponsiveProps, xl: 18, lg: 12, md: 24 }}>
+ <Row gutter={0}>
+ <Col {...{ ...middleColResponsiveProps, xl: 16, lg: 12, md: 24 }}>
<Card
title="Application Map"
bordered={false}
bodyStyle={{ padding: 0 }}
>
- <AppTopology elements={data.getApplicationTopology} height={649} layout={{ name: 'concentric', startAngle: Math.PI, minNodeSpacing: 250 }} />
+ <AppTopology elements={data.getApplicationTopology} height={335} layout={{ name: 'concentric', startAngle: Math.PI, minNodeSpacing: 250 }} />
</Card>
</Col>
- <Col {...{ ...middleColResponsiveProps, xl: 6, lg: 12, md: 24 }}>
+ <Col {...{ ...middleColResponsiveProps, xl: 8, lg: 12, md: 24 }}>
<Card
- title="Slow Service"
bordered={false}
- bodyStyle={{ padding: '0px 10px' }}
+ bodyStyle={{ padding: '10px 10px' }}
>
- <Ranking data={data.getSlowService} title="name" content="avgResponseTime" unit="ms" />
+ <ServerLitePanel
+ data={data}
+ serverList={data.getServerThroughput}
+ duration={this.props.duration}
+ onSelectServer={this.handleSelectServer}
+ />
+ <a style={{ float: 'right' }} onClick={this.handleGoServer}> More Server Details<Icon type="ellipsis" /> </a>
</Card>
</Col>
</Row>
<Row gutter={8}>
- <Col {...{ ...middleColResponsiveProps, xl: 24, lg: 24, md: 24 }}>
+ <Col {...{ ...middleColResponsiveProps, xl: 12, lg: 12, md: 24 }}>
<Card
title="Running Server"
bordered={false}
@@ -155,13 +170,13 @@ export default class Application extends PureComponent {
>
<RankList
data={data.getServerThroughput}
- renderLabel={_ => `${_.pid}@${_.host}`}
+ renderLabel={getServerId}
renderValue={_ => `${_.value} cps`}
renderBadge={_ => ([
{
- key: 'ip',
- label: 'IP',
- value: _.ipv4,
+ key: 'host',
+ label: 'Host',
+ value: _.host,
},
{
key: 'os',
@@ -169,7 +184,19 @@ export default class Application extends PureComponent {
value: _.osName,
},
])}
- onClick={this.handleSelectServer}
+ color="#965fe466"
+ />
+ </Card>
+ </Col>
+ <Col {...{ ...middleColResponsiveProps, xl: 12, lg: 12, md: 24 }}>
+ <Card
+ title="Slow Service"
+ bordered={false}
+ bodyStyle={{ padding: '0px 10px' }}
+ >
+ <RankList
+ data={data.getSlowService}
+ renderValue={_ => `${_.value} ms`}
/>
</Card>
</Col>
@@ -180,24 +207,28 @@ export default class Application extends PureComponent {
}
render() {
const { application, duration } = this.props;
- const { data } = application;
+ const { variables, data } = application;
const { showServer, serverInfo } = data;
return (
<Row type="flex" justify="start">
- <Col span={showServer ? 0 : 24}>
- {this.renderApp()}
- </Col>
{showServer ? (
<Col span={showServer ? 24 : 0}>
<Breadcrumb>
<Breadcrumb.Item>
- <a onClick={this.handleGoApplication}>Application</a>
+ Application
+ </Breadcrumb.Item>
+ <Breadcrumb.Item>
+ <a onClick={this.handleGoApplication}>{variables.labels.applicationId}</a>
</Breadcrumb.Item>
- <Breadcrumb.Item>{serverInfo.key}</Breadcrumb.Item>
+ <Breadcrumb.Item>{getServerId(serverInfo)}</Breadcrumb.Item>
</Breadcrumb>
<Server data={data} duration={duration} />
</Col>
- ) : null}
+ ) : (
+ <Col span={showServer ? 0 : 24}>
+ {this.renderApp()}
+ </Col>
+ )}
</Row>
);
}
diff --git a/src/routes/Application/Server.js b/src/routes/Application/Server.js
index ced51fc..e3e3dc5 100644
--- a/src/routes/Application/Server.js
+++ b/src/routes/Application/Server.js
@@ -36,91 +36,94 @@ export default class Server extends PureComponent {
getCPUTrend, getMemoryTrend, getGCTrend } = data;
return (
<div>
- <Card title="Info" style={{ marginTop: 24 }} bordered={false}>
- <DescriptionList>
- <Description term="Application Code">{serverInfo.applicationCode}</Description>
- <Description term="Host Name">{serverInfo.host}</Description>
- <Description term="IPv4">{serverInfo.ipv4 ? serverInfo.ipv4.join() : ''}</Description>
- <Description term="Process Id">{serverInfo.pid}</Description>
- <Description term="OS">{serverInfo.osName}</Description>
- </DescriptionList>
- </Card>
- <Row gutter={24}>
- <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 24 }}>
- <ChartCard
- title="Avg Response Time"
- total={`${avgTimeSeries(getServerResponseTimeTrend.trendList)} ms`}
- contentHeight={46}
- >
- {getServerResponseTimeTrend.trendList.length > 0 ? (
- <MiniArea
- animate={false}
- color="#975FE4"
- data={axis(duration, getServerResponseTimeTrend.trendList)}
- />
- ) : (<span style={{ display: 'none' }} />)}
- </ChartCard>
+ <Row gutter={8}>
+ <Col xs={24} sm={24} md={24} lg={6} xl={6} style={{ marginTop: 8 }}>
+ <Card style={{ marginTop: 8 }} bordered={false}>
+ <DescriptionList col={1} layout="vertical" >
+ <Description term="Host">{serverInfo.host}</Description>
+ <Description term="IPv4">{serverInfo.ipv4 ? serverInfo.ipv4.join() : ''}</Description>
+ <Description term="Pid">{serverInfo.pid}</Description>
+ <Description term="OS">{serverInfo.osName}</Description>
+ </DescriptionList>
+ </Card>
</Col>
- <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 24 }}>
- <ChartCard
- title="Avg Throughput"
- total={`${avgTimeSeries(getServerTPSTrend.trendList)}`}
- >
- <MiniBar
- animate={false}
- height={46}
- data={axis(duration, getServerTPSTrend.trendList)}
- />
- </ChartCard>
- </Col>
- </Row>
- <Row gutter={24}>
- <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: 24 }}>
- <ChartCard
- title="CPU %"
- contentHeight={150}
- >
- <Line
- data={axis(duration, getCPUTrend.cost)}
- />
- </ChartCard>
- </Col>
- </Row>
- <Row gutter={24}>
- <Col xs={24} sm={24} md={12} lg={12} xl={12} style={{ marginTop: 24 }}>
- <ChartCard
- title="Heap MB"
- contentHeight={150}
- >
- <Area
- data={axis(duration, this.bytesToMB(getMemoryTrend.heap), ({ x, y }) => ({ x, y, type: 'value' }))
- .concat(axis(duration, this.bytesToMB(getMemoryTrend.maxHeap), ({ x, y }) => ({ x, y, type: 'free' })))}
- />
- </ChartCard>
- </Col>
- <Col xs={24} sm={24} md={12} lg={12} xl={12} style={{ marginTop: 24 }}>
- <ChartCard
- title="Non-Heap MB"
- contentHeight={150}
- >
- <Area
- data={axis(duration, this.bytesToMB(getMemoryTrend.noheap), ({ x, y }) => ({ x, y, type: 'value' }))
- .concat(axis(duration, this.bytesToMB(getMemoryTrend.maxNoheap), ({ x, y }) => ({ x, y, type: 'free' })))}
- />
- </ChartCard>
- </Col>
- </Row>
- <Row gutter={24}>
- <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: 24 }}>
- <ChartCard
- title="GC ms"
- contentHeight={150}
- >
- <StackBar
- data={axis(duration, getGCTrend.oldGC, ({ x, y }) => ({ x, y, type: 'oldGC' }))
- .concat(axis(duration, getGCTrend.youngGC, ({ x, y }) => ({ x, y, type: 'youngGC' })))}
- />
- </ChartCard>
+ <Col xs={24} sm={24} md={24} lg={18} xl={18} style={{ marginTop: 8 }}>
+ <Row gutter={8}>
+ <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 8 }}>
+ <ChartCard
+ title="Avg Throughput"
+ total={`${avgTimeSeries(getServerTPSTrend.trendList)}`}
+ contentHeight={46}
+ >
+ <MiniBar
+ color="#975FE4"
+ data={axis(duration, getServerTPSTrend.trendList)}
+ />
+ </ChartCard>
+ </Col>
+ <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 8 }}>
+ <ChartCard
+ title="Avg Response Time"
+ total={`${avgTimeSeries(getServerResponseTimeTrend.trendList)} ms`}
+ contentHeight={46}
+ >
+ {getServerResponseTimeTrend.trendList.length > 0 ? (
+ <MiniArea
+ data={axis(duration, getServerResponseTimeTrend.trendList)}
+ />
+ ) : (<span style={{ display: 'none' }} />)}
+ </ChartCard>
+ </Col>
+ </Row>
+ <Row gutter={8}>
+ <Col span={24} style={{ marginTop: 8 }}>
+ <ChartCard
+ title="CPU %"
+ contentHeight={150}
+ >
+ <Line
+ data={axis(duration, getCPUTrend.cost)}
+ />
+ </ChartCard>
+ </Col>
+ </Row>
+ <Row gutter={8}>
+ <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 8 }}>
+ <ChartCard
+ title="Heap MB"
+ contentHeight={150}
+ >
+ <Area
+ data={axis(duration, this.bytesToMB(getMemoryTrend.heap), ({ x, y }) => ({ x, y, type: 'value' }))
+ .concat(axis(duration, this.bytesToMB(getMemoryTrend.maxHeap), ({ x, y }) => ({ x, y, type: 'free' })))}
+ />
+ </ChartCard>
+ </Col>
+ <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 8 }}>
+ <ChartCard
+ title="Non-Heap MB"
+ contentHeight={150}
+ >
+ <Area
+ data={axis(duration, this.bytesToMB(getMemoryTrend.noheap), ({ x, y }) => ({ x, y, type: 'value' }))
+ .concat(axis(duration, this.bytesToMB(getMemoryTrend.maxNoheap), ({ x, y }) => ({ x, y, type: 'free' })))}
+ />
+ </ChartCard>
+ </Col>
+ </Row>
+ <Row gutter={8}>
+ <Col span={24} style={{ marginTop: 8 }}>
+ <ChartCard
+ title="GC ms"
+ contentHeight={150}
+ >
+ <StackBar
+ data={axis(duration, getGCTrend.oldGC, ({ x, y }) => ({ x, y, type: 'oldGC' }))
+ .concat(axis(duration, getGCTrend.youngGC, ({ x, y }) => ({ x, y, type: 'youngGC' })))}
+ />
+ </ChartCard>
+ </Col>
+ </Row>
</Col>
</Row>
</div>
diff --git a/src/utils/utils.js b/src/utils/utils.js
index 402a618..944cc37 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -106,3 +106,11 @@ const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-
export function isUrl(path) {
return reg.test(path);
}
+
+export function getServerId(serverInfo) {
+ let { host } = serverInfo;
+ if (serverInfo.ipv4 && serverInfo.ipv4.length > 0) {
+ [host] = serverInfo.ipv4;
+ }
+ return `${serverInfo.pid}@${host}`;
+}
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.