Re: [DISCUSS] Primate - new UI for CloudStack?

[Rohit Yadav]

All,

Thank you all for your positive support so far. I just want to share that I 
will start a voting thread on Monday next week, in case there are any further 
feedback, objections and concerns on the proposal before that.

Regards.

Regards,
Rohit Yadav


From: Syed Ahmed 
Sent: Monday, September 23, 2019 8:59:17 PM
To: dev@cloudstack.apache.org 
Cc: us...@cloudstack.apache.org 
Subject: Re: [DISCUSS] Primate - new UI for CloudStack?

Just watched the video of the Presentation Rohit. Great works so far looks
good! Having worked around to change the cursed system.js file I'm
definetly +1 on this

On Sun, Sep 22, 2019 at 10:20 PM Rohit Yadav 
wrote:

> Hi Sid,
>
> I've put the proposal on the wiki for reference:
>
> https://cwiki.apache.org/confluence/display/CLOUDSTACK/Proposal%3A+CloudStack+Primate+UI
>
>
> Regards,
>
> Rohit Yadav
>
> Software Architect, ShapeBlue
>
> https://www.shapeblue.com
>
> 
> From: Siddhartha Kattoju 
> Sent: Friday, September 20, 2019 20:47
> To: dev@cloudstack.apache.org 
> Cc: us...@cloudstack.apache.org 
> Subject: Re: [DISCUSS] Primate - new UI for CloudStack?
>
> +1 from me as well.
>
> Just a side note: I feel like there is a high risk of tldr here. May be its
> just me. It may be would be good to put most of the details in a wiki page
> and just post a summarized version on the list ?
>
> *Sid Kattoju*
>
> Cloud Software Architect | Professional Services
>
> c 514.466.0951
>
>
> * <https://goo.gl/NYZ8KK>*
>
>
>
>
> On Fri, Sep 20, 2019 at 8:10 AM Rohit Yadav 
> wrote:
>
> > All,
> >
> >
> >
> > == Summary ==
> >
> >
> > I have been working on a new, modern role-based UI for Cloudstack
> (project
> > Primate: https://github.com/shapeblue/primate) I demoed this for the
> > first time at CCCNA19 last week and it was very well received. It was
> > discussed, at length, as an item in the hackathon and the general
> consensus
> > there was that this could become Cloudstacks new UI. We discussed a plan
> to
> > achieve that and now I’m bringing that plan to the list for discussion.
> >
> >
> >
> > == Background ==
> >
> >
> > The current CloudStack UI has grown technical debt over time and it has
> > become harder to extend, develop, maintain in the long run, it is also
> > difficult for new contributors to learn and get started. Since late
> 2018, I
> > started working on a side-project with the aim to create a modern
> > progressive and role-based declaratively-programmed UI for CloudStack,
> > called Primate. Before creating Primate, I set out to create a list of
> core
> > requirements of what would give us an extensible, modern UI that was easy
> > to develop now and in the future. These are the requirements I came up
> with:
> >
> >   *   designed from ground up to be  a complete replacement for our
> > combined user/admin UI
> >   *   to respect all entities in cloudstack and not make assumptions on
> > use-cases of cloudstack
> >   *   data-driven and auto-generation of UI widgets and to be easy to
> > learn, develop, extend, customise and maintain.
> >   *   declarative programming
> >   *   support for API discovery and parameter completion like CloudMonkey
> >   *   support for custom roles
> >
> >
> >
> > I looked at existing Cloudstack UI projects but none of them fully
> > satisfied all these requirements and started Primate.
> >
> >
> >
> > == Project Primate ==
> >
> >
> > For the implementation, I compared a couple of opensource JS and UI
> > frameworks and decided to use VueJS (https://vuejs.org<
> https://vuejs.org/>)
> > which is a JavaScript framework and AntD (https://ant.design<
> > https://ant.design/>) which is a UI design language with a well-defined
> > spec, styling guide, and an implementation-specific to VueJS. VueJS was
> > selected because among a few other JS frameworks I surveyed it was the
> > easiest (for me) to learn and get started. I also surveyed a few UI
> > frameworks and selected AntD because it came with a well-defined spec,
> > styling guide and VueJS specific implementation which gives several
> > re-usable components out of the box.
> >
> >
> >
> > During the development of Primate, I used my previous experience from
> > CloudMonkey and another PoC angular-based UI ProjectX, and it currently
> > supports:
> >
> >   *   role-based UI based on API autodiscovery
> >   *   auto-generated action/API forms with pa

Re: [DISCUSS] Primate - new UI for CloudStack?

[Syed Ahmed]

Just watched the video of the Presentation Rohit. Great works so far looks
good! Having worked around to change the cursed system.js file I'm
definetly +1 on this

On Sun, Sep 22, 2019 at 10:20 PM Rohit Yadav 
wrote:

> Hi Sid,
>
> I've put the proposal on the wiki for reference:
>
> https://cwiki.apache.org/confluence/display/CLOUDSTACK/Proposal%3A+CloudStack+Primate+UI
>
>
> Regards,
>
> Rohit Yadav
>
> Software Architect, ShapeBlue
>
> https://www.shapeblue.com
>
> 
> From: Siddhartha Kattoju 
> Sent: Friday, September 20, 2019 20:47
> To: dev@cloudstack.apache.org 
> Cc: us...@cloudstack.apache.org 
> Subject: Re: [DISCUSS] Primate - new UI for CloudStack?
>
> +1 from me as well.
>
> Just a side note: I feel like there is a high risk of tldr here. May be its
> just me. It may be would be good to put most of the details in a wiki page
> and just post a summarized version on the list ?
>
> *Sid Kattoju*
>
> Cloud Software Architect | Professional Services
>
> c 514.466.0951
>
>
> * <https://goo.gl/NYZ8KK>*
>
>
>
>
> On Fri, Sep 20, 2019 at 8:10 AM Rohit Yadav 
> wrote:
>
> > All,
> >
> >
> >
> > == Summary ==
> >
> >
> > I have been working on a new, modern role-based UI for Cloudstack
> (project
> > Primate: https://github.com/shapeblue/primate) I demoed this for the
> > first time at CCCNA19 last week and it was very well received. It was
> > discussed, at length, as an item in the hackathon and the general
> consensus
> > there was that this could become Cloudstacks new UI. We discussed a plan
> to
> > achieve that and now I’m bringing that plan to the list for discussion.
> >
> >
> >
> > == Background ==
> >
> >
> > The current CloudStack UI has grown technical debt over time and it has
> > become harder to extend, develop, maintain in the long run, it is also
> > difficult for new contributors to learn and get started. Since late
> 2018, I
> > started working on a side-project with the aim to create a modern
> > progressive and role-based declaratively-programmed UI for CloudStack,
> > called Primate. Before creating Primate, I set out to create a list of
> core
> > requirements of what would give us an extensible, modern UI that was easy
> > to develop now and in the future. These are the requirements I came up
> with:
> >
> >   *   designed from ground up to be  a complete replacement for our
> > combined user/admin UI
> >   *   to respect all entities in cloudstack and not make assumptions on
> > use-cases of cloudstack
> >   *   data-driven and auto-generation of UI widgets and to be easy to
> > learn, develop, extend, customise and maintain.
> >   *   declarative programming
> >   *   support for API discovery and parameter completion like CloudMonkey
> >   *   support for custom roles
> >
> >
> >
> > I looked at existing Cloudstack UI projects but none of them fully
> > satisfied all these requirements and started Primate.
> >
> >
> >
> > == Project Primate ==
> >
> >
> > For the implementation, I compared a couple of opensource JS and UI
> > frameworks and decided to use VueJS (https://vuejs.org<
> https://vuejs.org/>)
> > which is a JavaScript framework and AntD (https://ant.design<
> > https://ant.design/>) which is a UI design language with a well-defined
> > spec, styling guide, and an implementation-specific to VueJS. VueJS was
> > selected because among a few other JS frameworks I surveyed it was the
> > easiest (for me) to learn and get started. I also surveyed a few UI
> > frameworks and selected AntD because it came with a well-defined spec,
> > styling guide and VueJS specific implementation which gives several
> > re-usable components out of the box.
> >
> >
> >
> > During the development of Primate, I used my previous experience from
> > CloudMonkey and another PoC angular-based UI ProjectX, and it currently
> > supports:
> >
> >   *   role-based UI based on API autodiscovery
> >   *   auto-generated action/API forms with parameter completion
> >   *   declarative component-driven views
> >   *   modern programming methodologies (hot reloading, npm based
> > build/run/compile etc.)
> >   *   decoupled from core Cloudstack code
> >   *   dynamic translation (most/many of old translation files ported)
> >   *   includes dashboards, async job/API polling, all list views/tables
> > per the old UI
> >   *   browser history and url/route dr

Re: [DISCUSS] Primate - new UI for CloudStack?

[Riepl, Gregor (SWISS TXT)]

Hi Rohit

+1

Kudos to the plans and the work already done on the new UI!
I'm definitely in favour of something more modern and easier to maintain.
Also, the complete separation of the UI from the mgmt server is definitely the 
way to go.

We've tested the current state of the frontend and while a lot of functionality 
is still missing, it's looking very promising.
We're also planning to give some of our customers a sneak preview soonish to 
collect some feedback, which we'll gladly pass on.

Regards,
Gregor

From: Rohit Yadav 
Sent: 23 September 2019 04:20
To: dev@cloudstack.apache.org 
Cc: us...@cloudstack.apache.org 
Subject: Re: [DISCUSS] Primate - new UI for CloudStack?

Hi Sid,

I've put the proposal on the wiki for reference:
https://cwiki.apache.org/confluence/display/CLOUDSTACK/Proposal%3A+CloudStack+Primate+UI


Regards,

Rohit Yadav

Software Architect, ShapeBlue

https://www.shapeblue.com


From: Siddhartha Kattoju 
Sent: Friday, September 20, 2019 20:47
To: dev@cloudstack.apache.org 
Cc: us...@cloudstack.apache.org 
Subject: Re: [DISCUSS] Primate - new UI for CloudStack?

+1 from me as well.

Just a side note: I feel like there is a high risk of tldr here. May be its
just me. It may be would be good to put most of the details in a wiki page
and just post a summarized version on the list ?

*Sid Kattoju*

Cloud Software Architect | Professional Services

c 514.466.0951


* <https://goo.gl/NYZ8KK>*




On Fri, Sep 20, 2019 at 8:10 AM Rohit Yadav 
wrote:

> All,
>
>
>
> == Summary ==
>
>
> I have been working on a new, modern role-based UI for Cloudstack (project
> Primate: https://github.com/shapeblue/primate) I demoed this for the
> first time at CCCNA19 last week and it was very well received. It was
> discussed, at length, as an item in the hackathon and the general consensus
> there was that this could become Cloudstacks new UI. We discussed a plan to
> achieve that and now I’m bringing that plan to the list for discussion.
>
>
>
> == Background ==
>
>
> The current CloudStack UI has grown technical debt over time and it has
> become harder to extend, develop, maintain in the long run, it is also
> difficult for new contributors to learn and get started. Since late 2018, I
> started working on a side-project with the aim to create a modern
> progressive and role-based declaratively-programmed UI for CloudStack,
> called Primate. Before creating Primate, I set out to create a list of core
> requirements of what would give us an extensible, modern UI that was easy
> to develop now and in the future. These are the requirements I came up with:
>
>   *   designed from ground up to be  a complete replacement for our
> combined user/admin UI
>   *   to respect all entities in cloudstack and not make assumptions on
> use-cases of cloudstack
>   *   data-driven and auto-generation of UI widgets and to be easy to
> learn, develop, extend, customise and maintain.
>   *   declarative programming
>   *   support for API discovery and parameter completion like CloudMonkey
>   *   support for custom roles
>
>
>
> I looked at existing Cloudstack UI projects but none of them fully
> satisfied all these requirements and started Primate.
>
>
>
> == Project Primate ==
>
>
> For the implementation, I compared a couple of opensource JS and UI
> frameworks and decided to use VueJS (https://vuejs.org<https://vuejs.org/>)
> which is a JavaScript framework and AntD (https://ant.design<
> https://ant.design/>) which is a UI design language with a well-defined
> spec, styling guide, and an implementation-specific to VueJS. VueJS was
> selected because among a few other JS frameworks I surveyed it was the
> easiest (for me) to learn and get started. I also surveyed a few UI
> frameworks and selected AntD because it came with a well-defined spec,
> styling guide and VueJS specific implementation which gives several
> re-usable components out of the box.
>
>
>
> During the development of Primate, I used my previous experience from
> CloudMonkey and another PoC angular-based UI ProjectX, and it currently
> supports:
>
>   *   role-based UI based on API autodiscovery
>   *   auto-generated action/API forms with parameter completion
>   *   declarative component-driven views
>   *   modern programming methodologies (hot reloading, npm based
> build/run/compile etc.)
>   *   decoupled from core Cloudstack code
>   *   dynamic translation (most/many of old translation files ported)
>   *   includes dashboards, async job/API polling, all list views/tables
> per the old UI
>   *   browser history and url/route driven navigation
>   *   support for mobiles/tables/desktop screens
>   *   configuration driven UI cust

Re: [DISCUSS] Primate - new UI for CloudStack?

[Rohit Yadav]

Hi Sid,

I've put the proposal on the wiki for reference:
https://cwiki.apache.org/confluence/display/CLOUDSTACK/Proposal%3A+CloudStack+Primate+UI


Regards,

Rohit Yadav

Software Architect, ShapeBlue

https://www.shapeblue.com


From: Siddhartha Kattoju 
Sent: Friday, September 20, 2019 20:47
To: dev@cloudstack.apache.org 
Cc: us...@cloudstack.apache.org 
Subject: Re: [DISCUSS] Primate - new UI for CloudStack?

+1 from me as well.

Just a side note: I feel like there is a high risk of tldr here. May be its
just me. It may be would be good to put most of the details in a wiki page
and just post a summarized version on the list ?

*Sid Kattoju*

Cloud Software Architect | Professional Services

c 514.466.0951


* <https://goo.gl/NYZ8KK>*




On Fri, Sep 20, 2019 at 8:10 AM Rohit Yadav 
wrote:

> All,
>
>
>
> == Summary ==
>
>
> I have been working on a new, modern role-based UI for Cloudstack (project
> Primate: https://github.com/shapeblue/primate) I demoed this for the
> first time at CCCNA19 last week and it was very well received. It was
> discussed, at length, as an item in the hackathon and the general consensus
> there was that this could become Cloudstacks new UI. We discussed a plan to
> achieve that and now I’m bringing that plan to the list for discussion.
>
>
>
> == Background ==
>
>
> The current CloudStack UI has grown technical debt over time and it has
> become harder to extend, develop, maintain in the long run, it is also
> difficult for new contributors to learn and get started. Since late 2018, I
> started working on a side-project with the aim to create a modern
> progressive and role-based declaratively-programmed UI for CloudStack,
> called Primate. Before creating Primate, I set out to create a list of core
> requirements of what would give us an extensible, modern UI that was easy
> to develop now and in the future. These are the requirements I came up with:
>
>   *   designed from ground up to be  a complete replacement for our
> combined user/admin UI
>   *   to respect all entities in cloudstack and not make assumptions on
> use-cases of cloudstack
>   *   data-driven and auto-generation of UI widgets and to be easy to
> learn, develop, extend, customise and maintain.
>   *   declarative programming
>   *   support for API discovery and parameter completion like CloudMonkey
>   *   support for custom roles
>
>
>
> I looked at existing Cloudstack UI projects but none of them fully
> satisfied all these requirements and started Primate.
>
>
>
> == Project Primate ==
>
>
> For the implementation, I compared a couple of opensource JS and UI
> frameworks and decided to use VueJS (https://vuejs.org<https://vuejs.org/>)
> which is a JavaScript framework and AntD (https://ant.design<
> https://ant.design/>) which is a UI design language with a well-defined
> spec, styling guide, and an implementation-specific to VueJS. VueJS was
> selected because among a few other JS frameworks I surveyed it was the
> easiest (for me) to learn and get started. I also surveyed a few UI
> frameworks and selected AntD because it came with a well-defined spec,
> styling guide and VueJS specific implementation which gives several
> re-usable components out of the box.
>
>
>
> During the development of Primate, I used my previous experience from
> CloudMonkey and another PoC angular-based UI ProjectX, and it currently
> supports:
>
>   *   role-based UI based on API autodiscovery
>   *   auto-generated action/API forms with parameter completion
>   *   declarative component-driven views
>   *   modern programming methodologies (hot reloading, npm based
> build/run/compile etc.)
>   *   decoupled from core Cloudstack code
>   *   dynamic translation (most/many of old translation files ported)
>   *   includes dashboards, async job/API polling, all list views/tables
> per the old UI
>   *   browser history and url/route driven navigation
>   *   support for mobiles/tables/desktop screens
>   *   configuration driven UI customisation (of navigation, icons, APIs
> etc)
>
>
>
> To get to this point, I’ve had some valuable help from Anurag and Sven et
> al at EWerk.
> The development strategy to support all APIs out of the box in a
> data-driven way gives a functioning UI and scope to customise
> views/components over time. Support to declaratively add actions on all
> views and some action/customisation (ex. vm/zone deployment wizard) is in
> progress. The work was recently discussed and demo-ed at CCCNA19, the
> slides of my talk are here:
> https://rohityadav.cloud/files/talks/cccna19-primate.pdf
>
>
>
> == Discussion ==
>
>
>
> With this discussion thread, I wa

Re: [DISCUSS] Primate - new UI for CloudStack?

[Rohit Yadav]

All - thanks for your support and positive feedback.
I'll leave the thread open until the end of next week before kicking a voting 
thread to accept the codebase/repository.

Andrija - depending on how the community gathers consensus, the state and 
feedback on Primate technical preview (with the current winter LTS) and GA 
(with summer 2020 LTS) and depending on what we discuss and decide the UI would 
be deprecated and removed. Per my proposed plan, if all goals, timelines and 
consensus are met, the old UI may finally be removed in the winter 2020 LTS 
release after the due process of discussion and voting. Thanks.


Regards,

Rohit Yadav

Software Architect, ShapeBlue

https://www.shapeblue.com


From: Andrija Panic 
Sent: Friday, September 20, 2019 17:50
To: users 
Cc: dev@cloudstack.apache.org 
Subject: Re: [DISCUSS] Primate - new UI for CloudStack?

Hi Rohit,

been on CCC19NA and I'm fine with the whole idea (having seen everything,
etc.)

One thing to clarify: you mentioned "old UI reaches EOL in Winter lts 2020,
old UI codebase is removed from codebase" - but later stated, that since we
support LTS until 2022, that means "but, with no new UI functionality after
summer 2020".

So just to clarify WHEN actually is the old UI being finally removed
(codebase removed) from the product.

Everything else - a humble +1 for the great work you've done.

Andrija


rohit.ya...@shapeblue.com 
www.shapeblue.com
Amadeus House, Floral Street, London  WC2E 9DPUK
@shapeblue
  
 

On Fri, 20 Sep 2019 at 14:10, Rohit Yadav  wrote:

> All,
>
>
>
> == Summary ==
>
>
> I have been working on a new, modern role-based UI for Cloudstack (project
> Primate: https://github.com/shapeblue/primate) I demoed this for the
> first time at CCCNA19 last week and it was very well received. It was
> discussed, at length, as an item in the hackathon and the general consensus
> there was that this could become Cloudstacks new UI. We discussed a plan to
> achieve that and now I’m bringing that plan to the list for discussion.
>
>
>
> == Background ==
>
>
> The current CloudStack UI has grown technical debt over time and it has
> become harder to extend, develop, maintain in the long run, it is also
> difficult for new contributors to learn and get started. Since late 2018, I
> started working on a side-project with the aim to create a modern
> progressive and role-based declaratively-programmed UI for CloudStack,
> called Primate. Before creating Primate, I set out to create a list of core
> requirements of what would give us an extensible, modern UI that was easy
> to develop now and in the future. These are the requirements I came up with:
>
>   *   designed from ground up to be  a complete replacement for our
> combined user/admin UI
>   *   to respect all entities in cloudstack and not make assumptions on
> use-cases of cloudstack
>   *   data-driven and auto-generation of UI widgets and to be easy to
> learn, develop, extend, customise and maintain.
>   *   declarative programming
>   *   support for API discovery and parameter completion like CloudMonkey
>   *   support for custom roles
>
>
>
> I looked at existing Cloudstack UI projects but none of them fully
> satisfied all these requirements and started Primate.
>
>
>
> == Project Primate ==
>
>
> For the implementation, I compared a couple of opensource JS and UI
> frameworks and decided to use VueJS (https://vuejs.org<https://vuejs.org/>)
> which is a JavaScript framework and AntD (https://ant.design<
> https://ant.design/>) which is a UI design language with a well-defined
> spec, styling guide, and an implementation-specific to VueJS. VueJS was
> selected because among a few other JS frameworks I surveyed it was the
> easiest (for me) to learn and get started. I also surveyed a few UI
> frameworks and selected AntD because it came with a well-defined spec,
> styling guide and VueJS specific implementation which gives several
> re-usable components out of the box.
>
>
>
> During the development of Primate, I used my previous experience from
> CloudMonkey and another PoC angular-based UI ProjectX, and it currently
> supports:
>
>   *   role-based UI based on API autodiscovery
>   *   auto-generated action/API forms with parameter completion
>   *   declarative component-driven views
>   *   modern programming methodologies (hot reloading, npm based
> build/run/compile etc.)
>   *   decoupled from core Cloudstack code
>   *   dynamic translation (most/many of old translation files ported)
>   *   includes dashboards, async job/API polling, all list views/tables
> per the old UI
>   *   browser history and url/route driven navigation
>   *   support for mobiles/tables/desktop screens
>   *

RE: [DISCUSS] Primate - new UI for CloudStack?

[Paul Angus]

Lol - with great power comes great responsibility David! 

Actually this is a discussion thread, once any issues which people may raise 
are ironed out I expect Rohit will start a VOTE on a concrete proposal and 
timeline.
-- For anyone not used to this process, now would be a good time to explain 
Apache voting rules (https://www.apache.org/foundation/voting.html)

From PMC members on code changes:
+1 = yes I agree, lets do this
0 = I don't mind/care either way
-1 = I object to this change (VETO)

From the rest of the community on code changes:
+1 = yes I agree, lets do this
0 = I don't mind/care either way
-1 = I don't like this change.

As this change would effect so many people, I would hope that any issues would 
be raised during the discussion and a mutually acceptable way forward found, 
before we get as far as a vote.  


Kind regards


Paul Angus





paul.an...@shapeblue.com 
www.shapeblue.com
Amadeus House, Floral Street, London  WC2E 9DPUK
@shapeblue
  
 


-Original Message-
From: David Merrill  
Sent: 20 September 2019 18:27
To: us...@cloudstack.apache.org
Subject: Re: [DISCUSS] Primate - new UI for CloudStack?

I love this idea. Separating the UI from the code-base and crafting an API 
driven UI presents excellent opportunities for customizable UIs (and getting 
folks involved with making them) which can improve user experience.

I'd love to get involved and looking forward to trying it out.

+1 (I've never +1'ed anything before, is it OK? Can I vote?) :)

David Merrill
Senior Systems Engineer,
Managed and Private/Hybrid Cloud Services OTELCO
92 Oak Street, Portland ME 04101
office 207.772.5678  
http://www.otelco.com/cloud-and-managed-services
 
Confidentiality Message
The information contained in this e-mail transmission may be confidential and 
legally privileged. If you are not the intended recipient, you are notified 
that any dissemination, distribution, copying or other use of this information, 
including attachments, is prohibited. If you received this message in error, 
please call me at 207.772.5678  so this error can be 
corrected.
 

On 9/20/19, 12:52 PM, "Simon Weller"  wrote:

I like the idea of separating the UI from the main code base. I think that 
will provide a lot more flexibility moving forward and the project is well 
overdue for a new look and feel.

I think the time frame proposed to sunset the old UI is doable and we'll 
need some feedback from those using it today (we have our own UI, so this 
doesn't affect us).

One of our challenges over the last few years is the added work of getting 
UI features into the release and it has added around 30% additional work load 
due to the older style code of the current UI. Having it in VUE is great and I 
think it will also encourage others to contribute.

+1.


From: Anurag A 
Sent: Friday, September 20, 2019 11:26 AM
To: dev@cloudstack.apache.org 
Cc: us...@cloudstack.apache.org 
Subject: Re: [DISCUSS] Primate - new UI for CloudStack?

+1 to the new UI as it supports:
1. Faster development of features
2. Better experience as a user
3. Easy customisation declaratively

Regards,
Anurag

> On 20-Sep-2019, at 8:17 AM, Siddhartha Kattoju  
wrote:
>
> +1 from me as well.
>
> Just a side note: I feel like there is a high risk of tldr here. May be 
its
> just me. It may be would be good to put most of the details in a wiki page
> and just post a summarized version on the list ?
>
> *Sid Kattoju*
>
> Cloud Software Architect | Professional Services
>
> c 514.466.0951
>
>
> * <https://goo.gl/NYZ8KK>*
>
>
>
>
> On Fri, Sep 20, 2019 at 8:10 AM Rohit Yadav 
> wrote:
>
>> All,
>>
>>
>>
>> == Summary ==
>>
>>
>> I have been working on a new, modern role-based UI for Cloudstack 
(project
>> Primate: https://github.com/shapeblue/primate) I demoed this for the
>> first time at CCCNA19 last week and it was very well received. It was
>> discussed, at length, as an item in the hackathon and the general 
consensus
>> there was that this could become Cloudstacks new UI. We discussed a plan 
to
>> achieve that and now I’m bringing that plan to the list for discussion.
>>
>>
>>
>> == Background ==
>>
>>
>> The current CloudStack UI has grown technical debt over time and it has
>> become harder to extend, develop, maintain in the long run, it is also
>> difficult for new contributors to learn and get started. Since late 
2018, I
>> started working on a side-project with the aim to create a modern
>> progre

Re: [DISCUSS] Primate - new UI for CloudStack?

[Simon Weller]

I like the idea of separating the UI from the main code base. I think that will 
provide a lot more flexibility moving forward and the project is well overdue 
for a new look and feel.
I think the time frame proposed to sunset the old UI is doable and we'll need 
some feedback from those using it today (we have our own UI, so this doesn't 
affect us).

One of our challenges over the last few years is the added work of getting UI 
features into the release and it has added around 30% additional work load due 
to the older style code of the current UI. Having it in VUE is great and I 
think it will also encourage others to contribute.

+1.


From: Anurag A 
Sent: Friday, September 20, 2019 11:26 AM
To: dev@cloudstack.apache.org 
Cc: us...@cloudstack.apache.org 
Subject: Re: [DISCUSS] Primate - new UI for CloudStack?

+1 to the new UI as it supports:
1. Faster development of features
2. Better experience as a user
3. Easy customisation declaratively

Regards,
Anurag

> On 20-Sep-2019, at 8:17 AM, Siddhartha Kattoju  wrote:
>
> +1 from me as well.
>
> Just a side note: I feel like there is a high risk of tldr here. May be its
> just me. It may be would be good to put most of the details in a wiki page
> and just post a summarized version on the list ?
>
> *Sid Kattoju*
>
> Cloud Software Architect | Professional Services
>
> c 514.466.0951
>
>
> * <https://goo.gl/NYZ8KK>*
>
>
>
>
> On Fri, Sep 20, 2019 at 8:10 AM Rohit Yadav 
> wrote:
>
>> All,
>>
>>
>>
>> == Summary ==
>>
>>
>> I have been working on a new, modern role-based UI for Cloudstack (project
>> Primate: https://github.com/shapeblue/primate) I demoed this for the
>> first time at CCCNA19 last week and it was very well received. It was
>> discussed, at length, as an item in the hackathon and the general consensus
>> there was that this could become Cloudstacks new UI. We discussed a plan to
>> achieve that and now I’m bringing that plan to the list for discussion.
>>
>>
>>
>> == Background ==
>>
>>
>> The current CloudStack UI has grown technical debt over time and it has
>> become harder to extend, develop, maintain in the long run, it is also
>> difficult for new contributors to learn and get started. Since late 2018, I
>> started working on a side-project with the aim to create a modern
>> progressive and role-based declaratively-programmed UI for CloudStack,
>> called Primate. Before creating Primate, I set out to create a list of core
>> requirements of what would give us an extensible, modern UI that was easy
>> to develop now and in the future. These are the requirements I came up with:
>>
>>  *   designed from ground up to be  a complete replacement for our
>> combined user/admin UI
>>  *   to respect all entities in cloudstack and not make assumptions on
>> use-cases of cloudstack
>>  *   data-driven and auto-generation of UI widgets and to be easy to
>> learn, develop, extend, customise and maintain.
>>  *   declarative programming
>>  *   support for API discovery and parameter completion like CloudMonkey
>>  *   support for custom roles
>>
>>
>>
>> I looked at existing Cloudstack UI projects but none of them fully
>> satisfied all these requirements and started Primate.
>>
>>
>>
>> == Project Primate ==
>>
>>
>> For the implementation, I compared a couple of opensource JS and UI
>> frameworks and decided to use VueJS (https://vuejs.org<https://vuejs.org/>)
>> which is a JavaScript framework and AntD (https://ant.design<
>> https://ant.design/>) which is a UI design language with a well-defined
>> spec, styling guide, and an implementation-specific to VueJS. VueJS was
>> selected because among a few other JS frameworks I surveyed it was the
>> easiest (for me) to learn and get started. I also surveyed a few UI
>> frameworks and selected AntD because it came with a well-defined spec,
>> styling guide and VueJS specific implementation which gives several
>> re-usable components out of the box.
>>
>>
>>
>> During the development of Primate, I used my previous experience from
>> CloudMonkey and another PoC angular-based UI ProjectX, and it currently
>> supports:
>>
>>  *   role-based UI based on API autodiscovery
>>  *   auto-generated action/API forms with parameter completion
>>  *   declarative component-driven views
>>  *   modern programming methodologies (hot reloading, npm based
>> build/run/compile etc.)
>>  *   decoupled from core Cloudstack code
>>  *   dynamic translation (most/many of old

Re: [DISCUSS] Primate - new UI for CloudStack?

[Anurag A]

+1 to the new UI as it supports:
1. Faster development of features 
2. Better experience as a user
3. Easy customisation declaratively 

Regards,
Anurag

> On 20-Sep-2019, at 8:17 AM, Siddhartha Kattoju  wrote:
> 
> +1 from me as well.
> 
> Just a side note: I feel like there is a high risk of tldr here. May be its
> just me. It may be would be good to put most of the details in a wiki page
> and just post a summarized version on the list ?
> 
> *Sid Kattoju*
> 
> Cloud Software Architect | Professional Services
> 
> c 514.466.0951
> 
> 
> * *
> 
> 
> 
> 
> On Fri, Sep 20, 2019 at 8:10 AM Rohit Yadav 
> wrote:
> 
>> All,
>> 
>> 
>> 
>> == Summary ==
>> 
>> 
>> I have been working on a new, modern role-based UI for Cloudstack (project
>> Primate: https://github.com/shapeblue/primate) I demoed this for the
>> first time at CCCNA19 last week and it was very well received. It was
>> discussed, at length, as an item in the hackathon and the general consensus
>> there was that this could become Cloudstacks new UI. We discussed a plan to
>> achieve that and now I’m bringing that plan to the list for discussion.
>> 
>> 
>> 
>> == Background ==
>> 
>> 
>> The current CloudStack UI has grown technical debt over time and it has
>> become harder to extend, develop, maintain in the long run, it is also
>> difficult for new contributors to learn and get started. Since late 2018, I
>> started working on a side-project with the aim to create a modern
>> progressive and role-based declaratively-programmed UI for CloudStack,
>> called Primate. Before creating Primate, I set out to create a list of core
>> requirements of what would give us an extensible, modern UI that was easy
>> to develop now and in the future. These are the requirements I came up with:
>> 
>>  *   designed from ground up to be  a complete replacement for our
>> combined user/admin UI
>>  *   to respect all entities in cloudstack and not make assumptions on
>> use-cases of cloudstack
>>  *   data-driven and auto-generation of UI widgets and to be easy to
>> learn, develop, extend, customise and maintain.
>>  *   declarative programming
>>  *   support for API discovery and parameter completion like CloudMonkey
>>  *   support for custom roles
>> 
>> 
>> 
>> I looked at existing Cloudstack UI projects but none of them fully
>> satisfied all these requirements and started Primate.
>> 
>> 
>> 
>> == Project Primate ==
>> 
>> 
>> For the implementation, I compared a couple of opensource JS and UI
>> frameworks and decided to use VueJS (https://vuejs.org)
>> which is a JavaScript framework and AntD (https://ant.design<
>> https://ant.design/>) which is a UI design language with a well-defined
>> spec, styling guide, and an implementation-specific to VueJS. VueJS was
>> selected because among a few other JS frameworks I surveyed it was the
>> easiest (for me) to learn and get started. I also surveyed a few UI
>> frameworks and selected AntD because it came with a well-defined spec,
>> styling guide and VueJS specific implementation which gives several
>> re-usable components out of the box.
>> 
>> 
>> 
>> During the development of Primate, I used my previous experience from
>> CloudMonkey and another PoC angular-based UI ProjectX, and it currently
>> supports:
>> 
>>  *   role-based UI based on API autodiscovery
>>  *   auto-generated action/API forms with parameter completion
>>  *   declarative component-driven views
>>  *   modern programming methodologies (hot reloading, npm based
>> build/run/compile etc.)
>>  *   decoupled from core Cloudstack code
>>  *   dynamic translation (most/many of old translation files ported)
>>  *   includes dashboards, async job/API polling, all list views/tables
>> per the old UI
>>  *   browser history and url/route driven navigation
>>  *   support for mobiles/tables/desktop screens
>>  *   configuration driven UI customisation (of navigation, icons, APIs
>> etc)
>> 
>> 
>> 
>> To get to this point, I’ve had some valuable help from Anurag and Sven et
>> al at EWerk.
>> The development strategy to support all APIs out of the box in a
>> data-driven way gives a functioning UI and scope to customise
>> views/components over time. Support to declaratively add actions on all
>> views and some action/customisation (ex. vm/zone deployment wizard) is in
>> progress. The work was recently discussed and demo-ed at CCCNA19, the
>> slides of my talk are here:
>> https://rohityadav.cloud/files/talks/cccna19-primate.pdf
>> 
>> 
>> 
>> == Discussion ==
>> 
>> 
>> 
>> With this discussion thread, I want to propose the idea hatched in the
>> recent hackathon for Primate to become the next UI for CloudStack. I’d like
>> to seek everybody's thoughts, feedback, comments, and reviews on that idea.
>> 
>> Obviously, part of any new UI project would mean that the existing UI
>> development would eventually get abandoned. In the hackathon we discussed a
>> potential plan to formally deprecate the old 

Re: [DISCUSS] Primate - new UI for CloudStack?

[Siddhartha Kattoju]

+1 from me as well.

Just a side note: I feel like there is a high risk of tldr here. May be its
just me. It may be would be good to put most of the details in a wiki page
and just post a summarized version on the list ?

*Sid Kattoju*

Cloud Software Architect | Professional Services

c 514.466.0951


* *




On Fri, Sep 20, 2019 at 8:10 AM Rohit Yadav 
wrote:

> All,
>
>
>
> == Summary ==
>
>
> I have been working on a new, modern role-based UI for Cloudstack (project
> Primate: https://github.com/shapeblue/primate) I demoed this for the
> first time at CCCNA19 last week and it was very well received. It was
> discussed, at length, as an item in the hackathon and the general consensus
> there was that this could become Cloudstacks new UI. We discussed a plan to
> achieve that and now I’m bringing that plan to the list for discussion.
>
>
>
> == Background ==
>
>
> The current CloudStack UI has grown technical debt over time and it has
> become harder to extend, develop, maintain in the long run, it is also
> difficult for new contributors to learn and get started. Since late 2018, I
> started working on a side-project with the aim to create a modern
> progressive and role-based declaratively-programmed UI for CloudStack,
> called Primate. Before creating Primate, I set out to create a list of core
> requirements of what would give us an extensible, modern UI that was easy
> to develop now and in the future. These are the requirements I came up with:
>
>   *   designed from ground up to be  a complete replacement for our
> combined user/admin UI
>   *   to respect all entities in cloudstack and not make assumptions on
> use-cases of cloudstack
>   *   data-driven and auto-generation of UI widgets and to be easy to
> learn, develop, extend, customise and maintain.
>   *   declarative programming
>   *   support for API discovery and parameter completion like CloudMonkey
>   *   support for custom roles
>
>
>
> I looked at existing Cloudstack UI projects but none of them fully
> satisfied all these requirements and started Primate.
>
>
>
> == Project Primate ==
>
>
> For the implementation, I compared a couple of opensource JS and UI
> frameworks and decided to use VueJS (https://vuejs.org)
> which is a JavaScript framework and AntD (https://ant.design<
> https://ant.design/>) which is a UI design language with a well-defined
> spec, styling guide, and an implementation-specific to VueJS. VueJS was
> selected because among a few other JS frameworks I surveyed it was the
> easiest (for me) to learn and get started. I also surveyed a few UI
> frameworks and selected AntD because it came with a well-defined spec,
> styling guide and VueJS specific implementation which gives several
> re-usable components out of the box.
>
>
>
> During the development of Primate, I used my previous experience from
> CloudMonkey and another PoC angular-based UI ProjectX, and it currently
> supports:
>
>   *   role-based UI based on API autodiscovery
>   *   auto-generated action/API forms with parameter completion
>   *   declarative component-driven views
>   *   modern programming methodologies (hot reloading, npm based
> build/run/compile etc.)
>   *   decoupled from core Cloudstack code
>   *   dynamic translation (most/many of old translation files ported)
>   *   includes dashboards, async job/API polling, all list views/tables
> per the old UI
>   *   browser history and url/route driven navigation
>   *   support for mobiles/tables/desktop screens
>   *   configuration driven UI customisation (of navigation, icons, APIs
> etc)
>
>
>
> To get to this point, I’ve had some valuable help from Anurag and Sven et
> al at EWerk.
> The development strategy to support all APIs out of the box in a
> data-driven way gives a functioning UI and scope to customise
> views/components over time. Support to declaratively add actions on all
> views and some action/customisation (ex. vm/zone deployment wizard) is in
> progress. The work was recently discussed and demo-ed at CCCNA19, the
> slides of my talk are here:
> https://rohityadav.cloud/files/talks/cccna19-primate.pdf
>
>
>
> == Discussion ==
>
>
>
> With this discussion thread, I want to propose the idea hatched in the
> recent hackathon for Primate to become the next UI for CloudStack. I’d like
> to seek everybody's thoughts, feedback, comments, and reviews on that idea.
>
> Obviously, part of any new UI project would mean that the existing UI
> development would eventually get abandoned. In the hackathon we discussed a
> potential plan to formally deprecate the old UI. I therefore think that
> this is something that needs discussion here and a vote if its going to
> happen.
>
>
>
> In summary, that plan is as follows (with proposed timeframes in
> [brackets]) :
>
>   *   allow the community to download & experience the UI
>   *   discuss and gather consensus around Primate [now]
>   *   take a vote on whether to take this plan forward 

Re: [DISCUSS] Primate - new UI for CloudStack?

[Andrija Panic]

Hi Rohit,

been on CCC19NA and I'm fine with the whole idea (having seen everything,
etc.)

One thing to clarify: you mentioned "old UI reaches EOL in Winter lts 2020,
old UI codebase is removed from codebase" - but later stated, that since we
support LTS until 2022, that means "but, with no new UI functionality after
summer 2020".

So just to clarify WHEN actually is the old UI being finally removed
(codebase removed) from the product.

Everything else - a humble +1 for the great work you've done.

Andrija

On Fri, 20 Sep 2019 at 14:10, Rohit Yadav  wrote:

> All,
>
>
>
> == Summary ==
>
>
> I have been working on a new, modern role-based UI for Cloudstack (project
> Primate: https://github.com/shapeblue/primate) I demoed this for the
> first time at CCCNA19 last week and it was very well received. It was
> discussed, at length, as an item in the hackathon and the general consensus
> there was that this could become Cloudstacks new UI. We discussed a plan to
> achieve that and now I’m bringing that plan to the list for discussion.
>
>
>
> == Background ==
>
>
> The current CloudStack UI has grown technical debt over time and it has
> become harder to extend, develop, maintain in the long run, it is also
> difficult for new contributors to learn and get started. Since late 2018, I
> started working on a side-project with the aim to create a modern
> progressive and role-based declaratively-programmed UI for CloudStack,
> called Primate. Before creating Primate, I set out to create a list of core
> requirements of what would give us an extensible, modern UI that was easy
> to develop now and in the future. These are the requirements I came up with:
>
>   *   designed from ground up to be  a complete replacement for our
> combined user/admin UI
>   *   to respect all entities in cloudstack and not make assumptions on
> use-cases of cloudstack
>   *   data-driven and auto-generation of UI widgets and to be easy to
> learn, develop, extend, customise and maintain.
>   *   declarative programming
>   *   support for API discovery and parameter completion like CloudMonkey
>   *   support for custom roles
>
>
>
> I looked at existing Cloudstack UI projects but none of them fully
> satisfied all these requirements and started Primate.
>
>
>
> == Project Primate ==
>
>
> For the implementation, I compared a couple of opensource JS and UI
> frameworks and decided to use VueJS (https://vuejs.org)
> which is a JavaScript framework and AntD (https://ant.design<
> https://ant.design/>) which is a UI design language with a well-defined
> spec, styling guide, and an implementation-specific to VueJS. VueJS was
> selected because among a few other JS frameworks I surveyed it was the
> easiest (for me) to learn and get started. I also surveyed a few UI
> frameworks and selected AntD because it came with a well-defined spec,
> styling guide and VueJS specific implementation which gives several
> re-usable components out of the box.
>
>
>
> During the development of Primate, I used my previous experience from
> CloudMonkey and another PoC angular-based UI ProjectX, and it currently
> supports:
>
>   *   role-based UI based on API autodiscovery
>   *   auto-generated action/API forms with parameter completion
>   *   declarative component-driven views
>   *   modern programming methodologies (hot reloading, npm based
> build/run/compile etc.)
>   *   decoupled from core Cloudstack code
>   *   dynamic translation (most/many of old translation files ported)
>   *   includes dashboards, async job/API polling, all list views/tables
> per the old UI
>   *   browser history and url/route driven navigation
>   *   support for mobiles/tables/desktop screens
>   *   configuration driven UI customisation (of navigation, icons, APIs
> etc)
>
>
>
> To get to this point, I’ve had some valuable help from Anurag and Sven et
> al at EWerk.
> The development strategy to support all APIs out of the box in a
> data-driven way gives a functioning UI and scope to customise
> views/components over time. Support to declaratively add actions on all
> views and some action/customisation (ex. vm/zone deployment wizard) is in
> progress. The work was recently discussed and demo-ed at CCCNA19, the
> slides of my talk are here:
> https://rohityadav.cloud/files/talks/cccna19-primate.pdf
>
>
>
> == Discussion ==
>
>
>
> With this discussion thread, I want to propose the idea hatched in the
> recent hackathon for Primate to become the next UI for CloudStack. I’d like
> to seek everybody's thoughts, feedback, comments, and reviews on that idea.
>
> Obviously, part of any new UI project would mean that the existing UI
> development would eventually get abandoned. In the hackathon we discussed a
> potential plan to formally deprecate the old UI. I therefore think that
> this is something that needs discussion here and a vote if its going to
> happen.
>
>
>
> In summary, that plan is as follows (with proposed timeframes in
> [brackets]) :
>

[DISCUSS] Primate - new UI for CloudStack?

[Rohit Yadav]

All,



== Summary ==


I have been working on a new, modern role-based UI for Cloudstack (project 
Primate: https://github.com/shapeblue/primate) I demoed this for the first time 
at CCCNA19 last week and it was very well received. It was discussed, at 
length, as an item in the hackathon and the general consensus there was that 
this could become Cloudstacks new UI. We discussed a plan to achieve that and 
now I’m bringing that plan to the list for discussion.



== Background ==


The current CloudStack UI has grown technical debt over time and it has become 
harder to extend, develop, maintain in the long run, it is also difficult for 
new contributors to learn and get started. Since late 2018, I started working 
on a side-project with the aim to create a modern progressive and role-based 
declaratively-programmed UI for CloudStack, called Primate. Before creating 
Primate, I set out to create a list of core requirements of what would give us 
an extensible, modern UI that was easy to develop now and in the future. These 
are the requirements I came up with:

  *   designed from ground up to be  a complete replacement for our combined 
user/admin UI
  *   to respect all entities in cloudstack and not make assumptions on 
use-cases of cloudstack
  *   data-driven and auto-generation of UI widgets and to be easy to learn, 
develop, extend, customise and maintain.
  *   declarative programming
  *   support for API discovery and parameter completion like CloudMonkey
  *   support for custom roles



I looked at existing Cloudstack UI projects but none of them fully satisfied 
all these requirements and started Primate.



== Project Primate ==


For the implementation, I compared a couple of opensource JS and UI frameworks 
and decided to use VueJS (https://vuejs.org) which is a 
JavaScript framework and AntD (https://ant.design) which 
is a UI design language with a well-defined spec, styling guide, and an 
implementation-specific to VueJS. VueJS was selected because among a few other 
JS frameworks I surveyed it was the easiest (for me) to learn and get started. 
I also surveyed a few UI frameworks and selected AntD because it came with a 
well-defined spec, styling guide and VueJS specific implementation which gives 
several re-usable components out of the box.



During the development of Primate, I used my previous experience from 
CloudMonkey and another PoC angular-based UI ProjectX, and it currently 
supports:

  *   role-based UI based on API autodiscovery
  *   auto-generated action/API forms with parameter completion
  *   declarative component-driven views
  *   modern programming methodologies (hot reloading, npm based 
build/run/compile etc.)
  *   decoupled from core Cloudstack code
  *   dynamic translation (most/many of old translation files ported)
  *   includes dashboards, async job/API polling, all list views/tables per the 
old UI
  *   browser history and url/route driven navigation
  *   support for mobiles/tables/desktop screens
  *   configuration driven UI customisation (of navigation, icons, APIs etc)



To get to this point, I’ve had some valuable help from Anurag and Sven et al at 
EWerk.
The development strategy to support all APIs out of the box in a data-driven 
way gives a functioning UI and scope to customise views/components over time. 
Support to declaratively add actions on all views and some action/customisation 
(ex. vm/zone deployment wizard) is in progress. The work was recently discussed 
and demo-ed at CCCNA19, the slides of my talk are here: 
https://rohityadav.cloud/files/talks/cccna19-primate.pdf



== Discussion ==



With this discussion thread, I want to propose the idea hatched in the recent 
hackathon for Primate to become the next UI for CloudStack. I’d like to seek 
everybody's thoughts, feedback, comments, and reviews on that idea.

Obviously, part of any new UI project would mean that the existing UI 
development would eventually get abandoned. In the hackathon we discussed a 
potential plan to formally deprecate the old UI. I therefore think that this is 
something that needs discussion here and a vote if its going to happen.



In summary, that plan is as follows (with proposed timeframes in [brackets]) :

  *   allow the community to download & experience the UI
  *   discuss and gather consensus around Primate [now]
  *   take a vote on whether to take this plan forward [next few weeks]
  *   create a new repository under Cloudstack and accept Primate codebase, 
work on initial documentation with getting started, styling guide etc (i.e. 
make this part of the cloudstack project) [after the vote, if agreed]
  *   collaborate to get primate to be functionally on-par with current 
CloudStack UI, gather feedback, issues, iterate development/testing etc. [2-3 
months before winter LTS release]
  *   release Primate with winter LTS 2019 release as a technical preview and 
also give notice of deprecation plan