From 5e3f9893142e91a30ff00b214d4af34a1baf2473 Mon Sep 17 00:00:00 2001
From: liyuanwa <liyuan.wang@intel.com>
Date: Fri, 13 Feb 2015 15:07:33 +0800
Subject: [PATCH] new real-time performance graph #5

---
 .../WEB-INF/freemarker/finalchart.ftl         | 119 ++++++++++----
 .../WEB-INF/freemarker/forchart.ftl           |  51 +++---
 .../WEB-INF/freemarker/runningchart.ftl       | 154 ++++++++++++------
 .../WEB-INF/freemarker/workload.ftl           |  66 ++++----
 4 files changed, 260 insertions(+), 130 deletions(-)

diff --git a/dev/cosbench-controller-web/WEB-INF/freemarker/finalchart.ftl b/dev/cosbench-controller-web/WEB-INF/freemarker/finalchart.ftl
index cbbb79b5..bf4d3d72 100644
--- a/dev/cosbench-controller-web/WEB-INF/freemarker/finalchart.ftl
+++ b/dev/cosbench-controller-web/WEB-INF/freemarker/finalchart.ftl
@@ -11,57 +11,118 @@
             var id="${sInfo.id}";
             if(id==d){
             var i=0;
-            //bandwidth
-            var ybandwidth=new Array();
             var xvalue=new Array();
-            var bandwidthname="bandwidth";
-            var bandwidthsp="KB/S";
-            var bandwidth="";
+            var yvalue = new Array();
+            var axis=new Array();
+
+            //bandwidth
+            var ybandread=new Array();
+            var ybandwrite=new Array();
+            var ybanddelete=new Array();
+            var bandwidth;
+   
             //throughput
-            var ythroughput=new Array();
-            var throughputname="throughput";
-            var throughputsp="op/s";
-            var throughput="";
+            var ytputread=new Array();
+            var ytputwrite=new Array();
+            var ytputdelete=new Array();
+            var sampletype;
+            var throughput;
+
             //restime
-            var yRestime=new Array();
-            var avgResTime="";
-            var avgResTimename="resTime";
-            var avgResTimesp="ms";
+            var yrtimeread=new Array();
+            var yrtimewrite=new Array();
+            var yrtimedelete=new Array();
+            var avgResTime;
 
             //ratio
-            var yratio=new Array();
-            var rationame="ratio";
-            var ratiosp="%";
-            var ratio="";
+            var yraread=new Array();
+            var yrawrite=new Array();
+            var yradelete=new Array();
+            var ratio;
 
             <#list sInfo.snapshots as snapshot>
                <#list snapshot.report.allMetrics as mInfo>
             // bandwidth
                 bandwidth="${mInfo.bandwidth}";
                 bandwidth=bandwidth.replace(/,/gi,'');
-                ybandwidth.push(Math.round(eval(bandwidth/1024)));
-            // throughput
-                throughput="${mInfo.throughput}";
-                throughput=throughput.replace(/,/gi,'');
-                ythroughput.push(Math.round(eval(throughput)));
+
             //resTime
                 avgResTime="${mInfo.avgResTime}";
                 avgResTime=avgResTime.replace(/,/gi,'');
-                yRestime.push(Math.round(eval(avgResTime)));
-
+              
             //Succ-Ratio
                 ratio="${mInfo.ratio}";
                 ratio=ratio.replace(/,/gi,'');
-                yratio.push(Math.round(eval(ratio*100)));
+
+            // throughput
+                sampletype="${mInfo.sampleType}";
+                throughput="${mInfo.throughput}";
+                throughput=throughput.replace(/,/gi,'');
+                if(sampletype=="read"){
+                    ytputread.push(Math.round(eval(throughput)));
+                    ybandread.push(Math.round(eval(bandwidth/1024)));
+                    yrtimeread.push(Math.round(eval(avgResTime)));
+                    yraread.push(Math.round(eval(ratio*100)));
+                }else if(sampletype=="write"){
+                    ytputwrite.push(Math.round(eval(throughput)));
+                    ybandwrite.push(Math.round(eval(bandwidth/1024)));
+                    yrtimewrite.push(Math.round(eval(avgResTime)));
+                    yrawrite.push(Math.round(eval(ratio*100)));
+                }else if(sampletype=="delete"){
+                    ytputdelete.push(Math.round(eval(throughput)));
+                    ybanddelete.push(Math.round(eval(bandwidth/1024)));
+                    yrtimedelete.push(Math.round(eval(avgResTime)));
+                    yradelete.push(Math.round(eval(ratio*100)));
+                }          
             //xvalue
                 xvalue.push(i);
                 i++;
                 </#list>
             </#list>
-            forchart(xvalue,ybandwidth,bandwidthname,bandwidthsp,id);
-            forchart(xvalue,ythroughput,throughputname,throughputsp,id);
-            forchart(xvalue,yRestime,avgResTimename,avgResTimesp,id);
-            forchart(xvalue,yratio,rationame,ratiosp,id);
+            //restime
+            yvalue.length=0;
+            if(yrtimeread.length>0){
+                yvalue.push(yrtimeread);
+                axis.push("read");
+            }if(yrtimewrite.length>0){
+                yvalue.push(yrtimewrite);
+                axis.push("write");
+            }if(yrtimedelete.length>0){
+                yvalue.push(yrtimedelete);
+                axis.push("delete");
+            }
+            xvalue.length=yvalue[0].length;
+            forchart(xvalue,yvalue,"resTime","sp",id,axis);
+            //ratio
+            yvalue.length=0;
+            if(yraread.length>0){
+                yvalue.push(yraread);
+            }if(yrawrite.length>0){
+                yvalue.push(yrawrite);
+            }if(yradelete.length>0){
+                yvalue.push(yradelete);
+            }
+            forchart(xvalue,yvalue,"ratio","%",id,axis);
+            //bandwith
+            yvalue.length=0;
+            if(ybandread.length>0){
+                yvalue.push(ybandread);
+            }if(ybandwrite.length>0){
+                yvalue.push(ybandwrite);
+            }if(ybanddelete.length>0){
+                yvalue.push(ybanddelete);
+            }
+            forchart(xvalue,yvalue,"bandwidth","KB/S",id,axis);
+            //throughput
+            yvalue.length=0;
+            if(ytputread.length>0){
+                yvalue.push(ytputread);
+            }if(ytputwrite.length>0){
+                yvalue.push(ytputwrite);
+            }if(ytputdelete.length>0){
+                yvalue.push(ytputdelete);
+            }
+            forchart(xvalue,yvalue,"throughput","op/s",id,axis);
          }
     </#list> 
 }
diff --git a/dev/cosbench-controller-web/WEB-INF/freemarker/forchart.ftl b/dev/cosbench-controller-web/WEB-INF/freemarker/forchart.ftl
index 0f8be46c..4c78fd1a 100644
--- a/dev/cosbench-controller-web/WEB-INF/freemarker/forchart.ftl
+++ b/dev/cosbench-controller-web/WEB-INF/freemarker/forchart.ftl
@@ -1,6 +1,30 @@
 
     <script type="text/javascript">
-    function forchart(xvalue,yvalue,name,sp,stagename){
+    function forchart(xvalue,yvalue,name,sp,stagename,axis){
+        var seriesdate="[";
+        for(var i=0;i<yvalue.length;i++){
+            seriesdate+="{";
+            seriesdate+="\"name\":\""+axis[i]+"\",";
+            seriesdate+="\"type\":\"line\",";
+            seriesdate+="\"data\":["+yvalue[i].toString()+"],";
+            seriesdate+="\"markPoint\":{\"data\":[{\"type\":\"max\",\"name\":\"max\"},{\"type\":\"min\",\"name\":\"min\"}]},";
+            seriesdate+="\"markLine\":{\"data\":[{\"type\":\"average\",\"name\":\"average\"}]}";
+            seriesdate+="},";
+           
+        }
+        seriesdate=seriesdate.substring(0,seriesdate.length-1);
+        seriesdate+="]";
+        var jsdata=eval(seriesdate);
+       
+        var axistitle="{\"data\":[";
+        for(var j=0;j<axis.length;j++){
+
+            axistitle+="\""+axis[j]+"\","
+        }
+        axistitle=axistitle.substring(0,axistitle.length-1);
+        axistitle+="]}";
+        var titlename = JSON.parse(axistitle); 
+
         require.config({
             paths: {
                  echarts: 'resources/build/dist'
@@ -22,9 +46,7 @@
                     tooltip : {
                         trigger: 'axis'
                     },
-                    legend: {
-                        data:[name]
-                    },
+                    legend : titlename,
                     toolbox: {
                         show : true,
                         feature : {
@@ -51,25 +73,8 @@
                             }
                         }
                     ],
-                    series : [
-                        {
-                            name:name,
-                            type:'line',
-                            data:yvalue,
-                            markPoint : {
-                                data : [
-                                    {type : 'max', name: 'max'},
-                                    {type : 'min', name: 'min'}
-                                ]
-                            },
-                            markLine : {
-                                data : [
-                                   {type : 'average', name: 'average'}
-                                ]
-                            }
-                        }
-                    ]
-                    };
+                    series:jsdata
+                }
                 myChart.setOption(option); 
             }
         );
diff --git a/dev/cosbench-controller-web/WEB-INF/freemarker/runningchart.ftl b/dev/cosbench-controller-web/WEB-INF/freemarker/runningchart.ftl
index 62ee12eb..07ec5561 100644
--- a/dev/cosbench-controller-web/WEB-INF/freemarker/runningchart.ftl
+++ b/dev/cosbench-controller-web/WEB-INF/freemarker/runningchart.ftl
@@ -1,61 +1,117 @@
    <script type="text/javascript">
-    //bandwidth
-    var ybandwidth=new Array();
+      
     var i=0;
-        ybandwidth.push(0);
     var xvalue=new Array();
-    var bandwidthname="bandwidth";
-    var bandwidthsp="KB/S";
-    var bandwidth="";
+    var yvalue = new Array();
+    var axis=new Array();
+
+    //bandwidth
+    var ybandread=new Array();
+    var ybandwrite=new Array();
+    var ybanddelete=new Array();
+    var bandwidth;
+
     //throughput
-    var ythroughput=new Array();
-        ythroughput.push(0);
-    var throughputname="throughput";
-    var throughputsp="op/s";
-    var throughput="";
+    var ytputread=new Array();
+    var ytputwrite=new Array();
+    var ytputdelete=new Array();
+    var sampletype;
+    var throughput;
+
     //restime
-    var yRestime=new Array();
-        yRestime.push(0);
-    var avgResTime="";
-    var avgResTimename="resTime";
-    var avgResTimesp="ms";
+    var yrtimeread=new Array();
+    var yrtimewrite=new Array();
+    var yrtimedelete=new Array();
+    var avgResTime;
 
     //ratio
-    var yratio=new Array();
-        yratio.push(0);
-    var rationame="ratio";
-    var ratiosp="%";
-    var ratio="";
-
+    var yraread=new Array();
+    var yrawrite=new Array();
+    var yradelete=new Array();
+    var ratio;
     <#assign  sInfo=info.currentStage>
-     var stagename="${sInfo.id}";
-      <#list sInfo.snapshots as snapshot>
-        <#list snapshot.report.allMetrics as mInfo>
-           // bandwidth
-            bandwidth="${mInfo.bandwidth}";
-            bandwidth=bandwidth.replace(/,/gi,'');
-            ybandwidth.push(Math.round(eval(bandwidth/1024)));
-        // throughput
-            throughput="${mInfo.throughput}";
-            throughput=throughput.replace(/,/gi,'');
-            ythroughput.push(Math.round(eval(throughput)));
-        //resTime
-            avgResTime="${mInfo.avgResTime}";
-            avgResTime=avgResTime.replace(/,/gi,'');
-            yRestime.push(Math.round(eval(avgResTime)));
+     var id="${sInfo.id}";
+    <#list sInfo.snapshots as snapshot>
+       <#list snapshot.report.allMetrics as mInfo>
+    // bandwidth
+        bandwidth="${mInfo.bandwidth}";
+        bandwidth=bandwidth.replace(/,/gi,'');
+
+    //resTime
+        avgResTime="${mInfo.avgResTime}";
+        avgResTime=avgResTime.replace(/,/gi,'');
+      
+    //Succ-Ratio
+        ratio="${mInfo.ratio}";
+        ratio=ratio.replace(/,/gi,'');
 
-        //Succ-Ratio
-            ratio="${mInfo.ratio}";
-            ratio=ratio.replace(/,/gi,'');
-            yratio.push(Math.round(eval(ratio*100)));
-        //xvalue
-            var now = new Date();
-            xvalue.push(i);
-            i++;
+    // throughput
+        sampletype="${mInfo.sampleType}";
+        throughput="${mInfo.throughput}";
+        throughput=throughput.replace(/,/gi,'');
+        if(sampletype=="read"){
+            ytputread.push(Math.round(eval(throughput)));
+            ybandread.push(Math.round(eval(bandwidth/1024)));
+            yrtimeread.push(Math.round(eval(avgResTime)));
+            yraread.push(Math.round(eval(ratio*100)));
+        }else if(sampletype=="write"){
+            ytputwrite.push(Math.round(eval(throughput)));
+            ybandwrite.push(Math.round(eval(bandwidth/1024)));
+            yrtimewrite.push(Math.round(eval(avgResTime)));
+            yrawrite.push(Math.round(eval(ratio*100)));
+        }else if(sampletype=="delete"){
+            ytputdelete.push(Math.round(eval(throughput)));
+            ybanddelete.push(Math.round(eval(bandwidth/1024)));
+            yrtimedelete.push(Math.round(eval(avgResTime)));
+            yradelete.push(Math.round(eval(ratio*100)));
+        }          
+    //xvalue
+        xvalue.push(i);
+        i++;
         </#list>
     </#list>
-    forchart(xvalue,ybandwidth,bandwidthname,bandwidthsp,stagename);
-    forchart(xvalue,ythroughput,throughputname,throughputsp,stagename);
-    forchart(xvalue,yRestime,avgResTimename,avgResTimesp,stagename);
-    forchart(xvalue,yratio,rationame,ratiosp,stagename);
+    //restime
+    yvalue.length=0;
+    if(yrtimeread.length>0){
+        yvalue.push(yrtimeread);
+        axis.push("read");
+    }if(yrtimewrite.length>0){
+        yvalue.push(yrtimewrite);
+        axis.push("write");
+    }if(yrtimedelete.length>0){
+        yvalue.push(yrtimedelete);
+        axis.push("delete");
+    }
+    xvalue.length=yvalue[0].length;
+    forchart(xvalue,yvalue,"resTime","sp",id,axis);
+    //ratio
+    yvalue.length=0;
+    if(yraread.length>0){
+        yvalue.push(yraread);
+    }if(yrawrite.length>0){
+        yvalue.push(yrawrite);
+    }if(yradelete.length>0){
+        yvalue.push(yradelete);
+    }
+    forchart(xvalue,yvalue,"ratio","%",id,axis);
+    //bandwith
+    yvalue.length=0;
+    if(ybandread.length>0){
+        yvalue.push(ybandread);
+    }if(ybandwrite.length>0){
+        yvalue.push(ybandwrite);
+    }if(ybanddelete.length>0){
+        yvalue.push(ybanddelete);
+    }
+    forchart(xvalue,yvalue,"bandwidth","KB/S",id,axis);
+    //throughput
+    yvalue.length=0;
+    if(ytputread.length>0){
+        yvalue.push(ytputread);
+    }if(ytputwrite.length>0){
+        yvalue.push(ytputwrite);
+    }if(ytputdelete.length>0){
+        yvalue.push(ytputdelete);
+    }
+    forchart(xvalue,yvalue,"throughput","op/s",id,axis);
 </script>
\ No newline at end of file
diff --git a/dev/cosbench-controller-web/WEB-INF/freemarker/workload.ftl b/dev/cosbench-controller-web/WEB-INF/freemarker/workload.ftl
index 95c6cc61..9e9c1fae 100644
--- a/dev/cosbench-controller-web/WEB-INF/freemarker/workload.ftl
+++ b/dev/cosbench-controller-web/WEB-INF/freemarker/workload.ftl
@@ -90,24 +90,6 @@
     <h3>Final Result</h3>
     <#assign allMetrics = info.report.allMetrics >
     <#include "metrics.ftl">
-      <h4>Performance Graph
-         <select id="cstage" onchange="custage()">
-            <option value="close" select="selected"></option>
-           <#list info.stageInfos  as sInfo >
-            <option value=${sInfo.id}>${sInfo.id}</option>
-           </#list>
-         </select>
-       </h4>
-       <div id="fchart" style="display:none">
-        <div style="width:1080px;height:825px;display:block;margin:auto;margin-top:20px;border: solid 1px #ccc;">
-        <div class="chart" id="throughput"></div>
-        <div class="chart" id="resTime"></div>
-        <div class="chart" id="bandwidth" value="bandwidth"></div>
-        <div class="chart" id="ratio"></div>
-        <#include "forchart.ftl">
-        <#include "finalchart.ftl">
-       </div>
-   </div>
     <#if perfDetails >
       <p><a href="workload.html?id=${info.id}">hide peformance details</a></p>
     <#else>
@@ -118,17 +100,6 @@
     <#assign snapshot = info.snapshot >
     <#assign allMetrics = snapshot.report.allMetrics >
     <#include "metrics.ftl">
-      <h4>Performance Graph</h4>
-        <div id="graph">
-          <div style="width:1080px;height:825px;display:block;margin:auto;margin-top:20px;border: solid 1px #ccc;">
-          <div class="chart" id="throughput"></div>
-          <div class="chart" id="resTime"></div>
-          <div class="chart" id="bandwidth" value="bandwidth"></div>
-          <div class="chart" id="ratio"></div>
-          <#include "forchart.ftl">
-          <#include "runningchart.ftl">
-        </viv>
-   </div>
     <p class="warn">The snapshot was taken at ${snapshot.timestamp?time} with version ${snapshot.version}.</p>
   </#if>
   <h3>Stages</h3>
@@ -233,6 +204,22 @@
       </tr>
     </#list>
   </table>
+
+<!--running Performance Graph  -->
+<#if isRunning>
+  <h4>Performance Graph</h4>
+  <div id="graph">
+    <div style="width:1080px;height:825px;display:block;margin:auto;margin-top:20px;border: solid 1px #ccc;">
+    <div class="chart" id="throughput"></div>
+    <div class="chart" id="resTime"></div>
+    <div class="chart" id="bandwidth"></div>
+    <div class="chart" id="ratio"></div>
+    <#include "forchart.ftl">
+    <#include "runningchart.ftl">
+    </viv>
+  </div>
+</#if>
+
   <p class="warn">There are ${info.stageCount} stages in this workload.</p>
   <#if isStopped>
     <#if showErrorStatistics> 
@@ -261,7 +248,28 @@
     <#else>
       <p><a href="workload.html?id=${info.id}&showErrorStatistics=True">show error statistics details</a></p>
     </#if>
+    <!-- final Performance Graph -->
+      <h4>Performance Graph
+         <select id="cstage" onchange="custage()">
+            <option value="close" select="selected"></option>
+           <#list info.stageInfos  as sInfo >
+            <option value=${sInfo.id}>${sInfo.id}</option>
+           </#list>
+         </select>
+       </h4>
+      <div id="fchart" style="display:none">
+        <div style="width:1080px;height:825px;display:block;margin:auto;margin-top:20px;border: solid 1px #ccc;">
+        <div class="chart" id="throughput"></div>
+        <div class="chart" id="resTime"></div>
+        <div class="chart" id="bandwidth" ></div>
+        <div class="chart" id="ratio"></div>
+        <#include "forchart.ftl">
+        <#include "finalchart.ftl">
+        </div>
+     </div>
   </#if>
+
+
   <h3>Actions</h3>
   <p>
     <#if !isStopped >