Jenkins UI customization - user-interface

I want to change the look and feel(ui customization) of Jenkins. Also I would like to add new views(say like new html pages or web pages) with navigation to the required jenkins pages etc.
Please let me know if any single plugins will help me to do so.Any relevant information(how ever generic) will be very helpful.
Any suggestions or links or tutorials is also appreciated.
PS:- Pretty new to jenkins.The inputs from here will help me to add more details to the questions.
I am looking for documents or tutorials that specify Skinning Jenkins using plugins like :-
https://wiki.jenkins-ci.org/display/JENKINS/Simple+Theme+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+UI+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/JSWidgets+Plugin
The plugin page is providing very little information on how to use these and the benefits and the extend to which the UI can be changed.
Any doc or link is appreciated.

Assuming you don't want to write a Jenkins plugin, for adding pages, the best suggestion I can make is to use an HTTP proxy such as NginX, and configure it so that the pages you want to add are plain html files, and Jenkins is proxied for the rest of them. To a visitor, they will look like they are all part of the same site; you could copy code from the head and body sections of Jenkins-served pages to include some of the navigation.
The Simple Theme Plugin, which you found, will let you do basic customization of the look and feel of Jenkins. I do that for my build server and proxy it using this configuration fragment for NginX. The relevant CSS is in this CSS file - toward the end, look for the // JENKINS CUSTOMIZATION comment.

We use the Simple theme plugin - pointed at a css file for the simple styling, and a JS file to fix a couple of DOM oddities (some of the tables in the new look and feel have mismatching column counts).
Those two files need only be hosted either a handy http server, or you can place them in usercontent.
You need only refresh the page in the browser to see the changes. Both files can then happily reference other files served up too.
Handy things to note:
Jenkins has jquery, parts of YUI loaded and prototype loaded - so you can use them in your scripts.
If while debugging, the refresh gets in the way then use the console to enter the following to temporarily stop it without pausing JS: refreshPart = function() {}
When making DOM tree changes to content that is refreshed - attach it to the layout updates with:
layoutUpdatecallback.add(my_function) - that way your changes are applied to new incoming content.

Related

generate html template engine i18n

I am searching for a solution to modularize static html files and to add multilanguage support. I want to generate static html files with gulp which are then served through an apache server.
I am now thinking about using the template engine marko to modularize html files and to prerender html files (handlebars would also be an option; jade is no option cause i don't like the syntax).
For multilanguage support i am thinking about to add an i18n plugin (for example https://www.npmjs.com/package/i18n). But this plugin needs an express server; also for multilanguage i want to prerender the files. Has anybody a hint for me which i18n plugin would best fit for me? Maybe also which one would best work together with marko and gulp?
The result should be html files generated inside /de and /en.
The following sample app might help: https://github.com/marko-js-samples/marko-koa-i18n
It is a server-based app that uses Koa and koa-i18n, but you can directly use i18n-2 to accomplish the same thing.
Disclaimer: I have not used i18n-2 or koa-i18n
A few things to note:
A custom tag is used to introduce a local variable that can be used to access the i18n bundle: (see: src/components/app-hello/template.marko and src/taglib/i18n-var-tag.js)
The i18n bundle is pulled out of out.global.i18n. See: Marko > Global Properties
The following Gulp plugin is currently out-of-date, but it might serve as a good starting point or you can submit a PR to improve it: https://github.com/viviangledhill/gulp-marko
In your case, you will want to prerender each template multiple times, each time with a different i18n bundle instance passed in as a global property.
If you would like more details please ask here or in the Gitter chat room: https://gitter.im/marko-js/marko
Hope that helps.

Static vs. dynamic content in docpad system - how to create dynamic content?

DocPad is described as being comparable to other static site generators, but it is also described as being "not limited to static site generation".
I've been browsing the DocPad website and other documentation and haven't yet been able to find anything that seems to explain how to incorporate dynamic content, and what types of limitations may be involved?
As a relative beginner, I am wondering if anyone can help me better understand the methodology whereby dynamic content would be incorporated into DocPad...? e.g. AJAX, and dynamic server-side scripts for doing things like dynamically loading pictures from Flickr into a webpage when a certain tag is clicked...
Thanks.
So there's a few ways DocPad facilitates dynamic content:
Via the regenerateEvery configuration option. This will regenerate your website every so often you specify. This great when combined with plugins like feedr for pulling in data from remote feed sources (like your latest social activity), as well as repocloner which clones out and keeps a git repository up to date inside your project. The benefit of this option is it's really easy to do and provides the illusion of a dynamic website. For instance the Benjamin Lupton Website applies this method to keep it's statistics on the home page, as well as the social data in the sidebar up to date. Every hour it regenerates with the latest information. Making it fast, and also illusively dynamic.
Via the dynamic meta-data property. When set to to true this tells the DocPad server we should re-render that document on each request, rather than just once. This works great inside the Kitchensink Skeleton for search pages and misc forms. This way is most similar to PHP development.
Via the serverExtend event. This event allows you to hook into and extend the DocPad server, allowing you to add extra server-side logic, handling, etc. Common use cases is to add extra routing to your server to handle route aliases, adding form processing such as a contact form, or to add a RESTULful interface for a Backbone.js application. The DocPad Website uses this to add extra routing and a regenerate post-receive hook for the documentation. The NodeChat Skeleton uses this to add the Socket.io server-side logic.
Via the API. This way is the most involved but can be quite rewarding if you just wish for DocPad to be a small part of an existing node.js application. With this, you can create a DocPad instance in your code and interact with it. The grunt-docs grunt task utilises this :)

Selectively disabling plugins from loading in Wordpress admin area

Does anybody know how to disable certain plugins from loading in the back-end/admin area of Wordpress?
Currently I'm running a site that has many plugins mainly geared towards front-end manipulation yet when I access pages in the backend (ie. /wp-admin/edit.php) all CSS, JS and plugin files are being loaded for plugins that are not required there, thus increasing the load-time and responsiveness of the admin area.
I'm looking for a solution, either plugin based for code that can selectively load admin only plugins, ideally without having to hack the core files.
I'm using wordpress 3.5.1.
Checkout Plugin Organizer. I haven't used it but according to it's description, you can "Selectively disable plugins by any post type or wordpress managed URL". I would guess that you could disable certain plugins from running on urls that contain /wp-admin/.
You can also modify the plugins themselves. It depends how they are written, but you can find where they are enqueuing the css and js files and wrap those in an is_admin() statement like this:
// Make sure we aren't in the admin area
if ( !is_admin() ) {
wp_enqueue_script('plugin-script');
wp_enqueue_style('plugin-style');
}
That will ensure that the scripts/styles are only loaded on the front end.
Another possibility is to find all of the css and script files that are being loaded via plugins and deregister them in your functions.php file. This will require you to poke around the plugins a bit to find the handles of all the files, but it should work well. This would deregister some of the default stuff enqueued in the admin area, so you can see what I mean.
add_action( 'admin_init', 'remove_admin_styles' );
function remove_admin_styles() {
wp_deregister_style(
'wp-admin',
'ie',
'colors',
'colors-fresh',
'colors-classic',
'media',
'install',
'thickbox'
);
}
As you said, you don't want to mess with core files, but if you absolutely need to you can implement the solution described in this article. As I'm sure you know, it's not a good idea to alter WordPress core files unless you absolutely have to. Just keep in mind that the changes will be wiped out if you upgrade WordPress in the future.

TeamCity to serve static HTML page

I am looking for a way to serve a few static HTML pages with TeamCity.
I dont want to set up an apache for that, if not absolutely neccessary.
Does anybody know a simple way (or URL scheme) to access static HTML content. I found the following plugin, but that only inserts snippets of HTML in certain positions on existing pages. No way to include a full page. PluginLink for others as help.
Thanks for ideas,
Chris
Solution:
Go to e.g. C:\TeamCity\webapps\ROOT
Create folder e.g. static
Place file in it (but extension .jsp even if html)
Will be served without any problems (on URL/static/test.jsp)
It's a Tomcat server, just go on your file system where you installed Teamcity and you should be able to find out where you can park some html that will then be available on the Teamcity urls.

GWT like perfect caching for non-GWT resources

Perfect Caching
Perfect Caching allows the browser to cache resources forever and guarantees that changed resources are propagated immediately to the browser. In GWT this is accomplished by naming a file like the hash code of its content. As this leads to a new file name each time the content of a file changes, the browser can cache these files forever without having to ask the server whether or not there is a new version available. More about perfect caching can be found here.
As this concept works very well I would like to apply it to all of my non-GWT resources (some JS, CSS and image files).
As my build process is Maven based it would be great if there was a plugin which could automatically rename the files according to their hash code and which could adjust all of the references to this file.
Here's an example
Renaming
foo.css -> foo_39757cec04498955db62043f7ecfefc2.cache.css
logo.png -> logo_35bcdbbabe1944afc75eeeb16f06d1ad.cache.png
Update references in files
Replace all occurances of "foo.css" by "foo_39757cec04498955db62043f7ecfefc2.cache.css"
Replace all occurances of "logo.png" by "logo_35bcdbbabe1944afc75eeeb16f06d1ad.cache.png"
Does anybody know whether something like that already exists?
Many thanks in advance,
Michael
If you're using Apache (httpd) you can setup mod_pagespeed to do that. Since GWT does some of that stuff already, be careful to properly configure mod_pagespeed so that performance doesn't degrade.
mod_pagespeed indeed disables HTML caching by default, as typically HTML is dynamic. However, you can override that behavior.
There is a new option in the most recent binary release (0.10.21.*) that provides the behavior you want: explicitly control of your HTML caching headers:
ModPagespeedModifyCachingHeaders off
http://code.google.com/speed/page-speed/docs/install.html#ModifyCachingHeaders

Resources