Skip to Content
DocsDans vos pipelinesRendus

Rendus

Une coche verte en dit peu sur ce qu’un run a trouvé. Un rendu le montre : un badge de couverture, un tableau de benchmarks, un rapport de tests, une application web entière construite par le pipeline, directement dans la page du run.

Un rendu est un artefact de run qui a un point d’entrée, le fichier qu’il ouvre, comme index.html : le programme qui envoie l’artefact le lui donne. La page d’un run affiche ses rendus sous Rendus, un onglet par rendu, au-dessus de ses artefacts ; les pages publiques des runs affichent les rendus publics.

Affichages intégrés

La page du run affiche elle-même la plupart des fichiers, selon le type de média du point d’entrée, qui vient de son extension :

Point d’entréeAffiché comme
Image : PNG, JPEG, GIF, WebP, AVIF, SVGL’image. Les fichiers SVG sont affichés comme des images, où leurs scripts ne s’exécutent jamais.
MarkdownDu texte mis en forme, avec ses tableaux. Le HTML brut est laissé de côté ; les images et les liens du même artefact fonctionnent, et les images venues d’ailleurs restent des liens, pour que leur hébergeur n’apprenne jamais qui consulte le run.
JSONUn tableau pour une liste d’objets, un tableau de clés et de valeurs pour un objet, du JSON indenté sinon.
CSV, TSVUn tableau des 1 000 premières lignes.
Autre texteLe texte tel quel.
HTMLLa page elle-même, sur un domaine à part.

La page du run lit le fichier par son adresse stable, jusqu’à 5 Mo de texte ou 50 Mo d’image ; les fichiers plus gros sont proposés au téléchargement.

Rendus HTML

Un point d’entrée HTML tourne dans un cadre, servi depuis un domaine à part, avec un sous-domaine par autorisation d’affichage : pour le navigateur, chaque rendu est un autre site. Il n’atteint ni le stockage du tableau de bord, ni celui d’un autre rendu, et les frameworks qui s’appuient sur localStorage fonctionnent. Une autorisation dure une heure, et la page du run la renouvelle peu avant la fin. Ouvrir dans un nouvel onglet ouvre le rendu seul.

  • Les chemins relatifs atteignent les fichiers de l’artefact, et les autres artefacts du run : ../metrics/data.json depuis /report/index.html lit l’artefact metrics.
  • Les chargements viennent de l’adresse du rendu lui-même et du stockage qui contient les artefacts du run. Toute autre origine, CDN et polices web compris, est bloquée : intégrez au rendu tout ce dont la page a besoin. Les scripts et styles en ligne fonctionnent.
  • La taille d’un artefact qui a un point d’entrée est de 50 Mo au plus.
  • Les rendus publics des runs publics sont ouverts à tout le monde, par des autorisations publiques qui n’atteignent que les artefacts publics.

Échanger avec la page du run

Un rendu et la page du run échangent des messages avec postMessage. La page accepte ceux qui viennent de l’origine du rendu lui-même, et ignore tous les autres.

MessageDeEffet
{ "type": "cadence.ci/height", "height": 640 }RenduFixe la hauteur du cadre, en pixels, entre 160 et 6000.
{ "type": "cadence.ci/open", "url": "https://example.com" }RenduOuvre un lien http ou https dans un nouvel onglet.
{ "type": "cadence.ci/ready" }RenduDemande le thème.
{ "type": "cadence.ci/theme", "theme": "dark" }Page du runDonne le thème, light ou dark, une fois le cadre chargé, sur demande, et à chaque changement.

Un rendu qui suit le thème et sa propre hauteur :

const post = (message) => window.parent.postMessage(message, "*")
 
addEventListener("message", (event) => {
  if (event.source === window.parent && event.data?.type === "cadence.ci/theme") {
    document.documentElement.dataset.theme = event.data.theme
  }
})
 
new ResizeObserver(() => {
  post({ type: "cadence.ci/height", height: document.documentElement.scrollHeight })
}).observe(document.body)
 
post({ type: "cadence.ci/ready" })

Pour aller plus loin

Artefacts de runIdentité des runs