CSS/JQuery/Javascript - Need to extract URL parameters and amend another URL with the details 1

[DPlank]

Hi,

My CI environment uses TeamCity for automatic execution of new builds. It allows for a set of radiators to be created as a display of how the built jobs are running. It's built using a standard output from its external status feed, but from what I can find it should be fairly free to modify with some JS etc. My problem is that I'm having real trouble figuring out how it needs modified - I'm no expert in j_avascript, jquery or CSS.

The standard javascript I have is as follows:

$(document).ready(function() {                 
                                $("td.buildConfigurationName IMG[src *= 'success.gif']")
                                .parents("table")
                                .addClass("buildSuccess");
 
                                $("td.buildConfigurationName IMG[src *= 'error.gif']")
                                .parents("table")
                                .addClass("buildFailure");
 
                                $("td.buildConfigurationName IMG[src *= 'buildGray.gif']")
                                .parents("table")
                                .addClass("buildUnknown");
 
                                $("DIV.teamCityDateTime").each (
                                                function(index) {
                                                                var spanStr = $(this).find("SPAN.date").attr("title");
                                                                $(this).replaceWith("<span class='buildDate'>" + spanStr + "</span>");
                                                }
                                );
                });

The CSS file reads:

body {
                background-color: #606060;
                font-family: Tahoma;
                color: #606060;
}
 
a {
                text-decoration: none;
                color: #000000;
}
 
p {
                color: #FFFFFF;
                font-weight: bold;
}
 
table.tcTable {
                -moz-border-radius: 20px;
                -webkit-border-radius: 20px;
                -khtml-border-radius: 20px;
                border-radius: 20px;
                border: 4px solid #FFFFFF;
                padding: 8px;
                margin: 15px;
                float: left;
                width: 31%;
}
 
div.projectName {
                text-shadow: 1px 1px 1px #AAAAAA;
                font-weight: bold;
                font-size: .9em;
                text-transform: uppercase;
                display: none
}
 
td.buildConfigurationName a.buildTypeName, .buildDate {
                text-shadow: 1px 1px 1px #AAAAAA;
                font-weight: bold;
                font-size: 1.5em;
                text-transform: uppercase;
}
 
td.buildConfigurationName {
                font-weight: bold;
                font-size: .9em;
                color: #000000;
}
 
.buildDate {
                font-weight: bold;
                font-size: .7em;
                color: #000000;
}
 
td.buildConfigurationName img,
td.buildResults,
div.teamCityBuildNumber {
                display:none;
}
 
.buildSuccess {background: #00FF00;}
.buildFailure {background: #FF0000;}
.buildUnknown {background: #747474;}

This is the output of the External Status (it's an example of the document being read to provide each of the radiators)

document.write(' <table class="tcTable"> <tr> <td colspan="3" class="tcTD_projectName"> <div class="projectName">
<a class="buildTypeName" style="" href="[URL unfurl="true"]http://pebuildmbc:80/project.html?projectId=project430&tab=projectOverview"[/URL]
title="Click to open &quot;TestBox - SL&quot; project home page" >TestBox - SL</a> </div> </td> </tr> <tr> <td class="buildConfigurationName">
 <img class="buildTypeIcon" src="[URL unfurl="true"]http://pebuildmbc:80/img/buildStates/error.gif"[/URL] style="" title=\'Build configuration is failing\' alt=\'Build configuration is failing\' />
<a class="buildTypeName" style="" href="[URL unfurl="true"]http://pebuildmbc:80/viewType.html?buildTypeId=bt4092"[/URL] title="Click to open &quot;AE1_0_Env&quot; build configuration home page">AE1_0_Env</a>
</td> <td class="buildNumberDate"> <div class="teamCityBuildNumber">build <a class="resultsLink" href="[URL unfurl="true"]http://pebuildmbc:80/viewLog.html?buildId=510124&tab=buildResultsDiv&buildTypeId=bt4092"[/URL]
title="View build results" >#71</a></div> <div class="teamCityDateTime"><span class="date" title="13 minutes ago">21&nbsp;Dec&nbsp;12&nbsp;11:15</span></div> </td> <td class="buildResults">
<div class="teamCityBuildResults"> <span class="teamCityIcon"> <img src="[URL unfurl="true"]http://pebuildmbc:80/img/artifacts.gif"[/URL] width="16" height="16" class="icon" alt="View build artifacts"/>
<a class="resultsLink" href="[URL unfurl="true"]http://pebuildmbc:80/viewLog.html?buildId=510124&tab=artifacts&buildTypeId=bt4092"[/URL] title="View build artifacts" >artifacts</a> </span> </div> </td> </tr> </table> ');

What I need to do is extract the buildTypeId and the buildId from the resultsLink shown in the teamCityBuildResults div, build a new url with those values and replace the link in the buildTypeName class with the new url.

I've tried to build something similar to the existing setup but rather oddly all it does is strip the colour out of the radiators - it doesn't update the link with the new URL. Here's what I came up with (not working, obviously):

$("DIV.teamCityBuildResults").each{
                                                function(index){
                                                                var linkStr = $(this).find("a.teamCityBuildResults").attr("href");
                                                                var buildId = linkStr.slice(43, 6);
                                                                var buildTypeId = linkStr.slice(75);
                                                                $("a.buildTypeName").replaceWith("<a class=\"buildTypeName\" style="" href=\"[URL unfurl="true"]http://pebuildmbc/repository/download/"[/URL] + buildTypeId + "/" + buildId + ":id/TestLog.htm\" title=\"Click to open results file\">");
                                                }
                                };

Is anyone able to explain a) why adding this code to the script file is stripping out the CSS defined colours? and b) how I can achieve the goal of changing the link successfully?

Thanks in advance!

Cheers,
Dave

"Yes, I'll stop finding bugs in the software - as soon as you stop writing bugs into the software." <-- Me

For all your testing needs: Forum1393

 

[jpadie]

the first code snip adds classes to the img's holding table dependent on the error status. however the html is being generated after the main page is rendered. so the first code snip does not run on the newly generated html in the document.write block. that is why there are no colours.

on the second question, I cannot see any <a> tag with a class of teamCityBuildResults, so linkStr et al will be undefined. I think you mean to select the <a> tag within the div having that class name.

this code works as I think you'd expect

<!DOCTYPE HTML>
<html>
	<head>
		<script  type="text/javascript" src="[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>[/URL]
		<script type="text/javascript">
	$(document).ready(function(){
	var t = $('div.teamCityBuildResults a');
	var linkStr = t.attr('href');
	var buildID = linkStr.match( /buildId=(.*?)&/i );
	buildID = buildID[1];
	var buildTypeID = linkStr.match( /buildTypeId=(.*?)(&|$)/i );
	buildTypeID = buildTypeID[1];
	
	var a = $('<a class="buildTypeName" title="Click to open results file" >');
	var url = "[URL unfurl="true"]http://pebuildmbc/repository/download/"[/URL] + buildTypeID + "/" + buildID + ":id/TestLog.htm";
	a.attr('href', url);
	$( "a.buildTypeName" ).replaceWith(a);
	
	//colourise
	var td = $( "td.buildConfigurationName img" );
	var typeBits = td.attr('src').split('/');
	var type = typeBits[typeBits.length - 1];
	var c ='';
	switch (type){
		case 'success.gif': c = 'buildSuccess';
		break;
		
		case 'error.gif': c='buildFailure';
		break;
		
		case 'buildGray.gif': c='buildUnknown';
		break;
	}
	td.closest('table').addClass(c);
});
		</script>
	</head>
	<body>
<table class="tcTable">
    <tr>
        <td colspan="3" class="tcTD_projectName">
            <div class="projectName">
                <a class="buildTypeName" style="" href="[URL unfurl="true"]http://pebuildmbc:80/project.html?projectId=project430&tab=projectOverview"[/URL] title="Click to open "TestBox -  SL" project home page">TestBox -   SL</a>
            </div>
        </td>
    </tr>
    <tr>
        <td class="buildConfigurationName">
            <img class="buildTypeIcon" src="[URL unfurl="true"]http://pebuildmbc:80/img/buildStates/error.gif"[/URL] style="" title="Build configuration is failing" alt="Build configuration is failing" />
            <a class="buildTypeName" style="" href="[URL unfurl="true"]http://pebuildmbc:80/viewType.html?buildTypeId=bt4092"[/URL] title="Click to open 'AE1_0_Env' build configuration home page">AE1_0_Env</a>
        </td>
        <td class="buildNumberDate">
            <div class="teamCityBuildNumber">
                build <a class="resultsLink" href="[URL unfurl="true"]http://pebuildmbc:80/viewLog.html?buildId=510124&tab=buildResultsDiv&buildTypeId=bt4092"[/URL] title="View build results">#71</a>
            </div>
            <div class="teamCityDateTime">
                <span class="date" title="13 minutes ago">21 Dec 12 11:15</span>
            </div>
        </td>
        <td class="buildResults">
            <div class="teamCityBuildResults">
                <span class="teamCityIcon"><img src="[URL unfurl="true"]http://pebuildmbc:80/img/artifacts.gif"[/URL] width="16" height="16" class="icon" alt="View build artifacts"/>
				<a class="resultsLink" href="[URL unfurl="true"]http://pebuildmbc:80/viewLog.html?buildId=510124&tab=artifacts&buildTypeId=bt4092"[/URL] title="View build artifacts">artifacts</a></span>
            </div>
        </td>
    </tr>
</table>
	</body>
</html>

document.write overwrites the whole page structure (I think). so you may have either to include the javascript with the document.write or run the js on the node before writing it out. You will also have to reinclude the css. Or in the alternative, instead of writing the whole document, just replace the body innerHTML with the new node.