cloudstack-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Brian Federle <Brian.Fede...@citrix.com>
Subject RE: [ACS4.5] GUI Question
Date Tue, 29 Jul 2014 20:48:33 GMT
I think the main area to look in is dialog.js, which handles rendering the form dialogs.

One possible approach:


-          Edit the dialog.js -> ‘createForm’ widget function, find the each loop where
the fields are iterated

-          Here, you can check for a new type param of your choosing (such as field.type ===
‘tagger’). The ‘type’ is determined by a bunch of if-else statements -- nothing fancy
☺

-          If the field matches this type, there is already a ‘tagger’ widget that you
can use to render a comma-delimited tag list. You can see the code in ui/widgets/tagger.js
for how it can be implemented. It uses the jQuery widget model, like the rest of the CS UI
components.

-          You’ll probably have to tweak the CSS styles to fit the tagger widget into the
dialog properly (since right now it is only used in some detail views).

-          Edit createForm’s ‘complete’ function, which is triggered after pressing
OK and before passing the data to whatever action needs it. Here, you can parse the tag fields
and append stuff to the ‘data’ object, which contains the other serialized form data.
The ‘data’ object will finally be passed to the action’s API calls.

-          You can then add more fields to the existing dialog(s), and edit their AJAX calls
to read your new tag-type fields.

Hope that helps.

-Brian

From: Mike Tutkowski [mailto:mike.tutkowski@solidfire.com]
Sent: Monday, July 28, 2014 6:49 PM
To: dev@cloudstack.apache.org
Cc: Brian Federle; Jessica Wang; Alena Prokharchyk; Seif Eddine Jemli
Subject: Re: [ACS4.5] GUI Question

Just to add a bit more detail:

Seif is looking to create a new dialog that can utilize this control. One could access this
new dialog - perhaps - by clicking on a new button to the right of the Storage Tags text field
(ex. in the Add Primary Storage dialog). This new dialog would utilize the new control to
show the admin all existing storage tags, allow for tags to be selected, and provide hints
when a user types in a new tag. When this dialog is OKed, the storage tags can be listed in
a comma-separated fashion in the, say, Add Primary Storage dialog. This way the admin doesn't
have to guess at storage tags when entering them in a manual fashion.

On Mon, Jul 28, 2014 at 7:43 PM, Mike Tutkowski <mike.tutkowski@solidfire.com<mailto:mike.tutkowski@solidfire.com>>
wrote:
Hi,

My student for GSoC, Seif, was interested in adding this control to CloudStack's GUI codebase:

http://loopj.com/jquery-tokeninput/

He's already written a new API command that retrieves a list of storage tags (in addition
to other work for GSoC).

Ideally he would be able to augment a couple dialogs that use storage tags to make use of
this control so that admins could more easily input storage tags (ex. they could see existing
storage tags in a list and be assisted by suggestions when typing in a storage tag).

Would anyone (I've CCed some people who often work on the CS GUI) be able to provide Seif
insight into where he should start with this task? It might make sense for him to extend this
control and then utilize this extension in multiple places in the GUI. It would be great if
he had a bit of guidance with regards to how this might fit into the existing CS GUI architecture.

Thanks!

--
Mike Tutkowski
Senior CloudStack Developer, SolidFire Inc.
e: mike.tutkowski@solidfire.com<mailto:mike.tutkowski@solidfire.com>
o: 303.746.7302<tel:303.746.7302>
Advancing the way the world uses the cloud<http://solidfire.com/solution/overview/?video=play>™



--
Mike Tutkowski
Senior CloudStack Developer, SolidFire Inc.
e: mike.tutkowski@solidfire.com<mailto:mike.tutkowski@solidfire.com>
o: 303.746.7302
Advancing the way the world uses the cloud<http://solidfire.com/solution/overview/?video=play>™
Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message