@silexlabs/silex 3.6.3 → 3.6.4

package/src/ts/plugins/server/GitlabHostingConnector.ts

@@ -30,9 +30,112 @@ import { JobManager } from '../../server/jobs'
 import { ServerConfig } from '../../server/config'
 import { setTimeout } from 'timers/promises'
 
-const waitTimeOut = 5000 /* for wait loop in job pages getting */
+const waitTimeOut = 5000 /* for wait loop waiting for job to appear */
+const jobPollInterval = 10000 /* poll job status every 10 seconds */
+const jobCompletionTimeOut = 45 * 60 * 1000 /* 45 minutes max for job completion */
 const SILEX_OVERWRITE_NOTICE = '# silexOverwrite: true'
 
+// GitLab job statuses that indicate the job is still running
+const GITLAB_RUNNING_STATUSES = ['created', 'waiting_for_resource', 'preparing', 'pending', 'running']
+// GitLab job statuses that indicate success
+const GITLAB_SUCCESS_STATUSES = ['success']
+// GitLab job statuses that indicate failure
+const GITLAB_FAILED_STATUSES = ['failed', 'canceled', 'skipped']
+
+/**
+ * Filter GitLab trace to remove technical noise
+ * Returns an array of meaningful log lines
+ */
+function filterTraceLines(trace: string): string[] {
+  return trace.split('\n')
+    .map(l => l.trim())
+    .filter(l => l.length > 0)
+    // Remove GitLab internal markers
+    .filter(l => !l.match(/^section_/))
+    // eslint-disable-next-line no-control-regex
+    .filter(l => !l.match(/^\x1b/)) // Remove ANSI escape sequences at start
+    // Remove timestamps at the beginning of lines
+    .map(l => l.replace(/^\d{4}-\d{2}-\d{2}T[\d:.]+Z\s*\d*O?\s*/, ''))
+    // Remove Docker/Git setup noise
+    .filter(l => !l.includes('Using Docker executor'))
+    .filter(l => !l.includes('Pulling docker image'))
+    .filter(l => !l.includes('Fetching changes'))
+    .filter(l => !l.includes('Checking out'))
+    .filter(l => !l.includes('Skipping Git submodules'))
+    .filter(l => !l.includes('Getting source from Git'))
+    .filter(l => !l.includes('Executing "step_script"'))
+    .filter(l => !l.includes('Restoring cache'))
+    .filter(l => !l.includes('Saving cache'))
+    .filter(l => !l.match(/^\s*\$\s/)) // Remove shell command echoes
+    .filter(l => !l.match(/^Running with gitlab-runner/))
+    .filter(l => !l.match(/^Preparing the .* executor/))
+    .filter(l => !l.match(/^Using .* as base image/))
+    // Keep non-empty lines after filtering
+    .filter(l => l.trim().length > 0)
+}
+
+/**
+ * Parse GitLab/11ty job logs to extract meaningful status
+ * Returns a short user-friendly status message
+ */
+function parseJobTrace(trace: string): string {
+  const lines = filterTraceLines(trace)
+
+  // Look for 11ty build progress
+  if (trace.includes('[11ty]')) {
+    // Look for 11ty completion first
+    if (trace.includes('[11ty] Wrote') || trace.includes('[11ty] Copied')) {
+      const wroteMatch = trace.match(/\[11ty\] Wrote (\d+)/i)
+      const copiedMatch = trace.match(/\[11ty\] Copied (\d+)/i)
+      const parts = []
+      if (wroteMatch) parts.push(`${wroteMatch[1]} pages generated`)
+      if (copiedMatch) parts.push(`${copiedMatch[1]} files copied`)
+      if (parts.length) return parts.join(', ')
+    }
+    // Look for 11ty processing
+    const eleventyMatch = trace.match(/\[11ty\].*?(\d+)\s+files?/i)
+    if (eleventyMatch) {
+      return `Generating ${eleventyMatch[1]} pages...`
+    }
+    return 'Building pages...'
+  }
+
+  // Look for npm/npx installing
+  if (trace.includes('npm') && trace.includes('install')) {
+    return 'Installing dependencies...'
+  }
+
+  // Look for npx running eleventy
+  if (trace.includes('npx') && trace.includes('eleventy')) {
+    return 'Running page generator...'
+  }
+
+  // Look for artifact upload
+  if (trace.includes('Uploading artifacts')) {
+    return 'Preparing files for deployment...'
+  }
+
+  // Look for pages deployment
+  if (trace.includes('CI_PAGES_URL') || trace.includes('will be deployed')) {
+    return 'Finalizing deployment...'
+  }
+
+  // Look for job completion
+  if (trace.includes('Job succeeded')) {
+    return 'Build complete'
+  }
+
+  // Look for errors
+  const errorMatch = trace.match(/error[:\s]+(.{0,100})/i)
+  if (errorMatch) {
+    const errorMsg = errorMatch[1].trim().substring(0, 60)
+    return `Error: ${errorMsg}${errorMsg.length >= 60 ? '...' : ''}`
+  }
+
+  // Return empty string to avoid showing technical noise
+  return ''
+}
+
 export default class GitlabHostingConnector extends GitlabConnector implements HostingConnector {
 
   displayName = 'Gitlab hosting'
@@ -117,32 +220,17 @@ export default class GitlabHostingConnector extends GitlabConnector implements H
           job.logs[0].push(job.message)
           const pageUrl = await this.getPageUrl(session, websiteId, adminUrl)
           job.logs[0].push(`Page URL: ${pageUrl}`)
-          job.message = 'Getting the deployment logs URL...'
+
+          // Wait for the GitLab job to complete
+          job.message = 'Starting build...'
           job.logs[0].push(job.message)
-          const gitlabJobLogsUrl = await this.getGitlabJobLogsUrl(session, websiteId, job, { startJob, jobSuccess, jobError }, adminUrl, successTag)
-          // Because of the GitLab policy, this can be null (and we suggest the user to verify their account)
-          if (!gitlabJobLogsUrl) {
-            let errorMessage = 'Could not retrieve the deployment logs URL.'
-
-            if (this.isUsingOfficialInstance()) {
-              const verifyURL = 'https://gitlab.com/-/identity_verification'
-              errorMessage +=
-                `<div class="notice">
-                    If your GitLab account is recent, you may need to verify it <a href="${verifyURL}" target="_blank">here</a>
-                    in order to be able to use pipelines (this is GitLab's policy, not Silex's).
-                 </div>`
-            }
+          const result = await this.waitForGitlabJobCompletion(session, websiteId, job, adminUrl, successTag, gitlabUrl, pageUrl)
 
-            throw new Error(errorMessage)
+          if (result.success) {
+            jobSuccess(job.jobId, result.message)
+          } else {
+            jobError(job.jobId, result.message)
           }
-          job.logs[0].push(`Deployment logs URL: ${gitlabJobLogsUrl}`)
-          const message = `
-            <p><a href="${gitlabUrl}" target="_blank">Your website will soon be live here</a>.</p>
-            <p>Changes may take a few minutes to appear, <a href="${gitlabJobLogsUrl}" target="_blank">follow deployment here</a>.</p>
-            <p>Manage <a href="${pageUrl}" target="_blank">GitLab Pages settings</a>.</p>
-          `
-          job.logs[0].push(message)
-          jobSuccess(job.jobId, message)
         } catch (error) {
           console.error('Error during getting the website URLs:', error.message)
           jobError(job.jobId, `Failed to get the website URLs: ${error.message}`)
@@ -227,37 +315,205 @@ export default class GitlabHostingConnector extends GitlabConnector implements H
     return `${projectUrl}/pages`
   }
 
-  // waiting for the job corresponding to the current tag
-  async getGitlabJobLogsUrl(session: GitlabSession, websiteId: WebsiteId, job: PublicationJobData, { startJob, jobSuccess, jobError }: JobManager, projectUrl: string, tag): Promise<string | null> {
+  /**
+   * Wait for the GitLab CI/CD job to complete
+   * Polls the job status and updates the Silex job with progress
+   */
+  async waitForGitlabJobCompletion(
+    session: GitlabSession,
+    websiteId: WebsiteId,
+    job: PublicationJobData,
+    projectUrl: string,
+    tag: string,
+    gitlabUrl: string,
+    pageUrl: string
+  ): Promise<{ success: boolean; message: string }> {
     const t0 = Date.now()
-    do {
-      const jobs = await this.callApi({
-        session,
-        path: `api/v4/projects/${websiteId}/jobs`,
-        method: 'GET'
-      })
-      // Find job matching our tag (may not exist yet on first publish)
-      const matchingJob = jobs.find(j => j.ref === tag)
-      if (matchingJob) {
-        return `${projectUrl}/-/jobs/${matchingJob.id}`
+    let gitlabJobId: number | null = null
+    let gitlabJobLogsUrl: string | null = null
+
+    // First, wait for the job to appear
+    while (!gitlabJobId && (Date.now() - t0) < this.options.timeOut) {
+      try {
+        const jobs = await this.callApi({
+          session,
+          path: `api/v4/projects/${websiteId}/jobs`,
+          method: 'GET'
+        })
+        const matchingJob = jobs.find(j => j.ref === tag)
+        if (matchingJob) {
+          gitlabJobId = matchingJob.id
+          gitlabJobLogsUrl = `${projectUrl}/-/jobs/${matchingJob.id}`
+          job.logs[0].push('Build started')
+          job.message = `
+            <p><strong>Building...</strong></p>
+            <p><a href="${gitlabJobLogsUrl}" target="_blank">View build logs</a></p>
+          `
+        }
+      } catch (e) {
+        console.error('Error fetching GitLab jobs:', e.message)
+      }
+      if (!gitlabJobId) {
+        await setTimeout(waitTimeOut)
+      }
+    }
+
+    // If job never appeared, handle the error
+    if (!gitlabJobId) {
+      let errorMessage = 'Could not start the build. The server may be busy or unavailable.'
+
+      if (this.isUsingOfficialInstance()) {
+        const verifyURL = 'https://gitlab.com/-/identity_verification'
+        errorMessage +=
+          `<div class="notice">
+              If your GitLab account is recent, you may need to <a href="${verifyURL}" target="_blank">verify it here</a>
+              before you can publish websites.
+           </div>`
       }
-      // No matching job yet - wait and retry
-      await setTimeout(waitTimeOut)
-    } while ((Date.now() - t0) < this.options.timeOut)
-      
-    // failed in timelaps allowed (avoiding infinite loop)
-    jobError(job.jobId, 'Failed to get job id')
-    job.message = 'Unable to get job id'
-    job.logs[0].push(job.message)
-    return `${projectUrl}/-/jobs/`
+
+      return { success: false, message: errorMessage }
+    }
+
+    // Now poll the job status until it completes
+    let lastTraceLength = 0
+    while ((Date.now() - t0) < jobCompletionTimeOut) {
+      try {
+        // Get job status
+        const gitlabJob = await this.callApi({
+          session,
+          path: `api/v4/projects/${websiteId}/jobs/${gitlabJobId}`,
+          method: 'GET'
+        })
+
+        const jobStatus = gitlabJob.status
+
+        // Try to get job trace (logs) for progress info
+        let traceInfo = ''
+        try {
+          const trace = await this.callApi({
+            session,
+            path: `api/v4/projects/${websiteId}/jobs/${gitlabJobId}/trace`,
+            method: 'GET'
+          })
+          if (typeof trace === 'string' && trace.length > lastTraceLength) {
+            // Parse the new portion of the trace
+            const newTrace = trace.substring(lastTraceLength)
+            traceInfo = parseJobTrace(newTrace)
+            lastTraceLength = trace.length
+
+            // Add filtered log lines to the job logs for the <details> section
+            const filteredLines = filterTraceLines(newTrace)
+            if (filteredLines.length > 0) {
+              // Limit to last 50 lines to avoid overwhelming the logs
+              const linesToAdd = filteredLines.slice(-50)
+              job.logs[0].push(...linesToAdd)
+            }
+          }
+        } catch (e) {
+          // Trace might not be available yet, that's OK
+        }
+
+        // Map GitLab status to user-friendly status
+        const statusMap = {
+          'created': 'Starting',
+          'waiting_for_resource': 'Waiting for server',
+          'preparing': 'Preparing',
+          'pending': 'Queued',
+          'running': 'Building',
+          'success': 'Complete',
+          'failed': 'Failed',
+          'canceled': 'Canceled',
+          'skipped': 'Skipped',
+        }
+        const statusDisplay = statusMap[jobStatus] || jobStatus
+        const progressInfo = traceInfo ? ` - ${traceInfo}` : ''
+        job.message = `
+          <p><strong>${statusDisplay}</strong>${progressInfo}</p>
+          <p><a href="${gitlabJobLogsUrl}" target="_blank">View build logs</a></p>
+        `
+
+        // Check if job completed
+        if (GITLAB_SUCCESS_STATUSES.includes(jobStatus)) {
+          // Fetch final trace to include in logs
+          try {
+            const finalTrace = await this.callApi({
+              session,
+              path: `api/v4/projects/${websiteId}/jobs/${gitlabJobId}/trace`,
+              method: 'GET'
+            })
+            if (typeof finalTrace === 'string') {
+              const allFilteredLines = filterTraceLines(finalTrace)
+              // Add last 30 lines as summary
+              job.logs[0].push('--- Build Summary ---')
+              job.logs[0].push(...allFilteredLines.slice(-30))
+            }
+          } catch (e) {
+            // Ignore trace fetch errors
+          }
+
+          const message = `
+            <p><strong>Your website is now live!</strong></p>
+            <p><a href="${gitlabUrl}" target="_blank" class="silex-button silex-button--primary">View your website</a></p>
+          `
+          job.logs[0].push('Build completed successfully')
+          return { success: true, message }
+        }
+
+        if (GITLAB_FAILED_STATUSES.includes(jobStatus)) {
+          const failureReason = gitlabJob.failure_reason || 'Build error'
+
+          // Fetch final trace to include error details in logs
+          try {
+            const finalTrace = await this.callApi({
+              session,
+              path: `api/v4/projects/${websiteId}/jobs/${gitlabJobId}/trace`,
+              method: 'GET'
+            })
+            if (typeof finalTrace === 'string') {
+              const allFilteredLines = filterTraceLines(finalTrace)
+              // Add last 50 lines to help debug the error
+              job.logs[0].push('--- Error Details ---')
+              job.logs[0].push(...allFilteredLines.slice(-50))
+            }
+          } catch (e) {
+            // Ignore trace fetch errors
+          }
+
+          const message = `
+            <p><strong>Build failed:</strong> ${failureReason}</p>
+            <p><a href="${gitlabJobLogsUrl}" target="_blank">View build logs for details</a></p>
+            <p><a href="${pageUrl}" target="_blank">Settings</a></p>
+          `
+          job.logs[0].push(`Build failed: ${failureReason}`)
+          return { success: false, message }
+        }
+
+        // Job still running, wait before next poll
+        await setTimeout(jobPollInterval)
+
+      } catch (e) {
+        console.error('Error polling GitLab job status:', e.message)
+        // Don't fail immediately, just wait and retry
+        await setTimeout(jobPollInterval)
+      }
+    }
+
+    // Timeout reached
+    const message = `
+      <p><strong>Build is taking longer than expected</strong></p>
+      <p>Your website may still be published successfully.</p>
+      <p><a href="${gitlabJobLogsUrl}" target="_blank">Check build status</a> | <a href="${gitlabUrl}" target="_blank">Check your website</a></p>
+    `
+    job.logs[0].push('Timeout waiting for build completion')
+    return { success: false, message }
   }
 
   async createTag(session: GitlabSession, websiteId: WebsiteId, job: PublicationJobData, { startJob, jobSuccess, jobError }: JobManager): Promise<string | null> {
     const projectId = websiteId // Assuming websiteId corresponds to GitLab project ID
     const newTag = '_silex_' + Date.now()
-    // Create a new tag
+    // Create a new tag to trigger the build
     try {
-      job.message = `Creating new tag ${newTag}...`
+      job.message = 'Triggering build...'
       job.logs[0].push(job.message)
       await this.callApi({
         session,
@@ -271,10 +527,10 @@ export default class GitlabHostingConnector extends GitlabConnector implements H
       })
     } catch (error) {
       console.error('Error during creating new tag:', error.message)
-      jobError(job.jobId, `Failed to create new tag: ${error.message}`)
+      jobError(job.jobId, `Failed to start build: ${error.message}`)
       return null
     }
-    
+
     // Return new tag
     return newTag
   }