You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@mesos.apache.org by Shingo Omura <ev...@gmail.com> on 2013/11/05 00:05:50 UTC
Review Request 15215: Support displaying some charts in mesos webui
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/
-----------------------------------------------------------
Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
Repository: mesos-git
Description
-------
Support d3 bar charts for slaves, tasks, resources in mesos webui.
- introduced d3 angular module and d3-bar angular directive.
- tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
tipsy: https://gist.github.com/ilyabo/1373263
- color scheme would be changed for better presentation.
JIRA: https://issues.apache.org/jira/browse/MESOS-797
Diffs
-----
src/webui/master/static/css/d3-bar.css PRE-CREATION
src/webui/master/static/css/tipsy.css PRE-CREATION
src/webui/master/static/home.html 4f9e2d9
src/webui/master/static/index.html 47403d8
src/webui/master/static/js/app.js b918799
src/webui/master/static/js/controllers.js 0c930a2
src/webui/master/static/js/d3.v.3.3.9.js PRE-CREATION
src/webui/master/static/js/d3.v.3.3.9.min.js PRE-CREATION
src/webui/master/static/js/jquery.tipsy.js PRE-CREATION
Diff: https://reviews.apache.org/r/15215/diff/
Testing
-------
testing on my laptop, single host deployment.
using mesos-execute, I confirmed the bar charts was updated.
screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
Thanks,
Shingo Omura
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Ross Allen <ro...@mesosphere.io>.
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/#review28206
-----------------------------------------------------------
src/webui/master/static/js/app.js
<https://reviews.apache.org/r/15215/#comment54886>
Use the Angular $window service instead a global: http://docs-angularjs-org-dev.appspot.com/api/ng.$window
src/webui/master/static/js/app.js
<https://reviews.apache.org/r/15215/#comment54890>
`window.resize` fires a lot when resizing the window, which will cause a bunch of `scope.$apply` calls that are not necessary and potentially expensive.
Can you throttle the calls be 1 every second or so?
Underscore provides a `throttle` function for this purpose: http://underscorejs.org/#throttle
src/webui/master/static/js/app.js
<https://reviews.apache.org/r/15215/#comment54892>
The return value of `reduce` is not being used here, so this can just be a forEach:
data.forEach(function(...
- Ross Allen
On Nov. 4, 2013, 11:05 p.m., Shingo Omura wrote:
>
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://reviews.apache.org/r/15215/
> -----------------------------------------------------------
>
> (Updated Nov. 4, 2013, 11:05 p.m.)
>
>
> Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
>
>
> Repository: mesos-git
>
>
> Description
> -------
>
> Support d3 bar charts for slaves, tasks, resources in mesos webui.
>
> - introduced d3 angular module and d3-bar angular directive.
> - tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
> tipsy: https://gist.github.com/ilyabo/1373263
> - color scheme would be changed for better presentation.
>
> JIRA: https://issues.apache.org/jira/browse/MESOS-797
>
>
> Diffs
> -----
>
> src/webui/master/static/css/d3-bar.css PRE-CREATION
> src/webui/master/static/css/tipsy.css PRE-CREATION
> src/webui/master/static/home.html 4f9e2d9
> src/webui/master/static/index.html 47403d8
> src/webui/master/static/js/app.js b918799
> src/webui/master/static/js/controllers.js 0c930a2
> src/webui/master/static/js/d3.v.3.3.9.js PRE-CREATION
> src/webui/master/static/js/d3.v.3.3.9.min.js PRE-CREATION
> src/webui/master/static/js/jquery.tipsy.js PRE-CREATION
>
> Diff: https://reviews.apache.org/r/15215/diff/
>
>
> Testing
> -------
>
> testing on my laptop, single host deployment.
> using mesos-execute, I confirmed the bar charts was updated.
> screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
>
>
> Thanks,
>
> Shingo Omura
>
>
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Ross Allen <ro...@mesosphere.io>.
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/#review28460
-----------------------------------------------------------
src/webui/master/static/home.html
<https://reviews.apache.org/r/15215/#comment55262>
Can these percentage calculations become a filter? It would put the "x / y * 100" into one place and be more descriptive. It could look like:
{{ activated_slaves | ratio: total_slaves }}
or:
{{ activated_slaves | percent: total_slaves }}
- Ross Allen
On Nov. 6, 2013, 1:27 a.m., Shingo Omura wrote:
>
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://reviews.apache.org/r/15215/
> -----------------------------------------------------------
>
> (Updated Nov. 6, 2013, 1:27 a.m.)
>
>
> Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
>
>
> Repository: mesos-git
>
>
> Description
> -------
>
> Support d3 bar charts for slaves, tasks, resources in mesos webui.
>
> - introduced d3 angular module and d3-bar angular directive.
> - tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
> tipsy: https://gist.github.com/ilyabo/1373263
> - color scheme would be changed for better presentation.
>
> JIRA: https://issues.apache.org/jira/browse/MESOS-797
>
>
> Diffs
> -----
>
> src/webui/master/static/home.html 4f9e2d9
> src/webui/master/static/js/controllers.js db015b2
>
> Diff: https://reviews.apache.org/r/15215/diff/
>
>
> Testing
> -------
>
> testing on my laptop, single host deployment.
> using mesos-execute, I confirmed the bar charts was updated.
> screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
>
>
> File Attachments
> ----------------
>
> barcharts by bootstrap's progressbar
> https://reviews.apache.org/media/uploaded/files/2013/11/06/screenshots-barcharts-by-bootstrap-progressbar.png
>
>
> Thanks,
>
> Shingo Omura
>
>
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Ross Allen <ro...@mesosphere.io>.
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/#review28465
-----------------------------------------------------------
src/webui/master/static/js/controllers.js
<https://reviews.apache.org/r/15215/#comment55269>
$scope.state already exists. Can you reference that instead of adding this?
src/webui/master/static/js/controllers.js
<https://reviews.apache.org/r/15215/#comment55268>
$scope.total_cpus and $scope.total_mem are already set.
- Ross Allen
On Nov. 6, 2013, 1:27 a.m., Shingo Omura wrote:
>
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://reviews.apache.org/r/15215/
> -----------------------------------------------------------
>
> (Updated Nov. 6, 2013, 1:27 a.m.)
>
>
> Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
>
>
> Repository: mesos-git
>
>
> Description
> -------
>
> Support d3 bar charts for slaves, tasks, resources in mesos webui.
>
> - introduced d3 angular module and d3-bar angular directive.
> - tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
> tipsy: https://gist.github.com/ilyabo/1373263
> - color scheme would be changed for better presentation.
>
> JIRA: https://issues.apache.org/jira/browse/MESOS-797
>
>
> Diffs
> -----
>
> src/webui/master/static/home.html 4f9e2d9
> src/webui/master/static/js/controllers.js db015b2
>
> Diff: https://reviews.apache.org/r/15215/diff/
>
>
> Testing
> -------
>
> testing on my laptop, single host deployment.
> using mesos-execute, I confirmed the bar charts was updated.
> screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
>
>
> File Attachments
> ----------------
>
> barcharts by bootstrap's progressbar
> https://reviews.apache.org/media/uploaded/files/2013/11/06/screenshots-barcharts-by-bootstrap-progressbar.png
>
>
> Thanks,
>
> Shingo Omura
>
>
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Ross Allen <ro...@mesosphere.io>.
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/#review28846
-----------------------------------------------------------
src/webui/master/static/home.html
<https://reviews.apache.org/r/15215/#comment55880>
These bars are great representations of resources like CPU, memory, and disc, but they don't seem quite right for slaves or tasks. Could you split the CPU/memory bars and hold off on slaves/tasks for now?
- Ross Allen
On Nov. 8, 2013, 5:16 a.m., Shingo Omura wrote:
>
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://reviews.apache.org/r/15215/
> -----------------------------------------------------------
>
> (Updated Nov. 8, 2013, 5:16 a.m.)
>
>
> Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
>
>
> Repository: mesos-git
>
>
> Description
> -------
>
> Support d3 bar charts for slaves, tasks, resources in mesos webui.
>
> - introduced d3 angular module and d3-bar angular directive.
> - tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
> tipsy: https://gist.github.com/ilyabo/1373263
> - color scheme would be changed for better presentation.
>
> JIRA: https://issues.apache.org/jira/browse/MESOS-797
>
>
> Diffs
> -----
>
> src/webui/master/static/home.html 4f9e2d9
> src/webui/master/static/js/app.js b918799
> src/webui/master/static/js/controllers.js db015b2
>
> Diff: https://reviews.apache.org/r/15215/diff/
>
>
> Testing
> -------
>
> testing on my laptop, single host deployment.
> using mesos-execute, I confirmed the bar charts was updated.
> screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
>
>
> File Attachments
> ----------------
>
> barcharts by bootstrap's progressbar
> https://reviews.apache.org/media/uploaded/files/2013/11/06/screenshots-barcharts-by-bootstrap-progressbar.png
>
>
> Thanks,
>
> Shingo Omura
>
>
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Ross Allen <ro...@mesosphere.io>.
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/#review28843
-----------------------------------------------------------
src/webui/master/static/home.html
<https://reviews.apache.org/r/15215/#comment55879>
Mixing active tasks (Staged and Started) with completed tasks (all other states) gives an odd feeling of 100% since it will never be 100% once you have at least one completed task.
Would it make more sense to split these into two bars with active and completed tasks?
src/webui/master/static/home.html
<https://reviews.apache.org/r/15215/#comment55877>
Since the CPU and Memory bars are stacked on each other, they need labels to differentiate them otherwise you can't tell what they are without hovering. Maybe text labels above them?
src/webui/master/static/home.html
<https://reviews.apache.org/r/15215/#comment55878>
Yellow should be for warnings or incorrect states, but idle resources aren't really a problem. Could idle resources be black or just not filled at all?
- Ross Allen
On Nov. 8, 2013, 5:16 a.m., Shingo Omura wrote:
>
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://reviews.apache.org/r/15215/
> -----------------------------------------------------------
>
> (Updated Nov. 8, 2013, 5:16 a.m.)
>
>
> Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
>
>
> Repository: mesos-git
>
>
> Description
> -------
>
> Support d3 bar charts for slaves, tasks, resources in mesos webui.
>
> - introduced d3 angular module and d3-bar angular directive.
> - tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
> tipsy: https://gist.github.com/ilyabo/1373263
> - color scheme would be changed for better presentation.
>
> JIRA: https://issues.apache.org/jira/browse/MESOS-797
>
>
> Diffs
> -----
>
> src/webui/master/static/home.html 4f9e2d9
> src/webui/master/static/js/app.js b918799
> src/webui/master/static/js/controllers.js db015b2
>
> Diff: https://reviews.apache.org/r/15215/diff/
>
>
> Testing
> -------
>
> testing on my laptop, single host deployment.
> using mesos-execute, I confirmed the bar charts was updated.
> screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
>
>
> File Attachments
> ----------------
>
> barcharts by bootstrap's progressbar
> https://reviews.apache.org/media/uploaded/files/2013/11/06/screenshots-barcharts-by-bootstrap-progressbar.png
>
>
> Thanks,
>
> Shingo Omura
>
>
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Shingo Omura <ev...@gmail.com>.
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/
-----------------------------------------------------------
(Updated Nov. 8, 2013, 5:16 a.m.)
Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
Changes
-------
Thank you for your comment, Ross!!
I introduced 'percentage' filter.
and I was sorry that I didn't notice variables which are already set :'(
Repository: mesos-git
Description
-------
Support d3 bar charts for slaves, tasks, resources in mesos webui.
- introduced d3 angular module and d3-bar angular directive.
- tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
tipsy: https://gist.github.com/ilyabo/1373263
- color scheme would be changed for better presentation.
JIRA: https://issues.apache.org/jira/browse/MESOS-797
Diffs (updated)
-----
src/webui/master/static/home.html 4f9e2d9
src/webui/master/static/js/app.js b918799
src/webui/master/static/js/controllers.js db015b2
Diff: https://reviews.apache.org/r/15215/diff/
Testing
-------
testing on my laptop, single host deployment.
using mesos-execute, I confirmed the bar charts was updated.
screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
File Attachments
----------------
barcharts by bootstrap's progressbar
https://reviews.apache.org/media/uploaded/files/2013/11/06/screenshots-barcharts-by-bootstrap-progressbar.png
Thanks,
Shingo Omura
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Shingo Omura <ev...@gmail.com>.
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/
-----------------------------------------------------------
(Updated Nov. 6, 2013, 1:27 a.m.)
Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
Changes
-------
screenshots added.
Repository: mesos-git
Description
-------
Support d3 bar charts for slaves, tasks, resources in mesos webui.
- introduced d3 angular module and d3-bar angular directive.
- tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
tipsy: https://gist.github.com/ilyabo/1373263
- color scheme would be changed for better presentation.
JIRA: https://issues.apache.org/jira/browse/MESOS-797
Diffs
-----
src/webui/master/static/home.html 4f9e2d9
src/webui/master/static/js/controllers.js db015b2
Diff: https://reviews.apache.org/r/15215/diff/
Testing
-------
testing on my laptop, single host deployment.
using mesos-execute, I confirmed the bar charts was updated.
screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
File Attachments (updated)
----------------
barcharts by bootstrap's progressbar
https://reviews.apache.org/media/uploaded/files/2013/11/06/screenshots-barcharts-by-bootstrap-progressbar.png
Thanks,
Shingo Omura
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Shingo Omura <ev...@gmail.com>.
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/
-----------------------------------------------------------
(Updated Nov. 6, 2013, 1:25 a.m.)
Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
Changes
-------
fixed minor typo and line spacing.
Repository: mesos-git
Description
-------
Support d3 bar charts for slaves, tasks, resources in mesos webui.
- introduced d3 angular module and d3-bar angular directive.
- tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
tipsy: https://gist.github.com/ilyabo/1373263
- color scheme would be changed for better presentation.
JIRA: https://issues.apache.org/jira/browse/MESOS-797
Diffs (updated)
-----
src/webui/master/static/home.html 4f9e2d9
src/webui/master/static/js/controllers.js db015b2
Diff: https://reviews.apache.org/r/15215/diff/
Testing
-------
testing on my laptop, single host deployment.
using mesos-execute, I confirmed the bar charts was updated.
screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
Thanks,
Shingo Omura
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Shingo Omura <ev...@gmail.com>.
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/
-----------------------------------------------------------
(Updated Nov. 6, 2013, 1:12 a.m.)
Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
Changes
-------
following comments by Ross, I created charts by progress bars.
It is really simple and easy and no additional dependency required.
Thanks Ross!
Repository: mesos-git
Description
-------
Support d3 bar charts for slaves, tasks, resources in mesos webui.
- introduced d3 angular module and d3-bar angular directive.
- tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
tipsy: https://gist.github.com/ilyabo/1373263
- color scheme would be changed for better presentation.
JIRA: https://issues.apache.org/jira/browse/MESOS-797
Diffs (updated)
-----
src/webui/master/static/home.html 4f9e2d9
src/webui/master/static/js/controllers.js db015b2
Diff: https://reviews.apache.org/r/15215/diff/
Testing
-------
testing on my laptop, single host deployment.
using mesos-execute, I confirmed the bar charts was updated.
screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
Thanks,
Shingo Omura
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Shingo Omura <ev...@gmail.com>.
> On Nov. 5, 2013, 8:13 p.m., Ross Allen wrote:
> > I love the feature, but I wonder if we can accomplish the same functionality without adding D3?
> >
> > Bootstrap has progress bars[1] that are animated with CSS transitions. You can stack multiple colors inside the same bar and add tooltips on top of each one. The controllers would just need to set the width of the bars, and your browser would do the work of animating the width change.
> >
> > It would require very little new JS or styling.
> >
> > [1] http://getbootstrap.com/2.3.2/components.html#progress
Oh, It's really nice :-) This is much easier and simpler way!!
I will try bootstrap's progress bar and update diff.
- Shingo
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/#review28219
-----------------------------------------------------------
On Nov. 4, 2013, 11:05 p.m., Shingo Omura wrote:
>
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://reviews.apache.org/r/15215/
> -----------------------------------------------------------
>
> (Updated Nov. 4, 2013, 11:05 p.m.)
>
>
> Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
>
>
> Repository: mesos-git
>
>
> Description
> -------
>
> Support d3 bar charts for slaves, tasks, resources in mesos webui.
>
> - introduced d3 angular module and d3-bar angular directive.
> - tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
> tipsy: https://gist.github.com/ilyabo/1373263
> - color scheme would be changed for better presentation.
>
> JIRA: https://issues.apache.org/jira/browse/MESOS-797
>
>
> Diffs
> -----
>
> src/webui/master/static/css/d3-bar.css PRE-CREATION
> src/webui/master/static/css/tipsy.css PRE-CREATION
> src/webui/master/static/home.html 4f9e2d9
> src/webui/master/static/index.html 47403d8
> src/webui/master/static/js/app.js b918799
> src/webui/master/static/js/controllers.js 0c930a2
> src/webui/master/static/js/d3.v.3.3.9.js PRE-CREATION
> src/webui/master/static/js/d3.v.3.3.9.min.js PRE-CREATION
> src/webui/master/static/js/jquery.tipsy.js PRE-CREATION
>
> Diff: https://reviews.apache.org/r/15215/diff/
>
>
> Testing
> -------
>
> testing on my laptop, single host deployment.
> using mesos-execute, I confirmed the bar charts was updated.
> screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
>
>
> Thanks,
>
> Shingo Omura
>
>
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Shingo Omura <ev...@gmail.com>.
> On Nov. 5, 2013, 8:13 p.m., Ross Allen wrote:
> > I love the feature, but I wonder if we can accomplish the same functionality without adding D3?
> >
> > Bootstrap has progress bars[1] that are animated with CSS transitions. You can stack multiple colors inside the same bar and add tooltips on top of each one. The controllers would just need to set the width of the bars, and your browser would do the work of animating the width change.
> >
> > It would require very little new JS or styling.
> >
> > [1] http://getbootstrap.com/2.3.2/components.html#progress
>
> Shingo Omura wrote:
> Oh, It's really nice :-) This is much easier and simpler way!!
> I will try bootstrap's progress bar and update diff.
However, in the near future, if we needed to support more complex charts, for example resource usage history, we would need to utilize d3.
- Shingo
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/#review28219
-----------------------------------------------------------
On Nov. 6, 2013, 1:12 a.m., Shingo Omura wrote:
>
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://reviews.apache.org/r/15215/
> -----------------------------------------------------------
>
> (Updated Nov. 6, 2013, 1:12 a.m.)
>
>
> Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
>
>
> Repository: mesos-git
>
>
> Description
> -------
>
> Support d3 bar charts for slaves, tasks, resources in mesos webui.
>
> - introduced d3 angular module and d3-bar angular directive.
> - tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
> tipsy: https://gist.github.com/ilyabo/1373263
> - color scheme would be changed for better presentation.
>
> JIRA: https://issues.apache.org/jira/browse/MESOS-797
>
>
> Diffs
> -----
>
> src/webui/master/static/home.html 4f9e2d9
> src/webui/master/static/js/controllers.js db015b2
>
> Diff: https://reviews.apache.org/r/15215/diff/
>
>
> Testing
> -------
>
> testing on my laptop, single host deployment.
> using mesos-execute, I confirmed the bar charts was updated.
> screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
>
>
> Thanks,
>
> Shingo Omura
>
>
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Ross Allen <ro...@mesosphere.io>.
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/#review28219
-----------------------------------------------------------
I love the feature, but I wonder if we can accomplish the same functionality without adding D3?
Bootstrap has progress bars[1] that are animated with CSS transitions. You can stack multiple colors inside the same bar and add tooltips on top of each one. The controllers would just need to set the width of the bars, and your browser would do the work of animating the width change.
It would require very little new JS or styling.
[1] http://getbootstrap.com/2.3.2/components.html#progress
- Ross Allen
On Nov. 4, 2013, 11:05 p.m., Shingo Omura wrote:
>
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://reviews.apache.org/r/15215/
> -----------------------------------------------------------
>
> (Updated Nov. 4, 2013, 11:05 p.m.)
>
>
> Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
>
>
> Repository: mesos-git
>
>
> Description
> -------
>
> Support d3 bar charts for slaves, tasks, resources in mesos webui.
>
> - introduced d3 angular module and d3-bar angular directive.
> - tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
> tipsy: https://gist.github.com/ilyabo/1373263
> - color scheme would be changed for better presentation.
>
> JIRA: https://issues.apache.org/jira/browse/MESOS-797
>
>
> Diffs
> -----
>
> src/webui/master/static/css/d3-bar.css PRE-CREATION
> src/webui/master/static/css/tipsy.css PRE-CREATION
> src/webui/master/static/home.html 4f9e2d9
> src/webui/master/static/index.html 47403d8
> src/webui/master/static/js/app.js b918799
> src/webui/master/static/js/controllers.js 0c930a2
> src/webui/master/static/js/d3.v.3.3.9.js PRE-CREATION
> src/webui/master/static/js/d3.v.3.3.9.min.js PRE-CREATION
> src/webui/master/static/js/jquery.tipsy.js PRE-CREATION
>
> Diff: https://reviews.apache.org/r/15215/diff/
>
>
> Testing
> -------
>
> testing on my laptop, single host deployment.
> using mesos-execute, I confirmed the bar charts was updated.
> screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
>
>
> Thanks,
>
> Shingo Omura
>
>
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Shingo Omura <ev...@gmail.com>.
> On Nov. 5, 2013, 8:03 p.m., Ross Allen wrote:
> > What doesn't work well with Angular UI's tooltips? I'd like to remove dependencies on jQuery rather than add them since Angular provides most utilities that jQuery does. Ideally we would remove jQuery entirely.
Referring the ui bootstrap document (http://angular-ui.github.io/bootstrap/#/tooltip), I added 'tooltip' attribute to svg element generated by d3.
However, tooltip didn't show up. I suspected that ui-bootstrap doensn't work well with svg elements.
- Shingo
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/#review28213
-----------------------------------------------------------
On Nov. 4, 2013, 11:05 p.m., Shingo Omura wrote:
>
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://reviews.apache.org/r/15215/
> -----------------------------------------------------------
>
> (Updated Nov. 4, 2013, 11:05 p.m.)
>
>
> Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
>
>
> Repository: mesos-git
>
>
> Description
> -------
>
> Support d3 bar charts for slaves, tasks, resources in mesos webui.
>
> - introduced d3 angular module and d3-bar angular directive.
> - tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
> tipsy: https://gist.github.com/ilyabo/1373263
> - color scheme would be changed for better presentation.
>
> JIRA: https://issues.apache.org/jira/browse/MESOS-797
>
>
> Diffs
> -----
>
> src/webui/master/static/css/d3-bar.css PRE-CREATION
> src/webui/master/static/css/tipsy.css PRE-CREATION
> src/webui/master/static/home.html 4f9e2d9
> src/webui/master/static/index.html 47403d8
> src/webui/master/static/js/app.js b918799
> src/webui/master/static/js/controllers.js 0c930a2
> src/webui/master/static/js/d3.v.3.3.9.js PRE-CREATION
> src/webui/master/static/js/d3.v.3.3.9.min.js PRE-CREATION
> src/webui/master/static/js/jquery.tipsy.js PRE-CREATION
>
> Diff: https://reviews.apache.org/r/15215/diff/
>
>
> Testing
> -------
>
> testing on my laptop, single host deployment.
> using mesos-execute, I confirmed the bar charts was updated.
> screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
>
>
> Thanks,
>
> Shingo Omura
>
>
Re: Review Request 15215: Support displaying some charts in mesos webui
Posted by Ross Allen <ro...@mesosphere.io>.
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://reviews.apache.org/r/15215/#review28213
-----------------------------------------------------------
What doesn't work well with Angular UI's tooltips? I'd like to remove dependencies on jQuery rather than add them since Angular provides most utilities that jQuery does. Ideally we would remove jQuery entirely.
- Ross Allen
On Nov. 4, 2013, 11:05 p.m., Shingo Omura wrote:
>
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://reviews.apache.org/r/15215/
> -----------------------------------------------------------
>
> (Updated Nov. 4, 2013, 11:05 p.m.)
>
>
> Review request for mesos, Benjamin Hindman, Ben Mahler, Ross Allen, and Vinod Kone.
>
>
> Repository: mesos-git
>
>
> Description
> -------
>
> Support d3 bar charts for slaves, tasks, resources in mesos webui.
>
> - introduced d3 angular module and d3-bar angular directive.
> - tipsy used for tooltipping on d3 chart because ui-bootstrap's tooltipping doesn't work well with d3.
> tipsy: https://gist.github.com/ilyabo/1373263
> - color scheme would be changed for better presentation.
>
> JIRA: https://issues.apache.org/jira/browse/MESOS-797
>
>
> Diffs
> -----
>
> src/webui/master/static/css/d3-bar.css PRE-CREATION
> src/webui/master/static/css/tipsy.css PRE-CREATION
> src/webui/master/static/home.html 4f9e2d9
> src/webui/master/static/index.html 47403d8
> src/webui/master/static/js/app.js b918799
> src/webui/master/static/js/controllers.js 0c930a2
> src/webui/master/static/js/d3.v.3.3.9.js PRE-CREATION
> src/webui/master/static/js/d3.v.3.3.9.min.js PRE-CREATION
> src/webui/master/static/js/jquery.tipsy.js PRE-CREATION
>
> Diff: https://reviews.apache.org/r/15215/diff/
>
>
> Testing
> -------
>
> testing on my laptop, single host deployment.
> using mesos-execute, I confirmed the bar charts was updated.
> screenshot is here: https://twitter.com/everpeace/status/397320001725554689/photo/1
>
>
> Thanks,
>
> Shingo Omura
>
>