diff options
Diffstat (limited to 'tuskar_ui/infrastructure/static/infrastructure/js')
12 files changed, 0 insertions, 1323 deletions
diff --git a/tuskar_ui/infrastructure/static/infrastructure/js/horizon.capacity.js b/tuskar_ui/infrastructure/static/infrastructure/js/horizon.capacity.js deleted file mode 100644 index d82b7309..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/js/horizon.capacity.js +++ /dev/null @@ -1,160 +0,0 @@ -/* - Used for animating and displaying capacity information using - D3js progress bars. - - Usage: - In order to have capacity bars that work with this, you need to have a - DOM structure like this in your Django template: - - <div id="your_capacity_bar_id" class="capacity_bar"> - </div> - - With this capacity bar, you then need to add some data- HTML attributes - to the div #your_capacity_bar_id. The available data- attributes are: - - data-chart-type="capacity_bar_chart" REQUIRED - Must be "capacity_bar_chart". - - data-capacity-used="integer" OPTIONAL - Integer representing the total number used by the user. - - data-capacity-limit="integer" OPTIONAL - Integer representing the total quota limit the user has. Note this IS - NOT the amount remaining they can use, but the total original capacity. - - data-average-capacity-used="integer" OPTIONAL - Integer representing the average usage of given capacity. -*/ - -horizon.Capacity = { - capacity_bars: [], - - // Determines the capacity bars to be used for capacity display. - init: function() { - this.capacity_bars = $('div[data-chart-type="capacity_bar_chart"]'); - - // Draw the capacity bars - this._initialCreation(this.capacity_bars); - }, - - - /* - Create a new d3 bar and populate it with the current amount used, - average used, and percentage label - */ - drawUsed: function(element, used_perc, used_px, average_perc) { - var w= "100%"; - var h= 15; - var lvl_curve= 3; - var bkgrnd= "#F2F2F2"; - var frgrnd= "grey"; - var usage_color = d3.scale.linear() - .domain([0, 50, 75, 90, 100]) - .range(["#669900", "#669900", "#FF9900", "#FF3300", "#CC0000"]); - - // Horizontal Bars - var bar = d3.select("#"+element).append("svg:svg") - .attr("class", "chart") - .attr("width", w) - .attr("height", h) - .style("background-color", "white") - .append("g"); - - // background - unused resources - bar.append("rect") - .attr("y", 0) - .attr("width", w) - .attr("height", h) - .attr("rx", lvl_curve) - .attr("ry", lvl_curve) - .style("fill", bkgrnd) - .style("stroke", "#bebebe") - .style("stroke-width", 1); - - // used resources - if (used_perc) { - bar.append("rect") - .attr("class", "usedbar") - .attr("y", 0) - .attr("id", "test") - .attr("width", 0) - .attr("height", h) - .attr("rx", lvl_curve) - .attr("ry", lvl_curve) - .style("fill", usage_color(used_perc)) - .style("stroke", "#a0a0a0") - .style("stroke-width", 1) - .attr("d", used_perc) - .transition() - .duration(500) - .attr("width", used_perc + "%"); - } - - // average - if (average_perc) { - bar.append("rect") - .attr("y",1) - .attr("x", 0) - .attr("class", "average") - .attr("height", h-2) - .attr("width", 1) - .style("fill", "black") - .transition() - .duration(500) - .attr("x", average_perc + "%"); - } - - // used text - if (used_perc) { - bar.append("text") - .text(used_perc + "%") - .attr("y", 8) - .attr("x", 3) - .attr("dominant-baseline", "middle") - .attr("font-size", 10) - .transition() - .duration(500) - .attr("x", function() { - // position the percentage label - if (used_perc > 99 && used_px > 25){ - return used_px - 30; - } else if (used_px > 25) { - return used_px - 25; - } else { - return used_px + 3; - } - }); - } - }, - - - // Draw the initial d3 bars - _initialCreation: function(bars) { - var scope = this; - - $(bars).each(function(index, element) { - var progress_element = $(element); - - var capacity_limit = parseInt(progress_element.attr('data-capacity-limit'), 10); - var capacity_used = parseInt(progress_element.attr('data-capacity-used'), 10); - var average_used = parseInt(progress_element.attr('data-average-capacity-used'), 10); - var percentage_used = 0; - var average_percentage = 0; - var _used_px = 0; - - if (!isNaN(capacity_limit) && !isNaN(average_used)) { - average_percentage = ((average_used / capacity_limit) * 100); - } - if (!isNaN(capacity_limit) && !isNaN(capacity_used)) { - percentage_used = Math.round((capacity_used / capacity_limit) * 100); - _used_px = progress_element.width() / 100 * percentage_used; - } - - scope.drawUsed($(element).attr('id'), percentage_used, _used_px, average_percentage); - }); - } -}; - -horizon.addInitFunction(function () { - horizon.Capacity.init(); -}); diff --git a/tuskar_ui/infrastructure/static/infrastructure/js/horizon.d3circleschart.js b/tuskar_ui/infrastructure/static/infrastructure/js/horizon.d3circleschart.js deleted file mode 100644 index 67547e18..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/js/horizon.d3circleschart.js +++ /dev/null @@ -1,282 +0,0 @@ -/* - Draw circles chart in d3. - - To use, a div is required with the data attributes - data-chart-type="circles_chart", data-url and data-size in the - div. - - data-chart-type - must be "circles_chart" so chart gets initialized - data-url - (string) url for the json data for the chart - data-time - (string) time parameter, gets appended to url as time=... - data-size - (integer) size of the circles in pixels - - If used in popup, initialization must be made manually e.g.: - addHorizonLoadEvent(function() { - horizon.d3_circles_chart.init('.html_element'); - horizon.d3_circles_chart.init('.health_chart'); - }); - - - Example: - <div class="html_element" - data-chart-type="circles_chart" - data-url="/infrastructure/racks/1/top_communicating.json?cond=to" - data-time="now" - data-size="22"> - </div> - - There are control elements for the cirles chart, implementing some commands - that will be executed over the chart. - - 1. The selectbox for time change, implements ChangeTime command. It has to - have data attribute data-circles-chart-command="change_time", with defined - receiver as jquery selector (selector can point to more elements and it will - execute the command on all of them) e.g. data-receiver="#rack_health_chart" - Option value is then appended to url and chart is refreshed. - - Example - <div class="span3 circles_chart_time_picker"> - <select data-circles-chart-command="change_time" - data-receiver="#rack_health_chart"> - <option value="now">Now</option> - <option value="yesterday">Yesterday</option> - <option value="last_week">Last Week</option> - <option value="last_month">Last Month</option> - </select> - </div> - <div class="clear"></div> - - 2. Bootstrap tabs for switching different circle_charts implement command - ChangeUrl. It has to have data attribute data-circles-chart-command="change_url", - with defined receiver as jquery selector (selector can point to more elements and - it will execute the command on all of them) e.g. data-receiver="#rack_health_chart" - - Inner li a element has to have attribute data-url, e.g. - data-url="/infrastructure/racks/1/top_communicating.json?type=alerts" - - The url of the chart is then switched and chart is refreshed. - - <ul class="nav nav-tabs" - data-circles-chart-command="change_url" - data-receiver="#rack_health_chart"> - <li class="active"> - <a data-url="/infrastructure/racks/1/top_communicating.json?type=overall_health" href="#"> - Overall Health</a> - </li> - <li> - <a data-url="/infrastructure/racks/1/top_communicating.json?type=alerts" href="#"> - Alerts</a> - </li> - <li> - <a data-url="/infrastructure/racks/1/top_communicating.json?type=capacities" href="#"> - Capacities</a> - </li> - <li> - <a data-url="/infrastructure/racks/1/top_communicating.json?type=status" href="#"> - Status</a> - </li> - </ul> -*/ - - -horizon.d3_circles_chart = { - CirclesChart: function(chart_class, html_element){ - this.chart_class = chart_class; - this.html_element = html_element; - - var jquery_element = $(html_element); - this.size = jquery_element.data('size'); - this.time = jquery_element.data('time'); - this.url = jquery_element.data('url'); - - this.final_url = this.url; - if (this.final_url.indexOf('?') > -1){ - this.final_url += '&time=' + this.time; - }else{ - this.final_url += '?time=' + this.time; - } - - this.time = jquery_element.data('time'); - this.data = []; - - this.refresh = refresh; - function refresh(){ - var self = this; - this.jqxhr = $.getJSON( this.final_url, function() { - //FIXME add loader in the target element - }) - .done(function(data) { - // FIXME find a way how to only update graph with new data - // not delete and create - $(self.html_element).html(""); - - self.data = data.data; - self.settings = data.settings; - self.chart_class.render(self.html_element, self.size, self.data, self.settings); - }) - .fail(function() { - // FIXME add proper fail message - console.log( "error" ); }) - .always(function() { - // FIXME add behaviour that should be always done - }); - } - }, - init: function(selector, settings) { - var self = this; - $(selector).each(function() { - self.refresh(this); - }); - self.bind_commands(); - }, - refresh: function(html_element){ - var chart = new this.CirclesChart(this, html_element); - // FIXME save chart objects somewhere so I can use them again when - // e.g. I am swithing tabs, or if I want to update them - // via web sockets - // this.charts.add_or_update(chart) - chart.refresh(); - }, - render: function(html_element, size, data, settings){ - var self = this; - // FIXME rewrite to scatter plot once we have some cool D3 chart - // library - var width = size + 4, - height = size + 4, - round = size / 2, - center_x = width / 2, - center_y = height / 2; - - var svg = d3.select(html_element).selectAll("svg") - .data(data) - .enter().append("svg") - .attr("width", width) - .attr("height", height); - - // FIXME use some pretty tooltip from some library we will use - // this one is just temporary - var tooltip = d3.select(html_element).append("div") - .style("position", "absolute") - .style("z-index", "10") - .style("visibility", "hidden") - .style("min-width", "100px") - .style("max-width", "110px") - .style("min-height", "30px") - .style("border", "1px ridge grey") - .style("background-color", "white") - .text(function(d) { "a simple tooltip"; }); - - var circle = svg.append("circle") - .attr("r", round)//function(d) { return d.r; })// can be sent form server - .attr("cx", center_x) - .attr("cy", center_y) - .attr("stroke", "#cecece") - .attr("stroke-width", function (d) { - return 1; - }) - .style("fill", function (d) { - if (d.color) { - return d.color; - } else if (settings.scale == "linear_color_scale") { - return self.linear_color_scale(d.percentage, settings.domain, settings.range); - } - }) - .on("mouseover", function (d) { - if (d.tooltip) { - tooltip.html(d.tooltip); - } else { - tooltip.html(d.name + "<br/>" + d.status); - } - tooltip.style("visibility", "visible"); - }) - .on("mousemove", function (d) { - tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px"); - }) - .on("mouseout", function (d) { - tooltip.style("visibility", "hidden"); - }); - - /* - // or just d3 title element - circle.append("svg:title") - .text(function(d) { return d.x; }); - - */ - }, - linear_color_scale: function(percentage, domain, range){ - usage_color = d3.scale.linear() - .domain(domain) - .range(range); - return usage_color(percentage); - }, - bind_commands: function (){ - var change_time_command_selector = 'select[data-circles-chart-command="change_time"]'; - var change_url_command_selector = '[data-circles-chart-command="change_url"]'; - var self = this; - bind_change_time = function () { - $(change_time_command_selector).each(function() { - $(this).change(function () { - var invoker = $(this); - var command = new self.Command.ChangeTime(self, invoker); - command.execute(); - }); - }); - }; - bind_change_url = function(){ - $(change_url_command_selector + ' a').click(function (e) { - // Bootstrap tabs functionality - e.preventDefault(); - $(this).tab('show'); - - // Command for url change and refresh - var invoker = $(this); - var command = new self.Command.ChangeUrl(self, invoker); - command.execute(); - }); - }; - bind_change_time(); - bind_change_url(); - }, - Command: { - ChangeTime: function (chart_class, invoker){ - // Invoker of the command should know about it's receiver. - // Also invoker brings all parameters of the command. - this.receiver_selector = invoker.data('receiver'); - this.new_time = invoker.find("option:selected").val(); - - this.execute = execute; - function execute(){ - var self = this; - $(this.receiver_selector).each(function(){ - // change time of the chart - $(this).data('time', self.new_time); - // refresh the chart - chart_class.refresh(this); - }); - } - }, - ChangeUrl: function (chart_class, invoker, new_url){ - // Invoker of the command should know about it's receiver. - // Also invoker brings all parameters of the command. - this.receiver_selector = invoker.parents('ul').first().data('receiver'); - this.new_url = invoker.data('url'); - - this.execute = execute; - function execute(){ - var self = this; - $(this.receiver_selector).each(function(){ - // change time of the chart - $(this).data('url', self.new_url); - // refresh the chart - chart_class.refresh(this); - }); - } - } - } -}; - -/* init the graphs */ -horizon.addInitFunction(function () { - horizon.d3_circles_chart.init('div[data-chart-type="circles_chart"]'); -}); - diff --git a/tuskar_ui/infrastructure/static/infrastructure/js/horizon.d3singlebarchart.js b/tuskar_ui/infrastructure/static/infrastructure/js/horizon.d3singlebarchart.js deleted file mode 100644 index 2c681f28..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/js/horizon.d3singlebarchart.js +++ /dev/null @@ -1,475 +0,0 @@ -/* - Used for animating and displaying single-bar information using - D3js rect. - - Usage: - In order to have single bars that work with this, you need to have a - DOM structure like this in your Django template: - - Example: - <div class="flavor_usage_bar" - data-popup-free='<p>Capacity remaining by flavors: </p> - {{resource_class.all_instances_flavors_info}}' - data-single-bar-orientation="horizontal" - data-single-bar-height="50" - data-single-bar-width="100%" - data-single-bar-used="{{ resource_class.all_used_instances_info }}" - data-single-bar-auto-scale-selector=".flavors_scale_selector" - data-single-bar-color-scale-range='["#000060", "#99FFFF"]'> - </div> - - The available data- attributes are: - data-popup-free, data-popup-used, data-popup-average OPTIONAL - Html content of popups that will be displayed over this areas. - - data-single-bar-orientation REQUIRED - String representing orientation of the bar.Can be "horizontal" - or "vertical" - - data-single-bar-height REQUIRED - Integer or string with percent mark format e.g. "50%". Determines - the total height of the bar. - - data-single-bar-width="100%" REQUIRED - Integer or string with percent mark format e.g. "50%". Determines - the total width of the bar. - - data-single-bar-used="integer" REQUIRED - 1. Integer - Integer representing the percent used. - 2. Array - Array of following structure: - [{"popup_used": "Popup html 1", "used_instances": "5"}, - {"popup_used": "Popup html 2", "used_instances": "15"},....] - - used_instances: Integer representing the percent used. - popup_used: Html that will be displayed in popup window over - this area. - - data-single-bar-used-average="integer" OPTIONAL - Integer representing the average usage in percent of given - single-bar. - - data-single-bar-auto-scale-selector OPTIONAL - Jquery selector of bar elements that have Integer - data-single-bar-used attribute. It then takes maximum of these - values as 100% of the liner scale of the colors. - So the array representing linear scale interval is set - automatically.This then maps to data-single-bar-color-scale-range. - (arrays must have the same structure) - - single-bar-color-scale-range OPTIONAL - Array representing linear scale interval that is set manually. - E.g "[0,10]". This then maps to data-single-bar-color-scale-range. - (arrays must have the same structure) - - data-single-bar-color-scale-range OPTIONAL - Array representing linear scale of colors. - E.g '["#000060", "#99FFFF"]' - -*/ - -horizon.d3_single_bar_chart = { - SingleBarChart: function(chart_class, html_element){ - var self = this; - self.chart_class = chart_class; - - self.html_element = html_element; - self.jquery_element = $(self.html_element); - // Using only percent, so limit is 100% - self.single_bar_limit = 100; - - self.single_bar_used = $.parseJSON(self.jquery_element.attr('data-single-bar-used')); - self.average_used = parseInt(self.jquery_element.attr('data-single-bar-average-used'), 10); - - self.data = {}; - - // Percentage and used_px count - if ($.isArray(self.single_bar_used)){ - self.data.used_px = 0; - self.data.percentage_used = Array(); - self.data.tooltip_used_contents = Array(); - for (var i = 0; i < self.single_bar_used.length; ++i) { - if (!isNaN(self.single_bar_limit) && !isNaN(self.single_bar_used[i].used_instances)) { - used = Math.round((self.single_bar_used[i].used_instances / self.single_bar_limit) * 100); - - self.data.percentage_used.push(used); - // for multi-bar chart, tooltip is in the data - self.data.tooltip_used_contents.push(self.single_bar_used[i].popup_used); - - self.data.used_px += self.jquery_element.width() / 100 * used; - } else { // If NaN self.data.percentage_used is 0 - - } - } - - } - else { - if (!isNaN(self.single_bar_limit) && !isNaN(self.single_bar_used)) { - self.data.percentage_used = Math.round((self.single_bar_used / self.single_bar_limit) * 100); - self.data.used_px = self.jquery_element.width() / 100 * self.data.percentage_used; - - } else { // If NaN self.data.percentage_used is 0 - self.data.percentage_used = 0; - self.data.used_px = 0; - } - - if (!isNaN(self.single_bar_limit) && !isNaN(self.average_used)) { - self.data.percentage_average = ((self.average_used / self.single_bar_limit) * 100); - } else { - self.data.percentage_average = 0; - } - } - - // Width and height of bar - self.data.width = self.jquery_element.data('single-bar-width'); - self.data.height = self.jquery_element.data('single-bar-height'); - - // Color scales - self.auto_scale_selector = function () { - return self.jquery_element.data('single-bar-auto-scale-selector'); - }; - self.is_auto_scaling = function () { - return self.auto_scale_selector(); - }; - self.auto_scale = function () { - var max_scale = 0; - $(self.auto_scale_selector()).each(function() { - var scale = parseInt($(this).data('single-bar-used'), 10); - if (scale > max_scale) - max_scale = scale; - }); - return [0, max_scale]; - }; - - if (self.jquery_element.data('single-bar-color-scale-domain')) - self.data.color_scale_domain = - self.jquery_element.data('single-bar-color-scale-domain'); - else if (self.is_auto_scaling()) - // Dynamically set scale based on biggest value - self.data.color_scale_domain = self.auto_scale(); - else - self.data.color_scale_domain = [0,100]; - - if (self.jquery_element.data('single-bar-color-scale-range')) - self.data.color_scale_range = - self.jquery_element.data('single-bar-color-scale-range'); - else - self.data.color_scale_range = ["#000000", "#0000FF"]; - - // Tooltips data - self.data.popup_average = self.jquery_element.data('popup-average'); - self.data.popup_free = self.jquery_element.data('popup-free'); - self.data.popup_used = self.jquery_element.data('popup-used'); - - // Orientation of the Bar chart - self.data.orientation = self.jquery_element.data('single-bar-orientation'); - - // Refresh method - self.refresh = function (){ - self.chart_class.render(self.html_element, self.data); - }; - }, - BaseComponent: function(data){ - var self = this; - - self.data = data; - - self.w = data.width; - self.h = data.height; - self.lvl_curve = 3; - self.bkgrnd = "#F2F2F2"; - self.frgrnd = "grey"; - self.color_scale_max = 25; - - self.percentage_used = data.percentage_used; - self.total_used_perc = 0; - self.used_px = data.used_px; - self.percentage_average = data.percentage_average; - self.tooltip_used_contents = data.tooltip_used_contents; - - // set scales - self.usage_color = d3.scale.linear() - .domain(data.color_scale_domain) - .range(data.color_scale_range); - - // return true if it renders used percentage multiple in one chart - self.used_multi = function (){ - return ($.isArray(self.percentage_used)); - }; - - // deals with percentage if there should be multiple in one chart - self.used_multi_iterator = 0; - self.percentage_used_value = function(){ - if (self.used_multi()){ - return self.percentage_used[self.used_multi_iterator]; - } else { - return self.percentage_used; - } - }; - // deals with html tooltips if there should be multiple in one chart - self.tooltip_used_value = function (){ - if (self.used_multi()){ - return self.tooltip_used_contents[self.used_multi_iterator]; - } else { - return ""; - } - }; - - // return true if it chart is oriented horizontally - self.horizontal_orientation = function (){ - return (self.data.orientation == "horizontal"); - }; - - }, - UsedComponent: function(base_component){ - var self = this; - self.base_component = base_component; - - // FIXME would be good to abstract all attributes and resolve orientation inside - if (base_component.horizontal_orientation()){ - // Horizontal Bars - self.y = 0; - self.x = base_component.total_used_perc + "%"; - self.width = 0; - self.height = base_component.h; - self.trasition_attr = "width"; - self.trasition_value = base_component.percentage_used_value() + "%"; - } else { // Vertical Bars - self.y = base_component.h; - self.x = 0; - self.width = base_component.w; - self.height = base_component.percentage_used_value() + "%"; - self.trasition_attr = "y"; - self.trasition_value = 100 - base_component.percentage_used_value() + "%"; - } - - self.append = function(bar, tooltip){ - var used_component = self; - var base_component = self.base_component; - - bar.append("rect") - .attr("class", "usedbar") - .attr("y", used_component.y) - .attr("x", used_component.x) - .attr("width", used_component.width) - .attr("height", used_component.height) - //.attr("rx", base_component.lvl_curve) - //.attr("ry", base_component.lvl_curve) - .style("fill", base_component.usage_color(base_component.percentage_used_value())) - .style("stroke", "#bebebe") - .style("stroke-width", 0) - .attr("d", base_component.percentage_used_value()) - .attr("popup-used", base_component.tooltip_used_value()) - .on("mouseover", function(d){ - if ($(this).attr('popup-used')){ - tooltip.html($(this).attr('popup-used')); - } - tooltip.style("visibility", "visible");}) - .on("mousemove", function(d){tooltip.style("top", - (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");}) - .on("mouseout", function(d){tooltip.style("visibility", "hidden");}) - .transition() - .duration(500) - .attr(used_component.trasition_attr, used_component.trasition_value); - }; - }, - AverageComponent: function(base_component){ - var self = this; - self.base_component = base_component; - - // FIXME would be good to abstract all attributes and resolve orientation inside - if (base_component.horizontal_orientation()){ - // Horizontal Bars - self.y = 1; - self.x = 0; - self.width = 1; - self.height = base_component.h; - self.trasition_attr = "x"; - self.trasition_value = base_component.percentage_average + "%"; - } else { // Vertical Bars - self.y = 0; - self.x = 0; - self.width = base_component.w; - self.height = 1; - self.trasition_attr = "y"; - self.trasition_value = 100 - base_component.percentage_average + "%"; - } - - self.append = function(bar, tooltip){ - var average_component = self; - var base_component = self.base_component; - - bar.append("rect") - .attr("y", average_component.y) - .attr("x", average_component.x) - .attr("class", "average") - .attr("height", average_component.height) - .attr("width", average_component.width) - .style("fill", "black") - .on("mouseover", function(){tooltip.style("visibility", "visible");}) - .on("mousemove", function(){tooltip.style("top", - (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");}) - .on("mouseout", function(){tooltip.style("visibility", "hidden");}) - .transition() - .duration(500) - .attr(average_component.trasition_attr, average_component.trasition_value); - }; - }, - /* TODO rewrite below as components */ - /* FIXME use some pretty tooltip from some library we will use - * this one is just temporary */ - append_tooltip: function(tooltip, html_content){ - return tooltip - .style("position", "absolute") - .style("z-index", "10") - .style("visibility", "hidden") - .style("min-width", "100px") - .style("max-width", "200px") - .style("min-height", "30px") - .style("max-height", "150px") - .style("border", "1px ridge grey") - .style("padding", "8px") - .style("padding-top", "5px") - .style("background-color", "white") - .html(html_content); - }, - append_unused: function(bar, base_component, tooltip_free){ - bar.append("rect") - .attr("y", 0) - .attr("width", base_component.w) - .attr("height", base_component.h) - .attr("rx", base_component.lvl_curve) - .attr("ry", base_component.lvl_curve) - .style("fill", base_component.bkgrnd) - .style("stroke", "#e0e0e0") - .style("stroke-width", 1) - .on("mouseover", function(d){tooltip_free.style("visibility", "visible");}) - .on("mousemove", function(d){tooltip_free.style("top", - (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");}) - .on("mouseout", function(d){tooltip_free.style("visibility", "hidden");}); - }, - // TODO This have to be enhanced, so this library can replace jtomasek capacity charts - append_text: function(bar, base_component, tooltip){ - bar.append("text") - .text("FREE") - .attr("y", base_component.h/2) - .attr("x", 3) - .attr("dominant-baseline", "middle") - .attr("font-size", 13) - .on("mouseover", function(d){tooltip.style("visibility", "visible");}) - .on("mousemove", function(d){tooltip.style("top", - (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");}) - .on("mouseout", function(d){tooltip.style("visibility", "hidden");}) - .transition() - .duration(500) - .attr("x", function() { - // FIXME when another panel is active, this page is hidden and used_px return 0 - // text is then badly positioned, quick fix will be to refresh charts when panel - // is switched. Need to find better solution. - if (base_component.total_used_perc > 90 && base_component.used_px > 25) - return base_component.used_px - 20; - else - return base_component.used_px + 20; - }); - }, - append_border: function(bar){ - bar.append("rect") - .attr("x", 0) - .attr("y", 0) - .attr("height", '100%') - .attr("width", '100%') - .style("stroke", "#bebebe") - .style("fill", "none") - .style("stroke-width", 1); - }, - // INIT - init: function() { - var self = this; - this.single_bars = $('div[data-single-bar-used]'); - - this.single_bars.each(function() { - self.refresh(this); - }); - }, - refresh: function(html_element){ - var chart = new this.SingleBarChart(this, html_element); - // FIXME save chart objects somewhere so I can use them again when - // e.g. I am swithing tabs, or if I want to update them - // via web sockets - // this.charts.add_or_update(chart) - chart.refresh(); - }, - render: function(html_element, data) { - var jquery_element = $(html_element); - - // Initialize base_component - var base_component = new this.BaseComponent(data); - - // Bar - var bar_html = d3.select(html_element); - - // Tooltips - var tooltip_average = bar_html.append("div"); - if (data.popup_average) - tooltip_average = this.append_tooltip(tooltip_average, data.popup_average); - - var tooltip_free = bar_html.append("div"); - if (data.popup_free) - tooltip_free = this.append_tooltip(tooltip_free, data.popup_free); - - var tooltip_used = bar_html.append("div"); - if (data.popup_used) - tooltip_used = this.append_tooltip(tooltip_used, data.popup_used); - - // append layout for bar chart - var bar = bar_html.append("svg:svg") - .attr("class", "chart") - .attr("width", base_component.w) - .attr("height", base_component.h) - .style("background-color", "white") - .append("g"); - var used_component; - - // append Unused resources Bar - this.append_unused(bar, base_component, tooltip_free); - - if (base_component.used_multi()){ - // If Used is shown as multiple values in one chart - for (var i = 0; i < base_component.percentage_used.length; ++i) { - // FIXME write proper iterator - base_component.used_multi_iterator = i; - - // Use general tooltip, content of tooltip will be changed - // by inner used compoentnts on their hover - tooltip_used = this.append_tooltip(tooltip_used, ""); - - // append used so it will be shown as multiple values in one chart - used_component = new this.UsedComponent(base_component); - used_component.append(bar, tooltip_used); - - // append Used resources to Bar - base_component.total_used_perc += base_component.percentage_used_value(); - } - - // append Text to Bar - this.append_text(bar, base_component, tooltip_free); - - } else { - // used is show as one value it the chart - used_component = new this.UsedComponent(base_component); - used_component.append(bar, tooltip_used); - - // append average value to Bar - var average_component = new this.AverageComponent(base_component); - average_component.append(bar, tooltip_average); - } - // append border of whole Bar - this.append_border(bar); - } -}; - - -horizon.addInitFunction(function () { - horizon.d3_single_bar_chart.init(); -}); diff --git a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.deployment_live.js b/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.deployment_live.js deleted file mode 100644 index 22e4f2f5..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.deployment_live.js +++ /dev/null @@ -1,17 +0,0 @@ -tuskar.deployment_live = (function () { - 'use strict'; - - var module = {}; - - module.init = function () { - $("#overcloudrc").on("hide.bs.collapse", function(){ - $("span.overcloudrc").html('Show <i class="fa fa-angle-down"></i>'); - }); - $("#overcloudrc").on("show.bs.collapse", function(){ - $("span.overcloudrc").html('Hide <i class="fa fa-angle-up"></i>'); - }); - }; - - horizon.addInitFunction(module.init); - return module; -} ()); diff --git a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.deployment_progress.js b/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.deployment_progress.js deleted file mode 100644 index 66829379..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.deployment_progress.js +++ /dev/null @@ -1,43 +0,0 @@ -tuskar.deployment_progress = (function () { - 'use strict'; - - var module = {}; - - module.init = function () { - if (!$('div.deployment-box div.progress').length) { return; } - this.interval = setInterval(function () { - module.check_progress(); - }, 30000); - module.events_template = Hogan.compile($('#events-template').html() || ''); - module.roles_template = Hogan.compile($('#roles-template').html() || ''); - }; - - module.check_progress = function () { - var $form = $('form.deployment-roles-form'); - $.ajax({ - type: 'GET', - headers: {'X-Horizon-Progress': 'true'}, - url: $form.attr('action'), - dataType: 'json', - async: true, - success: this.update_progress - }); - }; - - module.update_progress = function (data) { - if (data.progress >= 100 || data.progress <= 0) { - window.location.reload(true); - } - var $bar = $('div.deployment-box div.progress div.progress-bar'); - $bar.css('width', '' + data.progress + '%'); - if (data.show_last_events) { - $('div.deploy-last-events').html(module.events_template.render(data)); - } else { - $('div.deploy-last-events').html(''); - } - $('div.deploy-role-status').html(module.roles_template.render(data)); - }; - - horizon.addInitFunction(module.init); - return module; -} ()); diff --git a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.edit_plan.js b/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.edit_plan.js deleted file mode 100644 index 96ab5459..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.edit_plan.js +++ /dev/null @@ -1,74 +0,0 @@ -tuskar.edit_plan = (function () { - 'use strict'; - - var module = {}; - - module.debounce_timer = null; - module.ICON_CLASSES = ( - 'fa-spinner ' + - 'fa-spin ' + - 'fa-cloud ' + - 'fa-exclamation-circle ' + - 'fa-check-circle ' + - '' - ); - - module.init = function () { - if (!$('form.deployment-roles-form').length) { return; } - // Attach event listeners and hide the submit button. - $('form.deployment-roles-form input.number-picker' - ).change(module.on_change); - $('form.deployment-roles-form [type=submit]').hide(); - // Compile the templates. - module.message_template = Hogan.compile( - $('#message-template').html() || ''); - module.title_template = Hogan.compile( - $('#title-template').html() || ''); - }; - - module.on_change = function () { - // Only save when there was no activity for half a second. - window.clearTimeout(module.debounce_timer); - module.debounce_timer = window.setTimeout(module.save_form, 500); - }; - - module.save_form = function () { - // Save the current plan and get validation results. - var $form = $('form.deployment-roles-form'); - module.update_messages(null); - $.ajax({ - type: 'POST', - headers: {'X-Horizon-Validate': 'true'}, - url: $form.attr('action'), - data: $form.serialize(), - dataType: 'json', - async: true, - success: module.update_messages, - }); - }; - - module.update_messages = function (data) { - if (data === null) { - $('div.deployment-buttons a.btn-primary').addClass('disabled'); - $('div.deployment-icon i').removeClass(module.ICON_CLASSES - ).addClass('fa-spinner fa-spin'); - data = {validating:true}; - } else if (data.plan_invalid) { - $('div.deployment-buttons a.btn-primary').addClass('disabled'); - $('div.deployment-icon i').removeClass(module.ICON_CLASSES - ).addClass('fa-exclamation-circle'); - } else { - $('div.deployment-buttons a.btn-primary').removeClass('disabled'); - $('div.deployment-icon i').removeClass(module.ICON_CLASSES - ).addClass('fa-check-circle'); - } - $('div.deployment-box h4').replaceWith( - module.title_template.render(data)); - $('div.deployment-box ul').replaceWith( - module.message_template.render(data)); - $('div.deployment-box a#collapse-steps').text(data.steps_message); - }; - - horizon.addInitFunction(module.init); - return module; -} ()); diff --git a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.formset_table.js b/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.formset_table.js deleted file mode 100644 index 4cf225f1..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.formset_table.js +++ /dev/null @@ -1,87 +0,0 @@ -tuskar.formset_table = (function () { - 'use strict'; - - var module = {}; - - - // go through the whole table and fix the numbering of rows - module.reenumerate_rows = function (table, prefix) { - var count = 0; - var input_name_re = new RegExp('^' + prefix + '-(\\d+|__prefix__)-'); - var input_id_re = new RegExp('^id_' + prefix + '-(\\d+|__prefix__)-'); - - table.find('tbody tr').each(function () { - $(this).find('input').each(function () { - var input = $(this); - input.attr('name', input.attr('name').replace( - input_name_re, prefix + '-' + count + '-')); - input.attr('id', input.attr('id').replace( - input_id_re, 'id_' + prefix + '-' + count + '-')); - }); - count += 1; - }); - $('#id_' + prefix + '-TOTAL_FORMS').val(count); - }; - - // mark a row as deleted and hide it - module.delete_row = function (e) { - $(this).closest('tr').hide(); - $(this).prev('input[name$="-DELETE"]').attr('checked', true); - }; - - // replace the "Delete" checkboxes with × for deleting rows - module.replace_delete = function (where) { - where.find('input[name$="-DELETE"]').hide().after( - $('<a href="#" class="close">×</a>').click(module.delete_row) - ); - }; - - // add more empty rows in the flavors table - module.add_row = function (table, prefix, empty_row_html) { - var new_row = $(empty_row_html); - module.replace_delete(new_row); - table.find('tbody').append(new_row); - module.reenumerate_rows(table, prefix); - }; - - // prepare all the javascript for formset table - module.init = function (prefix, empty_row_html, add_label) { - - var table = $('table#' + prefix); - - module.replace_delete(table); - - // if there are extra empty rows, add the button for new rows - if (add_label) { - var button = $('<a href="#" class="btn btn-small pull-right">' + - add_label + '</a>'); - table.find('tfoot td').append(button); - button.click(function () { - module.add_row(table, prefix, empty_row_html); - }); - } - - // if the formset is not empty and has no errors, - // delete the empty extra rows from the end - var initial_forms = +$('#id_' + prefix + '-INITIAL_FORMS').val(); - var total_forms = +$('#id_' + prefix + '-TOTAL_FORMS').val(); - - if (table.find('tbody tr').length > 1 && - table.find('tbody td.error').length === 0 && - total_forms > initial_forms) { - table.find('tbody tr').each(function (index) { - if (index >= initial_forms) { - $(this).remove(); - } - }); - module.reenumerate_rows(table, prefix); - $('#id_' + prefix + '-INITIAL_FORMS').val( - $('#id_' + prefix + '-TOTAL_FORMS').val()); - } - - // enable tooltips - table.find('td.error[title]').tooltip(); - }; - - return module; -} ()); diff --git a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.js b/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.js deleted file mode 100644 index c9f29de6..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.js +++ /dev/null @@ -1,6 +0,0 @@ -var Tuskar = function () { - var tuskar = {}; - return tuskar; -}; - -var tuskar = new Tuskar(); diff --git a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.menu_formset.js b/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.menu_formset.js deleted file mode 100644 index a7021fe7..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.menu_formset.js +++ /dev/null @@ -1,87 +0,0 @@ -tuskar.menu_formset = (function () { - 'use strict'; - - var module = {}; - - module.init = function (prefix, empty_form_html) { - var input_name_re = new RegExp('^' + prefix + '-(\\d+|__prefix__)-'); - var input_id_re = new RegExp('^id_' + prefix + '-(\\d+|__prefix__)-'); - var $content = $('#formset-' + prefix +' .tab-content'); - var $nav = $('#formset-' + prefix + ' .nav'); - var activated = false; - - function renumber_form($form, prefix, count) { - $form.find('input, textarea, select').each(function () { - var input = $(this); - input.attr('name', input.attr('name').replace( - input_name_re, prefix + '-' + count + '-')); - input.attr('id', input.attr('id').replace( - input_id_re, 'id_' + prefix + '-' + count + '-')); - }); - } - - function reenumerate_forms($forms, prefix) { - var count = 0; - $forms.each(function () { - renumber_form($(this), prefix, count); - count += 1; - }); - $('#id_' + prefix + '-TOTAL_FORMS').val(count); - return count; - } - - function add_delete_link($nav_item) { - var $form = $content.find($nav_item.find('a').attr('href')); - $nav_item.prepend('<span class="btn-small pull-right delete-icon"><i class="fa fa-times"></i></span>'); - $nav_item.find('span.delete-icon:first').click(function () { - var count; - $form.remove(); - $nav_item.remove(); - count = reenumerate_forms($content.find('.tab-pane'), prefix); - if (count === 0) { add_node(); } - }); - } - - function add_node() { - var $new_form = $(empty_form_html); - var count, id, $new_nav; - $content.append($new_form); - $new_form = $content.find('.tab-pane:last'); - count = reenumerate_forms($content.find('.tab-pane'), prefix); - id = 'tab-' + prefix + '-' + count; - $new_form.attr('id', id); - $nav.append('<li><a href="#' + id + '" data-toggle="tab">Undefined node</a></li>'); - $new_nav = $nav.find('li > a:last'); - add_delete_link($new_nav.parent()); - $new_nav.click(function () { - $(this).tab('show'); - $('select.switchable').trigger('change'); - }); - $new_nav.tab('show'); - $('select.switchable').trigger('change'); - horizon.forms.add_password_fields_reveal_buttons($new_form); - } - - // Connect all signals. - $('#add-node-link').click(add_node); - $nav.find('li').each(function () { - add_delete_link($(this)); - }); - $nav.find('li a').click(function () { - window.setTimeout(function () { - $('select.switchable').trigger('change'); - }, 0); - }); - - // Activate the first field that has errors. - $content.find('.control-group.error').each(function () { - if (!activated) { - $nav.find('a[href="#' + $(this).closest('.tab-pane').attr('id') + '"]').tab('show'); - activated = true; - } - }); - - }; - - return module; -} ()); diff --git a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.number_picker.js b/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.number_picker.js deleted file mode 100644 index ac6ffda0..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.number_picker.js +++ /dev/null @@ -1,51 +0,0 @@ -tuskar.number_picker = (function () { - 'use strict'; - - var module = {}; - - module.init = function () { - $('input.number-picker').removeClass( - 'form-control').wrap( - '<div class="number_picker unselectable form-control">').before( - '<a class="arrow-left" href="#">' + - '<i class="fa fa-chevron-left"></i></a>').after( - '<a class="arrow-right" href="#">' + - '<i class="fa fa-chevron-right"></i></a>').each( - function () { - var $this = $(this); - var $right_arrow = $this.next('a.arrow-right'); - var $left_arrow = $this.prev('a.arrow-left'); - if ($this.attr('readonly')) { - $this.parent().addClass('readonly'); - } - function change(step) { - var value = +$this.val(); - var maximum = +$this.attr('max'); - var minimum = +$this.attr('min'); - value += step; - if (!isNaN(maximum)) { value = Math.min(maximum, value); } - if (!isNaN(minimum)) { value = Math.max(minimum, value); } - $right_arrow.toggleClass('disabled', (value === maximum)); - $left_arrow.toggleClass('disabled', (value === minimum)); - $this.val(value); - $this.trigger('change'); - } - $right_arrow.click(function () { - var step = +($this.attr('step') || 1); - change(step); - }); - $left_arrow.click(function () { - var step = -($this.attr('step') || 1); - change(step); - }); - change(0); - var step = +($this.attr('step') || 1); - if (step !== 1) { - $this.after('<span class="step">+' + step + '</span>'); - } - }); - }; - - horizon.addInitFunction(module.init); - return module; -} ()); diff --git a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.performance.js b/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.performance.js deleted file mode 100644 index 23658f10..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.performance.js +++ /dev/null @@ -1,25 +0,0 @@ -tuskar.performance = (function () { - 'use strict'; - - var module = {}; - - module.show_hide_datepickers = function () { - var date_options = $("#date_options"); - date_options.change(function(evt) { - if ($(this).find("option:selected").val() === "other"){ - evt.stopPropagation(); - $("#date_from, #date_to").val(''); - $("#date_from_group, #date_to_group").show(); - } else { - $("#date_from_group, #date_to_group").hide(); - } - }); - if (date_options.find("option:selected").val() === "other"){ - $("#date_from_group, #date_to_group").show(); - } else { - $("#date_from_group, #date_to_group").hide(); - } - }; - - return module; -} ()); diff --git a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.templates.js b/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.templates.js deleted file mode 100644 index 5f8e6862..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/js/tuskar.templates.js +++ /dev/null @@ -1,16 +0,0 @@ -/* Namespace for core functionality related to client-side templating. */ -tuskar.templates = { - template_ids: ["#modal_chart_template"], -}; - -/* Pre-loads and compiles the client-side templates. */ -tuskar.templates.compile_templates = function () { - $.each(tuskar.templates.template_ids, function (ind, template_id) { - horizon.templates.compiled_templates[template_id] = Hogan.compile($(template_id).html()); - }); -}; - -horizon.addInitFunction(function () { - // Load client-side template fragments and compile them. - tuskar.templates.compile_templates(); -}); |