Add separators and CONT QUERIES to query template dropdown

ui/src/data_explorer/constants/index.js

@@ -11,10 +11,13 @@ export const INFLUXQL_FUNCTIONS = [
   'stddev',
 ]
 
+const SEPARATOR = 'SEPARATOR'
+
 export const QUERY_TEMPLATES = [
   {text: 'Show Databases', query: 'SHOW DATABASES'},
   {text: 'Create Database', query: 'CREATE DATABASE "db_name"'},
   {text: 'Drop Database', query: 'DROP DATABASE "db_name"'},
+  {text: `${SEPARATOR}`},
   {text: 'Show Measurements', query: 'SHOW MEASUREMENTS ON "db_name"'},
   {
     text: 'Show Tag Keys',
@@ -24,6 +27,7 @@ export const QUERY_TEMPLATES = [
     text: 'Show Tag Values',
     query: 'SHOW TAG VALUES ON "db_name" FROM "measurement_name" WITH KEY = "tag_key"',
   },
+  {text: `${SEPARATOR}`},
   {
     text: 'Show Retention Policies',
     query: 'SHOW RETENTION POLICIES on "db_name"',
@@ -36,6 +40,11 @@ export const QUERY_TEMPLATES = [
     text: 'Drop Retention Policy',
     query: 'DROP RETENTION POLICY "rp_name" ON "db_name"',
   },
+  {text: `${SEPARATOR}`},
+  {
+    text: 'Show Continuos Queries',
+    query: 'SHOW CONTINUOUS QUERIES',
+  },
   {
     text: 'Create Continuous Query',
     query: 'CREATE CONTINUOUS QUERY "cq_name" ON "db_name" BEGIN SELECT min("field") INTO "target_measurement" FROM "current_measurement" GROUP BY time(30m) END',
@@ -44,6 +53,7 @@ export const QUERY_TEMPLATES = [
     text: 'Drop Continuous Query',
     query: 'DROP CONTINUOUS QUERY "cq_name" ON "db_name"',
   },
+  {text: `${SEPARATOR}`},
   {text: 'Show Users', query: 'SHOW USERS'},
   {
     text: 'Create User',
@@ -54,6 +64,7 @@ export const QUERY_TEMPLATES = [
     query: 'CREATE USER "username" WITH PASSWORD \'password\' WITH ALL PRIVILEGES',
   },
   {text: 'Drop User', query: 'DROP USER "username"'},
+  {text: `${SEPARATOR}`},
   {text: 'Show Stats', query: 'SHOW STATS'},
   {text: 'Show Diagnostics', query: 'SHOW DIAGNOSTICS'},
 ]

ui/src/shared/components/Dropdown.js

@@ -46,70 +46,93 @@ class Dropdown extends Component {
   }
 
   render() {
-    const {items, selected, className, iconName, actions, addNew, buttonSize, buttonColor, menuWidth} = this.props
+    const {
+      items,
+      selected,
+      className,
+      iconName,
+      actions,
+      addNew,
+      buttonSize,
+      buttonColor,
+      menuWidth,
+    } = this.props
     const {isOpen} = this.state
 
     return (
-      <div onClick={this.toggleMenu} className={classnames(`dropdown ${className}`, {open: isOpen})}>
+      <div
+        onClick={this.toggleMenu}
+        className={classnames(`dropdown ${className}`, {open: isOpen})}
+      >
         <div className={`btn dropdown-toggle ${buttonSize} ${buttonColor}`}>
-          {iconName ? <span className={classnames('icon', {[iconName]: true})}></span> : null}
+          {iconName
+            ? <span className={classnames('icon', {[iconName]: true})} />
+            : null}
           <span className="dropdown-selected">{selected}</span>
           <span className="caret" />
         </div>
-        {isOpen ?
-          <ul className="dropdown-menu" style={{width: menuWidth}}>
-            {items.map((item, i) => {
-              return (
-                <li className="dropdown-item" key={i}>
-                  <a href="#" onClick={() => this.handleSelection(item)}>
-                    {item.text}
-                  </a>
-                  {actions.length > 0 ?
-                    <div className="dropdown-item__actions">
-                      {actions.map((action) => {
-                        return (
-                          <button key={action.text} className="dropdown-item__action" onClick={(e) => this.handleAction(e, action, item)}>
-                            <span title={action.text} className={`icon ${action.icon}`}></span>
-                          </button>
-                        )
-                      })}
-                    </div>
-                  : null}
-                </li>
-              )
-            })}
-            {
-              addNew ?
-                <li>
-                  <Link to={addNew.url}>
-                    {addNew.text}
-                  </Link>
-                </li> :
-                null
-            }
-          </ul>
+        {isOpen
+          ? <ul className="dropdown-menu" style={{width: menuWidth}}>
+              {items.map((item, i) => {
+                if (item.text === 'SEPARATOR') {
+                  return <li key={i} role="separator" className="divider" />
+                }
+                return (
+                  <li className="dropdown-item" key={i}>
+                    <a href="#" onClick={() => this.handleSelection(item)}>
+                      {item.text}
+                    </a>
+                    {actions.length > 0
+                      ? <div className="dropdown-item__actions">
+                          {actions.map(action => {
+                            return (
+                              <button
+                                key={action.text}
+                                className="dropdown-item__action"
+                                onClick={e =>
+                                  this.handleAction(e, action, item)}
+                              >
+                                <span
+                                  title={action.text}
+                                  className={`icon ${action.icon}`}
+                                />
+                              </button>
+                            )
+                          })}
+                        </div>
+                      : null}
+                  </li>
+                )
+              })}
+              {addNew
+                ? <li>
+                    <Link to={addNew.url}>
+                      {addNew.text}
+                    </Link>
+                  </li>
+                : null}
+            </ul>
           : null}
       </div>
     )
   }
 }
 
-const {
-  arrayOf,
-  shape,
-  string,
-  func,
-} = PropTypes
+const {arrayOf, shape, string, func} = PropTypes
 
 Dropdown.propTypes = {
-  actions: arrayOf(shape({
-    icon: string.isRequired,
-    text: string.isRequired,
-    handler: func.isRequired,
-  })),
-  items: arrayOf(shape({
-    text: string.isRequired,
-  })).isRequired,
+  actions: arrayOf(
+    shape({
+      icon: string.isRequired,
+      text: string.isRequired,
+      handler: func.isRequired,
+    })
+  ),
+  items: arrayOf(
+    shape({
+      text: string.isRequired,
+    })
+  ).isRequired,
   onChoose: func.isRequired,
   addNew: shape({
     url: string.isRequired,

ui/src/style/components/query-editor.scss

@@ -21,7 +21,7 @@
     border-color 0.25s ease;
   border: 2px solid $query-editor--bg;
   background-color: $query-editor--field-bg;
-  
+
 }
 .query-editor--field {
   font-size: 12px;
@@ -103,4 +103,7 @@
     min-width: $query-editor--templates-menu-width;
     max-width: $query-editor--templates-menu-width;
   }
-}
+  .divider {
+    background: linear-gradient(to right, #00C9FF 0%, #22ADF6 100%);
+  }
+}