Add subscription list page (opendatahub-io#6789)

* add subscription list page

* pr comments and added cypress tests

* fix data-test-id

Author: katieperry4

packages/cypress/cypress/pages/modelsAsAService.ts

@@ -540,6 +540,74 @@ class CopyApiKeyModal extends Modal {
   }
 }
 
+class SubscriptionsPage {
+  visit(): void {
+    cy.visitWithLogin('/maas/subscriptions');
+    this.wait();
+  }
+
+  private wait(): void {
+    cy.findByTestId('app-page-title').should('exist');
+    cy.testA11y();
+  }
+
+  findTable(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('subscriptions-table');
+  }
+
+  findRows(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.findTable().find('tbody tr');
+  }
+
+  findActionsToggle(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('subscription-actions');
+  }
+
+  getRow(name: string): SubscriptionTableRow {
+    return new SubscriptionTableRow(() =>
+      this.findTable().find('tbody tr').contains('td', name).parents('tr'),
+    );
+  }
+
+  findTitle(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('app-page-title');
+  }
+
+  findDescription(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('app-page-description');
+  }
+
+  findFilterInput(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('subscriptions-filter-input');
+  }
+
+  findFilterResetButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByRole('button', { name: 'Clear all filters' });
+  }
+
+  findCreateSubscriptionButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('create-subscription-button');
+  }
+
+  findEmptyState(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('empty-state-title');
+  }
+}
+
+class SubscriptionTableRow extends TableRow {
+  findName(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().find('[data-label="Name"]');
+  }
+
+  findGroups(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().find('[data-label="Groups"]');
+  }
+
+  findModels(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().find('[data-label="Models"]');
+  }
+}
+
 export const tiersPage = new TiersPage();
 export const createTierPage = new CreateTierPage();
 export const deleteTierModal = new DeleteTierModal();
@@ -550,3 +618,4 @@ export const bulkRevokeAPIKeyModal = new BulkRevokeAPIKeyModal();
 export const revokeAPIKeyModal = new RevokeAPIKeyModal();
 export const createApiKeyModal = new CreateApiKeyModal();
 export const copyApiKeyModal = new CopyApiKeyModal();
+export const subscriptionsPage = new SubscriptionsPage();

packages/cypress/cypress/support/commands/odh.ts

@@ -97,6 +97,7 @@ import type {
   BulkRevokeResponse,
   CreateAPIKeyResponse,
 } from '@odh-dashboard/maas/types/api-key';
+import type { MaaSSubscription } from '@odh-dashboard/maas/types/subscriptions';
 
 type SuccessErrorResponse = {
   success: boolean;
@@ -1142,6 +1143,10 @@ declare global {
         ((
           type: 'GET /maas/api/v1/namespaces',
           response: OdhResponse<{ data: { metadata: { name: string } }[] }>,
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: 'GET /maas/api/v1/all-subscriptions',
+          response: OdhResponse<{ data: MaaSSubscription[] }>,
         ) => Cypress.Chainable<null>);
     }
   }

packages/cypress/cypress/tests/mocked/modelsAsAService/maasSubscriptions.cy.ts

@@ -0,0 +1,75 @@
+import { mockDashboardConfig, mockDscStatus } from '@odh-dashboard/internal/__mocks__';
+import { DataScienceStackComponent } from '@odh-dashboard/internal/concepts/areas/types';
+import { asProductAdminUser } from '../../../utils/mockUsers';
+import { subscriptionsPage } from '../../../pages/modelsAsAService';
+import { mockSubscriptions } from '../../../utils/maasUtils';
+
+describe('Subscriptions Page', () => {
+  beforeEach(() => {
+    asProductAdminUser();
+    cy.interceptOdh(
+      'GET /api/config',
+      mockDashboardConfig({
+        modelAsService: true,
+      }),
+    );
+    cy.interceptOdh('GET /maas/api/v1/user', {
+      data: { userId: 'test-user', clusterAdmin: false },
+    });
+    cy.interceptOdh('GET /maas/api/v1/namespaces', { data: [] });
+    cy.interceptOdh(
+      'GET /api/dsc/status',
+      mockDscStatus({
+        components: {
+          [DataScienceStackComponent.LLAMA_STACK_OPERATOR]: { managementState: 'Managed' },
+        },
+      }),
+    );
+    cy.interceptOdh('GET /maas/api/v1/all-subscriptions', {
+      data: mockSubscriptions(),
+    });
+    subscriptionsPage.visit();
+  });
+
+  it('should show the empty state when there are no subscriptions', () => {
+    cy.interceptOdh('GET /maas/api/v1/all-subscriptions', {
+      data: [],
+    });
+    subscriptionsPage.visit();
+    subscriptionsPage.findEmptyState().should('exist');
+    subscriptionsPage.findCreateSubscriptionButton().should('exist');
+  });
+
+  it('should display the subscriptions table with correct page content', () => {
+    subscriptionsPage.findTitle().should('contain.text', 'Subscriptions');
+    subscriptionsPage
+      .findDescription()
+      .should(
+        'contain.text',
+        'Subscriptions control access and entitlements to AI model endpoints that are available as a service.',
+      );
+
+    subscriptionsPage.findTable().should('exist');
+    subscriptionsPage.findRows().should('have.length', 2);
+    subscriptionsPage.findCreateSubscriptionButton().should('exist');
+
+    const premiumRow = subscriptionsPage.getRow('premium-team-sub');
+    premiumRow.findName().should('contain.text', 'premium-team-sub');
+    premiumRow.findGroups().should('contain.text', '1 Groups');
+    premiumRow.findModels().should('contain.text', '2 Models');
+
+    const basicRow = subscriptionsPage.getRow('basic-team-sub');
+    basicRow.findName().should('contain.text', 'basic-team-sub');
+    basicRow.findGroups().should('contain.text', '1 Groups');
+    basicRow.findModels().should('contain.text', '1 Models');
+
+    subscriptionsPage.findFilterInput().should('exist').type('premium');
+    subscriptionsPage.findRows().should('have.length', 1);
+    subscriptionsPage.findFilterResetButton().should('exist').click();
+    subscriptionsPage.findRows().should('have.length', 2);
+
+    premiumRow.findKebabAction('View details').should('exist');
+    premiumRow.findKebabAction('Edit subscription').should('exist');
+    premiumRow.findKebabAction('Delete subscription').should('exist');
+  });
+});

packages/cypress/cypress/utils/maasUtils.ts

@@ -4,6 +4,7 @@ import type {
   CreateAPIKeyResponse,
   CreateAPIKeyRequest,
 } from '@odh-dashboard/maas/types/api-key';
+import type { MaaSSubscription } from '@odh-dashboard/maas/types/subscriptions';
 
 // Standardized tier templates - use these directly or as building blocks
 export const MOCK_TIERS: Record<'free' | 'premium' | 'enterprise', Tier> = {
@@ -98,6 +99,51 @@ export const mockCreateAPIKeyRequest = (): CreateAPIKeyRequest => {
   };
 };
 
+export const mockSubscriptions = (): MaaSSubscription[] => [
+  {
+    name: 'premium-team-sub',
+    namespace: 'maas-system',
+    phase: 'Active',
+    priority: 10,
+    owner: {
+      groups: [{ name: 'premium-users' }],
+    },
+    modelRefs: [
+      {
+        name: 'granite-3-8b-instruct',
+        namespace: 'maas-models',
+        tokenRateLimits: [{ limit: 100000, window: '24h' }],
+      },
+      {
+        name: 'flan-t5-small',
+        namespace: 'maas-models',
+        tokenRateLimits: [{ limit: 200000, window: '24h' }],
+      },
+    ],
+    tokenMetadata: {
+      organizationId: 'org-123',
+      costCenter: 'engineering',
+    },
+    creationTimestamp: '2025-03-01T10:00:00Z',
+  },
+  {
+    name: 'basic-team-sub',
+    namespace: 'maas-system',
+    phase: 'Active',
+    owner: {
+      groups: [{ name: 'system:authenticated' }],
+    },
+    modelRefs: [
+      {
+        name: 'flan-t5-small',
+        namespace: 'maas-models',
+        tokenRateLimits: [{ limit: 10000, window: '24h' }],
+      },
+    ],
+    creationTimestamp: '2025-02-15T08:00:00Z',
+  },
+];
+
 export const mockTier = ({
   name = 'free',
   displayName,

packages/maas/frontend/src/app/api/subscriptions.ts

@@ -0,0 +1,44 @@
+import { handleRestFailures, isModArchResponse, APIOptions, restGET } from 'mod-arch-core';
+import { BFF_API_VERSION, URL_PREFIX } from '../utilities/const';
+import { MaaSSubscription, ModelSubscriptionRef, TokenRateLimit } from '../types/subscriptions';
+
+const isRecord = (v: unknown): v is Record<string, unknown> => !!v && typeof v === 'object';
+
+const isMaaSSubscriptionRef = (v: unknown): v is ModelSubscriptionRef =>
+  isRecord(v) &&
+  typeof v.name === 'string' &&
+  typeof v.namespace === 'string' &&
+  Array.isArray(v.tokenRateLimits) &&
+  v.tokenRateLimits.every(isTokenRateLimit) &&
+  (v.tokenRateLimitRef === undefined || typeof v.tokenRateLimitRef === 'string') &&
+  (v.billingRate === undefined || typeof v.billingRate === 'object');
+
+const isMaaSSubscription = (v: unknown): v is MaaSSubscription =>
+  isRecord(v) &&
+  typeof v.name === 'string' &&
+  typeof v.namespace === 'string' &&
+  typeof v.phase === 'string' &&
+  (v.priority === undefined || typeof v.priority === 'number') &&
+  typeof v.owner === 'object' &&
+  Array.isArray(v.modelRefs) &&
+  v.modelRefs.every(isMaaSSubscriptionRef) &&
+  (v.tokenMetadata === undefined || typeof v.tokenMetadata === 'object') &&
+  typeof v.creationTimestamp === 'string';
+const isTokenRateLimit = (v: unknown): v is TokenRateLimit =>
+  isRecord(v) && typeof v.limit === 'number' && typeof v.window === 'string';
+
+const isMaaSSubscriptionArray = (v: unknown): v is MaaSSubscription[] =>
+  Array.isArray(v) && v.every(isMaaSSubscription);
+
+/** GET /api/v1/all-subscriptions - List all subscriptions */
+export const listSubscriptions =
+  (hostPath = '') =>
+  (opts: APIOptions): Promise<MaaSSubscription[]> =>
+    handleRestFailures(
+      restGET(hostPath, `${URL_PREFIX}/api/${BFF_API_VERSION}/all-subscriptions`, {}, opts),
+    ).then((response) => {
+      if (isModArchResponse<unknown>(response) && isMaaSSubscriptionArray(response.data)) {
+        return response.data;
+      }
+      throw new Error('Invalid response format');
+    });

packages/maas/frontend/src/app/hooks/useListSubscriptions.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import {
+  POLL_INTERVAL,
+  useFetchState,
+  type APIOptions,
+  type FetchState,
+  type FetchStateCallbackPromise,
+} from 'mod-arch-core';
+import { listSubscriptions } from '../api/subscriptions';
+import { MaaSSubscription } from '../types/subscriptions';
+
+export const useListSubscriptions = (): FetchState<MaaSSubscription[]> => {
+  const callback = React.useCallback<FetchStateCallbackPromise<MaaSSubscription[]>>(
+    (opts: APIOptions) => listSubscriptions()(opts),
+    [],
+  );
+
+  return useFetchState<MaaSSubscription[]>(callback, [], { refreshRate: POLL_INTERVAL });
+};

packages/maas/frontend/src/app/pages/subscriptions/AllSubscriptionsPage.tsx

@@ -1,8 +1,74 @@
 import * as React from 'react';
 import ApplicationsPage from '@odh-dashboard/internal/pages/ApplicationsPage';
+import { PageSection } from '@patternfly/react-core';
+import { useListSubscriptions } from '~/app/hooks/useListSubscriptions';
+import { MaaSSubscription } from '~/app/types/subscriptions';
+import { SubscriptionsTable } from './allSubscriptions/SubscriptionsTable';
+import SubscriptionsToolbar from './allSubscriptions/SubscriptionsToolbar';
+import {
+  initialSubscriptionsFilterData,
+  SubscriptionsFilterDataType,
+  SubscriptionsFilterOptions,
+} from './allSubscriptions/const';
+import DeleteSubscriptionModal from './DeleteSubscriptionModal';
+import EmptySubscriptionsPage from './EmptySubscriptionsPage';
 
-const AllSubscriptionsPage: React.FC = () => (
-  <ApplicationsPage title="Subscriptions" empty={false} loaded />
-);
+const AllSubscriptionsPage: React.FC = () => {
+  const [subscriptions, loaded, error] = useListSubscriptions();
+  const [filterData, setFilterData] = React.useState<SubscriptionsFilterDataType>(
+    initialSubscriptionsFilterData,
+  );
+
+  const onFilterUpdate = React.useCallback(
+    (key: string, value?: string | { label: string; value: string }) =>
+      setFilterData((prev) => ({ ...prev, [key]: value })),
+    [],
+  );
+
+  const onClearFilters = React.useCallback(() => setFilterData(initialSubscriptionsFilterData), []);
+
+  const filteredSubscriptions = React.useMemo(() => {
+    const keyword = filterData[SubscriptionsFilterOptions.keyword]?.toLowerCase();
+    return keyword
+      ? subscriptions.filter((sub) => sub.name.toLowerCase().includes(keyword))
+      : subscriptions;
+  }, [subscriptions, filterData]);
+
+  const [deleteSubscription, setDeleteSubscription] = React.useState<MaaSSubscription | undefined>(
+    undefined,
+  );
+
+  return (
+    <ApplicationsPage
+      title="Subscriptions"
+      description="Subscriptions control access and entitlements to AI model endpoints that are available as a service."
+      empty={loaded && !error && subscriptions.length === 0}
+      emptyStatePage={<EmptySubscriptionsPage />}
+      loaded={loaded}
+      loadError={error}
+    >
+      {loaded && (
+        <PageSection isFilled>
+          <SubscriptionsTable
+            subscriptions={filteredSubscriptions}
+            onClearFilters={onClearFilters}
+            toolbarContent={
+              <SubscriptionsToolbar filterData={filterData} onFilterUpdate={onFilterUpdate} />
+            }
+            setDeleteSubscription={setDeleteSubscription}
+          />
+        </PageSection>
+      )}
+      {deleteSubscription && (
+        <DeleteSubscriptionModal
+          subscription={deleteSubscription}
+          onClose={() => {
+            setDeleteSubscription(undefined);
+          }}
+        />
+      )}
+    </ApplicationsPage>
+  );
+};
 
 export default AllSubscriptionsPage;