From d7ab5d67bf46bae0100ae68e18d3f1492c91cc13 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 13 Dec 2016 17:22:34 -0800 Subject: [PATCH 01/11] More obvious empty state for kapacitor config --- ui/src/kapacitor/containers/KapacitorPage.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/src/kapacitor/containers/KapacitorPage.js b/ui/src/kapacitor/containers/KapacitorPage.js index 569e3b5dd..33448adb1 100644 --- a/ui/src/kapacitor/containers/KapacitorPage.js +++ b/ui/src/kapacitor/containers/KapacitorPage.js @@ -189,7 +189,9 @@ export const KapacitorPage = React.createClass({ return (
-

Set your Kapacitor connection info to configure alerting endpoints.

+

Configure Alert Endpoints

+
+

Set your Kapacitor connection info to configure alerting endpoints.

); From 0e9ee981960dc1dc85b5261644d44f57083e7cba Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 13 Dec 2016 17:23:53 -0800 Subject: [PATCH 02/11] Right aligned delete rule button --- ui/src/kapacitor/containers/KapacitorRulesPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.js b/ui/src/kapacitor/containers/KapacitorRulesPage.js index 937f88566..293b5157c 100644 --- a/ui/src/kapacitor/containers/KapacitorRulesPage.js +++ b/ui/src/kapacitor/containers/KapacitorRulesPage.js @@ -129,7 +129,7 @@ export const KapacitorRulesPage = React.createClass({ {rule.trigger} {rule.message} {rule.alerts.join(', ')} - + ); }); From 65ec43ae79c2353c6057f0c3e35218526e104b53 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 13 Dec 2016 17:41:07 -0800 Subject: [PATCH 03/11] If no kapacitor instance, show -- instead of blank cell --- ui/src/sources/containers/ManageSources.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/sources/containers/ManageSources.js b/ui/src/sources/containers/ManageSources.js index 15bd998a5..dd347a2d6 100644 --- a/ui/src/sources/containers/ManageSources.js +++ b/ui/src/sources/containers/ManageSources.js @@ -95,8 +95,8 @@ export const ManageSources = React.createClass({ return ( {source.name}{source.default ? Default : null} - {source.url} - {kapacitorName} + {source.url} + {kapacitorName ? kapacitorName : "--"} Connect From 9bb29701e4b72f9487b6af5879f0bc2b081a1266 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 15 Dec 2016 11:50:28 -0800 Subject: [PATCH 04/11] Attempting to solve UX bug from community https://github.com/influxdata/chronograf/issues/689 --- ui/src/kapacitor/containers/KapacitorPage.js | 21 ++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/ui/src/kapacitor/containers/KapacitorPage.js b/ui/src/kapacitor/containers/KapacitorPage.js index 33448adb1..7ad3c66c5 100644 --- a/ui/src/kapacitor/containers/KapacitorPage.js +++ b/ui/src/kapacitor/containers/KapacitorPage.js @@ -1,6 +1,9 @@ import React, {PropTypes} from 'react'; import {getKapacitor, getKapacitorConfigSection, createKapacitor, updateKapacitor, pingKapacitor} from 'shared/apis'; import AlertOutputs from '../components/AlertOutputs'; +// default values for name & url +const defaultKapacitorName = "My Kapacitor"; +const defaultKapacitorUrl = "http://localhost:9092"; export const KapacitorPage = React.createClass({ propTypes: { @@ -109,6 +112,14 @@ export const KapacitorPage = React.createClass({ this.setState({newUsername: this.kapacitorUser.value}); }, + handleResetToDefaults(e) { + e.preventDefault(); + this.setState({ + newURL: defaultKapacitorUrl, + newName: defaultKapacitorName, + }); + }, + render() { const {kapacitor, newName, newURL, newUsername} = this.state; // if the fields in state are defined, use them. otherwise use the defaults @@ -116,6 +127,7 @@ export const KapacitorPage = React.createClass({ const url = newURL === undefined ? kapacitor && kapacitor.url || '' : newURL; const username = newUsername === undefined ? kapacitor && kapacitor.username || '' : newUsername; + return (
@@ -145,11 +157,11 @@ export const KapacitorPage = React.createClass({
- this.kapacitorURL = r} className="form-control" id="connect-string" placeholder="http://localhost:9092" value={url} onChange={this.updateURL}> + this.kapacitorURL = r} className="form-control" id="connect-string" placeholder={defaultKapacitorUrl} value={url} onChange={this.updateURL}>
- this.kapacitorName = r} className="form-control" id="name" placeholder="My Kapacitor" value={name} onChange={this.updateName}> + this.kapacitorName = r} className="form-control" id="name" placeholder={defaultKapacitorName} value={name} onChange={this.updateName}>
@@ -161,8 +173,9 @@ export const KapacitorPage = React.createClass({
-
- +
+ +
From f8d2268f05d69c8ea8e92ba3a87d315cb74c3734 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 15 Dec 2016 11:54:42 -0800 Subject: [PATCH 05/11] Fixing active state of panels in DE --- ui/src/style/chronograf/components/_Panel.scss | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/ui/src/style/chronograf/components/_Panel.scss b/ui/src/style/chronograf/components/_Panel.scss index a7fcdb832..240f97dea 100644 --- a/ui/src/style/chronograf/components/_Panel.scss +++ b/ui/src/style/chronograf/components/_Panel.scss @@ -13,13 +13,12 @@ // For when an panel item is open &.active { background-color: $g4-onyx; - .panel__header { - &-name { - color: $g20-white; + + .panel--name { + color: $g20-white; - .icon { - transform: translateY(-50%) rotate(90deg); - } + .icon { + transform: translateY(-50%) rotate(90deg); } } } From 6f7fb331b5ea72389bb4f0c6b845922154dace42 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 15 Dec 2016 12:10:54 -0800 Subject: [PATCH 06/11] Source indicator doesn't break on small screens --- ui/src/style/chronograf/components/_Header.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ui/src/style/chronograf/components/_Header.scss b/ui/src/style/chronograf/components/_Header.scss index a16325bcd..a7c052037 100644 --- a/ui/src/style/chronograf/components/_Header.scss +++ b/ui/src/style/chronograf/components/_Header.scss @@ -21,6 +21,9 @@ font-size: 12px; border-radius: 3px; margin-right: 16px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; > .icon { display: inline-block; From 6a387639746656d47fe7d4d5e3fbaa21487ff267 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 15 Dec 2016 12:13:10 -0800 Subject: [PATCH 07/11] Hidden scrollbar on panel-builder Previously it was unclickable because the resizer sits on top, rendering it purely aesthetic. The visual clutter of it was quite ugly. Now it is hidden, but still scrollable. Hypothesis: users will not miss this scrollbar, usability should remain intact --- ui/src/style/chronograf/components/_PanelBuilder.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ui/src/style/chronograf/components/_PanelBuilder.scss b/ui/src/style/chronograf/components/_PanelBuilder.scss index 6266a48c8..d71cf7bc7 100644 --- a/ui/src/style/chronograf/components/_PanelBuilder.scss +++ b/ui/src/style/chronograf/components/_PanelBuilder.scss @@ -4,7 +4,10 @@ background: $g1-raven; padding: $explorer-page-padding; @include gradient-v($g2-kevlar,$g0-obsidian); - @include custom-scrollbar($g2-kevlar,$c-pool); + + &::-webkit-scrollbar { + display: none; + } > .btn { margin-bottom: 6px; From 3d761e21766f34eb30dff157fcd3dda315b1b4d3 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 15 Dec 2016 12:29:28 -0800 Subject: [PATCH 08/11] Moving groupbytimedropdown styles higher up Some styles needed in kapacitor rule builder, could not see because scoped to DE --- ui/src/style/chronograf/main.scss | 1 - ui/src/style/enterprise_style/application.scss | 1 + .../groupByTimeDropdown.scss} | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename ui/src/style/{chronograf/components/_GroupByTimeDropdown.scss => enterprise_style/groupByTimeDropdown.scss} (100%) diff --git a/ui/src/style/chronograf/main.scss b/ui/src/style/chronograf/main.scss index f20658b90..82cff35b8 100644 --- a/ui/src/style/chronograf/main.scss +++ b/ui/src/style/chronograf/main.scss @@ -6,7 +6,6 @@ @import 'components/PanelBuilder'; @import 'components/Panel'; @import 'components/MultiSelectDropdown'; -@import 'components/GroupByTimeDropdown'; @import 'components/TagList'; @import 'components/Resizer'; @import 'components/Header'; diff --git a/ui/src/style/enterprise_style/application.scss b/ui/src/style/enterprise_style/application.scss index 2784be6eb..a27e447b8 100644 --- a/ui/src/style/enterprise_style/application.scss +++ b/ui/src/style/enterprise_style/application.scss @@ -11,6 +11,7 @@ @import 'retention-policies'; @import 'signup'; @import 'enterprise-custom'; +@import 'groupByTimeDropdown'; @import 'flash-messages'; @import 'dygraph-override'; @import 'auth-page'; diff --git a/ui/src/style/chronograf/components/_GroupByTimeDropdown.scss b/ui/src/style/enterprise_style/groupByTimeDropdown.scss similarity index 100% rename from ui/src/style/chronograf/components/_GroupByTimeDropdown.scss rename to ui/src/style/enterprise_style/groupByTimeDropdown.scss From bc68d46c70f3fcae0bab0c9241ba97a877944ef8 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 15 Dec 2016 14:35:39 -0800 Subject: [PATCH 09/11] Fixing janky data selector in kap rule creator --- ui/src/kapacitor/components/DataSection.js | 16 ++++----- ui/src/style/enterprise_style/kapacitor.scss | 38 ++++++++++---------- 2 files changed, 26 insertions(+), 28 deletions(-) diff --git a/ui/src/kapacitor/components/DataSection.js b/ui/src/kapacitor/components/DataSection.js index 0962c8efd..8f7f7b6f3 100644 --- a/ui/src/kapacitor/components/DataSection.js +++ b/ui/src/kapacitor/components/DataSection.js @@ -104,8 +104,8 @@ export const DataSection = React.createClass({

Select a Time Series

-
-
+
+ 
{statement}
{this.renderEditor()} @@ -131,11 +131,11 @@ export const DataSection = React.createClass({ return (
-
-
Databases
-
Measurements
-
Fields
-
Tags
+
+
Databases
+
Measurements
+
Fields
+
Tags
{this.renderList()}
@@ -180,7 +180,7 @@ export const DataSection = React.createClass({ /> ); default: - return
    ; + return
      ; } }, }); diff --git a/ui/src/style/enterprise_style/kapacitor.scss b/ui/src/style/enterprise_style/kapacitor.scss index 04a09d6ca..9009cc45c 100644 --- a/ui/src/style/enterprise_style/kapacitor.scss +++ b/ui/src/style/enterprise_style/kapacitor.scss @@ -158,33 +158,30 @@ $kapacitor-font-sm: 13px; -div.query-editor.kapacitor-metric-selector { +div.qeditor.kapacitor-metric-selector { border-radius: 0; background-color: transparent; padding: 0; // Query sample - .query-editor__code pre { + .qeditor--query-preview pre { font-size: $kapacitor-font-sm; - white-space: pre-wrap; background-color: $kapacitor-graphic-color; color: $kapacitor-accent; border-radius: $kap-radius-lg $kap-radius-lg 0 0; border: 0; + margin: 0; padding: $kap-padding-md $kap-padding-lg; - - code { - line-height: 1.5em; - } + @include custom-scrollbar($kapacitor-graphic-color, $kapacitor-accent); } // Tabs - .query-editor__tabs { + .qeditor--tabs { background-color: $kapacitor-graphic-color; padding: $kap-padding-sm $kap-padding-lg 0 $kap-padding-lg; border-top: 2px solid $kapacitor-divider-color; } - .query-editor__tab { + .qeditor--tab { font-size: $kapacitor-font-sm; background-color: $g3-castle; font-weight: 700; @@ -223,20 +220,21 @@ div.query-editor.kapacitor-metric-selector { background-color: $kapacitor-graphic-color; border-radius: 0 0 $kap-radius-lg $kap-radius-lg; } - .query-editor__list { + .qeditor--list { + overflow: auto; padding-top: $kap-padding-sm; background-color: transparent; min-height: $metric-selector-height; - max-height: $metric-selector-height; - height: $metric-selector-height; + max-height: ($metric-selector-height * 2); + // height: $metric-selector-height; border-radius: 0 0 $kap-radius-lg $kap-radius-lg; @include custom-scrollbar($kapacitor-graphic-color,$kapacitor-accent); } - .query-editor__list-header { + .qeditor--list-header { background-color: transparent; padding: $kap-padding-sm $kap-padding-lg 0 $kap-padding-lg; } - .query-editor__filter, + .qeditor--filter, .tag-value-list__filter { border-radius: 4px; padding-left: ($kap-input-height + ($kap-padding-sm / 2)); @@ -265,7 +263,7 @@ div.query-editor.kapacitor-metric-selector { top: 50%; } } - .query-editor__list-item { + .qeditor--list-item { font-size: $kapacitor-font-sm; font-weight: 600; padding-left: $kap-padding-lg; @@ -282,12 +280,12 @@ div.query-editor.kapacitor-metric-selector { color: $kapacitor-accent; } } - .query-editor__hidden-dropdown { + .qeditor--hidden-dropdown { .btn.dropdown-toggle { width: 260px; } } - .query-editor__list-checkbox__checkbox { + .qeditor--list-checkbox__checkbox { &:before { background-color: $kapacitor-accent; } @@ -302,7 +300,7 @@ div.query-editor.kapacitor-metric-selector { .tag-value-list__checkbox:after { background-color: $kapacitor-accent; } - .tag-value-list__item.query-editor__list-item.active { + .tag-value-list__item.qeditor--list-item.active { background-color: transparent; } .btn.tag-list__group-by.active { @@ -339,7 +337,7 @@ div.query-editor.kapacitor-metric-selector { } // Empty State - .query-editor__empty { + .qeditor--empty { background-color: $kapacitor-graphic-color; height: $metric-selector-height; min-height: $metric-selector-height; @@ -546,7 +544,7 @@ div.query-editor.kapacitor-metric-selector { } .dropdown-toggle, .dropdown.group-by-time-dropdown .btn.dropdown-toggle, - .query-editor__list-checkbox .dropdown .btn.dropdown-toggle { + .qeditor--list-checkbox .dropdown .btn.dropdown-toggle { width: 100%; text-align: left; position: relative; From f928c1be79945c1f9f483405c0de0f6df796660b Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 15 Dec 2016 14:43:15 -0800 Subject: [PATCH 10/11] Color Coded alert levels in alerts history --- ui/src/alerts/components/AlertsTable.js | 2 +- ui/src/style/enterprise_style/alerts.scss | 9 +++++++++ ui/src/style/enterprise_style/application.scss | 1 + 3 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 ui/src/style/enterprise_style/alerts.scss diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js index 9305ca790..d6d72b7c9 100644 --- a/ui/src/alerts/components/AlertsTable.js +++ b/ui/src/alerts/components/AlertsTable.js @@ -85,7 +85,7 @@ const AlertsTable = React.createClass({ return ( {name} - {level} + {level} {(new Date(Number(time)).toISOString())} {host} {value} diff --git a/ui/src/style/enterprise_style/alerts.scss b/ui/src/style/enterprise_style/alerts.scss new file mode 100644 index 000000000..5d393d635 --- /dev/null +++ b/ui/src/style/enterprise_style/alerts.scss @@ -0,0 +1,9 @@ +.alert-level-critical { + color: $c-dreamsicle !important; +} +.alert-level-warning { + color: #fdcf30 !important; +} +.alert-level-ok { + color: $c-rainforest !important; +} \ No newline at end of file diff --git a/ui/src/style/enterprise_style/application.scss b/ui/src/style/enterprise_style/application.scss index a27e447b8..7b4020b32 100644 --- a/ui/src/style/enterprise_style/application.scss +++ b/ui/src/style/enterprise_style/application.scss @@ -18,6 +18,7 @@ @import 'hosts'; @import 'kapacitor'; @import 'influx-tooltips'; +@import 'alerts'; // Because of some issues with sharing styles across multiple webpack bundles, // we have to import other scss files here instead of in their corresponding From db4449d7c8e779801f59d93ff7124d4960f491be Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 15 Dec 2016 15:47:04 -0800 Subject: [PATCH 11/11] Keeping session names truncated if too long --- ui/src/style/chronograf/components/_Header.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/ui/src/style/chronograf/components/_Header.scss b/ui/src/style/chronograf/components/_Header.scss index a7c052037..f150832f3 100644 --- a/ui/src/style/chronograf/components/_Header.scss +++ b/ui/src/style/chronograf/components/_Header.scss @@ -1,3 +1,5 @@ +$sessions-dropdown-width: 227px; + .sessions-dropdown { margin: 0 0 0 4px; @@ -5,6 +7,19 @@ width: 227px; border-radius: 3px 0 0 3px; } + .dropdown-selected { + display: inline-block; + width: ($sessions-dropdown-width - 28px); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + li.dropdown-item > a { + width: ($sessions-dropdown-width - 48px); // 48 is width of 2 actions + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } .sessions-dropdown__btn { margin: 0 16px 0 0;