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-66718] Un-inlining script in BuildTimelineWidget/control.jelly #5852

Merged
merged 1 commit into from Nov 4, 2021
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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
@@ -0,0 +1,125 @@
var targetDiv = document.querySelector('#build-timeline-div');
Copy link
Contributor

Choose a reason for hiding this comment

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

Tips: document.getElementById('build-timeline-div') is an alternative (not necessarily faster, but perhaps more readable).
(No change required)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks. I'll remember it for the next time.

var tz = targetDiv.getAttribute('data-hour-local-timezone');
var tl = null;
var interval = 24 * 60 * 60 * 1000;

function getData(eventSource1, current, min, max) {
if (current < min) {
return;
}
if (!eventSource1.loaded[current]) {
eventSource1.loaded[current] = true;
new Ajax.Request("timeline/data/", {
method: "POST",
parameters: { min: current * interval, max: (current + 1) * interval },
onSuccess: function (t) {
if (t.status != 0) {
try {
eventSource1.loadJSON(JSON.parse(t.responseText), '.');
getData(eventSource1, current - 1, min, max);
} catch (e) {
alert(e);
}
}
}
});
}
}

function doLoad() {
var tl_el = document.getElementById("tl");
var eventSource1 = new Timeline.DefaultEventSource();
eventSource1.loaded = {};
eventSource1.ensureVisible = function (band) {
// make sure all data are loaded for the portion visible in the band
// $('status').innerHTML = "min="+band.getMinDate()+" max="+band.getMaxDate();
var min = Math.floor(band.getMinVisibleDate().getTime() / interval);
var max = Math.ceil(band.getMaxVisibleDate().getTime() / interval);
getData(eventSource1, max, min, max);
};


var theme1 = Timeline.ClassicTheme.create();
//theme1.autoWidth = true; // Set the Timeline's "width" automatically.
// Set autoWidth on the Timeline's first band's theme,
// will affect all bands.

var bandInfos = [
// the bar that shows outline
Timeline.createBandInfo({
width: "20%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 200,
eventSource: eventSource1,
timeZone: tz,
theme: theme1,
layout: 'overview' // original, overview, detailed
}),
// the main area
Timeline.createBandInfo({
width: "80%",
eventSource: eventSource1,
timeZone: tz,
theme: theme1,
intervalUnit: Timeline.DateTime.HOUR,
intervalPixels: 200
})
];
bandInfos[0].highlight = true;
bandInfos[0].syncWith = 1;

// create the Timeline
tl = Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL);

tl.getBand(0).addOnScrollListener(function (band) {
eventSource1.ensureVisible(band);
});

tl.layout(); // display the Timeline

// if resized, redo layout
var resizeTimerID = null;
function doResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function () {
resizeTimerID = null;
tl.layout();
}, 500);
}
}

if (window.addEventListener) {
window.addEventListener("resize", doResize, false);
} else if (window.attachEvent) {
window.attachEvent("onresize", doResize);
} else if (window.onResize) {
window.onresize = doResize;
}

};

if (window.addEventListener) {
window.addEventListener("load", doLoad, false);
} else if (window.attachEvent) {
window.attachEvent("onload", doLoad);
} else if (window.onLoad) {
window.onload = doLoad;
}

//add resize handle
(function () {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;

var resize = new YAHOO.util.Resize('resizeContainer', {
handles: 'b',
minHeight: 300 // this should be the same as the height of the container div,
// to fix a issue when it's resized to be smaller than the original height
});

//update timeline after resizing
resize.on('endResize', function () {
tl.layout();
}, null, true);

})();
137 changes: 6 additions & 131 deletions core/src/main/resources/hudson/model/BuildTimelineWidget/control.jelly
Expand Up @@ -26,143 +26,18 @@ THE SOFTWARE.
<st:documentation>
Show timeline trend image. It takes two builds
</st:documentation>

<st:adjunct includes="org.kohsuke.stapler.simile.timeline" />

<div id="resizeContainer" style="height: 300px; border:1px solid black; padding-bottom: 5px;">
<div id="tl" style="height:100%;"/>
</div>
<div id="status" />

<link rel="stylesheet" type="text/css" href="${resURL}/scripts/yui/assets/skins/sam/resize.css"/>
<script type="text/javascript" src="${resURL}/scripts/yui/resize/resize-min.js"></script>

<script>
<j:invokeStatic var="tz" className="java.util.TimeZone" method="getDefault"/>
var tz = ${(tz.rawOffset + tz.DSTSavings) / 3600000};
var tl = null;
var interval = 24*60*60*1000;
<![CDATA[
function getData(eventSource1, current, min, max) {
if (current < min) {
return;
}

if (!eventSource1.loaded[current]) {
eventSource1.loaded[current] = true;
new Ajax.Request("timeline/data/",{
method:"POST",
parameters: {min: current*interval, max:(current+1)*interval},
onSuccess: function(t) {
if (t.status != 0) {
try {
eventSource1.loadJSON(JSON.parse(t.responseText),'.');
getData(eventSource1, current-1, min, max);
} catch (e) {
alert(e);
}
}
}
});
}
}

function doLoad() {
var tl_el = document.getElementById("tl");
var eventSource1 = new Timeline.DefaultEventSource();
eventSource1.loaded = {};
eventSource1.ensureVisible = function(band) {
// make sure all data are loaded for the portion visible in the band
// $('status').innerHTML = "min="+band.getMinDate()+" max="+band.getMaxDate();
var min = Math.floor(band.getMinVisibleDate().getTime()/interval);
var max = Math.ceil(band.getMaxVisibleDate().getTime()/interval);
getData(eventSource1, max, min, max);
};


var theme1 = Timeline.ClassicTheme.create();
// theme1.autoWidth = true; // Set the Timeline's "width" automatically.
// Set autoWidth on the Timeline's first band's theme,
// will affect all bands.

var bandInfos = [
// the bar that shows outline
Timeline.createBandInfo({
width: "20%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 200,
eventSource: eventSource1,
timeZone: tz,
theme: theme1,
layout: 'overview' // original, overview, detailed
}),
// the main area
Timeline.createBandInfo({
width: "80%",
eventSource: eventSource1,
timeZone: tz,
theme: theme1,
intervalUnit: Timeline.DateTime.HOUR,
intervalPixels: 200
})
];
bandInfos[0].highlight = true;
bandInfos[0].syncWith = 1;

// create the Timeline
tl = Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL);

tl.getBand(0).addOnScrollListener(function(band) {
eventSource1.ensureVisible(band);
});

tl.layout(); // display the Timeline

// if resized, redo layout
var resizeTimerID = null;
function doResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}

if (window.addEventListener) {
window.addEventListener( "resize", doResize, false );
}else if (window.attachEvent) {
window.attachEvent( "onresize", doResize);
}else if (window.onResize) {
window.onresize = doResize;
}

};

if (window.addEventListener) {
window.addEventListener( "load", doLoad, false );
}else if (window.attachEvent) {
window.attachEvent( "onload", doLoad );
}else if (window.onLoad) {
window.onload = doLoad;
}

//add resize handle
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;

var resize = new YAHOO.util.Resize('resizeContainer', {
handles: 'b',
minHeight: 300 // this should be the same as the height of the container div,
// to fix a issue when it's resized to be smaller than the original height
});

//update timeline after resizing
resize.on('endResize', function() {
tl.layout();
}, null, true);

})();
]]></script>
</j:jelly>
<j:invokeStatic var="tz" className="java.util.TimeZone" method="getDefault"/>
<div id="build-timeline-div" data-hour-local-timezone="${(tz.rawOffset + tz.DSTSavings) / 3600000}"></div>
<st:adjunct includes="hudson.model.BuildTimelineWidget.build-timeline-widget" />
</j:jelly>