erasure-code: HTML display of benchmark results

The ceph_erasure_code_benchmark output is converted into a JSON series suitable to display in HTML with the http://www.flotcharts.org/ library. A self contained copy of the HTML,JS,CSS files is included for durability and can be used from the source tree with: CEPH_ERASURE_CODE_BENCHMARK=src/ceph_erasure_code_benchmark \ PLUGIN_DIRECTORY=src/.libs \ qa/workunits/erasure-code/bench.sh fplot jerasure | tee qa/workunits/erasure-code/bench.js and display with: firefox qa/workunits/erasure-code/bench.html Signed-off-by: Loic Dachary <[email protected]>
trociny · Aug 4, 2014 · 8363a94 · 8363a94
1 parent 3cc7234
commit 8363a94
Show file tree

Hide file tree

Showing 8 changed files with 13,198 additions and 0 deletions.
diff --git a/COPYING b/COPYING
@@ -132,3 +132,12 @@ Packaging:
     Copyright (C) 2004-2009 by Sage Weil <[email protected]>
     Copyright (C) 2010 Canonical, Ltd.
     Licensed under LGPL-2.1
+
+File: qa/workunits/erasure-code/jquery.js
+  Copyright 2012 jQuery Foundation and other contributors
+  Released under the MIT license
+  http://jquery.org/license
+
+Files: qa/workunits/erasure-code/jquery.{flot.categories,flot}.js
+  Copyright (c) 2007-2014 IOLA and Ole Laursen.
+  Licensed under the MIT license.
diff --git a/qa/workunits/erasure-code/bench.html b/qa/workunits/erasure-code/bench.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Erasure Code Plugins Benchmarks</title>
+    <link href="examples.css" rel="stylesheet" type="text/css">
+    <script language="javascript" type="text/javascript" src="jquery.js"></script>
+    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
+    <script language="javascript" type="text/javascript" src="jquery.flot.categories.js"></script>
+    <script language="javascript" type="text/javascript" src="bench.js"></script>
+    <script language="javascript" type="text/javascript" src="plot.js"></script>
+  </head>
+  <body>
+
+    <div id="header">
+      <h2>Erasure Code Plugins Benchmarks</h2>
+    </div>
+
+    <div id="content">
+
+      <div class="demo-container">
+	<div id="encode" class="demo-placeholder"></div>
+      </div>
+      <p>encode: Y = GB/s, X = K/M</p>
+
+      <div class="demo-container">
+	<div id="decode" class="demo-placeholder"></div>
+      </div>
+      <p>decode: Y = GB/s, X = K/M/erasures</p>
+
+      <div class="demo-container">
+	<div id="encode4KB" class="demo-placeholder"></div>
+      </div>
+      <p>encode 4KB: Y = GB/s, X = K/M</p>
+
+      <div class="demo-container">
+	<div id="decode4KB" class="demo-placeholder"></div>
+      </div>
+      <p>decode 4KB: Y = GB/s, X = K/M/erasures</p>
+
+      <div class="demo-container">
+	<div id="encode1MB" class="demo-placeholder"></div>
+      </div>
+      <p>encode 1MB: Y = GB/s, X = K/M</p>
+
+      <div class="demo-container">
+	<div id="decode1MB" class="demo-placeholder"></div>
+      </div>
+      <p>decode 1MB: Y = GB/s, X = K/M/erasures</p>
+
+
+    </div>
+
+  </body>
+</html>
diff --git a/qa/workunits/erasure-code/bench.sh b/qa/workunits/erasure-code/bench.sh
@@ -14,6 +14,33 @@
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU Library Public License for more details.
 #
+# Test that it works from sources with:
+#
+#  TOTAL_SIZE=$((1024 * 1024)) \
+#  CEPH_ERASURE_CODE_BENCHMARK=src/ceph_erasure_code_benchmark  \
+#  PLUGIN_DIRECTORY=src/.libs \
+#      qa/workunits/erasure-code/bench.sh fplot jerasure |
+#      tee qa/workunits/erasure-code/bench.js
+#
+# This should start immediately and display:
+#
+# var encode_reed_sol_van_4096 = [
+# [ '2/1',  .48035538612887358583  ],
+# [ '3/2',  .21648470405675016626  ],
+# etc.
+#
+# and complete within a few seconds. The result can then be displayed with:
+#
+#  firefox qa/workunits/erasure-code/bench.html
+#
+# Once it is confirmed to work, it can be run with a more significant
+# volume of data so that the measures are more reliable:
+#
+#  CEPH_ERASURE_CODE_BENCHMARK=src/ceph_erasure_code_benchmark  \
+#  PLUGIN_DIRECTORY=src/.libs \
+#      qa/workunits/erasure-code/bench.sh fplot jerasure |
+#      tee qa/workunits/erasure-code/bench.js
+#
 set -e
 
 export PATH=/sbin:$PATH
@@ -123,6 +150,31 @@ function jerasure_test() {
     done
 }
 
+function fplot() {
+    local plugin=$1
+    local serie
+    ${plugin}_test | while read seconds total plugin k m workload iteration size erasures rest ; do 
+        if [ -z $seconds ] ; then
+            echo null,
+        elif [ $seconds = serie ] ; then
+            if [ "$serie" ] ; then
+                echo '];'
+            fi
+             local serie=$total
+             echo "var $serie = ["
+        else
+            local x
+            if [ $workload = encode ] ; then
+                x=$k/$m
+            else
+                x=$k/$m/$erasures
+            fi
+            echo "[ '$x', " $(echo "( $total / 1024 / 1024 ) / $seconds" | bc -ql) " ], "
+        fi
+    done
+    echo '];'
+}
+
 function main() {
     bench_header
     for plugin in ${PLUGINS} ; do
@@ -326,6 +378,9 @@ EOF
     }
 
     run_test
+
+elif [ "$1" = fplot ] ; then
+    "$@"
 else
     main
 fi

diff --git a/qa/workunits/erasure-code/examples.css b/qa/workunits/erasure-code/examples.css
@@ -0,0 +1,97 @@
+* {	padding: 0; margin: 0; vertical-align: top; }
+
+body {
+	background: url(background.png) repeat-x;
+	font: 18px/1.5em "proxima-nova", Helvetica, Arial, sans-serif;
+}
+
+a {	color: #069; }
+a:hover { color: #28b; }
+
+h2 {
+	margin-top: 15px;
+	font: normal 32px "omnes-pro", Helvetica, Arial, sans-serif;
+}
+
+h3 {
+	margin-left: 30px;
+	font: normal 26px "omnes-pro", Helvetica, Arial, sans-serif;
+	color: #666;
+}
+
+p {
+	margin-top: 10px;
+}
+
+button {
+	font-size: 18px;
+	padding: 1px 7px;
+}
+
+input {
+	font-size: 18px;
+}
+
+input[type=checkbox] {
+	margin: 7px;
+}
+
+#header {
+	position: relative;
+	width: 900px;
+	margin: auto;
+}
+
+#header h2 {
+	margin-left: 10px;
+	vertical-align: middle;
+	font-size: 42px;
+	font-weight: bold;
+	text-decoration: none;
+	color: #000;
+}
+
+#content {
+	width: 880px;
+	margin: 0 auto;
+	padding: 10px;
+}
+
+#footer {
+	margin-top: 25px;
+	margin-bottom: 10px;
+	text-align: center;
+	font-size: 12px;
+	color: #999;
+}
+
+.demo-container {
+	box-sizing: border-box;
+	width: 850px;
+	height: 450px;
+	padding: 20px 15px 15px 15px;
+	margin: 15px auto 30px auto;
+	border: 1px solid #ddd;
+	background: #fff;
+	background: linear-gradient(#f6f6f6 0, #fff 50px);
+	background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
+	background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
+	background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
+	background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
+	box-shadow: 0 3px 10px rgba(0,0,0,0.15);
+	-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+	-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+	-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+}
+
+.demo-placeholder {
+	width: 100%;
+	height: 100%;
+	font-size: 14px;
+	line-height: 1.2em;
+}
+
+.legend table {
+	border-spacing: 5px;
+}