Merge pull request #35 from SamYuan1990/decoupleUI

split result page

README.MD

@@ -52,12 +52,15 @@ You are able to know better with how your changes impacts Fabric TPS in over all
 4. apply the bridge file to adjust block parameters for test network `cp sample/prepareConfig.sh fabric-samples/test-network`
 5. npm start
 6. access localhost:3000, submit form with placeholder
-6. access localhost:3000/result
+7. access localhost:3000/result/BatchTimeout
+8. access localhost:3000/result/MaxMessageCount
+9. access localhost:3000/result/AbsoluteMaxBytes
+10. access localhost:3000/result/PreferredMaxBytes
 
 ## Version Plan
 version | define| feature
 ---|---|---
-0.0.0 | MVP| support test network an
+0.0.0 | MVP| support test network
 0.0.1 | UI enhance | add such as react as UI refactor
 0.0.2 | back end refactor | may support other type fabric network starter, may adding caliper support
 1.0.0 | fix up bugs after 0.0.2 | 

e2e/app.test.js

@@ -47,9 +47,24 @@ describe('# test app.js', function () {
             .get('/api/get?data=TPS')
             .expect(200, done);
     });
-    it('GET / 200 result', function (done) {
+    it('GET / 200 resultBatchTimeout', function (done) {
         request
-            .get('/result')
+            .get('/result/BatchTimeout')
+            .expect(200, done);
+    });
+    it('GET / 200 resultMaxMessageCount', function (done) {
+        request
+            .get('/result/MaxMessageCount')
+            .expect(200, done);
+    });
+    it('GET / 200 resultAbsoluteMaxBytes', function (done) {
+        request
+            .get('/result/AbsoluteMaxBytes')
+            .expect(200, done);
+    });
+    it('GET / 200 resultPreferredMaxBytes', function (done) {
+        request
+            .get('/result/PreferredMaxBytes')
             .expect(200, done);
     });
 });

public/javascripts/indexAbsoluteMaxBytes.js

@@ -0,0 +1,81 @@
+const xmlhttp = new XMLHttpRequest();
+xmlhttp.open('GET', '../api/get?data=BatchTimeout&orderby=AbsoluteMaxBytes', false);
+xmlhttp.send();
+const BatchTimeout = xmlhttp.responseText.split(',');
+
+xmlhttp.open('GET', '../api/get?data=TPS&orderby=AbsoluteMaxBytes', false);
+xmlhttp.send();
+const TPS = xmlhttp.responseText.split(',');
+
+xmlhttp.open('GET', '../api/get?data=MaxMessageCount&orderby=AbsoluteMaxBytes', false);
+xmlhttp.send();
+const MaxMessageCount = xmlhttp.responseText.split(',');
+
+xmlhttp.open('GET', '../api/get?data=AbsoluteMaxBytes&orderby=AbsoluteMaxBytes', false);
+xmlhttp.send();
+const AbsoluteMaxBytes = xmlhttp.responseText.split(',');
+
+xmlhttp.open('GET', '../api/get?data=PreferredMaxBytes&orderby=AbsoluteMaxBytes', false);
+xmlhttp.send();
+const PreferredMaxBytes = xmlhttp.responseText.split(',');
+
+const Turn1 =  {
+    opacity: 0.5,
+    color: 'rgb(255,0,0)',
+    type: 'scatter3d',
+    x: AbsoluteMaxBytes,
+    y: MaxMessageCount,
+    z: TPS,
+    scene: 'scene1'
+};
+
+const Turn2 =  {
+    opacity: 0.5,
+    color: 'rgb(0,255,0)',
+    type: 'scatter3d', // 'mesh3d',
+    x: AbsoluteMaxBytes,
+    y: BatchTimeout,
+    z: TPS,
+    scene: 'scene2'
+};
+
+const Turn3 = {
+    opacity:0.5,
+    color:'rgb(0,0,255)',
+    type: 'scatter3d',
+    x: AbsoluteMaxBytes,
+    y: PreferredMaxBytes,
+    z: TPS,
+    scene: 'scene3',
+};
+
+const layout = {
+    scene1: {
+        domain: {
+            x: [0.0,  0.33],
+            y: [0.5, 1.0]
+        },
+    },
+    scene2: {
+        domain: {
+            x: [0.33, 0.66],
+            y: [0.5, 1.0]
+        },
+    },
+    scene3: {
+        domain: {
+            x: [0.66, 0.99],
+            y: [0.5, 1.0]
+        },
+    },
+    height: 600,
+    margin: {
+        l: 0,
+        r: 0,
+        b: 0,
+        t: 0,
+        pad: 0
+    },
+};
+
+Plotly.newPlot('myDiv', [Turn1, Turn2, Turn3], layout);

public/javascripts/indexBatchTimeout.js

@@ -0,0 +1,81 @@
+const xmlhttp = new XMLHttpRequest();
+xmlhttp.open('GET', '../api/get?data=BatchTimeout&orderby=BatchTimeout', false);
+xmlhttp.send();
+const BatchTimeout = xmlhttp.responseText.split(',');
+
+xmlhttp.open('GET', '../api/get?data=TPS&orderby=BatchTimeout', false);
+xmlhttp.send();
+const TPS = xmlhttp.responseText.split(',');
+
+xmlhttp.open('GET', '../api/get?data=MaxMessageCount&orderby=BatchTimeout', false);
+xmlhttp.send();
+const MaxMessageCount = xmlhttp.responseText.split(',');
+
+xmlhttp.open('GET', '../api/get?data=AbsoluteMaxBytes&orderby=BatchTimeout', false);
+xmlhttp.send();
+const AbsoluteMaxBytes = xmlhttp.responseText.split(',');
+
+xmlhttp.open('GET', '../api/get?data=PreferredMaxBytes&orderby=BatchTimeout', false);
+xmlhttp.send();
+const PreferredMaxBytes = xmlhttp.responseText.split(',');
+
+const Turn1 =  {
+    opacity: 0.5,
+    color: 'rgb(255,0,0)',
+    type: 'scatter3d',
+    x: BatchTimeout,
+    y: MaxMessageCount,
+    z: TPS,
+    scene: 'scene1'
+};
+
+const Turn2 =  {
+    opacity: 0.5,
+    color: 'rgb(0,255,0)',
+    type: 'scatter3d', // 'mesh3d',
+    x: BatchTimeout,
+    y: AbsoluteMaxBytes,
+    z: TPS,
+    scene: 'scene2'
+};
+
+const Turn3 = {
+    opacity:0.5,
+    color:'rgb(0,0,255)',
+    type: 'scatter3d',
+    x: BatchTimeout,
+    y: PreferredMaxBytes,
+    z: TPS,
+    scene: 'scene3',
+};
+
+const layout = {
+    scene1: {
+        domain: {
+            x: [0.0,  0.33],
+            y: [0.5, 1.0]
+        },
+    },
+    scene2: {
+        domain: {
+            x: [0.33, 0.66],
+            y: [0.5, 1.0]
+        },
+    },
+    scene3: {
+        domain: {
+            x: [0.66, 0.99],
+            y: [0.5, 1.0]
+        },
+    },
+    height: 600,
+    margin: {
+        l: 0,
+        r: 0,
+        b: 0,
+        t: 0,
+        pad: 0
+    },
+};
+
+Plotly.newPlot('myDiv', [Turn1, Turn2, Turn3], layout);