From f2cd907fd631aa3637cfb9f792d99f968ff2e19c Mon Sep 17 00:00:00 2001 From: Victor Seva Date: Mon, 11 May 2015 09:12:42 +0200 Subject: [PATCH] MT#7247 move js part to external panel.js file. Sync release.html and project.html Change-Id: I6b262492e95b532b590a94a7a01a95738574c349 --- panel/static/panel/js/panel.js | 408 +++++++++++++++++++++++++++++ panel/templates/panel/base.html | 1 + panel/templates/panel/project.html | 285 +------------------- panel/templates/panel/release.html | 404 ---------------------------- 4 files changed, 414 insertions(+), 684 deletions(-) create mode 100644 panel/static/panel/js/panel.js diff --git a/panel/static/panel/js/panel.js b/panel/static/panel/js/panel.js new file mode 100644 index 0000000..0207919 --- /dev/null +++ b/panel/static/panel/js/panel.js @@ -0,0 +1,408 @@ +/** + * + * + */ + $.release = { + projects: new Set(), + stats: { + danger: new Set(), + success: new Set(), + created: new Set(), + }, + interval: 15000, +}; + +function get_label_status(status) { + var result; + switch (status) { + case "SUCCESS": + result = "success"; + break; + case "UNSTABLE": + result = "warning"; + break; + case "CREATED": + result = "default"; + break; + default: + result = "danger"; + } + return result; +} + +function get_class_status(base, status) { + return base + get_label_status(status); +} + +function sort_project_stat_lists() { + $('.list-stat').each(function() { + $(this).children().detach().sort(function(a, b) { + return $(a).text().localeCompare($(b).text()); + }).appendTo(this); + }); +} + +function set_project_stats(project, label) +{ + var labels = new Set(Object.keys($.release.stats)); + labels.delete(label); + + for (var item of labels) { + if ($.release.stats[item].has(project)) { + $.release.stats[item].delete(project); + } + } + create_new_project_stat(project, label); + if($.release.stats[label]) { + $.release.stats[label].add(project); + } + sort_project_stat_lists(); +} + +function update_stats_progress() { + var labels = new Set(Object.keys($.release.stats)); + var total = $.release.projects.size; + + for (var label of labels) { + var num = (($.release.stats[label].size * 100)/total).toPrecision(3); + var div_progress = $('.progress-bar-' + label); + + div_progress.attr('aria-valuenow', num); + div_progress.html( num + '%').css('width', num + '%'); + $('#stats-' + label).html($.release.stats[label].size); + } +} + +function update_stats() { + for (var project of $.release.projects) { + var div_uuid = $('#'+ project + '-' + $.release[project].last_uuid); + if (div_uuid.hasClass('panel-danger')) { + set_project_stats(project, 'danger'); + } + else if (div_uuid.hasClass('panel-success')) { + set_project_stats(project, 'success'); + } + else { + set_project_stats(project, 'created'); + } + } + update_stats_progress(); +} + +/*******************************************************************/ +function set_project_status(project, value) { + var div_project = $('#' + project); + var div_uuid = $('#'+ project + '-' + $.release[project].last_uuid); + var status; + + if (value) { + if(value.created) { + div_project.removeClass('panel-warning panel-danger panel-success'); + status = "CREATED"; + } + else { + status = value.result; + div_project.addClass(get_class_status("panel-", status)); + } + } + else { + if (div_uuid.hasClass('panel-warning')) { + div_project.addClass('panel-warning'); + status = 'warning'; + } + else if (div_uuid.hasClass('panel-danger')) { + div_project.addClass('panel-danger'); + status = 'danger'; + } + else if (div_uuid.hasClass('panel-success')) { + div_project.addClass('panel-success'); + status = 'success'; + } + } + update_stats(); +} + +function set_uuid_status(project, uuid, job, value) { + var div_uuid = $('#' + project + '-' + uuid); + var status = value.result; + var _class = get_class_status("panel-", status); + var jobs = $.release[project][uuid].jobs.size; + + switch (status) { + case "SUCCESS": + case "UNSTABLE": + if (job.match(/.+-repos$/)) { + div_uuid.removeClass('panel-warning panel-danger').addClass(_class); + console.debug(project + ' uuid: ' + uuid + " OK. done"); + } + break; + default: + div_uuid.addClass(_class); + if(! $.release[project][uuid].failed) { + $.release[project][uuid].failed = true; + console.debug(project + ' uuid: ' + uuid + ' set failed'); + } + } + $('.badge', div_uuid).html(jobs); + if (uuid == $.release[project].last_uuid) { + set_project_status(project); + // update badge + $('#stats-' + project + ' > .badge').html(jobs); + } +} + +function set_job_status(project, uuid, job, value) { + var id = project + '-' + uuid + '-' + job; + var div_job = $('#' + id); + + if (value) { + console.debug(job + ' found'); + div_job.addClass(get_class_status("list-group-item-", value.result)); + div_job.html('' + job + ''); + } + else { + console.error(job + ' not found'); + // this should not happend!! + } +} + +/*******************************************************************/ +function create_new_project_stat(project, label) { + var id = 'stats-' + project; + var uuid = $.release[project].last_uuid; + if ( $.release.stats[label].has(project) ) { return; } + else { $('#' + id).remove(); } + var div_project = $('.stats-project-' + label + '-clone').clone(); + div_project.removeClass('hidden stats-project-' + label + '-clone'); + + div_project.attr('id', id); + div_project.html('' + project + + ' ' + $.release[project][uuid].jobs.size + ''); + + // put it on the proper place + div_project.appendTo('#stats-list-' + label); +} + +function create_new_job_div(project, uuid, job) { + var id = project + '-' + uuid; + var div_job = $('#' + id + '-job').clone().removeClass('hidden'); + + div_job.attr('id', id + '-' + job).html(job); + // put it on the proper place + div_job.appendTo('#' + id + '-list'); + console.debug('job ' + job + ' created for ' + project + ' uuid: ' + uuid); +} + +/** + * The idea is to have a hidden blocks to clone + * be sure to create proper ids and remove the classes + * you use to select them + */ +function create_new_uuid_panel(project, uuid) { + var id = project + '-' + uuid; + var div_uuid = $('#' + project +' > .panel-body .uuid-clone').clone(); + div_uuid.removeClass('hidden'); + div_uuid.attr('id', id).removeClass('uuid-clone').addClass('uuid'); + + // rest of blocks or classes to select inside this + $('.uuid-list', div_uuid).attr('id', id + '-list').removeClass('uuid-list'); + $('.job', div_uuid).attr('id', id + '-job').removeClass('job'); + + var div_title = $('.panel-heading > .panel-title', div_uuid); + div_title.html('' + uuid + + ' ' + $.release[project][uuid].jobs.size + ''); + + // put it on the proper place + div_uuid.appendTo('#' + project + ' > .panel-body'); + console.debug('uuid ' + uuid + ' created for ' + project); +} + +function create_new_project_panel(project) { + var div_project = $('.project-clone').clone(); + var div_stats_total = $('#stats-total').html($.release.projects.size); + div_project.removeClass('hidden'); + div_project.attr('id', project).removeClass('project-clone').addClass('project'); + + var div_title = $('.panel-heading > .panel-title', div_project); + div_title.html('' + project + ''); + + $('.error', div_project).attr('id', project + '-error').removeClass('error'); + div_project.appendTo('#project-list'); + console.debug('project ' + project + ' created'); +} +/******************************************************************/ +function create_new_job(release, project, uuid, job) { + $.release[project][uuid].jobs.add(job); + + if (! $.release[project][uuid][job]) { + $.release[project][uuid][job] = { failed: false, }; + create_new_job_div(project, uuid, job); + update_job_info(release, project, uuid, job); + } + + if (!$.release[project][uuid][job].failed && + !$.release[project][uuid][job].timer) { + $.release[project][uuid][job].timer = setInterval(function() { + update_job_info(release, project, uuid, job); + }, $.release[project].interval); + } +} + +function create_new_uuid(release, project, uuid) { + if (uuid == null || $.release[project].uuids.has(uuid)) { + return; + } + + $.release[project].uuids.add(uuid); + $.release[project].last_uuid = uuid; + $.release[project][uuid] = { failed: false, jobs: new Set(),}; + + create_new_uuid_panel(project, uuid); + update_uuid_info(release, project, uuid); + set_project_status(project, {created: true}); + + if (!$.release[project][uuid].failed && !$.release[project][uuid].timer) { + $.release[project][uuid].timer = setInterval(function() { + update_uuid_info(release, project, uuid); + }, $.release[project].interval); + } + else { + clearInterval($.release[project][uuid].timer); + set_project_status(project, {result: "FAILED"}); + } +} + +function create_new_project(release, project) { + if ($.release.projects.has(project)) { + return; + } + $.release.projects.add(project); + $.release[project] = {uuids: new Set(), failed: false, interval: 5000,}; + create_new_project_panel(project); + + $.release[project].timer = setInterval(function() { + get_uuids_for_project(release, project); + }, $.release[project].interval); + get_uuids_for_project(release, project); +} + +/******************************************************************/ + +function update_job_view(project, uuid, job, data) { + var value = data.results[0]; + + if (data.count != 0) { + if ($.release[project][uuid][job].timer) { + clearInterval($.release[project][uuid][job].timer); + } + set_job_status(project, uuid, job, value); + set_uuid_status(project, uuid, job, value); + } + else { + console.error(job + ' not found'); + // this should not happend!! + } +} + +function update_job_info(release, project, uuid, job) { + + function successFunc(data, textStatus, jqXHR ) { + update_job_view(project, uuid, job, data); + } + + function errorFunc(jqXHR, status, error) { + $('#' + project + '-error').html(error); + $.release[project][uuid][job].failed = true; + } + + if (!$.release[project][uuid].failed && + ! $.release[project][uuid][job].failed ) + { + $.ajax({ + url: '/jenkinsbuildinfo/?format=json&tag=' + uuid + + '¶m_release=' + release + '&jobname=' + job, + method: 'GET', + contentType: "application/json; charset=utf-8", + dataType: "json", + success: successFunc, + error: errorFunc + }); + } + else { + clearInterval($.release[project][uuid][job].timer); + set_project_status(project, {result: "FAILED"}); + } +} + +function update_uuid_info(release, project, uuid) { + + function successFunc(data, textStatus, jqXHR ) { + $(data).each(function() { + create_new_job(release, project, uuid, this.jobname); + }); + } + + function errorFunc(jqXHR, status, error) { + $('#' + project + '-error').html(error); + $.release[project][uuid].failed = true; + } + + if (! $.release[project][uuid].failed) { + $.ajax({ + url: '/release/' + release + '/' + project + '/' + uuid + '/?format=json', + method: 'GET', + contentType: "application/json; charset=utf-8", + dataType: "json", + success: successFunc, + error: errorFunc + }); + } + else { + clearInterval($.release[project][uuid].timer); + } +} + +function get_uuids_for_project(release, project) { + + function successFunc(data, textStatus, jqXHR ) { + $(data).each(function() { + create_new_uuid(release, project, this.tag); + }); + } + + function errorFunc(jqXHR, status, error) { + $('#' + project + '-error').html(error); + } + + $.ajax({ + url: '/release/' + release +'/' + project + '/?format=json', + method: 'GET', + contentType: "application/json; charset=utf-8", + dataType: "json", + success: successFunc, + error: errorFunc + }); +} + +function get_projects(release) { + + function successFunc(data, textStatus, jqXHR ) { + $(data).each(function() { + create_new_project(release, this.projectname); + }); + } + + function errorFunc(jqXHR, status, error) { + console.error(error); + } + + $.ajax({ + url: '/release/' + release + '/?format=json', + method: 'GET', + contentType: "application/json; charset=utf-8", + dataType: "json", + success: successFunc, + error: errorFunc + }); +} diff --git a/panel/templates/panel/base.html b/panel/templates/panel/base.html index 92d8ada..2d6737b 100644 --- a/panel/templates/panel/base.html +++ b/panel/templates/panel/base.html @@ -39,6 +39,7 @@ {% block content %}{% endblock %} + {% block extrajs %}{% endblock %} diff --git a/panel/templates/panel/project.html b/panel/templates/panel/project.html index d23c62f..dcc44ea 100644 --- a/panel/templates/panel/project.html +++ b/panel/templates/panel/project.html @@ -6,9 +6,9 @@ {% endblock %} {% block content %}
-
+ - +
+
{% endblock %} {% block extrajs %} {% endblock %} diff --git a/panel/templates/panel/release.html b/panel/templates/panel/release.html index 7bfea4a..7a357dd 100644 --- a/panel/templates/panel/release.html +++ b/panel/templates/panel/release.html @@ -75,410 +75,6 @@ {% block extrajs %}