long-git-cli 1.0.16 → 1.0.18

package/src/devops/ui/public/js/pipeline-page.js

@@ -0,0 +1,364 @@
+/**
+ * Pipeline 监听测试页面逻辑
+ */
+
+const PipelinePage = {
+  /**
+   * 初始化 Pipeline 监听页面
+   */
+  async init() {
+    /** 加载保存的配置 */
+    await this.loadConfig();
+
+    /** 绑定事件 */
+    this.bindEvents();
+  },
+
+  /**
+   * 加载保存的配置
+   */
+  async loadConfig() {
+    try {
+      const config = localStorage.getItem('pipeline-test-config');
+      if (config) {
+        const data = JSON.parse(config);
+        if (data.projectPath) {
+          document.getElementById('pipeline-project-path').value = data.projectPath;
+          document.getElementById('pipeline-workspace').value = data.workspace || '';
+          document.getElementById('pipeline-repo-slug').value = data.repoSlug || '';
+          document.getElementById('pipeline-display-path').textContent = data.projectPath;
+          document.getElementById('pipeline-path-info').style.display = 'block';
+          
+          if (data.workspace && data.repoSlug) {
+            document.getElementById('pipeline-display-workspace').textContent = data.workspace;
+            document.getElementById('pipeline-display-repo-slug').textContent = data.repoSlug;
+            document.getElementById('pipeline-git-info').style.display = 'block';
+          }
+        }
+        document.getElementById('pipeline-tag-format').value = data.tagFormat || '';
+        document.getElementById('pipeline-fixed-tag').value = data.fixedTag || '';
+      }
+    } catch (error) {
+      console.error('加载配置失败:', error);
+    }
+  },
+
+  /**
+   * 保存配置
+   */
+  saveConfig() {
+    try {
+      const config = {
+        projectPath: document.getElementById('pipeline-project-path').value.trim(),
+        workspace: document.getElementById('pipeline-workspace').value.trim(),
+        repoSlug: document.getElementById('pipeline-repo-slug').value.trim(),
+        tagFormat: document.getElementById('pipeline-tag-format').value.trim(),
+        fixedTag: document.getElementById('pipeline-fixed-tag').value.trim(),
+      };
+      
+      localStorage.setItem('pipeline-test-config', JSON.stringify(config));
+      Components.Toast.success('配置已保存');
+    } catch (error) {
+      console.error('保存配置失败:', error);
+      Components.Toast.error('保存配置失败: ' + error.message);
+    }
+  },
+
+  /**
+   * 绑定事件
+   */
+  bindEvents() {
+    /** 选择文件夹按钮 */
+    document.getElementById('pipeline-select-folder-btn')?.addEventListener('click', () => {
+      this.selectProjectFolder();
+    });
+
+    /** 保存配置按钮 */
+    document.getElementById('save-pipeline-config-btn')?.addEventListener('click', () => {
+      this.saveConfig();
+    });
+
+    /** 创建 Tag 并监听按钮 */
+    document.getElementById('pipeline-test-btn')?.addEventListener('click', () => {
+      this.testPipeline();
+    });
+
+    /** 查询固定 Tag 按钮 */
+    document.getElementById('pipeline-query-btn')?.addEventListener('click', () => {
+      this.queryFixedTag();
+    });
+  },
+
+  /**
+   * 选择项目文件夹
+   */
+  async selectProjectFolder() {
+    try {
+      Components.Loading.show('正在打开文件夹选择器...');
+
+      const response = await API.post('/select-folder', {});
+
+      Components.Loading.hide();
+
+      if (!response.path) {
+        Components.Toast.error('未选择文件夹');
+        return;
+      }
+
+      document.getElementById('pipeline-project-path').value = response.path;
+      await this.parseGitInfo(response.path);
+    } catch (error) {
+      Components.Loading.hide();
+      
+      if (error.message.includes('用户取消')) {
+        return;
+      }
+      
+      Components.Toast.error('选择文件夹失败: ' + error.message);
+    }
+  },
+
+  /**
+   * 解析 Git 仓库信息
+   */
+  async parseGitInfo(projectPath) {
+    try {
+      if (!projectPath) {
+        projectPath = document.getElementById('pipeline-project-path').value.trim();
+      }
+
+      if (!projectPath) {
+        Components.Toast.error('请先选择项目路径');
+        return;
+      }
+
+      Components.Loading.show('正在解析 Git 信息...');
+
+      const response = await API.post('/parse-git-repo', { projectPath });
+
+      Components.Loading.hide();
+
+      document.getElementById('pipeline-display-path').textContent = projectPath;
+      document.getElementById('pipeline-path-info').style.display = 'block';
+
+      if (response.warning) {
+        Components.Toast.error(response.warning);
+        Components.Modal.confirm(
+          `检测到 Git 仓库，但不是 Bitbucket 仓库。\n\nRemote URL: ${response.remoteUrl}\n\n是否手动填写 Bitbucket 信息？`,
+          () => {
+            const workspace = prompt('请输入 Bitbucket Workspace:');
+            const repoSlug = prompt('请输入 Bitbucket Repo Slug:');
+            
+            if (workspace && repoSlug) {
+              document.getElementById('pipeline-workspace').value = workspace.trim();
+              document.getElementById('pipeline-repo-slug').value = repoSlug.trim();
+              document.getElementById('pipeline-display-workspace').textContent = workspace.trim();
+              document.getElementById('pipeline-display-repo-slug').textContent = repoSlug.trim();
+              document.getElementById('pipeline-git-info').style.display = 'block';
+              Components.Toast.success('已手动设置 Bitbucket 信息');
+            }
+          }
+        );
+      } else {
+        document.getElementById('pipeline-workspace').value = response.workspace;
+        document.getElementById('pipeline-repo-slug').value = response.repoSlug;
+        document.getElementById('pipeline-display-workspace').textContent = response.workspace;
+        document.getElementById('pipeline-display-repo-slug').textContent = response.repoSlug;
+        document.getElementById('pipeline-git-info').style.display = 'block';
+        Components.Toast.success('Git 信息解析成功');
+      }
+    } catch (error) {
+      Components.Loading.hide();
+      
+      const path = document.getElementById('pipeline-project-path').value;
+      if (path) {
+        document.getElementById('pipeline-display-path').textContent = path;
+        document.getElementById('pipeline-path-info').style.display = 'block';
+      }
+      
+      Components.Toast.error('解析失败: ' + error.message);
+    }
+  },
+
+  /**
+   * 添加日志
+   */
+  addLog(message, type = 'info') {
+    const logContainer = document.getElementById('pipeline-logs');
+    if (!logContainer) return;
+
+    const timestamp = new Date().toLocaleTimeString();
+    const logEntry = document.createElement('div');
+    logEntry.style.cssText = 'padding: 0.25rem 0; font-family: monospace; font-size: 0.875rem;';
+    
+    const colors = {
+      info: 'var(--text-secondary)',
+      success: 'var(--success-color)',
+      error: 'var(--error-color)',
+      warning: '#f59e0b',
+    };
+    
+    logEntry.innerHTML = `<span style="color: var(--text-secondary);">[${timestamp}]</span> <span style="color: ${colors[type]};">${message}</span>`;
+    logContainer.appendChild(logEntry);
+    logContainer.scrollTop = logContainer.scrollHeight;
+  },
+
+  /**
+   * 清空日志
+   */
+  clearLogs() {
+    const logContainer = document.getElementById('pipeline-logs');
+    if (logContainer) {
+      logContainer.innerHTML = '';
+    }
+  },
+
+  /**
+   * 查询固定 Tag 的构建状态
+   */
+  async queryFixedTag() {
+    try {
+      const workspace = document.getElementById('pipeline-workspace').value.trim();
+      const repoSlug = document.getElementById('pipeline-repo-slug').value.trim();
+      const fixedTag = document.getElementById('pipeline-fixed-tag').value.trim();
+
+      if (!workspace || !repoSlug) {
+        Components.Toast.error('请先选择项目文件夹');
+        return;
+      }
+
+      if (!fixedTag) {
+        Components.Toast.error('请输入要查询的 Tag 名称');
+        return;
+      }
+
+      const statusDiv = document.getElementById('pipeline-status');
+      statusDiv.style.display = 'block';
+      statusDiv.innerHTML = `
+        <div style="padding: 1rem; background-color: #1e1e1e; border-radius: var(--radius-md); border: 1px solid var(--border-color);">
+          <div style="color: #4ade80; font-size: 0.875rem; margin-bottom: 0.5rem; font-weight: 600;">
+            📋 查询 Tag: ${fixedTag}
+          </div>
+          <div id="pipeline-logs" style="max-height: 400px; overflow-y: auto; color: var(--text-secondary); font-family: monospace; font-size: 0.875rem;">
+          </div>
+        </div>
+      `;
+
+      this.clearLogs();
+
+      // 使用 EventSource 接收 SSE
+      const params = new URLSearchParams({
+        workspace,
+        repoSlug,
+        fixedTag,
+        queryOnly: 'true',
+      });
+
+      const eventSource = new EventSource(`/api/query-tag-status-stream?${params}`);
+
+      eventSource.addEventListener('log', (e) => {
+        const data = JSON.parse(e.data);
+        this.addLog(data.message, data.type || 'info');
+      });
+
+      eventSource.addEventListener('error', (e) => {
+        try {
+          const data = JSON.parse(e.data);
+          this.addLog(`错误: ${data.message}`, 'error');
+          Components.Toast.error('查询失败');
+        } catch (err) {
+          console.error('解析错误消息失败:', err);
+        }
+        eventSource.close();
+      });
+
+      eventSource.addEventListener('complete', (e) => {
+        const data = JSON.parse(e.data);
+        this.addLog(`${data.message}`, 'success');
+        Components.Toast.success('查询完成');
+        eventSource.close();
+      });
+
+      eventSource.onerror = (error) => {
+        console.error('SSE 连接错误:', error);
+        this.addLog('连接中断或服务器错误', 'error');
+        Components.Toast.error('连接失败');
+        eventSource.close();
+      };
+
+    } catch (error) {
+      this.addLog(`错误: ${error.message}`, 'error');
+      Components.Toast.error('查询失败: ' + error.message);
+    }
+  },
+
+  /**
+   * 测试 Pipeline (使用 SSE)
+   */
+  async testPipeline() {
+    try {
+      const projectPath = document.getElementById('pipeline-project-path').value.trim();
+      const workspace = document.getElementById('pipeline-workspace').value.trim();
+      const repoSlug = document.getElementById('pipeline-repo-slug').value.trim();
+      const tagFormat = document.getElementById('pipeline-tag-format').value.trim();
+
+      if (!projectPath || !workspace || !repoSlug || !tagFormat) {
+        Components.Toast.error('请填写所有必填字段');
+        return;
+      }
+
+      const statusDiv = document.getElementById('pipeline-status');
+      statusDiv.style.display = 'block';
+      statusDiv.innerHTML = `
+        <div style="padding: 1rem; background-color: #1e1e1e; border-radius: var(--radius-md); border: 1px solid var(--border-color);">
+          <div style="color: #4ade80; font-size: 0.875rem; margin-bottom: 0.5rem; font-weight: 600;">
+            📋 Pipeline 执行日志
+          </div>
+          <div id="pipeline-logs" style="max-height: 400px; overflow-y: auto; color: var(--text-secondary); font-family: monospace; font-size: 0.875rem;">
+          </div>
+        </div>
+      `;
+
+      this.clearLogs();
+
+      // 使用 EventSource 接收 SSE
+      const params = new URLSearchParams({
+        projectPath,
+        workspace,
+        repoSlug,
+        tagFormat,
+      });
+
+      const eventSource = new EventSource(`/api/test-pipeline-stream?${params}`);
+
+      eventSource.addEventListener('log', (e) => {
+        const data = JSON.parse(e.data);
+        this.addLog(data.message, data.type || 'info');
+      });
+
+      eventSource.addEventListener('error', (e) => {
+        const data = JSON.parse(e.data);
+        this.addLog(`错误: ${data.message}`, 'error');
+        Components.Toast.error('Pipeline 测试失败');
+        eventSource.close();
+      });
+
+      eventSource.addEventListener('complete', (e) => {
+        const data = JSON.parse(e.data);
+        this.addLog(`${data.message}`, 'success');
+        Components.Toast.success('Pipeline 执行成功');
+        eventSource.close();
+      });
+
+      eventSource.onerror = (error) => {
+        console.error('SSE 连接错误:', error);
+        this.addLog('连接中断', 'error');
+        eventSource.close();
+      };
+
+    } catch (error) {
+      this.addLog(`错误: ${error.message}`, 'error');
+      Components.Toast.error('Pipeline 测试失败: ' + error.message);
+    }
+  },
+};