Add Service instance SLA chart 205/head
authorGao Hongtao <hanahmily@gmail.com>
Mon, 3 Dec 2018 07:53:15 +0000 (15:53 +0800)
committerGao Hongtao <hanahmily@gmail.com>
Mon, 3 Dec 2018 07:53:15 +0000 (15:53 +0800)
package-lock.json
src/components/ServiceInstanceLitePanel/index.js
src/models/service.js
src/routes/Service/Service.js
src/routes/Service/ServiceInstance.js

index 0d35cce..70a911a 100644 (file)
     },
     "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": {
       "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
         }
         },
         "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
         },
           "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": {
     },
     "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": {
     },
     "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
     },
     },
     "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": {
     },
     "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",
       "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": {
         },
         "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": {
       "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
         }
     },
     "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": {
     },
     "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
     },
     },
     "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": {
     },
     "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"
       "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="
         }
       }
       "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
         }
       "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": {
       "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": {
     },
     "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": {
     },
     "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": {
         },
         "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": {
         },
         "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
         },
         },
         "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": {
         },
         "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": {
         },
         "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": {
         },
         "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": {
     },
     "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": {
       "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": {
         },
         "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": {
index d96b661..e4f7357 100644 (file)
@@ -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>
index e05fbc8..62517df 100644 (file)
@@ -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: [],
     },
index a50a9de..bfd76b9 100644 (file)
@@ -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 }))}
                 />
index 38197c4..6a66985 100644 (file)
@@ -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 }}>