Use nested components instead of simple html.

app/components/db-elapsed.js

@@ -0,0 +1,14 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'span',
+  classNames: ['elapsed-time'],
+  classNameBindings: ['isLongTime:elapsed-long:elapsed-short'],
+  isLongTime: function() {
+    let time = this.get('time');
+    if (time > 10) {
+      return true;
+    }
+    return false;
+  }.property('time'),
+});

app/components/db-name.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'td',
+  classNames: ['dbname'],
+});

app/components/db-popover.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ['popover', 'left'],
+});

app/components/db-query.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'td',
+  classNames: ['Query'],
+  classNameBindings: ['query.className'],
+});

app/components/query-count.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'td',
+  classNames: ['query-count'],
+  queries: [],
+});

app/templates/components/db-elapsed.hbs

@@ -0,0 +1,5 @@
+{{#if attrs.time}}
+  {{attrs.time}}ms
+{{else}}
+  —
+{{/if}}

app/templates/components/db-name.hbs

@@ -0,0 +1 @@
+{{attrs.name}}

app/templates/components/db-popover.hbs

@@ -0,0 +1,2 @@
+<div class="popover-content">{{attrs.query.query}}</div>
+<div class="arrow"></div>

app/templates/components/db-query.hbs

@@ -0,0 +1,10 @@
+{{db-elapsed time=attrs.query.elapsed}}
+{{! We could probably thrash the dom less if we just killed the `popover`
+     class on this component when there was no query, but right now
+     classNameBindings aren't working how I expect them to be working. (they're
+     always false, I'm assuming it's something that isn't working with glimmer
+     yet).
+}}
+{{#if attrs.query.query}}
+  {{db-popover query=attrs.query}}
+{{/if}}

app/templates/components/dbmon-database.hbs

@@ -1,17 +1,5 @@
-<td class="dbname">
-  {{attrs.db.name}}
-</td>
-<td class="query-count">
-  <span class="{{countClassName}}">
-    {{queries.length}}
-  </span>
-</td>
+{{db-name name=attrs.db.name}}
+{{query-count queries=queries countClassName=countClassName}}
 {{#each topFiveQueries key="key" as |query|}}
-  <td class="Query {{query.className}}">
-    {{query.elapsed}}
-    <div class="popover left">
-      <div class="popover-content">{{query.query}}</div>
-      <div class="arrow"></div>
-    </div>
-  </td>
+  {{db-query query=query}}
 {{/each}}

app/templates/components/query-count.hbs

@@ -0,0 +1,3 @@
+<span class="{{attrs.countClassName}}">
+  {{attrs.queries.length}}
+</span>