Plugin Simple Theme Jenkins

De EjnTricks

Hand-icon.png Votre avis

Current user rating: 98/100 (4 votes)

 You need to enable JavaScript to vote


System-Install-icon.png Installation

Ce plug va donner la possibilité de rajouter un fichier CSS et un fichier JS afin de personnaliser l'interface. Le principale objectif de l'utilisation de ce plugin était de pouvoir spécifier une image de fond différent que le traditionnel portrait de Jenkins.

Deux paramètres sont disponibles à partir de la console de configuration du système, afin de spécifier:

  • Une URL pour une CSS additionnelle
  • Une URL pour un script Javascript additionnel.


Dans le cadre de cet article, seule l'URL de la CSS est spécifiée avec la valeur /jenkinsExtensions/site/css/theme.css.

Icon-Configuration-Settings.png Configuration

Afin de modifier l'image de fond, ce qui est réalisable en ajoutant une CSS. Afin d'éviter tout problème lors des mises à jour, et comme le serveur Jenkins est exposé à travers un serveur Apache, celle ci va être déposée sur une nouvelle URL pointant sur des fichiers non impactés lors de la mise à jour du war.


Style-sheet-icon.png Ajout CSS et image

La première étape consiste à créer une nouvelle arborescence sur le serveur, qui va contenir la nouvelle CSS, et les ressources associées. Tous ces fichiers vont être déposés dans la nouvelle arborescence /usr/share/sitesExtensions/site.

#sudo mkdir /usr/share/sitesExtensions
#sudo mkdir /usr/share/sitesExtensions/site
#sudo mkdir /usr/share/sitesExtensions/site/images
#sudo mkdir /usr/share/sitesExtensions/site/css
#sudo touch /usr/share/sitesExtensions/site/css/theme.css
#sudo chown -R www-data:www-data /usr/share/sitesExtensions

Comme souvent, le propriétaire de l'arborescence est modifié pour éviter que cela soit le compte root. A noter, l'emplacement relatif du fichier theme.css par rapport au répertoire /usr/share/sitesExtensions, qui se retrouve dans la configuration mise en place.


Le contenu de la CSS a été établi en suivant l'exemple de la page officielle du plugin, et contient:

#main-table {
  background-image: url('/sitesExtensions/images/amexioMan.png') !important;
}


L'image de fond pointe donc sur l'URL /sitesExtensions/images/amexioMan.png, au préalable l'image amexioMan.png avait été déposée dans le répertoire /usr/share/sitesExtensions/site/images

Configuration App Web-Icon.png Configuration Apache

Comme indiqué, la CSS et l'image sont accessible sur un nouveau site, exposé depuis Apache. Il est donc nécessaire de modifier la configuration du server Apache pour exposer une nouvelle "application" avec l'URL /jenkinsExtensions. Pour minimiser les intrusions dans les fichiers de configuration, un fichier apache.conf est créé dans le répertoire /usr/share/jenkinsExtensions. Le contenu de ce fichier, inspiré de celui créé pour mediawiki par exemple, permet de référencer une nouvelle URL:

# Uncomment this to add an alias.
# This does not work properly with virtual hosts..
Alias /jenkinsExtensions /usr/share/jenkinsExtensions/site

<Directory /usr/share/jenkinsExtensions/site/>
        Options +FollowSymLinks
        AllowOverride All
        order allow,deny
        allow from all
</Directory>

Enfin, pour que celui soit pris en compte, un lien est créé au niveau du serveur Apache vers le fichier, suivi d'un redémarrage "silencieux" du serveur.

#sudo ln -s /usr/share/jenkinsExtensions/apache.conf /etc/apache2/conf.d/jenkinsExtensions.conf
#sudo apachectl graceful


Viewer icon.png Résultat

Le résultat produit est conforme au attente, à savoir l'affichage d'une nouvelle image en fond.

Sur la page de jenkins, le code suivant est trouvé:

<table width="100%" height="70%" border="0" style="background-image: url('/jenkins/static/1d591ad4/images/jenkins.png'); 
background-repeat: no-repeat; background-position: left bottom;" id="main-table">
.
.
.
</table>

L'URL /jenkins/static/1d591ad4/images/jenkins.png pointe sur l'image de Jenkins. Mais cette définition est surchargée par la définition apportée par le fichier accédé via l'URL /jenkinsExtensions/site/css/theme.css, dans lequel l'URL de l'image des fond est configurée. C'est ainsi que le résultat présenté ci dessous est obtenu.


Update icon.png Mise à jour version 1.572

Suite à la mise en version 1.572, la structure de la page a été modifiée. L'élément avec l'identifiant main-table ne semble plus présent.

L'analyse du code source, avec un outil comme Firebug, va permettre d'identifier la balise à laquelle il faut appliquer la CSS.


Cependant, il y a quelques modifications dans la définition de la CSS, il faut spécifier l'emplacement et la non répétition de l'image. Cela n'était pas nécessaire dans les précédentes versions, car il existait déjà une définition de l'image et il suffisait de surcharger l'URL de celle-ci. A présent, il faut tout spécifier. La CSS devient donc la suivante.

#page-body {
  background-image: url('/sitesExtensions/images/amexioMan.png') !important;
  background-repeat: no-repeat;
  background-position: left bottom;
}


Update icon.png Mise à jour version 1.576

Il a été constaté, depuis la version 1.576, une modification au niveau des CSS appliquées sur la table d'exécution des builds pour un projet. Cette configuration permet d'alterner le fond des lignes en fonction de leur numéro paire ou impaire. Cependant, cela présente un effet de rayure avec une image de fond.


La configuration standard est la suivante.

table.stripped tr:nth-child(even) {
  background: #fbfbfb;
}

Le rendu visuel de cette modification n'est pas des plus heureux. Grâce à ce plugin, il est possible de surcharger la définition après avoir identifié le chemin CSS de ces lignes.

Le tableau est positionné dans un élément div avec l'identifiant buildHistory. Ceci va permettre de spécialiser la définition standard sans impactée sa potentielle utilisation sur d'autres éléments de la page. Le code suivant est rajouté au fichier /usr/share/sitesExtensions/css/theme.css.

#buildHistory table.stripped tr:nth-child(even) {
  background: none;
}

Ainsi les lignes paires redeviennent transparente.


Viewer icon.png Voir aussi

Documentation officielle: https://plugins.jenkins.io/simple-theme-plugin