You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@cloudstack.apache.org by Илья Толстихин <in...@gmail.com> on 2015/11/08 15:05:51 UTC
UI customization
Hi all,
Could please help with the process of UI customization:
I have CloudStack 4.6.0 built from the source.
I want to add a custom button to the WebUI menu.
In file ui/scripts/cloudStack.js I added my button into sections array
*sections: {*
* /***
* * Dashboard*
* */*
* dashboard: {},*
* instances: {},*
* affinityGroups: {},*
* storage: {},*
* network: {},*
* templates: {},*
* events: {},*
* projects: {},*
* accounts: {},*
* domains: {}, //domain-admin and root-admin only*
* regions: {}, //root-admin only*
* system: {}, //root-admin only*
* 'global-settings': {}, //root-admin only*
* configuration: {}, //root-admin only*
* plugins: {},*
* test: {*
* title: 'TestSection',*
* id: 'TestSection',*
* show: function(args){*
* var div = document.createElement('div');*
* div.innerHTML = "<h1>Test section</h1>";*
* return div;*
* }*
* }*
* }*
and in sectionPreFilter array
*sectionPreFilter: function(args) {*
* var sections = [];*
* if (isAdmin()) {*
* sections = ["dashboard", "instances", "storage",
"network", "templates", "accounts", "domains", "events", "system",
"global-settings", "configuration", "projects", "regions",
"affinityGroups", "test"];*
After building the project, the button was added to the menu, but when I
edit cloudStack.js and restart jetty UI doesn't change, any changes are
applied only after the full project rebuild with command mvn
-Pdeveloper,systemvm -DskipTests clean install.
Jetty version 6.1.26
How to apply changes without rebuilding project?
And is it possible to apply it without restart Jetty?
Re: UI customization
Posted by ilya <il...@gmail.com>.
As per Vadim, plugins is the way to go.
Regards
-ilya
On 11/11/15 6:45 AM, Илья Толстихин wrote:
> Many thanks.
>
> 2015-11-09 18:29 GMT+06:00 Vadim Kimlaychuk <va...@kickcloud.net>:
>
>> From my opinion better way is to write a plugin:
>> http://docs.cloudstack.apache.org/en/latest/plugins.html#how-to-write-a-plugin-overview
>> and follow UI customization guide:
>> http://support.citrix.com/servlet/KbServlet/download/38315-102-714564/CloudPlatform_4.5_User_Interface_Customization.pdf
>>
>> Doing direct changes to cloudStack.js that are not contributed back to
>> community is guaranteed way to have problems after updates. You will have
>> to merge your code with mainstream all the time.
>>
>> Another way is to implement your own interface based on CS REST API. Doing
>> that for just 1 button is overkill for sure, but such changes will never
>> end as soon as you start to customize. Think about it. The easiest way is
>> not always the best one.
>>
>> Vadim.
>>
>> On 2015-11-09 13:58, Kshitij Kansal wrote:
>>
>> Hi,
>>>
>>> You can find the scripts at the location
>>> "client/target/generated-webapp/scripts/". Make changes to cloudstack.js
>>> here.
>>>
>>> *Note: *First remove the corresponding gz file(in your case
>>> cloudstack.js.gz) otherwise the changes won't reflect.
>>>
>>> *The changes in generated-webapps are not saved and tracked in git. So
>>> make
>>> sure to copy your changes to actual scripts (in ui/scripts) before finally
>>> rebuilding the project. *The changes made this way are directly reflected
>>>
>>> by refreshing the page.
>>>
>>> PS: Not sure if its the correct way to develop but it works :). Once
>>> again,
>>> make sure to copy your changes back to correct scripts before building the
>>> project.
>>>
>>> Regards,
>>> Kshitij
>>>
>>> On Mon, Nov 9, 2015 at 12:34 PM, Wei ZHOU <us...@gmail.com> wrote:
>>>
>>> I guess you worked on old version before.
>>> in 4.6, something changed. you might compress cloudStack.js to get
>>> cloudStack.js.gz as well.
>>>
>>> 2015-11-08 15:05 GMT+01:00 Илья Толстихин <in...@gmail.com>:
>>>
>>> Hi all,
>>>
>>> Could please help with the process of UI customization:
>>>
>>> I have CloudStack 4.6.0 built from the source.
>>> I want to add a custom button to the WebUI menu.
>>> In file ui/scripts/cloudStack.js I added my button into sections array
>>>
>>> *sections: {*
>>> * /***
>>> * * Dashboard*
>>> * */*
>>> * dashboard: {},*
>>> * instances: {},*
>>> * affinityGroups: {},*
>>> * storage: {},*
>>> * network: {},*
>>> * templates: {},*
>>> * events: {},*
>>> * projects: {},*
>>> * accounts: {},*
>>>
>>> * domains: {}, //domain-admin and root-admin only*
>>>
>>> * regions: {}, //root-admin only*
>>> * system: {}, //root-admin only*
>>> * 'global-settings': {}, //root-admin only*
>>> * configuration: {}, //root-admin only*
>>> * plugins: {},*
>>> * test: {*
>>> * title: 'TestSection',*
>>> * id: 'TestSection',*
>>> * show: function(args){*
>>> * var div = document.createElement('div');*
>>> * div.innerHTML = "<h1>Test section</h1>";*
>>> * return div;*
>>> * }*
>>> * }*
>>> * }*
>>>
>>> and in sectionPreFilter array
>>>
>>> *sectionPreFilter: function(args) {*
>>> * var sections = [];*
>>>
>>> * if (isAdmin()) {*
>>> * sections = ["dashboard", "instances", "storage",
>>> "network", "templates", "accounts", "domains", "events", "system",
>>> "global-settings", "configuration", "projects", "regions",
>>> "affinityGroups", "test"];*
>>>
>>> After building the project, the button was added to the menu, but when I
>>> edit cloudStack.js and restart jetty UI doesn't change, any changes are
>>> applied only after the full project rebuild with command mvn
>>> -Pdeveloper,systemvm -DskipTests clean install.
>>> Jetty version 6.1.26
>>>
>>> How to apply changes without rebuilding project?
>>> And is it possible to apply it without restart Jetty?
>>>
>>
>
Re: UI customization
Posted by Илья Толстихин <in...@gmail.com>.
Many thanks.
2015-11-09 18:29 GMT+06:00 Vadim Kimlaychuk <va...@kickcloud.net>:
> From my opinion better way is to write a plugin:
> http://docs.cloudstack.apache.org/en/latest/plugins.html#how-to-write-a-plugin-overview
> and follow UI customization guide:
> http://support.citrix.com/servlet/KbServlet/download/38315-102-714564/CloudPlatform_4.5_User_Interface_Customization.pdf
>
> Doing direct changes to cloudStack.js that are not contributed back to
> community is guaranteed way to have problems after updates. You will have
> to merge your code with mainstream all the time.
>
> Another way is to implement your own interface based on CS REST API. Doing
> that for just 1 button is overkill for sure, but such changes will never
> end as soon as you start to customize. Think about it. The easiest way is
> not always the best one.
>
> Vadim.
>
> On 2015-11-09 13:58, Kshitij Kansal wrote:
>
> Hi,
>>
>> You can find the scripts at the location
>> "client/target/generated-webapp/scripts/". Make changes to cloudstack.js
>> here.
>>
>> *Note: *First remove the corresponding gz file(in your case
>> cloudstack.js.gz) otherwise the changes won't reflect.
>>
>> *The changes in generated-webapps are not saved and tracked in git. So
>> make
>> sure to copy your changes to actual scripts (in ui/scripts) before finally
>> rebuilding the project. *The changes made this way are directly reflected
>>
>> by refreshing the page.
>>
>> PS: Not sure if its the correct way to develop but it works :). Once
>> again,
>> make sure to copy your changes back to correct scripts before building the
>> project.
>>
>> Regards,
>> Kshitij
>>
>> On Mon, Nov 9, 2015 at 12:34 PM, Wei ZHOU <us...@gmail.com> wrote:
>>
>> I guess you worked on old version before.
>> in 4.6, something changed. you might compress cloudStack.js to get
>> cloudStack.js.gz as well.
>>
>> 2015-11-08 15:05 GMT+01:00 Илья Толстихин <in...@gmail.com>:
>>
>> Hi all,
>>
>> Could please help with the process of UI customization:
>>
>> I have CloudStack 4.6.0 built from the source.
>> I want to add a custom button to the WebUI menu.
>> In file ui/scripts/cloudStack.js I added my button into sections array
>>
>> *sections: {*
>> * /***
>> * * Dashboard*
>> * */*
>> * dashboard: {},*
>> * instances: {},*
>> * affinityGroups: {},*
>> * storage: {},*
>> * network: {},*
>> * templates: {},*
>> * events: {},*
>> * projects: {},*
>> * accounts: {},*
>>
>> * domains: {}, //domain-admin and root-admin only*
>>
>> * regions: {}, //root-admin only*
>> * system: {}, //root-admin only*
>> * 'global-settings': {}, //root-admin only*
>> * configuration: {}, //root-admin only*
>> * plugins: {},*
>> * test: {*
>> * title: 'TestSection',*
>> * id: 'TestSection',*
>> * show: function(args){*
>> * var div = document.createElement('div');*
>> * div.innerHTML = "<h1>Test section</h1>";*
>> * return div;*
>> * }*
>> * }*
>> * }*
>>
>> and in sectionPreFilter array
>>
>> *sectionPreFilter: function(args) {*
>> * var sections = [];*
>>
>> * if (isAdmin()) {*
>> * sections = ["dashboard", "instances", "storage",
>> "network", "templates", "accounts", "domains", "events", "system",
>> "global-settings", "configuration", "projects", "regions",
>> "affinityGroups", "test"];*
>>
>> After building the project, the button was added to the menu, but when I
>> edit cloudStack.js and restart jetty UI doesn't change, any changes are
>> applied only after the full project rebuild with command mvn
>> -Pdeveloper,systemvm -DskipTests clean install.
>> Jetty version 6.1.26
>>
>> How to apply changes without rebuilding project?
>> And is it possible to apply it without restart Jetty?
>>
>
Re: UI customization
Posted by Vadim Kimlaychuk <va...@kickcloud.net>.
From my opinion better way is to write a plugin:
http://docs.cloudstack.apache.org/en/latest/plugins.html#how-to-write-a-plugin-overview
and follow UI customization guide:
http://support.citrix.com/servlet/KbServlet/download/38315-102-714564/CloudPlatform_4.5_User_Interface_Customization.pdf
Doing direct changes to cloudStack.js that are not contributed back to
community is guaranteed way to have problems after updates. You will
have to merge your code with mainstream all the time.
Another way is to implement your own interface based on CS REST API.
Doing that for just 1 button is overkill for sure, but such changes will
never end as soon as you start to customize. Think about it. The easiest
way is not always the best one.
Vadim.
On 2015-11-09 13:58, Kshitij Kansal wrote:
> Hi,
>
> You can find the scripts at the location
> "client/target/generated-webapp/scripts/". Make changes to
> cloudstack.js
> here.
>
> *Note: *First remove the corresponding gz file(in your case
> cloudstack.js.gz) otherwise the changes won't reflect.
>
> *The changes in generated-webapps are not saved and tracked in git. So
> make
> sure to copy your changes to actual scripts (in ui/scripts) before
> finally
> rebuilding the project. *The changes made this way are directly
> reflected
> by refreshing the page.
>
> PS: Not sure if its the correct way to develop but it works :). Once
> again,
> make sure to copy your changes back to correct scripts before building
> the
> project.
>
> Regards,
> Kshitij
>
> On Mon, Nov 9, 2015 at 12:34 PM, Wei ZHOU <us...@gmail.com>
> wrote:
>
> I guess you worked on old version before.
> in 4.6, something changed. you might compress cloudStack.js to get
> cloudStack.js.gz as well.
>
> 2015-11-08 15:05 GMT+01:00 Илья Толстихин <in...@gmail.com>:
>
> Hi all,
>
> Could please help with the process of UI customization:
>
> I have CloudStack 4.6.0 built from the source.
> I want to add a custom button to the WebUI menu.
> In file ui/scripts/cloudStack.js I added my button into sections array
>
> *sections: {*
> * /***
> * * Dashboard*
> * */*
> * dashboard: {},*
> * instances: {},*
> * affinityGroups: {},*
> * storage: {},*
> * network: {},*
> * templates: {},*
> * events: {},*
> * projects: {},*
> * accounts: {},*
>
> * domains: {}, //domain-admin and root-admin only*
>
> * regions: {}, //root-admin only*
> * system: {}, //root-admin only*
> * 'global-settings': {}, //root-admin only*
> * configuration: {}, //root-admin only*
> * plugins: {},*
> * test: {*
> * title: 'TestSection',*
> * id: 'TestSection',*
> * show: function(args){*
> * var div = document.createElement('div');*
> * div.innerHTML = "<h1>Test section</h1>";*
> * return div;*
> * }*
> * }*
> * }*
>
> and in sectionPreFilter array
>
> *sectionPreFilter: function(args) {*
> * var sections = [];*
>
> * if (isAdmin()) {*
> * sections = ["dashboard", "instances", "storage",
> "network", "templates", "accounts", "domains", "events", "system",
> "global-settings", "configuration", "projects", "regions",
> "affinityGroups", "test"];*
>
> After building the project, the button was added to the menu, but when
> I
> edit cloudStack.js and restart jetty UI doesn't change, any changes are
> applied only after the full project rebuild with command mvn
> -Pdeveloper,systemvm -DskipTests clean install.
> Jetty version 6.1.26
>
> How to apply changes without rebuilding project?
> And is it possible to apply it without restart Jetty?
Re: UI customization
Posted by Kshitij Kansal <ka...@gmail.com>.
Hi,
You can find the scripts at the location
"client/target/generated-webapp/scripts/". Make changes to cloudstack.js
here.
*Note: *First remove the corresponding gz file(in your case
cloudstack.js.gz) otherwise the changes won't reflect.
*The changes in generated-webapps are not saved and tracked in git. So make
sure to copy your changes to actual scripts (in ui/scripts) before finally
rebuilding the project. *The changes made this way are directly reflected
by refreshing the page.
PS: Not sure if its the correct way to develop but it works :). Once again,
make sure to copy your changes back to correct scripts before building the
project.
Regards,
Kshitij
On Mon, Nov 9, 2015 at 12:34 PM, Wei ZHOU <us...@gmail.com> wrote:
> I guess you worked on old version before.
> in 4.6, something changed. you might compress cloudStack.js to get
> cloudStack.js.gz as well.
>
>
> 2015-11-08 15:05 GMT+01:00 Илья Толстихин <in...@gmail.com>:
>
> > Hi all,
> >
> > Could please help with the process of UI customization:
> >
> > I have CloudStack 4.6.0 built from the source.
> > I want to add a custom button to the WebUI menu.
> > In file ui/scripts/cloudStack.js I added my button into sections array
> >
> > *sections: {*
> > * /***
> > * * Dashboard*
> > * */*
> > * dashboard: {},*
> > * instances: {},*
> > * affinityGroups: {},*
> > * storage: {},*
> > * network: {},*
> > * templates: {},*
> > * events: {},*
> > * projects: {},*
> > * accounts: {},*
> >
> > * domains: {}, //domain-admin and root-admin only*
> >
> > * regions: {}, //root-admin only*
> > * system: {}, //root-admin only*
> > * 'global-settings': {}, //root-admin only*
> > * configuration: {}, //root-admin only*
> > * plugins: {},*
> > * test: {*
> > * title: 'TestSection',*
> > * id: 'TestSection',*
> > * show: function(args){*
> > * var div = document.createElement('div');*
> > * div.innerHTML = "<h1>Test section</h1>";*
> > * return div;*
> > * }*
> > * }*
> > * }*
> >
> > and in sectionPreFilter array
> >
> > *sectionPreFilter: function(args) {*
> > * var sections = [];*
> >
> > * if (isAdmin()) {*
> > * sections = ["dashboard", "instances", "storage",
> > "network", "templates", "accounts", "domains", "events", "system",
> > "global-settings", "configuration", "projects", "regions",
> > "affinityGroups", "test"];*
> >
> > After building the project, the button was added to the menu, but when I
> > edit cloudStack.js and restart jetty UI doesn't change, any changes are
> > applied only after the full project rebuild with command mvn
> > -Pdeveloper,systemvm -DskipTests clean install.
> > Jetty version 6.1.26
> >
> > How to apply changes without rebuilding project?
> > And is it possible to apply it without restart Jetty?
> >
>
--
Kshitij Kansal
Re: UI customization
Posted by Wei ZHOU <us...@gmail.com>.
I guess you worked on old version before.
in 4.6, something changed. you might compress cloudStack.js to get
cloudStack.js.gz as well.
2015-11-08 15:05 GMT+01:00 Илья Толстихин <in...@gmail.com>:
> Hi all,
>
> Could please help with the process of UI customization:
>
> I have CloudStack 4.6.0 built from the source.
> I want to add a custom button to the WebUI menu.
> In file ui/scripts/cloudStack.js I added my button into sections array
>
> *sections: {*
> * /***
> * * Dashboard*
> * */*
> * dashboard: {},*
> * instances: {},*
> * affinityGroups: {},*
> * storage: {},*
> * network: {},*
> * templates: {},*
> * events: {},*
> * projects: {},*
> * accounts: {},*
>
> * domains: {}, //domain-admin and root-admin only*
>
> * regions: {}, //root-admin only*
> * system: {}, //root-admin only*
> * 'global-settings': {}, //root-admin only*
> * configuration: {}, //root-admin only*
> * plugins: {},*
> * test: {*
> * title: 'TestSection',*
> * id: 'TestSection',*
> * show: function(args){*
> * var div = document.createElement('div');*
> * div.innerHTML = "<h1>Test section</h1>";*
> * return div;*
> * }*
> * }*
> * }*
>
> and in sectionPreFilter array
>
> *sectionPreFilter: function(args) {*
> * var sections = [];*
>
> * if (isAdmin()) {*
> * sections = ["dashboard", "instances", "storage",
> "network", "templates", "accounts", "domains", "events", "system",
> "global-settings", "configuration", "projects", "regions",
> "affinityGroups", "test"];*
>
> After building the project, the button was added to the menu, but when I
> edit cloudStack.js and restart jetty UI doesn't change, any changes are
> applied only after the full project rebuild with command mvn
> -Pdeveloper,systemvm -DskipTests clean install.
> Jetty version 6.1.26
>
> How to apply changes without rebuilding project?
> And is it possible to apply it without restart Jetty?
>