Le widget horloge permet d'afficher l'heure actuelle. Un fuseau horaire peut être configuré séparément sur chaque widget. S'il est utilisé avec un widget historique des pannes, l'heure de l'horloge suit l'heure de la panne.

Modification du widget horloge

Chaque widget horloge peut être configuré avec un fuseau horaire distinct.

Les fuseaux horaires valides sont au format défini dans la base de données tz ou correspondent aux abréviations courantes telles que CET ou GMT.

Couleur des chiffres de l'horloge

Couleur des segments inactifs

Pour ce faire, ajoutez le style suivant au tableau de bord cible (pour plus de détails, consultez : https://skoorag.atlassian.net/wiki/spaces/DOC/pages/494196/Dashboards+Guide#Edit-dashboard )

.widget.clock svg path {
  fill: #979ca1;
}

Couleur du segment actif

Pour ce faire, ajoutez le style suivant au tableau de bord cible (pour plus de détails, consultez : Modifier le tableau de bord )

.widget.clock svg path[class*="active"] {
  fill: #ff0000;
}

En fonction du fuseau horaire actuellement utilisé

La solution compare le décalage UTC actuel avec le décalage UTC défini sur le widget horloge. S'ils sont identiques, elle définit la classe CSS sur local. Une règle CSS dans le style du tableau de bord colore les chemins actifs locaux en conséquence.

1. Le paramètre ci-dessous attribue la classe CSS local à l'horloge si son fuseau horaire correspond à « europe/zurich ».

 ${moment().utcOffset() == moment().tz("europe/zurich").utcOffset() ? "local" : ""}

2. L'utilisation du style ci-dessous dans le paramètre du tableau de bord permettrait uniquement d'ajuster le widget horloge avec la classe CSS locale.

.widget.clock.local svg path[class*="active"] {
  fill: #0a87f0;
}