Perfomatic:UI

Design

Designed by Chris Howse

Implementation

• bug 601796
• Perf-o-Matic demo
• mercurial
• github

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
    • link - needs url shortener
      • url/embed styling prototype changes
    • 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

• split up JSON files as discussed in status meeting
  • 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
• set Last-Modified headers on all JSON feeds
  • especially the manifest!
  • already setting 15m Expires/Cache-control max-age
• add caching proxy (varnish, etc)
• improve charting performance
  • forcing lineWidth to 1 seems to make a huge difference
    • started 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
  • "double-buffering" canvas for flot
    • stack overflow discussion
    • 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?
    • flot group post
      • this actually works pretty well
      • spoke to author (John Schulz, jsno.de/) who linked the code behind http://jsno.de./flot/
      • requires a text plugin for flot, to get the ticks into the canvas instead of flot's default of appending styled divs
  • look into reducing number of points
    • flot plots way more than is actually useful when graphs are very dense, flot group discussion
  • look into flot alternatives
    • highcharts
    • RaphaelJS / gRaphael
    • Current graphserver library

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)
    • show these to QA to run on their Hudson
  • qUnit/env.js unit tests for JS code
• stand up auto-update for code (5 minutes) and DB (nightly)
• (QA) compare actual submitted data to JSON, and confirm in interface
• make sure proper changeset range is shown for checkins
  • check with catlee on how the tree-management script does this
  • follow-up irc convo w/ ted on catlee on changesets coalescing

Bugs

• embed ->
  • need loading indicator for individual series
  • tooltips can be hidden by top of screen
• custom chart ->
  • series controls change plot daterange
    • str: add multiple data series and change daterange pulldown before all are loaded