diff options
Diffstat (limited to 'tuskar_ui/infrastructure/static')
27 files changed, 0 insertions, 2017 deletions
diff --git a/tuskar_ui/infrastructure/static/infrastructure/images/chevron.png b/tuskar_ui/infrastructure/static/infrastructure/images/chevron.png Binary files differdeleted file mode 100644 index 4e4cef9e..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/images/chevron.png +++ /dev/null diff --git a/tuskar_ui/infrastructure/static/infrastructure/images/power.png b/tuskar_ui/infrastructure/static/infrastructure/images/power.png Binary files differdeleted file mode 100644 index 8d3590dd..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/images/power.png +++ /dev/null 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(); -}); diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_breadcrumbs.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_breadcrumbs.scss deleted file mode 100644 index 6a4e24f7..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/scss/_breadcrumbs.scss +++ /dev/null @@ -1,31 +0,0 @@ -// breadcrumbs - -.breadcrumbs { - font-size: 85%; - margin: 0 0 25px 0; - - a { - color: rgb(170, 170, 170); - text-decoration: underline; - - &:hover { - text-decoration: none; - color: rgb(100, 100, 100); - } - } - - .separator { - color: rgb(200, 200, 200); - - &:before { - display: inline; - content: ">>"; - margin: 0 7px; - } - - &:last-child:after { - display: inline; - content: "..."; - } - } -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_buttons.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_buttons.scss deleted file mode 100644 index 0a62aa05..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/scss/_buttons.scss +++ /dev/null @@ -1,15 +0,0 @@ -// buttons -.btn-default:not(.btn-danger, .btn-primary) { - background: rgb(243, 243, 243); - &:hover { - background: rgb( 235, 235, 235); - } -} - -.btn-toolbar.pull-right { - margin: 0; -} - -.btn-no-border { - border: none; -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_capacities.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_capacities.scss deleted file mode 100644 index 91b2a1f5..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/scss/_capacities.scss +++ /dev/null @@ -1,24 +0,0 @@ -// capacities -table.capacities { - &.overall_usage { - margin-top: 5px; - } - - td { - padding: 3px; - - &.capacity_label { - width: 60px; - padding-right: 5px; - color: rgb(160,160,160); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - & div.capacity_bar { - line-height: 0; - width: 120px; - } - } -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_charts.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_charts.scss deleted file mode 100644 index 1a20c71c..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/scss/_charts.scss +++ /dev/null @@ -1,15 +0,0 @@ -form.performance_charts { - .pull-right { - input { - margin-left: 0; - } - } -} -.overview_chart { - .chart_container { - .spinner_wrapper { - margin-top: 12px; - margin-left: 12px; - } - } -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_detail_pages.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_detail_pages.scss deleted file mode 100644 index 7c3d096a..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/scss/_detail_pages.scss +++ /dev/null @@ -1,12 +0,0 @@ -.dl-horizontal-left { - dt { - width: 120px; - text-align: left; - color: rgb(160, 160, 160); - font-weight: normal; - } - dd { - margin-left: 130px; - padding-bottom: .5em; - } -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_flavor_usages.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_flavor_usages.scss deleted file mode 100644 index 639be9ec..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/scss/_flavor_usages.scss +++ /dev/null @@ -1,89 +0,0 @@ -// flavor usages -div.flavor_usage_bar { - max-width: 550px; -} - -table.flavor_usages { - width: 100%; - max-width: 550px; - - td { - text-align: center; - padding: 3px; - - &.flavor_usage_label { - width: 60px; - text-align: center; - } - - &.flavor_usage_text { - width: 60px; - text-align: center; - line-height: 1; - } - - & div.flavor_usage_bar { - width: auto; - text-align: center; - line-height: 0; - height: 120px; - } - } -} - -#interval_selector { - position: absolute; - right: 15px; - top: 15px; - - li { - display: inline; - list-style-type: none; - padding-right: 5px; - - &.active { - font-weight: bold; - - a { - color: black; - - &:hover { - text-decoration:none; - } - } - } - } -} - -svg { - .axis { - path, line { - fill: none; - stroke: #000; - shape-rendering: crispEdges; - } - } -} - -.communication_chart_wrapper { - display:inline-block; - vertical-align: middle; - width: 38%; -} - -.communication_chart_connection { - display:inline-block; - width: 60px; - height: 30px; - vertical-align: middle; - background: url('/static/dashboard/img/communication_flow.png') no-repeat 50% 50%; - background-size: 40px 20px; -} - -.circles_chart_time_picker { - float: right; -} - -.csv_rack_table { - padding-top: 40px; -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_formsets.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_formsets.scss deleted file mode 100644 index cb1f3b59..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/scss/_formsets.scss +++ /dev/null @@ -1,34 +0,0 @@ -// formsets -.datatable { - th.narrow { - width: 1em; - } - - input { - padding: 2px 5px; - margin: 0; - } - - input.number_input_slim { - width: 4em; - text-align: right; - } - - th span.required:after { - // Copied from horizon, because there is no way to reuse their class. - content: "*"; - font-weight: bold; - line-height: 0; - padding-left: 4px; - color: #428bca; - } -} - -.param-section { - padding-bottom: 15px; -} - -#collapse-upload-form { - text-align: center; - padding-bottom: 30px; -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_icons.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_icons.scss deleted file mode 100644 index e5ea1f78..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/scss/_icons.scss +++ /dev/null @@ -1,5 +0,0 @@ -.text-warning .fa, -.alert-warning .fa, -.text-warning.fa { - color: #eea236; -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_individual_pages.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_individual_pages.scss deleted file mode 100644 index b9cdfcdd..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/scss/_individual_pages.scss +++ /dev/null @@ -1,271 +0,0 @@ -#nodes-formset-datatable .datatable tbody { - input { - padding: 2px 1px; - } - input.number_input_slim { - width: 3em; - } - td { - padding: 2px; - text-align: center; - a.close { - margin-right: 4px; - } - } -} - -$link-color: #428bca; - -// Register nodes formset -.register-nodes-formset { - a.node-icon { - display: block; - float: right; - padding-left: 10px; - } - - .nav-pills > .active > a { - color: #fff; - background-color: $link-color; - } - - ul.nav-pills > li span.delete-icon { - display: none; - } - - ul.nav-pills > li.active span.delete-icon { - display: block; - cursor: default; - color: #fff; - z-index: 1000; - position: absolute; - right: 16px; - top: 10px; - } - - ul.nav-pills > li { - position: relative; - } - - ul.nav-pills > li.active { - width: 107%; - } - - ul.nav-pills > li.active:after { - display: block; - content: ''; - position: absolute; - top: 1px; - right: -7px; - border-top: 18px solid transparent; - border-bottom: 18px solid transparent; - border-left: 8px solid $link-color; - } - - .register-nav-head { - margin-top: 19px; - margin-bottom: 5px; - - h4 { - margin: 0; - } - } - - .form h5 { - margin: 0.5em 0 0.75em 0; - } - - .form label.checkbox { - font-weight: normal; - } - - .panel { - margin: 8px -8px 8px -8px; - padding: 8px; - .panel-heading { - margin: -8px -8px 0 -8px; - } - } - - fieldset .form-group { - width: 100%; - input, textarea, select { - width: 100%; - margin-left: 5px; - } - } - - .required label:after { - content: "*"; - font-weight: bold; - line-height: 0; - padding-left: 4px; - color: #428bca; - } -} - - -#detail__overview, #collapseParameters { - ul { - list-style: disc; - margin: 0 0 9px 25px; - } -} - -// Power state icons -.fa.powerstate { - display: inline-block; - vertical-align: middle; - &.fa-play { - color: $brand-success; - } -} - -// Node detail view -.node-details { - .chart svg { - path.undefined { - stroke-width: 1px; - stroke: #ff7f0e; - } - - .y_ticks text { - display: none; - } - } -} - -// Node overview - -.nodes { - .widget-info { - padding: 0 30px 0 30px; - text-align: center; - span { - font-size: 300%; - } - } - - .d3_pie_chart_distribution { - .legend { - position: relative; - } - } -} - -// Plan overview - -.deployment-icon { - vertical-align: middle; - float: left; - text-align: center; - color: #ddd; - background: #fff; -} - -.deployment-box { - border-left: 4px solid #eee; - margin-left: 24px; - margin-bottom: 12px; - padding-left: 20px; -} - -.deployment-buttons { - margin-top: 12px; -} - -.deployment-roles-label { - font-weight: bold; - display: block; - margin: 14px 0 0 0; -} - -.deploy-role-icon { - a { - display: inline-block; - margin: 7px 0 0 0; - } - i { - display: inline-block; - margin: 14px 0 0 0; - } -} -.deploy-role-count { - text-align: right; - vertical-align: middle; - font-size: 32px; - small { - font-size: 28px; - } -} - -#collapseDriver { - margin-left: -50px; -} - -/* Configuration parameters */ -table .data-table-config-label { - width: 20em; - vertical-align: top; -} -table .data-table-config-value { - font-weight: bold; -} -table.definition-list-table > thead { - display: none; -} -table.definition-list-table > tbody > tr > td { - border: 0; -} - - -ul.nav-arrow { - padding-top: 30px; - & > li { - z-index: 1000; - position: relative; - margin-right: -30px; - & > a { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - &.active { - margin-right: -31px; - &:after { - display: block; - content: ''; - position: absolute; - top: 0px; - right: -12px; - border-top: 19px solid transparent; - border-bottom: 19px solid transparent; - border-left: 12px solid $link-color; - } - } - } -} - -.configuration-panel { - padding: 15px 0 0px 30px !important; - border: none; - border-left: 1px solid $border-color; - border-radius: 0; - box-shadow: none; -} - -.password-button + div.popover { - white-space: pre-wrap; - word-wrap: break-word; -} - -.form-horizontal label .popover { - min-width: 250px; - .popover-content { - font-weight: normal; - } -} - -// hacky positioning of advanced service config form buttons next to header -.page_form_actions { - margin-top: -5em; -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_numberpicker.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_numberpicker.scss deleted file mode 100644 index d443c41e..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/scss/_numberpicker.scss +++ /dev/null @@ -1,49 +0,0 @@ -// Number picker widget -div.number_picker { - text-align: left; - margin: 5px 14px; - width: 35px; - height: 35px; - padding: 0; - display: inline-block; - position: relative; - vertical-align: middle; - input { - border: 0; - width: 20px; - display: block; - margin: 8px auto; - padding: 0; - text-align: center; - outline: 0; - } - a { - display: block; - width: 14px; - position: absolute; - top: 8px; - cursor: default; - &.disabled { - cursor: default; - } - &.arrow-left { - left: -12px; - } - &.arrow-right { - right: -16px; - } - } - a.disabled { - opacity: 0.25; - } - &.readonly a { - display: none; - } - span.step { - display: block; - font-size: 75%; - position: absolute; - top: -2px; - right: -14px; - } -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_tables.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_tables.scss deleted file mode 100644 index d881ef4c..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/scss/_tables.scss +++ /dev/null @@ -1,74 +0,0 @@ -tr.table_actions_row { - th.table_header { - background: #f9f9f9; - border-top-width: 2px !important; - .table_actions { - float: none; - .table_search, .table_filter { - .filter_select { - display: inline-block; - position: relative; - background: rgb(243, 243, 243); - margin-right: -4px; - &:after, &:before { - left: 100%; - top: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - z-index: 3; - } - - &:after { - border-color: rgba(243, 243, 243, 0); - border-left-color: #f3f3f3; - border-width: 14px; - margin-top: -14px; - } - &:before { - border-color: rgba(204, 204, 204, 0); - border-left-color: #cccccc; - border-width: 16px; - margin-top: -16px; - } - select { - overflow:hidden; - width: 120%; - border-right: none; - box-shadow: none; - background: transparent; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - .caret { - position: absolute; - right: 0; - top: 47%; - } - } - input[type="text"] { - padding-right: 5px; - } - input.filter_select_input { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left: none; - padding-left: 20px; - &:focus { - box-shadow: none; - } - } - } - } - } -} - -.table > thead > tr > th { - border-bottom: none; -} -tr.column_headers th { - border: 1px solid $gray-light; -} diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/infrastructure.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/infrastructure.scss deleted file mode 100644 index 3194e008..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/scss/infrastructure.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* Additional CSS for infrastructure. */ -@import "/dashboard/scss/variables"; -@import "/bootstrap/scss/bootstrap/variables"; - -@import "numberpicker"; -@import "breadcrumbs"; -@import "buttons"; -@import "capacities"; -@import "flavor_usages"; -@import "formsets"; -@import "individual_pages"; -@import "tables"; -@import "charts"; -@import "icons"; -@import "detail_pages" diff --git a/tuskar_ui/infrastructure/static/infrastructure/tests/formset_table.js b/tuskar_ui/infrastructure/static/infrastructure/tests/formset_table.js deleted file mode 100644 index 184d7706..00000000 --- a/tuskar_ui/infrastructure/static/infrastructure/tests/formset_table.js +++ /dev/null @@ -1,60 +0,0 @@ -horizon.addInitFunction(function () { - module("Formset table (tuskar.formset_table.js)"); - - test("Reenumerate rows", function () { - var html = $('#qunit-fixture'); - var table = html.find('table'); - var input = table.find('tbody tr#flavors__row__14 input').first(); - - input.attr('id', 'id_flavors-3-name'); - tuskar.formset_table.reenumerate_rows(table, 'flavors'); - equal(input.attr('id'), 'id_flavors-0-name', "Enumerate old rows ids"); - input.attr('id', 'id_flavors-__prefix__-name'); - tuskar.formset_table.reenumerate_rows(table, 'flavors'); - equal(input.attr('id'), 'id_flavors-0-name', "Enumerate new rows ids"); - }); - - test("Delete row", function () { - var html = $('#qunit-fixture'); - var table = html.find('table'); - var row = table.find('tbody tr').first(); - var input = row.find('input#id_flavors-0-DELETE'); - - equal(row.css("display"), 'table-row'); - equal(input.attr('checked'), undefined); - tuskar.formset_table.replace_delete(row); - var x = input.next('a'); - tuskar.formset_table.delete_row.call(x); - equal(row.css("display"), 'none'); - equal(input.attr('checked'), 'checked'); - }); - - test("Add row", function() { - var html = $('#qunit-fixture'); - var table = html.find('table'); - var empty_row_html = '<tr><td><input id="id_flavors-__prefix__-name" name="flavors-__prefix__-name"></td></tr>'; - - equal(table.find('tbody tr').length, 3); - equal(html.find('#id_flavors-TOTAL_FORMS').val(), 3); - tuskar.formset_table.add_row(table, 'flavors', empty_row_html); - equal(table.find('tbody tr').length, 4); - equal(table.find('tbody tr:last input').attr('id'), 'id_flavors-3-name'); - equal(html.find('#id_flavors-TOTAL_FORMS').val(), 4); - }); - - test("Init formset table", function() { - var html = $('#qunit-fixture'); - var table = html.find('table'); - - tuskar.formset_table.init('flavors', '', 'Add row'); - equal(table.find('tfoot tr a').html(), 'Add row'); - }); - - test("Init formset table -- no add", function() { - var html = $('#qunit-fixture'); - var table = html.find('table'); - - tuskar.formset_table.init('flavors', '', ''); - equal(table.find('tfoot tr a').length, 0); - }); -}); |
