ux: success/error alerts refactoring, #9214

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) => {

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);

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) {

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.message = 'HTTP Error ' + err.statusText;
-            this.testing.title = "HTTP Error";
           } else {
             this.testing.message = err.message;
-            this.testing.title = "Unknown error";
           }
         });
       }).finally(() => {

public/app/features/plugins/partials/ds_edit.html

@@ -65,8 +65,7 @@
 							<i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
 					</div>
 					<div class="alert-body">
-						<div class="alert-title">{{ctrl.testing.title}}</div>
+						<div class="alert-title">{{ctrl.testing.message}}</div>
-						<div ng-bind='ctrl.testing.message'></div>
 					</div>
 				</div>
 			</div>

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' };
       });
     };
 

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 };
         }
       });
     };

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"};
     });
   };
 

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 };
     });
   }
 

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 };
       }
     });
   }

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" };
       });
     };
 

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'};
     });
   }
 

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;
+$warning-text-color:      $warn;
-$state-warning-bg:        $brand-warning;
+$error-text-color:        #E84D4D;
-$error-text-color:      #E84D4D;
+$success-text-color:      #12D95A;
-$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);
-
+$alert-warning-bg:        linear-gradient(90deg, #d44939, #e0603d);
-$infoText:                $blue-dark;
+$alert-info-bg:           linear-gradient(100deg, #1a4552, #00374a);
-$infoBackground:          $blue-dark;
 
 // 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;

public/sass/_variables.light.scss

@@ -259,16 +259,15 @@ $paginationActiveBackground:          $blue;
 
 // Form states and alerts
 // -------------------------
-$state-warning-text:            lighten($orange, 10%);
+$warning-text-color:            lighten($orange, 10%);
-$state-warning-bg:              $orange;
 $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);
-
+$alert-warning-bg:        linear-gradient(90deg, #d44939, #e0603d);
-$infoText:                $blue;
+$alert-info-bg:           $blue-dark;
-$infoBackground:          $blue-dark;
 
 // popover
 $popover-bg:              $gray-5;

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;
 }
 
 

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;
-}
+}