GitLab Pipes - Browser Extension for Pipeline Monitoring

A Chrome extension that allows you to bookmark multiple GitLab projects and monitor their CI/CD pipeline statuses in one place.

🔗 Live Demo:

🚀 Features

• 🔖 Bookmark multiple GitLab repositories
• 🟢 View real-time pipeline status for all projects
• ⚡ Quick access via browser extension popup
• 🔐 Secure authentication using GitLab Personal Access Token
• 📊 Visual pipeline stage breakdown
• 🔄 Automatic refresh of pipeline data

🛠 Tech Stack

• Frontend: React 17 + TypeScript
• Styling: Tailwind CSS + SCSS
• API: GitLab GraphQL API
• Extension: Chrome Extension Manifest V3
• Build Tool: Webpack 5
• Package Manager: Yarn

📦 Installation

Prerequisites

• GitLab account with Personal Access Token
• Chrome browser
• Node.js and Yarn

Setup Steps

1. Clone the Repository

git clone https://github.com/sharathpc/gitlab-pipes.git
cd gitlab-pipes

2. Install Dependencies

yarn install

3. Build the Extension

yarn build

4. Load in Chrome

• Open chrome://extensions
• Enable Developer Mode
• Click "Load Unpacked"
• Select the dist/ directory

5. Configure Authentication

• Click the extension icon
• Enter your GitLab Personal Access Token
• Start bookmarking projects!

🏗 Architecture

src/
├── components/          # React components
│   ├── Dashboard/      # Main dashboard view
│   ├── Pipeline/       # Pipeline display component
│   ├── Projects/       # Project management
│   └── Login/          # Authentication
├── pages/              # Extension pages
│   ├── Popup/          # Main popup interface
│   ├── Options/        # Settings page
│   └── Background/     # Background scripts
├── services.ts         # GitLab API integration
└── types.ts           # TypeScript definitions

🔧 Key Implementation Details

GitLab GraphQL Integration

The extension uses GitLab's GraphQL API for efficient data fetching:

export const getPipeLines = async (projectIds: any) => {
    const parseProjectIds = projectIds.map((item: string) => `"${item}"`).join(',');
    return await axiosRequest.post(`/graphql`, {
        query: `{
            projects(membership: true, ids: [${parseProjectIds}]) {
                nodes {
                    id
                    name
                    pipelines(first: 2) {
                        nodes {
                            id
                            status
                            duration
                            stages {
                                nodes {
                                    id
                                    name
                                    status
                                }
                            }
                        }
                    }
                }
            }
        }`
    })
}

Pipeline Status Component

Reusable component for displaying pipeline information:

const PipelineComponent: React.FC<IProps> = ({ pipeline }) => {
  const secondsToTime = (e: number) => {
    const h = Math.floor(e / 3600).toString().padStart(2, '0'),
      m = Math.floor(e % 3600 / 60).toString().padStart(2, '0'),
      s = Math.floor(e % 60).toString().padStart(2, '0');
    return `${h}:${m}:${s}`;
  }

  return (
    <tr className="pipeline-section">
      <td>
        <PipelineStatus pipeline={pipeline} />
      </td>
      <td className="stage-cell">
        {pipeline.stages.map(stage =>
          <div key={stage.id} className="stage-container">
            <button className={`ci-status-icon-${stage.status}`}>
              <svg className="gl-icon s16">
                <use href={`${gitlabLogo}\#status_${stage.status}_borderless`}></use>
              </svg>
            </button>
          </div>
        )}
      </td>
      <td>
        <div className="flex items-center">
          <svg className="w-3 h-3">
            <use href={`${gitlabLogo}\#timer`} ></use>
          </svg>
          <div className="ml-2">{secondsToTime(pipeline.duration)}</div>
        </div>
      </td>
    </tr>
  );
};

🚧 Challenges & Solutions

GitLab API Rate Limiting

• Challenge: GitLab has strict rate limits on API calls
• Solution: Implemented debounced API calls and efficient GraphQL queries

Extension Storage Limitations

• Challenge: Chrome extension storage has size limits
• Solution: Optimized data structure and implemented cleanup mechanisms

Cross-Origin Requests

• Challenge: Browser security restrictions on API calls
• Solution: Used proper CORS headers and GitLab's API endpoints

Real-time Updates

• Challenge: Keeping pipeline data fresh without overwhelming the API
• Solution: Implemented smart refresh intervals and user-triggered updates

🗺 Roadmap

• Manual pipeline trigger button
• Mobile-friendly popup layout
• Project group filters
• Token and bookmarks sync using GitLab snippets
• Browser notifications for failed pipelines

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• GitLab GraphQL API Documentation
• Chrome Extension Documentation
• React Documentation