From 9b40cfa846d9db4393e428fb6675b1e9c75a94e9 Mon Sep 17 00:00:00 2001
From: Alex Sexton <alexsexton@gmail.com>
Date: Mon, 13 Apr 2015 14:07:10 -0500
Subject: [PATCH] Update list to use nested components to more realistically
 mimic a complex and nested application rendering situation.

---
 app/components/db-elapsed.js                | 14 ++++++++++++++
 app/components/db-name.js                   |  6 ++++++
 app/components/db-popover.js                |  5 +++++
 app/components/db-query.js                  |  7 +++++++
 app/components/query-count.js               |  7 +++++++
 app/styles/app.css                          |  3 +++
 app/templates/components/db-elapsed.hbs     |  5 +++++
 app/templates/components/db-name.hbs        |  1 +
 app/templates/components/db-popover.hbs     |  2 ++
 app/templates/components/db-query.hbs       | 10 ++++++++++
 app/templates/components/dbmon-database.hbs | 18 +++---------------
 app/templates/components/query-count.hbs    |  3 +++
 12 files changed, 66 insertions(+), 15 deletions(-)
 create mode 100644 app/components/db-elapsed.js
 create mode 100644 app/components/db-name.js
 create mode 100644 app/components/db-popover.js
 create mode 100644 app/components/db-query.js
 create mode 100644 app/components/query-count.js
 create mode 100644 app/templates/components/db-elapsed.hbs
 create mode 100644 app/templates/components/db-name.hbs
 create mode 100644 app/templates/components/db-popover.hbs
 create mode 100644 app/templates/components/db-query.hbs
 create mode 100644 app/templates/components/query-count.hbs

diff --git a/app/components/db-elapsed.js b/app/components/db-elapsed.js
new file mode 100644
index 0000000..637ebc0
--- /dev/null
+++ b/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'),
+});
diff --git a/app/components/db-name.js b/app/components/db-name.js
new file mode 100644
index 0000000..9ad7fc4
--- /dev/null
+++ b/app/components/db-name.js
@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'td',
+  classNames: ['dbname'],
+});
diff --git a/app/components/db-popover.js b/app/components/db-popover.js
new file mode 100644
index 0000000..f52b7a6
--- /dev/null
+++ b/app/components/db-popover.js
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ['popover', 'left'],
+});
diff --git a/app/components/db-query.js b/app/components/db-query.js
new file mode 100644
index 0000000..55435e3
--- /dev/null
+++ b/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'],
+});
diff --git a/app/components/query-count.js b/app/components/query-count.js
new file mode 100644
index 0000000..2cdfa53
--- /dev/null
+++ b/app/components/query-count.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'td',
+  classNames: ['query-count'],
+  queries: [],
+});
diff --git a/app/styles/app.css b/app/styles/app.css
index c2edd59..522c2c5 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -15,3 +15,6 @@
   width: 100%;
   display: block;
 }
+.elapsed-long {
+  color:red;
+}
diff --git a/app/templates/components/db-elapsed.hbs b/app/templates/components/db-elapsed.hbs
new file mode 100644
index 0000000..bae23e2
--- /dev/null
+++ b/app/templates/components/db-elapsed.hbs
@@ -0,0 +1,5 @@
+{{#if attrs.time}}
+  {{attrs.time}}ms
+{{else}}
+  &mdash;
+{{/if}}
diff --git a/app/templates/components/db-name.hbs b/app/templates/components/db-name.hbs
new file mode 100644
index 0000000..de6d55c
--- /dev/null
+++ b/app/templates/components/db-name.hbs
@@ -0,0 +1 @@
+{{attrs.name}}
diff --git a/app/templates/components/db-popover.hbs b/app/templates/components/db-popover.hbs
new file mode 100644
index 0000000..a185ac2
--- /dev/null
+++ b/app/templates/components/db-popover.hbs
@@ -0,0 +1,2 @@
+<div class="popover-content">{{attrs.query.query}}</div>
+<div class="arrow"></div>
diff --git a/app/templates/components/db-query.hbs b/app/templates/components/db-query.hbs
new file mode 100644
index 0000000..8c5993b
--- /dev/null
+++ b/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}}
diff --git a/app/templates/components/dbmon-database.hbs b/app/templates/components/dbmon-database.hbs
index 8b61dcf..ece5cf5 100644
--- a/app/templates/components/dbmon-database.hbs
+++ b/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}}
diff --git a/app/templates/components/query-count.hbs b/app/templates/components/query-count.hbs
new file mode 100644
index 0000000..ec9e87c
--- /dev/null
+++ b/app/templates/components/query-count.hbs
@@ -0,0 +1,3 @@
+<span class="{{attrs.countClassName}}">
+  {{attrs.queries.length}}
+</span>