Skip to content

Commit

Permalink
Merge pull request #11 from vania-pooh/master
Browse files Browse the repository at this point in the history 
Updated pricing section
  • Loading branch information
@vania-pooh
vania-pooh authored Nov 16, 2022
2 parents 92cba7a + a09116c commit 76b1098
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 107 deletions.
4 changes: 0 additions & 4 deletions site/data/meta.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,6 @@
"name": "Blog",
"url": "https://blog.aerokube.com"
},
{
"name": "Github",
"url": "https://github.com/aerokube/moon"
},
{
"name": "Telegram",
"url": "https://t.me/aerokube_moon"
Expand Down
1 change: 1 addition & 0 deletions site/layouts/partials/howitworks.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ <h2 class="pricing__title" id="howitworks">How it works</h2>
<li class="howitworks__step">
<strong>Cost-efficient.</strong>
Moon Cloud grows and shrinks depending on how many browsers you need. This allows to dramatically decrease computing resources consumption. You only pay for computing resources you really consume.
<div class="howitworks__illustration howitworks__illustration__autoscaling"></div>
</li>
<li class="howitworks__step">
<strong>Transparent billing.</strong>
Expand Down
29 changes: 18 additions & 11 deletions site/layouts/partials/pricing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,32 +7,39 @@ <h2 class="pricing__title" id="pricing">Pricing</h2>
<div class="row">
<div class="col-12 col-md-8 offset-md-2 pricing__definition">
<p>
Because of pay as you go model Moon Cloud pricing model differs from traditional cloud platforms.
At the end of each month you pay <strong>regular cloud platform bill plus a fixed commission of 25% for cluster maintenance</strong>.
Below you can get an idea of approximate Moon Cloud pricing depending on maximum number of parallel browsers and weekly usage:
Moon Cloud pricing model differs from traditional browser automation platforms.
There is no limit of how many browsers you can run in parallel and no limit of browser automation minutes.
At the end of each month you pay <strong>regular cloud platform bill plus a fixed commission of 25% for cluster maintenance</strong>. Cloud platform bill consists of two main parts: <strong>permanent part</strong> and <strong>usage-based part</strong>. <strong>Permanent part</strong> is what you pay anyway, even if no browsers are being used. This part includes cost of Moon Cloud components that are running all the time: Kubernetes computing resources for Moon software and monitoring, NAT instance and network load balancer. <strong>Usage-based part</strong> is the cost of computing resources for browsers that you run.
Below you can get an idea of approximate monthly Moon Cloud cost:
</p>
</div>
<div class="col-12 col-md-8 offset-md-2">
<form id="range" class="pricing-range">
<div class="pricing-range__range-container">
</div>
<div class="pricing-range__range-container"></div>
<div class="pricing-range__config">
<div class="pricing-range__selects"></div>
<label class="d-flex justify-content-between align-items-center d-sm-inline pricing-range__duration-label">
<span class="pricing-range__duration-label-text">Cloud platform: </span>
<span class="select-wrapper">
<select name="duration" class="select pricing-range__duration"></select>
<span class="pricing-range__duration-label-text">Test runs per day:</span>
<span class="pricing-range__odometer-container">
<span class="pricing-range__count-label-tests">✔</span><span id="count-odometer"></span>
</span>
</label>
<label class="d-flex justify-content-between align-items-center pricing-range__price-label">
<span class="pricing-range__price-label-text">Your price:</span>
<label class="d-flex justify-content-between align-items-center d-sm-inline pricing-range__price-label">
<span class="pricing-range__price-label-text">Monthly cost:</span>
<span class="pricing-range__odometer-container">
<span class="pricing-range__price-label-currency">$</span><span id="price-odometer"></span>
</span>
<input id="price-input" type="hidden" name="price" value="0">
</label>
</div>

<div class="pricing-range__config">
</div>
</form>
</div>
<div class="col-12 col-md-8 offset-md-2 pricing__after">
<p>
In the calculator above you can change 3 parameters: number of browsers running in parallel, how much time you expect to run all your tests every day and how long an average test runs. The first two parameters determine monthly infrastructure cost. In this calculator we assume that tests are being run 5 days per week (21 days per month) in the US East region. In other cloud regions final cluster cost can change because the same computing resources have different cost there. Note that monthly cost is not zero even if you don't run your tests at all (automation hours per day is 0). This is because of the permanent part of the infrastructure described above. Average test duration allows to estimate possible number of tests you can run per day with selected number of parallel browsers and daily usage duration. If you are not sure about your possible usage - request a free trial using the form at the top of the page or contact us: <strong>moon-cloud [at] aerokube.com</strong>.
</p>
</div>
</div>
</div>
Binary file added site/static/images/howitworks-autoscaling.webp
View file
Binary file not shown.
38 changes: 37 additions & 1 deletion src/css/imports/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,10 @@ nav li {
.hero {
margin-top: 25px;

a {
border-bottom: none;
}

&__heading-title {
margin-bottom: 10px;
}
Expand Down Expand Up @@ -555,6 +559,10 @@ nav li {
height: 500px;
}

&__autoscaling {
height: 550px;
}

&__overview {
background-image: url('#{$prefix}/images/howitworks-overview.webp');
}
Expand All @@ -566,6 +574,10 @@ nav li {
&__internals {
background-image: url('#{$prefix}/images/howitworks-internals.webp');
}

&__autoscaling {
background-image: url('#{$prefix}/images/howitworks-autoscaling.webp');
}
}

&__steps {
Expand All @@ -583,6 +595,7 @@ nav li {
color: rgba(10, 34, 94, 1);
font-size: 18px;
margin-bottom: 16px;
text-align: justify;

&::before {
position: absolute;
Expand All @@ -606,6 +619,14 @@ nav li {
.pricing {
margin-top: 40px;

&__after {
margin-top: 20px;
}

p {
text-align: justify;
}

&__title {
margin-bottom: 24px;
}
Expand Down Expand Up @@ -699,7 +720,7 @@ nav li {
margin-left: 20px;
}

&__price-label-currency {
&__price-label-currency, &__count-label-tests {
vertical-align: middle;
}

Expand Down Expand Up @@ -756,6 +777,11 @@ nav li {
&__overview, &__private_network, &__internals {
height: 400px;
}

&__autoscaling {
height: 450px;
}

}
}
}
Expand Down Expand Up @@ -792,6 +818,11 @@ nav li {
&__overview, &__private_network, &__internals {
height: 300px;
}

&__autoscaling {
height: 350px;
}

}
}
}
Expand All @@ -802,6 +833,11 @@ nav li {
&__overview, &__private_network, &__internals {
height: 200px;
}

&__autoscaling {
height: 250px;
}

}
}
}
Expand Down
136 changes: 45 additions & 91 deletions src/range.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,30 @@ const defaultParams = {
blockName: "pricing-range",
ranges: [
{
name: "sessions",
title: "Parallel Sessions",
values: [10, 20, 50, 100, 500, 1000],
value: 50
name: "limit",
title: "Parallel browsers",
values: [10, 20, 50, 100, 500],
value: 20
},
{
name: "hours",
title: "Hours per week",
values: [2, 4, 8, 16, 24, 40],
value: 8
}
],
// price coefficient for platform
platforms: [
{
title: "Amazon Web Services",
value: 1
},
{
title: "Google Cloud",
value: 2
title: "Automation hours per day",
values: [0, 1, 2, 4, 8, 24],
value: 0
},
{
title: "Microsoft Azure",
value: 3
},
],
defaultPlatform: 1,
price: 5
name: "duration",
title: "Average test duration in minutes",
values: [1, 3, 5, 10, 20],
value: 1
}
]
};

const price = {
maintenanceCommission: 1.25,
platforms: {
permanent: {
1: 170, // AWS
2: 186, // Google Cloud
3: 163 // M$ Azure
},
variable: {
1: 0.192,
2: 0.134,
3: 0.166
},
}
permanent: 170, // per month
variable: 0.192 // per hour
};

class Range {
Expand All @@ -60,31 +39,35 @@ class Range {
this.selector = selector;
this.rangeContainer = selector.querySelector(".pricing-range__range-container");
this.selectContainer = selector.querySelector(".pricing-range__selects");
this.platforms = this.params.platforms;
this.platform = this.params.defaultPlatform;
this.price = this.params.price;
this.value = null;
this.count = null;
this.ranges = [];

this.createRanges();
this.createValue();
this.createDuration();
this.createOdometers();

this.setValue();
}

setValue() {
const weeklyUsage = this.ranges.map((r) => r.value).reduce((acc, r) => acc * r); // Hours * parallel sessions
const monthlyUsage = 4 * weeklyUsage;
const vmMonthlyUsage = monthlyUsage / 5; // 1 VM == 5 browsers
const permanentPayment = price.platforms.permanent[this.platform]; // Load balancer + nodes with Moon
const usageCost = price.platforms.variable[this.platform]; // Browser nodes with auto-scaling
this.value = price.maintenanceCommission * (permanentPayment + usageCost * vmMonthlyUsage);
const dailyUsage = this.ranges
.filter((r) => r.name === "limit" || r.name === "hours")
.map((r) => r.value)
.reduce((acc, r) => acc * r); // Hours * parallel sessions
const monthlyUsage = 21 * dailyUsage;
const vmMonthlyUsage = monthlyUsage / 4; // 1 VM == 4 browsers
this.value = price.maintenanceCommission * (price.permanent + price.variable * vmMonthlyUsage);
if (this.odometer) {
this.odometer.update(this.value);
}

this.priceInput.value = this.value;
const avgTestDuration = this.ranges
.filter((r) => r.name === "duration")
.map((r) => r.value);
this.count = dailyUsage * 60 / avgTestDuration;
if (this.countOdometer) {
this.countOdometer.update(this.count);
}
}

createRanges() {
Expand All @@ -96,10 +79,6 @@ class Range {
});
}

setRanges() {
this.ranges.forEach(this.setRange, this);
}

createRange(range) {
const container = document.createElement("div");
container.classList.add("d-none", "d-sm-block", "pricing-range__range");
Expand Down Expand Up @@ -134,6 +113,7 @@ class Range {
container,
select,
items,
name: range.name,
value: range.value,
title: range.title
};
Expand Down Expand Up @@ -182,40 +162,8 @@ class Range {
}
}

createDuration() {
this.platformContainer = this.selector.querySelector(".pricing-range__duration");

this.platforms.forEach((month) => {
const element = document.createElement("option");
element.setAttribute("value", month.value);
element.innerText = month.title;
this.platformContainer.appendChild(element);
});

this.platformContainer.addEventListener("change", (event) => {
this.platform = event.target.value;

this.setDuration();
this.setValue();
});

this.setDuration();
}

setDuration() {
const options = this.platformContainer.options;

for (let i = 0; i < options.length; i++) {
if (options[i].value !== this.platform) {
options[i].removeAttribute("selected");
} else {
options[i].setAttribute("selected", "");
}
}
}

setRange(range, value) {
if (value) {
if (value || value === 0) {
range.value = value;
}

Expand Down Expand Up @@ -257,16 +205,22 @@ class Range {
};
}

createValue() {
this.valueContainer = document.getElementById("price-odometer");
this.priceInput = document.getElementById("price-input");

createOdometers() {
const priceValueContainer = document.getElementById("price-odometer");
this.odometer = new window.Odometer({
el: this.valueContainer,
el: priceValueContainer,
value: this.value,
numberLength: 5,
theme: "minimal",
format: "(,ddddd)"
format: "(ddddd)"
});
const countValueContainer = document.getElementById("count-odometer");
this.countOdometer = new window.Odometer({
el: countValueContainer,
value: this.count,
numberLength: 6,
theme: "minimal",
format: "(dddddd)"
});
}
}
Expand Down

0 comments on commit 76b1098

Please sign in to comment.