From f8ad5a04f6df00502770d20baab62afc0d180f5f Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 30 Mar 2018 17:07:40 -0700
Subject: [PATCH] Add style

Co-authored-by: Andrew Watkins <andrew.watkinz@gmail.com>
Co-authored-by: Brandon Farmer <bthesorceror@gmail.com>
Co-authored-by: Alex Paxton <thealexpaxton@gmail.com>
---
 ui/src/ifql/components/FuncArgs.tsx          |  4 +--
 ui/src/ifql/components/FuncNode.tsx          |  6 ++---
 ui/src/ifql/components/TimeMachine.tsx       |  2 +-
 ui/src/style/components/func-node.scss       | 27 +++++++++++++++++---
 ui/test/ifql/components/TimeMachine.test.tsx |  2 +-
 5 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/ui/src/ifql/components/FuncArgs.tsx b/ui/src/ifql/components/FuncArgs.tsx
index 6b757c9110..7ae9ec3635 100644
--- a/ui/src/ifql/components/FuncArgs.tsx
+++ b/ui/src/ifql/components/FuncArgs.tsx
@@ -18,9 +18,9 @@ interface Props {
 export default class FuncArgs extends PureComponent<Props> {
   public render() {
     return (
-      <div>
+      <div className="func-args">
         {this.props.func.args.map(({key, value}) => (
-          <div key={key}>
+          <div className="func-arg" key={key}>
             {key} : {value}
           </div>
         ))}
diff --git a/ui/src/ifql/components/FuncNode.tsx b/ui/src/ifql/components/FuncNode.tsx
index 82ddd52129..a7edccaca9 100644
--- a/ui/src/ifql/components/FuncNode.tsx
+++ b/ui/src/ifql/components/FuncNode.tsx
@@ -14,7 +14,7 @@ export default class FuncNode extends PureComponent<Props, State> {
   constructor(props) {
     super(props)
     this.state = {
-      isOpen: false,
+      isOpen: true,
     }
   }
 
@@ -23,8 +23,8 @@ export default class FuncNode extends PureComponent<Props, State> {
     const {isOpen} = this.state
 
     return (
-      <div>
-        <div className="func-node" onClick={this.handleClick}>
+      <div className="func-node">
+        <div className="func-node--name" onClick={this.handleClick}>
           <div>{func.name}</div>
         </div>
         {isOpen && <FuncArgs func={func} />}
diff --git a/ui/src/ifql/components/TimeMachine.tsx b/ui/src/ifql/components/TimeMachine.tsx
index 409ac7d7ef..2893abf33e 100644
--- a/ui/src/ifql/components/TimeMachine.tsx
+++ b/ui/src/ifql/components/TimeMachine.tsx
@@ -23,7 +23,7 @@ class TimeMachine extends PureComponent<Props> {
 
     return (
       <div>
-        <div className="func-node-container">
+        <div className="func-nodes-container">
           {funcs.map((f, i) => <FuncNode key={i} func={f} />)}
           <FuncSelector funcs={this.funcNames} onAddNode={onAddNode} />
         </div>
diff --git a/ui/src/style/components/func-node.scss b/ui/src/style/components/func-node.scss
index af14c263ef..84c3b13742 100644
--- a/ui/src/style/components/func-node.scss
+++ b/ui/src/style/components/func-node.scss
@@ -1,19 +1,40 @@
-.func-node-container {
+.func-nodes-container {
   display: inline-flex;
   flex-direction: column;
 }
 
 .func-node {
+  display: flex;
+}
+
+.func-node--name {
   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;
+  margin-bottom: $ix-marg-a;
   font-family: $ix-text-font;
   font-weight: 500;
   cursor: pointer;
 }
+
+.func-args {
+  background: #252b35;
+  border-radius: $radius-small;
+  padding: 10px;
+  margin-bottom: $ix-marg-a;
+  width: auto;
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  color: $ix-text-default;
+  font-family: $ix-text-font;
+  font-weight: 500;
+}
+
+.func-arg {
+  display: flex;
+}
diff --git a/ui/test/ifql/components/TimeMachine.test.tsx b/ui/test/ifql/components/TimeMachine.test.tsx
index 0ff8bfdc91..2932610584 100644
--- a/ui/test/ifql/components/TimeMachine.test.tsx
+++ b/ui/test/ifql/components/TimeMachine.test.tsx
@@ -5,7 +5,7 @@ import TimeMachine from 'src/ifql/components/TimeMachine'
 const setup = () => {
   const props = {
     funcs: [],
-    nodes: [],
+    suggestions: [],
     onAddNode: () => {},
   }