examples: add stats to jquery and seneca examples (#50)

The react example has to wait. The way it's built is using webpack and installing opossum as an npm module. Fixes: #47
nodeshift · Apr 5, 2017 · 3b3e309 · 3b3e309
1 parent 3619678
commit 3b3e309
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 27 deletions.
diff --git a/examples/jquery/app.js b/examples/jquery/app.js
@@ -3,22 +3,34 @@
 
 (function appInitialization () {
   $(() => {
-    $('#flakey').click(() => circuit.fire().catch((e) => console.error(e)));
-    $('.clear').click(function () { $(this).parent().find('#flakeyResponse').remove(); });
+    $('#flakey').click(_ => circuit.fire().catch(console.error));
+    $('.clear').click(_ => { $('.clear').parent().find('#flakeyResponse').remove(); });
   });
 
   const route = '/flakeyService';
   const element = '#flakeyResponse';
 
   const circuitBreakerOptions = {
     timeout: 500,
-    maxFailures: 3,
+    errorThresholdPercentage: 50,
     resetTimeout: 5000
   };
 
-  const circuit = circuitBreaker(() => $.get(route), circuitBreakerOptions);
+  const circuit = circuitBreaker(_ => $.get(route), circuitBreakerOptions);
 
-  circuit.fallback(() => ({ body: `${route} unavailable right now. Try later.` }));
+  circuit.fallback(_ => ({ body: `${route} unavailable right now. Try later.` }));
+
+  circuit.status.on('snapshot', (stats) => {
+    const response = document.createElement('p');
+    $(response).addClass('stats');
+    Object.keys(stats).forEach((key) => {
+      const p = document.createElement('p');
+      p.append(`${key}: ${stats[key]}`);
+      $(response).append(p);
+    });
+
+    $('#stats').children().replaceWith($(response));
+  });
 
   circuit.on('success',
     (result) => $(element).prepend(

diff --git a/examples/jquery/index.html b/examples/jquery/index.html
@@ -18,6 +18,10 @@
       padding: 1em;
       width: 100%
     }
+    .right {
+      float:right;
+      width: 50%;
+    }
     h2 {
       border-bottom: 1px dotted #999;
     }
@@ -53,22 +57,22 @@ <h1>Opossum Circuit Breaker Example</h1>
       When you click the button here, this simple app calls a flakey web service that takes longer and longer to respond. The app's circuit breaker is configured to timeout after 500ms and execute a fallback command. Every 20 seconds, the flakey service is reset and the pattern is repeated.
     </p>
     <p>
-      If more than 3 errors are observed by the circuit within a single timeout period, then it begins to fail fast, rejecting the network call outright and executing the fallback function.
-    </p>
-    <p>
-       This should allow you to see all of the various events that occur when using a circuit breaker.
+      If more than half of the requests error, then it begins to fail fast, rejecting the network call outright and executing the fallback function.
     </p>
     <p>
-      The <a href="/app.js">source code</a> for the application is relatively simple, and uses some basic jQuery capabilities to make the ajax calls and update the DOM accordingly.
+      The <a href="/app.js">source code</a>.
     </p>
     <div class="row">
       <button type="button" id="flakey">
         Flakey Service
       </button>
     </div>
-
+    <div class="row right">
+      <h2>Circuit Breaker Statistics</h2>
+      <div id='stats'><p>...</p></div>
+    </div>
     <div class="row">
-      <h2>FLAKEY RESPONSES</h2>
+      <h2>Flakey Responses</h2>
       <span class="clear">Click to clear</span>
       <div id="flakeyResponse"></div>
     </div>

diff --git a/examples/react/client/package.json b/examples/react/client/package.json
@@ -10,7 +10,7 @@
     "create-react-app": "^1.0.3",
     "jquery": "^3.1.1",
     "literalify": "^0.4.0",
-    "opossum": "^0.5.0",
+    "opossum": "^0.6.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-scripts": "^0.8.5"

diff --git a/examples/seneca/app.js b/examples/seneca/app.js
@@ -3,22 +3,34 @@
 
 (function appInitialization () {
   $(() => {
-    $('#flakey').click(() => circuit.fire().catch((e) => console.error(e)));
-    $('.clear').click(function () { $(this).siblings('p').remove(); });
+    $('#flakey').click(_ => circuit.fire().catch((e) => console.error(e)));
+    $('.clear').click(_ => $('.clear').siblings('p').remove());
   });
 
   const route = '/flakeyService';
   const element = '#flakeyResponse';
 
   const circuitBreakerOptions = {
     timeout: 500,
-    maxFailures: 3,
+    errorThresholdPercentage: 3,
     resetTimeout: 5000
   };
 
-  const circuit = circuitBreaker(() => $.get(route), circuitBreakerOptions);
+  const circuit = circuitBreaker(_ => $.get(route), circuitBreakerOptions);
 
-  circuit.fallback(() => ({ body: `${route} unavailable right now. Try later.` }));
+  circuit.fallback(_ => ({ body: `${route} unavailable right now. Try later.` }));
+
+  circuit.status.on('snapshot', (stats) => {
+    const response = document.createElement('p');
+    $(response).addClass('stats');
+    Object.keys(stats).forEach((key) => {
+      const p = document.createElement('p');
+      p.append(`${key}: ${stats[key]}`);
+      $(response).append(p);
+    });
+
+    $('#stats').children().replaceWith($(response));
+  });
 
   circuit.on('success',
     (result) => $(element).append(

diff --git a/examples/seneca/index.html b/examples/seneca/index.html
@@ -18,6 +18,10 @@
       padding: 1em;
       width: 100%
     }
+    .right {
+      float:right;
+      width: 50%;
+    }
     h2 {
       border-bottom: 1px dotted #999;
     }
@@ -53,22 +57,22 @@ <h1>Opossum Circuit Breaker Example</h1>
       When you click the button here, this simple app calls a flakey web service that takes longer and longer to respond. The app's circuit breaker is configured to timeout after 500ms and execute a fallback command. Every 20 seconds, the flakey service is reset and the pattern is repeated.
     </p>
     <p>
-      If more than 3 errors are observed by the circuit within a single timeout period, then it begins to fail fast, rejecting the network call outright and executing the fallback function.
-    </p>
-    <p>
-       This should allow you to see all of the various events that occur when using a circuit breaker.
+      If more than half of the requests error, then it begins to fail fast, rejecting the network call outright and executing the fallback function.
     </p>
     <p>
-      The <a href="/app.js">source code</a> for the application is relatively simple, and uses some basic jQuery capabilities to make the ajax calls and update the DOM accordingly.
+      The <a href="/app.js">source code</a>.
     </p>
     <div class="row">
       <button type="button" id="flakey">
         Flakey Service
       </button>
     </div>
-
+    <div class="row right">
+      <h2>Circuit Breaker Statistics</h2>
+      <div id='stats'><p>...</p></div>
+    </div>
     <div class="row" id="flakeyResponse">
-      <h2>FLAKEY RESPONSES</h2>
+      <h2>Flakey Responses</h2>
       <span class="clear">Click to clear</span>
     </div>
   </div>

diff --git a/lib/status.js b/lib/status.js
@@ -61,8 +61,8 @@ class Status extends EventEmitter {
     this[TIMEOUT] = options.rollingCountTimeout;
     this[WINDOW] = new Array(this[BUCKETS]);
 
-    // prime the window with an initial bucket
-    nextBucket(this[WINDOW])();
+    // prime the window with buckets
+    for (let i = 0; i < this[BUCKETS]; i++) this[WINDOW][i] = bucket();
 
     // rotate the buckets periodically
     const bucketInterval = Math.floor(this[TIMEOUT] / this[BUCKETS]);