Summary listing component for all projects

libs/tup-components/src/projects/ProjectsCells.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Cell } from 'react-table';
 import { ProjectsRawSystem } from '@tacc/tup-hooks';
-import { Pill, SectionTableWrapper } from '@tacc/core-components';
-import { valuesIn } from 'lodash';
+import { Pill } from '@tacc/core-components';
 
 export const ProjectTitle: React.FC<{
   cell: Cell<ProjectsRawSystem, string>;
@@ -15,26 +14,19 @@ export const PrinInv: React.FC<{ cell: Cell<ProjectsRawSystem, string> }> = ({
   cell: { value },
 }) => <div>{value}</div>;
 
-
 export const ProjectSummaryAll: React.FC<{
   cell: Cell<ProjectsRawSystem>;
 }> = ({ cell: { value, row } }) => (
-  <>
+  <div>
     <Link to={`/projects/${row.original.id}`}>{value}</Link>
-      <div>{'Project Charge Code: '} {row.original.chargeCode}</div>
-      <Pill type='success'>{"Principle Investigator: " + row.original.pi.firstName + ' ' + row.original.pi.lastName}
-      </Pill><p/>
-    <SectionTableWrapper>
-      <td colSpan={2 }>{'Compute: '} 
-        <b>{row.original.allocations?.reduce((acc, e) => acc + e.computeRequested, 0) + ' SUs'}</b>
-        {" (" + row.original.allocations?.reduce((acc, e) => (((acc + e.used) /(acc+ e.computeRequested)) * 100), 0).toFixed(0) + "  % Used)"}</td>
-      <td>{'Storage: '} 
-        <b>{row.original.allocations?.reduce((acc, e) => acc + e.storageRequested, 0) + ' GBs'}</b>
-        {" (" + row.original.allocations?.reduce((acc, e) => (((acc + e.storageUsed) /(acc+ e.storageRequested)) * 100), 0).toFixed(0) + "  % Used)"}</td>
-        {"used" + row.original.allocations?.reduce((acc, e) => acc + e.storageUsed , 0)};
-        {"requested" + row.original.allocations?.reduce((acc, e) => acc + e.storageRequested , 0)};
-        {"percent" +row.original.allocations?.reduce((acc, e) => ((acc + e.storageUsed) / (acc+ e.storageRequested)) * 100, 0) }
-    </SectionTableWrapper>
-    </>  
+    <div>
+      {'Project Charge Code: '} {row.original.chargeCode}
+    </div>
+    <Pill type="success">
+      {'Principle Investigator: ' +
+        row.original.pi.firstName +
+        ' ' +
+        row.original.pi.lastName}
+    </Pill>
+  </div>
 );
-

libs/tup-components/src/projects/ProjectsSummaryListing.tsx

@@ -1,43 +1,44 @@
 import React, { useMemo } from 'react';
 import { useTable, Column } from 'react-table';
-import { LoadingSpinner, InlineMessage, SectionTableWrapper } from '@tacc/core-components';
-import { ProjectTitle, ProjectSummaryAll } from './ProjectsCells';
-import {
-  ProjectsRawSystem,
-  useProjects,
-} from '@tacc/tup-hooks';
+import { LoadingSpinner, InlineMessage } from '@tacc/core-components';
+import { ProjectSummaryAll } from './ProjectsCells';
+import { ProjectsRawSystem, useProjects } from '@tacc/tup-hooks';
 
 export const ProjectSummaryListing: React.FC = () => {
   const { data, isLoading, error } = useProjects();
+  const totalAllocations = data?.map((e) => {
+    e.totalStorageRequested = e.allocations?.reduce(
+      (acc, e) => acc + e.storageRequested,
+      0
+    );
+    e.totalStorageUsed = e.allocations?.reduce(
+      (acc, e) => acc + e.storageUsed,
+      0
+    );
+    e.totalComputeRequested = e.allocations?.reduce(
+      (acc, e) => acc + e.computeRequested,
+      0
+    );
+    e.totalComputeUsed = e.allocations?.reduce((acc, e) => acc + e.used, 0);
+    return e;
+  });
 
   const columns = useMemo<Column<ProjectsRawSystem>[]>(
     () => [
       {
         accessor: 'title',
-        Header: 'Active Projects',
-        Cell: ProjectTitle,
-        columns: [
-          {
-            accessor: 'title',
-            Header: 'Project Summary',
-            Cell: ProjectSummaryAll,
-          },
-        ],
+        Header: 'Project Summary',
+        Cell: ProjectSummaryAll,
       },
     ],
     []
   );
 
-  const {
-    getTableProps,
-    getTableBodyProps,
-    rows,
-    prepareRow,
-    headerGroups,
-  } = useTable({
-    columns,
-    data: data ?? [],
-  });
+  const { getTableProps, getTableBodyProps, rows, prepareRow, headerGroups } =
+    useTable({
+      columns,
+      data: data ?? [],
+    });
   if (isLoading) {
     return <LoadingSpinner />;
   }
@@ -47,40 +48,70 @@ export const ProjectSummaryListing: React.FC = () => {
     );
   }
   return (
-    <SectionTableWrapper>
-      <table {...getTableProps()}>
-        <thead>
-          {headerGroups.map((headerGroup) => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map((column) => {
-                return column.isVisible === true ? null : (
-                  <th {...column.getHeaderProps()}>{column.render('Header')}</th>
-                );
-              })}
-            </tr>
-          ))}
-        </thead>
-        <tbody {...getTableBodyProps()}>
-          {rows.length ? (
-            rows.map((row, idx) => {
-              prepareRow(row);
-              return (
-                <tr {...row.getRowProps()}>
-                  {row.cells.map((cell) => (
-                    <td {...cell.getCellProps()}>
-                      {cell.render('Cell')}
-                    </td>
-                  ))}
-                </tr>
-            )})
-          ) : (
-            <tr>
-              <td colSpan={5}>No active projects found.</td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </SectionTableWrapper>
+    <table {...getTableProps()}>
+      <thead>
+        {headerGroups.map((headerGroup) => (
+          <tr {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map((column) => {
+              return column.isVisible === true ? null : (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              );
+            })}
+          </tr>
+        ))}
+      </thead>
+      <tbody {...getTableBodyProps()}>
+        {rows.length ? (
+          rows.map((row, idx) => {
+            prepareRow(row);
+            return (
+              <tr {...row.getRowProps()}>
+                {row.cells.map((cell) => (
+                  <td {...cell.getCellProps()}>
+                    {cell.render('Cell')}
+                    {`Compute: ${
+                      totalAllocations
+                        ? totalAllocations[idx].totalComputeRequested
+                        : '--'
+                    } SUs `}
+
+                    {row.original.totalComputeRequested &&
+                    row.original.totalComputeUsed
+                      ? ' (' +
+                        (
+                          (row.original.totalComputeUsed /
+                            row.original.totalComputeRequested) *
+                          100
+                        ).toFixed(0) +
+                        '  % Used) '
+                      : ' (0% Used) '}
+                    {`Storage: ${
+                      totalAllocations
+                        ? totalAllocations[idx].totalStorageRequested
+                        : '--'
+                    } GBs `}
+                    {row.original.totalStorageRequested &&
+                    row.original.totalStorageUsed
+                      ? ' (' +
+                        (
+                          (row.original.totalStorageUsed /
+                            row.original.totalStorageRequested) *
+                          100
+                        ).toFixed(0) +
+                        '  % Used) '
+                      : ' (0% Used) '}
+                  </td>
+                ))}
+              </tr>
+            );
+          })
+        ) : (
+          <tr>
+            <td colSpan={5}>No active projects found.</td>
+          </tr>
+        )}
+      </tbody>
+    </table>
   );
 };
 export default ProjectSummaryListing;

libs/tup-hooks/src/index.ts

@@ -117,6 +117,10 @@ export type ProjectsRawSystem = {
   fieldId: number;
   secondaryFieldId: number;
   typeId: number;
+  totalStorageUsed?: number;
+  totalStorageRequested?: number;
+  totalComputeRequested?: number;
+  totalComputeUsed?: number;
   pi: {
     id: number;
     username: string;