Update dependencies and refactor usage report handling for consistency

austenstone · austenstone · commit 89f7d056a996 · 2025-06-03T09:02:55.000-04:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "@angular/platform-browser": "^17.2.4",
     "@angular/platform-browser-dynamic": "^17.2.4",
     "@angular/router": "^17.2.4",
-    "github-usage-report": "^1.5.0",
+    "github-usage-report": "3.0",
     "highcharts": "^11.2.0",
     "highcharts-angular": "^4.0.0",
     "jspdf": "^2.5.1",
@@ -50,4 +50,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~5.3.3"
   }
-}
+}
diff --git a/src/app/components/usage/actions/charts/chart-bar-top-time/chart-bar-top-time.component.ts b/src/app/components/usage/actions/charts/chart-bar-top-time/chart-bar-top-time.component.ts
@@ -57,16 +57,16 @@ export class ChartBarTopTimeComponent implements OnChanges {
   }
 
   ngOnChanges() {
-    this.data = this.data.filter((line) => line.unitType === 'minute');
+    this.data = this.data.filter((line) => line.unitType === 'minutes');
     this.options.series = [{
       type: 'bar',
       name: 'Usage',
       data: this.data.reduce((acc, line) => {
-        const existingItem = acc.find((a) => a.name === line.repositorySlug);
+        const existingItem = acc.find((a) => a.name === line.repositoryName);
         if (existingItem) {
           existingItem.y += line.value;
         } else {
-          acc.push({ name: line.repositorySlug, y: line.value });
+          acc.push({ name: line.repositoryName, y: line.value });
         }
         return acc;
       }, [] as { name: string, y: number }[]).sort((a, b) => b.y - a.y).slice(0, 10)
diff --git a/src/app/components/usage/actions/charts/chart-line-usage-daily/chart-line-usage-daily.component.ts b/src/app/components/usage/actions/charts/chart-line-usage-daily/chart-line-usage-daily.component.ts
@@ -71,7 +71,7 @@ export class ChartLineUsageDailyComponent implements OnChanges {
         let name = 'Total';
         let timeKey = 'total';
         if (this.timeType === 'run') {
-          timeKey = `${line.actionsWorkflow}${line.date}${index}`;
+          timeKey = `${line.workflowName}${line.date}${index}`;
         } else if (this.timeType === 'daily') {
           timeKey = line.date.toISOString().split('T')[0];
         } else if (this.timeType === 'weekly') {
@@ -90,9 +90,9 @@ export class ChartLineUsageDailyComponent implements OnChanges {
         } else if (this.chartType === 'user') {
           name = line.username;
         } else if (this.chartType === 'repo') {
-          name = line.repositorySlug;
+          name = line.repositoryName;
         } else if (this.chartType === 'workflow') {
-          name = line.actionsWorkflow;
+          name = line.workflowName;
         } else if (this.chartType === 'total') {
           name = 'total';
         }
diff --git a/src/app/components/usage/actions/charts/chart-pie-sku/chart-pie-sku.component.ts b/src/app/components/usage/actions/charts/chart-pie-sku/chart-pie-sku.component.ts
@@ -45,7 +45,7 @@ export class ChartPieSkuComponent implements OnChanges {
   }
 
   ngOnChanges() {
-    this.data = this.data.filter((line) => line.unitType === 'minute');
+    this.data = this.data.filter((line) => line.unitType === 'minutes');
     this.options.series = [{
       type: 'pie', // Add the type property
       name: 'Usage',
diff --git a/src/app/components/usage/actions/charts/chart-pie-user/chart-pie-user.component.ts b/src/app/components/usage/actions/charts/chart-pie-user/chart-pie-user.component.ts
@@ -41,7 +41,7 @@ export class ChartPieUserComponent implements OnChanges {
   }
 
   ngOnChanges() {
-    this.data = this.data.filter((line) => line.unitType === 'minute');
+    this.data = this.data.filter((line) => line.unitType === 'minutes');
     this.options.series = [{
       type: 'pie',
       name: 'Usage',
diff --git a/src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.ts b/src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.ts
@@ -75,9 +75,9 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
     usageItems = this.data.reduce((acc, line) => {
       const item = acc.find(a => {
         if (this.tableType === 'workflow') {
-          return a.workflow === line.actionsWorkflow
+          return a.workflow === line.workflowName
         } else if (this.tableType === 'repo') {
-          return a.repo === line.repositorySlug;
+          return a.repo === line.repositoryName;
         } else if (this.tableType === 'sku') {
           return a.sku === this.usageReportService.formatSku(line.sku);
         } else if (this.tableType === 'user') {
@@ -128,8 +128,8 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
         item.runs++;
       } else {
         acc.push({
-          workflow: line.actionsWorkflow,
-          repo: line.repositorySlug,
+          workflow: line.workflowName,
+          repo: line.repositoryName,
           total: line.quantity,
           cost: line.quantity * line.pricePerUnit,
           runs: 1,
diff --git a/src/app/components/usage/codespaces/table-codespaces-usage/table-codespaces-usage.component.ts b/src/app/components/usage/codespaces/table-codespaces-usage/table-codespaces-usage.component.ts
@@ -54,7 +54,7 @@ export class TableCodespacesUsageComponent implements OnChanges, AfterViewInit {
         if (this.tableType === 'sku') {
           return a.sku === line.sku;
         } else if (this.tableType === 'repo') {
-          return a.repositorySlug === line.repositorySlug;
+          return a.repositorySlug === line.repositoryName;
         } else if (this.tableType === 'user') {
           return a.username === line.username;
         }
@@ -84,15 +84,15 @@ export class TableCodespacesUsageComponent implements OnChanges, AfterViewInit {
         item.runs++;
       } else {
         acc.push({
-          owner: line.owner,
+          owner: line.organization,
           total: line.quantity,
           cost: line.quantity * line.pricePerUnit,
           runs: 1,
           pricePerUnit: line.pricePerUnit || 0,
           [month]: line.value,
           sku: line.sku,
           unitType: line.unitType,
-          repositorySlug: line.repositorySlug,
+          repositorySlug: line.repositoryName,
           username: line.username
         });
       }
diff --git a/src/app/components/usage/copilot/table-workflow-usage/table-copilot-usage.component.ts b/src/app/components/usage/copilot/table-workflow-usage/table-copilot-usage.component.ts
@@ -48,7 +48,7 @@ export class TableCopilotUsageComponent implements OnChanges, AfterViewInit {
     usageItems = this.data.reduce((acc, line) => {
       const item = acc.find(a => {
         if (this.tableType === 'owner') {
-          return a.owner === line.owner;
+          return a.owner === line.organization;
         }
         return false;
       });
@@ -76,7 +76,7 @@ export class TableCopilotUsageComponent implements OnChanges, AfterViewInit {
         item.runs++;
       } else {
         acc.push({
-          owner: line.owner,
+          owner: line.organization,
           total: line.quantity,
           cost: line.quantity * line.pricePerUnit,
           runs: 1,
diff --git a/src/app/components/usage/shared-storage/charts/line-usage-time/line-usage-time.component.ts b/src/app/components/usage/shared-storage/charts/line-usage-time/line-usage-time.component.ts
@@ -79,14 +79,14 @@ export class LineUsageTimeComponent implements OnChanges {
       (this.options.series as any) = this.data.reduce(
         (acc, line) => {
           gbs += line.value;
-          if (acc.find(a => a.name === line.repositorySlug)) {
-            const existing = acc.find(a => a.name === line.repositorySlug);
+          if (acc.find(a => a.name === line.repositoryName)) {
+            const existing = acc.find(a => a.name === line.repositoryName);
             if (existing && line.value !== 0) {
               existing.data.push([line.date.getTime(), line.value]);
             }
           } else {
             acc.push({
-              name: line.repositorySlug,
+              name: line.repositoryName,
               data: [
                 [line.date.getTime(), line.value]
               ]
diff --git a/src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.ts b/src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.ts
@@ -40,7 +40,7 @@ export class TableSharedStorageComponent implements OnChanges, AfterViewInit {
   ngOnChanges() {
     this.initializeColumns();
     const workflowUsage = this.data.reduce((acc, line) => {
-      const workflowEntry = acc.find(a => a.repo === line.repositorySlug);
+      const workflowEntry = acc.find(a => a.repo === line.repositoryName);
       const date = line.date;
       const month: string = date.toLocaleString('default', { month: 'short' });
       const cost = line.quantity * line.pricePerUnit;
@@ -67,7 +67,7 @@ export class TableSharedStorageComponent implements OnChanges, AfterViewInit {
         workflowEntry.costPerDay = cost;
       } else {
         acc.push({
-          repo: line.repositorySlug,
+          repo: line.repositoryName,
           total: line.quantity,
           count: 1,
           totalCost: cost,
diff --git a/src/app/components/usage/usage.component.ts b/src/app/components/usage/usage.component.ts
@@ -1,6 +1,6 @@
 import { OnInit, ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { UsageReport } from 'github-usage-report/types';
+import { UsageReport } from 'github-usage-report/src/types';
 import { Observable, Subscription, debounceTime, map, startWith } from 'rxjs';
 import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.service';
 import { DialogBillingNavigateComponent } from './dialog-billing-navigate';
@@ -69,16 +69,16 @@ export class UsageComponent implements OnInit, OnDestroy {
     );
 
     this.subscriptions.push(
-      this.usageReportService.getUsageFilteredByProduct('Actions').subscribe((usageLines) => {
+      this.usageReportService.getUsageFilteredByProduct('actions').subscribe((usageLines) => {
         this.usageLines.actions = usageLines;
       }),
-      this.usageReportService.getUsageFilteredByProduct('Shared Storage').subscribe((usageLines) => {
+      this.usageReportService.getUsageFilteredByProduct('git_lfs').subscribe((usageLines) => {
         this.usageLines.sharedStorage = usageLines;
       }),
-      this.usageReportService.getUsageFilteredByProduct('Copilot').subscribe((usageLines) => {
+      this.usageReportService.getUsageFilteredByProduct('copilot').subscribe((usageLines) => {
         this.usageLines.copilot = usageLines;
       }),
-      this.usageReportService.getUsageFilteredByProduct('Codespaces').subscribe((usageLines) => {
+      this.usageReportService.getUsageFilteredByProduct('codespaces').subscribe((usageLines) => {
         this.usageLines.codespaces = usageLines;
       }),
       this.usageReportService.getWorkflowsFiltered().subscribe((workflows) => {
diff --git a/src/app/usage-report.service.ts b/src/app/usage-report.service.ts
@@ -1,64 +1,16 @@
 import { TitleCasePipe } from '@angular/common';
 import { Injectable } from '@angular/core';
-import { UsageReport, UsageReportLine } from 'github-usage-report/types';
+import { readGithubUsageReport, UsageReport, UsageReportLine } from 'github-usage-report';
 import { BehaviorSubject, Observable, map } from 'rxjs';
 
-const readGithubUsageReport = async (data: string, cb?: (usageReport: UsageReport, percent: number) => void): Promise<UsageReport> => {
-  let percent = 0;
-  let total = 0;
-  let index = 0;
-  const usageReport: UsageReport = {
-    days: 0,
-    startDate: new Date(),
-    endDate: new Date(),
-    lines: [],
-  };
-
-  const lines = data.split('\n');
-  total = lines.length;
-  for (const line of lines) {
-    if (index == 0) {
-      index++;
-      continue;
-    }
-    const csv = line.split(',');
-    const data: UsageReportLine = {
-      date: new Date(Date.parse(csv[0])),
-      product: csv[1],
-      sku: csv[2],
-      quantity: Number(csv[3]),
-      unitType: csv[4],
-      pricePerUnit: Number(csv[5]),
-      multiplier: Number(csv[6]),
-      owner: csv[7],
-      repositorySlug: csv[8],
-      username: csv[9],
-      actionsWorkflow: csv[10] || 'deleted',
-      notes: csv[11],
-    };
-    if (data.product != null) {
-      if (cb) {
-        await cb(usageReport, percent);
-      }
-      usageReport.lines.push(data);
-    }
-    index++;
-    percent = Math.round((index / (total - 1)) * 100);
-  }
-  usageReport.startDate = usageReport.lines[0].date;
-  usageReport.endDate = usageReport.lines[usageReport.lines.length - 1].date;
-  usageReport.days = (usageReport.endDate.getTime() - usageReport.startDate.getTime()) / (1000 * 60 * 60 * 24);
-  return Promise.resolve(usageReport)
-};
-
 interface Filter {
   startDate: Date;
   endDate: Date;
   workflow: string;
   sku: string;
 }
 
-type Product = 'Shared Storage' | 'Packages' | 'Copilot' | 'Actions' | 'Codespaces';
+type Product = 'git_lfs' | 'packages' | 'copilot' | 'actions' | 'codespaces';
 
 export interface CustomUsageReportLine extends UsageReportLine {
   value: number;
@@ -184,7 +136,8 @@ export class UsageReportService {
 
   async setUsageReportData(usageReportData: string, cb?: (usageReport: CustomUsageReport, percent: number) => void): Promise<CustomUsageReport> {
     this.usageReportData = usageReportData;
-    this.usageReport = await readGithubUsageReport(this.usageReportData, cb as any) as CustomUsageReport;
+    this.usageReport = await readGithubUsageReport(this.usageReportData) as CustomUsageReport;
+    cb?.(this.usageReport, 100);
     this.filters.startDate = this.usageReport.startDate;
     this.filters.endDate = this.usageReport.endDate;
     this.owners = [];
@@ -194,14 +147,14 @@ export class UsageReportService {
     this.products = [];
     this.usernames = [];
     this.usageReport.lines.forEach(line => {
-      if (!this.owners.includes(line.owner)) {
-        this.owners.push(line.owner);
+      if (!this.owners.includes(line.organization)) {
+        this.owners.push(line.organization);
       }
-      if (!this.repositories.includes(line.repositorySlug)) {
-        this.repositories.push(line.repositorySlug);
+      if (!this.repositories.includes(line.repositoryName)) {
+        this.repositories.push(line.repositoryName);
       }
-      if (!this.workflows.includes(line.actionsWorkflow)) {
-        this.workflows.push(line.actionsWorkflow);
+      if (!this.workflows.includes(line.workflowName)) {
+        this.workflows.push(line.workflowName);
       }
       if (!this.skus.includes(line.sku)) {
         this.skus.push(line.sku);
@@ -214,6 +167,7 @@ export class UsageReportService {
       }
     });
     this.setValueType(this.valueType.value);
+    console.log('Usage Report Loaded:', this.usageReport);
     return this.usageReport;
   }
 
@@ -229,7 +183,7 @@ export class UsageReportService {
       filtered = filtered.filter(line => line.sku === this.filters.sku);
     }
     if (this.filters.workflow) {
-      filtered = filtered.filter(line => line.actionsWorkflow === this.filters.workflow);
+      filtered = filtered.filter(line => line.workflowName === this.filters.workflow);
     }
     if (this.filters.startDate && this.filters.endDate) {
       filtered = filtered.filter(line => {
@@ -251,19 +205,19 @@ export class UsageReportService {
   }
 
   getWorkflowsFiltered(): Observable<string[]> {
-    return this.getUsageFilteredByProduct('Actions').pipe(
-      map(lines => lines.map(line => line.actionsWorkflow).filter((workflow, index, self) => self.indexOf(workflow) === index)),
+    return this.getUsageFilteredByProduct('actions').pipe(
+      map(lines => lines.map(line => line.workflowName).filter((workflow, index, self) => self.indexOf(workflow) === index)),
     )
   }
 
   getActionsTotalMinutes(): Observable<number> {
-    return this.getUsageFilteredByProduct('Actions').pipe(
+    return this.getUsageFilteredByProduct('actions').pipe(
       map(lines => lines.reduce((total, line) => total + line.quantity, 0)),
     )
   }
 
   getActionsTotalCost(): Observable<number> {
-    return this.getUsageFilteredByProduct('Actions').pipe(
+    return this.getUsageFilteredByProduct('actions').pipe(
       map(lines => lines.reduce((total, line) => total + line.pricePerUnit, 0))
     )
   }

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ export class ChartPieSkuComponent implements OnChanges {`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`ngOnChanges() {`
`48`		`- this.data = this.data.filter((line) => line.unitType === 'minute');`
	`48`	`+ this.data = this.data.filter((line) => line.unitType === 'minutes');`
`49`	`49`	`this.options.series = [{`
`50`	`50`	`type: 'pie', // Add the type property`
`51`	`51`	`name: 'Usage',`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ export class ChartPieUserComponent implements OnChanges {`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`ngOnChanges() {`
`44`		`- this.data = this.data.filter((line) => line.unitType === 'minute');`
	`44`	`+ this.data = this.data.filter((line) => line.unitType === 'minutes');`
`45`	`45`	`this.options.series = [{`
`46`	`46`	`type: 'pie',`
`47`	`47`	`name: 'Usage',`