<div dir="ltr">Hi Ed,<div><br></div><div>Indeed, buildbot nine has a much more modular UI. It is now possible to customize the UI and add new dashboards without forking buildbot.</div><div>Is it easier to modify the UI when you have no webapp experience? I have to admit this is unfortunately not the case.</div><div><br></div><div>You will indeed have to learn the web frontend technologies, especially angularJS</div><div><a href="https://docs.angularjs.org/tutorial/step_00">https://docs.angularjs.org/tutorial/step_00</a><br></div><div><br></div><div>You will also have a little bit of frustration in the beginning, as the frontend tools have a lot of traps, with indeed silent/weird errors.</div><div><br></div><div>In the end, when you have done this ramp-up, you will be eventually very productive, It is amazing how you can be productive with angularjs and frontend development.</div><div><br></div><div>As er the documentation, there are several topic about the web UI:</div><div><a href="http://docs.buildbot.net/latest/developer/www-data-module.html">http://docs.buildbot.net/latest/developer/www-data-module.html</a><br></div><div><a href="http://docs.buildbot.net/latest/developer/www-base-app.html">http://docs.buildbot.net/latest/developer/www-base-app.html</a><br></div><div>a hacking quick start to help yuou started:</div><div><a href="http://docs.buildbot.net/latest/developer/www-base-app.html#hacking-quick-start">http://docs.buildbot.net/latest/developer/www-base-app.html#hacking-quick-start</a><br></div><div><br></div><div>There is no step by step tutorial on how to create a UI plugin, despite the fact that I think this could be indeed very useful.</div><div><br></div><div>I would be very interested in knowing what you guys need in term of custom UI.</div><div>This will help me to maybe provide better framework</div><div><br></div><div>Pierre</div></div><br><div class="gmail_quote"><div dir="ltr">Le mar. 22 mars 2016 à 19:59, Greg MacDonald <<a href="mailto:gmacdonald@trionworlds.com">gmacdonald@trionworlds.com</a>> a écrit :<br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div lang="EN-US" link="#0563C1" vlink="#954F72">
<div>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1f497d">Hi Ed,<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1f497d"><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1f497d">I’m in a similar situation with work wanting to customize the UI and me not having much angular or javascript experience. My first idea was also to create a completely
separate web. I made some progress querying the rest api but I started having issues. Then Pierre suggested I work within the given framework to take advantage of things like caching. So that’s what I’ve been doing since.<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1f497d"><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1f497d">In case you go down a similar route, I had a few issues:<u></u><u></u></span></p>
<p><u></u><span style="font-size:11.0pt;font-family:Symbol;color:#1f497d"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1f497d">It’s difficult to setup a dev environment in windows. I had to use Ubuntu 14 (not 15) on a virtual box. (Fortunately the ability to pull data from an
external server using the proxy gulp options works great.) <u></u><u></u></span></p>
<p><u></u><span style="font-size:11.0pt;font-family:Symbol;color:#1f497d"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1f497d">If you just need formatting changes you can edit the html templates for the stock pages.<u></u><u></u></span></p>
<p><u></u><span style="font-size:11.0pt;font-family:Symbol;color:#1f497d"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1f497d">Creating a new plugin using the existing ones as templates is tricky. A typo can lead to silent failures starting up the server, but there’s a different
way to run it through twisted which Pierre mentioned on the mailing list. (subject was “web ui dev env setup”)<u></u><u></u></span></p>
<p><u></u><span style="font-size:11.0pt;font-family:Symbol;color:#1f497d"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1f497d">You have to “compile” your work first before it can be picked up by gulp. Look for “pip install –e” in the makefile for an example.<u></u><u></u></span></p>
<p><u></u><span style="font-size:11.0pt;font-family:Symbol;color:#1f497d"><span>·<span style="font:7.0pt "Times New Roman"">
</span></span></span><u></u><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1f497d">I used googles material design library for a custom tab, which worked good, but I had to place a relative css import into the less file: @import (inline)
“<relative path>”;<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1f497d"><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1f497d">-Greg<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1f497d"><u></u> <u></u></span></p>
<p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:"Calibri",sans-serif">From:</span></b><span style="font-size:11.0pt;font-family:"Calibri",sans-serif"> users [mailto:<a href="mailto:users-bounces@buildbot.net" target="_blank">users-bounces@buildbot.net</a>]
<b>On Behalf Of </b>Ed Singleton<br>
<b>Sent:</b> Tuesday, March 22, 2016 5:05 AM<br>
<b>To:</b> <a href="mailto:users@buildbot.net" target="_blank">users@buildbot.net</a><br>
<b>Subject:</b> [<a href="mailto:users@bb.net" target="_blank">users@bb.net</a>] Creating an alternate web interface<u></u><u></u></span></p></div></div><div lang="EN-US" link="#0563C1" vlink="#954F72"><div>
<p class="MsoNormal"><u></u> <u></u></p>
<div>
<p class="MsoNormal">How easy is it to create an alternate web interface to Buildbot 0.9.0b7?<u></u><u></u></p>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<div>
<p class="MsoNormal">The fact that buildbot-www has now been packaged seperately suggests to me that it's intended to have alternatives, but I couldn't find any documentation about it.<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<div>
<p class="MsoNormal">I've had a look through the www folder in the source, but I'm not a Javascript programmer, and not familiar with Angular so it didn't make much sense.<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<div>
<p class="MsoNormal">If anyone has any tips or pointers to places where I could read up on how to create an alternate interface, I'd be grateful.<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<div>
<p class="MsoNormal">(The current interface is lovely by the way, it's just that the company I work for wants to have a custom one).<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<div>
<p class="MsoNormal">Thanks<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<div>
<p class="MsoNormal">Ed<u></u><u></u></p>
</div>
</div>
</div></div>
_______________________________________________<br>
users mailing list<br>
<a href="mailto:users@buildbot.net" target="_blank">users@buildbot.net</a><br>
<a href="https://lists.buildbot.net/mailman/listinfo/users" rel="noreferrer" target="_blank">https://lists.buildbot.net/mailman/listinfo/users</a></blockquote></div>