From 931b8ef1f593f16dd90d007f311e994d2b536ef6 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 29 Mar 2018 13:28:48 -0700
Subject: [PATCH] Add initial styles

---
 ui/src/ifql/components/Node.tsx        |  2 +-
 ui/src/ifql/components/TimeMachine.tsx |  6 ++++--
 ui/src/ifql/containers/IFQLPage.tsx    |  2 +-
 ui/src/style/chronograf.scss           |  1 +
 ui/src/style/components/func-node.scss | 19 +++++++++++++++++++
 5 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 ui/src/style/components/func-node.scss

diff --git a/ui/src/ifql/components/Node.tsx b/ui/src/ifql/components/Node.tsx
index 18dd0c6731..c4408bff9f 100644
--- a/ui/src/ifql/components/Node.tsx
+++ b/ui/src/ifql/components/Node.tsx
@@ -16,7 +16,7 @@ interface Props {
 
 const Node: SFC<Props> = ({node}) => {
   return (
-    <div>
+    <div className="func-node">
       <div>{node.name}</div>
     </div>
   )
diff --git a/ui/src/ifql/components/TimeMachine.tsx b/ui/src/ifql/components/TimeMachine.tsx
index 7ec1b7b5ac..91984eb77b 100644
--- a/ui/src/ifql/components/TimeMachine.tsx
+++ b/ui/src/ifql/components/TimeMachine.tsx
@@ -21,8 +21,10 @@ interface Props {
 const TimeMachine: SFC<Props> = ({funcs, nodes, onAddNode}) => {
   return (
     <div>
-      {nodes.map((n, i) => <Node key={i} node={n} />)}
-      <FuncSelector funcs={funcs} onAddNode={onAddNode} />
+      <div className="func-node-container">
+        {nodes.map((n, i) => <Node key={i} node={n} />)}
+        <FuncSelector funcs={funcs} onAddNode={onAddNode} />
+      </div>
     </div>
   )
 }
diff --git a/ui/src/ifql/containers/IFQLPage.tsx b/ui/src/ifql/containers/IFQLPage.tsx
index e163dfbd86..a73841266f 100644
--- a/ui/src/ifql/containers/IFQLPage.tsx
+++ b/ui/src/ifql/containers/IFQLPage.tsx
@@ -29,7 +29,7 @@ export class IFQLPage extends PureComponent<Props, State> {
     this.state = {
       funcs: [],
       ast: null,
-      query: 'from(db: "")',
+      query: 'from(db: "telegraf") |> filter() |> range()',
     }
   }
 
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index 5a088e7a8d..059a35e795 100644
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@@ -71,6 +71,7 @@
 @import 'components/table-graph';
 @import 'components/threshold-controls';
 @import 'components/kapacitor-logs-table';
+@import 'components/func-node.scss';
 
 // Pages
 @import 'pages/config-endpoints';
diff --git a/ui/src/style/components/func-node.scss b/ui/src/style/components/func-node.scss
new file mode 100644
index 0000000000..af14c263ef
--- /dev/null
+++ b/ui/src/style/components/func-node.scss
@@ -0,0 +1,19 @@
+.func-node-container {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.func-node {
+  background: #252b35;
+  border-radius: $radius-small;
+  padding: 10px;
+  width: auto;
+  display: flex;
+  flex-direction: column;
+  color: $ix-text-default;
+  text-transform: uppercase;
+  margin: $ix-marg-a;
+  font-family: $ix-text-font;
+  font-weight: 500;
+  cursor: pointer;
+}