Add initial styles

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>
   )

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>
   )
 }

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()',
     }
   }
 

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';

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;
+}