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

package/src/pages/metadata/WFOWorkflowsPage.tsx

@@ -0,0 +1,251 @@
+import React from 'react';
+import { useTranslations } from 'next-intl';
+import type { Pagination } from '@elastic/eui/src/components';
+
+import {
+    DEFAULT_PAGE_SIZE,
+    DEFAULT_PAGE_SIZES,
+    METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY,
+    WFOProductBlockBadge,
+} from '../../components';
+import { WFOTableWithFilter } from '../../components';
+import {
+    getTableConfigFromLocalStorage,
+    getDataSortHandler,
+    getPageChangeHandler,
+    getEsQueryStringHandler,
+} from '../../components';
+import type { WFOTableColumns, WFODataSorting } from '../../components';
+
+import type { WorkflowDefinition } from '../../types';
+import { SortOrder } from '../../types';
+
+import { useDataDisplayParams } from '../../hooks';
+import { WFOMetadataPageLayout } from './WFOMetadataPageLayout';
+
+const WORKFLOW_FIELD_NAME: keyof WorkflowDefinition = 'name';
+const WORKFLOW_FIELD_DESCRIPTION: keyof WorkflowDefinition = 'description';
+const WORKFLOW_FIELD_TARGET: keyof WorkflowDefinition = 'target';
+const WORKFLOW_FIELD_PRODUCT_TAGS: keyof WorkflowDefinition = 'productTags';
+const WORKFLOW_FIELD_CREATED_AT: keyof WorkflowDefinition = 'createdAt';
+
+export const WFOWorkflowsPage = () => {
+    //TODO: Delete when backend is implemented - see issue #219
+
+    const isFetching = false;
+    const data = {
+        workflows: {
+            page: [
+                {
+                    name: 'modify_note',
+                    target: 'MODIFY',
+                    description: 'Modify Note',
+                    createdAt: '2022-11-30T15:35:36.057665+00:00',
+                    productTags: [
+                        'Wireless',
+                        'SPNL',
+                        'Node',
+                        'IPP',
+                        'L2VPN',
+                        'SP',
+                        'LP',
+                        'L3VPN',
+                        'LR',
+                        'MSCNL',
+                        'MSC',
+                        'IPBGP',
+                        'IRBSP',
+                        'IPS',
+                        'AGGSP',
+                        'IPPG',
+                        'Corelink',
+                        'NSILP',
+                        'NSISTPNL',
+                        'DCC',
+                        'FW',
+                        'NSISTP',
+                        'IP_PREFIX',
+                        'AGGSPNL',
+                        'IPPP',
+                    ],
+                },
+                {
+                    name: 'task_clean_up_tasks',
+                    target: 'SYSTEM',
+                    description: 'Clean up old tasks',
+                    createdAt: '2022-11-30T15:35:36.057665+00:00',
+                    productTags: [],
+                },
+                {
+                    name: 'task_resume_workflows',
+                    target: 'SYSTEM',
+                    description:
+                        "Resume all workflows that are stuck on tasks with the status 'waiting'",
+                    createdAt: '2022-11-30T15:35:36.057665+00:00',
+                    productTags: [],
+                },
+                {
+                    name: 'task_validate_products',
+                    target: 'SYSTEM',
+                    description: 'Validate products',
+                    createdAt: '2022-11-30T15:35:36.057665+00:00',
+                    productTags: [],
+                },
+                {
+                    name: 'create_core_link',
+                    target: 'CREATE',
+                    description: 'Create Core Link',
+                    createdAt: '2022-11-30T15:35:36.057665+00:00',
+                    productTags: ['Corelink'],
+                },
+                {
+                    name: 'create_node',
+                    target: 'CREATE',
+                    description: 'Create Node',
+                    createdAt: '2022-11-30T15:35:36.057665+00:00',
+                    productTags: ['Node'],
+                },
+                {
+                    name: 'create_ip_prefix',
+                    target: 'CREATE',
+                    description: 'Create IP Prefix',
+                    createdAt: '2022-11-30T15:35:36.057665+00:00',
+                    productTags: ['IP_PREFIX'],
+                },
+                {
+                    name: 'create_sn8_service_port',
+                    target: 'CREATE',
+                    description: 'Create SN8 Service Port',
+                    createdAt: '2022-11-30T15:35:36.057665+00:00',
+                    productTags: ['SP', 'SPNL'],
+                },
+                {
+                    name: 'modify_sn8_ip_bgp',
+                    target: 'MODIFY',
+                    description: 'Change a SN8 IP BGP subscription',
+                    createdAt: '2022-11-30T15:35:36.057665+00:00',
+                    productTags: ['IPBGP'],
+                },
+                {
+                    name: 'create_sn8_ip_bgp',
+                    target: 'CREATE',
+                    description: 'Create SN8 IP BGP',
+                    createdAt: '2022-11-30T15:35:36.057665+00:00',
+                    productTags: ['IPBGP'],
+                },
+            ],
+            pageInfo: {
+                endCursor: 9,
+                hasNextPage: true,
+                hasPreviousPage: false,
+                startCursor: 0,
+                totalItems: 10,
+            },
+        },
+    };
+
+    const t = useTranslations('metadata.workflows');
+
+    const initialPageSize =
+        getTableConfigFromLocalStorage(
+            METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY,
+        )?.selectedPageSize ?? DEFAULT_PAGE_SIZE;
+
+    const { dataDisplayParams, setDataDisplayParam } =
+        useDataDisplayParams<WorkflowDefinition>({
+            pageSize: initialPageSize,
+            sortBy: {
+                field: WORKFLOW_FIELD_NAME,
+                order: SortOrder.ASC,
+            },
+        });
+
+    const tableColumns: WFOTableColumns<WorkflowDefinition> = {
+        name: {
+            field: WORKFLOW_FIELD_NAME,
+            name: t('name'),
+            width: '110',
+        },
+        description: {
+            field: WORKFLOW_FIELD_DESCRIPTION,
+            name: t('description'),
+            width: '220',
+        },
+        target: {
+            field: WORKFLOW_FIELD_TARGET,
+            name: t('target'),
+            width: '50',
+        },
+        productTags: {
+            field: WORKFLOW_FIELD_PRODUCT_TAGS,
+            name: t('productTags'),
+            width: '200',
+            render: (productTags) => (
+                <>
+                    {productTags &&
+                        productTags.map((productTag, index) => (
+                            <WFOProductBlockBadge key={index}>
+                                {productTag}
+                            </WFOProductBlockBadge>
+                        ))}
+                </>
+            ),
+        },
+        createdAt: {
+            field: WORKFLOW_FIELD_CREATED_AT,
+            name: t('createdAt'),
+            width: '110',
+        },
+    };
+
+    //TODO: uncomment when backend is done
+
+    // const { data, isFetching } = useQueryWithGraphql(
+    //     GET_WORKFLOWS_GRAPHQL_QUERY,
+    //     {
+    //         first: dataDisplayParams.pageSize,
+    //         after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
+    //         sortBy: dataDisplayParams.sortBy,
+    //     },
+    //     'workflows',
+    //     true,
+    // );
+
+    const dataSorting: WFODataSorting<WorkflowDefinition> = {
+        field: dataDisplayParams.sortBy?.field ?? WORKFLOW_FIELD_NAME,
+        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
+    };
+
+    const totalItems = data?.workflows.pageInfo.totalItems;
+
+    const pagination: Pagination = {
+        pageSize: dataDisplayParams.pageSize,
+        pageIndex: dataDisplayParams.pageIndex,
+        pageSizeOptions: DEFAULT_PAGE_SIZES,
+        totalItemCount: totalItems ? totalItems : 0,
+    };
+
+    return (
+        <WFOMetadataPageLayout>
+            <WFOTableWithFilter<WorkflowDefinition>
+                data={data ? data.workflows.page : []}
+                tableColumns={tableColumns}
+                dataSorting={dataSorting}
+                onUpdateDataSort={getDataSortHandler<WorkflowDefinition>(
+                    dataDisplayParams,
+                    setDataDisplayParam,
+                )}
+                onUpdatePage={getPageChangeHandler<WorkflowDefinition>(
+                    setDataDisplayParam,
+                )}
+                onUpdateEsQueryString={getEsQueryStringHandler<WorkflowDefinition>(
+                    setDataDisplayParam,
+                )}
+                pagination={pagination}
+                isLoading={isFetching}
+                esQueryString={dataDisplayParams.esQueryString}
+                localStorageKey={METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY}
+            />
+        </WFOMetadataPageLayout>
+    );
+};

package/src/pages/metadata/index.ts

@@ -0,0 +1,4 @@
+export * from './WFOProductBlocksPage';
+export * from './WFOResourceTypesPage';
+export * from './WFOProductsPage';
+export * from './WFOWorkflowsPage';

package/src/pages/processes/WFOProcessListPage.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import {
+    ACTIVE_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY,
+    WFODataSorting,
+    DEFAULT_PAGE_SIZE,
+    DEFAULT_PAGE_SIZES,
+    getDataSortHandler,
+    getEsQueryStringHandler,
+    getPageChangeHandler,
+    getTableConfigFromLocalStorage,
+    WFOLoading,
+    WFOTableColumns,
+    WFOTableWithFilter,
+    WFOFilterTabs,
+    COMPLETED_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY,
+    WFOProcessStatusBadge,
+} from '../../components';
+import { Process, SortOrder } from '../../types';
+import { useDataDisplayParams, useQueryWithGraphql } from '../../hooks';
+import { GET_PROCESS_LIST_GRAPHQL_QUERY } from '../../graphqlQueries/processListQuery';
+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 { defaultProcessListTabs, WFOProcessListTabType } from './tabConfig';
+import { getProcessListTabTypeFromString } from './getProcessListTabTypeFromString';
+import {
+    defaultHiddenColumnsActiveProcesses,
+    defaultHiddenColumnsCompletedProcesses,
+} from './tableConfig';
+import { useTranslations } from 'next-intl';
+
+export const WFOProcessListPage = () => {
+    const router = useRouter();
+    const t = useTranslations('processes.index'); // todo
+
+    const [activeTab, setActiveTab] = useQueryParam(
+        'activeTab',
+        withDefault(StringParam, WFOProcessListTabType.ACTIVE),
+    );
+
+    const initialPageSize =
+        getTableConfigFromLocalStorage(
+            ACTIVE_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY,
+        )?.selectedPageSize ?? DEFAULT_PAGE_SIZE;
+
+    const { dataDisplayParams, setDataDisplayParam } =
+        useDataDisplayParams<Process>({
+            pageSize: initialPageSize,
+            sortBy: {
+                field: 'lastModified',
+                order: SortOrder.DESC,
+            },
+        });
+
+    const selectedProcessListTab = getProcessListTabTypeFromString(activeTab);
+
+    const handleChangeProcessListTab = (
+        updatedProcessListTab: WFOProcessListTabType,
+    ) => {
+        setActiveTab(updatedProcessListTab);
+        setDataDisplayParam('pageIndex', 0);
+    };
+
+    const alwaysOnFilters = defaultProcessListTabs.find(
+        ({ id }) => id === selectedProcessListTab,
+    )?.alwaysOnFilters;
+
+    const tableColumns: WFOTableColumns<Process> = {
+        workflowName: {
+            field: 'workflowName',
+            name: t('workflowName'),
+        },
+        lastStep: {
+            field: 'lastStep',
+            name: t('lastStep'),
+        },
+
+        status: {
+            field: 'status',
+            name: t('status'),
+            render: (cellValue) => (
+                <WFOProcessStatusBadge processStatus={cellValue} />
+            ),
+        },
+        product: {
+            field: 'product',
+            name: t('product'),
+        },
+        customer: {
+            field: 'customer',
+            name: t('customer'),
+        },
+        subscriptions: {
+            field: 'subscriptions',
+            name: t('subscriptions'),
+            width: '400',
+            render: ({ page }) => (
+                <WFOProcessesListSubscriptionsCell subscriptions={page} />
+            ),
+        },
+        createdBy: {
+            field: 'createdBy',
+            name: t('createdBy'),
+        },
+        assignee: {
+            field: 'assignee',
+            name: t('assignee'),
+        },
+        id: {
+            field: 'id',
+            name: t('id'),
+        },
+        started: {
+            field: 'started',
+            name: t('started'),
+        },
+        lastModified: {
+            field: 'lastModified',
+            name: t('lastModified'),
+        },
+    };
+
+    const { data, isFetching } = useQueryWithGraphql(
+        GET_PROCESS_LIST_GRAPHQL_QUERY,
+        {
+            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 },
+            filterBy: alwaysOnFilters,
+        },
+        'processList',
+        true,
+    );
+
+    if (!data) {
+        return <WFOLoading />;
+    }
+
+    if (!selectedProcessListTab) {
+        router.replace('/processes');
+        return null;
+    }
+
+    const dataSorting: WFODataSorting<Process> = {
+        field: dataDisplayParams.sortBy?.field ?? 'lastModified',
+        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
+    };
+
+    const { totalItems } = data.processes.pageInfo;
+
+    const pagination: Pagination = {
+        pageSize: dataDisplayParams.pageSize,
+        pageIndex: dataDisplayParams.pageIndex,
+        pageSizeOptions: DEFAULT_PAGE_SIZES,
+        totalItemCount: totalItems ? totalItems : 0,
+    };
+
+    const defaultHiddenColumns =
+        selectedProcessListTab === WFOProcessListTabType.ACTIVE
+            ? defaultHiddenColumnsActiveProcesses
+            : defaultHiddenColumnsCompletedProcesses;
+
+    const localStorageKey =
+        selectedProcessListTab === WFOProcessListTabType.ACTIVE
+            ? ACTIVE_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY
+            : COMPLETED_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY;
+
+    return (
+        <>
+            <WFOFilterTabs
+                tabs={defaultProcessListTabs}
+                translationNamespace="processes.tabs"
+                selectedTab={selectedProcessListTab}
+                onChangeTab={handleChangeProcessListTab}
+            />
+            <EuiSpacer size="xxl" />
+
+            <WFOTableWithFilter
+                data={data.processes.page}
+                tableColumns={tableColumns}
+                dataSorting={dataSorting}
+                pagination={pagination}
+                isLoading={isFetching}
+                defaultHiddenColumns={defaultHiddenColumns}
+                localStorageKey={localStorageKey}
+                onUpdateEsQueryString={getEsQueryStringHandler<Process>(
+                    setDataDisplayParam,
+                )}
+                onUpdatePage={getPageChangeHandler<Process>(
+                    setDataDisplayParam,
+                )}
+                onUpdateDataSort={getDataSortHandler<Process>(
+                    dataDisplayParams,
+                    setDataDisplayParam,
+                )}
+            />
+        </>
+    );
+};

package/src/pages/processes/WFOProcessesListSubscriptionsCell.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Subscription } from '../../types';
+import Link from 'next/link';
+import { FC } from 'react';
+
+export type WFOProcessesListSubscriptionsCellProps = {
+    subscriptions: Pick<Subscription, 'subscriptionId' | 'description'>[];
+};
+
+export const WFOProcessesListSubscriptionsCell: FC<
+    WFOProcessesListSubscriptionsCellProps
+> = ({ subscriptions }) => {
+    const { length } = subscriptions;
+
+    if (length === 0) {
+        return null;
+    }
+
+    const firstSubscription = subscriptions[0];
+    return (
+        <>
+            <Link href={`/subscriptions/${firstSubscription.subscriptionId}`}>
+                {firstSubscription.description}
+            </Link>
+            {length > 1 && <span>{` (+${length - 1})`}</span>}
+        </>
+    );
+};

package/src/pages/processes/getProcessListTabTypeFromString.ts

@@ -0,0 +1,19 @@
+import { WFOProcessListTabType } from './tabConfig';
+
+export const getProcessListTabTypeFromString = (
+    tabId?: string,
+): WFOProcessListTabType | undefined => {
+    if (!tabId) {
+        return undefined;
+    }
+
+    switch (tabId.toUpperCase()) {
+        case WFOProcessListTabType.ACTIVE.toString():
+            return WFOProcessListTabType.ACTIVE;
+        case WFOProcessListTabType.COMPLETED.toString():
+            return WFOProcessListTabType.COMPLETED;
+
+        default:
+            return undefined;
+    }
+};

package/src/pages/processes/index.ts

@@ -0,0 +1,4 @@
+export * from './getProcessListTabTypeFromString';
+export * from './tabConfig';
+export * from './WFOProcessListPage';
+export * from './WFOProcessesListSubscriptionsCell';

package/src/pages/processes/tabConfig.ts

@@ -0,0 +1,33 @@
+import { Process } from '../../types';
+import { WFOFilterTab } from '../../components';
+
+export enum WFOProcessListTabType {
+    ACTIVE = 'ACTIVE',
+    COMPLETED = 'COMPLETED',
+}
+
+export const defaultProcessListTabs: WFOFilterTab<
+    WFOProcessListTabType,
+    Process
+>[] = [
+    {
+        id: WFOProcessListTabType.ACTIVE,
+        translationKey: 'active',
+        alwaysOnFilters: [
+            {
+                field: 'status',
+                value: 'created-running-suspended-waiting-failed-resumed',
+            },
+        ],
+    },
+    {
+        id: WFOProcessListTabType.COMPLETED,
+        translationKey: 'completed',
+        alwaysOnFilters: [
+            {
+                field: 'status',
+                value: 'completed',
+            },
+        ],
+    },
+];

package/src/pages/processes/tableConfig.ts

@@ -0,0 +1,22 @@
+import { TableColumnKeys } from '../../components';
+import { Process } from '../../types';
+
+export const defaultHiddenColumnsActiveProcesses: TableColumnKeys<Process> = [
+    'product',
+    'customer',
+    'createdBy',
+    'assignee',
+    'id',
+];
+
+export const defaultHiddenColumnsCompletedProcesses: TableColumnKeys<Process> =
+    [
+        'lastStep',
+        'status',
+        'product',
+        'customer',
+        'createdBy',
+        'assignee',
+        'id',
+        'started',
+    ];

package/src/pages/subscriptions/index.ts

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

package/src/pages/subscriptions/subscriptionListTabs.ts

@@ -0,0 +1,71 @@
+import { WFOFilterTab } from '../../components';
+import { SubscriptionListItem } from './types';
+
+export enum WFOSubscriptionsTabType {
+    ACTIVE = 'ACTIVE',
+    TERMINATED = 'TERMINATED',
+    TRANSIENT = 'TRANSIENT',
+    ALL = 'ALL',
+}
+
+export const defaultSubscriptionsTabs: WFOFilterTab<
+    WFOSubscriptionsTabType,
+    SubscriptionListItem
+>[] = [
+    {
+        id: WFOSubscriptionsTabType.ACTIVE,
+        translationKey: 'active',
+        alwaysOnFilters: [
+            {
+                field: 'status',
+                value: 'active',
+            },
+        ],
+    },
+    {
+        id: WFOSubscriptionsTabType.TERMINATED,
+        translationKey: 'terminated',
+        alwaysOnFilters: [
+            {
+                field: 'status',
+                value: 'terminated',
+            },
+        ],
+    },
+    {
+        id: WFOSubscriptionsTabType.TRANSIENT,
+        translationKey: 'transient',
+        alwaysOnFilters: [
+            {
+                field: 'status',
+                value: 'initial-provisioning-migrating',
+            },
+        ],
+    },
+    {
+        id: WFOSubscriptionsTabType.ALL,
+        translationKey: 'all',
+    },
+];
+
+export const getSubscriptionsTabTypeFromString = (
+    tabId?: string,
+): WFOSubscriptionsTabType | undefined => {
+    if (!tabId) {
+        return undefined;
+    }
+
+    switch (tabId.toUpperCase()) {
+        case WFOSubscriptionsTabType.ACTIVE.toString():
+            return WFOSubscriptionsTabType.ACTIVE;
+        case WFOSubscriptionsTabType.TERMINATED.toString():
+            return WFOSubscriptionsTabType.TERMINATED;
+        case WFOSubscriptionsTabType.TRANSIENT.toString():
+            return WFOSubscriptionsTabType.TRANSIENT;
+        case WFOSubscriptionsTabType.ALL.toString():
+            return WFOSubscriptionsTabType.ALL;
+
+        default:
+            return undefined;
+    }
+};

package/src/pages/subscriptions/types.ts

@@ -0,0 +1,13 @@
+// Todo: preparation for moving the Subscriptions component (table) to the lib
+// https://github.com/workfloworchestrator/orchestrator-ui/issues/149
+export type SubscriptionListItem = {
+    subscriptionId: string;
+    description: string;
+    status: string;
+    insync: boolean;
+    startDate: Date | null;
+    endDate: Date | null;
+    productName: string;
+    tag: string | null;
+    note: string | null;
+};