openstack/murano-dashboard
Code Issues Proposed changes

eslint cleanup of draggable-components.js

Browse Source 
Cleanup draggable-components.js to pass eslint.

Added checks, that Hogan templates are present on the page, to prevent
occasional failures if the script is included on a different page.
Refactored prototype modification.
Added TENANT_ID to global variables in .eslintrc

Partially implements: blueprint add-js-lint-jobs

Change-Id: I35e3cee2af3eb8ee34f4b9a97cd9e4e756cd6458
This commit is contained in:
Kirill Zaitsev 2015-07-28 01:30:02 +03:00
parent 01c808e443
commit 0996aa1f2d
3 changed files with 98 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc
View File

@ -12,6 +12,9 @@ globals:
# allow accessing horizon
horizon: false
# allow passing TENANT_ID from django templates
TENANT_ID: false
# Only support ECMA5, disable everything else.
# NOTE(kzaitsev): blatantly copied from horizon
ecmaFeatures:

160
muranodashboard/static/muranodashboard/js/draggable-components.js
View File

@ -1,10 +1,27 @@
/* Copyright (c) 2013 Mirantis, Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may
not use this file except in compliance with the License. You may obtain
a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations
under the License.
*/
$(function() {
"use strict";
horizon.tabs.addTabLoadFunction(initServicesTab);
initServicesTab($('.tab-content .tab-pane.active'));
function initServicesTab($tab) {
var $dropArea = $tab.find('.drop_component'),
draggedAppUrl = null,
firstDropTarget = null;
var $dropArea = $tab.find('.drop_component');
var draggedAppUrl = null;
var firstDropTarget = null;
function bindAppTileHandlers() {
$('.draggable_app').each(function () {
@ -17,7 +34,7 @@ $(function() {
ev.originalEvent.dataTransfer.setData('text/uri-list', draggedAppUrl);
}).on('dragend', function () {
$dropArea.removeClass('over');
})
});
});
}
@ -38,11 +55,11 @@ $(function() {
return false;
});
var packages = $.parseJSON($('#apps_carousel_contents').val());
function subdivide(numOfItems) {
var chunks = [],
seq = this,
head = seq.slice(0, numOfItems),
tail = seq.slice(numOfItems);
function subdivide(array, numOfItems) {
var chunks = [];
var seq = array;
var head = seq.slice(0, numOfItems);
var tail = seq.slice(numOfItems);
while (tail.length) {
chunks.push(head);
head = tail.slice(0, numOfItems);
@ -52,21 +69,29 @@ $(function() {
return chunks;
}
Array.prototype.subdivide = subdivide;
var $carouselInner = $tab.find('.carousel-inner'),
$carousel = $('#apps_carousel'),
$filter = $('#envAppsFilter').find('input'),
$noAppMsg = $('#no_apps_found_message'),
category = ALL_CATEGORY = 'All',
filterValue = '',
ENTER_KEYCODE = 13;
var tileTemplate = Hogan.compile($('#app_tile_small').html()),
var $carouselInner = $tab.find('.carousel-inner');
var $carousel = $('#apps_carousel');
var $filter = $('#envAppsFilter').find('input');
var $noAppMsg = $('#no_apps_found_message');
var category = 'All';
var ALL_CATEGORY = 'All';
var filterValue = '';
var ENTER_KEYCODE = 13;
var tileTemplate,
environmentId;
var $appTitleSmall = $('#app_tile_small');
if ($appTitleSmall.length > 0) {
tileTemplate = Hogan.compile($appTitleSmall.html());
}
if ($('#environmentId').length > 0) {
environmentId = $('#environmentId').val();
}
function fillCarousel(apps) {
var i = apps.length;
while (i--) {
if (tenant_id !== apps[i].owner_id && apps[i].is_public == false) {
if (TENANT_ID !== apps[i].owner_id && apps[i].is_public === false) {
apps.splice(i, 1);
}
}
@ -76,10 +101,10 @@ $(function() {
if ($carousel.css('display') === 'none') {
$carousel.show();
}
apps.subdivide(6).forEach(function (chunk, index) {
var $item = $('<div class="item"></div>'),
$row = $('<div class="row"></div>');
if (index == 0) {
subdivide(apps, 6).forEach(function (chunk, index) {
var $item = $('<div class="item"></div>');
var $row = $('<div class="row"></div>');
if (index === 0) {
$item.addClass('active');
}
$item.appendTo($row);
@ -90,14 +115,14 @@ $(function() {
app_id: pkg.id
});
// tenant_id is obtained from corresponding Django template
if (tenant_id === pkg.owner_id) {
if (TENANT_ID === pkg.owner_id) {
html = $(html).find('img.ribbon').remove().end();
}
$(html).appendTo($item);
});
$item.appendTo($carouselInner);
});
$('div.carousel-control').removeClass('item')
$('div.carousel-control').removeClass('item');
bindAppTileHandlers();
} else {
if ($('#no_apps_in_catalog_message').length == 0) {
@ -118,10 +143,11 @@ $(function() {
if (category === ALL_CATEGORY && filterValue === '') {
fillCarousel(packages);
} else {
var filterRegexp = new RegExp(filterValue, 'i'),
filterRegexpExact = new RegExp('\\b' + filterValue + '\\b', 'i');
var filterRegexp = new RegExp(filterValue, 'i');
var filterRegexpExact = new RegExp('\\b' + filterValue + '\\b', 'i');
fillCarousel(packages.filter(function (pkg) {
var categorySatisfied = true, filterSatisfied = true;
var categorySatisfied = true;
var filterSatisfied = true;
if (category !== ALL_CATEGORY) {
categorySatisfied = pkg.categories.indexOf(category) > -1;
}
@ -133,7 +159,7 @@ $(function() {
});
}
return categorySatisfied && filterSatisfied;
}))
}));
}
}
@ -146,7 +172,7 @@ $(function() {
});
// dynamic carousel refilling on search box non-empty submission
$filter.keypress(function (ev) {
if (ev.which == ENTER_KEYCODE) {
if (ev.which === ENTER_KEYCODE) {
filterValue = $filter.val();
refillCarousel();
ev.preventDefault();
@ -170,7 +196,7 @@ $(function() {
function handleError() {
hideSpinner();
horizon.alert('error', 'Unable to run action.');
horizon.alert('error', gettext('Unable to run action.'));
}
bindActionHandlers($tab);
@ -181,21 +207,39 @@ $(function() {
function bindActionHandlers($parent) {
$parent.find('.murano_action').off('click').on('click', function(event) {
var $this = $(this),
$form = $this.closest('.table_wrapper > form'),
startUrl = $this.attr('href'),
resultUrl = null,
ERRDATA = 'error',
data = null;
var $this = $(this);
var $form = $this.closest('.table_wrapper > form');
var startUrl = $this.attr('href');
var resultUrl = null;
var ERRDATA = 'error';
var data = null;
function doRequest(url) {
var requestData;
$.ajax({
method: 'GET',
url: url,
async: false,
error: function () {
handleError();
requestData = ERRDATA;
},
success: function (newData) {
requestData = newData;
}
});
return requestData;
}
horizon.modals.modal_spinner(gettext("Waiting for a result"));
button = '<div class="modal-close"' +
'><button class="btn btn-sm btn-danger" data-placement="right"' +
' data-original-title="Action result won\'t be available">Stop Waiting</button></div>'
var modal_content = horizon.modals.spinner.find(".modal-content");
modal_content.append(button);
$('.modal-close button').tooltip();
$('.modal-close button').on("click", function () {
horizon.modals.modal_spinner(gettext("Waiting for a result"));
var button = '<div class="modal-close"' +
'><button class="btn btn-sm btn-danger" data-placement="right"' +
' data-original-title="Action result won\'t be available">Stop Waiting</button></div>';
var modalContent = horizon.modals.spinner.find(".modal-content");
var intervalId;
modalContent.append(button);
$('.modal-close button').tooltip();
$('.modal-close button').on("click", function () {
window.clearInterval(intervalId);
document.location = $form.attr('action');
});
@ -205,30 +249,14 @@ $(function() {
url: startUrl,
data: $form.serialize(),
async: false,
success: function (data) {
resultUrl = data && data.url;
success: function (successData) {
resultUrl = successData && successData.url;
},
error: handleError
});
if ( resultUrl ) {
function doRequest(url) {
var _data;
$.ajax({
method: 'GET',
url: url,
async: false,
error: function () {
handleError();
_data = ERRDATA;
},
success: function (newData) {
_data = newData;
}
});
return _data;
}
var intervalId = window.setInterval(function () {
intervalId = window.setInterval(function () {
// it's better to avoid placing the whole downloadable content
// into JS memory in case of downloading very large files
data = doRequest(resultUrl + 'poll');
@ -254,8 +282,6 @@ $(function() {
}
event.preventDefault();
});
}
}
}
});

4
muranodashboard/templates/services/index.html
View File

@ -49,6 +49,6 @@
<script src="{% static 'muranodashboard/js/draggable-components.js' %}"></script>
<script src="{% static 'muranodashboard/js/horizon.tables+reload.js' %}"></script>
<script type="text/javascript">
var tenant_id = "{{tenant_id}}"
var TENANT_ID = "{{tenant_id}}";
</script>
{% endblock %}
{% endblock %}