Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[JENKINS-70934] Remove Prototype usages from buildListTable.jelly #7830

Merged
merged 5 commits into from
Apr 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -122,3 +122,85 @@ function generateSVGIcon(iconName, iconSizeClass) {

return span;
}

/**
* Public method to be called by progressiveRendering's callback
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI this is the same comment as the first method in this file, which is used for the global build trend.
Not ideal, but not blocking.

*/
window.displayBuilds = function (data) {
var rootUrl = document.head.getAttribute("data-rooturl");
var p = document.getElementById("projectStatus");
p.style.display = "";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FTR this change is an inlining of the method from prototype.js:

show: function(element) {
element = $(element);
element.style.display = '';
return element;
},

for (var x = 0; data.length > x; x++) {
var e = data[x];
var tr = document.createElement("tr");

var td1 = document.createElement("td");
td1.setAttribute("data", e.iconColorOrdinal);
td1.classList.add("jenkins-table__cell--tight", "jenkins-table__icon");
var div1 = document.createElement("div");
div1.classList.add("jenkins-table__cell__button-wrapper");
var svg = generateSVGIcon(e.iconName, p.dataset.iconSizeClass);
div1.appendChild(svg);
td1.appendChild(div1);
tr.appendChild(td1);

var td2 = document.createElement("td");
var a1 = document.createElement("a");
a1.classList.add("jenkins-table__link", "model-link");
a1.href = rootUrl + "/" + e.parentUrl;
var span1 = document.createElement("span");
// TODO port Functions#breakableString to JavaScript and use .textContent rather than .innerHTML
span1.innerHTML = e.parentFullDisplayName;
a1.appendChild(span1);
td2.appendChild(a1);
var a2 = document.createElement("a");
a2.classList.add(
"jenkins-table__link",
"jenkins-table__badge",
"model-link",
"inside"
);
a2.href = rootUrl + "/" + e.url;
a2.textContent = e.displayName;
td2.appendChild(a2);
tr.appendChild(td2);

var td3 = document.createElement("td");
td3.setAttribute("data", e.timestampString2);
var button = document.createElement("button");
button.classList.add("jenkins-table__link");
button.setAttribute("tooltip", p.dataset.scrollTooltip);
button.setAttribute(
"onclick",
'javascript:tl.getBand(0).scrollToCenter(Timeline.DateTime.parseGregorianDateTime("' +
e.timestampString3 +
'"))'
);
button.textContent = e.timestampString;
td3.appendChild(button);
tr.appendChild(td3);

var td4 = document.createElement("td");
if (e.buildStatusSummaryWorse) {
td4.style.color = "var(--red)";
}
td4.textContent = e.buildStatusSummaryMessage;
tr.appendChild(td4);

var td5 = document.createElement("td");
td5.classList.add("jenkins-table__cell--tight");
var div2 = document.createElement("div");
div2.classList.add("jenkins-table__cell__button-wrapper");
var a3 = document.createElement("a");
a3.classList.add("jenkins-table__button");
a3.href = rootUrl + "/" + e.url + "console";
a3.innerHTML = p.dataset.consoleOutputIcon;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For future readers, just in case, the dataset contains the data-console-output-icon attribute converted into consoleOutputIcon. Don't be fooled by the Java variable in the jelly page that is called consoleOutputIcon

div2.appendChild(a3);
td5.appendChild(div2);
tr.appendChild(td5);

p.appendChild(tr);
Behaviour.applySubtree(tr);
}
ts_refresh(p);
};
36 changes: 4 additions & 32 deletions core/src/main/resources/lib/hudson/buildListTable.jelly
Original file line number Diff line number Diff line change
Expand Up @@ -33,41 +33,13 @@ THE SOFTWARE.

<t:setIconSize/>
<st:adjunct includes="hudson.model.Job.buildTimeTrend_resources" />
<script>
function displayBuilds(data) {
var p = $$('projectStatus');
p.show();
for (var x = 0; data.length > x; x++) {
var e = data[x];
var tr = new Element('tr');
tr.insert(new Element('td', {data: e.iconColorOrdinal, class: 'jenkins-table__cell--tight jenkins-table__icon'}).
insert(new Element('div', {class: 'jenkins-table__cell__button-wrapper'}).
insert(generateSVGIcon(e.iconName, "${iconSizeClass}"))));
tr.insert(new Element('td').
insert(new Element('a', {class: 'jenkins-table__link model-link', href: '${rootURL}/' + e.parentUrl}).
insert(new Element('span').
update(e.parentFullDisplayName))).
insert(new Element('a', {class: 'jenkins-table__link jenkins-table__badge model-link inside', href: '${rootURL}/' + e.url}).
update(e.displayName.escapeHTML())));
tr.insert(new Element('td', {data: e.timestampString2}).
insert(new Element('button', {class: 'jenkins-table__link', tooltip: '${%Click to center timeline on event}', onclick: 'javascript:tl.getBand(0).scrollToCenter(Timeline.DateTime.parseGregorianDateTime("' + e.timestampString3 + '"))'}).
update(e.timestampString.escapeHTML())));
tr.insert(new Element('td', {style: e.buildStatusSummaryWorse ? 'color: var(--red)' : ''}).
update(e.buildStatusSummaryMessage.escapeHTML()));
tr.insert(new Element('td', {class: 'jenkins-table__cell--tight'}).
insert(new Element('div', {class: 'jenkins-table__cell__button-wrapper'}).
insert(new Element('a', {class: 'jenkins-table__button', href: '${rootURL}/' + e.url + 'console'}).
insert(`<l:icon src="symbol-terminal" alt="${%Console output}" />`))));
p.insert(tr);
Behaviour.applySubtree(tr);
}
ts_refresh(p);
}
</script>
<j:new var="handler" className="jenkins.widgets.BuildListTable"/>
${handler.setBuilds(attrs.builds)}
<l:progressiveRendering handler="${handler}" callback="displayBuilds"/>
<table class="jenkins-table ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''} sortable" id="projectStatus" style="display: none;">
<j:set var="consoleOutputIcon" trim="true">
<l:icon src="symbol-terminal" alt="${%Console output}" />
</j:set>
<table class="jenkins-table ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''} sortable" id="projectStatus" style="display: none;" data-icon-size-class="${iconSizeClass}" data-scroll-tooltip="${%Click to center timeline on event}" data-console-output-icon="${consoleOutputIcon}">
<thead>
<tr>
<th class="jenkins-table__cell--tight">${%S}</th>
Expand Down