Vitam - Contributions [fr]

Dette Design

2024-11-18T09:51:00Z

Mrobert :

Suivi d'avancement des composants à faire évoluer : https://culturegouv.sharepoint.com/:x:/s/ProgrammeVITAM/EViLBIZsfnJCuxgGUnOSS4EBDK8GvIneoahcChVuv0qeGQ?e=jWuBHd

== Couleurs ==
Le material design en général, et Angular material en particulier, définit 10 déclinaisons de couleurs : 50, 100, 200, 300, 400, 500, 600, 700, 800 et 900 avec 500 correspondant à la couleur de base. Dans Vitam, nous n'utilisons pas toutes les déclinaisons de couleur. À voir si on doit tout de même toutes les définir/garder dans Figma et le code.

Lien Figma : https://www.figma.com/design/YHKmbbnI25ttjMLBUhXu3u/Vitam-UI-%F0%9F%A7%A9-Design-System?node-id=2110-478&m=dev

Lien Design Système code : https://int-ui.env.programmevitam.fr/design-system/colors

=== État des lieux Figma ===

* La couleur "Primary" ne correspond(ait) pas à "Primary — 500" alors que la règle est que la déclinaison "500" doit correspondre à la couleur de base
* Les déclinaisons 50, 100, 200, ..., 900 ne suivent (a priori) pas de règle déterministe : on ne peut pas déduire la couleur "Primary — 400" à partir de "Primary — 500" et d'une règle de calcul. Or, pour personnaliser le thème Vitam, on ne fournit que les couleurs de base et pas toutes leurs déclinaisons, ce qui nécessite d'avoir une règle de calcul automatique pour déterminer les déclinaisons
* La couleur "Lightly purple" est peut-être mal nommée (si cette couleur doit changer en fonction de la couleur primary, le "purple" peut ne pas correspondre à la couleur de thème choisie)

=== État des lieux code ===

* Les déclinaisons des couleurs (primary et secondary) sont automatiquement calculées à partir de la couleur de base (500) en ajoutant/retranchant 8 à la luminosité (en HLS) à chaque niveau plus/moins clair
* Le thème Vitam peut être configuré en modifiant les couleurs suivantes : <code>vitamui-primary</code>, <code>vitamui-secondary</code>, <code>vitamui-tertiary</code>, <code>vitamui-background</code>, <code>vitamui-header-footer</code>
* Les déclinaisons grises et additionnelles sont en dur dans le code et non configurables
* Même si le thème Vitam n'utilise pas toutes les déclinaisons, les SVG (logos d'applications) semblent utiliser beaucoup de déclinaisons (primary : toutes les variantes | secondary : 100, 300, 400 500, 600, 900)
* La couleur tertiary ne semble pas être utilisée dans ses déclinaisons et ne semble être utilisée (peut-être ? dans certains cas ?) que pour afficher le <code>*</code> pour les champs obligatoires
* Les couleurs rouge, orange et vert n'ont pas de version déclinée
* La couleur "Lightly purple" existe bien mais ne semble pas être utilisée. Il existe aussi une couleur "--vitamui-background" qui est configurable et qui devrait surement correspondre à "Lightly purple" (mais ce n'est pas le cas visiblement)

== Version d'Angular ==
La version actuelle d'Angular est la v17 avec angular-material en v16.

La montée de version d'Angular est bloquée par angular-material, lui-même bloqué car nos composants utilisent les composants "legacy" d'angular-material. Il faut donc migrer des composants "legacy" aux nouveaux composants afin de pouvoir tout débloquer.

Xelians nous a fait un retour d'expérience sur leur montée de version. Voici les captures d'écran de leurs tickets créés suite à la migration "legacy" vers nouveaux composants :
{| class="wikitable"
|+
![[Fichier:CRO-616.png|centré|vignette]]
![[Fichier:CRO-617.png|centré|vignette]]
|}

Fichier:CRO-617.png

2024-11-18T09:48:06Z

Mrobert :

CRO-617

Fichier:CRO-616.png

2024-11-18T09:47:25Z

Mrobert :

CRO-616

VPN et SSH

2024-10-01T12:08:34Z

Mrobert :

L'utilisation de VPN n'est plus la méthode préconisée (et ne fonctionne plus ?) pour accéder aux environnements (ga, bu, zo, meu, ...).

La nouvelle façon d'accéder aux environnements est l'utilisation de Teleport : https://teleport.programmevitam.fr/

== <s>Automatisation des rebonds</s> ==
<s>Afin de pouvoir se connecter en SSH ou faire des SCP directement depuis sa machine sans avoir a effectuer plusieurs rebonds à chaque fois, suivre la configuration décrite ci-dessous.</s>

=== <s>Configuration</s> ===
<s>Créer un dossier <code>~/.ssh/vitam</code>.</s>

<s>Créer un fichier <code>~/.ssh/vitam/config</code> avec le contenu suivant :</s><syntaxhighlight lang="text">
Host vitam-sas-rebond
HostName 192.168.0.2
User sas
RemoteCommand /bin/sh
Host vitam-env-rebond
HostName 51.159.152.33
Port 10392
User env
IdentityFile ~/.ssh/id_rsa_sas_rebond
ProxyJump vitam-sas-rebond
Host vitam-env-bastion
HostName 192.168.4.11
User env
IdentityFile ~/.ssh/id_rsa_env_rebond
ProxyJump vitam-env-rebond
Host vitam-env-*.priv
User env
IdentityFile ~/.ssh/id_rsa_env_bastion
ProxyJump vitam-env-bastion
</syntaxhighlight><s>Dans <code>~/.ssh/vitam/</code>, déposer les clés SSH suivantes :</s>

* <s><code>id_rsa</code> : votre clé SSH</s>
* <s><code>id_rsa.pub</code> : votre clé SSH publique</s>
* <s><code>id_rsa_env_bastion</code> : la clé SSH provenant de env_bastion</s>
* <s><code>id_rsa_env_rebond</code> : la clé SSH provenant de env_rebond. Après copie, retirer son mot de passe avec la commande <code>ssh-keygen -p -f id_rsa_env_rebond</code></s>
* <s><code>id_rsa_sas_rebond</code> : la clé SSH provenant de sas_rebond</s>

=== <s>Utilisation</s> ===
<s>Lancer l'image docker contenant le VPN en montant <code>~/.ssh/vitam</code> avec l'option suivante : <code>-v ~/.ssh/vitam:/root/.ssh</code> (ex : <code>docker run --rm --privileged --sysctl net.ipv6.conf.all.disable_ipv6=0 -d -v ~/.ssh/vitam:/root/.ssh --name scalevpn scalevpn</code>).</s>

<s>Lancer un shell dans l'image : <code>docker exec -it scalevpn /bin/bash</code>.</s>

<s>Se connecter en SSH directement à la machine cible (par exemple : <code>ssh vitam-env-int-vm-0.priv</code>).</s>

Dette Design

2024-10-01T08:38:35Z

Mrobert :

Dette Design

2024-09-25T14:42:57Z

Mrobert : /* Couleurs */

== Couleurs ==
Le material design en général, et Angular material en particulier, définit 10 déclinaisons de couleurs : 50, 100, 200, 300, 400, 500, 600, 700, 800 et 900 avec 500 correspondant à la couleur de base. Dans Vitam, nous n'utilisons pas toutes les déclinaisons de couleur. À voir si on doit tout de même toutes les définir/garder dans Figma et le code.

Lien Figma : https://www.figma.com/design/YHKmbbnI25ttjMLBUhXu3u/Vitam-UI-%F0%9F%A7%A9-Design-System?node-id=2110-478&m=dev

Lien Design Système code : https://int-ui.env.programmevitam.fr/design-system/colors

=== État des lieux Figma ===

* La couleur "Primary" ne correspond(ait) pas à "Primary — 500" alors que la règle est que la déclinaison "500" doit correspondre à la couleur de base
* Les déclinaisons 50, 100, 200, ..., 900 ne suivent (a priori) pas de règle déterministe : on ne peut pas déduire la couleur "Primary — 400" à partir de "Primary — 500" et d'une règle de calcul. Or, pour personnaliser le thème Vitam, on ne fournit que les couleurs de base et pas toutes leurs déclinaisons, ce qui nécessite d'avoir une règle de calcul automatique pour déterminer les déclinaisons
* La couleur "Lightly purple" est peut-être mal nommée (si cette couleur doit changer en fonction de la couleur primary, le "purple" peut ne pas correspondre à la couleur de thème choisie)

=== État des lieux code ===

* Les déclinaisons des couleurs (primary et secondary) sont automatiquement calculées à partir de la couleur de base (500) en ajoutant/retranchant 8 à la luminosité (en HLS) à chaque niveau plus/moins clair
* Le thème Vitam peut être configuré en modifiant les couleurs suivantes : <code>vitamui-primary</code>, <code>vitamui-secondary</code>, <code>vitamui-tertiary</code>, <code>vitamui-background</code>, <code>vitamui-header-footer</code>
* Les déclinaisons grises et additionnelles sont en dur dans le code et non configurables
* Même si le thème Vitam n'utilise pas toutes les déclinaisons, les SVG (logos d'applications) semblent utiliser beaucoup de déclinaisons (primary : toutes les variantes | secondary : 100, 300, 400 500, 600, 900)
* La couleur tertiary ne semble pas être utilisée dans ses déclinaisons et ne semble être utilisée (peut-être ? dans certains cas ?) que pour afficher le <code>*</code> pour les champs obligatoires
* Les couleurs rouge, orange et vert n'ont pas de version déclinée
* La couleur "Lightly purple" existe bien mais ne semble pas être utilisée. Il existe aussi une couleur "--vitamui-background" qui est configurable et qui devrait surement correspondre à "Lightly purple" (mais ce n'est pas le cas visiblement)

Dette Design

2024-09-25T14:11:19Z

Mrobert :

== Couleurs ==
Le material design en général, et Angular material en particulier, définit 10 déclinaisons de couleurs : 50, 100, 200, 300, 400, 500, 600, 700, 800 et 900 avec 500 correspondant à la couleur de base. Dans Vitam, nous n'utilisons pas toutes les déclinaisons de couleur. À voir si on doit tout de même toutes les définir/garder dans Figma et le code.

=== État des lieux Figma ===

* La couleur "Primary" ne correspond(ait) pas à "Primary — 500" alors que la règle est que la déclinaison "500" doit correspondre à la couleur de base
* Les déclinaisons 50, 100, 200, ..., 900 ne suivent (a priori) pas de règle déterministe : on ne peut pas déduire la couleur "Primary — 400" à partir de "Primary — 500" et d'une règle de calcul. Or, pour personnaliser le thème Vitam, on ne fournit que les couleurs de base et pas toutes leurs déclinaisons, ce qui nécessite d'avoir une règle de calcul automatique pour déterminer les déclinaisons
* La couleur "Lightly purple" est peut-être mal nommée (si cette couleur doit changer en fonction de la couleur primary, le "purple" peut ne pas correspondre à la couleur de thème choisie)

=== État des lieux code ===

* Les déclinaisons des couleurs (primary et secondary) sont automatiquement calculées à partir de la couleur de base (500) en ajoutant/retranchant 8 à la luminosité (en HLS) à chaque niveau plus/moins clair
* Le thème Vitam peut être configuré en modifiant les couleurs suivantes : <code>vitamui-primary</code>, <code>vitamui-secondary</code>, <code>vitamui-tertiary</code>, <code>vitamui-background</code>, <code>vitamui-header-footer</code>
* Les déclinaisons grises et additionnelles sont en dur dans le code et non configurables
* Même si le thème Vitam n'utilise pas toutes les déclinaisons, les SVG (logos d'applications) semblent utiliser beaucoup de déclinaisons (primary : toutes les variantes | secondary : 100, 300, 400 500, 600, 900)
* La couleur tertiary ne semble pas être utilisée dans ses déclinaisons et ne semble être utilisée (peut-être ? dans certains cas ?) que pour afficher le <code>*</code> pour les champs obligatoires
* Les couleurs rouge, orange et vert n'ont pas de version déclinée
* La couleur "Lightly purple" existe bien mais ne semble pas être utilisée. Il existe aussi une couleur "--vitamui-background" qui est configurable et qui devrait surement correspondre à "Lightly purple" (mais ce n'est pas le cas visiblement)

Dette Design

2024-09-25T14:08:48Z

Mrobert : Page créée avec « == Couleurs == Le material design en général, et Angular material en particulier, définit 10 déclinaisons de couleurs : 50, 100, 200, 300, 400, 500, 600, 700, 800 et 900 avec 500 correspondant à la couleur de base. Dans Vitam, nous n'utilisons pas toutes les déclinaisons de couleur. À voir si on doit tout de même toutes les définir/garder dans Figma et le code. === État des lieux Figma === * La couleur "Primary" ne correspond(ait) pas à "Primary —... »

== Couleurs ==
Le material design en général, et Angular material en particulier, définit 10 déclinaisons de couleurs : 50, 100, 200, 300, 400, 500, 600, 700, 800 et 900 avec 500 correspondant à la couleur de base. Dans Vitam, nous n'utilisons pas toutes les déclinaisons de couleur. À voir si on doit tout de même toutes les définir/garder dans Figma et le code.

=== État des lieux Figma ===

* La couleur "Primary" ne correspond(ait) pas à "Primary — 500" alors que la règle est que la déclinaison "500" doit correspondre à la couleur de base
* Les déclinaisons 50, 100, 200, ..., 900 ne suivent (a priori) pas de règle déterministe : on ne peut pas déduire la couleur "Primary — 400" à partir de "Primary — 500" et d'une règle de calcul. Or, pour personnaliser le thème Vitam, on ne fournit que les couleurs de base et pas toutes leurs déclinaisons, ce qui nécessite d'avoir une règle de calcul automatique pour déterminer les déclinaisons
* La couleur "Lightly purple" est peut-être mal nommée (si cette couleur doit changer en fonction de la couleur primary, le "purple" peut ne pas correspondre à la couleur de thème choisie)

=== État des lieux code ===

* Les déclinaisons des couleurs (primary et secondary) sont automatiquement calculées à partir de la couleur de base (500) en ajoutant/retranchant 8 à la luminosité (en HLS) à chaque niveau plus/moins clair
* Les déclinaisons grises et additionnelles sont en dur dans le code et non configurables
* Même si le thème Vitam n'utilise pas toutes les déclinaisons, les SVG (logos d'applications) semblent utiliser beaucoup de déclinaisons (primary : toutes les variantes | secondary : 100, 300, 400 500, 600, 900)
* La couleur tertiary ne semble pas être utilisée dans ses déclinaisons et ne semble être utilisée (peut-être ? dans certains cas ?) que pour afficher le <code>*</code> pour les champs obligatoires
* Les couleurs rouge, orange et vert n'ont pas de version déclinée
* La couleur "Lightly purple" existe bien mais ne semble pas être utilisée. Il existe aussi une couleur "--vitamui-background" qui est configurable et qui devrait surement correspondre à "Lightly purple" (mais ce n'est pas le cas visiblement)

VPN et SSH

2024-06-05T13:16:00Z

Mrobert : Page créée avec « == Automatisation des rebonds == Afin de pouvoir se connecter en SSH ou faire des SCP directement depuis sa machine sans avoir a effectuer plusieurs rebonds à chaque fois, suivre la configuration décrite ci-dessous. === Configuration === Créer un dossier <code>~/.ssh/vitam</code>. Créer un fichier <code>~/.ssh/vitam/config</code> avec le contenu suivant :<syntaxhighlight lang="text"> Host vitam-sas-rebond HostName 192.168.0.11 User sas RemoteCom... »

== Automatisation des rebonds ==
Afin de pouvoir se connecter en SSH ou faire des SCP directement depuis sa machine sans avoir a effectuer plusieurs rebonds à chaque fois, suivre la configuration décrite ci-dessous.

=== Configuration ===
Créer un dossier <code>~/.ssh/vitam</code>.

Créer un fichier <code>~/.ssh/vitam/config</code> avec le contenu suivant :<syntaxhighlight lang="text">
Host vitam-sas-rebond
HostName 192.168.0.11
User sas
RemoteCommand /bin/sh
Host vitam-env-rebond
HostName 51.159.152.33
Port 10392
User env
IdentityFile ~/.ssh/id_rsa_sas_rebond
ProxyJump vitam-sas-rebond
Host vitam-env-bastion
HostName 192.168.4.11
User env
IdentityFile ~/.ssh/id_rsa_env_rebond
ProxyJump vitam-env-rebond
Host vitam-env-*.priv
User env
IdentityFile ~/.ssh/id_rsa_env_bastion
ProxyJump vitam-env-bastion
</syntaxhighlight>Dans <code>~/.ssh/vitam/</code>, déposer les clés SSH suivantes :

* <code>id_rsa</code> : votre clé SSH
* <code>id_rsa.pub</code> : votre clé SSH publique
* <code>id_rsa_env_bastion</code> : la clé SSH provenant de env_bastion
* <code>id_rsa_env_rebond</code> : la clé SSH provenant de env_rebond. Après copie, retirer son mot de passe avec la commande <code>ssh-keygen -p -f id_rsa_env_rebond</code>
* <code>id_rsa_sas_rebond</code> : la clé SSH provenant de sas_rebond

=== Utilisation ===
Lancer l'image docker contenant le VPN en montant <code>~/.ssh/vitam</code> avec l'option suivante : <code>-v ~/.ssh/vitam:/root/.ssh</code> (ex : <code>docker run --rm --privileged --sysctl net.ipv6.conf.all.disable_ipv6=0 -d -v ~/.ssh/vitam:/root/.ssh --name scalevpn scalevpn</code>).

Lancer un shell dans l'image : <code>docker exec -it scalevpn /bin/bash</code>.

Se connecter en SSH directement à la machine cible (par exemple : <code>ssh vitam-env-int-vm-0.priv</code>).