Perfomatic:UI: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(hg repo now)
 
(48 intermediate revisions by the same user not shown)
Line 1: Line 1:
=Design=
=Perf-O-Matic 2.0=
 
* [http://graphs.allizom.org/ Perf-o-Matic staging]
 
* [http://hg.mozilla.org/graphs hg.m.o/graphs]
 
* Implement new graphserver interface - {{Bug|601796}}
 
==Problem?==
 
[https://bugzilla.mozilla.org/enter_bug.cgi?product=Webtools&component=Graph%20Server&version=2.0 File a bug in product Webtools component Graphserver version 2.0]
 
/connect irc.mozilla.org
 
/join #perfomatic
 
==Design==


Designed by Chris Howse
Designed by Chris Howse


=Implementation=
[http://people.mozilla.com/~chowse/drop/webtools/graph-server/v2/00_chart_demo.html# Original UI Prototype]
 
* {{Bug|601796}}
* [http://graphs-stage2.mozilla.org/ Perf-o-Matic demo]
* [http://hg.mozilla.org/users/ibicking_mozilla.com/ mercurial]
* [https://github.com/rhelmer/graphs github]


== Missing features from current design ==
=== Missing features from current design ===


* dashboard ->
* dashboard ->
** toolbar ->
** toolbar ->
*** product - not implemented
*** <strike>product - not implemented</strike>
*** platforms - not implemented
*** <strike>platforms - not implemented</strike>
*** top tests - not implemented
*** <strike>top tests - not implemented</strike>
*** <strike>set pulldowns based on URL</strike>
** data grid ->
** data grid ->
*** row/column should not scroll
*** row/column should not scroll
* custom chart ->
* custom chart ->
** toolbar ->
** toolbar ->
*** running time - time delta/time delta % not implemented
*** <strike>running time - time delta/time delta % not implemented</strike>
*** show changesets - needs design work
*** <strike>show changesets - needs design work</strike>
**** may need hgpushlog work to link directly to changesets
**** <strike>may need hgpushlog work to link directly to changesets</strike>
*** export CSV - server broken
*** export CSV - server broken {{bug|489775}}
*** link - needs url shortener
*** link - needs url shortener
**** url/embed styling [https://github.com/chowse/perfomatic-prototype/commit/57da73e6532d8e127900d98b17d7cd4ed999bd13 prototype changes]
**** <strike>url/embed styling [https://github.com/chowse/perfomatic-prototype/commit/57da73e6532d8e127900d98b17d7cd4ed999bd13 prototype changes]</strike>
*** embed - not implemented  
*** <strike>embed - not implemented</strike>
** set selection range based on URL
** <strike>set selection range based on URL</strike>
** add test data ->
** add test data ->
*** put popular branches/tests/platforms on top
*** put popular branches/tests/platforms on top
* plot
* plot ->
** <strike>y-axis should always be 0-based</strike>
** <strike>y-axis should always be 0-based</strike>
* <strike>need mapping between branches and hg repos</strike>


== Performance optimizations ==
== Performance optimizations ==
Line 38: Line 51:
* split up JSON files as discussed in [[Perfomatic/Status_Meetings/2010-Nov-24|status meeting]]
* split up JSON files as discussed in [[Perfomatic/Status_Meetings/2010-Nov-24|status meeting]]
** look into constraining by date range
** look into constraining by date range
* mini-manifest, return only requested testid/branchid/platformid
** e.g. http://graphs-stage2.mozilla.org/api/test?attribute=short&testid=1&branchid=1&platformid=1
* <strike>set Last-Modified headers on all JSON feeds</strike>
* <strike>set Last-Modified headers on all JSON feeds</strike>
** <strike>especially the manifest!</strike>
** <strike>especially the manifest!</strike>
Line 43: Line 58:
* <strike>add caching proxy (varnish, etc)</strike>
* <strike>add caching proxy (varnish, etc)</strike>
* improve charting performance  
* improve charting performance  
** <strike>forcing lineWidth to 1 seems to make a huge difference
*** started [https://groups.google.com/forum/#!topic/flot-graphs/tJDCYMe-0Nw discussion on the flot list], fixed in flot and backported to graphs flot 0.6
*** however does not look as good, not pushing to stage until further investigation</strike>
** "double-buffering" canvas for flot
** "double-buffering" canvas for flot
*** [http://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering/2864533#2864533 stack overflow discussion]
*** [http://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering/2864533#2864533 stack overflow discussion]
*** custom chart is much faster if each series is written to a hidden canvas then shown when they are all complete
*** custom chart is much faster if each series is written to a hidden canvas then shown when they are all complete
** use node.js to generate static images for dashboard?
** <strike>use node.js to generate static images for dashboard?
*** [http://groups.google.com/d/topic/flot-graphs/GLGCCoJlRYg flot group post]
*** [http://groups.google.com/d/topic/flot-graphs/GLGCCoJlRYg flot group post]
** look into reducing number of points  
**** this actually works pretty well
*** flot plots way more than is actually useful when graphs are very dense, [https://groups.google.com/forum/#topic/flot-graphs/n4ErDe4Q2Rc flot group discussion]
**** spoke to author (John Schulz, jsno.de/) who linked [https://gist.github.com/752371 the code] behind http://jsno.de./flot/
*** could filter out points on the server side, using e.g. [http://en.wikipedia.org/wiki/K-means_clustering k-means clustering]
**** requires a [http://www.lessaworld.com/projects/flotCanvasText/ text plugin for flot], to get the ticks into the canvas instead of flot's default of appending styled divs</strike>
** <strike>look into reducing number of points  
*** flot plots way more than is actually useful when graphs are very dense, [https://groups.google.com/forum/#topic/flot-graphs/n4ErDe4Q2Rc flot group discussion]</strike>
** look into flot alternatives
** look into flot alternatives
*** [http://highcharts.com/ highcharts]
*** [http://highcharts.com/ highcharts]
Line 59: Line 79:


* stand up vhost with old graphserver, pointing at nightly database, for QA comparison
* stand up vhost with old graphserver, pointing at nightly database, for QA comparison
* set up lint and tests on [https://hudson.mozilla.org/job/graphs/? Hudson]
* <strike>set up lint and tests on [https://hudson.mozilla.org/job/graphs/? Hudson]</strike>
* stand up auto-update for code (5 minutes) and DB (nightly)
* selenium tests (in progress)
* qUnit/env.js unit tests for JS code
* stand up auto-update for code (5 minutes)
* <strike>stand up auto-update for DB (nightly)</strike>
* (QA) compare actual submitted data to JSON, and confirm in interface
* (QA) compare actual submitted data to JSON, and confirm in interface
* make sure proper changeset range is shown for checkins
* <strike>make sure proper changeset range is shown for checkins</strike>
** check with catlee on how the tree-management script does this
 
** follow-up irc convo w/ ted on catlee on changesets coalescing
== Bugs ==
* custom chart ->
** {{bug|643892}} "show changesets" with multiple data series loads multiple hg.m.o tabs
** embed ->
*** need loading indicator for individual series
*** tooltips can be hidden by top of screen
** series controls change plot daterange
*** str: add multiple data series and change daterange pulldown before all are loaded
** selection range set when "sel=none"
* charts (general)
** {{bug|643897}} all axes should be labeled, units should be specified
** {{bug|651690}} y-axis is relative to entire dataset, not just current view
** selection range ("sel" in URL) is very confusing if it is not in current view, or older than 365 days
*** could check this in JS, error if it's too old, and select 365-day view if it's not?
* "add more test data" dialog
** {{bug|641414}} branch, test, platforms should be sorted
 
== Discussion ==
* [http://www.reddit.com/r/programming/comments/ffook/arewefastyetcom_is_just_the_beginning_see_how_we/ reddit /r/programming thread]
** label axes (see [https://wiki.mozilla.org/Perfomatic:UI#Bugs Bugs section])
** [http://areweslimyet.com areweslimyet.com] launched by jrmuizel ;)
* [http://news.ycombinator.com/item?id=2183559 Hacker News thread]
** missing data from other browsers
*** how can we instrument Chrome, Safari, IE, Opera, etc.?
**** can we publish this data?
* old-style URLs are not compatible, primarily because the new graphserver automatically shows the average of all machines in a platform rather than a separate line for each, and the old-style URLs refer to individual machines. Problem?

Latest revision as of 14:54, 3 September 2012

Perf-O-Matic 2.0

Problem?

File a bug in product Webtools component Graphserver version 2.0

/connect irc.mozilla.org

/join #perfomatic

Design

Designed by Chris Howse

Original UI Prototype

Missing features from current design

  • dashboard ->
    • toolbar ->
      • product - not implemented
      • platforms - not implemented
      • top tests - not implemented
      • set pulldowns based on URL
    • data grid ->
      • row/column should not scroll
  • custom chart ->
    • toolbar ->
      • running time - time delta/time delta % not implemented
      • show changesets - needs design work
        • may need hgpushlog work to link directly to changesets
      • export CSV - server broken bug 489775
      • link - needs url shortener
      • embed - not implemented
    • set selection range based on URL
    • add test data ->
      • put popular branches/tests/platforms on top
  • plot ->
    • y-axis should always be 0-based
  • need mapping between branches and hg repos

Performance optimizations

Testing

  • stand up vhost with old graphserver, pointing at nightly database, for QA comparison
  • set up lint and tests on Hudson
  • selenium tests (in progress)
  • qUnit/env.js unit tests for JS code
  • stand up auto-update for code (5 minutes)
  • stand up auto-update for DB (nightly)
  • (QA) compare actual submitted data to JSON, and confirm in interface
  • make sure proper changeset range is shown for checkins

Bugs

  • custom chart ->
    • bug 643892 "show changesets" with multiple data series loads multiple hg.m.o tabs
    • embed ->
      • need loading indicator for individual series
      • tooltips can be hidden by top of screen
    • series controls change plot daterange
      • str: add multiple data series and change daterange pulldown before all are loaded
    • selection range set when "sel=none"
  • charts (general)
    • bug 643897 all axes should be labeled, units should be specified
    • bug 651690 y-axis is relative to entire dataset, not just current view
    • selection range ("sel" in URL) is very confusing if it is not in current view, or older than 365 days
      • could check this in JS, error if it's too old, and select 365-day view if it's not?
  • "add more test data" dialog
    • bug 641414 branch, test, platforms should be sorted

Discussion

  • reddit /r/programming thread
  • Hacker News thread
    • missing data from other browsers
      • how can we instrument Chrome, Safari, IE, Opera, etc.?
        • can we publish this data?
  • old-style URLs are not compatible, primarily because the new graphserver automatically shows the average of all machines in a platform rather than a separate line for each, and the old-style URLs refer to individual machines. Problem?
Retrieved from "https://wiki.mozilla.org/index.php?title=Perfomatic:UI&oldid=466908"