feat: show changes summary on package revisions table (#37)

This change adds two new columns to the Package Revisions Table which shows the total number of resources and the number of resources added, updated, and removed in each revision.

plugins/cad/src/components/PackageRevisionPage/PackageRevisionPage.tsx

@@ -68,6 +68,7 @@ import {
 } from '../../utils/packageRevision';
 import {
   getPackageResourcesFromResourcesMap,
+  getPackageRevisionResources,
   getPackageRevisionResourcesResource,
 } from '../../utils/packageRevisionResources';
 import {
@@ -83,7 +84,10 @@ import {
   PackageRevisionResourcesTable,
   ResourcesTableMode,
 } from './components/PackageRevisionResourcesTable';
-import { PackageRevisionsTable } from './components/PackageRevisionsTable';
+import {
+  PackageRevisionsTable,
+  RevisionSummary,
+} from './components/PackageRevisionsTable';
 
 export enum PackageRevisionPageMode {
   EDIT = 'edit',
@@ -126,7 +130,8 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
   const [repositorySummary, setRepositorySummary] =
     useState<RepositorySummary>();
   const [packageRevision, setPackageRevision] = useState<PackageRevision>();
-  const [packageRevisions, setPackageRevisions] = useState<PackageRevision[]>();
+  const [revisionSummaries, setRevisionSummaries] =
+    useState<RevisionSummary[]>();
   const [resourcesMap, setResourcesMap] = useState<PackageRevisionResourcesMap>(
     {},
   );
@@ -152,12 +157,15 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
 
   const loadPackageRevision = async (): Promise<void> => {
     const asyncPackageRevisions = api.listPackageRevisions();
-    const asyncResources = api.getPackageRevisionResources(packageName);
+    const asyncAllPackageResources = api.listPackageRevisionResources();
+
+    const [thisPackageRevisions, { items: thisAllPacakgesResources }] =
+      await Promise.all([asyncPackageRevisions, asyncAllPackageResources]);
 
-    const [thisPackageRevisions, thisResources] = await Promise.all([
-      asyncPackageRevisions,
-      asyncResources,
-    ]);
+    const thisResources = getPackageRevisionResources(
+      thisAllPacakgesResources,
+      packageName,
+    );
 
     const thisPackageRevision = getPackageRevision(
       thisPackageRevisions,
@@ -169,7 +177,19 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
       thisPackageRevision.spec.packageName,
     ).sort(sortByPackageNameAndRevisionComparison);
 
-    setPackageRevisions(thisSortedRevisions);
+    const thisRevisionSummaries = thisSortedRevisions.map(revision => {
+      const revisionResourcesMap = getPackageRevisionResources(
+        thisAllPacakgesResources,
+        revision.metadata.name,
+      ).spec.resources;
+
+      const resources =
+        getPackageResourcesFromResourcesMap(revisionResourcesMap);
+
+      return { revision, resources };
+    });
+
+    setRevisionSummaries(thisRevisionSummaries);
     setPackageRevision(thisPackageRevision);
     setResourcesMap(thisResources.spec.resources);
 
@@ -304,13 +324,16 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
     return <Alert severity="error">{error.message}</Alert>;
   }
 
-  if (!repositorySummary || !packageRevision || !packageRevisions) {
+  if (!repositorySummary || !packageRevision || !revisionSummaries) {
     return <Alert severity="error">Unexpected undefined value</Alert>;
   }
 
   const repository = repositorySummary.repository;
   const packageDescriptor = getPackageDescriptor(repository);
   const packageRevisionTitle = getPackageRevisionTitle(packageRevision);
+  const packageRevisions = revisionSummaries.map(
+    revisionSummary => revisionSummary.revision,
+  );
 
   const rejectProposedPackage = async (): Promise<void> => {
     setUserInitiatedApiRequest(true);
@@ -831,7 +854,7 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
             content: (
               <PackageRevisionsTable
                 repository={repositorySummary.repository}
-                revisions={packageRevisions ?? []}
+                revisions={revisionSummaries ?? []}
               />
             ),
           },

plugins/cad/src/components/PackageRevisionPage/components/PackageRevisionsTable.tsx

@@ -27,12 +27,21 @@ import {
 } from '../../../types/PackageRevision';
 import { Repository } from '../../../types/Repository';
 import { formatCreationTimestamp } from '../../../utils/formatDate';
-import { sortByPackageNameAndRevisionComparison } from '../../../utils/packageRevision';
+import {
+  diffPackageResources,
+  PackageResource,
+  ResourceDiffStatus,
+} from '../../../utils/packageRevisionResources';
 import { PackageIcon } from '../../Controls';
 
+export type RevisionSummary = {
+  revision: PackageRevision;
+  resources: PackageResource[];
+};
+
 type PackageRevisionsTableProps = {
   repository: Repository;
-  revisions: PackageRevision[];
+  revisions: RevisionSummary[];
 };
 
 type PackageRevisionRow = {
@@ -41,6 +50,8 @@ type PackageRevisionRow = {
   revision: string;
   packageName: string;
   lifecycle: PackageRevisionLifecycle;
+  resourcesCount: number;
+  changesSummary: string;
   created: string;
 };
 
@@ -83,33 +94,77 @@ const getTableColumns = (
     },
     { title: 'Revision', field: 'revision' },
     { title: 'Lifecycle', field: 'lifecycle' },
+    { title: 'Resources', field: 'resourcesCount' },
+    { title: 'Changes Summary', field: 'changesSummary' },
     { title: 'Created', field: 'created' },
   ];
 
   return columns;
 };
 
-const mapToPackageRevisionRow = (
-  onePackage: PackageRevision,
-): PackageRevisionRow => ({
-  id: onePackage.metadata.name,
-  name: onePackage.metadata.name,
-  packageName: onePackage.spec.packageName,
-  revision: onePackage.spec.revision,
-  lifecycle: onePackage.spec.lifecycle,
-  created: formatCreationTimestamp(onePackage.metadata.creationTimestamp, true),
-});
+const getResourcesChangesSummary = (
+  summary: RevisionSummary,
+  prevSummary?: RevisionSummary,
+): string => {
+  const getResourcesChangeText = (count: number, change: string): string => {
+    return `${count} ${change}`;
+  };
+
+  if (!prevSummary) {
+    return `Base revision`;
+  }
+
+  const resourcesDiff = diffPackageResources(
+    prevSummary.resources,
+    summary.resources,
+  );
+  const findResourceCount = (status: ResourceDiffStatus): number => {
+    return resourcesDiff.filter(diff => diff.diffStatus === status).length;
+  };
+
+  const allChanges: string[] = [];
+  const added = findResourceCount(ResourceDiffStatus.ADDED);
+  const updated = findResourceCount(ResourceDiffStatus.UPDATED);
+  const removed = findResourceCount(ResourceDiffStatus.REMOVED);
+
+  if (added > 0) {
+    allChanges.push(getResourcesChangeText(added, 'Added'));
+  }
+  if (updated > 0) {
+    allChanges.push(getResourcesChangeText(updated, 'Updated'));
+  }
+  if (removed > 0) {
+    allChanges.push(getResourcesChangeText(removed, 'Removed'));
+  }
+
+  const changeSummary =
+    allChanges.length > 0 ? allChanges.join(', ') : 'no changes';
 
-const mapPackageRevisionsToRows = (
-  packageRevisions: PackageRevision[],
-): PackageRevisionRow[] => {
-  packageRevisions.sort(sortByPackageNameAndRevisionComparison);
+  return changeSummary;
+};
 
-  const rows: PackageRevisionRow[] = packageRevisions.map(
-    mapToPackageRevisionRow,
+const mapToPackageRevisionRow = (
+  summary: RevisionSummary,
+  index: number,
+  allSummaries: RevisionSummary[],
+): PackageRevisionRow => {
+  const revision = summary.revision;
+  const previousSummary = allSummaries[index + 1];
+  const creationTimestamp = formatCreationTimestamp(
+    revision.metadata.creationTimestamp,
+    true,
   );
 
-  return rows;
+  return {
+    id: revision.metadata.name,
+    name: revision.metadata.name,
+    packageName: revision.spec.packageName,
+    revision: revision.spec.revision,
+    lifecycle: revision.spec.lifecycle,
+    created: creationTimestamp,
+    resourcesCount: summary.resources.length,
+    changesSummary: getResourcesChangesSummary(summary, previousSummary),
+  };
 };
 
 export const PackageRevisionsTable = ({
@@ -130,7 +185,7 @@ export const PackageRevisionsTable = ({
   };
 
   const columns = getTableColumns(classes);
-  const data = mapPackageRevisionsToRows(revisions);
+  const data = revisions.map(mapToPackageRevisionRow);
 
   return (
     <Table