From d0c12fb0c0a892f61a5a6127069737fdab2c107d Mon Sep 17 00:00:00 2001 From: Petr Vobornik Date: Thu, 3 Jul 2014 10:31:54 +0200 Subject: webui: display messages contained in API responses API responses can contain warnings in "messages" array. This patch also adds support for displaying multiple notifications at the same time in order to show the message and a status of finished operation. Reviewed-By: Petr Spacek --- install/ui/src/freeipa/ipa.js | 82 ++++++++++++++-------------------------- install/ui/src/freeipa/rpc.js | 21 +++++++++- install/ui/src/freeipa/util.js | 36 +++++++++++++++++- install/ui/src/freeipa/widget.js | 10 ++++- 4 files changed, 92 insertions(+), 57 deletions(-) diff --git a/install/ui/src/freeipa/ipa.js b/install/ui/src/freeipa/ipa.js index be202ecdc..0fb35632e 100644 --- a/install/ui/src/freeipa/ipa.js +++ b/install/ui/src/freeipa/ipa.js @@ -36,9 +36,10 @@ define([ './reg', './rpc', './text', + './util', 'exports' ], function(Deferred, keys, topic, $, JSON, i18n, auth, datetime, - metadata_provider, builder, reg, rpc, text, exports) { + metadata_provider, builder, reg, rpc, text, util, exports) { /** * @class @@ -830,32 +831,6 @@ IPA.error_dialog = function(spec) { /** @property {string[]} visible_buttons=['retry', 'cancel'] Visible button names */ that.visible_buttons = spec.visible_buttons || ['retry', 'cancel']; - /** - * Beautify error message - * - * Multi-lined text may contain TAB character as first char of the line - * to hint at marking the whole line differently. - * @param {jQuery} container Container to add the beautified message. - * @param {string} message - */ - that.beautify_message = function(container, message) { - var lines = message.split(/\n/g); - var line_span; - for(var i=0; i', { - 'class': 'error-message-hinted', - text: lines[i].substr(1) - }).appendTo(container); - } else { - line_span = $('

', { - text: lines[i] - }).appendTo(container); - } - } - }; - /** @inheritDoc */ that.create_content = function() { if (that.error_thrown.url) { @@ -865,7 +840,7 @@ IPA.error_dialog = function(spec) { } var error_message = $('

', {}); - that.beautify_message(error_message, that.error_thrown.message); + error_message.append(util.beautify_message(that.error_thrown.message)); error_message.appendTo(that.container); if(that.errors && that.errors.length > 0) { @@ -896,7 +871,7 @@ IPA.error_dialog = function(spec) { var error = that.errors[i]; if(error.message) { var error_div = $('
  • ', {}); - that.beautify_message(error_div, error.message); + error_div.append(util.beautify_message(error.message)); error_div.appendTo(errors_container); } } @@ -1161,36 +1136,38 @@ IPA.notify = function(message, type, timeout) { if (!message) return; // don't show undefined, null and such - message = text.get(message); - - function destroy_timeout() { - if (IPA.notify_success.timeout) window.clearTimeout(IPA.notify_success.timeout); + if (typeof message === 'string') { + message = text.get(message); } - var notification_area = $('.notification-area'); + var notification_area = $('#notification .notification-area'); if (notification_area.length === 0) { notification_area = $('
    ', { - 'class': 'notification-area', - click: function() { - destroy_timeout(); - notification_area.fadeOut(100); - } + 'class': 'notification-area' }); - notification_area.appendTo('#notification'); } - notification_area.empty(); - var alert = IPA.alert_helper.create_alert('msg', message, type); - var el = IPA.alert_helper.render_alert(alert); + var el = IPA.alert_helper.render_alert(alert, true); notification_area.append(el); + el.alert(); + + if (!timeout) { + // compute timeout, based on text length + + // get text length without whitespace chars (misleading with + // multiple inner HTML elements) + var l = el.text().replace(/\s+/g, ' ').length; + var ratio = IPA.config.message_timeout_length; + if (l < ratio) timeout = IPA.config.message_timeout; + else { + timeout = l/ratio*IPA.config.message_timeout; + } + } - destroy_timeout(); - notification_area.fadeIn(IPA.config.message_fadein_time); - - IPA.notify_success.timeout = window.setTimeout(function() { - notification_area.fadeOut(IPA.config.message_fadeout_time); - }, timeout || IPA.config.message_timeout); + window.setTimeout(function() { + el.alert('close'); + }, timeout); }; /** @@ -1220,14 +1197,13 @@ IPA.get_succeeded = function(data) { * @property {number} default_priority - command default priority. Used in * 'update info' concept * @property {number} message_timeout - timeout for notification messages - * @property {number} message_fadeout_time - * @property {number} message_fadein_time + * @property {number} message_timeout_length - longer messages will be displayed + * longer */ IPA.config = { default_priority: 500, message_timeout: 3000, // [ms] - message_fadeout_time: 800, // [ms] - message_fadein_time: 400 // [ms] + message_timeout_length: 50 // [chars] }; return IPA; diff --git a/install/ui/src/freeipa/rpc.js b/install/ui/src/freeipa/rpc.js index 756d4090f..784f7555b 100644 --- a/install/ui/src/freeipa/rpc.js +++ b/install/ui/src/freeipa/rpc.js @@ -27,9 +27,10 @@ define([ './auth', './ipa', './text', + './util', 'exports' ], - function(lang, auth, IPA, text, rpc /*exports*/) { + function(lang, auth, IPA, text, util, rpc /*exports*/) { /** * Call an IPA command over JSON-RPC. @@ -179,6 +180,23 @@ rpc.command = function(spec) { delete that.options[name]; }; + /** + * Check result for warnings and process them + * @param {Object} result + */ + that.process_warnings = function(result) { + + var msgs = result.messages; + if (!result.messages) return; + + for (var i=0,l=msgs.length; i', { + 'class': 'error-message-hinted', + text: lines[i].substr(1) + }); + els.push(line_span); + } else { + line_span = $('

    ', { + text: lines[i] + }); + els.push(line_span); + } + } + return els; + } + /** * Module with utility functions * @class @@ -328,7 +349,20 @@ define([ * @param {Object} event Event object * @param {Number} [delay=0] */ - emit_delayed: emit_delayed + emit_delayed: emit_delayed, + + /** + * Beautify message + * + * Converts text value into array of HTML

    elements. One additional + * paragraph for each line break. + * + * Multi-lined text may contain TAB character as first char of the line + * to hint at marking the whole line differently. + * @param {string} text + * @return {Array} array of jQuery elements + */ + beautify_message: beautify_message }; return util; diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js index ae1ada239..780afb2bc 100644 --- a/install/ui/src/freeipa/widget.js +++ b/install/ui/src/freeipa/widget.js @@ -5557,12 +5557,18 @@ exp.alert_helper = IPA.alert_helper = { * @param {Object} alert * @return {jQuery} alert as html element */ - render_alert: function(alert) { + render_alert: function(alert, close_icon) { var el = $('

    ', { 'data-name': alert.name, - 'class': alert.cls + 'class': "fade in " + alert.cls }); + if (close_icon) { + el.addClass('alert-dismissable'); + el.append(""); + } $('', { 'class': alert.icon }).appendTo(el); el.append(' '); el.append(alert.text); -- cgit