horizon/openstack_dashboard/static/js/horizon.networktopologycommon.js
Diana Whitten c219a3efc6 Horizon Spinner/Loader should inherit from theme
The Horizon spinner was using a spinner generated and animated
entirely out of JavaScript. Since CSS3 provides animates and we have
access to icon fonts, doing everything with JavaScript is not
necessary and actually taxing on the browser. Plus, all of the
spinner options were being passed in and around with JavaScript,
including the colors.  This makes it supremely difficult to use the
theme to style the spinner.

The new spinner is just defined by a handful of templates now. There
are two clientside templates to support Legacy Horizon, and one
template in the Angular to support spinners going forward.  Legacy
Horizon had two forms of spinners, so it was broken up. Angular as
not yet made use of the inline spinner, but should follow the same
markup when it is made.

There are two types of spinners, inline spinners (those shown when a
dynamic tab content is loading) and modal spinners (various other
places).  These are consistent with each other for the 'default'
experience, but their experience can be entirely customized separate
from each other.  'material' has been augmented with loaders defined
within their design spec to show the power of this new feature.

horizon.templates.js was augmented with this refactor to support only
having to compile one tempalte at a time (instead of all of them) and
caching that template so that all of them can be recompiled later.
Also, horizon.loader.js was added to house template compilation code
that was repeated in several locations.

To test overwriting page modal spinner and inline-modal spinner
examples, please follow the instructions in _loading_inline_exmaple.html,
_loading_modal_example.html under
openstack_dashboard/themes/material/templates/horizon/client_side

Change-Id: I92bc786160e070d30691eeabd4f2a50d6e2bb395
Partially-implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards
Closes-bug: #1570485
2017-04-21 11:15:52 -07:00

169 lines
4.8 KiB
JavaScript

/**
* Licensed under the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License. You may obtain
* a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*/
// Aggregate for common network topology functionality
horizon.networktopologycommon = {
init:function() {
horizon.networktopologyloader.init();
horizon.networktopologymessager.init();
}
};
/**
* Common data loader for network topology views
*/
horizon.networktopologyloader = {
// data for the network topology views
model: null,
// timeout length
reload_duration: 10000,
// timer controlling update intervals
update_timer: null,
init:function() {
var self = this;
if($('#networktopology').length === 0) {
return;
}
self.update();
},
/**
* makes the data reqeuest and populates the 'model'
*/
update:function() {
var self = this;
angular.element.getJSON(
angular.element('#networktopology').data('networktopology') + '?' + angular.element.now(),
function(data) {
self.model = data;
$('#networktopology').trigger('change');
self.update_timer = setTimeout(function(){
self.update();
}, self.reload_duration);
}
);
},
/**
* stops the data update sequences
*/
stop_update:function() {
var self = this;
clearTimeout(self.update_timer);
},
// Set up loader template
setup_loader: function($container) {
return horizon.loader.inline(gettext('Loading')).hide().prependTo($container);
}
};
/**
* common utility for network topology view to create iframes and pass post
* messages from those iframes
*/
horizon.networktopologymessager = {
previous_message : null,
// element to attach messages to
post_messages:'#topologyMessages',
// Array of functions to call when a message event is received
messaging_functions: [],
// data stored when a delete operation is finalizing
delete_data: {},
init:function() {
var self = this;
// listens for message events
angular.element(window).on('message', function(e) {
var message = angular.element.parseJSON(e.originalEvent.data);
if (self.previous_message !== message.message) {
horizon.toast.add(message.type, message.message);
self.previous_message = message.message;
self.delete_post_message(message.iframe_id);
self.messageNotify(message);
horizon.networktopologyloader.update();
setTimeout(function() {
self.previous_message = null;
self.delete_data = {};
},self.reload_duration);
}
});
},
/**
* add method to be called when a message is received
*
* @param {function} fn method to be called
*
* @param {Object} fnObj object the method is being called from this make
* sure the scope of 'this' is correct
*/
addMessageHandler:function(fn, fnObj) {
var self = this;
self.messaging_functions.push({obj:fnObj, func:fn});
},
/**
* calls the methods that subscribed to message notifications
*
* @param {Object} message iframe message content
*/
messageNotify:function(message) {
var self = this;
for (var i = 0; i < self.messaging_functions.length; i += 1) {
func = self.messaging_functions[i].func;
fnObj = self.messaging_functions[i].obj;
func.call(fnObj, message);
}
},
/**
* posts a message from the iframe
*
* @param {String} id target device id
* @param {String} url URL for action
* @param {Object} message object containing message value
* @param {String} action value of action, e.g., "delete"
* @param {Object} data of extra data that should be relayed with the message
* notification
*/
post_message: function(id,url,message,type,action,data) {
var self = this;
if(action == "delete") {
self.delete_data.device_id = id;
self.delete_data.device_type = type;
self.delete_data.device_data = data;
}
// stop the update refesh cycle while action takes place
horizon.networktopologyloader.stop_update();
var iframeID = 'ifr_' + id;
var iframe = $('<iframe width="500" height="300" />')
.attr('id',iframeID)
.attr('src',url)
.appendTo('#topologyMessages');
iframe.on('load',function() {
angular.element(this).get(0).contentWindow.postMessage(
JSON.stringify(message, null, 2), '*');
});
},
// delete the iframe
delete_post_message: function(id) {
angular.element('#' + id).remove();
}
};