Skip to content

Commit

Permalink
Update Sliding.vue
Browse files Browse the repository at this point in the history
  • Loading branch information
@tichon29
tichon29 committed Nov 3, 2020
1 parent c8b2735 commit 9e3434c
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 120 deletions.
136 changes: 96 additions & 40 deletions docs/components/module/breaker/Sliding.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,15 @@
</div>
</div>
<div class="mollitia-module-sliding-window-breaker-visual">
<label for="circuitStatus">Circuit Status</label>
<div id="circuitStatus" class="circle" :class="circuitStateClass"></div>
<div id="circuitStatusText">{{circuitStatusMessage}}</div>
<div class="mollitia-module-sliding-window-breaker-result">
<label for="circuitStatus">Circuit Status</label>
<div id="circuitStatus" class="circle" :class="circuitStateClass"></div>
<div id="circuitStatusText">{{circuitStatusMessage}}</div>
</div>
<div class="mollitia-module-sliding-window-breaker-duration">
<div class="mollitia-module-sliding-window-breaker-title">{{circuitDuration}}</div>
<div class="mollitia-module-sliding-window-breaker-progress" :style="style"></div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -74,23 +80,65 @@ export default {
permittedNumberOfCallsInHalfOpenState: 2,
openStateDelay: 1000,
halfOpenStateMaxDelay: 30000,
circuitStatusMessage: 'Closed'
circuitStatusMessage: 'Closed',
circuitDuration: '',
percent: 0
}
},
computed: {
style () {
return {
'width': `${this.percent}%`,
'background-color': 'var(--mollitia-info-color)'
}
}
},
methods: {
updateStateProgress () {
if (this.interval) {
clearInterval(this.interval);
this.circuitDuration = '';
this.percent = 0;
}
if (this.circuitStateClass === 'halfopened') {
this.circuitDuration = 'Half Opened Duration';
this.interval = setInterval(() => {
const now = new Date().getTime();
this.percent = ((now - this.timeStateChanged) / this.halfOpenStateMaxDelay) * 100;
if (this.percent > 100) {
this.percent = 100;
}
}, 150);
} else if (this.circuitStateClass === 'opened') {
this.circuitDuration = 'Opened Duration';
this.interval = setInterval(() => {
const now = new Date().getTime();
this.percent = ((now - this.timeStateChanged) / this.openStateDelay) * 100;
if (this.percent > 100) {
this.percent = 100;
}
}, 150);
}
},
onCircuitStateChanged () {
switch(this.slidingWindowBreaker.state) {
case this.$mollitia.BreakerState.HALF_OPENED:
this.circuitStateClass = 'halfopened';
this.circuitStatusMessage = 'Half Opened';
this.timeStateChanged = new Date().getTime();
this.updateStateProgress();
break;
case this.$mollitia.BreakerState.OPENED:
this.circuitStateClass = 'opened';
this.circuitStatusMessage = 'Opened';
this.timeStateChanged = new Date().getTime();
this.updateStateProgress();
break;
default:
this.circuitStatusMessage = 'Closed';
this.circuitStateClass = '';
this.timeStateChanged = new Date().getTime();
this.updateStateProgress();
break;
}
},
Expand Down Expand Up @@ -164,44 +212,52 @@ export default {
}
}
.mollitia-module-sliding-window-breaker-visual {
margin-top: auto;
margin-bottom: auto;
flex-grow: 1;
display: flex;
margin-left:5px;
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background: green;
margin-left: 5px;
margin-right: 5px;
// background-image: linear-gradient(to right, transparent 50%, currentColor 0);
// color: white
}
.circle.halfopened {
background: orange;
flex-direction: column;
min-height: 50px;
.mollitia-module-sliding-window-breaker-result {
height: 50%;
display: flex;
margin-top: 10px;
justify-content: center;
align-items: center;
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--mollitia-success-color);
margin-left: 5px;
margin-right: 5px;
}
.circle.halfopened {
background: var(--mollitia-warning-color);
}
.circle.opened {
background: var(--mollitia-error-color);
}
}
.circle.opened {
background: red;
.mollitia-module-sliding-window-breaker-duration {
height: 50%;
position: relative;
.mollitia-module-sliding-window-breaker-title {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.mollitia-module-sliding-window-breaker-progress {
height: 100%;
transition:
width .25s ease,
background-color .25s ease;
}
}
// .circle::before {
// content: '';
// display: block;
// margin-left: 50%;
// height: 100%;
// border-radius: 0 100% 100% 0 / 50%;
// background-color: inherit;
// transform-origin: left;
// animation: spin 5s linear infinite, bg 10s step-end infinite;
// }
// @keyframes spin {
// to { transform: rotate(.5turn); }
// }
// @keyframes bg {
// 50% { background: currentColor; }
// }
}
}
}
</style>
25 changes: 0 additions & 25 deletions test/perf/config.yaml
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,4 @@
modules:
# SlidingTimeBreaker:
# failureRateThreshold: 50
# openStateDelay: 10000
# slidingWindowSize: 60000
# minimumNumberOfCalls: 3
# permittedNumberOfCallsInHalfOpenState: 3
# slowCallDurationThreshold: 30000
# slowCallRateThreshold: 50
# SlidingCountBreaker:
# failureRateThreshold: 50
# openStateDelay: 1000
# slidingWindowSize: 1000
# minimumNumberOfCalls: 3
# permittedNumberOfCallsInHalfOpenState: 1
# slowCallDurationThreshold: 50000
# slowCallRateThreshold: 50
# Timeout:
# delay: 2000
# RateLimit:
# - limitPeriod: 1000
# limitForPeriod: 3
# - limitPeriod: 200
# limitForPeriod: 1
# Retry:
# attempts: 2
- type: SlidingTimeBreaker
options:
failureRateThreshold: 50
Expand Down
55 changes: 0 additions & 55 deletions test/perf/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,61 +31,6 @@ circuitConfig.modules.forEach(mod => {
// break;
}
})
// if (circuitConfig.modules.SlidingTimeBreaker) {
// if (Array.isArray(circuitConfig.modules.SlidingTimeBreaker)) {
// circuitConfig.modules.SlidingTimeBreaker.forEach(stb => {
// stb.logger = console;
// modules.push(new Mollitia.SlidingTimeBreaker(stb));
// });
// } else {
// circuitConfig.modules.SlidingTimeBreaker.logger = console;
// modules.push(new Mollitia.SlidingTimeBreaker(circuitConfig.modules.SlidingTimeBreaker));
// }
// }
// if (circuitConfig.modules.SlidingCountBreaker) {
// if (Array.isArray(circuitConfig.modules.SlidingCountBreaker)) {
// circuitConfig.modules.SlidingCountBreaker.forEach(scb => {
// scb.logger = console;
// modules.push(new Mollitia.SlidingCountBreaker(scb));
// });
// } else {
// circuitConfig.modules.SlidingCountBreaker.logger = console;
// modules.push(new Mollitia.SlidingCountBreaker(circuitConfig.modules.SlidingCountBreaker));
// }
// }
// if (circuitConfig.modules.Retry) {
// if (Array.isArray(circuitConfig.modules.Retry)) {
// circuitConfig.modules.Retry.forEach(r => {
// r.logger = console;
// modules.push(new Mollitia.Retry(r));
// });
// } else {
// circuitConfig.modules.Retry.logger = console;
// modules.push(new Mollitia.Retry(circuitConfig.modules.Retry));
// }
// }
// if (circuitConfig.modules.RateLimit) {
// if (Array.isArray(circuitConfig.modules.RateLimit)) {
// circuitConfig.modules.RateLimit.forEach(rl => {
// rl.logger = console;
// modules.push(new Mollitia.RateLimit(rl));
// });
// } else {
// circuitConfig.modules.RateLimit.logger = console;
// modules.push(new Mollitia.RateLimit(circuitConfig.modules.RateLimit));
// }
// }
// if (circuitConfig.modules.Timeout) {
// if (Array.isArray(circuitConfig.modules.Timeout)) {
// circuitConfig.modules.Timeout.forEach(t => {
// t.logger = console;
// modules.push(new Mollitia.Timeout(t));
// });
// } else {
// circuitConfig.modules.Timeout.logger = console;
// modules.push(new Mollitia.Timeout(circuitConfig.modules.Timeout));
// }
// }

const circuit = new Mollitia.Circuit({
options: {
Expand Down

0 comments on commit 9e3434c

Please sign in to comment.