warning-ui/index.html
author Benjamin Smedberg <benjamin@smedbergs.us>
Fri, 19 Dec 2008 16:50:47 -0500
changeset 8 c33d0e330649
child 11 240e28622925
permissions -rw-r--r--
Add a web frontend to the warning database: cherrypy+genshi FTW!

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xi="http://www.w3.org/2001/XInclude"
      xmlns:py="http://genshi.edgewall.org/">
  <xi:include href="common.inc" />

  <head>
    <title>Warnings</title>
  </head>
  <body class="index">
    <svg xmlns="http://www.w3.org/2000/svg" id="graph" preserveAspectRatio="none"
         width="500" height="200" style="border: 1px solid black;" />
    
    <ul>
      <li py:for="buildnumber, rev, unique in builds"><a href="build?id=${buildnumber}">${rev}</a></li>
    </ul>

    <script type="application/x-javascript">
      var kWidth, kHeight, min, max, g, i, x, y, s, points, txt, a, hit, gline;

      kWidth = 500;
      kHeight = 200;

      gData = [
      <py:for each="buildnumber, rev, unique in builds">
        [${buildnumber}, "${rev}", ${unique}],
      </py:for>
      ];

      // Oh, my kingdom for a .reduce, but I want this to work in Safari
      min = null;
      max = null;
      for (i = 0; i &lt; gData.length; ++i) {
        if (min == null || gData[i][2] &lt; min)
          min = gData[i][2];
        if (max == null || gData[i][2] &gt; max)
          max = gData[i][2];
      }

      g = document.getElementById("graph");

      for (i = min - min % 25; i &lt; max; i += 25) {
        y = kHeight - ((i - min) / (max - min) * (kHeight - 10)) - 5;
        s = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        s.setAttribute('class', 'scale');
        s.x1.baseVal.value = 40;
        s.x2.baseVal.value = 490;
        s.y1.baseVal.value = y;
        s.y2.baseVal.value = y;
        g.appendChild(s);

        s = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        s.setAttribute('class', 'scaleText');
        s.textContent = i;
        s.setAttribute('x', 38);
        s.setAttribute('y', y);
        g.appendChild(s);
      }

      points = [];

      for (i = gData.length - 1; i &gt;= 0; --i) {
        id = gData[i][0];
        rev = gData[i][1];
        t = gData[i][2];

        a = document.createElementNS('http://www.w3.org/2000/svg', 'a');
        a.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '/build?id=' + id);
        g.appendChild(a);

        txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        txt.setAttribute('class', 'overlay');
        txt.textContent = "Warnings: " + t;
        txt.setAttribute('x', kWidth / 2);
        txt.setAttribute('y', 20);
        a.appendChild(txt);

        txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        txt.setAttribute('class', 'overlay');
        txt.textContent = 'Rev: ' + rev;
        txt.setAttribute('x', kWidth / 2);
        txt.setAttribute('y', 40);
        a.appendChild(txt);
        
        x = (gData.length - i) / gData.length * (kWidth - 50) + 40;
        y = kHeight - ((t - min) / (max - min) * (kHeight - 10)) - 5;

        points.push(x, y);

        if (isNaN(y))
          throw new Error("isNaN: " + [i, t, x, y, max, min]);

        hit = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        hit.setAttribute('class', 'mark');
        hit.cx.baseVal.value = x;
        hit.cy.baseVal.value = y;
        hit.r.baseVal.value = 3;
        a.appendChild(hit);
      }

      gline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
      gline.setAttribute('id', 'gline');
      gline.setAttribute('points', points.join(' '));

      g.insertBefore(gline, g.childNodes[0]);
    </script>
  </body>
</html>