From f6100dd8eb601c4d40de4baf8567f8f74eaf685c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 12 Sep 2017 09:05:32 +0200 Subject: [PATCH] ux: success/error alerts refactoring, #9214 --- public/app/core/services/alert_srv.ts | 2 +- public/app/core/services/backend_srv.ts | 10 ++++++++-- public/app/features/dashboard/dashboard_srv.ts | 2 +- public/app/features/plugins/ds_edit_ctrl.ts | 5 +---- .../app/features/plugins/partials/ds_edit.html | 3 +-- .../datasource/cloudwatch/datasource.js | 2 +- .../datasource/elasticsearch/datasource.js | 8 ++++---- .../plugins/datasource/graphite/datasource.ts | 2 +- .../plugins/datasource/influxdb/datasource.ts | 6 +++--- .../app/plugins/datasource/mysql/datasource.ts | 6 +++--- .../plugins/datasource/opentsdb/datasource.js | 2 +- .../datasource/prometheus/datasource.ts | 2 +- public/sass/_variables.dark.scss | 18 ++++++++---------- public/sass/_variables.light.scss | 9 ++++----- public/sass/base/_type.scss | 10 +++++----- public/sass/components/_alerts.scss | 10 +++++----- 16 files changed, 48 insertions(+), 49 deletions(-) diff --git a/public/app/core/services/alert_srv.ts b/public/app/core/services/alert_srv.ts index 2412f32e29a..1786e526285 100644 --- a/public/app/core/services/alert_srv.ts +++ b/public/app/core/services/alert_srv.ts @@ -16,7 +16,7 @@ export class AlertSrv { init() { this.$rootScope.onAppEvent('alert-error', (e, alert) => { - this.set(alert[0], alert[1], 'error', 7000); + this.set(alert[0], alert[1], 'error', 12000); }, this.$rootScope); this.$rootScope.onAppEvent('alert-warning', (e, alert) => { diff --git a/public/app/core/services/backend_srv.ts b/public/app/core/services/backend_srv.ts index b753ae98530..e712fe2790d 100644 --- a/public/app/core/services/backend_srv.ts +++ b/public/app/core/services/backend_srv.ts @@ -64,7 +64,13 @@ export class BackendSrv { } if (data.message) { - this.alertSrv.set("Problem!", data.message, data.severity, 10000); + let description = ""; + let message = data.message; + if (message.length > 80) { + description = message; + message = "Error"; + } + this.alertSrv.set(message, description, data.severity, 10000); } throw data; @@ -97,7 +103,7 @@ export class BackendSrv { return results.data; }, err => { // handle unauthorized - if (err.status === 401 && firstAttempt) { + if (err.status === 401 && this.contextSrv.user.isSignedIn && firstAttempt) { return this.loginPing().then(() => { options.retry = 1; return this.request(options); diff --git a/public/app/features/dashboard/dashboard_srv.ts b/public/app/features/dashboard/dashboard_srv.ts index 9d622f4bbc7..f3350061caa 100644 --- a/public/app/features/dashboard/dashboard_srv.ts +++ b/public/app/features/dashboard/dashboard_srv.ts @@ -83,7 +83,7 @@ export class DashboardSrv { } this.$rootScope.appEvent('dashboard-saved', this.dash); - this.$rootScope.appEvent('alert-success', ['Dashboard saved', 'Saved as ' + clone.title]); + this.$rootScope.appEvent('alert-success', ['Dashboard saved']); } save(clone, options) { diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts index 5fbb6f12477..f8e53b8ec4e 100644 --- a/public/app/features/plugins/ds_edit_ctrl.ts +++ b/public/app/features/plugins/ds_edit_ctrl.ts @@ -133,14 +133,11 @@ export class DataSourceEditCtrl { return datasource.testDatasource().then(result => { this.testing.message = result.message; this.testing.status = result.status; - this.testing.title = result.title; }).catch(err => { if (err.statusText) { - this.testing.message = err.statusText; - this.testing.title = "HTTP Error"; + this.testing.message = 'HTTP Error ' + err.statusText; } else { this.testing.message = err.message; - this.testing.title = "Unknown error"; } }); }).finally(() => { diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 9a74d3b85ea..f01ca47153b 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -65,8 +65,7 @@
-
{{ctrl.testing.title}}
-
+
{{ctrl.testing.message}}
diff --git a/public/app/plugins/datasource/cloudwatch/datasource.js b/public/app/plugins/datasource/cloudwatch/datasource.js index 51cac9aa96f..3807464e3d5 100644 --- a/public/app/plugins/datasource/cloudwatch/datasource.js +++ b/public/app/plugins/datasource/cloudwatch/datasource.js @@ -335,7 +335,7 @@ function (angular, _, moment, dateMath, kbn, templatingVariable, CloudWatchAnnot var dimensions = {}; return this.getDimensionValues(region, namespace, metricName, 'ServiceName', dimensions).then(function () { - return { status: 'success', message: 'Data source is working', title: 'Success' }; + return { status: 'success', message: 'Data source is working' }; }); }; diff --git a/public/app/plugins/datasource/elasticsearch/datasource.js b/public/app/plugins/datasource/elasticsearch/datasource.js index 9ea679d5cc5..d6c2568ae47 100644 --- a/public/app/plugins/datasource/elasticsearch/datasource.js +++ b/public/app/plugins/datasource/elasticsearch/datasource.js @@ -175,9 +175,9 @@ function (angular, _, moment, kbn, ElasticQueryBuilder, IndexPattern, ElasticRes return this.getFields({type: 'date'}).then(function(dateFields) { var timeField = _.find(dateFields, {text: this.timeField}); if (!timeField) { - return { status: "error", message: "No date field named " + this.timeField + ' found', title: "Error" }; + return { status: "error", message: "No date field named " + this.timeField + ' found' }; } - return { status: "success", message: "Index OK. Time field name OK.", title: "Success" }; + return { status: "success", message: "Index OK. Time field name OK." }; }.bind(this), function(err) { console.log(err); if (err.data && err.data.error) { @@ -185,9 +185,9 @@ function (angular, _, moment, kbn, ElasticQueryBuilder, IndexPattern, ElasticRes if (err.data.error.reason) { message = err.data.error.reason; } - return { status: "error", message: message, title: "Error" }; + return { status: "error", message: message }; } else { - return { status: "error", message: err.status, title: "Error" }; + return { status: "error", message: err.status }; } }); }; diff --git a/public/app/plugins/datasource/graphite/datasource.ts b/public/app/plugins/datasource/graphite/datasource.ts index 61d97b38650..fd13f66c7b5 100644 --- a/public/app/plugins/datasource/graphite/datasource.ts +++ b/public/app/plugins/datasource/graphite/datasource.ts @@ -205,7 +205,7 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv this.testDatasource = function() { return this.metricFindQuery('*').then(function () { - return { status: "success", message: "Data source is working", title: "Success" }; + return { status: "success", message: "Data source is working"}; }); }; diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts index 10f6d47f0b9..ddab664f570 100644 --- a/public/app/plugins/datasource/influxdb/datasource.ts +++ b/public/app/plugins/datasource/influxdb/datasource.ts @@ -196,11 +196,11 @@ export default class InfluxDatasource { return this.metricFindQuery('SHOW DATABASES').then(res => { let found = _.find(res, {text: this.database}); if (!found) { - return { status: "error", message: "Could not find the specified database name.", title: "DB Not found" }; + return { status: "error", message: "Could not find the specified database name." }; } - return { status: "success", message: "Data source is working", title: "Success" }; + return { status: "success", message: "Data source is working" }; }).catch(err => { - return { status: "error", message: err.message, title: "Test Failed" }; + return { status: "error", message: err.message }; }); } diff --git a/public/app/plugins/datasource/mysql/datasource.ts b/public/app/plugins/datasource/mysql/datasource.ts index dfc990b52e4..652c21c1013 100644 --- a/public/app/plugins/datasource/mysql/datasource.ts +++ b/public/app/plugins/datasource/mysql/datasource.ts @@ -118,13 +118,13 @@ export class MysqlDatasource { }], } }).then(res => { - return { status: "success", message: "Database Connection OK", title: "Success" }; + return { status: "success", message: "Database Connection OK"}; }).catch(err => { console.log(err); if (err.data && err.data.message) { - return { status: "error", message: err.data.message, title: "Error" }; + return { status: "error", message: err.data.message }; } else { - return { status: "error", message: err.status, title: "Error" }; + return { status: "error", message: err.status }; } }); } diff --git a/public/app/plugins/datasource/opentsdb/datasource.js b/public/app/plugins/datasource/opentsdb/datasource.js index 3ef11ba75aa..921805a58ca 100644 --- a/public/app/plugins/datasource/opentsdb/datasource.js +++ b/public/app/plugins/datasource/opentsdb/datasource.js @@ -296,7 +296,7 @@ function (angular, _, dateMath) { this.testDatasource = function() { return this._performSuggestQuery('cpu', 'metrics').then(function () { - return { status: "success", message: "Data source is working", title: "Success" }; + return { status: "success", message: "Data source is working" }; }); }; diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index 4b4bfb4cdde..dd071d09fe6 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -241,7 +241,7 @@ export class PrometheusDatasource { testDatasource() { return this.metricFindQuery('metrics(.*)').then(function() { - return { status: 'success', message: 'Data source is working', title: 'Success' }; + return { status: 'success', message: 'Data source is working'}; }); } diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index cea26ba73ed..4de87a0aaf0 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -103,7 +103,7 @@ $tight-form-func-bg: #333; $tight-form-func-highlight-bg: #444; $modal-background: $black; -$code-tag-bg: $dark-5; +$code-tag-bg: $gray-1; $code-tag-border: lighten($code-tag-bg, 2%); @@ -238,17 +238,15 @@ $paginationActiveBackground: $blue; // Form states and alerts // ------------------------- -$state-warning-text: $warn; -$state-warning-bg: $brand-warning; -$error-text-color: #E84D4D; -$success-text-color: #12D95A; +$warning-text-color: $warn; +$error-text-color: #E84D4D; +$success-text-color: #12D95A; +$info-text-color: $blue-dark; -//$alert-error-bg: linear-gradient(90deg, #d94636, #e55f39); $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); - -$infoText: $blue-dark; -$infoBackground: $blue-dark; +$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); // popover $popover-bg: $panel-bg; @@ -278,7 +276,7 @@ $card-background-hover: linear-gradient(135deg, #343434, #262626); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3); // info box -$info-box-background: linear-gradient(100deg, #1a4552, #0b2127); +$info-box-background: linear-gradient(100deg, #1a4552, #00374a); // footer $footer-link-color: $gray-1; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index d90eadf500d..533daec705b 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -259,16 +259,15 @@ $paginationActiveBackground: $blue; // Form states and alerts // ------------------------- -$state-warning-text: lighten($orange, 10%); -$state-warning-bg: $orange; +$warning-text-color: lighten($orange, 10%); $error-text-color: lighten($red, 10%); $success-text-color: lighten($green, 10%); +$info-text-color: $blue; $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); - -$infoText: $blue; -$infoBackground: $blue-dark; +$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-info-bg: $blue-dark; // popover $popover-bg: $gray-5; diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 62c8fc6b3b8..4edddd7721f 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -31,17 +31,17 @@ cite { font-style: normal; } a.muted:hover, a.muted:focus { color: darken($text-muted, 10%); } -.text-warning { color: $state-warning-text; } +.text-warning { color: $warning-text-color; } a.text-warning:hover, -a.text-warning:focus { color: darken($state-warning-text, 10%); } +a.text-warning:focus { color: darken($warning-text-color, 10%); } .text-error { color: $error-text-color; } a.text-error:hover, a.text-error:focus { color: darken($error-text-color, 10%); } -.text-info { color: $infoText; } +.text-info { color: $info-text-color; } a.text-info:hover, -a.text-info:focus { color: darken($infoText, 10%); } +a.text-info:focus { color: darken($info-text-color, 10%); } .text-success { color: $success-text-color; } a.text-success:hover, @@ -130,7 +130,7 @@ small, mark, .mark { padding: .2em; - background-color: $state-warning-bg; + background: $alert-warning-bg; } diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 79d9afef50d..4ea30a45c53 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -7,10 +7,10 @@ // ------------------------- .alert { - padding: 1.5rem 2rem 1.5rem 1.5rem; + padding: 1.25rem 2rem 1.25rem 1.5rem; margin-bottom: $line-height-base; text-shadow: 0 2px 0 rgba(255,255,255,.5); - background-color: $state-warning-bg; + background: $alert-error-bg; position: relative; color: $white; text-shadow: 0 1px 0 rgba(0,0,0,.2); @@ -32,11 +32,11 @@ } .alert-info { - background: $infoBackground; + background: $alert-info-bg; } .alert-warning { - background-color: $state-warning-bg; + background: $alert-warning-bg; } .page-alert-list { @@ -79,4 +79,4 @@ .alert-body { flex-grow: 1; -} \ No newline at end of file +}