Skip to content

N
nexpie-grafana-theme
Commit f6100dd8 by Torkel Ödegaard
Options

ux: success/error alerts refactoring, #9214

parent 71641837
Showing with 45 additions and 46 deletions
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.title = "HTTP Error";
this.testing.message = 'HTTP Error ' + err.statusText;
} 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 ng-bind='ctrl.testing.message'></div>
<div class="alert-title">{{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;
$state-warning-bg: $brand-warning;
$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;
......
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;
......
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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment