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/03 07:54:21 UTC
[incubator-skywalking-ui] branch 6.0.0/beta updated: Add Service
instance SLA chart
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
The following commit(s) were added to refs/heads/6.0.0/beta by this push:
new 56f2d9a Add Service instance SLA chart
56f2d9a is described below
commit 56f2d9a4b503db382aa6949bac6c9c9ee3b0bca6
Author: Gao Hongtao <ha...@gmail.com>
AuthorDate: Mon Dec 3 15:53:15 2018 +0800
Add Service instance SLA chart
---
package-lock.json | 66 ++++++++++++------------
src/components/ServiceInstanceLitePanel/index.js | 23 +++++++--
src/models/service.js | 11 ++++
src/routes/Service/Service.js | 6 +--
src/routes/Service/ServiceInstance.js | 19 +++++--
5 files changed, 83 insertions(+), 42 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 0d35cce..70a911a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3422,7 +3422,7 @@
},
"acorn-dynamic-import": {
"version": "2.0.2",
- "resolved": "http://registry.npm.taobao.org/acorn-dynamic-import/download/acorn-dynamic-import-2.0.2.tgz",
+ "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz",
"integrity": "sha1-x1K9IQvvZ5UBtsbLf8hPj0cVjMQ=",
"dev": true,
"requires": {
@@ -3431,7 +3431,7 @@
"dependencies": {
"acorn": {
"version": "4.0.13",
- "resolved": "http://registry.npm.taobao.org/acorn/download/acorn-4.0.13.tgz",
+ "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
"integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
"dev": true
}
@@ -3578,7 +3578,7 @@
},
"ansi-regex": {
"version": "3.0.0",
- "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
@@ -3818,7 +3818,7 @@
"dependencies": {
"strip-ansi": {
"version": "4.0.0",
- "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": {
@@ -3965,7 +3965,7 @@
},
"ansi-styles": {
"version": "2.2.1",
- "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
},
"ant-design-palettes": {
@@ -4689,13 +4689,13 @@
},
"babel-plugin-syntax-decorators": {
"version": "6.13.0",
- "resolved": "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
+ "resolved": "http://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
"integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=",
"dev": true
},
"babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0",
- "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+ "resolved": "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
"integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
"dev": true
},
@@ -5402,7 +5402,7 @@
},
"buffer": {
"version": "4.9.1",
- "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+ "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
"integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
"dev": true,
"requires": {
@@ -5638,7 +5638,7 @@
},
"chalk": {
"version": "1.1.3",
- "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz",
+ "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"requires": {
"ansi-styles": "^2.2.1",
@@ -5925,7 +5925,7 @@
"dependencies": {
"is-fullwidth-code-point": {
"version": "1.0.0",
- "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"requires": {
@@ -5940,7 +5940,7 @@
},
"string-width": {
"version": "1.0.2",
- "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
+ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"requires": {
@@ -10409,7 +10409,7 @@
"dependencies": {
"minimist": {
"version": "1.1.3",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
+ "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
"integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=",
"dev": true
}
@@ -10417,7 +10417,7 @@
},
"got": {
"version": "6.7.1",
- "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
+ "resolved": "http://registry.npmjs.org/got/-/got-6.7.1.tgz",
"integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
"dev": true,
"requires": {
@@ -11442,7 +11442,7 @@
},
"is-fullwidth-code-point": {
"version": "2.0.0",
- "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
"dev": true
},
@@ -14788,7 +14788,7 @@
},
"minimist": {
"version": "1.2.0",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+ "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
},
"minimist-options": {
@@ -14842,7 +14842,7 @@
},
"mkdirp": {
"version": "0.5.1",
- "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+ "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"requires": {
"minimist": "0.0.8"
@@ -14850,7 +14850,7 @@
"dependencies": {
"minimist": {
"version": "0.0.8",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+ "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
}
}
@@ -15430,7 +15430,7 @@
"dependencies": {
"minimist": {
"version": "0.0.10",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+ "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
"dev": true
}
@@ -18707,7 +18707,7 @@
"dependencies": {
"ansi-regex": {
"version": "3.0.0",
- "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
@@ -18793,7 +18793,7 @@
},
"strip-ansi": {
"version": "4.0.0",
- "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": {
@@ -20854,13 +20854,13 @@
"dependencies": {
"ansi-regex": {
"version": "3.0.0",
- "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
"strip-ansi": {
"version": "4.0.0",
- "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": {
@@ -21540,7 +21540,7 @@
},
"supports-color": {
"version": "2.0.0",
- "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
},
"svg-tags": {
@@ -22400,7 +22400,7 @@
},
"uglifyjs-webpack-plugin": {
"version": "0.4.6",
- "resolved": "http://registry.npm.taobao.org/uglifyjs-webpack-plugin/download/uglifyjs-webpack-plugin-0.4.6.tgz",
+ "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz",
"integrity": "sha1-uVH0q7a9YX5m9j64kUmOORdj4wk=",
"dev": true,
"requires": {
@@ -23188,7 +23188,7 @@
},
"enhanced-resolve": {
"version": "3.4.1",
- "resolved": "http://registry.npm.taobao.org/enhanced-resolve/download/enhanced-resolve-3.4.1.tgz",
+ "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz",
"integrity": "sha1-BCHjOf1xQZs9oT0Smzl5BAIwR24=",
"dev": true,
"requires": {
@@ -23200,7 +23200,7 @@
},
"has-flag": {
"version": "2.0.0",
- "resolved": "http://registry.npm.taobao.org/has-flag/download/has-flag-2.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
"integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
"dev": true
},
@@ -23221,7 +23221,7 @@
},
"supports-color": {
"version": "4.5.0",
- "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-4.5.0.tgz",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
"integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
"dev": true,
"requires": {
@@ -23596,7 +23596,7 @@
},
"is-fullwidth-code-point": {
"version": "1.0.0",
- "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"requires": {
@@ -23684,7 +23684,7 @@
},
"os-locale": {
"version": "1.4.0",
- "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+ "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
"dev": true,
"requires": {
@@ -23773,7 +23773,7 @@
},
"string-width": {
"version": "1.0.2",
- "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
+ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"requires": {
@@ -24001,7 +24001,7 @@
},
"wrap-ansi": {
"version": "2.1.0",
- "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+ "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
"integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
"dev": true,
"requires": {
@@ -24011,7 +24011,7 @@
"dependencies": {
"is-fullwidth-code-point": {
"version": "1.0.0",
- "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"requires": {
@@ -24020,7 +24020,7 @@
},
"string-width": {
"version": "1.0.2",
- "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
+ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"requires": {
diff --git a/src/components/ServiceInstanceLitePanel/index.js b/src/components/ServiceInstanceLitePanel/index.js
index d96b661..e4f7357 100644
--- a/src/components/ServiceInstanceLitePanel/index.js
+++ b/src/components/ServiceInstanceLitePanel/index.js
@@ -36,7 +36,7 @@ export default class ServiceInstanceLitePanel extends PureComponent {
if (serviceInstanceList.length < 1) {
return null;
}
- const { serviceInstanceInfo, getServiceInstanceResponseTimeTrend, getServiceInstanceThroughputTrend } = data;
+ const { serviceInstanceInfo, getServiceInstanceResponseTimeTrend, getServiceInstanceThroughputTrend, getServiceInstanceSLA } = data;
if (!serviceInstanceInfo.key) {
onSelectServiceInstance(serviceInstanceList[0].key, serviceInstanceList[0]);
}
@@ -64,7 +64,7 @@ export default class ServiceInstanceLitePanel extends PureComponent {
</Col>
<Col span={24}>
<ChartCard
- title="Avg Throughput"
+ title={`Ins:${serviceInstanceInfo.name} Throughput`}
total={`${avgTS(getServiceInstanceThroughputTrend.values)} cpm`}
contentHeight={46}
bordered={false}
@@ -78,7 +78,7 @@ export default class ServiceInstanceLitePanel extends PureComponent {
</Col>
<Col span={24}>
<ChartCard
- title="Avg Response Time"
+ title={`Ins:${serviceInstanceInfo.name} Response Time`}
total={`${avgTS(getServiceInstanceResponseTimeTrend.values)} ms`}
contentHeight={46}
bordered={false}
@@ -93,6 +93,23 @@ export default class ServiceInstanceLitePanel extends PureComponent {
) : (<span style={{ display: 'none' }} />)}
</ChartCard>
</Col>
+ <Col span={24}>
+ <ChartCard
+ title={`Ins:${serviceInstanceInfo.name} SLA`}
+ total={`${(avgTS(getServiceInstanceSLA.values) / 100).toFixed(2)} %`}
+ contentHeight={46}
+ bordered={false}
+ bodyStyle={{ padding: 5 }}
+ >
+ {getServiceInstanceSLA.values.length > 0 ? (
+ <MiniBar
+ animate={false}
+ data={axisY(duration, getServiceInstanceSLA.values,
+ ({ x, y }) => ({ x, y: y / 100 }))}
+ />
+ ) : (<span style={{ display: 'none' }} />)}
+ </ChartCard>
+ </Col>
</Row>
{serviceInstanceInfo.key ? <a style={{ float: 'right' }} onClick={onMoreServiceInstance}> More Server Details<Icon type="ellipsis" /> </a> : null}
</div>
diff --git a/src/models/service.js b/src/models/service.js
index e05fbc8..62517df 100644
--- a/src/models/service.js
+++ b/src/models/service.js
@@ -161,6 +161,14 @@ query ServiceInstance($serviceInstanceId: ID!, $duration: Duration!) {
value
}
}
+ getServiceInstanceSLA: getLinearIntValues(metric: {
+ name: "service_instance_sla"
+ id: $serviceInstanceId
+ }, duration: $duration) {
+ values {
+ value
+ }
+ }
getCPUTrend: getLinearIntValues(metric: {
name: "instance_jvm_cpu"
id: $serviceInstanceId
@@ -279,6 +287,9 @@ export default base({
getServiceInstanceThroughputTrend: {
values: [],
},
+ getServiceInstanceSLA: {
+ values: [],
+ },
getCPUTrend: {
values: [],
},
diff --git a/src/routes/Service/Service.js b/src/routes/Service/Service.js
index a50a9de..bfd76b9 100644
--- a/src/routes/Service/Service.js
+++ b/src/routes/Service/Service.js
@@ -161,7 +161,7 @@ export default class Service extends PureComponent {
>
<AppTopology
elements={data.getServiceTopology}
- height={335}
+ height={460}
layout={{
name: 'dagre',
rankDir: 'LR',
@@ -173,7 +173,7 @@ export default class Service extends PureComponent {
<Col {...{ ...middleColResponsiveProps, xl: 8, lg: 12, md: 24 }}>
<Card
bordered={false}
- bodyStyle={{ padding: '10px 10px', height: 391 }}
+ bodyStyle={{ padding: '10px 10px', height: 516 }}
>
<ServiceInstanceLitePanel
data={data}
@@ -213,10 +213,10 @@ export default class Service extends PureComponent {
<ChartCard
title="Avg SLA"
total={`${(avgTS(getSLATrend.values) / 100).toFixed(2)} %`}
+ contentHeight={46}
>
<MiniBar
animate={false}
- height={46}
data={axisY(duration, getSLATrend.values,
({ x, y }) => ({ x, y: y / 100 }))}
/>
diff --git a/src/routes/Service/ServiceInstance.js b/src/routes/Service/ServiceInstance.js
index 38197c4..6a66985 100644
--- a/src/routes/Service/ServiceInstance.js
+++ b/src/routes/Service/ServiceInstance.js
@@ -33,7 +33,7 @@ export default class ServiceInstance extends PureComponent {
render() {
const { duration, data } = this.props;
- const { serviceInstanceInfo, getServiceInstanceResponseTimeTrend, getServiceInstanceThroughputTrend,
+ const { serviceInstanceInfo, getServiceInstanceResponseTimeTrend, getServiceInstanceThroughputTrend, getServiceInstanceSLA,
getCPUTrend, heap, maxHeap, noheap, maxNoheap, youngGCCount, oldGCCount, youngGCTime, oldGCTime } = data;
const { attributes } = serviceInstanceInfo;
return (
@@ -51,7 +51,7 @@ export default class ServiceInstance extends PureComponent {
</Col>
<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 }}>
+ <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 8 }}>
<ChartCard
title="Avg Throughput"
total={`${avgTS(getServiceInstanceThroughputTrend.values)} cpm`}
@@ -63,7 +63,7 @@ export default class ServiceInstance extends PureComponent {
/>
</ChartCard>
</Col>
- <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 8 }}>
+ <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 8 }}>
<ChartCard
title="Avg Response Time"
total={`${avgTS(getServiceInstanceResponseTimeTrend.values)} ms`}
@@ -76,6 +76,19 @@ export default class ServiceInstance extends PureComponent {
) : (<span style={{ display: 'none' }} />)}
</ChartCard>
</Col>
+ <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 8 }}>
+ <ChartCard
+ title="Avg SLA"
+ total={`${(avgTS(getServiceInstanceSLA.values) / 100).toFixed(2)} %`}
+ >
+ <MiniBar
+ animate={false}
+ height={46}
+ data={axisY(duration, getServiceInstanceSLA.values,
+ ({ x, y }) => ({ x, y: y / 100 }))}
+ />
+ </ChartCard>
+ </Col>
</Row>
<Row gutter={8}>
<Col span={24} style={{ marginTop: 8 }}>