@orchestrator-ui/orchestrator-ui-components 0.2.2 → 0.2.4

package/src/pages/processes/WFOProcessListPage.tsx

@@ -22,7 +22,7 @@ import { Pagination } from '@elastic/eui/src/components';
 import { WFOProcessesListSubscriptionsCell } from './WFOProcessesListSubscriptionsCell';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 import { useRouter } from 'next/router';
-import { EuiSpacer } from '@elastic/eui';
+import { EuiPageHeader, EuiSpacer } from '@elastic/eui';
 import { defaultProcessListTabs, WFOProcessListTabType } from './tabConfig';
 import { getProcessListTabTypeFromString } from './getProcessListTabTypeFromString';
 import {
@@ -49,7 +49,11 @@ export const WFOProcessListPage = () => {
         useDataDisplayParams<Process>({
             pageSize: initialPageSize,
             sortBy: {
-                field: 'lastModified',
+                // Todo: waiting for fix in backend -- currently the sortBy field id's are not matching with the returned data
+                // https://github.com/workfloworchestrator/orchestrator-ui/issues/91
+                // @ts-ignore
+                field: 'modified',
+                // field: 'lastModified',
                 order: SortOrder.DESC,
             },
         });
@@ -72,11 +76,10 @@ export const WFOProcessListPage = () => {
             field: 'workflowName',
             name: t('workflowName'),
         },
-        lastStep: {
-            field: 'lastStep',
-            name: t('lastStep'),
+        step: {
+            field: 'step',
+            name: t('step'),
         },
-
         status: {
             field: 'status',
             name: t('status'),
@@ -84,6 +87,10 @@ export const WFOProcessListPage = () => {
                 <WFOProcessStatusBadge processStatus={cellValue} />
             ),
         },
+        workflowTarget: {
+            field: 'workflowTarget',
+            name: t('workflowTarget'),
+        },
         product: {
             field: 'product',
             name: t('product'),
@@ -108,9 +115,9 @@ export const WFOProcessListPage = () => {
             field: 'assignee',
             name: t('assignee'),
         },
-        id: {
-            field: 'id',
-            name: t('id'),
+        processId: {
+            field: 'processId',
+            name: t('processId'),
         },
         started: {
             field: 'started',
@@ -127,10 +134,7 @@ export const WFOProcessListPage = () => {
         {
             first: dataDisplayParams.pageSize,
             after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
-            // Todo: waiting for fix in backend -- currently the sortBy field id's are not matching with the returned data
-            // sortBy: { field: 'lastModified', order: SortOrder.DESC },
-            // @ts-ignore
-            sortBy: { field: 'modified', order: SortOrder.DESC },
+            sortBy: dataDisplayParams.sortBy,
             filterBy: alwaysOnFilters,
         },
         'processList',
@@ -172,6 +176,11 @@ export const WFOProcessListPage = () => {
 
     return (
         <>
+            <EuiSpacer />
+
+            <EuiPageHeader pageTitle="Processes" />
+            <EuiSpacer size="m" />
+
             <WFOFilterTabs
                 tabs={defaultProcessListTabs}
                 translationNamespace="processes.tabs"

package/src/pages/processes/tableConfig.ts

@@ -6,17 +6,17 @@ export const defaultHiddenColumnsActiveProcesses: TableColumnKeys<Process> = [
     'customer',
     'createdBy',
     'assignee',
-    'id',
+    'processId',
 ];
 
 export const defaultHiddenColumnsCompletedProcesses: TableColumnKeys<Process> =
     [
-        'lastStep',
+        'step',
         'status',
         'product',
         'customer',
         'createdBy',
         'assignee',
-        'id',
+        'processId',
         'started',
     ];

package/src/pages/subscriptions/WFOSubscriptionsListPage.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import { StringParam, useQueryParam, withDefault } from 'use-query-params';
+import { EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import { useDataDisplayParams } from '../../hooks';
+import {
+    defaultSubscriptionsTabs,
+    getSubscriptionsTabTypeFromString,
+    SubscriptionListItem,
+    WFOSubscriptionsList,
+    WFOSubscriptionsTabType,
+} from '../../components/WFOSubscriptionsList';
+import { SortOrder } from '../../types';
+import {
+    DEFAULT_PAGE_SIZE,
+    getSortDirectionFromString,
+    getTableConfigFromLocalStorage,
+    SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
+} from '../../components/WFOTable';
+import { WFOFilterTabs } from '../../components';
+
+export const WFOSubscriptionsListPage = () => {
+    const router = useRouter();
+
+    const initialPageSize =
+        getTableConfigFromLocalStorage(SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY)
+            ?.selectedPageSize ?? DEFAULT_PAGE_SIZE;
+    const { dataDisplayParams, setDataDisplayParam } =
+        useDataDisplayParams<SubscriptionListItem>({
+            pageSize: initialPageSize,
+            sortBy: {
+                field: 'startDate',
+                order: SortOrder.DESC,
+            },
+        });
+
+    const [activeTab, setActiveTab] = useQueryParam(
+        'activeTab',
+        withDefault(StringParam, WFOSubscriptionsTabType.ACTIVE),
+    );
+
+    const sortOrder = getSortDirectionFromString(
+        dataDisplayParams.sortBy?.order,
+    );
+    const selectedSubscriptionsTab =
+        getSubscriptionsTabTypeFromString(activeTab);
+    if (!sortOrder || !selectedSubscriptionsTab) {
+        router.replace('/subscriptions');
+        return null;
+    }
+
+    const handleChangeSubscriptionsTab = (
+        updatedSubscriptionsTab: WFOSubscriptionsTabType,
+    ) => {
+        setActiveTab(updatedSubscriptionsTab);
+        setDataDisplayParam('pageIndex', 0);
+    };
+
+    const alwaysOnFilters = defaultSubscriptionsTabs.find(
+        ({ id }) => id === selectedSubscriptionsTab,
+    )?.alwaysOnFilters;
+
+    return (
+        <>
+            <EuiSpacer />
+
+            <EuiPageHeader pageTitle="Subscriptions" />
+            <EuiSpacer size="m" />
+
+            <WFOFilterTabs
+                tabs={defaultSubscriptionsTabs}
+                selectedTab={selectedSubscriptionsTab}
+                translationNamespace="subscriptions.tabs"
+                onChangeTab={handleChangeSubscriptionsTab}
+            />
+            <EuiSpacer size="xxl" />
+
+            <WFOSubscriptionsList
+                dataDisplayParams={dataDisplayParams}
+                setDataDisplayParam={setDataDisplayParam}
+                alwaysOnFilters={alwaysOnFilters}
+            />
+        </>
+    );
+};

package/src/pages/subscriptions/index.ts

@@ -1,2 +1 @@
-export * from './subscriptionListTabs';
-export * from './types';
+export * from './WFOSubscriptionsListPage';

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './subscription';

package/src/types/subscription.ts

@@ -0,0 +1,21 @@
+import { ProductDefinition } from './types';
+
+export enum SubscriptionStatus {
+    INITIAL = 'INITIAL',
+    ACTIVE = 'ACTIVE',
+    MIGRATING = 'MIGRATING',
+    DISABLED = 'DISABLED',
+    TERMINATED = 'TERMINATED',
+    PROVISIONING = 'PROVISIONING',
+}
+
+export type Subscription = {
+    subscriptionId: string;
+    description: string;
+    note: string;
+    startDate: string;
+    endDate: string;
+    insync: boolean;
+    status: SubscriptionStatus;
+    product: Pick<ProductDefinition, 'name' | 'tag' | 'productType'>;
+};

package/src/{types.ts → types/types.ts}

@@ -1,5 +1,6 @@
 import { _EuiThemeColorsMode } from '@elastic/eui/src/global_styling/variables/colors';
-import { ProcessStatus } from './hooks';
+import { ProcessStatus } from '../hooks';
+import { Subscription } from './subscription';
 
 export type Nullable<T> = T | null;
 
@@ -148,9 +149,9 @@ export interface ProductDefinition {
 // https://github.com/workfloworchestrator/orchestrator-ui/issues/217
 export type Process = {
     workflowName: string;
-    lastStep: string;
+    step: string;
     status: ProcessStatus;
-    // target: string;
+    workflowTarget: string;
     product: string;
     customer: string;
     // abbrev: string;
@@ -159,19 +160,11 @@ export type Process = {
     };
     createdBy: string;
     assignee: string;
-    id: string;
+    processId: string;
     started: string;
     lastModified: string;
 };
 
-// Todo: this will replace the generated Subscription
-// Currently partially implemented since it is used in Process object
-// https://github.com/workfloworchestrator/orchestrator-ui/issues/149
-export type Subscription = {
-    subscriptionId: string;
-    description: string;
-};
-
 export interface WorkflowDefinition {
     name: string;
     description: string;
@@ -206,14 +199,18 @@ export type GraphqlQueryVariables<Type> = {
     filterBy?: GraphqlFilter<Type>[];
 };
 
-type GraphQLPageInfo = {
+export type GraphQLPageInfo = {
     hasNextPage: boolean;
     hasPreviousPage: boolean;
-    startCursor: number;
-    totalItems: number;
-    endCursor: number;
+    startCursor?: number;
+    totalItems?: number;
+    endCursor?: number;
 };
 
+export interface SubscriptionsResult {
+    subscriptions: GraphQlResultPage<Subscription>;
+}
+
 export interface ProductDefinitionsResult {
     products: GraphQlResultPage<ProductDefinition>;
 }
@@ -226,7 +223,7 @@ export interface ResourceTypeDefinitionsResult {
     resourceTypes: GraphQlResultPage<ResourceTypeDefinition>;
 }
 
-export interface ProcessesDefinitionsResult {
+export interface ProcessesResult {
     processes: GraphQlResultPage<Process>;
 }
 

package/src/components/WFOBadges/WFOStatusBadge/index.ts

@@ -1 +0,0 @@
-export * from './WFOStatusBadge';