DBMon Preact

by Jason Miller

HTML

<script src="https://cdn.rawgit.com/developit/92c059a0551d832b1ec6/raw/77f5fee0c57006045bcc1e5bf34359d515500afc/dbmonster-data.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://npmcdn.com/preact@latest"></script>
<span id="fps">FPS: ...</span>

SCSS

#fps {
  position: fixed;
  top: 0;
  right: 0;
  padding: 10px;
  background: #000;
  color: #FFF;
  font-size: 16px;
  z-index: 100;
}

.Query {
  position: relative;
}

.Query:hover .popover {
  left: -100%;
  width: 100%;
  display: block;
}

#content > div {
  overflow: hidden;
  float: left;
}

#info {
  position: fixed;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  bottom: 0;
  padding: 0.5em;
  text-align: center;
  color: #fff;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
}

Babel + JSX

const { h, Component, render, options } = preact;
/**@jsx h*/


/***
What's this?
  Preact provides hooks to manually control re-renders.
	Here, we are injecting a timing wrapper around that hook.
	To measure the real-world performance, we use setTimeout(0)
	since that is what Preact uses by default.
***/

// monitor rendering time
let fps = document.getElementById('fps'),
		counter = 0,
    time = 0,
		rerender;
options.debounceRendering = cb => {
	rerender = cb;
	setTimeout(flush, 0);
};
function flush() {
  let start = performance.now();
  rerender();
  let end = performance.now();
  time += end - start;
	// update FPS display every 10 frames:
  if ((++counter)%10===0) {
    fps.textContent = `FPS: ${10000/time|0}`;
    time = 0;
  }
}



// kick off our initial render:
setTimeout( () => {
  render(<DBMon rows="50" timeout="0" />, document.body)
}, 1);



// Everything else here is stock DBMonster.
// Well, without those cheater `key` hints ;)



class Query extends Component {
  lpad(padding, toLength, str) {
    return padding.repeat((toLength - str.length) / padding.length).concat(str);
  }

  formatElapsed(value) {
    var str = parseFloat(value).toFixed(2);
    if (value > 60) {
        minutes = Math.floor(value / 60);
        comps = (value % 60).toFixed(2).split('.');
        seconds = this.lpad('0', 2, comps[0]);
        ms = comps[1];
        str = minutes + ":" + seconds + "." + ms;
    }
    return str;
  }
  
  render({ query, elapsed }) {
    let cl = 'short';
    if (elapsed >= 10.0) {
        cl = 'warn_long';
    }
    else if (elapsed >= 1.0) {
        cl = 'warn';
    }

    return (
      <td class={'Query elapsed '+cl}>
        { elapsed ? this.formatElapsed(elapsed) : '-' }
        <div class="popover left">        
          <div class="popover-content">{query}</div>
          <div class="arrow"/>
        </div>
      </td>
    );
  }
}


class Database extends Component {
    sample(queries, time) {
      var topFiveQueries =...