feat(catalog): added created at column in the catalog page (#1257)

e2e-tests/playwright/e2e/catalog-timestamp.spec.ts

@@ -0,0 +1,33 @@
+import { expect, Page, test } from '@playwright/test';
+
+import { UIhelperPO } from '../support/pageObjects/global-obj';
+import { UIhelper } from '../utils/UIhelper';
+import { Common, setupBrowser } from '../utils/Common';
+
+let page: Page;
+test.describe('Test timestamp column on Catalog', () => {
+  let uiHelper: UIhelper;
+  let common: Common;
+
+  test.beforeAll(async ({ browser }, testInfo) => {
+    page = (await setupBrowser(browser, testInfo)).page;
+
+    common = new Common(page);
+    uiHelper = new UIhelper(page);
+
+    await common.loginAsGithubUser();
+  });
+  test('Verify `Created At` column in the Catalog Page', async () => {
+    await uiHelper.openSidebar('Catalog');
+    await uiHelper.verifyHeading('My Org Catalog');
+
+    const column = page
+      .locator(`${UIhelperPO.MuiTableHead}`)
+      .getByText('Created At', { exact: true });
+    await expect(column).toBeVisible();
+  });
+
+  test.afterAll(async () => {
+    await page.close();
+  });
+});

e2e-tests/playwright/support/pageObjects/global-obj.ts

@@ -6,6 +6,7 @@ export const waitsObjs = {
 export const UIhelperPO = {
   MuiButtonLabel: 'span[class^="MuiButton-label"]',
   MuiBoxLabel: 'div[class*="MuiBox-root"] label',
+  MuiTableHead: 'th[class*="MuiTableCell-root"]',
   MuiTableCell: 'td[class*="MuiTableCell-root"]',
   MuiTableRow: 'tr[class*="MuiTableRow-root"]',
   MuiCard: cardHeading =>

packages/app/src/components/AppBase/AppBase.tsx

@@ -1,7 +1,13 @@
 import { FlatRoutes } from '@backstage/core-app-api';
 import { AlertDisplay, OAuthRequestDialog } from '@backstage/core-components';
 import { ApiExplorerPage } from '@backstage/plugin-api-docs';
-import { CatalogEntityPage, CatalogIndexPage } from '@backstage/plugin-catalog';
+import {
+  CatalogEntityPage,
+  CatalogIndexPage,
+  CatalogTable,
+  CatalogTableRow,
+  CatalogTableColumnsFunc,
+} from '@backstage/plugin-catalog';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { CatalogImportPage } from '@backstage/plugin-catalog-import';
@@ -30,6 +36,38 @@ const AppBase = () => {
     entityTabOverrides,
     scaffolderFieldExtensions,
   } = useContext(DynamicRootContext);
+
+  const myCustomColumnsFunc: CatalogTableColumnsFunc = entityListContext => [
+    ...CatalogTable.defaultColumnsFunc(entityListContext),
+    {
+      title: 'Created At',
+      customSort: (a: CatalogTableRow, b: CatalogTableRow): any => {
+        const timestampA =
+          a.entity.metadata.annotations?.['backstage.io/createdAt'];
+        const timestampB =
+          b.entity.metadata.annotations?.['backstage.io/createdAt'];
+
+        const dateA =
+          timestampA && timestampA !== ''
+            ? new Date(timestampA).toISOString()
+            : '';
+        const dateB =
+          timestampB && timestampB !== ''
+            ? new Date(timestampB).toISOString()
+            : '';
+
+        return dateA.localeCompare(dateB);
+      },
+      render: (data: CatalogTableRow) => {
+        const date =
+          data.entity.metadata.annotations?.['backstage.io/createdAt'];
+        return !isNaN(new Date(date || '') as any)
+          ? data.entity.metadata.annotations?.['backstage.io/createdAt']
+          : '';
+      },
+    },
+  ];
+
   return (
     <AppProvider>
       <AlertDisplay />
@@ -42,7 +80,12 @@ const AppBase = () => {
                 <HomePage />
               </Route>
             )}
-            <Route path="/catalog" element={<CatalogIndexPage pagination />} />
+            <Route
+              path="/catalog"
+              element={
+                <CatalogIndexPage pagination columns={myCustomColumnsFunc} />
+              }
+            />
             <Route
               path="/catalog/:namespace/:kind/:name"
               element={<CatalogEntityPage />}

packages/backend/package.json

@@ -40,6 +40,7 @@
     "@internal/plugin-scalprum-backend": "*",
     "@janus-idp/backstage-plugin-rbac-backend": "3.0.0",
     "@janus-idp/backstage-plugin-rbac-node": "1.1.1",
+    "@janus-idp/backstage-scaffolder-backend-module-annotator": "^1.0.0",
     "@manypkg/get-packages": "1.1.3",
     "app": "*",
     "express": "4.19.2",

packages/backend/src/index.ts

@@ -88,6 +88,9 @@ backend.add(import('@backstage/plugin-search-backend-module-catalog/alpha'));
 backend.add(import('@backstage/plugin-events-backend/alpha'));
 
 backend.add(import('@janus-idp/backstage-plugin-rbac-backend'));
+backend.add(
+  import('@janus-idp/backstage-scaffolder-backend-module-annotator/alpha'),
+);
 backend.add(pluginIDProviderService);
 backend.add(rbacDynamicPluginsProvider);
 

yarn.lock

@@ -2493,7 +2493,7 @@
     yauzl "^2.10.0"
     yn "^4.0.0"
 
-"@backstage/backend-common@0.21.7", "@backstage/backend-common@^0.21.0", "@backstage/backend-common@^0.21.3", "@backstage/backend-common@^0.21.7":
+"@backstage/backend-common@0.21.7", "@backstage/backend-common@^0.21.0", "@backstage/backend-common@^0.21.3", "@backstage/backend-common@^0.21.6", "@backstage/backend-common@^0.21.7":
   version "0.21.7"
   resolved "https://registry.yarnpkg.com/@backstage/backend-common/-/backend-common-0.21.7.tgz#5ae796d8adccebc484edeeb2326464c28e14849e"
   integrity sha512-wWpnjLYxEstFnAherkfwZIlAazdu1dfJ/5KjK1aSeMZYGyRWcelegs+Dz9MLZ53e/5qtSJ5+caltNfiItda86w==
@@ -2635,7 +2635,7 @@
     lodash "^4.17.21"
     winston "^3.2.1"
 
-"@backstage/backend-dynamic-feature-service@0.2.9":
+"@backstage/backend-dynamic-feature-service@0.2.9", "@backstage/backend-dynamic-feature-service@^0.2.9":
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/@backstage/backend-dynamic-feature-service/-/backend-dynamic-feature-service-0.2.9.tgz#2f9f572a9f6f93e11160d9486e06bd2e3575a169"
   integrity sha512-6m7CrRXNSkYHzPKq2mnkCtMn3wtA3j3lcxC5H08MsZtUBVBmX5WgyBZx1mDG65m1FTk+WEeNR7DbDGNaKj9IQA==
@@ -4335,7 +4335,7 @@
     zod "^3.22.4"
     zod-to-json-schema "^3.20.4"
 
-"@backstage/plugin-scaffolder-node@0.4.3", "@backstage/plugin-scaffolder-node@^0.4.3":
+"@backstage/plugin-scaffolder-node@0.4.3", "@backstage/plugin-scaffolder-node@^0.4.2", "@backstage/plugin-scaffolder-node@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@backstage/plugin-scaffolder-node/-/plugin-scaffolder-node-0.4.3.tgz#edeeef01fb7adf445ce67611b8a7f76a59c7b038"
   integrity sha512-P51RMFfl8R0nA9nr2oFFdmMqJM8JlkSPd9A8JWe76k4/jlZNOSju2ilzMXtGGE2G393BubdDoJA+zTeVu2z9TQ==
@@ -6091,6 +6091,20 @@
   dependencies:
     "@backstage/backend-plugin-api" "^0.6.17"
 
+"@janus-idp/backstage-scaffolder-backend-module-annotator@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@janus-idp/backstage-scaffolder-backend-module-annotator/-/backstage-scaffolder-backend-module-annotator-1.0.0.tgz#9e337aedfc93fdfe7ab1bef8934f4c72dcdd6557"
+  integrity sha512-Txms/wyNVBAH4B0FbfYXRM35je8/wu18ct0A5DAlsz3NxIoq3jQ5MUi7BxyChNqmYo8aNgMs0fZ8I7qb0Ug02g==
+  dependencies:
+    "@backstage/backend-common" "^0.21.6"
+    "@backstage/backend-dynamic-feature-service" "^0.2.9"
+    "@backstage/backend-plugin-api" "^0.6.17"
+    "@backstage/catalog-model" "^1.4.5"
+    "@backstage/plugin-scaffolder-node" "^0.4.2"
+    fs-extra "^11.2.0"
+    lodash "^4.17.21"
+    yaml "^2.0.0"
+
 "@janus-idp/cli@1.8.6":
   version "1.8.6"
   resolved "https://registry.yarnpkg.com/@janus-idp/cli/-/cli-1.8.6.tgz#b271c99b2bcd6be80f2b72c32fa43bebdbbb78bf"