@orchestrator-ui/orchestrator-ui-components 1.3.1 → 1.5.0

package/src/pages/startPage/WfoStartPage.tsx

@@ -10,16 +10,17 @@ import {
     SummaryCardStatus,
     WfoSummaryCards,
 } from '@/components/WfoSummary/WfoSummaryCards';
+import { PolicyResource } from '@/configuration';
+import { usePolicy } from '@/hooks';
 import {
-    getProductsSummaryQuery,
-    getSubscriptionsListSummaryGraphQlQuery,
-} from '@/graphqlQueries';
-import { getProcessListSummaryGraphQlQuery } from '@/graphqlQueries/processListQuery';
-import { useQueryWithGraphql } from '@/hooks';
+    useGetProcessListSummaryQuery,
+    useGetProductsSummaryQuery,
+} from '@/rtk';
+import { useGetSubscriptionSummaryListQuery } from '@/rtk/endpoints/subscriptionListSummary';
 import {
     GraphqlQueryVariables,
     Process,
-    ProductDefinition,
+    ProductsSummary,
     SortOrder,
     Subscription,
 } from '@/types';
@@ -27,62 +28,46 @@ import { formatDate } from '@/utils';
 
 export const WfoStartPage = () => {
     const t = useTranslations('startPage');
+    const { isAllowed } = usePolicy();
 
     const {
         data: subscriptionsSummaryResult,
         isLoading: subscriptionsSummaryIsFetching,
-    } = useQueryWithGraphql(
-        getSubscriptionsListSummaryGraphQlQuery(),
+    } = useGetSubscriptionSummaryListQuery(
         subscriptionsListSummaryQueryVariables,
-        ['subscriptions', 'startPage'],
     );
     const {
         data: outOfSyncSubscriptionsSummaryResult,
         isLoading: outOfSyncsubscriptionsSummaryIsFetching,
-    } = useQueryWithGraphql(
-        getSubscriptionsListSummaryGraphQlQuery(),
+    } = useGetSubscriptionSummaryListQuery(
         outOfSyncSubscriptionsListSummaryQueryVariables,
-        ['subscriptions', 'startPage'],
     );
     const {
-        data: processesSummaryResult,
-        isLoading: processesSummaryIsFetching,
-    } = useQueryWithGraphql(
-        getProcessListSummaryGraphQlQuery(),
-        processListSummaryQueryVariables,
-        ['workflows', 'startPage'],
-    );
+        data: processesSummaryResponse,
+        isFetching: processesSummaryIsFetching,
+    } = useGetProcessListSummaryQuery(processListSummaryQueryVariables);
+
     const {
-        data: failedTasksSummaryResult,
-        isLoading: failedTasksSummaryIsFetching,
-    } = useQueryWithGraphql(
-        getProcessListSummaryGraphQlQuery(),
-        taskListSummaryQueryVariables,
-        ['tasks', 'startPage'],
-    );
+        data: failedTasksSummaryResponse,
+        isFetching: failedTasksSummaryIsFetching,
+    } = useGetProcessListSummaryQuery(taskListSummaryQueryVariables);
+
     const {
         data: productsSummaryResult,
         isLoading: productsSummaryIsFetching,
-    } = useQueryWithGraphql(
-        getProductsSummaryQuery(),
-        productsSummaryQueryVariables,
-        'productSummary',
-    );
+    } = useGetProductsSummaryQuery(productsSummaryQueryVariables);
 
     const latestActiveSubscriptionsSummaryCard: SummaryCard = {
         headerTitle: t('activeSubscriptions.headerTitle'),
-        headerValue:
-            subscriptionsSummaryResult?.subscriptions.pageInfo.totalItems ?? 0,
+        headerValue: subscriptionsSummaryResult?.pageInfo.totalItems ?? 0,
         headerStatus: SummaryCardStatus.Neutral,
         listTitle: t('activeSubscriptions.listTitle'),
         listItems:
-            subscriptionsSummaryResult?.subscriptions.page.map(
-                (subscription) => ({
-                    title: subscription.description,
-                    value: formatDate(subscription.startDate),
-                    url: `${PATH_SUBSCRIPTIONS}/${subscription.subscriptionId}`,
-                }),
-            ) ?? [],
+            subscriptionsSummaryResult?.subscriptions.map((subscription) => ({
+                title: subscription.description,
+                value: formatDate(subscription.startDate),
+                url: `${PATH_SUBSCRIPTIONS}/${subscription.subscriptionId}`,
+            })) ?? [],
         button: {
             name: t('activeSubscriptions.buttonText'),
             url: PATH_SUBSCRIPTIONS,
@@ -93,12 +78,11 @@ export const WfoStartPage = () => {
     const latestOutOfSyncSubscriptionsSummaryCard: SummaryCard = {
         headerTitle: t('outOfSyncSubscriptions.headerTitle'),
         headerValue:
-            outOfSyncSubscriptionsSummaryResult?.subscriptions.pageInfo
-                .totalItems ?? 0,
+            outOfSyncSubscriptionsSummaryResult?.pageInfo.totalItems ?? 0,
         headerStatus: SummaryCardStatus.Error,
         listTitle: t('outOfSyncSubscriptions.listTitle'),
         listItems:
-            outOfSyncSubscriptionsSummaryResult?.subscriptions.page.map(
+            outOfSyncSubscriptionsSummaryResult?.subscriptions.map(
                 (subscription) => ({
                     title: subscription.description,
                     value: formatDate(subscription.startDate),
@@ -114,11 +98,11 @@ export const WfoStartPage = () => {
 
     const latestWorkflowsSummaryCard: SummaryCard = {
         headerTitle: t('activeWorkflows.headerTitle'),
-        headerValue: processesSummaryResult?.processes.pageInfo.totalItems ?? 0,
+        headerValue: processesSummaryResponse?.pageInfo.totalItems ?? 0,
         headerStatus: SummaryCardStatus.Success,
         listTitle: t('activeWorkflows.listTitle'),
         listItems:
-            processesSummaryResult?.processes.page.map((workflow) => ({
+            processesSummaryResponse?.processes.map((workflow) => ({
                 title: workflow.workflowName,
                 value: formatDate(workflow?.startedAt),
                 url: `${PATH_WORKFLOWS}/${workflow.processId}`,
@@ -132,12 +116,11 @@ export const WfoStartPage = () => {
 
     const failedTasksSummaryCard: SummaryCard = {
         headerTitle: t('failedTasks.headerTitle'),
-        headerValue:
-            failedTasksSummaryResult?.processes.pageInfo.totalItems ?? 0,
+        headerValue: failedTasksSummaryResponse?.pageInfo.totalItems ?? 0,
         headerStatus: SummaryCardStatus.Error,
         listTitle: t('failedTasks.listTitle'),
         listItems:
-            failedTasksSummaryResult?.processes.page.map((task) => ({
+            failedTasksSummaryResponse?.processes.map((task) => ({
                 title: task.workflowName,
                 value: formatDate(task?.startedAt),
                 url: `${PATH_TASKS}/${task.processId}`,
@@ -151,11 +134,11 @@ export const WfoStartPage = () => {
 
     const productsSummaryCard: SummaryCard = {
         headerTitle: t('products.headerTitle'),
-        headerValue: productsSummaryResult?.products.pageInfo.totalItems ?? 0,
+        headerValue: productsSummaryResult?.pageInfo.totalItems ?? 0,
         headerStatus: SummaryCardStatus.Neutral,
         listTitle: t('products.listTitle'),
         listItems:
-            productsSummaryResult?.products.page
+            [...(productsSummaryResult?.products ?? [])]
                 .sort(
                     (left, right) =>
                         (right.subscriptions.pageInfo.totalItems ?? 0) -
@@ -180,17 +163,23 @@ export const WfoStartPage = () => {
         isLoading: productsSummaryIsFetching,
     };
 
+    function getFailedTasksSummarycard() {
+        return isAllowed(PolicyResource.NAVIGATION_TASKS)
+            ? [failedTasksSummaryCard]
+            : [];
+    }
+
+    const allowedSummaryCards = [
+        latestWorkflowsSummaryCard,
+        ...getFailedTasksSummarycard(),
+        latestOutOfSyncSubscriptionsSummaryCard,
+        latestActiveSubscriptionsSummaryCard,
+        productsSummaryCard,
+    ];
+
     return (
         <EuiFlexItem>
-            <WfoSummaryCards
-                summaryCards={[
-                    failedTasksSummaryCard,
-                    latestOutOfSyncSubscriptionsSummaryCard,
-                    latestWorkflowsSummaryCard,
-                    latestActiveSubscriptionsSummaryCard,
-                    productsSummaryCard,
-                ]}
-            />
+            <WfoSummaryCards summaryCards={allowedSummaryCards} />
         </EuiFlexItem>
     );
 };
@@ -276,12 +265,11 @@ const taskListSummaryQueryVariables: GraphqlQueryVariables<Process> = {
     ],
 };
 
-const productsSummaryQueryVariables: GraphqlQueryVariables<ProductDefinition> =
-    {
-        first: 1000,
-        after: 0,
-        sortBy: {
-            field: 'name',
-            order: SortOrder.ASC,
-        },
-    };
+const productsSummaryQueryVariables: GraphqlQueryVariables<ProductsSummary> = {
+    first: 1000,
+    after: 0,
+    sortBy: {
+        field: 'name',
+        order: SortOrder.ASC,
+    },
+};

package/src/pages/subscriptions/WfoSubscriptionsListPage.tsx

@@ -9,17 +9,16 @@ import {
     DEFAULT_PAGE_SIZE,
     SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
 } from '@/components';
-
-import { WfoFilterTabs } from '../../components';
+import { WfoFilterTabs } from '@/components';
+import { StoredTableConfig } from '@/components';
 import {
     WfoSubscriptionListTab,
     WfoSubscriptionsList,
     subscriptionListTabs,
-} from '../../components/WfoSubscriptionsList';
-import { SubscriptionListItem } from '../../components/WfoSubscriptionsList';
-import { StoredTableConfig } from '../../components/WfoTable';
-import { useDataDisplayParams, useStoredTableConfig } from '../../hooks';
-import { SortOrder } from '../../types';
+} from '@/components/WfoSubscriptionsList';
+import { SubscriptionListItem } from '@/components/WfoSubscriptionsList';
+import { useDataDisplayParams, useStoredTableConfig } from '@/hooks';
+import { SortOrder } from '@/types';
 
 export const WfoSubscriptionsListPage = () => {
     const t = useTranslations('subscriptions.detail');

package/src/rtk/api.ts

@@ -15,8 +15,10 @@ export enum BaseQueryTypes {
 
 export enum CacheTags {
     engineStatus = 'engineStatus',
-    // This is a placeholder for now. Having only one messes up the type of the tag in the onCacheEntryAdded function.
-    testStatus = 'testStatus',
+    processList = 'processList',
+    processListSummary = 'processListSummary',
+    subscription = 'subscription',
+    subscriptionList = 'subscriptionList',
 }
 
 type ExtraOptions = {
@@ -63,5 +65,11 @@ export const orchestratorApi = createApi({
         }
     },
     endpoints: () => ({}),
-    tagTypes: [CacheTags.engineStatus, CacheTags.testStatus],
+    tagTypes: [
+        CacheTags.engineStatus,
+        CacheTags.processList,
+        CacheTags.processListSummary,
+        CacheTags.subscriptionList,
+        CacheTags.subscription,
+    ],
 });

package/src/rtk/endpoints/index.ts

@@ -1,6 +1,15 @@
 export * from './customers';
+export * from './inSync';
+export * from './metadata';
 export * from './processList';
+export * from './processListSummary';
+export * from './processSteps';
+export * from './products';
+export * from './productsSummary';
+export * from './relatedSubscriptions';
 export * from './settings';
 export * from './streamMessages';
-export * from './inSync';
-export * from './processSteps';
+export * from './subscriptionDetail';
+export * from './subscriptionsDropdownOptions';
+export * from './relatedSubscriptions';
+export * from './startOptions';

package/src/rtk/endpoints/metadata/index.ts

@@ -0,0 +1,3 @@
+export * from './productBlocks';
+export * from './resourceTypes';
+export * from './workflows';

package/src/rtk/endpoints/metadata/productBlocks.ts

@@ -0,0 +1,88 @@
+import { orchestratorApi } from '@/rtk';
+import {
+    BaseGraphQlResult,
+    GraphqlQueryVariables,
+    ProductBlockDefinition,
+    ProductBlockDefinitionsResult,
+} from '@/types';
+
+export const productBlocksQuery = `
+    query MetadataProductBlocks(
+        $first: Int!
+        $after: Int!
+        $sortBy: [GraphqlSort!]
+        $query: String
+    ) {
+        productBlocks(
+            first: $first
+            after: $after
+            sortBy: $sortBy
+            query: $query
+        ) {
+            page {
+                productBlockId
+                name
+                tag
+                description
+                status
+                createdAt
+                endDate
+                resourceTypes {
+                    description
+                    resourceType
+                    resourceTypeId
+                }
+                dependsOn {
+                    productBlockId
+                    name
+                    tag
+                    description
+                    status
+                    createdAt
+                    endDate
+                }
+            }
+            pageInfo {
+                endCursor
+                hasNextPage
+                hasPreviousPage
+                startCursor
+                totalItems
+                sortFields
+                filterFields
+            }
+        }
+    }
+`;
+
+export type ProductBlocksResponse = {
+    productBlocks: ProductBlockDefinition[];
+} & BaseGraphQlResult;
+
+const productBlocksApi = orchestratorApi.injectEndpoints({
+    endpoints: (builder) => ({
+        getProductBlocks: builder.query<
+            ProductBlocksResponse,
+            GraphqlQueryVariables<ProductBlockDefinition>
+        >({
+            query: (variables) => ({
+                document: productBlocksQuery,
+                variables,
+            }),
+            transformResponse: (
+                response: ProductBlockDefinitionsResult,
+            ): ProductBlocksResponse => {
+                const productBlocks = response.productBlocks.page || [];
+                const pageInfo = response.productBlocks.pageInfo || {};
+
+                return {
+                    productBlocks,
+                    pageInfo,
+                };
+            },
+        }),
+    }),
+});
+
+export const { useGetProductBlocksQuery, useLazyGetProductBlocksQuery } =
+    productBlocksApi;

package/src/rtk/endpoints/metadata/resourceTypes.ts

@@ -0,0 +1,78 @@
+import { orchestratorApi } from '@/rtk';
+import {
+    BaseGraphQlResult,
+    GraphqlQueryVariables,
+    ResourceTypeDefinition,
+    ResourceTypeDefinitionsResult,
+} from '@/types';
+
+export const resourceTypesQuery = `
+query MetadataResourceTypes(
+    $first: Int!
+    $after: Int!
+    $sortBy: [GraphqlSort!]
+    $query: String
+) {
+    resourceTypes(
+        first: $first
+        after: $after
+        sortBy: $sortBy
+        query: $query
+    ) {
+        page {
+            resourceTypeId
+            resourceType
+            description
+            productBlocks {
+                description
+                name
+                productBlockId
+                status
+                createdAt
+                endDate
+            }
+        }
+        pageInfo {
+            endCursor
+            hasNextPage
+            hasPreviousPage
+            startCursor
+            totalItems
+            sortFields
+            filterFields
+        }
+    }
+}
+`;
+
+export type ResourceTypesResponse = {
+    resourceTypes: ResourceTypeDefinition[];
+} & BaseGraphQlResult;
+
+const resourceTypesApi = orchestratorApi.injectEndpoints({
+    endpoints: (builder) => ({
+        getResourceTypes: builder.query<
+            ResourceTypesResponse,
+            GraphqlQueryVariables<ResourceTypeDefinition>
+        >({
+            query: (variables) => ({
+                document: resourceTypesQuery,
+                variables,
+            }),
+            transformResponse: (
+                response: ResourceTypeDefinitionsResult,
+            ): ResourceTypesResponse => {
+                const resourceTypes = response.resourceTypes.page || [];
+                const pageInfo = response.resourceTypes.pageInfo || {};
+
+                return {
+                    resourceTypes,
+                    pageInfo,
+                };
+            },
+        }),
+    }),
+});
+
+export const { useGetResourceTypesQuery, useLazyGetResourceTypesQuery } =
+    resourceTypesApi;

package/src/rtk/endpoints/metadata/workflows.ts

@@ -0,0 +1,73 @@
+import { orchestratorApi } from '@/rtk';
+import {
+    BaseGraphQlResult,
+    GraphqlQueryVariables,
+    WorkflowDefinition,
+    WorkflowDefinitionsResult,
+} from '@/types';
+
+export const workflowsQuery = `
+query MetadataWorkflows(
+    $first: Int!
+    $after: Int!
+    $sortBy: [GraphqlSort!]
+    $query: String
+) {
+    workflows(
+        first: $first
+        after: $after
+        sortBy: $sortBy
+        query: $query
+    ) {
+        page {
+            name
+            description
+            target
+            products {
+                tag
+            }
+            createdAt
+        }
+        pageInfo {
+            endCursor
+            hasNextPage
+            hasPreviousPage
+            startCursor
+            totalItems
+            sortFields
+            filterFields
+        }
+    }
+}
+`;
+
+export type WorkflowsResponse = {
+    workflows: WorkflowDefinition[];
+} & BaseGraphQlResult;
+
+const workflowsApi = orchestratorApi.injectEndpoints({
+    endpoints: (builder) => ({
+        getWorkflows: builder.query<
+            WorkflowsResponse,
+            GraphqlQueryVariables<WorkflowDefinition>
+        >({
+            query: (variables) => ({
+                document: workflowsQuery,
+                variables,
+            }),
+            transformResponse: (
+                response: WorkflowDefinitionsResult,
+            ): WorkflowsResponse => {
+                const workflows = response.workflows.page || [];
+                const pageInfo = response.workflows.pageInfo || {};
+
+                return {
+                    workflows,
+                    pageInfo,
+                };
+            },
+        }),
+    }),
+});
+
+export const { useGetWorkflowsQuery, useLazyGetWorkflowsQuery } = workflowsApi;

package/src/rtk/endpoints/processList.ts

@@ -86,4 +86,5 @@ const processApi = orchestratorApi.injectEndpoints({
     }),
 });
 
-export const { useGetProcessListQuery } = processApi;
+export const { useGetProcessListQuery, useLazyGetProcessListQuery } =
+    processApi;

package/src/rtk/endpoints/processListSummary.ts

@@ -0,0 +1,70 @@
+import {
+    BaseGraphQlResult,
+    GraphqlQueryVariables,
+    Process,
+    ProcessListResult,
+} from '@/types';
+
+import { CacheTags, orchestratorApi } from '../api';
+
+export const processListSummaryQuery = `
+    query ProcessListSummary(
+        $first: Int!
+        $after: Int!
+        $sortBy: [GraphqlSort!]
+        $filterBy: [GraphqlFilter!]
+        $query: String
+    ) {
+        processes(
+            first: $first
+            after: $after
+            sortBy: $sortBy
+            filterBy: $filterBy
+            query: $query
+        ) {
+            page {
+                processId
+                workflowName
+                startedAt
+            }
+            pageInfo {
+                totalItems
+                startCursor
+                endCursor
+            }
+        }
+    }
+`;
+
+type ProcessSummary = Pick<Process, 'processId' | 'workflowName' | 'startedAt'>;
+
+export type ProcessListSummaryResponse = {
+    processes: ProcessSummary[];
+} & BaseGraphQlResult;
+
+const processApi = orchestratorApi.injectEndpoints({
+    endpoints: (build) => ({
+        getProcessListSummary: build.query<
+            ProcessListSummaryResponse,
+            GraphqlQueryVariables<Process>
+        >({
+            query: (variables) => ({
+                document: processListSummaryQuery,
+                variables,
+            }),
+            transformResponse: (
+                response: ProcessListResult<ProcessSummary>,
+            ): ProcessListSummaryResponse => {
+                const processes = response.processes.page || [];
+
+                return {
+                    processes,
+                    pageInfo: response.processes?.pageInfo || {},
+                };
+            },
+            providesTags: [CacheTags.processListSummary],
+        }),
+    }),
+});
+
+export const { useGetProcessListSummaryQuery } = processApi;

package/src/rtk/endpoints/products.ts

@@ -0,0 +1,76 @@
+import { orchestratorApi } from '@/rtk';
+import {
+    BaseGraphQlResult,
+    GraphqlQueryVariables,
+    ProductDefinition,
+    ProductDefinitionsResult,
+} from '@/types';
+
+export const products = `
+    query MetadataProducts(
+        $first: Int!
+        $after: Int!
+        $sortBy: [GraphqlSort!]
+        $query: String
+    ) {
+        products(first: $first, after: $after, sortBy: $sortBy, query: $query) {
+            page {
+                productId
+                name
+                description
+                tag
+                createdAt
+                productType
+                status
+                productBlocks {
+                    name
+                }
+                fixedInputs {
+                    name
+                    value
+                }
+                endDate
+            }
+            pageInfo {
+                endCursor
+                hasNextPage
+                hasPreviousPage
+                startCursor
+                totalItems
+                sortFields
+                filterFields
+            }
+        }
+    }
+`;
+
+export type ProductsResponse = {
+    products: ProductDefinition[];
+} & BaseGraphQlResult;
+
+const productsApi = orchestratorApi.injectEndpoints({
+    endpoints: (builder) => ({
+        getProducts: builder.query<
+            ProductsResponse,
+            GraphqlQueryVariables<ProductDefinition>
+        >({
+            query: (variables) => ({
+                document: products,
+                variables,
+            }),
+            transformResponse: (
+                response: ProductDefinitionsResult,
+            ): ProductsResponse => {
+                const products = response.products.page || [];
+                const pageInfo = response.products.pageInfo || {};
+
+                return {
+                    products,
+                    pageInfo,
+                };
+            },
+        }),
+    }),
+});
+
+export const { useGetProductsQuery, useLazyGetProductsQuery } = productsApi;