Fix live fetching of invokeCopilotSeatApi

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 node_modules/*
 .angular/*
+src/environments/environment.ts

src/app/app.module.ts

@@ -27,7 +27,7 @@ import { EnterpriseLevelComponent } from './dashboard/enterprise-level/enterpris
 import { ImpactAnalysisComponent } from './dashboard/impact-analysis/impact-analysis.component';
 import { SampleApiResponseComponent } from './dashboard/sample-api-response/sample-api-response.component';
 import { OrgSeatsComponent } from './dashboard/org-seats/org-seats.component';
-
+import { CopilotDataService } from './services/copilot-data.service';
 
 @NgModule({
   declarations: [
@@ -61,7 +61,7 @@ import { OrgSeatsComponent } from './dashboard/org-seats/org-seats.component';
     MatSidenavModule,
     MatListModule
   ],
-  providers: [],
+  providers: [CopilotDataService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/dashboard/org-seats/org-seats.component.html

@@ -24,7 +24,7 @@ <h1>{{seat.value}}</h1>
             <th mat-sort-header="lastActivityEditor">Last Activity Editor</th>
             <th mat-sort-header="pendingCancellation">Pending Cancellation</th>
         </tr>
-        <tr *ngFor="let seat of seatInformation | paginate: { itemsPerPage: 20, currentPage: page }">
+        <tr *ngFor="let seat of seatInformation | paginate: { itemsPerPage: 30, currentPage: page }">
           <td>{{ seat.assignee.login }}</td>
           <td>{{ seat.created_at | date:'dd-MMM-yyyy' }}</td>
           <td>{{ seat.updated_at | date:'dd-MMM-yyyy'}}</td>
@@ -37,4 +37,4 @@ <h1>{{seat.value}}</h1>
       <pagination-controls (pageChange)="page = $event"></pagination-controls>
 
 
-</div>
+</div>

src/app/dashboard/org-seats/org-seats.component.scss

@@ -39,4 +39,8 @@
 
   tr:nth-child(even) {
     background-color: #f2f2f2;
+  }
+
+  pagination-controls {
+    margin: 0 auto;
   }

src/app/services/copilot-data.service.ts

@@ -0,0 +1,78 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from './../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CopilotDataService {
+
+  constructor(private http: HttpClient) { }
+
+  getCopilotUsageData(): Observable<any> {
+    const orgName = environment.orgName; 
+    const apiUrl = `${environment.ghBaseUrl}/${orgName}/${environment.copilotUsageApiUrl}`;
+    const token = environment.token; 
+
+    const headers = new HttpHeaders({
+      'Accept': 'application/vnd.github+json',
+      'Authorization': `Bearer ${token}`,
+      'X-GitHub-Api-Version': '2022-11-28'
+    });
+
+    return this.http.get(apiUrl, { headers });
+  }
+
+  getCopilotSeatsData(pageSize: number = 30): Observable<any> {
+    const orgName = environment.orgName; 
+    const apiUrl = `${environment.ghBaseUrl}/${orgName}/${environment.copilotSeatApiUrl}`;
+
+    let data: any = { seats: [] };
+    let firstPage = true;
+    let pageNo = 1;
+    let totalPages = 1;
+
+    // Create an observable to handle the paginated data fetching
+    return new Observable(observer => {
+      const fetchPage = (pageNo: number) => {
+        this.getPaginatedSeatsData(apiUrl, pageNo, pageSize).subscribe({
+          next: (response: any) => {
+            if (firstPage) {
+              data = response;
+              firstPage = false;
+              totalPages = response.total_pages;
+            } else {
+              data.seats = data.seats.concat(response.seats);
+            }
+
+            if (pageNo < totalPages) {
+              fetchPage(pageNo + 1);
+            } else {
+              observer.next(data);
+              observer.complete();
+            }
+          },
+          error: (error) => {
+            console.error('Error fetching paginated data:', error);
+            observer.error(error);
+          }
+        });
+      };
+
+      fetchPage(pageNo);
+    });
+  }
+
+  private getPaginatedSeatsData(apiUrl: string, pageNo: number, pageSize: number): Observable<any> {
+    const token = environment.token;
+    const paginatedUrl = `${apiUrl}?page=${pageNo}&per_page=${pageSize}`;
+    const headers = new HttpHeaders({
+      'Accept': 'application/vnd.github+json',
+      'Authorization': `Bearer ${token}`,
+      'X-GitHub-Api-Version': '2022-11-28'
+    });
+
+    return this.http.get(paginatedUrl, { headers });
+  }
+}

src/app/services/enterprise-level.service.ts

@@ -9,6 +9,7 @@ export class EnterpriseLevelService {
 
   private dataUrl = 'copilot_usage_data.json'; // URL to JSON data
 
+
   constructor(private http: HttpClient) { }
 
   getData(): Observable<any> {

src/app/services/impact.service.ts

@@ -1,88 +1,20 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { environment } from './../../environments/environment';
+import { CopilotDataService } from './copilot-data.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ImpactService {
 
-  private copilotUsageDataUrl = 'assets/copilot_usage_data.json'; // URL to JSON data
-  private copilotSeatsDataUrl = 'assets/copilot_seats_data.json'; // URL to JSON data
+  constructor(private http: HttpClient, private copilotDataService: CopilotDataService) { }
 
-  constructor(private http: HttpClient) { }
-
-  getCopilotUsageData(): Observable<any>  {
-    // sample dta loaded from local file
-    return this.http.get(this.copilotUsageDataUrl);
-    // uncomment below line to invoke API
-    // modify the environment file to add your token
-    // modify the organization name to your organization
-    // return this.invokeCopilotUsageApi();
-  }
-
-  getCopilotSeatsData(): Observable<any>  {
-    // sample dta loaded from local file
-    return this.http.get(this.copilotSeatsDataUrl);
-    // uncomment below line to invoke API
-    // modify the environment file to add your token
-    // modify the organization name to your organization
-    // return this.invokeCopilotSeatApi();
+  getCopilotUsageData(): Observable<any> {
+    return this.copilotDataService.getCopilotUsageData();
   }
 
-  invokeCopilotUsageApi(): Observable<any> {
-    const orgName = environment.orgName; 
-    const apiUrl = `${environment.ghBaseUrl}/${orgName}/${environment.copilotUsageApiUrl}`;
-    const token = environment.token; 
-
-    const headers = new HttpHeaders({
-      'Accept': 'application/vnd.github+json',
-      'Authorization': `Bearer ${token}`,
-      'X-GitHub-Api-Version': '2022-11-28'
-    });
-
-    return this.http.get(apiUrl, { headers });
+  getCopilotSeatsData(): Observable<any> {
+    return this.copilotDataService.getCopilotSeatsData(30);
   }
-
-  invokeCopilotSeatApi(): Observable<any> {
-    const orgName = environment.orgName; 
-    const apiUrl = `${environment.ghBaseUrl}/${orgName}/${environment.copilotSeatApiUrl}`;
-    var data:any;
-    var firstPage=true;
-    var pageNo=1;
-    var totalPages=1;
-
-    // get the paginated Copilot Seat allocation data
-    do{
-      var response = this.getPaginatedSeatsData(apiUrl, pageNo);
-      response.subscribe((data: any) => {
-        if(firstPage){
-          data=data;
-          firstPage=false;
-          totalPages=data.total_pages;
-        }
-        else{
-          data.seats=data.seats.concat(data.seats);
-        }
-      });
-      pageNo=pageNo+1;
-    }while(pageNo < totalPages);
-
-    return data;
-  }
-
-  getPaginatedSeatsData(apiUrl:any, pageNo:any): Observable<any> {
-    const token = environment.token; 
-
-    const headers = new HttpHeaders({
-      'Accept': 'application/vnd.github+json',
-      'Authorization': `Bearer ${token}`,
-      'X-GitHub-Api-Version': '2022-11-28'
-    });
-
-    return this.http.get(apiUrl+"?page="+pageNo, { headers });
-
-  }
-
 }

src/app/services/organization-level.service.ts

@@ -1,88 +1,20 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { environment } from './../../environments/environment';
+import { CopilotDataService } from './copilot-data.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class OrganizationLevelService {
 
-  private copilotUsageDataUrl = 'assets/copilot_usage_data.json'; // URL to JSON data
-  private copilotSeatsDataUrl = 'assets/copilot_seats_data.json'; // URL to JSON data
+  constructor(private http: HttpClient, private copilotDataService: CopilotDataService) { }
 
-  constructor(private http: HttpClient) { }
-
-  getCopilotUsageData(): Observable<any>  {
-    // sample dta loaded from local file
-    return this.http.get(this.copilotUsageDataUrl);
-    // uncomment below line to invoke API
-    // modify the environment file to add your token
-    // modify the organization name to your organization
-    // return this.invokeCopilotUsageApi();
-  }
-
-  getCopilotSeatsData(): Observable<any>  {
-    // sample dta loaded from local file
-    return this.http.get(this.copilotSeatsDataUrl);
-    // uncomment below line to invoke API
-    // modify the environment file to add your token
-    // modify the organization name to your organization
-    // return this.invokeCopilotSeatApi();
+  getCopilotUsageData(): Observable<any> {
+    return this.copilotDataService.getCopilotUsageData();
   }
 
-  invokeCopilotUsageApi(): Observable<any> {
-    const orgName = environment.orgName; 
-    const apiUrl = `${environment.ghBaseUrl}/${orgName}/${environment.copilotUsageApiUrl}`;
-    const token = environment.token; 
-
-    const headers = new HttpHeaders({
-      'Accept': 'application/vnd.github+json',
-      'Authorization': `Bearer ${token}`,
-      'X-GitHub-Api-Version': '2022-11-28'
-    });
-
-    return this.http.get(apiUrl, { headers });
+  getCopilotSeatsData(): Observable<any> {
+    return this.copilotDataService.getCopilotSeatsData(30);
   }
-
-  invokeCopilotSeatApi(): Observable<any> {
-    const orgName = environment.orgName; 
-    const apiUrl = `${environment.ghBaseUrl}/${orgName}/${environment.copilotSeatApiUrl}`;
-    var data:any;
-    var firstPage=true;
-    var pageNo=1;
-    var totalPages=1;
-
-    // get the paginated Copilot Seat allocation data
-    do{
-      var response = this.getPaginatedSeatsData(apiUrl, pageNo);
-      response.subscribe((data: any) => {
-        if(firstPage){
-          data=data;
-          firstPage=false;
-          totalPages=data.total_pages;
-        }
-        else{
-          data.seats=data.seats.concat(data.seats);
-        }
-      });
-      pageNo=pageNo+1;
-    }while(pageNo < totalPages);
-
-    return data;
-  }
-
-  getPaginatedSeatsData(apiUrl:any, pageNo:any): Observable<any> {
-    const token = environment.token; 
-
-    const headers = new HttpHeaders({
-      'Accept': 'application/vnd.github+json',
-      'Authorization': `Bearer ${token}`,
-      'X-GitHub-Api-Version': '2022-11-28'
-    });
-
-    return this.http.get(apiUrl+"?page="+pageNo, { headers });
-
-  }
-
 }

src/environments/environment.ts

@@ -7,8 +7,8 @@ export const environment = {
   orgName: "Contoso",
   token:"<<your token>>",
   ghBaseUrl:"https://api.github.com/orgs",
-  copilotUsageApiUrl:"/copilot/usage",
-  copilotSeatApiUrl:"/copilot/billing/seats"
+  copilotUsageApiUrl:"copilot/usage",
+  copilotSeatApiUrl:"copilot/billing/seats"
 };
 
 /*