[Engine-devel] [UX] how to design a bar/line chart?

Tomas Jelinek tjelinek at redhat.com
Tue Nov 12 14:50:07 UTC 2013 


----- Original Message -----
> From: "Alexander Wels" <awels at redhat.com>
> To: engine-devel at ovirt.org
> Cc: "Tomas Jelinek" <tjelinek at redhat.com>, "Michal Skrivanek" <michal.skrivanek at redhat.com>, "Eldan Hildesheim"
> <ehildesh at redhat.com>, "info" <info at eldanet.com>
> Sent: Tuesday, November 12, 2013 3:33:56 PM
> Subject: Re: [Engine-devel] [UX] how to design a bar/line chart?
> 
> On Tuesday, November 12, 2013 09:25:34 AM Tomas Jelinek wrote:
> > Hey all,
> > 
> > let me conclude what has been written in this thread to one proposal:
> > 
> > == From the UX perspective the behavior ==
> > - each time the FE will receive new data and this data are different from
> > the old ones, visualize it in the chart It means if you will keep pressing
> > the refresh button but the data will not change, no new data will be
> > visualized (an exception will be the 0 usage) - the amount of data
> > visualized will depend on the size of the widget (since the tables are
> > resizable). It means that if you make the widget bigger you will not see
> > the same chart bigger but more data. - If you make the widget bigger, only
> > then the amount of data will start to increase: e.g.
> > 
> > before resize:
> > | /-------\ |
> > |
> > |/         \|
> > 
> > after resize:
> > | /-------\          |
> > |
> > |/         \         |
> > 
> > and only now the new data will start to appear
> > 
> > == From FE technical point of view ==
> > - since I have not found any GWT library which would be acceptable (e.g.
> > actively developed and without the need to connect to google servers) and
> > given that the required chart is quite simple I guess it would be ok to
> > write it by myself. - according to Einav's mail it is ok to use HTML5
> > canvas so I would go with writing a new widget using HTML5 canvas
> > 
> 
> Just to throw out something to think about, we could also in theory generate
> an image on the server side and simply display that image inside the grid (so
> no need for HTML5 canvas or other things like that). The idea being basically
> that when the grid refreshes it makes a request for a new image on the back-
> end with the appropriate timeframe and the back-end generates the image which
> is easy to embed inside the grid.
> 
> pros:
> * Easy to embed inside grid (just an image tag).
> * Works on all browsers, even ones without HTML5 canvas support.
> cons:
> * More load on the back-end.
> * Extra round trips to back-end on refresh.
> * Not 'hot' like HTML5 canvas.
> * No interactivity if that is something we are interested in.

some more cons:
* need to remember the statistics on server in the memory. For thousands of VMs it is not something we would like to do
* lots of overhead to retrieve all the images on each refresh. If you have 100 VMs on a page and refresh each 5 seconds, it is 100 images transmitted 
  from engine to frontend each 5 seconds per one client (and we can have more of them of course)
* FE logic on Server is in general not awesome

> 
> > == From L&F point of view ==
> > - would look pretty much like the one proposed by Malini:
> > http://style.org/chartapi/sparklines/
> > 
> > == From data point of view ==
> > - do not do any averages on VDSM side (since it already does them for CPU
> > and network and the memory is stable enough) - do not do any averages on
> > engine side (since would have to be done for each FE separately and stored
> > in session which is a bit overcomplicated. If the user wants to see more
> > accurate data, he/she can change the refresh rate) - do not do any
> > interpolation since the data are already averaged and we will show only new
> > ones
> > 
> > @Malini,Einav,Eldan,Michal what do you think?
> > 
> > Tomas
> > 
> > ----- Original Message -----
> > 
> > > From: "Michal Skrivanek" <michal.skrivanek at redhat.com>
> > > To: "Tomas Jelinek" <tjelinek at redhat.com>, "Dan Kenigsberg"
> > > <danken at redhat.com> Cc: "Malini Rao" <mrao at redhat.com>, "Eldan
> > > Hildesheim" <ehildesh at redhat.com>, engine-devel at ovirt.org, "info"
> > > <info at eldanet.com>
> > > Sent: Tuesday, November 12, 2013 11:49:12 AM
> > > Subject: Re: [Engine-devel] [UX] how to design a bar/line chart?
> > > 
> > > On Nov 12, 2013, at 11:18 , Tomas Jelinek <tjelinek at redhat.com> wrote:
> > > > So we have looked into the resource usage sampling with mbetak and also
> > > > with Michal and it seems that
> > > > 
> > > > for the CPU usage:
> > > > - VDSM polls libvirt to get the runtime statistics of the VM regularly.
> > > > The
> > > > pooling interval is configured in
> > > > 
> > > >  vdsm.conf as vm_sample_cpu_interval and by default it is 15 seconds
> > > > 
> > > > - libvirt returns something we than use to calculate the average CPU
> > > > usage
> > > > since the last poll
> > > > - engine polls VDSM once in 15 seconds to get the current statistics
> > > > (the
> > > > same 15 seconds is just a coincidence and we can not count on this)
> > > > - than the frontend polls the engine each 5-60 seconds (depends on the
> > > > refresh rate) and gets the current value from the engine
> > > > - the user can press the refresh button anytime to poll the engine
> > > > again
> > > > 
> > > > For network usage:
> > > > - it should be pretty much the same as the CPU just the VDSM poll
> > > > interval
> > > > is configured as vm_sample_net_interval and by default it is 5 seconds
> > > 
> > > Dan, since we poll only every 15s and cpu info is 15s wouldn't it make
> > > sense to change the default for network monitoring to 15s as well? it's 2
> > > libvirt rounds trip for nothing really. Or does it serve some other
> > > purpose?>
> > > > For memory usage:
> > > > - guest agent sends a message to VDSM with the memory usage regularly.
> > > > The
> > > > interval is set in ovirt-guest-agent.conf as heart_beat_rate
> > > > 
> > > >  and by default it is 5 seconds
> > > > 
> > > > - the actual value sent by ovirt-guest-agent is the actual value at the
> > > > time when the value is sent (e.g. for Linux taken from "cat
> > > > /proc/meminfo")
> > > > - vdsm is doing no statistics on top of it, just remembers the last
> > > > value
> > > > taken from ovirt-guest-agent
> > > 
> > > which is fine, it doesn't change so often and there are typically no
> > > spikes
> > > 
> > > > - the rest of the poling is the same
> > > > 
> > > > So, visualizing this in some usable form will be quite challenging ;)
> > > > I see the following problems:
> > > > - if the VDSM gets the data faster than the engine polls it (and most
> > > > often
> > > > it does) than the info in between will be lost.
> > > > 
> > > >  The question is how big this problem is and if it is worth solving (I
> > > >  would say not for CPU which are averages but maybe yes for memory).
> > > >  Other question if there is a way how to solve it since the VDSM can be
> > > >  polled by anyone and it does not really care if someone polls it...
> > > >  (Michal?)
> > > 
> > > I'd say not solve it and try to keep it in sync on vdsm side with engine
> > > poll, to save unnecessary libvirt calls
> > > 
> > > > - we can lost some data between frontend<->engine if the polling
> > > > interval
> > > > of the FE is slower than the polling interval of the engine. This is
> > > > something
> > > > 
> > > >  not really worth solving because the user can set this according to
> > > >  the
> > > >  level of detail he/she wants
> > > 
> > > well, you should average the values in engine in case the FE refresh is
> > > >15s. Or add (refresh/15) of them
> > 
> > It is not that simple since you can have more frontends and not sure if it
> > would be a good idea to put this into the session...
> > 
> > > > - since we will get new info once in ~15 seconds, and the polling of
> > > > the
> > > > FE
> > > > is by default 5 seconds, do we want to do some interpolation? Or just
> > > > show
> > > > the
> > > > 
> > > >  same value 3 times? Or be smart and show only changed values? (this is
> > > >  tricky since there is a chance that it did not change - e.g. constant
> > > >  0
> > > >  mem usage if you have no guest agent)
> > > > 
> > > > - What if the user starts clicking to the refresh button? Do we want to
> > > > keep appending the same value if the engine still has only the old
> > > > ones?
> > > 
> > > just add a new line/point every 15s should be ok
> > > 
> > > Thanks,
> > > michal
> > > 
> > > > Tomas
> > > > 
> > > > ----- Original Message -----
> > > > 
> > > >> From: "Tomas Jelinek" <tjelinek at redhat.com>
> > > >> To: "Malini Rao" <mrao at redhat.com>
> > > >> Cc: "Eldan Hildesheim" <ehildesh at redhat.com>, engine-devel at ovirt.org,
> > > >> "info" <info at eldanet.com>
> > > >> Sent: Monday, November 11, 2013 4:23:09 PM
> > > >> Subject: Re: [Engine-devel] [UX] how to design a bar/line chart?
> > > >> 
> > > >> 
> > > >> 
> > > >> ----- Original Message -----
> > > >> 
> > > >>> From: "Malini Rao" <mrao at redhat.com>
> > > >>> To: "Eldan Hildesheim" <ehildesh at redhat.com>
> > > >>> Cc: "Tomas Jelinek" <tjelinek at redhat.com>, "info" <info at eldanet.com>,
> > > >>> engine-devel at ovirt.org
> > > >>> Sent: Monday, November 11, 2013 4:15:50 PM
> > > >>> Subject: Re: [Engine-devel] [UX] how to design a bar/line chart?
> > > >>> 
> > > >>> Is this going to fit in a row of a table? Or are we talking of a more
> > > >>> detailed view?
> > > >> 
> > > >> it should fit into one cell of the table
> > > >> 
> > > >>> ----- Original Message -----
> > > >>> From: "Eldan Hildesheim" <ehildesh at redhat.com>
> > > >>> To: "Tomas Jelinek" <tjelinek at redhat.com>
> > > >>> Cc: "info" <info at eldanet.com>, engine-devel at ovirt.org
> > > >>> Sent: Monday, November 11, 2013 8:01:07 AM
> > > >>> Subject: Re: [Engine-devel] [UX] how to design a bar/line chart?
> > > >>> 
> > > >>> Throw this gif into a browser. This is more or less what I thought.
> > > >>> Eldan
> > > >>> 
> > > >>> ----- Original Message -----
> > > >>> From: "Tomas Jelinek" <tjelinek at redhat.com>
> > > >>> To: "Eldan Hildesheim" <ehildesh at redhat.com>
> > > >>> Cc: "Einav Cohen" <ecohen at redhat.com>, "info" <info at eldanet.com>,
> > > >>> engine-devel at ovirt.org
> > > >>> Sent: Monday, November 11, 2013 12:03:15 PM
> > > >>> Subject: Re: [Engine-devel] [UX] how to design a bar/line chart?
> > > >>> 
> > > >>> 
> > > >>> 
> > > >>> ----- Original Message -----
> > > >>> 
> > > >>>> From: "Eldan Hildesheim" <ehildesh at redhat.com>
> > > >>>> To: "Einav Cohen" <ecohen at redhat.com>
> > > >>>> Cc: "info" <info at eldanet.com>, engine-devel at ovirt.org
> > > >>>> Sent: Sunday, November 10, 2013 3:56:57 PM
> > > >>>> Subject: Re: [Engine-devel] [UX] how to design a bar/line chart?
> > > >>>> 
> > > >>>> Hello all,
> > > >>>> We use to have a good solution in the period pre-WPF.
> > > >>>> A line chart (used to be in flash) that works like a plotter:
> > > >>>> The Line Bar (not bar) had a small animation that shifted all the
> > > >>>> bar
> > > >>>> to
> > > >>>> the
> > > >>>> left.
> > > >>>> When a new data arrived it just added a new line (to the right) and
> > > >>>> as I
> > > >>>> said
> > > >>>> before, in parallel it always shifted slowly to the left.
> > > >>> 
> > > >>> Any chance you still have some screenshot or mockup so I can imagine
> > > >>> it
> > > >>> better?
> > > >>> 
> > > >>>> The animation gives the impression that data is streaming and when a
> > > >>>> real
> > > >>>> new
> > > >>>> data arrives the user gets it very fast.
> > > >>>> We have to sync between the animation and the rate of the arrival of
> > > >>>> the
> > > >>>> data
> > > >>>> but this is easy.
> > > >>>> If we can't find a good framework it can be created from scratch
> > > >>>> with
> > > >>>> JS,
> > > >>>> svg
> > > >>>> or canvas.
> > > >>> 
> > > >>> We need to be careful about what we will use. oVirt is supposed to
> > > >>> work
> > > >>> on
> > > >>> FF
> > > >>> 17 [1]
> > > >>> but the HTML5 canvas works only since FF23 [2].
> > > >>> 
> > > >>> @Einav:
> > > >>> Is there a chance that we could start support only FF23+ and IE9+
> > > >>> (this
> > > >>> one
> > > >>> is already OK)
> > > >>> because of this feature?
> > > >>> 
> > > >>>> Now regarding its position:
> > > >>>> Rollover is good but not enough, we should somehow put it in the
> > > >>>> lower
> > > >>>> panel
> > > >>>> under general or even another tab - (live data).
> > > >>> 
> > > >>> This is a bit different requirement. The point of this specific is to
> > > >>> give
> > > >>> a
> > > >>> better
> > > >>> overview in the main tab. If it will be done we can decide if we want
> > > >>> to
> > > >>> give
> > > >>> more
> > > >>> details in sub tabs.
> > > >>> 
> > > >>>> We could later on have a (live data Tab) in other places as well
> > > >>>> like
> > > >>>> host,
> > > >>>> cluster...
> > > >>>> Eldan
> > > >>> 
> > > >>> [1]: http://www.ovirt.org/Download
> > > >>> [2]: http://caniuse.com/#feat=canvas
> > > >>> 
> > > >>>> ----- Original Message -----
> > > >>>> From: "Einav Cohen" <ecohen at redhat.com>
> > > >>>> To: "Ewoud Kohl van Wijngaarden" <ewoud+ovirt at kohlvanwijngaarden.nl>
> > > >>>> Cc: "Alexander Wels" <awels at redhat.com>, "Eldan Hildesheim"
> > > >>>> <ehildesh at redhat.com>, engine-devel at ovirt.org, "info"
> > > >>>> <info at eldanet.com>
> > > >>>> Sent: Friday, November 8, 2013 10:50:10 PM
> > > >>>> Subject: Re: [Engine-devel] [UX] how to design a bar/line chart?
> > > >>>> 
> > > >>>>> ----- Original Message -----
> > > >>>>> From: "Ewoud Kohl van Wijngaarden"
> > > >>>>> <ewoud+ovirt at kohlvanwijngaarden.nl>
> > > >>>>> Sent: Thursday, November 7, 2013 11:44:07 AM
> > > >>>>> 
> > > >>>>> On Wed, Nov 06, 2013 at 11:45:36AM -0500, Alexander Wels wrote:
> > > >>>>>> I suppose we need to answer a few questions before we can go into
> > > >>>>>> which
> > > >>>>>> library is better:
> > > >>>>>> 
> > > >>>>>> 1. Do we mind sending data over to Google so Google can render
> > > >>>>>> images
> > > >>>>>> for
> > > >>>>>> us.
> > > >>>>> 
> > > >>>>> I'd say no. Even from a reliability point of view since users may
> > > >>>>> have
> > > >>>>> systems that aren't connected to the internet.
> > > >>>> 
> > > >>>> +1
> > > >>>> 
> > > >>>>> (Though I don't know how well oVirt handles this currently.)
> > > >>>> 
> > > >>>> AFAIK - oVirt is handling it ('it' ==  having no internet
> > > >>>> connection)
> > > >>>> well.
> > > >>>> _______________________________________________
> > > >>>> Engine-devel mailing list
> > > >>>> Engine-devel at ovirt.org
> > > >>>> http://lists.ovirt.org/mailman/listinfo/engine-devel
> > > >>> 
> > > >>> _______________________________________________
> > > >>> Engine-devel mailing list
> > > >>> Engine-devel at ovirt.org
> > > >>> http://lists.ovirt.org/mailman/listinfo/engine-devel
> > > >> 
> > > >> _______________________________________________
> > > >> Engine-devel mailing list
> > > >> Engine-devel at ovirt.org
> > > >> http://lists.ovirt.org/mailman/listinfo/engine-devel
> > 
> > _______________________________________________
> > Engine-devel mailing list
> > Engine-devel at ovirt.org
> > http://lists.ovirt.org/mailman/listinfo/engine-devel
> 
>

More information about the Devel mailing list