feat: implement smart polling and webhook instructions UI

Author: TarunyaProgrammer

backend/src/modules/github/github.service.ts

@@ -194,12 +194,16 @@ export class GitHubService {
   /**
    * Fetch a single repository using GraphQL.
    */
-  async fetchSingleRepo(repoName: string): Promise<GitHubGraphQLRepo | null> {
+  async fetchSingleRepo(
+    repoName: string,
+    owner?: string,
+  ): Promise<GitHubGraphQLRepo | null> {
     this.checkCircuitBreaker();
+    const repoOwner = owner || this.org;
 
     try {
       const query = `query {
-        repository(owner: "${this.org}", name: "${repoName}") {
+        repository(owner: "${repoOwner}", name: "${repoName}") {
           id
           databaseId
           name
@@ -235,11 +239,15 @@ export class GitHubService {
   /**
    * Fetch contributors for a repository using REST API with ETag caching.
    */
-  async fetchContributors(repoName: string): Promise<GitHubContributor[]> {
+  async fetchContributors(
+    repoName: string,
+    owner?: string,
+  ): Promise<GitHubContributor[]> {
     this.checkCircuitBreaker();
+    const repoOwner = owner || this.org;
 
-    const etagKey = `etag:contributors:${this.org}/${repoName}`;
-    const dataKey = `contributors:data:${this.org}/${repoName}`;
+    const etagKey = `etag:contributors:${repoOwner}/${repoName}`;
+    const dataKey = `contributors:data:${repoOwner}/${repoName}`;
 
     try {
       // Check for stored ETag
@@ -250,7 +258,7 @@ export class GitHubService {
       }
 
       const response = await this.restClient.repos.listContributors({
-        owner: this.org,
+        owner: repoOwner,
         repo: repoName,
         per_page: 100,
         headers,
@@ -307,11 +315,15 @@ export class GitHubService {
   /**
    * Fetch languages for a repository using REST API with ETag caching.
    */
-  async fetchLanguages(repoName: string): Promise<GitHubLanguages> {
+  async fetchLanguages(
+    repoName: string,
+    owner?: string,
+  ): Promise<GitHubLanguages> {
     this.checkCircuitBreaker();
+    const repoOwner = owner || this.org;
 
-    const etagKey = `etag:languages:${this.org}/${repoName}`;
-    const dataKey = `languages:data:${this.org}/${repoName}`;
+    const etagKey = `etag:languages:${repoOwner}/${repoName}`;
+    const dataKey = `languages:data:${repoOwner}/${repoName}`;
 
     try {
       const storedEtag = await this.cacheService.get<string>(etagKey);
@@ -321,7 +333,7 @@ export class GitHubService {
       }
 
       const response = await this.restClient.repos.listLanguages({
-        owner: this.org,
+        owner: repoOwner,
         repo: repoName,
         headers,
       });
@@ -362,12 +374,16 @@ export class GitHubService {
   /**
    * Fetch commit activity (52 weeks) for a repository.
    */
-  async fetchCommitActivity(repoName: string): Promise<GitHubCommitActivity[]> {
+  async fetchCommitActivity(
+    repoName: string,
+    owner?: string,
+  ): Promise<GitHubCommitActivity[]> {
     this.checkCircuitBreaker();
+    const repoOwner = owner || this.org;
 
     try {
       const response = await this.restClient.repos.getCommitActivityStats({
-        owner: this.org,
+        owner: repoOwner,
         repo: repoName,
       });
 

backend/src/modules/sync/sync.processor.ts

@@ -24,28 +24,34 @@ export class SyncProcessor {
 
   @Process('sync-repo')
   async handleSyncJob(job: Job<SyncJobPayload>): Promise<void> {
-    const { repoName, repoFullName, eventType } = job.data;
+    const { repoName: jobRepoName, repoFullName, eventType } = job.data;
     const org = this.configService.get<string>('GITHUB_ORG', 'c2siorg');
+    
+    // Parse owner and repoName from fullName
+    const [owner, name] = repoFullName.includes('/')
+      ? repoFullName.split('/')
+      : [org, jobRepoName];
+
     this.logger.log(
-      `Processing sync job: ${repoFullName} (event: ${eventType})`,
+      `Processing sync job: ${owner}/${name} (event: ${eventType})`,
     );
 
     try {
       // 1. Fetch repo metadata via GraphQL
-      const repoData = await this.github.fetchSingleRepo(repoName);
+      const repoData = await this.github.fetchSingleRepo(name, owner);
       if (!repoData) {
-        this.logger.warn(`Repo "${repoName}" not found on GitHub — skipping`);
+        this.logger.warn(`Repo "${owner}/${name}" not found on GitHub — skipping`);
         return;
       }
 
       // 2. Fetch contributors via REST (ETag cached)
-      const contributors = await this.github.fetchContributors(repoName);
+      const contributors = await this.github.fetchContributors(name, owner);
 
       // 3. Fetch languages via REST (ETag cached)
-      const languages = await this.github.fetchLanguages(repoName);
+      const languages = await this.github.fetchLanguages(name, owner);
 
       // 4. Fetch commit activity via REST
-      const activity = await this.github.fetchCommitActivity(repoName);
+      const activity = await this.github.fetchCommitActivity(name, owner);
 
       // 5. Process all data
       const repoUpsert = this.processing.processRepository(repoData);

frontend/src/app/features/repository-list/repository-list.component.html

@@ -37,9 +37,38 @@
       {{ analyzing ? 'Queuing...' : 'Analyze' }}
     </button>
   </section>
-  <div class="analyze-message" *ngIf="analyzeMessage">
-    <mat-icon>info</mat-icon>
-    {{ analyzeMessage }}
+  <div class="analyze-actions">
+    <div class="analyze-message" *ngIf="analyzeMessage">
+      <mat-icon>info</mat-icon>
+      {{ analyzeMessage }}
+    </div>
+    <div class="spacer"></div>
+    <button mat-button class="webhook-toggle" (click)="toggleWebhookInfo()">
+      <mat-icon>{{ showWebhookInfo ? 'expand_less' : 'add_link' }}</mat-icon>
+      {{ showWebhookInfo ? 'Hide Instructions' : 'Add via Webhook' }}
+    </button>
+  </div>
+
+  <!-- Webhook Instructions Panel -->
+  <div class="webhook-panel mat-elevation-z2" *ngIf="showWebhookInfo">
+    <div class="panel-header">
+      <mat-icon>webhook</mat-icon>
+      <h3>Configure GitHub Webhook</h3>
+    </div>
+    <div class="panel-body">
+      <p>To enable real-time updates for your repository, add a webhook in your GitHub Repository settings:</p>
+      <ol>
+        <li>Go to <strong>Settings</strong> > <strong>Webhooks</strong> > <strong>Add webhook</strong>.</li>
+        <li><strong>Payload URL:</strong> <code>https://repo-arg-backend.onrender.com/api/webhooks/github</code></li>
+        <li><strong>Content type:</strong> <code>application/json</code></li>
+        <li><strong>Secret:</strong> <em>(Provided during setup)</em></li>
+        <li><strong>Events:</strong> Select <code>Just the push event</code> or <code>Send me everything</code>.</li>
+      </ol>
+      <div class="info-note">
+        <mat-icon>lightbulb</mat-icon>
+        <span>Once configured, any push or activity will automatically update the RepoArg dashboard in real-time.</span>
+      </div>
+    </div>
   </div>
 
   <!-- Filter & Search Section -->

frontend/src/app/features/repository-list/repository-list.component.ts

@@ -8,7 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import { Subject, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs';
+import { Subject, takeUntil, debounceTime, distinctUntilChanged, timer, take } from 'rxjs';
 import { RepositoryService, Repository, StatsResponse } from '../../core/services/repository.service';
 import { RelativeTimePipe } from '../../shared/pipes/relative-time.pipe';
 import { NumberFormatPipe } from '../../shared/pipes/number-format.pipe';
@@ -50,6 +50,7 @@ export class RepositoryListComponent implements OnInit, OnDestroy {
 
   analyzing = false;
   analyzeMessage = '';
+  showWebhookInfo = false;
 
   private destroy$ = new Subject<void>();
   readonly SKELETON_ITEMS = Array(12).fill(0);
@@ -170,6 +171,10 @@ export class RepositoryListComponent implements OnInit, OnDestroy {
     this.router.navigate(['/repo', id]);
   }
 
+  toggleWebhookInfo(): void {
+    this.showWebhookInfo = !this.showWebhookInfo;
+  }
+
   analyzeRepos(): void {
     const urls = this.analyzeControl.value?.split(',').map(url => url.trim()).filter(url => url);
     if (!urls || urls.length === 0) return;
@@ -182,6 +187,7 @@ export class RepositoryListComponent implements OnInit, OnDestroy {
         this.analyzing = false;
         this.analyzeMessage = res.message;
         this.analyzeControl.setValue('');
+        this.startPolling();
         setTimeout(() => this.analyzeMessage = '', 5000);
       },
       error: () => {
@@ -191,4 +197,15 @@ export class RepositoryListComponent implements OnInit, OnDestroy {
       }
     });
   }
+
+  startPolling(): void {
+    // Poll every 5 seconds, up to 12 times (1 minute total)
+    timer(5000, 5000).pipe(
+      take(12),
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
+      this.loadStats();
+      this.loadRepositories();
+    });
+  }
 }