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

----- Original Message ----- > From: "Alexander Wels" <awels(a)redhat.com&gt; > To: engine-devel(a)ovirt.org > Cc: "Tomas Jelinek" <tjelinek(a)redhat.com&gt;, "Michal Skrivanek" > <michal.skrivanek(a)redhat.com&gt;, "Eldan Hildesheim" <ehildesh(a)redhat.com&gt;, > "info" <info(a)eldanet.com&gt; > 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(a)redhat.com&gt; > > > To: "Tomas Jelinek" <tjelinek(a)redhat.com&gt;, "Dan Kenigsberg" > > > <danken(a)redhat.com&gt; Cc: "Malini Rao" <mrao(a)redhat.com&gt;, "Eldan > > > Hildesheim" <ehildesh(a)redhat.com&gt;, engine-devel(a)ovirt.org, "info" > > > <info(a)eldanet.com&gt; > > > 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(a)redhat.com&gt; 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(a)redhat.com&gt; > > > >> To: "Malini Rao" <mrao(a)redhat.com&gt; > > > >> Cc: "Eldan Hildesheim" <ehildesh(a)redhat.com&gt;, > > > >> engine-devel(a)ovirt.org, > > > >> "info" <info(a)eldanet.com&gt; > > > >> 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(a)redhat.com&gt; > > > >>> To: "Eldan Hildesheim" <ehildesh(a)redhat.com&gt; > > > >>> Cc: "Tomas Jelinek" <tjelinek(a)redhat.com&gt;, "info" > > > >>> <info(a)eldanet.com&gt;, > > > >>> engine-devel(a)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(a)redhat.com&gt; > > > >>> To: "Tomas Jelinek" <tjelinek(a)redhat.com&gt; > > > >>> Cc: "info" <info(a)eldanet.com&gt;, engine-devel(a)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(a)redhat.com&gt; > > > >>> To: "Eldan Hildesheim" <ehildesh(a)redhat.com&gt; > > > >>> Cc: "Einav Cohen" <ecohen(a)redhat.com&gt;, "info" <info(a)eldanet.com&gt;, > > > >>> engine-devel(a)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(a)redhat.com&gt; > > > >>>> To: "Einav Cohen" <ecohen(a)redhat.com&gt; > > > >>>> Cc: "info" <info(a)eldanet.com&gt;, engine-devel(a)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(a)redhat.com&gt; > > > >>>> To: "Ewoud Kohl van Wijngaarden" > > > >>>> <ewoud+ovirt(a)kohlvanwijngaarden.nl&gt; > > > >>>> Cc: "Alexander Wels" <awels(a)redhat.com&gt;, "Eldan Hildesheim" > > > >>>> <ehildesh(a)redhat.com&gt;, engine-devel(a)ovirt.org, "info" > > > >>>> <info(a)eldanet.com&gt; > > > >>>> 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(a)kohlvanwijngaarden.nl&gt; > > > >>>>> 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(a)ovirt.org > > > >>>> http://lists.ovirt.org/mailman/listinfo/engine-devel > > > >>> > > > >>> _______________________________________________ > > > >>> Engine-devel mailing list > > > >>> Engine-devel(a)ovirt.org > > > >>> http://lists.ovirt.org/mailman/listinfo/engine-devel > > > >> > > > >> _______________________________________________ > > > >> Engine-devel mailing list > > > >> Engine-devel(a)ovirt.org > > > >> http://lists.ovirt.org/mailman/listinfo/engine-devel > > > > _______________________________________________ > > Engine-devel mailing list > > Engine-devel(a)ovirt.org > > http://lists.ovirt.org/mailman/listinfo/engine-devel