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

package/src/pages/metadata/WFOResourceTypesPage.tsx

@@ -1,120 +0,0 @@
-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_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY,
-} from '../../components';
-import { WFOTableWithFilter } from '../../components';
-import {
-    getTableConfigFromLocalStorage,
-    getDataSortHandler,
-    getPageChangeHandler,
-    getEsQueryStringHandler,
-} from '../../components';
-import type { WFOTableColumns, WFODataSorting } from '../../components';
-
-import type { ResourceTypeDefinition } from '../../types';
-import { SortOrder } from '../../types';
-
-import { useDataDisplayParams, useQueryWithGraphql } from '../../hooks';
-
-import { GET_RESOURCE_TYPES_GRAPHQL_QUERY } from '../../graphqlQueries';
-
-import { WFOMetadataPageLayout } from './WFOMetadataPageLayout';
-
-export const RESOURCE_TYPE_FIELD_ID: keyof ResourceTypeDefinition =
-    'resourceTypeId';
-export const RESOURCE_TYPE_FIELD_TYPE: keyof ResourceTypeDefinition =
-    'resourceType';
-export const RESOURCE_TYPE_FIELD_DESCRIPTION: keyof ResourceTypeDefinition =
-    'description';
-
-export const WFOResourceTypesPage = () => {
-    const t = useTranslations('metadata.resourceTypes');
-
-    const initialPageSize =
-        getTableConfigFromLocalStorage(
-            METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY,
-        )?.selectedPageSize ?? DEFAULT_PAGE_SIZE;
-
-    const { dataDisplayParams, setDataDisplayParam } =
-        useDataDisplayParams<ResourceTypeDefinition>({
-            pageSize: initialPageSize,
-            sortBy: {
-                field: RESOURCE_TYPE_FIELD_TYPE,
-                order: SortOrder.ASC,
-            },
-        });
-
-    const tableColumns: WFOTableColumns<ResourceTypeDefinition> = {
-        resourceType: {
-            field: RESOURCE_TYPE_FIELD_TYPE,
-            name: t('type'),
-            width: '110',
-        },
-        description: {
-            field: RESOURCE_TYPE_FIELD_DESCRIPTION,
-            name: t('description'),
-            width: '400',
-        },
-        resourceTypeId: {
-            field: RESOURCE_TYPE_FIELD_ID,
-            name: t('resourceId'),
-            width: '110',
-        },
-    };
-
-    const { data, isFetching } = useQueryWithGraphql(
-        GET_RESOURCE_TYPES_GRAPHQL_QUERY,
-        {
-            first: dataDisplayParams.pageSize,
-            after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
-            sortBy: dataDisplayParams.sortBy,
-        },
-        'resourceTypes',
-        true,
-    );
-
-    const dataSorting: WFODataSorting<ResourceTypeDefinition> = {
-        field: dataDisplayParams.sortBy?.field ?? RESOURCE_TYPE_FIELD_TYPE,
-        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
-    };
-
-    const totalItems = data?.resourceTypes.pageInfo.totalItems;
-
-    const pagination: Pagination = {
-        pageSize: dataDisplayParams.pageSize,
-        pageIndex: dataDisplayParams.pageIndex,
-        pageSizeOptions: DEFAULT_PAGE_SIZES,
-        totalItemCount: totalItems ? totalItems : 0,
-    };
-
-    return (
-        <WFOMetadataPageLayout>
-            <WFOTableWithFilter<ResourceTypeDefinition>
-                data={data ? data.resourceTypes.page : []}
-                tableColumns={tableColumns}
-                dataSorting={dataSorting}
-                onUpdateDataSort={getDataSortHandler<ResourceTypeDefinition>(
-                    dataDisplayParams,
-                    setDataDisplayParam,
-                )}
-                onUpdatePage={getPageChangeHandler<ResourceTypeDefinition>(
-                    setDataDisplayParam,
-                )}
-                onUpdateEsQueryString={getEsQueryStringHandler<ResourceTypeDefinition>(
-                    setDataDisplayParam,
-                )}
-                pagination={pagination}
-                isLoading={isFetching}
-                esQueryString={dataDisplayParams.esQueryString}
-                localStorageKey={
-                    METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY
-                }
-            />
-        </WFOMetadataPageLayout>
-    );
-};

package/src/pages/metadata/WFOWorkflowsPage.tsx

@@ -1,251 +0,0 @@
-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/processes/WFOProcessListPage.tsx

@@ -1,213 +0,0 @@
-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 { EuiPageHeader, 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: {
-                // 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,
-            },
-        });
-
-    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'),
-        },
-        step: {
-            field: 'step',
-            name: t('step'),
-        },
-        status: {
-            field: 'status',
-            name: t('status'),
-            render: (cellValue) => (
-                <WFOProcessStatusBadge processStatus={cellValue} />
-            ),
-        },
-        workflowTarget: {
-            field: 'workflowTarget',
-            name: t('workflowTarget'),
-        },
-        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'),
-        },
-        processId: {
-            field: 'processId',
-            name: t('processId'),
-        },
-        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,
-            sortBy: dataDisplayParams.sortBy,
-            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 (
-        <>
-            <EuiSpacer />
-
-            <EuiPageHeader pageTitle="Processes" />
-            <EuiSpacer size="m" />
-
-            <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

@@ -1,28 +0,0 @@
-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/tableConfig.ts

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

package/src/types/subscription.ts

@@ -1,21 +0,0 @@
-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/components/{WFOTable → WfoTable}/utils/columns.spec.ts

@@ -1,5 +1,5 @@
-import { getSortDirectionFromString } from './columns';
 import { SortOrder } from '../../../types';
+import { getSortDirectionFromString } from './columns';
 
 describe('columns', () => {
     describe('getSortOrderFromString', () => {