Skip to content

A l'attention des développeurs

Jump to bottom
Loys Caucheteux edited this page Dec 17, 2021 · 1 revision

Cette page contient des précisions sur les méthodes de développement utilisés dans ce projet, l'objectif de ce document est de permettre une prise en main plus rapide.

Communication

Dashboard3 est un projet frontend en Boostrap Vue 2 qui communique avec un Headless CMS Strapi au format GraphQL graçe au client Apollo. On formate la requete comme un objet et Apollo renvoie l'objet demandé rempli avec les bonnes informations.

Cette chaine de récupération des données est relativement facile à implémenter car la redondance est énormément réduite par Apollo. On en trouve des exemples dans src/views/ged.vue ou src/views/factures.vue.

Certains composants font appels à d'autre backends tel que src/views/graph.vue qui appel influxDBv2 et formate sa réponse d'une manière différente que les appels à Strapi ou encore src/views/tickets.vue qui fait appel à L'api Zammad mais dont le format final ressemble aux composants simples du paragraphe précédent.

Stockage des Données coté client

Le projet utilise le système de gestion vue-store via localStorage mais certaines info sont envoyés directement dans localStorage, comme le thème (clair/sombre) de l'utilisateur. L'usage du store est recommandé.

Frontend

  • La plupart des données sont formatées pour le composants <b-table> de BootstrapVue.
  • Les graphiques sont rendus graçe à Vue Chartkick pour Vue 2
  • Le formatage de la donnée est très important, les composants comme <b-table> ou <line-chart> prennent un format spécifique et ne seront pas affichés autrement, dans le cas de <b-table> vous devrez le spécifier.

Fonctionnalités in a nutshell

Certaines fonctionnalités en développement ou dont l'implémentation a nécessité une forte complexité sont expliqués dans le détails ici.

Tableau des Backups : src/components/backupTable.vue

Le cycle de vie de ce composant est observable dans la fonction created() (backupTable.vue : 70). Il utilise InfluxDBv2 et Strapi. Chaque point de la liste numéroté ci-dessous représente une fonction appelée par le composant dans la fonction created()

  1. Récupération des informations de connexions à InfluxDBv2 inscrites dans Strapi => this.$data.InfluxDB : Object, this.$data.queryAPI : InfluxDBQueryAPI
  2. Récupération de l'id Strapi du client connecté => this.$data.actUserId : Number
  3. Récupération des entreprises du client et vérification de l'existence des tags permettant de les faire correspondre avec des serveurs à backuper => this.$data.userCorp : Array(Object)
  4. Récupération des noms des serveurs à backuper depuis InfluxDBv2 et classement de ceux-ci par entreprise => this.$data.urlsTags : Object 
"urlsTags": {
    "entreprise1" : ["serveur1.example.com", "serveur2.example.com"],
    "entreprise2" : ["serveur1.entreprise2.fr", "serveur2.entreprise2.xyz", "..."],
    "..." : ["...", "...", "..."]
}

  1. Tri de l'objet this.$data.urlsTags en comparant son contenu avec celui du tableau d'objet this.$data.userCorp si une entreprise indexée dans le premier est trouvée dans le second, les noms de ses serveurs sont poussés vers le tableau this.$data.watcherUri

  2. Génération de la String représentant la requete => this.$data.myQuery : String

  3. Effectuer la requete et analyser la réponse pour réaliser le tableau, formaté selon les prérequis de <b-table> de BootstrapVue => this.$data.backups : Array(Object)

Clone this wiki locally