You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by ha...@apache.org on 2018/12/02 08:12:51 UTC
[incubator-skywalking-ui] branch 6.0.0/beta created (now ac4a90a)
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a change to branch 6.0.0/beta
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git.
at ac4a90a Add more charts to Service page
This branch includes the following new commits:
new ac4a90a Add more charts to Service page
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-skywalking-ui] 01/01: Add more charts to Service page
Posted by ha...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch 6.0.0/beta
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
commit ac4a90a3ea478e4d391da34c130b813311b779a8
Author: gaohongtao <ha...@gmail.com>
AuthorDate: Sun Dec 2 16:11:13 2018 +0800
Add more charts to Service page
Fix https://github.com/apache/incubator-skywalking/issues/1924
---
src/models/service.js | 33 +++++++++++++++++++++++++++++++
src/routes/Service/Service.js | 46 ++++++++++++++++++++++++++++++++++++++++---
2 files changed, 76 insertions(+), 3 deletions(-)
diff --git a/src/models/service.js b/src/models/service.js
index 3ae3763..e05fbc8 100644
--- a/src/models/service.js
+++ b/src/models/service.js
@@ -76,6 +76,30 @@ const dataQuery = `
detectPoint
}
}
+ getResponseTimeTrend: getLinearIntValues(metric: {
+ name: "service_resp_time"
+ id: $serviceId
+ }, duration: $duration) {
+ values {
+ value
+ }
+ }
+ getThroughputTrend: getLinearIntValues(metric: {
+ name: "service_cpm"
+ id: $serviceId
+ }, duration: $duration) {
+ values {
+ value
+ }
+ }
+ getSLATrend: getLinearIntValues(metric: {
+ name: "service_sla"
+ id: $serviceId
+ }, duration: $duration) {
+ values {
+ value
+ }
+ }
getP99: getLinearIntValues(metric: {
name: "service_p99"
id: $serviceId
@@ -222,6 +246,15 @@ export default base({
nodes: [],
calls: [],
},
+ getResponseTimeTrend: {
+ values: [],
+ },
+ getThroughputTrend: {
+ values: [],
+ },
+ getSLATrend: {
+ values: [],
+ },
getP99: {
values: [],
},
diff --git a/src/routes/Service/Service.js b/src/routes/Service/Service.js
index 9378a95..a50a9de 100644
--- a/src/routes/Service/Service.js
+++ b/src/routes/Service/Service.js
@@ -20,13 +20,13 @@ import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Select, Card, Form, Breadcrumb } from 'antd';
import { AppTopology } from 'components/Topology';
-import { Line } from 'components/Charts';
+import { Line, ChartCard, MiniArea, MiniBar } from 'components/Charts';
import { Panel } from 'components/Page';
import RankList from 'components/RankList';
import ServiceInstanceLitePanel from 'components/ServiceInstanceLitePanel';
import ServiceInstance from './ServiceInstance';
-import { getServiceInstanceId, redirect } from '../../utils/utils';
-import { axisMY } from '../../utils/time';
+import { getServiceInstanceId, redirect, avgTS } from '../../utils/utils';
+import { axisY, axisMY } from '../../utils/time';
const { Option } = Select;
const { Item: FormItem } = Form;
@@ -124,8 +124,10 @@ export default class Service extends PureComponent {
renderApp = () => {
const {...propsData} = this.props;
+ const { duration } = this.props;
const { getFieldDecorator } = propsData.form;
const { variables: { values, options, labels }, data } = propsData.service;
+ const { getResponseTimeTrend, getThroughputTrend, getSLATrend } = data;
return (
<div>
<Form layout="inline">
@@ -183,6 +185,44 @@ export default class Service extends PureComponent {
</Card>
</Col>
</Row>
+ <Row gutter={8}>
+ <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 8 }}>
+ <ChartCard
+ title="Avg Throughput"
+ total={`${avgTS(getThroughputTrend.values)} cpm`}
+ contentHeight={46}
+ >
+ <MiniArea
+ color="#975FE4"
+ data={axisY(duration, getThroughputTrend.values)}
+ />
+ </ChartCard>
+ </Col>
+ <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 8 }}>
+ <ChartCard
+ title="Avg Response Time"
+ total={`${avgTS(getResponseTimeTrend.values)} ms`}
+ contentHeight={46}
+ >
+ <MiniArea
+ data={axisY(duration, getResponseTimeTrend.values)}
+ />
+ </ChartCard>
+ </Col>
+ <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 8 }}>
+ <ChartCard
+ title="Avg SLA"
+ total={`${(avgTS(getSLATrend.values) / 100).toFixed(2)} %`}
+ >
+ <MiniBar
+ animate={false}
+ height={46}
+ data={axisY(duration, getSLATrend.values,
+ ({ x, y }) => ({ x, y: y / 100 }))}
+ />
+ </ChartCard>
+ </Col>
+ </Row>
<Row>
<Col {...{ ...middleColResponsiveProps, xl: 24, lg: 24, md: 24 }}>
<Card