Add better images for rolling deploys, bg, and machine failure

This commit is contained in:
Seth Vargo
2017-07-22 19:19:23 -04:00
parent 3a783021b4
commit 3265225a76
5 changed files with 128 additions and 6 deletions

View File

@@ -0,0 +1,37 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 175">
<g fill="none" fill-rule="evenodd">
<path d="M17.484 1.02l-16.29 9.473 16.29 9.474 16.162-9.56"/>
<path fill="#FFF" fill-rule="nonzero" d="M17.484.037L0 10.194v20.27l11.94 6.915v-.985l-11.087-6.4V11.303l16.204 9.388v19.42l.64.385 17.27-10.03v-20.27L17.485.037zm0 19.93l-16.29-9.474 16.29-9.474 16.162 9.386-16.162 9.56zm16.63 10.03L18.55 39l-.64.384V20.692l16.205-9.56v18.864z"/>
<g fill="#FFF" font-family="CourierNewPS-BoldMT, Courier New" font-weight="bold">
<text font-size="12" transform="translate(43 2)">
<tspan x="0" y="31">web-app:1.0</tspan>
</text>
<text font-size="18" transform="translate(43 2)">
<tspan x="0" y="15">group.blue</tspan>
</text>
</g>
<g fill="#FFF">
<path fill-opacity=".6" d="M255.484 1.02l-16.29 9.473 16.29 9.474 16.162-9.56"/>
<path fill-rule="nonzero" d="M255.484.037L238 10.194v20.27l11.94 6.915v-.985l-11.087-6.4V11.303l16.204 9.388v19.42l.64.385 17.27-10.03v-20.27L255.485.037zm0 19.93l-16.29-9.474 16.29-9.474 16.162 9.386-16.162 9.56zm16.63 10.03L256.55 39l-.64.384V20.692l16.205-9.56v18.864z"/>
<g font-family="CourierNewPS-BoldMT, Courier New" font-weight="bold">
<text font-size="12" transform="translate(281 2)">
<tspan x="0" y="31">web-app:1.1</tspan>
</text>
<text font-size="18" transform="translate(281 2)">
<tspan x="0" y="15">group.green</tspan>
</text>
</g>
</g>
<path stroke="#FFF" stroke-width="5" d="M81.5 49C47.534 49 20 76.534 20 110.5S47.534 172 81.5 172s61.5-27.534 61.5-61.5c0-4.998-.596-9.857-1.72-14.51"/>
<path stroke="#FFF" stroke-opacity=".6" stroke-width="5" d="M140.247 92.25c-7.342-23.662-28.587-41.206-54.184-43.083"/>
<text fill="#FFF" font-family="Courier-Bold, Courier" font-size="30" font-weight="bold" transform="translate(20 49)">
<tspan x="25.494" y="73">8/10</tspan>
</text>
<path stroke="#FFF" stroke-opacity=".6" stroke-width="5" d="M318.5 49c-33.966 0-61.5 27.534-61.5 61.5s27.534 61.5 61.5 61.5 61.5-27.534 61.5-61.5c0-4.998-.596-9.857-1.72-14.51"/>
<path stroke="#FFF" stroke-width="5" d="M377.247 92.25c-7.342-23.662-28.587-41.206-54.184-43.083"/>
<text fill="#FFF" font-family="Courier-Bold, Courier" font-size="30" font-weight="bold" transform="translate(257 49)">
<tspan x="25.494" y="73">2/10</tspan>
</text>
<path stroke="#FFF" d="M202.5 66.41v89.18" stroke-linecap="square"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 175">
<g fill="none" fill-rule="evenodd">
<path fill="#FFF" d="M268 84h100v21.212H268V84zm5.116 4.714v11.784h72.093V88.714h-72.1zm83.49 11.784c3.21 0 5.813-2.638 5.813-5.892 0-3.254-2.61-5.892-5.82-5.892-3.21 0-5.82 2.638-5.82 5.892 0 3.254 2.603 5.892 5.814 5.892zM268 112.738h100v21.21H268v-21.212zm5.116 4.713v11.79h72.093v-11.79h-72.1zm83.49 11.79c3.21 0 5.813-2.64 5.813-5.89s-2.61-5.89-5.82-5.89c-3.21 0-5.82 2.64-5.82 5.895 0 3.255 2.603 5.893 5.814 5.893zM268 141.48h100v21.212H268V141.48zm5.116 4.714v11.78h72.093v-11.78h-72.1zm83.49 11.78c3.21 0 5.813-2.64 5.813-5.89 0-3.255-2.61-5.89-5.82-5.89-3.21 0-5.82 2.635-5.82 5.89 0 3.253 2.603 5.89 5.814 5.89z"/>
<path stroke="#FFF" stroke-width="2" d="M185 123h27.538" stroke-linecap="square"/>
<path fill="#FFF" d="M221.5 123.037l-10.5 6.038V117"/>
<g fill="#FFF">
<path fill-opacity=".6" d="M32 84h100v21.212H32V84zm5.116 4.714v11.784h72.093V88.714h-72.1zm83.49 11.784c3.21 0 5.813-2.638 5.813-5.892 0-3.254-2.61-5.892-5.82-5.892-3.21 0-5.82 2.638-5.82 5.892 0 3.254 2.603 5.892 5.814 5.892zM32 112.738h100v21.21H32v-21.212zm5.116 4.713v11.79h72.093v-11.79h-72.1zm83.49 11.79c3.21 0 5.813-2.64 5.813-5.89s-2.61-5.89-5.82-5.89c-3.21 0-5.82 2.64-5.82 5.895 0 3.255 2.603 5.893 5.814 5.893z"/>
<path d="M32 141.475h100v21.212H32v-21.212zm5.116 4.714v11.78h72.093v-11.78h-72.1zm83.49 11.78c3.21 0 5.813-2.64 5.813-5.89 0-3.26-2.61-5.89-5.82-5.89-3.21 0-5.82 2.63-5.82 5.89 0 3.25 2.603 5.89 5.814 5.89z"/>
</g>
<path d="M318.498 14.238l-16.303 9.474 16.303 9.474 16.174-9.56"/>
<path fill="#FFF" fill-rule="nonzero" d="M318.498 13.256L301 23.413v20.272l11.95 6.914v-.99l-11.096-6.4V24.52l16.217 9.39v19.42l.64.384L336 43.684v-20.27l-17.5-10.158zm0 19.93l-16.303-9.474 16.303-9.474 16.174 9.39-16.174 9.558zm16.644 10.03l-15.577 9.004-.64.384V33.912l16.217-9.56v18.863z"/>
<g fill="#FFF">
<path fill-opacity=".6" d="M81.498 14.238l-16.303 9.474 16.303 9.474 16.174-9.56"/>
<path fill-rule="nonzero" d="M81.498 13.256L64 23.413v20.272L75.95 50.6v-.983l-11.096-6.402V24.523l16.217 9.39V53.33l.64.384L99 43.684v-20.27l-17.5-10.16zm0 19.93l-16.303-9.474 16.303-9.474 16.174 9.39-16.174 9.558zm16.644 10.03L82.565 52.22l-.64.384V33.912l16.217-9.56v18.863z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -0,0 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 175">
<g fill="none" fill-rule="evenodd">
<path stroke="#FFF" stroke-width="5" d="M33.302 90.566C31.162 96.818 30 103.523 30 110.5c0 33.966 27.534 61.5 61.5 61.5s61.5-27.534 61.5-61.5S125.466 49 91.5 49"/>
<path stroke="#FFF" stroke-opacity=".6" stroke-width="5" d="M87.935 49.102c-24.4 1.394-44.99 17.013-53.607 38.69"/>
<g fill="#FFF" font-family="CourierNewPS-BoldMT, Courier New" font-weight="bold">
<text font-size="12" transform="translate(55 88)">
<tspan x=".494" y="42">rolling...</tspan>
</text>
<text font-size="30" transform="translate(55 88)">
<tspan x=".494" y="25">9/12</tspan>
</text>
</g>
<path stroke="#FFF" stroke-width="2" d="M195 109h27.538" stroke-linecap="square"/>
<path fill="#FFF" d="M231.5 109.037l-10.5 6.038V103"/>
<g transform="translate(267 49)">
<circle cx="61.5" cy="61.5" r="61.5" stroke="#FFF" stroke-width="5"/>
<g fill="#FFF" font-family="CourierNewPS-BoldMT, Courier New" font-weight="bold">
<text font-size="12" transform="translate(16 39)">
<tspan x="27.497" y="42">done!</tspan>
</text>
<text font-size="30" transform="translate(16 39)">
<tspan x=".493" y="25">12/12</tspan>
</text>
</g>
</g>
<g fill="#FFF">
<path fill-opacity=".6" d="M258.527 1.02l-16.33 9.473 16.33 9.474 16.2-9.56"/>
<path fill-rule="nonzero" d="M258.527.037L241 10.194v20.27l11.97 6.915v-.985l-11.115-6.4V11.303L258.1 20.69v19.42l.64.384 17.312-10.03v-20.27L258.527.037zm0 19.93l-16.33-9.474 16.33-9.474 16.2 9.386-16.2 9.56zm16.67 10.03L259.597 39l-.64.384V20.692l16.242-9.56v18.864z"/>
</g>
<path d="M27.5 1.02L11.195 10.5 27.5 19.983l16.177-9.567"/>
<path fill="#FFF" fill-rule="nonzero" d="M27.5.037L10 10.202V30.49l11.95 6.917v-.982L10.855 30.02V11.312l16.22 9.395V40.14l.64.385L45 30.49V10.2L27.5.037zm0 19.945l-16.305-9.48L27.5 1.02l16.177 9.396L27.5 19.982zM44.146 30.02l-15.58 9.01-.64.385V20.708l16.22-9.566V30.02z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@@ -210,9 +210,16 @@
&#simplify {
svg {
display: block;
margin: 60px 30px 0 0;
max-height: 150px;
margin: 0 auto;
padding: 0;
}
@media(max-width: $screen-sm) {
svg {
margin: 60px auto;
}
}
}
&#binpacking {

View File

@@ -136,11 +136,15 @@ description: |-
</div>
<div class="row">
<div class="col-sm-6">
<%= inline_svg "feature-simplify.svg" %>
<div class="col-sm-offset-5 col-sm-6">
<h3>Rolling Deploys</h3>
</div>
<div class="col-sm-6">
<h3>Rolling Upgrades</h3>
</div>
<div class="row">
<div class="col-sm-5" id="feature-rolling-deploys">
<%= inline_svg "feature-rolling-deploys.svg" %>
</div>
<div class="col-sm-7">
<p>
In order to update an application while reducing downtime, Nomad
provides a built-in mechanism for rolling upgrades. Operators specify
@@ -149,16 +153,40 @@ description: |-
parallelization and stagger, rolling upgrades make application
deployments simple and safe.
</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h3>Blue/Green Deployments</h3>
</div>
</div>
<div class="row">
<div class="col-sm-7">
<p>
Nomad supports blue/green and canary deployments through the
declarative job file syntax. By specifying multiple task groups,
Nomad allows for easily changing the quantity and parameters of
each group to perform automatic or manual rolling deploys.
each group to perform automatic or manual rolling deploys. Place the
job behind a shared load balancer to send a percentage of traffic to
the canary build to test changes on a portion of traffic.
</p>
</div>
<div class="col-sm-5">
<%= inline_svg "feature-blue-green.svg" %>
</div>
</div>
<div class="row">
<div class="col-sm-offset-5 col-sm-6">
<h3>Automatic Machine Failures</h3>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<%= inline_svg "feature-machine-failure.svg" %>
</div>
<div class="col-sm-7">
<p>
Because it knows the state of all nodes and applications, if a
node becomes unhealthy, Nomad will automatically reschedule the