<div dir="ltr">Hi Rajdeep,<div><br></div><div>There should not be much to do in the webpack config. Just change package.json to depend on vue rather than react</div><div><br></div><div>You first need to understand the vue lifecycle. It is not very different from react, unless a bit less explicit.</div><div><br></div><div><a href="https://vuejs.org/v2/guide/instance.html">https://vuejs.org/v2/guide/instance.html</a><br></div><div><br></div><div>Basically, you need to create a Vue() Object that attaches to the angularJS created component.</div><div><br></div><div>so instead of</div><div><div style="color:rgb(212,212,212);background-color:rgb(30,30,30);font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;line-height:18px;white-space:pre"><div> <span style="color:rgb(156,220,254)">ReactDOM</span>.<span style="color:rgb(220,220,170)">render</span>(</div><div> <span style="color:rgb(156,220,254)">React</span>.<span style="color:rgb(220,220,170)">createElement</span>(<span style="color:rgb(156,220,254)">SampleReactComponent</span>, <span style="color:rgb(156,220,254)">props</span>, <span style="color:rgb(86,156,214)">null</span>),</div><div> <span style="color:rgb(86,156,214)">this</span>.<span style="color:rgb(156,220,254)">reactRawElement</span></div><div> );</div></div></div><div><br></div><div>you would do:</div><div><div style="color:rgb(212,212,212);background-color:rgb(30,30,30);font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;line-height:18px;white-space:pre"><div> <span style="color:rgb(86,156,214)">new</span> <span style="color:rgb(78,201,176)">Vue</span>({</div><div> <span style="color:rgb(156,220,254)">el:</span> <span style="color:rgb(86,156,214)">this</span>.<span style="color:rgb(156,220,254)">reactRawElement</span>,</div><div> <span style="color:rgb(156,220,254)">components:</span> {</div><div> <span style="color:rgb(156,220,254)">SampleVueComponent</span></div><div> }</div><div> [..] // Then need to configure a small template to configure the component, and pass it the params</div><div> })</div><div></div></div></div><div><br></div><div>Regards</div><div>Pierre</div><div><div style="color:rgb(212,212,212);background-color:rgb(30,30,30);font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;line-height:18px;white-space:pre"><div></div></div></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Thu, Mar 21, 2019 at 1:37 PM Rajdeep Bharati <<a href="mailto:rajdeepbharati13@gmail.com">rajdeepbharati13@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr"><div class="gmail_default" style="font-family:arial,helvetica,sans-serif"><div class="gmail_default">Hi,</div><div class="gmail_default">I tried (and am still trying) to implement it using Vue. I'm some facing issues: </div><div class="gmail_default">- How do I render my component inside Main.js in a similar manner as ReactDOM.render()?</div><div class="gmail_default">- I guess there's also some problem in the webpack.config.js</div><div class="gmail_default"><br></div><div class="gmail_default">Sorry for the delayed response. I'm slightly new to Vue.js, so some help would be great.</div><div class="gmail_default">Thank you.</div></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Mar 19, 2019 at 11:41 PM Pierre Tardy <<a href="mailto:tardyp@gmail.com" target="_blank">tardyp@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr">Great! That was fast!<div><br></div><div>Lets go harder challenge, then.</div><div>How about doing the same with Vue.js?</div><div><br></div><br>buildbot-vue-plugin-boilerplate<div><br><div dir="ltr"><div>Pierre</div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Mar 19, 2019 at 6:31 PM Rajdeep Bharati <<a href="mailto:rajdeepbharati13@gmail.com" target="_blank">rajdeepbharati13@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div class="gmail_default" style="font-family:arial,helvetica,sans-serif">Hi,</div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif">I have set up the environment with the react plugin installed and configured, as you told. You can see the code <a href="https://github.com/rajdeepbharati/MacportsCustomBuildbot" target="_blank">here</a> and a demo in the video:<span style="font-family:Arial,Helvetica,sans-serif"></span></div><br><div class="gmail_chip gmail_drive_chip" style="width:396px;height:18px;max-height:18px;background-color:rgb(245,245,245);padding:5px;color:rgb(34,34,34);font-family:arial;font-style:normal;font-weight:bold;font-size:13px;border:1px solid rgb(221,221,221);line-height:1"><a href="https://drive.google.com/file/d/1GD6LM0EgjXs3lXep3SBUy-AqMfOFx2FJ/view?usp=drive_web" style="display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;padding:1px 0px;border:none;width:100%" target="_blank"><img style="vertical-align:bottom;border:none" src="https://ssl.gstatic.com/docs/doclist/images/icon_10_generic_list.png"> <span dir="ltr" style="color:rgb(17,85,204);text-decoration:none;vertical-align:bottom">demo.mov</span></a></div><span class="gmail_default" style="font-family:arial,helvetica,sans-serif">Regards,</span><div><span class="gmail_default" style="font-family:arial,helvetica,sans-serif">Rajdeep</span></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Mar 19, 2019 at 4:14 PM Rajdeep Bharati <<a href="mailto:rajdeepbharati13@gmail.com" target="_blank">rajdeepbharati13@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div class="gmail_default" style="font-family:arial,helvetica,sans-serif">Sounds good to me. Thanks!<br></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Mar 19, 2019 at 3:59 PM Pierre Tardy <<a href="mailto:tardyp@gmail.com" target="_blank">tardyp@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr">Hi Rajdeep,<div><br></div><div>Sorry if I have not been clear.</div><div>The project I have linked is quite a large project which will actually takes several summer in order to finish. What I meant is that it would be good for synergy if we have another student on that project, as this is on the same domain, and you could work with him/her to share your findings and best practices.</div><div><br></div><div>You can start working on macport custom buildbot UI without waiting for this project, and we can start working on that in modern javascript of typescript if needed.</div><div><br></div><div>uglycoyte did a poc which you can find here:</div><div><a href="https://github.com/uglycoyote/buildbot-react-plugin-boilerplate" target="_blank">https://github.com/uglycoyote/buildbot-react-plugin-boilerplate</a></div><div><br></div><div>I am not sure of the state of the PoC.</div><div>I suggest you as a welcome challenge to build yourself a buildbot environment, with the react plugin installed in, displaying "hello from Rajdeep's Buildbot"<br><br>Would that work for you?</div><div><br>Regards</div><div>Pierre<br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Mon, Mar 18, 2019 at 10:53 AM Pierre Tardy <<a href="mailto:tardyp@gmail.com" target="_blank">tardyp@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr">Hi,<div><br></div><div>We have our own GSoC project to transition the UI from coffeescript:</div><div><a href="https://github.com/buildbot/buildbot/wiki/Buildbot-GSoC-Projects-2019#transition-web-uis-data-module-from-coffeescript-to-typescript" target="_blank">https://github.com/buildbot/buildbot/wiki/Buildbot-GSoC-Projects-2019#transition-web-uis-data-module-from-coffeescript-to-typescript</a><br></div><div>The ideal would be to have one student for each project.</div><div><br></div><div>All the pointers are there. I would be happy to help on either project.</div><div><br></div><div>Regards,</div><div>Pierre</div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Mon, Mar 18, 2019 at 9:41 AM Mojca Miklavec <<a href="mailto:mojca@macports.org" target="_blank">mojca@macports.org</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">Dear Rajdeep,<br>
<br>
On Sun, 17 Mar 2019 at 19:55, Rajdeep Bharat wrote:<br>
><br>
> Hello, I am Rajdeep, a GSoC aspirant.<br>
> I was going through the Buildbot views project and had a few doubts:<br>
> - Do I need to work on the dashboards SPA of buildbots (<a href="https://github.com/buildbot/guanlecoja-ui" rel="noreferrer" target="_blank">https://github.com/buildbot/guanlecoja-ui</a>) and rewrite it using a modern library like React?<br>
> - I have read this ticket: <a href="https://trac.macports.org/ticket/55978" rel="noreferrer" target="_blank">https://trac.macports.org/ticket/55978</a>. Do I have to implement them separately in a MacPorts repository of buildbot, or do it in upstream directly?<br>
><br>
> I am familiarizing myself with the buildbot codebase and would love to start contributing.<br>
> Can someone tell me if I'm on the right track?<br>
<br>
Thank you very much for reaching to us. I still owe you the response<br>
to the earlier email, but let's start with this one.<br>
<br>
The "buildbot idea" would be (co)mentored by someone from the Buildbot<br>
development team for the technical part ("How to do it?"), while the<br>
MacPorts mentor would help to steer towards the desired goal ("What to<br>
do?").<br>
<br>
So I would like to ask Pierre to explain the technical part in more details.<br>
<br>
(Pierre, how does the unfinished Coffeescript to Typescript conversion<br>
of the core affect designing new views and their "future-proof-ness"?)<br>
<br>
What I want to say from the MacPorts point of view is that what mainly<br>
kept us from switching to buildbot version beyond 0.8.x was a less<br>
user-friendly waterfall view. We kept postponing the switch since the<br>
time the buildbot was still at version 0.9.x. Now it's already at 2.x,<br>
and it would be about a high time that we do the upgrade. The existing<br>
buildbot setup was written in cca. 3 days during our in-person<br>
developer meeting in 2016, and then slightly improved over time.<br>
<br>
The changes would be added wherever it makes the most sense. If<br>
there's some view that's specific to MacPorts, we would keep it<br>
locally, while any other change that's considered useful for any<br>
buildbot user would best be pushed to their own repository (and<br>
reviewed by the buildbot development team).<br>
<br>
I wanted to add that this project is well related to the "collection<br>
of build statistics" idea. I will elaborate on this later, but we<br>
definitely need changes in the buildbot configuration to make it<br>
easier for our (hopefully) future web application to talk to the<br>
buildbot master.<br>
<br>
Mojca<br>
<br>
<br>
Mojca<br>
</blockquote></div>-- <br><div dir="ltr" class="m_942698021887278344gmail-m_-9019271810012857059m_6343882882725726762m_-2702125127833435885gmail-m_-8605677367217794016gmail-m_-3619676291762387687m_7403558170995367160gmail_signature"><div dir="ltr"><p dir="ltr"><br></p>
</div></div>
</blockquote></div></div></div>-- <br><div dir="ltr" class="m_942698021887278344gmail-m_-9019271810012857059m_6343882882725726762m_-2702125127833435885gmail-m_-8605677367217794016gmail-m_-3619676291762387687gmail_signature"><div dir="ltr"><p dir="ltr"><br></p>
</div></div>
</blockquote></div>
</blockquote></div>
</blockquote></div></div></div>-- <br><div dir="ltr" class="m_942698021887278344gmail-m_-9019271810012857059gmail_signature"><div dir="ltr"><p dir="ltr"><br></p>
</div></div>
</blockquote></div>
</blockquote></div>-- <br><div dir="ltr" class="gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><p dir="ltr"><br></p>
</div></div>