diff --git a/ui/src/data_explorer/constants/index.js b/ui/src/data_explorer/constants/index.js index 39f737e72..885b4cce6 100644 --- a/ui/src/data_explorer/constants/index.js +++ b/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'}, ] diff --git a/ui/src/shared/components/Dropdown.js b/ui/src/shared/components/Dropdown.js index a18589cd8..6f3441bbf 100644 --- a/ui/src/shared/components/Dropdown.js +++ b/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 ( -
+
- {iconName ? : null} + {iconName + ? + : null} {selected}
- {isOpen ? - + {isOpen + ? : null}
) } } -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, diff --git a/ui/src/style/components/query-editor.scss b/ui/src/style/components/query-editor.scss index b55a015fc..bb95febc1 100644 --- a/ui/src/style/components/query-editor.scss +++ b/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; } -} \ No newline at end of file + .divider { + background: linear-gradient(to right, #00C9FF 0%, #22ADF6 100%); + } +}