Version 0.5.0 - Ajout des pipelines

public/javascripts/basics.js

@@ -201,6 +201,7 @@ class ViewWindow {
             let offsetX, offsetY;
             windowDiv.style.zIndex = zIndex + 1
 
+         
             header.addEventListener('mousedown', (e) => {
                 isDragging = true;
                 
@@ -244,6 +245,8 @@ class ViewWindow {
 
         this.ViewItem.show()
 
+    
+
     }
 
     destroy() {
@@ -577,12 +580,14 @@ class Service {
     url = null
     canAccess = false
     isOnline  = false
+    View = null
     constructor(properties) {
         this.name = properties.name
         this.description = properties.description
         this.icon = properties.icon
         this.url = properties.url
         this.canAccess = properties.canAccess
+        this.View = properties.View
     }
 
     generateHTML() {
@@ -633,7 +638,7 @@ class Service {
             // Make a popup of View to select if you want to start, stop or restart the service by doing a request
 
             powerButton.addEventListener("click", () => {
-                View.createPopup({
+                this.View.createPopup({
                     title: `<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`,
                     content: `
                     
@@ -650,7 +655,7 @@ class Service {
                 const startButton = getID(`${this.name}_start`)
                 const stopButton = getID(`${this.name}_stop`)
                 const restartButton = getID(`${this.name}_restart`)
-                const info = new InfoPop("sv-power-info")
+                const info = new TextResponse("sv-power-info")
                 
                 
 
@@ -670,7 +675,7 @@ class Service {
                     request.then((answer) => {
                         if(answer.answer == "OK") {
                             statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
-                            View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
+                            this.View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
                             this.isOnline  = true
                         } else {
                             info.err("Impossible de démarrer le service")
@@ -687,7 +692,7 @@ class Service {
                         if(answer.answer == "OK") {
                             statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle red"></i> Hors ligne</span>'
                             this.isOnline  = false
-                            View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
+                            this.View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
                           
                         } else {
                             info.err("Impossible d'arrêter le service")
@@ -706,7 +711,7 @@ class Service {
                     request.then((answer) => {
                         if(answer.answer == "OK") {
                             statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
-                            View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
+                            this.View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
                             this.isOnline  = true
                         } else {
                             info.err("Impossible de redémarrer le service")
@@ -724,6 +729,227 @@ class Service {
     
 }
 
+/**
+ * Permet de créer un composant de vue de type "Pipeline"
+ * @param {object} properties Propriétés du composant de vue
+ */
+ 
+class Pipeline {
+    name;
+    pipe;
+    class;
+    url;
+    View;
+    constructor(properties) {
+        this.name = properties.pipeline.name
+        this.class = properties.pipeline._class
+        this.url = properties.pipeline.url
+        this.pipe = properties.pipeline
+        this.View = properties.View
+
+        if(!this.pipe.description) {
+            this.pipe.description = "Aucune description"
+        }
+    }
+
+    generateHTML() {
+        var image = null
+        var classInfo = null
+        var lastBuildStatus = ""
+
+        if(this.class == "hudson.model.FreeStyleProject") {
+            image = `<i class="fa fa-folder"></i>`
+
+            if(this.pipe.lastBuild) {
+                lastBuildStatus = `<p class='pipeline-status'><i class="fa-solid fa-circle yellow"></i> Construction en cours ... - N°${this.pipe.nextBuildNumber - 1} </p>`
+                if(this.pipe.lastSuccessfulBuild) {
+                    if(this.pipe.lastSuccessfulBuild.number == this.pipe.nextBuildNumber - 1) {
+                        lastBuildStatus = `<p class='pipeline-status'><i class="fa-solid fa-circle green"></i> Dernière construction réussie - N°${this.pipe.nextBuildNumber - 1} </p>`
+                    }
+
+                } 
+                if(this.pipe.lastFailedBuild) {
+                    if(this.pipe.lastFailedBuild.number == this.pipe.nextBuildNumber - 1) {
+                        lastBuildStatus = `<p class='pipeline-status'><i class="fa-solid fa-circle red"></i> Dernière construction échouée - N°${this.pipe.nextBuildNumber - 1} </p>`
+                    }
+
+                }
+                
+
+            } else {
+                lastBuildStatus = `<p class='pipeline-status'><i class="fa-solid fa-circle"></i> Aucune construction</p>`
+            }
+
+
+            // TRUE : lastBuildStatus = `<p class='pipeline-status'><i class="fa-solid fa-circle green"></i> Dernière construction réussie - N°${this.pipe.jobs[0].lastSuccessfulBuild.number}</p>`
+            // BUILDING :  lastBuildStatus = `<p class='pipeline-status'><i class="fa-solid fa-circle yellow"></i> Construction en cours ... - N°${this.pipe.nextBuildNumber - 1} </p>`
+            // FAILED :  lastBuildStatus = `<p class='pipeline-status'><i class="fa-solid fa-circle red"></i> Dernière construction échouée - N°${this.pipe.jobs[0].nextBuildNumber - 1} </p>`
+            // NOITHING : lastBuildStatus = `<p class='pipeline-status'><i class="fa-solid fa-circle"></i> Aucune construction</p>`
+        } else {
+
+            image = `<i class="fa fa-code-merge"></i>`
+            if(this.pipe.jobs[0].lastBuild) {
+                lastBuildStatus = `<p class='pipeline-status'><i class="fa-solid fa-circle yellow"></i> Construction en cours ... - N°${this.pipe.jobs[0].nextBuildNumber - 1} </p>`
+                if(this.pipe.jobs[0].lastSuccessfulBuild) {
+                    if(this.pipe.jobs[0].lastSuccessfulBuild.number == this.pipe.jobs[0].nextBuildNumber - 1) {
+                        lastBuildStatus = `<p class='pipeline-status'><i class="fa-solid fa-circle green"></i> Dernière construction réussie - N°${this.pipe.jobs[0].nextBuildNumber - 1} </p>`
+                    }
+
+                } 
+                if(this.pipe.jobs[0].lastFailedBuild) {
+                    if(this.pipe.jobs[0].lastFailedBuild.number == this.pipe.jobs[0].nextBuildNumber - 1) {
+                        lastBuildStatus = `<p class='pipeline-status'><i class="fa-solid fa-circle red"></i> Dernière construction échouée - N°${this.pipe.jobs[0].nextBuildNumber - 1} </p>`
+                    }
+
+                }
+               
+
+            } else {
+                lastBuildStatus = `<p class='pipeline-status'><i class="fa-solid fa-circle"></i> Aucune construction</p>`
+            }
+
+            
+         
+        }
+
+        return `
+        <div class="pipeline">
+            <div class="pipeline-info">
+                ${image}
+                <div class="pipeline-text">
+                <p class='pipeline-title'><strong>${this.name}</strong></p>
+                <p><i>${this.pipe.description}</i></p>
+                ${lastBuildStatus}
+                </div>
+            </div>
+            <div class="pipeline-actions">
+                <a href="${this.url}" target="_blank"><button class="btn blue"><span><i class='fa fa-arrow-right'></i> Accéder à la pipeline</span></button></a>
+                <button id='${this.name}_pipelinepower' class='btn green'><span><i class='fa fa-play'></i> Démarrer la pipeline<span></button>
+            </div>
+        </div>
+        `
+    }
+
+
+    loadScript() {
+
+        const powerButton = getID(`${this.name}_pipelinepower`)
+
+        powerButton.addEventListener("click", () => {
+            if(this.class == "hudson.model.FreeStyleProject" && this.pipe.property[0].parameterDefinitions.length > 0) {
+
+                var allProperties = new Array()
+
+                for(const property of this.pipe.property[0].parameterDefinitions) {
+                    console.log(property)
+                    if(property.type == "StringParameterDefinition") {
+                        allProperties.push("<p>" + property.name + "</p><input class='field' type='text' id='" + property.name + "'>")
+                    } 
+                    if(property.type == "ChoiceParameterDefinition") {
+
+                        var options = new Array()
+                        for(const option of property.choices) {
+                            options.push(`<option value='${option}'>${option}</option>`)
+                        }
+
+                        allProperties.push("<p>" + property.name + "</p><select class='field' id='" + property.name + "'>" + options.join("") + "</select>")
+                    }
+                }
+                
+
+
+                this.View.createPopup({
+                    title: `<i class='fa fa-play'></i> Démarrer la pipeline`,
+                    content: `
+                    
+                    <p class='sv-power-select'>${this.name}</p>
+                    <div class='pipeline-options'>
+                     ${allProperties.join("")}
+                     </div>
+                    <p id='pl-power-info'></p>
+                    <button id="${this.name}_start" class="btn green"><span>Démarrer</span></button>
+                    `
+                })
+
+                const startButton = getID(`${this.name}_start`)
+                const info = new TextResponse("pl-power-info")
+
+                startButton.addEventListener("click", () => {
+                    info.clear()
+                   
+                    
+                    var allFields = new Array()
+
+                    for(const property of this.pipe.property[0].parameterDefinitions) {
+                       
+                           
+                            if(getID(property.name).value == "") {
+                                info.err("Veuillez remplir tous les champs")
+                                return
+                            }
+                            allFields.push({name: property.name,value: getID(property.name).value} )
+                        
+                    }
+
+                    const request = post(`PL_START`, {name: this.name, fields: allFields, url: this.url, type: this.class})
+
+                    request.then((answer) => {
+                   
+                        if(answer == "OK") {
+                            info.info("La pipeline a été démarrée avec succès")
+                            this.View.destroyPopup()
+                      
+                        } else {
+                            info.err("Impossible de démarrer la pipeline")
+
+                        }
+                    })
+
+                })
+
+                
+
+            } else {
+
+                // Open a confirmation popup to start the pipeline
+
+                this.View.createPopup({
+                    title: `<i class='fa fa-play'></i> Démarrer la pipeline`,
+                    content: `
+                    
+                    <p class='sv-power-select'>${this.name}</p>
+                    <p id='pl-power-info'></p>
+                    <button id="${this.name}_start" class="btn green"><span>Démarrer</span></button>
+                    `
+                })
+
+                const startButton = getID(`${this.name}_start`)
+                const info = new TextResponse("pl-power-info")
+
+                startButton.addEventListener("click", () => {
+                    info.clear()
+                    const request = post(`PL_START`, {name: this.name, url: this.url, type: this.class, jobname: this.pipe.jobs[0].name})
+
+                    request.then((answer) => {
+                        console.log(answer)
+                        if(answer == "OK") {
+                            info.info("La pipeline a été démarrée avec succès")
+                            this.View.destroyPopup()
+                         
+                        } else {
+                            info.err("Impossible de démarrer la pipeline")
+
+                        }
+                    })
+
+                })
+
+            }
+        })
+    }
+
+}
+
 
 /**
  * Permet de créer un item de la barre des tâches

public/javascripts/indexscript.js

@@ -2,7 +2,7 @@ const infoUsername = getID("infoUsername")
 const infoUserimage = getID("infoUserimage")
 const infoDisplayname = getID("infoDisplayname")
 const views = getID("views")
-
+const panelBox = getID("panel-box")
 
 
 // User Request
@@ -32,8 +32,10 @@ REQ_user.then((ANS_user) => {
 
     if(AvailableViews.join("") == "") {
 
-        AvailableViews.push("<p style='position: absolute; width: 100%;' class='yellow t-center'><i class='fa-solid fa-warning'></i> Aucune permission ne semble vous êtes accordée<br>Demandez à Raphix afin de résoudre ce problème</p>")
+        AvailableViews.push("<p style='width: 100%;' class='yellow t-center'><i class='fa-solid fa-warning'></i> Aucune permission ne semble vous êtes accordée<br>Demandez à Raphix afin de résoudre ce problème</p>")
         views.classList.remove("views-box")
+        panelBox.style.justifyContent = "unset"
+        console.log(panelBox.style)
     } else {
 
         views.classList.add("views-box")
@@ -44,10 +46,9 @@ REQ_user.then((ANS_user) => {
     // BindView
 
     AllComponents.forEach((component) => {
-      component.bindView()
+        component.bindView()
     })
 
-    servers.forceWindow()
   
 
 })

public/javascripts/middle.js

@@ -40,7 +40,7 @@ const explorer = new ViewComponent({
   })
   
   const links = new ViewComponent({
-    name: "Gestion des liens",
+    name: "Générateur des liens",
     icon: "fa-solid fa-link",
     permission: "LINKS"
   })

public/javascripts/pipeline.js

@@ -0,0 +1,66 @@
+pipelines.createWindow(() => {
+
+    const View = new ViewWindow({
+        title: `<i class="fa fa-code-merge"></i> Gestion des pipelines`,
+        width: "900px",
+        height: "600px"
+    })
+
+    const pipelinesList = new Array()
+
+    View.setContent(`<div style='font-size: 24px; margin-top: 225px;'  class='t-center'>
+        <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+    </div>`)
+
+    var AllPipelines = new Array()
+
+    function getPipelines() {
+
+        const pipes = get("PL_GET_ALL")
+        pipes.then((ANS_pipes) => {
+        
+            AllPipelines.length = 0
+           pipelinesList.length = 0
+
+            if(ANS_pipes != "UNAVAILABLE") {
+                ANS_pipes.jobs.forEach((pipe) => {
+                    console.log(pipe)
+                    const pipeline = new Pipeline({
+                        pipeline: pipe,
+                        View: View
+                    })
+        
+                    pipelinesList.push(pipeline.generateHTML())
+                    AllPipelines.push(pipeline)
+                })
+        
+                View.setContent(`
+                <div class="pipelines">
+                    <div id='reload_Btn_pipeline' class='pl-reload'><i class='fa fa-rotate-left'></i> Recharger les pipelines</div>
+                    ${pipelinesList.join("")}
+                </div>`)
+
+                for(const pipeline of AllPipelines) {
+                    pipeline.loadScript()
+                }
+
+                getID("reload_Btn_pipeline").addEventListener("click", () => {
+                    View.setContent(`<div style='font-size: 24px; margin-top: 225px;'  class='t-center'>
+                    <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+                    </div>`)
+                    getPipelines()
+                })
+
+
+            } else {
+                View.setContent(`<div style='font-size: 24px; margin-top: 225px;'  class='t-center lightred'>
+                <p><i class="fa-solid fa-warning"></i> Une erreur est survenue lors du chargement des pipelines</p>
+                </div>`)
+            }
+            
+        })
+    }
+
+    getPipelines()
+
+})

public/javascripts/service.js

@@ -15,8 +15,8 @@ services.createWindow(async () => {
         description: "Bot de streaming musical sur Discord",
         icon: "/images/services/subsonics.png",
         url: "https://subsonics.raphix.fr" ,
-        canAccess: true
-        
+        canAccess: true,
+        View: View
 
     })
 
@@ -25,7 +25,8 @@ services.createWindow(async () => {
         description: "Gestionnaire de dépôt Git",
         icon: "/images/services/gitea.svg",
         url: "https://git.raphix.fr" ,
-        canAccess: true
+        canAccess: true,
+        View: View
 
     })
 
@@ -34,7 +35,8 @@ services.createWindow(async () => {
         description: "Gestionnaire de pipeline",
         icon: "/images/services/jenkins.svg",
         url: "https://jenkins.raphix.fr" ,
-        canAccess: true
+        canAccess: true,
+        View: View
 
     })
 
@@ -43,7 +45,8 @@ services.createWindow(async () => {
         description: "Site web de Raphix",
         icon: "/images/services/raphix.png",
         url: "https://raphix.fr",
-        canAccess: true
+        canAccess: true,
+        View: View
 
     })
 
@@ -52,7 +55,8 @@ services.createWindow(async () => {
         description: "Curriculum Vitae de Raphix",
         icon: "/images/services/cv.png",
         url: "https://cv.raphix.fr",
-        canAccess: true
+        canAccess: true,
+        View: View
     })
 
     const lavalink = new Service({
@@ -60,7 +64,8 @@ services.createWindow(async () => {
         description: "Serveur Lavalink pour Subsonics",
         icon: "/images/services/lavalink.svg",
         url: "http://omega.raphix.fr:2333",
-        canAccess: false
+        canAccess: false,
+        View: View
     })
     
     allServices.push(subsonicsService.generateHTML())