-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfling.html
288 lines (265 loc) · 10.1 KB
/
fling.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!doctype html>
<html class="no-js" lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>VM Resource and Availability Service - David Yang</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body style="height: 100%;">
<section class="bauhaus-header">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h1>VM Resource and Availability Service</h1>
Case Study - VMware
</div>
</div>
</div>
</section>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">The Problem</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
Distributed Resource Scheduling (DRS) and High Availability (HA) are two vSphere features that maintain VM workload resiliency in the face of hardware failure.
<br>
<br>
DRS redistributes VMs across servers to maintain performance, while HA will move and reboot VMs on other servers during hardware failure.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/haDiagram.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
When <em>configured correctly</em>, these are powerful features that allow admins to sleep soundly at night
<br>
<br>
However, it is guesswork on how many servers are needed to maintain <strong>n+1 redundancy</strong> (loss of one node will not impact the system).
</div>
</div>
</div>
<section class="fling-excerpt">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two exercept">
As a vSphere Admin, I need to ensure my workloads are resilient to hardware failures.
<br>
<br>
I also need to know the possible impact of server failures on my VMs.
</div>
<div class="eight columns offset-by-two exercept-attribute" style="text-align: center;">
Use Case
</div>
</div>
</div>
</section>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Research</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
This project was brought to me by engineering leads from the HA team and DRS team.
They had been working on building a simulation engine that could run various server failure scenarios, but needed a UI and a clearly defined user workflow.
<br>
<br>
<a href="https://www.vmworld.com/en/index.html">VMworld</a>, VMware's yearly customer conference, was coming up and I wanted user feedback and insight. The simulator engine was still in progress, so I worked with the developers to define the output data, and built a quick prototype populated with fake data.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vmworld.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
We demoed prototype at HA-focused session.
Customer feedback confirmed that admins wanted to primarily ensure <strong>n+1</strong> redundancy. They also wanted to understand the impact of specific servers failing.
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Design</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
To be as agile as possible, we decided to create a cloud service to address this use case.
Users would upload their vSphere data and we would run the simulation for them.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Initial workflow diagram for the service.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/drsWorkflow.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
I used simple iconography on the landing page to explain the application.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/fling1.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Users upload their DRS file and select the type of simulation:
N+1 or specific servers.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/fling2.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
<br>
My primary challenge was to interpret and visualize the simulator data in a manner that was useful and actionable to admins.
I broke it down to three possible situations for each VM:
</div>
<div class="row">
<div class="eight columns offset-by-three explanation-text groundrules">
<ol>
<li>VM failed to restart (worst-case)</li>
<li>VM is running but now has less available resources</li>
<li>VM is running and no negative impact (best-case)</li>
</ol>
</div>
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
I wanted to highlight where VMs fell in these three "buckets". This is the results overview after a simulation:
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/fling3.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Users could drilldown into specific buckets, and see the precise performance impacts to each VM.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/fling4.jpg">
</div>
</div>
</div>
<section class="design-review1-excerpt">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two exercept">
One of the advantages of rapid prototyping is being able to show early and show often.
<br>
<br>
I would take my in-progress work to design reviews and get feedback on everything from margins to copy.
</div>
</div>
</div>
</section>
<section class="design-review2-excerpt">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two exercept">
I find brutal honesty to be the best policy.
</div>
</div>
</div>
</section>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Development</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
I built the web client in Angular and used Flask (python) for the server, which was responsible for taking user data and running the simulator.
<br>
<br>
The other engineers took care of the simulator engine and the underlying infrastructure hosting the application.
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Outcomes</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
The product was launched as a VMware <a href="https://labs.vmware.com/flings/vm-resource-and-availability-service">fling</a>, and was the first fling to be offered as a cloud service. <a href="http://hasimulator.vmware.com/html/index.html#/summary">Link to application</a>
<br>
<br>
Ultimately, this project validated our prototyping process. By working with engineering and PM stakeholders early on, I was able to deliver a product that addressed our users' pain points.
<br>
<br>
<br>
<br>
</div>
</div>
</div>
<section class="additional-projects">
<div class="container">
<div class="row">
<div class="twelve columns home">
<br>
<br>
<br>I
<a href="/index.html">home</a>
</div>
</div>
</div>
</section>
</body>
</html>