juju-gui

Merge lp:~makyo/juju-gui/replace-service-module into lp:juju-gui/experimental

  1. replace-service-module
  2. Merge into trunk
Proposed by Madison Scott-Clary on 2012-11-05
Status: Merged
Merged at revision: 236
Proposed branch: lp:~makyo/juju-gui/replace-service-module
Merge into: lp:juju-gui/experimental
Diff against target: 839 lines (+323/-261)
3 files modified
app/assets/svgs/service_health_mask.svg (+196/-128)
app/assets/svgs/service_module.svg (+124/-131)
app/views/environment.js (+3/-2)
To merge this branch: bzr merge lp:~makyo/juju-gui/replace-service-module
Reviewer Review Type Date Requested Status
Juju GUI Hackers 2012-11-05 Pending
Review via email: mp+132938@code.launchpad.net

Description of the Change

Lightweight assets/improve FF performance

Some lighter weight assets for service modules were implemented, via Matt C. Additionally, profiling showed that a lot of slowness for FireFox was caused by FF internals being slow (namely <node>.setAttribute() and <node>.getClientRects()). While we can't fix those being slow, we can reduce the number of times they're used. This is done by modifying attributes on only relevant relation lines when a service is dragged (rather than redrawing or modifying all lines). This results in fewer calls to both of those internals, and speeds up animation in FireFox.

https://codereview.appspot.com/6826057/

To post a comment you must log in.
Madison Scott-Clary (makyo) wrote :

Reviewers: mp+132938_code.launchpad.net,

Message:
Please take a look.

Description:
Implement lightweight service module assets.

https://code.launchpad.net/~makyo/juju-gui/replace-service-module/+merge/132938

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/6826057/

Affected files:
   A [revision details]
   M app/assets/svgs/service_health_mask.svg
   M app/assets/svgs/service_module.svg
   M app/views/environment.js

Gary Poster (gary) wrote :
Benjamin Saller (bcsaller) wrote :

The impl looks fine but having tested under FF the new asset doesn't
seem to perform any better. This is after manually doing make
appcache-force so I'm pretty sure its the current asset.

I'm not sure we should land this as it doesn't yield the benefit we
hoped for.

https://codereview.appspot.com/6826057/

Gary Poster (gary) wrote :

Rejected per offline discussion, driven by Ben's comment above.

Madison Scott-Clary (makyo) wrote :
Benjamin Saller (bcsaller) wrote :

This looks good to me, I had a suggestion to test below, but either way
on that one.

This doesn't fix the speed issues in FF for me, but it does improve the
situation.

Thanks.

https://codereview.appspot.com/6826057/diff/3001/app/views/environment.js
File app/views/environment.js (right):

https://codereview.appspot.com/6826057/diff/3001/app/views/environment.js#newcode528
app/views/environment.js:528:
I know we talked about adding a method like this, really happy to see
you added it, thanks.

https://codereview.appspot.com/6826057/diff/3001/app/views/environment.js#newcode645
app/views/environment.js:645: // .one('text').getClientRect() ||
{width: 0}).width + 10;
Can we specify it as d.display_name.length + 10 + 'em'? I didn't test
it, but em should be font size relative if it works.

https://codereview.appspot.com/6826057/

Gary Poster (gary) wrote :

This makes FF usable for me both on my relatively new desktop and my 3+
year old laptop. Amazing! Thank you.

I have a few trivial comments/suggestions/requests. Approved.

Gary

https://codereview.appspot.com/6826057/diff/3001/app/modules.js
File app/modules.js (right):

https://codereview.appspot.com/6826057/diff/3001/app/modules.js#newcode14
app/modules.js:14: 'fullpath': '/juju-ui/assets/javascripts/d3.v2.js'
I guess this is good for thiago's branch, which will be minifying
everything anyway, so that the debug story is nice. Is that why you did
it?

https://codereview.appspot.com/6826057/diff/3001/app/views/environment.js
File app/views/environment.js (right):

https://codereview.appspot.com/6826057/diff/3001/app/views/environment.js#newcode645
app/views/environment.js:645: // .one('text').getClientRect() ||
{width: 0}).width + 10;
I'm -1 on checking in commented-out code to trunk; if you add an
explanatory comment as to why you have left this in but commented out, I
might feel better about it. :-)

https://codereview.appspot.com/6826057/

Madison Scott-Clary (makyo) wrote :

Thanks

https://codereview.appspot.com/6826057/diff/3001/app/modules.js
File app/modules.js (right):

https://codereview.appspot.com/6826057/diff/3001/app/modules.js#newcode14
app/modules.js:14: 'fullpath': '/juju-ui/assets/javascripts/d3.v2.js'
Left over from profiling; back to minified.

On 2012/11/09 21:02:40, gary.poster wrote:
> I guess this is good for thiago's branch, which will be minifying
 everything
> anyway, so that the debug story is nice. Is that why you did it?

https://codereview.appspot.com/6826057/diff/3001/app/views/environment.js
File app/views/environment.js (right):

https://codereview.appspot.com/6826057/diff/3001/app/views/environment.js#newcode645
app/views/environment.js:645: // .one('text').getClientRect() ||
{width: 0}).width + 10;
Unfortunately not, as we use this attribute on line 649, expecting it to
be pixels, as we don't know how wide an em is.

On 2012/11/09 18:38:31, benjamin.saller wrote:
> Can we specify it as d.display_name.length + 10 + 'em'? I didn't test
 it, but em
> should be font size relative if it works.

https://codereview.appspot.com/6826057/diff/3001/app/views/environment.js#newcode645
app/views/environment.js:645: // .one('text').getClientRect() ||
{width: 0}).width + 10;
Ooops! Done!

On 2012/11/09 21:02:40, gary.poster wrote:
> I'm -1 on checking in commented-out code to trunk; if you add an
 explanatory
> comment as to why you have left this in but commented out, I might
 feel better
> about it. :-)

https://codereview.appspot.com/6826057/

Madison Scott-Clary (makyo) wrote :

*** Submitted:

Lightweight assets/improve FF performance

Some lighter weight assets for service modules were implemented, via
Matt C. Additionally, profiling showed that a lot of slowness for
FireFox was caused by FF internals being slow (namely
<node>.setAttribute() and <node>.getClientRects()). While we can't fix
those being slow, we can reduce the number of times they're used. This
is done by modifying attributes on only relevant relation lines when a
service is dragged (rather than redrawing or modifying all lines). This
results in fewer calls to both of those internals, and speeds up
animation in FireFox.

R=gary.poster, benjamin.saller
CC=
https://codereview.appspot.com/6826057

https://codereview.appspot.com/6826057/

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'app/assets/svgs/service_health_mask.svg'
2--- app/assets/svgs/service_health_mask.svg 2012-09-28 18:35:16 +0000
3+++ app/assets/svgs/service_health_mask.svg 2012-11-05 18:05:23 +0000
4@@ -20,11 +20,11 @@
5 enable-background="new 0 0 1024 768"
6 xml:space="preserve"
7 inkscape:version="0.48.3.1 r9886"
8- sodipodi:docname="service_module (old) (copy).svg"><metadata
9- id="metadata146"><rdf:RDF><cc:Work
10+ sodipodi:docname="service_module.svg"><metadata
11+ id="metadata161"><rdf:RDF><cc:Work
12 rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
13- rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
14- id="defs144" /><sodipodi:namedview
15+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
16+ id="defs159" /><sodipodi:namedview
17 pagecolor="#ffffff"
18 bordercolor="#666666"
19 borderopacity="1"
20@@ -33,163 +33,204 @@
21 guidetolerance="10"
22 inkscape:pageopacity="0"
23 inkscape:pageshadow="2"
24- inkscape:window-width="1280"
25- inkscape:window-height="776"
26- id="namedview142"
27+ inkscape:window-width="1920"
28+ inkscape:window-height="1056"
29+ id="namedview157"
30 showgrid="false"
31 fit-margin-top="0"
32 fit-margin-left="0"
33 fit-margin-right="0"
34 fit-margin-bottom="0"
35- inkscape:zoom="0.86915208"
36- inkscape:cx="-45.510376"
37- inkscape:cy="74.74296"
38+ inkscape:zoom="3.2261747"
39+ inkscape:cx="145.9031"
40+ inkscape:cy="-34.475"
41 inkscape:window-x="0"
42 inkscape:window-y="24"
43 inkscape:window-maximized="1"
44 inkscape:current-layer="Layer_1" />
45-<filter
46- height="1.3"
47- width="1.4"
48- id="AI_Shadow_2"
49- filterUnits="objectBoundingBox"
50- y="-0.15000001"
51- x="-0.30000001"
52- color-interpolation-filters="sRGB">
53- <feGaussianBlur
54- in="SourceAlpha"
55- stdDeviation="2"
56- result="blur"
57- id="feGaussianBlur4" />
58- <feOffset
59- dy="2"
60- dx="0"
61- in="blur"
62- result="offsetBlurredAlpha"
63- id="feOffset6" />
64- <feMerge
65- id="feMerge8">
66- <feMergeNode
67- in="offsetBlurredAlpha"
68- id="feMergeNode10" />
69- <feMergeNode
70- in="SourceGraphic"
71- id="feMergeNode12" />
72- </feMerge>
73-</filter>
74-<filter
75- id="AI_GaussianBlur_4"
76- color-interpolation-filters="sRGB">
77- <feGaussianBlur
78- stdDeviation="1"
79- id="feGaussianBlur15" />
80-</filter>
81-
82-
83-
84-
85-<g
86- id="g80"
87+<radialGradient
88+ id="SVGID_1_"
89+ cx="508.89401"
90+ cy="437.168"
91+ r="53.999901"
92+ gradientTransform="matrix(-4.289835e-8,1.2229,-3.21,-1.748421e-7,1915.4478,-177.2829)"
93+ gradientUnits="userSpaceOnUse">
94+ <stop
95+ offset="0"
96+ style="stop-color:#333333"
97+ id="stop4" />
98+ <stop
99+ offset="0.1555"
100+ style="stop-color:#373737;stop-opacity:0.8445"
101+ id="stop6" />
102+ <stop
103+ offset="0.2968"
104+ style="stop-color:#424242;stop-opacity:0.7032"
105+ id="stop8" />
106+ <stop
107+ offset="0.4326"
108+ style="stop-color:#545454;stop-opacity:0.5674"
109+ id="stop10" />
110+ <stop
111+ offset="0.5651"
112+ style="stop-color:#6E6E6E;stop-opacity:0.4349"
113+ id="stop12" />
114+ <stop
115+ offset="0.6952"
116+ style="stop-color:#909090;stop-opacity:0.3048"
117+ id="stop14" />
118+ <stop
119+ offset="0.8235"
120+ style="stop-color:#B9B9B9;stop-opacity:0.1765"
121+ id="stop16" />
122+ <stop
123+ offset="0.948"
124+ style="stop-color:#E9E9E9;stop-opacity:0.052"
125+ id="stop18" />
126+ <stop
127+ offset="1"
128+ style="stop-color:#FFFFFF;stop-opacity:0"
129+ id="stop20" />
130+</radialGradient>
131+
132+<g
133+ id="Layer_3"
134+ transform="translate(-460.05,-316)">
135+</g>
136+
137+
138+
139+
140+<g
141+ id="g70"
142 style="opacity:0.45"
143 transform="translate(-460.05,-316)">
144- <linearGradient
145+
146+ <linearGradient
147 id="SVGID_5_"
148 gradientUnits="userSpaceOnUse"
149- x1="511.54929"
150- y1="316"
151- x2="511.54929"
152- y2="419.00049">
153+ x1="292.55029"
154+ y1="555.5"
155+ x2="292.55029"
156+ y2="452.5"
157+ gradientTransform="matrix(1,0,0,-1,219,871.5)">
158 <stop
159 offset="0"
160 style="stop-color:#FFFFFF;stop-opacity:0"
161- id="stop83" />
162+ id="stop73" />
163 <stop
164 offset="1"
165 style="stop-color:#FFFFFF"
166- id="stop85" />
167+ id="stop75" />
168 </linearGradient>
169 <path
170- d="m 511.55,317 c 27.891,0 50.5,22.609 50.5,50.5 0,27.891 -22.61,50.5 -50.5,50.5 -27.89,0 -50.5,-22.609 -50.5,-50.5 0,-27.891 22.609,-50.5 50.5,-50.5 m 0,-1 c -28.397,0 -51.5,23.103 -51.5,51.5 0,28.397 23.103,51.5 51.5,51.5 28.397,0 51.5,-23.103 51.5,-51.5 0,-28.397 -23.103,-51.5 -51.5,-51.5 l 0,0 z"
171- id="path87"
172+ d="m 511.55,317 c 27.892,0 50.5,22.609 50.5,50.5 0,27.891 -22.61,50.5 -50.5,50.5 -27.89,0 -50.5,-22.609 -50.5,-50.5 0,-27.891 22.609,-50.5 50.5,-50.5 m 0,-1 c -28.396,0 -51.5,23.103 -51.5,51.5 0,28.397 23.104,51.5 51.5,51.5 28.397,0 51.5,-23.103 51.5,-51.5 0,-28.397 -23.103,-51.5 -51.5,-51.5 l 0,0 z"
173+ id="path77"
174 inkscape:connector-curvature="0"
175 style="fill:url(#SVGID_5_)" />
176 </g>
177
178 <g
179- id="g103"
180- style="opacity:0.95;filter:url(#AI_GaussianBlur_4)"
181+ id="g98"
182+ style="opacity:0.25"
183 transform="translate(-460.05,-316)">
184- <circle
185+ <g
186+ id="g100">
187+ <circle
188 cx="511.54999"
189 cy="368.49799"
190 r="25"
191- id="circle105"
192+ id="circle102"
193 sodipodi:cx="511.54999"
194 sodipodi:cy="368.49799"
195 sodipodi:rx="25"
196 sodipodi:ry="25"
197 d="m 536.54999,368.49799 c 0,13.80711 -11.19288,25 -25,25 -13.80712,0 -25,-11.19289 -25,-25 0,-13.80712 11.19288,-25 25,-25 13.80712,0 25,11.19288 25,25 z" />
198+ </g>
199+</g>
200+<g
201+ id="g104"
202+ style="opacity:0.45"
203+ transform="translate(-460.05,-316)">
204+ <g
205+ id="g106">
206+ <circle
207+ cx="511.54999"
208+ cy="367.599"
209+ r="25.002001"
210+ id="circle108"
211+ sodipodi:cx="511.54999"
212+ sodipodi:cy="367.599"
213+ sodipodi:rx="25.002001"
214+ sodipodi:ry="25.002001"
215+ d="m 536.55199,367.599 c 0,13.80822 -11.19378,25.002 -25.002,25.002 -13.80823,0 -25.002,-11.19378 -25.002,-25.002 0,-13.80822 11.19377,-25.002 25.002,-25.002 13.80822,0 25.002,11.19378 25.002,25.002 z" />
216+ </g>
217 </g>
218 <linearGradient
219- id="SVGID_6_"
220+ id="SVGID_7_"
221 gradientUnits="userSpaceOnUse"
222- x1="507.60641"
223- y1="388.75201"
224- x2="516.93939"
225- y2="336.0856">
226+ x1="288.6055"
227+ y1="482.74899"
228+ x2="297.93829"
229+ y2="535.41443"
230+ gradientTransform="matrix(1,0,0,-1,219,871.5)">
231 <stop
232 offset="0"
233 style="stop-color:#CCCCCC"
234- id="stop108" />
235+ id="stop111" />
236 <stop
237 offset="1"
238 style="stop-color:#FBFBFB"
239- id="stop110" />
240+ id="stop113" />
241 </linearGradient>
242 <circle
243 cx="511.54999"
244 cy="366.49799"
245 r="25"
246- id="circle112"
247+ id="circle115"
248 sodipodi:cx="511.54999"
249 sodipodi:cy="366.49799"
250 sodipodi:rx="25"
251 sodipodi:ry="25"
252- style="fill:url(#SVGID_6_)"
253+ style="fill:url(#SVGID_7_)"
254 transform="translate(-460.05,-316)" />
255 <g
256- id="g114"
257+ id="g117"
258 style="opacity:0.8"
259 transform="translate(-460.05,-316)">
260- <linearGradient
261- id="SVGID_7_"
262- gradientUnits="userSpaceOnUse"
263- x1="511.55029"
264- y1="391.49799"
265- x2="511.55029"
266- y2="341.4985">
267- <stop
268- offset="0"
269- style="stop-color:#FFFFFF;stop-opacity:0"
270- id="stop117" />
271- <stop
272- offset="1"
273- style="stop-color:#FFFFFF"
274- id="stop119" />
275- </linearGradient>
276- <path
277- d="m 511.55,342.498 c 13.233,0 24,10.767 24,24 0,13.233 -10.767,24 -24,24 -13.233,0 -24,-10.767 -24,-24 0,-13.233 10.766,-24 24,-24 m 0,-1 c -13.808,0 -25,11.193 -25,25 0,13.808 11.192,25 25,25 13.808,0 25,-11.192 25,-25 0,-13.807 -11.193,-25 -25,-25 l 0,0 z"
278- id="path121"
279- inkscape:connector-curvature="0"
280- style="fill:url(#SVGID_7_)" />
281-</g>
282-<g
283- id="g123"
284- transform="translate(-460.05,-316)">
285- <defs
286- id="defs125">
287- <circle
288+
289+ <linearGradient
290 id="SVGID_8_"
291+ gradientUnits="userSpaceOnUse"
292+ x1="292.54929"
293+ y1="480.00201"
294+ x2="292.54929"
295+ y2="530.00201"
296+ gradientTransform="matrix(1,0,0,-1,219,871.5)">
297+ <stop
298+ offset="0"
299+ style="stop-color:#FFFFFF;stop-opacity:0"
300+ id="stop120" />
301+ <stop
302+ offset="1"
303+ style="stop-color:#FFFFFF"
304+ id="stop122" />
305+ </linearGradient>
306+ <path
307+ d="m 511.55,342.498 c 13.233,0 24,10.767 24,24 0,13.233 -10.767,24 -24,24 -13.232,0 -24,-10.767 -24,-24 0,-13.233 10.766,-24 24,-24 m 0,-1 c -13.808,0 -25,11.193 -25,25 0,13.808 11.192,25 25,25 13.809,0 25,-11.192 25,-25 0,-13.807 -11.193,-25 -25,-25 l 0,0 z"
308+ id="path124"
309+ inkscape:connector-curvature="0"
310+ style="fill:url(#SVGID_8_)" />
311+</g>
312+<g
313+ id="g126"
314+ transform="translate(-460.05,-316)">
315+ <g
316+ id="g128">
317+ <defs
318+ id="defs130">
319+ <circle
320+ id="SVGID_9_"
321 cx="511.54999"
322 cy="367.5"
323 r="50.5"
324@@ -197,50 +238,77 @@
325 sodipodi:cy="367.5"
326 sodipodi:rx="50.5"
327 sodipodi:ry="50.5" />
328- </defs>
329- <clipPath
330- id="SVGID_9_">
331- <use
332- xlink:href="#SVGID_8_"
333+ </defs>
334+ <clipPath
335+ id="SVGID_10_">
336+ <use
337+ xlink:href="#SVGID_9_"
338 overflow="visible"
339- id="use129"
340+ id="use134"
341 style="overflow:visible"
342 x="0"
343 y="0"
344 width="1024"
345 height="768" />
346- </clipPath>
347- <path
348- clip-path="url(#SVGID_9_)"
349- d="m 430.8,285 v 162 h 162 V 285 h -162 z m 81,134.316 c -28.598,0 -51.779,-23.184 -51.779,-51.777 0,-28.598 23.182,-51.781 51.779,-51.781 28.597,0 51.777,23.184 51.777,51.781 0,28.594 -23.18,51.777 -51.777,51.777 z"
350- id="path131"
351+ </clipPath>
352+ <path
353+ clip-path="url(#SVGID_10_)"
354+ d="m 430.8,285 v 162 h 162 V 285 h -162 z m 81,134.316 c -28.598,0 -51.778,-23.185 -51.778,-51.777 0,-28.598 23.182,-51.781 51.778,-51.781 28.596,0 51.777,23.185 51.777,51.781 0,28.594 -23.181,51.777 -51.777,51.777 z"
355+ id="path136"
356 inkscape:connector-curvature="0"
357- style="fill:#39b54a;filter:url(#AI_Shadow_2)" />
358+ style="fill:#39b54a" />
359+ </g>
360 </g>
361 <g
362- id="g133"
363+ id="g138"
364 style="opacity:0.7"
365 transform="translate(-460.05,-316)">
366- <linearGradient
367- id="SVGID_10_"
368+
369+ <linearGradient
370+ id="SVGID_11_"
371 gradientUnits="userSpaceOnUse"
372- x1="511.54929"
373- y1="316"
374- x2="511.54929"
375- y2="419.00049">
376+ x1="292.55029"
377+ y1="555.5"
378+ x2="292.55029"
379+ y2="452.5"
380+ gradientTransform="matrix(1,0,0,-1,219,871.5)">
381 <stop
382 offset="0"
383 style="stop-color:#FFFFFF;stop-opacity:0"
384- id="stop136" />
385+ id="stop141" />
386 <stop
387 offset="1"
388 style="stop-color:#FFFFFF"
389- id="stop138" />
390+ id="stop143" />
391 </linearGradient>
392 <path
393- d="m 511.55,317 c 27.891,0 50.5,22.609 50.5,50.5 0,27.891 -22.61,50.5 -50.5,50.5 -27.89,0 -50.5,-22.609 -50.5,-50.5 0,-27.891 22.609,-50.5 50.5,-50.5 m 0,-1 c -28.397,0 -51.5,23.103 -51.5,51.5 0,28.397 23.103,51.5 51.5,51.5 28.397,0 51.5,-23.103 51.5,-51.5 0,-28.397 -23.103,-51.5 -51.5,-51.5 l 0,0 z"
394- id="path140"
395- inkscape:connector-curvature="0"
396- style="fill:url(#SVGID_10_)" />
397+ d="m 511.55,317 c 27.892,0 50.5,22.609 50.5,50.5 0,27.891 -22.61,50.5 -50.5,50.5 -27.89,0 -50.5,-22.609 -50.5,-50.5 0,-27.891 22.609,-50.5 50.5,-50.5 m 0,-1 c -28.396,0 -51.5,23.103 -51.5,51.5 0,28.397 23.104,51.5 51.5,51.5 28.397,0 51.5,-23.103 51.5,-51.5 0,-28.397 -23.103,-51.5 -51.5,-51.5 l 0,0 z"
398+ id="path145"
399+ inkscape:connector-curvature="0"
400+ style="fill:url(#SVGID_11_)" />
401+</g>
402+<g
403+ id="g147"
404+ transform="translate(-460.05,-316)">
405+ <path
406+ d="m 512.101,316.959 c -27.891,0 -50.5,22.609 -50.5,50.5 0,27.048 21.273,49.13 48.004,50.433 -25.626,-1.301 -46.004,-22.49 -46.004,-48.433 0,-26.786 21.714,-48.5 48.5,-48.5 26.786,0 48.5,21.715 48.5,48.5 0,25.943 -20.378,47.132 -46.004,48.433 26.73,-1.303 48.004,-23.385 48.004,-50.433 0,-27.891 -22.61,-50.5 -50.5,-50.5 z"
407+ id="path149"
408+ inkscape:connector-curvature="0"
409+ style="opacity:0.1;fill:#666666" />
410+ <path
411+ d="m 512.101,316.959 c -27.891,0 -50.5,22.609 -50.5,50.5 0,27.041 21.26,49.117 47.979,50.431 -25.891,-1.312 -46.479,-22.721 -46.479,-48.931 0,-27.062 21.938,-49 49,-49 27.062,0 49,21.938 49,49 0,26.21 -20.588,47.619 -46.479,48.931 26.719,-1.314 47.979,-23.391 47.979,-50.431 0,-27.891 -22.61,-50.5 -50.5,-50.5 z"
412+ id="path151"
413+ inkscape:connector-curvature="0"
414+ style="opacity:0.2;fill:#666666" />
415+ <path
416+ d="m 512.101,316.959 c -27.891,0 -50.5,22.609 -50.5,50.5 0,27.031 21.246,49.103 47.951,50.431 -26.153,-1.326 -46.951,-22.953 -46.951,-49.431 0,-27.338 22.162,-49.5 49.5,-49.5 27.337,0 49.5,22.162 49.5,49.5 0,26.478 -20.798,48.105 -46.952,49.431 26.706,-1.328 47.952,-23.4 47.952,-50.431 0,-27.891 -22.61,-50.5 -50.5,-50.5 z"
417+ id="path153"
418+ inkscape:connector-curvature="0"
419+ style="opacity:0.3;fill:#666666" />
420+ <path
421+ d="m 512.101,316.959 c -27.891,0 -50.5,22.609 -50.5,50.5 0,27.023 21.232,49.089 47.927,50.431 -26.419,-1.34 -47.427,-23.186 -47.427,-49.931 0,-27.615 22.385,-50 50,-50 27.614,0 50,22.386 50,50 0,26.746 -21.008,48.591 -47.427,49.931 26.694,-1.342 47.927,-23.408 47.927,-50.431 0,-27.891 -22.61,-50.5 -50.5,-50.5 z"
422+ id="path155"
423+ inkscape:connector-curvature="0"
424+ style="opacity:0.7;fill:#666666" />
425 </g>
426 </svg>
427\ No newline at end of file
428
429=== modified file 'app/assets/svgs/service_module.svg'
430--- app/assets/svgs/service_module.svg 2012-09-28 18:34:26 +0000
431+++ app/assets/svgs/service_module.svg 2012-11-05 18:05:23 +0000
432@@ -7,23 +7,32 @@
433 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
434 xmlns:svg="http://www.w3.org/2000/svg"
435 xmlns="http://www.w3.org/2000/svg"
436+ xmlns:xlink="http://www.w3.org/1999/xlink"
437 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
438 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
439 version="1.1"
440 id="Layer_1"
441 x="0px"
442 y="0px"
443- width="264"
444- height="269.793"
445- viewBox="0 0 264 269.793"
446+ width="223.959"
447+ height="266.793"
448+ viewBox="0 0 223.959 266.793"
449 enable-background="new 0 0 1024 768"
450 xml:space="preserve"
451 inkscape:version="0.48.3.1 r9886"
452 sodipodi:docname="service_module.svg"><metadata
453- id="metadata146"><rdf:RDF><cc:Work
454+ id="metadata161"><rdf:RDF><cc:Work
455 rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
456 rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
457- id="defs144" /><sodipodi:namedview
458+ id="defs159"><linearGradient
459+ inkscape:collect="always"
460+ xlink:href="#SVGID_6_"
461+ id="linearGradient3138"
462+ gradientUnits="userSpaceOnUse"
463+ x1="520.81049"
464+ y1="297.52341"
465+ x2="501.4765"
466+ y2="447.52341" /></defs><sodipodi:namedview
467 pagecolor="#ffffff"
468 bordercolor="#666666"
469 borderopacity="1"
470@@ -32,239 +41,223 @@
471 guidetolerance="10"
472 inkscape:pageopacity="0"
473 inkscape:pageshadow="2"
474- inkscape:window-width="1280"
475- inkscape:window-height="776"
476- id="namedview142"
477+ inkscape:window-width="1920"
478+ inkscape:window-height="1056"
479+ id="namedview157"
480 showgrid="false"
481 fit-margin-top="0"
482 fit-margin-left="0"
483 fit-margin-right="0"
484 fit-margin-bottom="0"
485- inkscape:zoom="0.86915208"
486- inkscape:cx="33.989624"
487- inkscape:cy="176.74296"
488+ inkscape:zoom="1.140625"
489+ inkscape:cx="-215.64649"
490+ inkscape:cy="282.86481"
491 inkscape:window-x="0"
492 inkscape:window-y="24"
493 inkscape:window-maximized="1"
494 inkscape:current-layer="Layer_1" />
495-<filter
496- height="1.3"
497- width="1.4"
498- id="AI_Shadow_2"
499- filterUnits="objectBoundingBox"
500- y="-0.15000001"
501- x="-0.30000001"
502- color-interpolation-filters="sRGB">
503- <feGaussianBlur
504- in="SourceAlpha"
505- stdDeviation="2"
506- result="blur"
507- id="feGaussianBlur4" />
508- <feOffset
509- dy="2"
510- dx="0"
511- in="blur"
512- result="offsetBlurredAlpha"
513- id="feOffset6" />
514- <feMerge
515- id="feMerge8">
516- <feMergeNode
517- in="offsetBlurredAlpha"
518- id="feMergeNode10" />
519- <feMergeNode
520- in="SourceGraphic"
521- id="feMergeNode12" />
522- </feMerge>
523-</filter>
524-<filter
525- id="AI_GaussianBlur_4"
526- color-interpolation-filters="sRGB">
527- <feGaussianBlur
528- stdDeviation="1"
529- id="feGaussianBlur15" />
530-</filter>
531-
532-<g
533- id="g18"
534- transform="translate(-380.55,-251.207)">
535-
536- <radialGradient
537+<radialGradient
538 id="SVGID_1_"
539- cx="509.90381"
540- cy="439.71289"
541+ cx="508.89401"
542+ cy="437.168"
543 r="53.999901"
544- gradientTransform="matrix(-4.289835e-8,1.2229,-3.21,-1.748421e-7,1924.6176,-175.5171)"
545+ gradientTransform="matrix(-4.289835e-8,1.2229,-3.21,-1.748421e-7,1915.4478,-177.2829)"
546 gradientUnits="userSpaceOnUse">
547- <stop
548+ <stop
549 offset="0"
550 style="stop-color:#333333"
551- id="stop21" />
552- <stop
553+ id="stop4" />
554+ <stop
555 offset="0.1555"
556 style="stop-color:#373737;stop-opacity:0.8445"
557- id="stop23" />
558- <stop
559+ id="stop6" />
560+ <stop
561 offset="0.2968"
562 style="stop-color:#424242;stop-opacity:0.7032"
563- id="stop25" />
564- <stop
565+ id="stop8" />
566+ <stop
567 offset="0.4326"
568 style="stop-color:#545454;stop-opacity:0.5674"
569- id="stop27" />
570- <stop
571+ id="stop10" />
572+ <stop
573 offset="0.5651"
574 style="stop-color:#6E6E6E;stop-opacity:0.4349"
575- id="stop29" />
576- <stop
577+ id="stop12" />
578+ <stop
579 offset="0.6952"
580 style="stop-color:#909090;stop-opacity:0.3048"
581- id="stop31" />
582- <stop
583+ id="stop14" />
584+ <stop
585 offset="0.8235"
586 style="stop-color:#B9B9B9;stop-opacity:0.1765"
587- id="stop33" />
588- <stop
589+ id="stop16" />
590+ <stop
591 offset="0.948"
592 style="stop-color:#E9E9E9;stop-opacity:0.052"
593- id="stop35" />
594- <stop
595+ id="stop18" />
596+ <stop
597 offset="1"
598 style="stop-color:#FFFFFF;stop-opacity:0"
599- id="stop37" />
600- </radialGradient>
601- <ellipse
602- cx="512.54999"
603- cy="444.19901"
604+ id="stop20" />
605+</radialGradient>
606+<ellipse
607+ cx="511.54999"
608+ cy="441.19901"
609 rx="110.5"
610 ry="76.801003"
611- id="ellipse39"
612- sodipodi:cx="512.54999"
613- sodipodi:cy="444.19901"
614+ id="ellipse22"
615+ sodipodi:cx="511.54999"
616+ sodipodi:cy="441.19901"
617 sodipodi:rx="110.5"
618 sodipodi:ry="76.801003"
619 style="opacity:0.4;fill:url(#SVGID_1_)"
620- d="m 623.04999,444.19901 c 0,42.41602 -49.47254,76.801 -110.5,76.801 -61.02747,0 -110.5,-34.38498 -110.5,-76.801 0,-42.41603 49.47253,-76.80101 110.5,-76.80101 61.02746,0 110.5,34.38498 110.5,76.80101 z" />
621- <path
622- d="m 622.55,403.509 c 0,73.333 0,73.333 -73.333,73.333 h -73.333 c -73.334,0 -73.334,0 -73.334,-73.333 h 220 z"
623- id="path41"
624- inkscape:connector-curvature="0"
625- style="filter:url(#AI_GaussianBlur_4)" />
626-</g>
627-<g
628- id="g43"
629- transform="translate(-380.55,-251.207)">
630- <linearGradient
631+ transform="translate(-399.571,-251.207)" />
632+<g
633+ id="Layer_3"
634+ transform="translate(-399.571,-251.207)">
635+</g>
636+<g
637+ id="g25"
638+ style="opacity:0.15"
639+ transform="translate(-399.571,-251.207)">
640+ <path
641+ d="m 622.001,404.501 c 0,73.333 0,73.333 -73.333,73.333 h -73.333 c -73.334,0 -73.334,0 -73.334,-73.333 h 220 z"
642+ id="path27"
643+ inkscape:connector-curvature="0" />
644+</g>
645+<g
646+ id="g29"
647+ style="opacity:0.75"
648+ transform="translate(-399.571,-251.207)">
649+ <path
650+ d="m 622.001,402.997 c 0,73.333 0,73.333 -73.333,73.333 h -73.333 c -73.334,0 -73.334,0 -73.334,-73.333 h 220 z"
651+ id="path31"
652+ inkscape:connector-curvature="0" />
653+</g>
654+<g
655+ id="g33"
656+ transform="translate(-399.571,-251.207)">
657+
658+ <linearGradient
659 id="SVGID_2_"
660 gradientUnits="userSpaceOnUse"
661- x1="511.55029"
662- y1="474.16599"
663- x2="511.55029"
664- y2="252.207">
665+ x1="292.55029"
666+ y1="397.33401"
667+ x2="292.55029"
668+ y2="619.29303"
669+ gradientTransform="matrix(1,0,0,-1,219,871.5)">
670 <stop
671 offset="0"
672 style="stop-color:#B1AFAF"
673- id="stop46" />
674+ id="stop36" />
675 <stop
676 offset="0.2548"
677 style="stop-color:#CECDCD"
678- id="stop48" />
679+ id="stop38" />
680 <stop
681 offset="0.5435"
682 style="stop-color:#E8E7E7"
683- id="stop50" />
684+ id="stop40" />
685 <stop
686 offset="0.8011"
687 style="stop-color:#F8F7F7"
688- id="stop52" />
689+ id="stop42" />
690 <stop
691 offset="1"
692 style="stop-color:#FEFDFD"
693- id="stop54" />
694+ id="stop44" />
695 </linearGradient>
696 <path
697- d="m 474.557,252.207 h 73.987 c 73.986,0 73.986,0 73.986,73.986 v 73.987 c 0,73.986 0,73.986 -73.986,73.986 h -73.987 c -73.986,0 -73.986,0 -73.986,-73.986 v -73.987 c -0.001,-73.986 -0.001,-73.986 73.986,-73.986 l 0,0 z"
698- id="path56"
699+ d="m 474.557,252.207 h 73.987 c 73.986,0 73.986,0 73.986,73.986 v 73.986 c 0,73.986 0,73.986 -73.986,73.986 h -73.987 c -73.985,0 -73.985,0 -73.985,-73.986 v -73.986 c -0.002,-73.986 -0.002,-73.986 73.985,-73.986 l 0,0 z"
700+ id="path46"
701 inkscape:connector-curvature="0"
702 style="fill:url(#SVGID_2_)" />
703- <linearGradient
704+
705+ <linearGradient
706 id="SVGID_3_"
707 gradientUnits="userSpaceOnUse"
708- x1="511.55029"
709- y1="475.16599"
710- x2="511.55029"
711- y2="251.207">
712+ x1="292.55029"
713+ y1="396.33401"
714+ x2="292.55029"
715+ y2="620.29303"
716+ gradientTransform="matrix(1,0,0,-1,219,871.5)">
717 <stop
718 offset="0"
719 style="stop-color:#6E6E6E"
720- id="stop59" />
721+ id="stop49" />
722 <stop
723 offset="0.1487"
724 style="stop-color:#797979"
725- id="stop61" />
726+ id="stop51" />
727 <stop
728 offset="0.4092"
729 style="stop-color:#969696"
730- id="stop63" />
731+ id="stop53" />
732 <stop
733 offset="0.7481"
734 style="stop-color:#C5C5C5"
735- id="stop65" />
736+ id="stop55" />
737 <stop
738 offset="1"
739 style="stop-color:#ECECEC"
740- id="stop67" />
741+ id="stop57" />
742 </linearGradient>
743 <path
744- d="m 548.544,252.207 c 73.986,0 73.986,0 73.986,73.986 v 73.987 c 0,73.986 0,73.986 -73.986,73.986 h -73.987 c -73.986,0 -73.986,0 -73.986,-73.986 v -73.987 c 0,-73.986 0,-73.986 73.986,-73.986 h 73.987 m 0,-1 h -73.987 c -37.221,0 -55.904,0 -65.445,9.541 -9.541,9.542 -9.541,28.224 -9.541,65.445 v 73.987 c 0,37.221 0,55.904 9.541,65.445 9.542,9.541 28.224,9.541 65.445,9.541 h 73.987 c 37.222,0 55.904,0 65.445,-9.541 9.541,-9.541 9.541,-28.225 9.541,-65.445 v -73.987 c 0,-37.221 0,-55.904 -9.541,-65.445 -9.541,-9.541 -28.223,-9.541 -65.445,-9.541 l 0,0 z"
745- id="path69"
746+ d="m 548.544,252.207 c 73.986,0 73.986,0 73.986,73.986 v 73.986 c 0,73.986 0,73.986 -73.986,73.986 h -73.987 c -73.985,0 -73.985,0 -73.985,-73.986 v -73.986 c 0,-73.986 0,-73.986 73.985,-73.986 h 73.987 m 0,-1 h -73.987 c -37.221,0 -55.904,0 -65.445,9.541 -9.541,9.542 -9.541,28.224 -9.541,65.445 v 73.986 c 0,37.222 0,55.904 9.541,65.445 9.542,9.541 28.224,9.541 65.445,9.541 h 73.987 c 37.222,0 55.904,0 65.445,-9.541 9.541,-9.541 9.541,-28.225 9.541,-65.445 v -73.986 c 0,-37.221 0,-55.904 -9.541,-65.445 -9.541,-9.541 -28.223,-9.541 -65.445,-9.541 l 0,0 z"
747+ id="path59"
748 inkscape:connector-curvature="0"
749 style="fill:url(#SVGID_3_)" />
750 </g>
751 <g
752- id="g71"
753- transform="translate(-380.55,-251.207)">
754- <radialGradient
755+ id="g61"
756+ transform="translate(-399.571,-251.207)">
757+
758+ <radialGradient
759 id="SVGID_4_"
760- cx="516.78418"
761- cy="241.4556"
762+ cx="297.78421"
763+ cy="630.04388"
764 r="192.70979"
765+ gradientTransform="matrix(1,0,0,-1,219,871.5)"
766 gradientUnits="userSpaceOnUse">
767 <stop
768 offset="0"
769 style="stop-color:#FBFBFB"
770- id="stop74" />
771+ id="stop64" />
772 <stop
773 offset="1"
774 style="stop-color:#E0E0E0"
775- id="stop76" />
776+ id="stop66" />
777 </radialGradient>
778 <path
779- d="m 474.557,470 c -34.445,0 -53.204,0.083 -60.988,-7.701 -7.783,-7.783 -7.568,-26.675 -7.568,-61.119 v -73.986 c 0,-34.444 -0.215,-53.522 7.568,-61.306 7.784,-7.784 26.543,-7.888 60.988,-7.888 h 73.986 c 34.444,0 53.654,0.104 61.438,7.888 7.784,7.783 8.02,26.861 8.02,61.306 v 73.986 c 0,34.444 -0.235,53.336 -8.02,61.119 -7.783,7.784 -26.993,7.701 -61.438,7.701 h -73.986 z"
780- id="path78"
781+ d="m 474.557,470 c -34.444,0 -53.203,0.083 -60.988,-7.701 -7.783,-7.783 -7.568,-26.675 -7.568,-61.119 v -73.985 c 0,-34.444 -0.215,-53.522 7.568,-61.306 7.785,-7.784 26.543,-7.888 60.988,-7.888 h 73.986 c 34.444,0 53.654,0.104 61.438,7.888 7.783,7.783 8.02,26.861 8.02,61.306 v 73.985 c 0,34.444 -0.235,53.336 -8.02,61.119 -7.783,7.784 -26.993,7.701 -61.438,7.701 h -73.986 z"
782+ id="path68"
783 inkscape:connector-curvature="0"
784 style="fill:url(#SVGID_4_)" />
785 </g>
786
787
788
789+
790 <linearGradient
791- id="SVGID_6_"
792+ id="SVGID_7_"
793 gradientUnits="userSpaceOnUse"
794- x1="507.60641"
795- y1="388.75201"
796- x2="516.93939"
797- y2="336.0856">
798+ x1="288.6055"
799+ y1="482.74899"
800+ x2="297.93829"
801+ y2="535.41443"
802+ gradientTransform="matrix(1,0,0,-1,219,871.5)">
803 <stop
804 offset="0"
805 style="stop-color:#CCCCCC"
806- id="stop108" />
807+ id="stop111" />
808 <stop
809 offset="1"
810 style="stop-color:#FBFBFB"
811- id="stop110" />
812+ id="stop113" />
813 </linearGradient>
814
815
816
817
818+
819 </svg>
820\ No newline at end of file
821
822=== modified file 'app/views/environment.js'
823--- app/views/environment.js 2012-11-01 13:21:53 +0000
824+++ app/views/environment.js 2012-11-05 18:05:23 +0000
825@@ -787,11 +787,12 @@
826 var status_chart_arc = d3.svg.arc()
827 .innerRadius(0)
828 .outerRadius(function(d) {
829- // Make sure it's exactly as wide as the mask
830+ // Make sure it's exactly as wide as the mask with a bit
831+ // of leeway for the border.
832 return parseInt(
833 d3.select(this.parentNode)
834 .select('image')
835- .attr('width'), 10) / 2;
836+ .attr('width'), 10) / 2.05;
837 });
838
839 var status_chart_layout = d3.layout.pie()

Subscribers

People subscribed via source and target branches