From 3b3e3093ce0916aca94401a03dfba26752cbda7c Mon Sep 17 00:00:00 2001 From: Lance Ball Date: Wed, 5 Apr 2017 13:37:05 -0400 Subject: [PATCH] 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: https://github.com/bucharest-gold/opossum/issues/47 --- examples/jquery/app.js | 22 +++++++++++++++++----- examples/jquery/index.html | 18 +++++++++++------- examples/react/client/package.json | 2 +- examples/seneca/app.js | 22 +++++++++++++++++----- examples/seneca/index.html | 18 +++++++++++------- lib/status.js | 4 ++-- 6 files changed, 59 insertions(+), 27 deletions(-) diff --git a/examples/jquery/app.js b/examples/jquery/app.js index f366ce23..28ea91c2 100644 --- a/examples/jquery/app.js +++ b/examples/jquery/app.js @@ -3,8 +3,8 @@ (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'; @@ -12,13 +12,25 @@ 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 index 1b83b1fa..43077bfb 100644 --- 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 @@

Opossum Circuit Breaker Example

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.

- 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. -

-

- 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.

- The source code for the application is relatively simple, and uses some basic jQuery capabilities to make the ajax calls and update the DOM accordingly. + The source code.

- +
+

Circuit Breaker Statistics

+

...

+
-

FLAKEY RESPONSES

+

Flakey Responses

Click to clear
diff --git a/examples/react/client/package.json b/examples/react/client/package.json index a1fa19f0..dc343e12 100644 --- 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 index 0d2aa3c7..abf1ab79 100644 --- a/examples/seneca/app.js +++ b/examples/seneca/app.js @@ -3,8 +3,8 @@ (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'; @@ -12,13 +12,25 @@ 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 index d262d109..5737d50f 100644 --- 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 @@

Opossum Circuit Breaker Example

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.

- 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. -

-

- 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.

- The source code for the application is relatively simple, and uses some basic jQuery capabilities to make the ajax calls and update the DOM accordingly. + The source code.

- +
+

Circuit Breaker Statistics

+

...

+
-

FLAKEY RESPONSES

+

Flakey Responses

Click to clear
diff --git a/lib/status.js b/lib/status.js index 562b857a..21516134 100644 --- 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]);