VSO / Nouveau portail Azure : le code

Dans mon précédent billet, je vous ai présenté la blade d’accueil d’un team project dans le nouveau portail Azure. Aujourd’hui, nous allons voir les différentes blades pour la partie code source ainsi que le mécanisme de navigation.
Tout commence par les tuiles se trouvant dans la section Code :

On y retrouve deux points d’entrée vers le code :

• Les repository pour parcourir le code,
• Les commits/changeset pour parcourir les changements.

Repository

La tuile des repositories affiche le nombre de repositories du team project et leurs noms. En cliquant sur un des noms, vous pouvez accéder au blade repository. A noter que si vous utilisez Git et avez plusieurs branches, vous aurez d’abord à choisir la branche.

Comme vous pouvez le voir sur l’image précédente la navigation dans le nouveau portail Azure est très différente des autres sites : au lieu d’afficher une nouvelle page ou une fenêtre, la blade vient s’insérer à droite des blades déjà affichées. Ce mode de navigation permet, non seulement de voir le contexte de notre “exploration” en ayant l’ensemble des blades par lesquelles nous sommes passés, mais aussi de revenir facilement en arrière vu qu’il suffit de scroller :). Par contre le scrolling peut s’avérer difficile dans certains cas, notamment avec la molette de la souris qui permet de faire un scroll horizontal pour se déplacer dans “l’historique” des blades, sauf si la blade sous le curseur a une scrollbar verticale, dans ce cas on se retrouve à se déplacer verticalement alors que l’on voulait revenir en arrière.
On notera qu’il est possible de personnaliser les blades en réarrangeant les tuiles ou même en les déplaçant d’une blade à une autre.
La blade de repository propose quelques actions basiques comme ouvrir Visual Studio, télécharger le repository ou encore, dans le cas de Git, les instructions pour cloner le repository. On y retrouve aussi 4 tuiles :

• Commits : permet de voir le nombre de commits par jour sur le repository.
• Code Favorites : il est possible de marquer les éléments du repostiroy (fichier ou répertoire) comme favoris afin de pouvoir y accéder rapidement, cette tuile renvoie vers cette liste de favoris.
• Code : renvoie vers l’explorateur du repository.
• Shelvesets : dans le cas d’un repository Tfvc, permet de voir les différents shelvesets.

On retrouve sous ces tuiles la section Read me. Dans la version actuelle, si vous placez un fichier Readme.html à la racine de votre repository, celui-ci sera affiché dans cette section. Depuis la dernière mise à jour de VSO on retrouve ce mécanisme dans le portail VSO, mais avec l’utilisation de fichier markdown (Readme.md), ne vous inquiétez pas, le portail Azure sera bientôt mis à jour pour prendre en compte les fichiers .md afin de ne pas dupliquer les infos :).
Sur la blade du team project, la tuile commits renvoie, elle aussi, vers la blade repository adéquate.

Historique des commits/checkins

La tuile Commits permet d’afficher la blade contenant l’historique des commits/checkins de votre repository avec la possibilité de filtrer les entrées (via l’affichage de la blade de filtre) :

Cette blade contient la liste des commits regroupés par date, il suffit de cliquer sur un commit pour afficher la blade du commit. Les filtres permettent de limiter l’affichage des commits en fonction de la date, de l’auteur ou d’un fichier.
A partir de cette blade on peut se rendre compte de l’intérêt de la nouvelle navigation. En effet, si l’on veut parcourir les différents commits pour voir ce qu’ils contiennent, étant donné que l’on garde toujours à l’écran la blade d’historique, il suffit de cliquer sur un commit puis sur le suivant.
On pourra continuer à tout moment notre exploration en allant plus loin pour un commit sans pour autant perdre notre blade d’historique.

Commit / Checkin

La blade de commit affiche les informations classiques : la date, l’auteur, les commentaires, les work items associés et les fichiers.

Plusieurs éléments sont actionnables sur cette blade :

• En cliquant sur un work item on affichera la blade de work item.
• En cliquant sur le nombre de fichiers on affichera une blade contenant la liste à plat de l’ensemble des fichiers.
• En cliquant sur un fichier on affichera la blade de détail d’un changement.

Change details

Lorsque l’on clique sur un fichier d’un commit, on verra une blade affichant le contenu du fichier (si celui-ci n’est pas au format binaire) ainsi que les changements effectués sur ce fichier lors du commit :

Contrairement au portail VSO il n’y a (pour l’instant ?) que le mode d’affichage des différences en ligne. Pour rappel, sur le portail VSO, il est possible d’afficher les différences soit en ligne soit cote à cote.

Nous avons fait le tour des blades accessibles depuis l’historique des commits, nous allons maintenant voir la partie Code :).

Code

La tuile Code permet d’afficher simplement le contenu du repository sous forme arborescente :

Il est possible d’afficher l’historique de commits de l’élément en cours via l’affichage de la blade “Historique de commits” filtrée pour n’afficher que les commits incluant l’élément. Il est aussi possible d’ajouter un élément aux favoris, soit via le bouton d’action, soit via le menu contextuel sur un élément.
Cliquer sur un répertoire affiche une nouvelle blade de Code dont le contexte et le répertoire. Cliquer sur un fichier non binaire affiche la blade de Fichier.

Fichier

Cette blade permet, non seulement, de voir le contenu d’un fichier texte (avec coloration syntaxique) mais aussi d’exécuter plusieurs actions :

Commençons par les actions classiques :

• History permet d’afficher l’historique des commits pour ce fichier.
• Favorites permet d’ajouter le fichier à la liste des favoris.
• Download permet de télécharger le fichier.

Mais en plus de ces actions, il est possible d’interagir sur le contenu du fichier en l’éditant en ligne ! Pour cela, il suffit de cliquer sur le bouton Edit :).
Une fois que vous avez fini vos modifications il suffira de cliquer sur “Commit” et de saisir un commentaire pour pousser vos modifications :

La blade de commit est un peu simple, mais il y a fort à parier que celle-ci se verra enrichie dans les prochaines mises à jour.
Une fois que vous aurez fait votre commit, vous pourrez voir le résultat dans les notifications du portail :

Cette possibilité d’édition en ligne est un vrai plus, en effet il arrive souvent que l’on veuille juste modifier un fichier de configuration ou simplement un fichier texte et ouvrir Visual Studio peut être contraignant.

Code Favorites

La tuile de Code Favorites affiche la blade du même nom qui n’est autre qu’une liste des éléments favoris. Le fait de cliquer sur un de ces éléments ouvrira la blade associée, “Code” pour un répertoire et “Fichier” pour un fichier :).

Shelvesets

La blade que je ne vous ai pas encore présentée concerne les shelvesets (uniquement disponible avec un repository Tfvc). La blade affiche la liste des shelveset et cliquer sur un de ceux-ci affiche la blade de commit pour le shelveset :

Et voilà nous avons fini de voir l’ensemble des tuiles et blades en rapport avec le code source :).

Dans mon prochain billet nous explorerons la partie work items.