From 0d7c48835cbf76a5d38c2aa8d23f188ade161555 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 12:13:49 -0700 Subject: [PATCH 01/37] Make table row hover different color than dropdown buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Is slightly lighter now so the two don’t blend together --- ui/src/style/components/tables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss index 5a046bff97..540a75f8ad 100644 --- a/ui/src/style/components/tables.scss +++ b/ui/src/style/components/tables.scss @@ -56,7 +56,7 @@ table { padding: 6px 8px !important; } tbody tr:hover { - background-color: $g5-pepper; + background-color: $g4-onyx; td { color: $g19-ghost !important; From a9c86f9b7e30543c166457d49a9696393a394558 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 12:14:17 -0700 Subject: [PATCH 02/37] Use generic empty state in Kap Config --- ui/src/kapacitor/components/KapacitorForm.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/ui/src/kapacitor/components/KapacitorForm.js b/ui/src/kapacitor/components/KapacitorForm.js index 4918dd3bb1..d2fcca0e9f 100644 --- a/ui/src/kapacitor/components/KapacitorForm.js +++ b/ui/src/kapacitor/components/KapacitorForm.js @@ -125,10 +125,11 @@ class KapacitorForm extends Component {

Configure Alert Endpoints

-
-

- Connect to an active Kapacitor instance to configure alerting endpoints. -

+
+

+ Connect to an active Kapacitor instance to configure alerting endpoints +

+
) From f3ccbca9edafb71eef3fb65b75f5221a05bd2ce3 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 13:50:35 -0700 Subject: [PATCH 03/37] Use Page Spinner instead of text --- ui/src/admin/containers/AdminPage.js | 14 +++++++------- ui/src/style/components/page-spinner.scss | 8 ++++---- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/ui/src/admin/containers/AdminPage.js b/ui/src/admin/containers/AdminPage.js index 81f7d82fe6..3ed0989969 100644 --- a/ui/src/admin/containers/AdminPage.js +++ b/ui/src/admin/containers/AdminPage.js @@ -175,10 +175,10 @@ class AdminPage extends Component {
-
-
- {users - ? +
+ - : Loading...} -
-
+
+
+ :
}
) diff --git a/ui/src/style/components/page-spinner.scss b/ui/src/style/components/page-spinner.scss index 9b3b8be393..723aebaf82 100644 --- a/ui/src/style/components/page-spinner.scss +++ b/ui/src/style/components/page-spinner.scss @@ -12,15 +12,15 @@ right: 0; /* This is a hack to tell the browser to use the GPU when rendering the spinner. */ - transform: translateZ(0); - animation: spinner 0.5s infinite linear; + transform: translate3d(0,0,0,0); + animation: spinner 0.6s infinite linear; } @keyframes spinner { 0% { - transform: rotate(0deg); + transform: rotate(0deg) translate3d(0,0,0,0); } 100% { - transform: rotate(360deg); + transform: rotate(360deg) translate3d(0,0,0,0); } } From d0f8e371397822030d06c0450432cc10a8080227 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 16:37:49 -0700 Subject: [PATCH 04/37] Use page spinner instead of text --- ui/src/alerts/containers/AlertsApp.js | 33 +++++++++++++-------------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js index 00f8813f65..75bb3002d4 100644 --- a/ui/src/alerts/containers/AlertsApp.js +++ b/ui/src/alerts/containers/AlertsApp.js @@ -93,18 +93,23 @@ class AlertsApp extends Component { } renderSubComponents() { - let component if (this.state.loading) { - component =

Loading...

- } else { - const {source} = this.props - if (this.state.hasKapacitor) { - component = - } else { - component = - } + return
} - return component + + const {source} = this.props + return ( +
+
+
+ {this.state.hasKapacitor + ? + : + } +
+
+
+ ) } handleToggleTime() { @@ -149,13 +154,7 @@ class AlertsApp extends Component {
-
-
-
- {this.renderSubComponents()} -
-
-
+ {this.renderSubComponents()}
) From 9626e2d91a2c8051bf18eb09a1371a49b94abd98 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 16:38:10 -0700 Subject: [PATCH 05/37] Only show alerts filter if there are alerts to filter --- ui/src/alerts/components/AlertsTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js index f3e63c611a..ecfc1b0d2c 100644 --- a/ui/src/alerts/components/AlertsTable.js +++ b/ui/src/alerts/components/AlertsTable.js @@ -82,7 +82,7 @@ const AlertsTable = React.createClass({

{this.props.alerts.length} Alerts

- + {alerts.length > 0 ? : null}
From 1fdcadc9b5b37991e68e243cbb72efd25c4fb6d5 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 16:39:06 -0700 Subject: [PATCH 06/37] Add empty state with helpful link --- ui/src/alerts/components/AlertsTable.js | 125 +++++++++++++----------- 1 file changed, 66 insertions(+), 59 deletions(-) diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js index ecfc1b0d2c..8aa28c9345 100644 --- a/ui/src/alerts/components/AlertsTable.js +++ b/ui/src/alerts/components/AlertsTable.js @@ -85,65 +85,72 @@ const AlertsTable = React.createClass({ {alerts.length > 0 ? : null}
-
- - - - - - - - - - - {alerts.map(({name, level, time, host, value}) => { - return ( - - - - - - - - ) - })} - -
this.changeSort('name')} - className="sortable-header" - > - Name - this.changeSort('level')} - className="sortable-header" - > - Level - this.changeSort('time')} - className="sortable-header" - > - Time - this.changeSort('host')} - className="sortable-header" - > - Host - this.changeSort('value')} - className="sortable-header" - > - Value -
{name} - {level} - - {new Date(Number(time)).toISOString()} - - - {host} - - {value}
+ {alerts.length > 0 + ? + + + + + + + + + + + {alerts.map(({name, level, time, host, value}) => { + return ( + + + + + + + + ) + })} + +
this.changeSort('name')} + className="sortable-header" + > + Name + this.changeSort('level')} + className="sortable-header" + > + Level + this.changeSort('time')} + className="sortable-header" + > + Time + this.changeSort('host')} + className="sortable-header" + > + Host + this.changeSort('value')} + className="sortable-header" + > + Value +
{name} + {level} + + {new Date(Number(time)).toISOString()} + + + {host} + + {value}
+ :
+

Alerts appear here when you have Rules

+
+ Create a Rule +
+ }
) From b4966df2bd70100515e571aeb21272a9fe67e0b6 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 16:46:21 -0700 Subject: [PATCH 07/37] Fix Page Spinner Not sure what I was thinking when I broke this --- ui/src/style/components/page-spinner.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/src/style/components/page-spinner.scss b/ui/src/style/components/page-spinner.scss index 723aebaf82..db0b6f824e 100644 --- a/ui/src/style/components/page-spinner.scss +++ b/ui/src/style/components/page-spinner.scss @@ -12,15 +12,15 @@ right: 0; /* This is a hack to tell the browser to use the GPU when rendering the spinner. */ - transform: translate3d(0,0,0,0); + transform: translateZ(0); animation: spinner 0.6s infinite linear; } @keyframes spinner { 0% { - transform: rotate(0deg) translate3d(0,0,0,0); + transform: rotate(0deg); } 100% { - transform: rotate(360deg) translate3d(0,0,0,0); + transform: rotate(360deg); } } From 7d006bca2a9476580e7be82729dc1f550633a9f3 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 17:08:45 -0700 Subject: [PATCH 08/37] Make it more clear which source you are connected to --- ui/src/sources/components/InfluxTable.js | 14 ++++++++------ ui/src/style/unsorted.scss | 7 +++++++ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/ui/src/sources/components/InfluxTable.js b/ui/src/sources/components/InfluxTable.js index 9974d215e8..85ad68afbc 100644 --- a/ui/src/sources/components/InfluxTable.js +++ b/ui/src/sources/components/InfluxTable.js @@ -120,12 +120,14 @@ const InfluxTable = ({ )} - - Connect - + {s.id === source.id + ? Connected + : + Connect + }