feat: show blueprint name on package summary table (#26)

This change adds a column to the Package Summary Table that shows the name of the upstream package.
GoogleContainerTools · Jun 7, 2022 · 7c6b61b · 7c6b61b
1 parent 8278549
commit 7c6b61b
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 8 deletions.
diff --git a/plugins/cad/src/apis/ConfigAsDataApi.ts b/plugins/cad/src/apis/ConfigAsDataApi.ts
@@ -17,7 +17,10 @@
 import { createApiRef } from '@backstage/core-plugin-api';
 import { Function } from '../types/Function';
 import { PackageRevision } from '../types/PackageRevision';
-import { PackageRevisionResources } from '../types/PackageRevisionResource';
+import {
+  ListPackageRevisionResources,
+  PackageRevisionResources,
+} from '../types/PackageRevisionResource';
 import { ListRepositories, Repository } from '../types/Repository';
 import { ListRootSyncs, RootSync } from '../types/RootSync';
 import { ListSecrets, Secret } from '../types/Secret';
@@ -67,6 +70,8 @@ export type ConfigAsDataApi = {
     packageName: string,
   ): Promise<PackageRevisionResources>;
 
+  listPackageRevisionResources(): Promise<ListPackageRevisionResources>;
+
   listCatalogFunctions(): Promise<Function[]>;
 
   listFunctions(repositoryName?: string): Promise<Function[]>;

diff --git a/plugins/cad/src/apis/PorchRestApi.ts b/plugins/cad/src/apis/PorchRestApi.ts
@@ -19,7 +19,10 @@ import { ConfigAsDataApi } from '.';
 import { Function } from '../types/Function';
 import { KubernetesStatus } from '../types/KubernetesStatus';
 import { PackageRevision } from '../types/PackageRevision';
-import { PackageRevisionResources } from '../types/PackageRevisionResource';
+import {
+  ListPackageRevisionResources,
+  PackageRevisionResources,
+} from '../types/PackageRevisionResource';
 import { ListRepositories, Repository } from '../types/Repository';
 import { ListRootSyncs, RootSync } from '../types/RootSync';
 import { ListSecrets, Secret } from '../types/Secret';
@@ -314,6 +317,14 @@ export class PorchRestAPI implements ConfigAsDataApi {
     return resourcesResponse;
   }
 
+  async listPackageRevisionResources(): Promise<ListPackageRevisionResources> {
+    const resourcesResponse = await this.cadFetch(
+      `apis/porch.kpt.dev/v1alpha1/namespaces/default/packagerevisionresources`,
+    );
+
+    return resourcesResponse;
+  }
+
   async listCatalogFunctions(): Promise<Function[]> {
     const functionCatalog: KptFunctionCatalog = await this.cadFetch(
       'v1/function-catalog',

diff --git a/plugins/cad/src/components/Links/PackageLink.tsx b/plugins/cad/src/components/Links/PackageLink.tsx
@@ -25,11 +25,13 @@ import { useLinkStyles } from './styles';
 type PackageLinkProps = {
   packageRevision: PackageRevision;
   breadcrumb?: boolean;
+  stopPropagation?: boolean;
 };
 
 export const PackageLink = ({
   packageRevision,
   breadcrumb,
+  stopPropagation,
 }: PackageLinkProps) => {
   const packageRef = useRouteRef(packageRouteRef);
 
@@ -42,6 +44,11 @@ export const PackageLink = ({
   return (
     <Link
       className={className}
+      onClick={e => {
+        if (stopPropagation) {
+          e.stopPropagation();
+        }
+      }}
       to={packageRef({ repositoryName, packageName })}
     >
       {getPackageRevisionTitle(packageRevision)}

diff --git a/plugins/cad/src/components/RepositoryPage/RepositoryPage.tsx b/plugins/cad/src/components/RepositoryPage/RepositoryPage.tsx
@@ -82,12 +82,25 @@ export const RepositoryPage = () => {
         }
 
         if (isPackageRepository(thisRepository)) {
-          const thisPackageRevisions = await api.listPackageRevisions(
-            repositoryName,
+          const allPackageRevisions = await api.listPackageRevisions();
+          const { items: allPackageRevisionResources } =
+            await api.listPackageRevisionResources();
+
+          const thisPackageRevisions = allPackageRevisions.filter(
+            revision => revision.spec.repository === repositoryName,
           );
+          const upstreamPackageRevisions = repositorySummary.upstreamRepository
+            ? allPackageRevisions.filter(
+                revision =>
+                  revision.spec.repository ===
+                  repositorySummary.upstreamRepository?.metadata.name,
+              )
+            : [];
 
           const thisPackageSummaries = getPackageSummaries(
             thisPackageRevisions,
+            allPackageRevisionResources,
+            upstreamPackageRevisions,
             thisRepository,
           );
           setPackageSummaries(thisPackageSummaries);

diff --git a/plugins/cad/src/components/RepositoryPage/components/PackageSummaryTable.tsx b/plugins/cad/src/components/RepositoryPage/components/PackageSummaryTable.tsx
@@ -31,6 +31,7 @@ import { formatCreationTimestamp } from '../../../utils/formatDate';
 import { PackageSummary } from '../../../utils/packageSummary';
 import { isDeploymentRepository } from '../../../utils/repository';
 import { PackageIcon } from '../../Controls';
+import { PackageLink } from '../../Links';
 import { SyncStatusVisual } from './SyncStatusVisual';
 
 type PackageRevisionsTableProps = {
@@ -58,6 +59,8 @@ type PackageSummaryRow = {
   syncStatus?: SyncStatus | null;
   lifecycle: PackageRevisionLifecycle;
   created: string;
+  upstreamPackageDisplayName?: string;
+  upstreamPackageRevision?: PackageRevision;
   navigate: () => void;
   unpublished?: UnpublishedPackageRevision;
 };
@@ -95,9 +98,27 @@ const renderStatusColumn = (
   return <Fragment />;
 };
 
+const renderBlueprintColumn = (row: PackageSummaryRow): JSX.Element => {
+  if (row.upstreamPackageRevision) {
+    return (
+      <PackageLink
+        packageRevision={row.upstreamPackageRevision}
+        stopPropagation
+      />
+    );
+  }
+
+  return <Fragment>{row.upstreamPackageDisplayName || ''}</Fragment>;
+};
+
+const renderSyncColumn = (row: PackageSummaryRow): JSX.Element => (
+  <SyncStatusVisual syncStatus={row.syncStatus} />
+);
+
 const getTableColumns = (
   includeSyncsColumn: boolean,
   renderStatus: RenderColumn,
+  renderBlueprint: RenderColumn,
   renderSync: RenderColumn,
 ): TableColumn<PackageSummaryRow>[] => {
   const columns: TableColumn<PackageSummaryRow>[] = [
@@ -109,6 +130,7 @@ const getTableColumns = (
     { title: 'Name', field: 'packageName' },
     { title: 'Revision', field: 'revision' },
     { title: 'Lifecycle', field: 'lifecycle' },
+    { title: 'Blueprint', render: renderBlueprint },
     { title: 'Created', field: 'created' },
   ];
 
@@ -176,6 +198,10 @@ const mapToPackageSummaryRow = (
     syncStatus: getRootSyncStatus(packageSummary),
     created: formatCreationTimestamp(onePackage.metadata.creationTimestamp),
     navigate: () => navigateToPackageRevision(onePackage),
+    upstreamPackageDisplayName: packageSummary.upstreamPackageName
+      ? `${packageSummary.upstreamPackageName} ${packageSummary.upstreamPackageRevision}`
+      : undefined,
+    upstreamPackageRevision: packageSummary.upstreamRevision,
     unpublished: mapToUnpublishedRevision(
       packageSummary,
       navigateToPackageRevision,
@@ -213,12 +239,14 @@ export const PackageRevisionsTable = ({
 
   const renderStatus = (row: PackageSummaryRow): JSX.Element =>
     renderStatusColumn(row, classes);
-  const renderSync = (row: PackageSummaryRow): JSX.Element => (
-    <SyncStatusVisual syncStatus={row.syncStatus} />
-  );
 
   const includeSyncsColumn = isDeploymentRepository(repository);
-  const columns = getTableColumns(includeSyncsColumn, renderStatus, renderSync);
+  const columns = getTableColumns(
+    includeSyncsColumn,
+    renderStatus,
+    renderBlueprintColumn,
+    renderSyncColumn,
+  );
 
   const data = mapPackageRevisionsToRows(packages, navigateToPackageRevision);
 

diff --git a/plugins/cad/src/types/PackageRevisionResource.ts b/plugins/cad/src/types/PackageRevisionResource.ts
@@ -14,6 +14,12 @@
  * limitations under the License.
  */
 
+export type ListPackageRevisionResources = {
+  kind: string;
+  apiVersion: string;
+  items: PackageRevisionResources[];
+};
+
 export type PackageRevisionResources = {
   apiVersion: string;
   kind: string;

diff --git a/plugins/cad/src/utils/packageRevisionResources.ts b/plugins/cad/src/utils/packageRevisionResources.ts
@@ -36,6 +36,15 @@ export type PackageResource = {
   resourceIndex: number;
 };
 
+export const getPackageRevisionResources = (
+  packageRevisionResources: PackageRevisionResources[],
+  packageRevisionName: string,
+): PackageRevisionResources => {
+  return packageRevisionResources.find(
+    r => r.metadata.name === packageRevisionName,
+  ) as PackageRevisionResources;
+};
+
 export const getPackageRevisionResourcesResource = (
   fullPackageName: string,
   resourcesMap: PackageRevisionResourcesMap,

diff --git a/plugins/cad/src/utils/packageSummary.ts b/plugins/cad/src/utils/packageSummary.ts
@@ -14,8 +14,11 @@
  * limitations under the License.
  */
 
+import { load } from 'js-yaml';
 import { groupBy } from 'lodash';
+import { Kptfile } from '../types/Kptfile';
 import { PackageRevision } from '../types/PackageRevision';
+import { PackageRevisionResources } from '../types/PackageRevisionResource';
 import { Repository } from '../types/Repository';
 import { RootSync } from '../types/RootSync';
 import { findRootSyncForPackage } from './configSync';
@@ -25,17 +28,26 @@ import {
   isNotAPublishedRevision,
   sortByPackageNameAndRevisionComparison,
 } from './packageRevision';
+import {
+  getPackageResourcesFromResourcesMap,
+  getPackageRevisionResources,
+} from './packageRevisionResources';
 
 export type PackageSummary = {
   repository: Repository;
   latestRevision: PackageRevision;
   latestPublishedRevision?: PackageRevision;
   unpublishedRevision?: PackageRevision;
+  upstreamRevision?: PackageRevision;
+  upstreamPackageName?: string;
+  upstreamPackageRevision?: string;
   sync?: RootSync;
 };
 
 export const getPackageSummaries = (
   packageRevisions: PackageRevision[],
+  packageRevisionResources: PackageRevisionResources[],
+  upstreamRevisions: PackageRevision[],
   repository: Repository,
 ): PackageSummary[] => {
   const latestPackageRevisions = packageRevisions.filter(
@@ -72,6 +84,37 @@ export const getPackageSummaries = (
         unpublishedRevision,
       };
 
+      const useVersion = latestPublishedRevision ?? latestRevision;
+      const upstreamPackageRevisionName = useVersion.metadata.name;
+
+      const resources = getPackageRevisionResources(
+        packageRevisionResources,
+        upstreamPackageRevisionName,
+      );
+
+      const packageResources = getPackageResourcesFromResourcesMap(
+        resources.spec.resources,
+      );
+      const kptfileResource = packageResources.find(r => r.kind === 'Kptfile');
+
+      if (kptfileResource) {
+        const kptfile = load(kptfileResource.yaml) as Kptfile;
+
+        if (kptfile.upstream?.git?.ref) {
+          const [upstreamPackageName, upstreamPackageRevision] =
+            kptfile.upstream.git.ref.split('/');
+
+          thisPackageSummary.upstreamPackageName = upstreamPackageName;
+          thisPackageSummary.upstreamPackageRevision = upstreamPackageRevision;
+
+          thisPackageSummary.upstreamRevision = upstreamRevisions.find(
+            r =>
+              r.spec.packageName === upstreamPackageName &&
+              r.spec.revision === upstreamPackageRevision,
+          );
+        }
+      }
+
       return thisPackageSummary;
     },
   );