{file == null ?
:
{file.name}
}
{file == null ? null :
}
+
+ {data !== null && (
+
+
+
+
+ )}
+
diff --git a/src/Table.js b/src/Table.js
index 282be89..36929a9 100644
--- a/src/Table.js
+++ b/src/Table.js
@@ -1,7 +1,7 @@
import {useState} from 'react';
-import { Table, TableSortLabel, TableHead, TableRow, TableCell, TableBody, TableContainer } from '@material-ui/core';
+import { Table, TableSortLabel, TableHead, TableRow, TableCell, TableBody, TableContainer } from '@mui/material';
-const FormattedTable = ({data, headers}) => {
+const FormattedTable = ({data, headers, sortConfig}) => {
const [orderBy, setOrderBy] = useState(headers[0]);
const [order, setOrder] = useState('asc');
@@ -14,18 +14,62 @@ const FormattedTable = ({data, headers}) => {
setOrderBy(column);
};
- const idx = headers.indexOf(orderBy);
- const sortedData = Object.entries(data).sort((a, b) => {
- let aValue = a[idx];
- let bValue = b[idx];
- if (typeof aValue !== "string") {
- return order === 'asc' ? aValue - bValue : bValue - aValue;
+ const getSortValue = (row, column) => {
+ const columnIndex = headers.indexOf(column);
+ if (columnIndex === 0) {
+ return row[0]; // First column is always the key
}
- return order === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
- });
+ return row[1][columnIndex - 1]; // Other columns are in the array
+ };
+
+ const sortData = (a, b) => {
+ const aValue = getSortValue(a, orderBy);
+ const bValue = getSortValue(b, orderBy);
+
+ // Get the sort type for this column
+ const sortType = sortConfig[orderBy] || 'string';
+
+ if (sortType === 'number') {
+ const aNum = parseFloat(aValue) || 0;
+ const bNum = parseFloat(bValue) || 0;
+ return order === 'asc' ? aNum - bNum : bNum - aNum;
+ } else {
+ // Default to string sorting
+ return order === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+ }
+ };
+
+ const sortedData = Object.entries(data).sort(sortData);
+
+ // Calculate totals for numeric columns
+ const calculateTotals = () => {
+ const totals = {};
+ headers.forEach((header, index) => {
+ if (index === 0) return; // Skip the first column (names/keys)
+
+ const values = sortedData.map(([key, value]) => {
+ if (Array.isArray(value)) {
+ return value[index - 1];
+ }
+ return value;
+ });
+
+ // Check if this column contains numeric data
+ const numericValues = values.filter(v => !isNaN(parseFloat(v)));
+ if (numericValues.length > 0) {
+ totals[index] = numericValues.reduce((sum, val) => sum + parseFloat(val), 0);
+ }
+ });
+ return totals;
+ };
+
+ const totals = calculateTotals();
+
+ // Check if this is filtered data (workflow table with filters applied)
+ const isFiltered = sortedData.length > 0 && sortedData.length < Object.keys(data).length;
return (
-
+
@@ -45,9 +89,69 @@ const FormattedTable = ({data, headers}) => {
{sortedData.map(([key, value]) => (
{key}
- {value}
+ {Array.isArray(value) ? (
+ value.map((cell, index) => (
+ {cell}
+ ))
+ ) : (
+ {value}
+ )}
))}
+ {/* Totals row */}
+
+
+ {isFiltered ? 'FILTERED TOTAL' : 'TOTAL'}
+
+ {headers.map((header, index) => {
+ if (index === 0) return null; // Skip the first column
+
+ if (totals[index] !== undefined) {
+ // Format the total based on the column type
+ if (header === 'Cost ($)') {
+ return ${totals[index].toFixed(2)};
+ } else if (header === 'Minutes') {
+ return {totals[index].toLocaleString()};
+ } else {
+ return {totals[index]};
+ }
+ } else {
+ return -;
+ }
+ })}
+
+ {/* Show overall total if data is filtered */}
+ {isFiltered && (
+
+ OVERALL TOTAL
+ {headers.map((header, index) => {
+ if (index === 0) return null; // Skip the first column
+
+ // Calculate overall total from all data
+ const allValues = Object.values(data).map(value => {
+ if (Array.isArray(value)) {
+ return value[index - 1];
+ }
+ return value;
+ });
+
+ const numericValues = allValues.filter(v => !isNaN(parseFloat(v)));
+ if (numericValues.length > 0) {
+ const overallTotal = numericValues.reduce((sum, val) => sum + parseFloat(val), 0);
+
+ if (header === 'Cost ($)') {
+ return ${overallTotal.toFixed(2)};
+ } else if (header === 'Minutes') {
+ return {overallTotal.toLocaleString()};
+ } else {
+ return {overallTotal};
+ }
+ } else {
+ return -;
+ }
+ })}
+
+ )}
diff --git a/src/Tables.js b/src/Tables.js
index eba2845..f6f40f5 100644
--- a/src/Tables.js
+++ b/src/Tables.js
@@ -1,37 +1,392 @@
import React from 'react';
import Table from './Table';
-const Tables = ({ data }) => {
- const sumByDate = data.reduce((acc, { Date, Quantity }) => {
- if (Date == null || Date == "") {
+const Tables = ({ data, selectedView }) => {
+ const [workflowFilters, setWorkflowFilters] = React.useState({
+ repository: '',
+ workflow: ''
+ });
+
+ // Helper function to get cost in dollars - use actual cost from CSV if available
+ const getCostInDollars = (row) => {
+ // If we have the actual cost from the CSV, use that
+ if (row.gross_amount && parseFloat(row.gross_amount) > 0) {
+ return parseFloat(row.gross_amount);
+ }
+ if (row.net_amount && parseFloat(row.net_amount) > 0) {
+ return parseFloat(row.net_amount);
+ }
+
+ // Fallback to calculated cost
+ const quantity = parseInt(row.quantity || 0);
+ const costPerQuantity = parseFloat(row.applied_cost_per_quantity || 0.008);
+ return (quantity * costPerQuantity).toFixed(2);
+ };
+
+ // Sum by date - handle both old and new column names
+ const sumByDate = data.reduce((acc, row) => {
+ const date = row.date || row.Date || row['Date'];
+ const quantity = row.quantity || row.Quantity || row['Quantity'] || row['Minutes'] || row.minutes;
+
+ if (date == null || date === "" || !quantity) {
+ return acc;
+ }
+
+ if (!acc[date]) {
+ acc[date] = { minutes: 0, cost: 0 };
+ }
+
+ const minutes = parseInt(quantity);
+ const cost = parseFloat(getCostInDollars(row));
+
+ acc[date].minutes += minutes;
+ acc[date].cost += cost;
+ return acc;
+ }, {});
+
+ // Sum by workflow - handle both old and new column names
+ const sumByWorkflow = data.reduce((acc, row) => {
+ // Try multiple possible column names for workflow path
+ const workflow = row.workflow_path || row['Actions Workflow'] || row['Workflow'] || row['workflow'] || row['Workflow Name'] || row['workflow_name'] || row['Workflow Path'] || row['workflow_path'];
+ const quantity = row.quantity || row.Quantity || row['Quantity'] || row['Minutes'] || row.minutes;
+ const repository = row.repository || row['Repository'] || row['repository_name'];
+
+ // Include rows even if quantity is 0, as long as there's a cost
+ const cost = parseFloat(getCostInDollars(row));
+ if (cost === 0 && (!quantity || quantity === "0")) {
+ return acc;
+ }
+
+ let workflowKey;
+ if (!workflow || workflow === "") {
+ // For GitHub Actions usage data, use the runner type as the workflow identifier
+ // This handles cases like actions_linux, actions_macos, actions_linux_2_core_arm
+ const runnerType = row.sku || row['SKU'] || row['Runner Type'] || row['runner_type'] || row['Runner'] || row.runner;
+ const actionType = row.action_type || row['Action Type'] || row['action_type'];
+
+ if (runnerType && runnerType !== 'Unknown') {
+ // Use runner type as workflow identifier
+ workflowKey = `${runnerType} (${repository || 'Unknown Repo'})`;
+ } else if (actionType && actionType !== 'Unknown') {
+ // Fallback to action type
+ workflowKey = `${actionType} (${repository || 'Unknown Repo'})`;
+ } else {
+ // Last resort - use SKU or product
+ const sku = row.sku || row['SKU'] || 'Unknown';
+ const product = row.product || row['Product'] || 'Unknown';
+ const identifier = sku !== 'Unknown' ? sku : product;
+ workflowKey = `${identifier} (${repository || 'Unknown Repo'})`;
+ }
+ } else {
+ const cleanWorkflow = workflow.replace(".github/workflows/", "");
+ workflowKey = `${cleanWorkflow} (${repository || 'Unknown Repo'})`;
+ }
+
+ if (!acc[workflowKey]) {
+ acc[workflowKey] = { minutes: 0, cost: 0, repository: repository || 'Unknown Repo' };
+ }
+
+ const minutes = parseInt(quantity) || 0;
+
+ acc[workflowKey].minutes += minutes;
+ acc[workflowKey].cost += cost;
+ return acc;
+ }, {});
+
+ // Sum by person/user - new for enterprise plan
+ const sumByPerson = data.reduce((acc, row) => {
+ const person = row.username || row['User'] || row['user'] || row['Person'] || row['person'] || row['Actor'] || row['actor'];
+ const quantity = row.quantity || row.Quantity || row['Quantity'] || row['Minutes'] || row.minutes;
+
+ // Skip rows where username is empty
+ if (!person || person === "" || !quantity) {
+ return acc;
+ }
+
+ if (!acc[person]) {
+ acc[person] = { minutes: 0, cost: 0 };
+ }
+
+ const minutes = parseInt(quantity);
+ const cost = parseFloat(getCostInDollars(row));
+
+ acc[person].minutes += minutes;
+ acc[person].cost += cost;
+ return acc;
+ }, {});
+
+ // Sum by runner type - use SKU which has actual runner info
+ const sumByRunnerType = data.reduce((acc, row) => {
+ // For GitHub Actions usage data, the runner type is often in the second column
+ // Try multiple possible column names in order of preference
+ const runnerType = row.sku || row['SKU'] || row['Runner Type'] || row['runner_type'] || row['Runner'] || row.runner || row['Action Type'] || row['action_type'] || 'Unknown';
+ const quantity = row.quantity || row.Quantity || row['Quantity'] || row['Minutes'] || row.minutes;
+
+ if (!quantity) {
return acc;
}
- if (!acc[Date]) {
- acc[Date] = 0;
+
+ if (!acc[runnerType]) {
+ acc[runnerType] = { minutes: 0, cost: 0 };
}
- acc[Date] += parseInt(Quantity);
+
+ const minutes = parseInt(quantity);
+ const cost = parseFloat(getCostInDollars(row));
+
+ acc[runnerType].minutes += minutes;
+ acc[runnerType].cost += cost;
return acc;
}, {});
- const sumByAction = data.reduce((acc, DataPoint) => {
- const possibleWorkflow = DataPoint["Actions Workflow"]
- if (possibleWorkflow == null || possibleWorkflow === "") {
+ // Sum by repository - useful for enterprise users
+ const sumByRepository = data.reduce((acc, row) => {
+ const repository = row.repository || row['Repository'] || row['repository_name'];
+ const quantity = row.quantity || row.Quantity || row['Quantity'] || row['Minutes'] || row.minutes;
+
+ if (!repository || repository === "") {
+ return acc;
+ }
+
+ // Include rows even if quantity is 0, as long as there's a cost
+ const cost = parseFloat(getCostInDollars(row));
+ if (cost === 0 && (!quantity || quantity === "0")) {
return acc;
}
- const workflow = possibleWorkflow.replace(".github/workflows/" , "");
- if (!acc[workflow]) {
- acc[workflow] = 0;
+
+ if (!acc[repository]) {
+ acc[repository] = { minutes: 0, cost: 0 };
}
- acc[workflow] += parseInt(DataPoint.Quantity);
+
+ const minutes = parseInt(quantity) || 0;
+
+ acc[repository].minutes += minutes;
+ acc[repository].cost += cost;
return acc;
}, {});
+ // Sum by action type - for GitHub Actions usage data
+ const sumByActionType = data.reduce((acc, row) => {
+ const actionType = row.action_type || row['Action Type'] || row['action_type'] || row['Actions'] || row['actions'];
+ const quantity = row.quantity || row.Quantity || row['Quantity'] || row['Minutes'] || row.minutes;
+
+ if (!actionType || actionType === "") {
+ return acc;
+ }
+
+ if (!acc[actionType]) {
+ acc[actionType] = { minutes: 0, cost: 0 };
+ }
+
+ const minutes = parseInt(quantity) || 0;
+ const cost = parseFloat(getCostInDollars(row));
+
+ acc[actionType].minutes += minutes;
+ acc[actionType].cost += cost;
+ return acc;
+ }, {});
+
+ // Debug: Log the first row to see available columns
+ if (data && data.length > 0) {
+ // Data is now working correctly - no debugging needed
+ }
+
+ // Convert data for display with separate columns
+ const formatDataForTable = (dataObj) => {
+ return Object.entries(dataObj).reduce((acc, [key, value]) => {
+ acc[key] = [value.minutes, value.cost];
+ return acc;
+ }, {});
+ };
+
+ // Convert workflow data for display with repository column
+ const formatWorkflowDataForTable = (workflowObj) => {
+ return Object.entries(workflowObj).reduce((acc, [key, value]) => {
+ // Extract workflow name and repository from the key
+ const match = key.match(/^(.+?) \((.+)\)$/);
+ const repository = match ? match[2] : 'Unknown';
+
+ // Use the full key (workflow + repository) to avoid collapsing workflows with same name
+ acc[key] = [repository, value.minutes, value.cost];
+ return acc;
+ }, {});
+ };
+
+ // Filter workflow data based on filters
+ const getFilteredWorkflowData = () => {
+ const workflowData = formatWorkflowDataForTable(sumByWorkflow);
+
+ if (!workflowFilters.repository && !workflowFilters.workflow) {
+ return workflowData;
+ }
+
+ const filteredData = Object.entries(workflowData).reduce((acc, [workflowName, values]) => {
+ const [repository] = values;
+
+ // Filter by repository
+ if (workflowFilters.repository && !repository.toLowerCase().includes(workflowFilters.repository.toLowerCase())) {
+ return acc;
+ }
+
+ // Filter by workflow name
+ if (workflowFilters.workflow && !workflowName.toLowerCase().includes(workflowFilters.workflow.toLowerCase())) {
+ return acc;
+ }
+
+ acc[workflowName] = values;
+ return acc;
+ }, {});
+
+ return filteredData;
+ };
+
+ // Get unique repositories for filter dropdown
+ const getUniqueRepositories = () => {
+ const repos = new Set();
+ Object.values(sumByWorkflow).forEach(item => {
+ if (item.repository) {
+ repos.add(item.repository);
+ }
+ });
+ return Array.from(repos).sort();
+ };
+
+ const renderFilters = () => {
+ if (selectedView === 'workflow') {
+ return (
+
+
Filters
+
+
+
+
+
+
+
+ setWorkflowFilters(prev => ({ ...prev, workflow: e.target.value }))}
+ style={{
+ padding: "8px 12px",
+ borderRadius: "4px",
+ border: "1px solid #ddd",
+ fontSize: "14px",
+ minWidth: "200px"
+ }}
+ />
+
+
+
+
Usage by Workflow
+ {renderFilters()}
+
+
+
Usage by Repository
+
+
+
Usage by Runner Type
+
+
+
Usage by Action Type
+
+
-
Sum of Action Minutes by Date
-
-
Sum of Action Minutes by Action
-
+ {renderSelectedTable()}