@orchestrator-ui/orchestrator-ui-components 0.0.1-alpha.0 → 0.0.1-alpha.10

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "0.0.1-alpha.0",
+  "version": "0.0.1-alpha.10",
   "main": "./index.js",
   "module": "./index.js",
   "type": "module",
   "types": "./src\\index.d.ts",
   "dependencies": {},
   "peerDependencies": {
+    "react-query": "3.39.3",
+    "@elastic/eui": "77.2.2",
     "react": "18.2.0",
-    "@emotion/react": "11.10.5",
-    "@elastic/eui": "75.1.1"
+    "@emotion/react": "11.11.0",
+    "next": "13.1.1",
+    "moment": "2.29.4",
+    "graphql-request": "5.2.0",
+    "@graphql-typed-document-node/core": "3.2.0"
   }
 }

package/src/index.d.ts

@@ -1,3 +1,7 @@
-export * from './lib/components/custom-button/custom-button';
-export * from './lib/components/OrchestratorPageTemplate/OrchestratorPageTemplate';
-export * from './lib/theme/defaultOrchestratorTheme';
+export * from './lib/components';
+export * from './lib/icons';
+export * from './lib/theme';
+export * from './lib/utils';
+export * from './lib/contexts';
+export * from './lib/types';
+export * from './lib/hooks';

package/src/lib/components/Badges/Badge/Badge.d.ts

@@ -0,0 +1,8 @@
+import { EuiBadgeProps } from '@elastic/eui';
+import { FC, ReactNode } from 'react';
+import { TextColor } from '@elastic/eui/src/components/text/text_color';
+export declare type BadgeProps = EuiBadgeProps & {
+    textColor: TextColor | string;
+    children: ReactNode;
+};
+export declare const Badge: FC<BadgeProps>;

package/src/lib/components/Badges/Badge/index.d.ts

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

package/src/lib/components/Badges/EngineStatusBadge/EngineStatusBadge.d.ts

@@ -0,0 +1 @@
+export declare const EngineStatusBadge: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/components/Badges/EngineStatusBadge/index.d.ts

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

package/src/lib/components/Badges/EnvironmentBadge/EnvironmentBadge.d.ts

@@ -0,0 +1 @@
+export declare const EnvironmentBadge: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/components/Badges/EnvironmentBadge/index.d.ts

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

package/src/lib/components/Badges/FailedTasksBadge/FailedTasksBadge.d.ts

@@ -0,0 +1 @@
+export declare const FailedTasksBadge: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/components/Badges/FailedTasksBadge/index.d.ts

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

package/src/lib/components/Badges/HeaderBadge/HeaderBadge.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+import { EuiBadgeProps } from '@elastic/eui';
+import { TextColor } from '@elastic/eui/src/components/text/text_color';
+export declare type HeaderBadgeProps = EuiBadgeProps & {
+    textColor: TextColor | string;
+    children: ReactNode;
+};
+export declare const HeaderBadge: FC<HeaderBadgeProps>;

package/src/lib/components/Badges/HeaderBadge/index.d.ts

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

package/src/lib/components/Badges/SubscriptionStatusBadge/SubscriptionStatusBadge.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export declare type SubscriptionStatusBadgeProps = {
+    subscriptionStatus: string;
+};
+export declare const SubscriptionStatusBadge: FC<SubscriptionStatusBadgeProps>;

package/src/lib/components/Badges/SubscriptionStatusBadge/index.d.ts

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

package/src/lib/components/Badges/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Badge';
+export * from './SubscriptionStatusBadge';
+export * from './FailedTasksBadge';
+export * from './EnvironmentBadge';
+export * from './EngineStatusBadge';
+export * from './HeaderBadge';

package/src/lib/components/OrchestratorPageTemplate/OrchestratorPageHeader/OrchestratorPageHeader.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from 'react';
+export interface OrchestratorPageHeaderProps {
+    navigationHeight: number;
+    getAppLogo: (navigationHeight: number) => ReactElement;
+    handleLogoutClick: () => void;
+}
+export declare const OrchestratorPageHeader: FC<OrchestratorPageHeaderProps>;

package/src/lib/components/OrchestratorPageTemplate/OrchestratorPageHeader/index.d.ts

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

package/src/lib/components/OrchestratorPageTemplate/{OrchestratorPageTemplate.d.ts → OrchestratorPageTemplate/OrchestratorPageTemplate.d.ts}

@@ -1,5 +1,7 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactElement, ReactNode } from 'react';
 export interface OrchestratorPageTemplateProps {
+    getAppLogo: (navigationHeight: number) => ReactElement;
+    routeTo: (route: string) => void;
     children: ReactNode;
 }
 export declare const OrchestratorPageTemplate: FC<OrchestratorPageTemplateProps>;

package/src/lib/components/OrchestratorPageTemplate/OrchestratorPageTemplate/index.d.ts

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

package/src/lib/components/OrchestratorPageTemplate/OrchestratorSidebar/OrchestratorSidebar.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export interface OrchestratorSidebarProps {
+    routeTo: (route: string) => void;
+}
+export declare const OrchestratorSidebar: FC<OrchestratorSidebarProps>;

package/src/lib/components/OrchestratorPageTemplate/OrchestratorSidebar/index.d.ts

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

package/src/lib/components/OrchestratorPageTemplate/index.d.ts

@@ -0,0 +1,3 @@
+export * from './OrchestratorPageHeader';
+export * from './OrchestratorPageTemplate';
+export * from './OrchestratorSidebar';

package/src/lib/components/StartPage/FrequentlyUsed.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export interface FrequentlyUsedProps {
+    values: string[];
+}
+export declare const FrequentlyUsed: FC<FrequentlyUsedProps>;

package/src/lib/components/StartPage/ListItemStartPage.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { Process, Subscription } from '../../types';
+export interface ListItemStartPageProps {
+    item: Subscription | Process;
+    type: string;
+}
+export declare const ListItemStartPage: FC<ListItemStartPageProps>;
+export default ListItemStartPage;

package/src/lib/components/StartPage/ListStartPage.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { ItemsList } from '../../types';
+interface ListStartPage {
+    list: ItemsList;
+}
+export default function ListStartPage({ list }: ListStartPage): ReactElement;
+export {};

package/src/lib/components/StartPage/MultiListSection.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const MultiListSection: FC;

package/src/lib/components/StartPage/NewProcessPanel.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const NewProcessPanel: FC;

package/src/lib/components/StartPage/StatCards.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const StatCards: FC;

package/src/lib/components/StartPage/index.d.ts

@@ -0,0 +1,6 @@
+export * from './FrequentlyUsed';
+export * from './ListItemStartPage';
+export * from './ListStartPage';
+export * from './MultiListSection';
+export * from './NewProcessPanel';
+export * from './StatCards';

package/src/lib/components/Table/DataGridTable.d.ts

@@ -0,0 +1,18 @@
+import { ControlColumn, DataGridTableColumns } from './dataGridColumns';
+import { EuiDataGridPaginationProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
+import { DataSorting } from './columns';
+export declare type Pagination = EuiDataGridPaginationProps & {
+    totalRecords: number;
+};
+export declare type DataGridTableProps<T> = {
+    data: T[];
+    pagination: Pagination;
+    columns: DataGridTableColumns<T>;
+    leadingControlColumns?: ControlColumn<T>[];
+    trailingControlColumns?: ControlColumn<T>[];
+    initialColumnOrder: Array<keyof T>;
+    dataSorting?: DataSorting<T>;
+    handleRowClick?: (row: T) => void;
+    updateDataSorting?: (updatedDataSorting: DataSorting<T>) => void;
+};
+export declare const DataGridTable: <T>({ data, pagination, columns, leadingControlColumns, trailingControlColumns, initialColumnOrder, dataSorting, handleRowClick, updateDataSorting, }: DataGridTableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/components/Table/Table.d.ts

@@ -0,0 +1,14 @@
+import { Pagination } from '@elastic/eui';
+import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
+import { DataSorting, TableColumnsWithExtraNonDataFields } from './columns';
+export declare type TableProps<T> = {
+    data: T[];
+    columns: TableColumnsWithExtraNonDataFields<T>;
+    hiddenColumns?: Array<keyof T>;
+    dataSorting?: DataSorting<T>;
+    pagination: Pagination;
+    isLoading?: boolean;
+    onCriteriaChange: (criteria: Criteria<T>) => void;
+    onDataSort?: (columnId: keyof T) => void;
+};
+export declare const Table: <T>({ data, columns, hiddenColumns, dataSorting, pagination, isLoading, onCriteriaChange, onDataSort, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/components/Table/TableHeaderCell.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from 'react';
+import { SortDirection } from './columns';
+export declare type TableHeaderCellProps = {
+    sortDirection?: SortDirection;
+    onClick?: () => void;
+    children: ReactNode;
+};
+export declare const TableHeaderCell: FC<TableHeaderCellProps>;
+export declare type SortDirectionIconProps = {
+    sortDirection: SortDirection;
+};
+export declare const SortDirectionIcon: FC<SortDirectionIconProps>;

package/src/lib/components/Table/columns.d.ts

@@ -0,0 +1,22 @@
+import { EuiBasicTableColumn } from '@elastic/eui';
+export declare type TableColumns<T> = {
+    [Property in keyof T]: EuiBasicTableColumn<T> & {
+        field: Property;
+        name: string;
+    };
+};
+export declare type TableColumnsWithExtraNonDataFields<T> = TableColumns<T> & {
+    [key: string]: EuiBasicTableColumn<T> & {
+        field: string;
+        name?: string;
+    };
+};
+export declare enum SortDirection {
+    Asc = "ASC",
+    Desc = "DESC"
+}
+export declare type DataSorting<T> = {
+    columnId: keyof T;
+    sortDirection: SortDirection;
+};
+export declare const getSortDirectionFromString: (sortOrder?: string) => SortDirection | undefined;

package/src/lib/components/Table/dataGridColumns.d.ts

@@ -0,0 +1,15 @@
+import { EuiDataGridColumn } from '@elastic/eui';
+import { ReactNode } from 'react';
+import { EuiDataGridControlColumn, EuiDataGridSorting } from '@elastic/eui/src/components/datagrid/data_grid_types';
+import { DataSorting } from './columns';
+export declare type DataGridTableColumns<T> = {
+    [Property in keyof T]: Omit<EuiDataGridColumn, 'id'> & {
+        renderCell?: (cellValue: T[Property], row: T) => ReactNode;
+        isHiddenByDefault?: boolean;
+    };
+};
+export declare type ControlColumn<T> = Omit<EuiDataGridControlColumn, 'rowCellRender' | 'headerCellRender' | 'footerCellRender' | 'footerCellProps' | 'headerCellProps'> & {
+    rowCellRender: (row: T) => ReactNode;
+};
+export declare function getInitialColumnOrder<T>(columns: DataGridTableColumns<T>, initialColumnOrder: Array<keyof T>): EuiDataGridColumn[];
+export declare function columnSortToEuiDataGridSorting<T>(columnSort?: DataSorting<T>, updateColumnSort?: (columnSort: DataSorting<T>) => void): EuiDataGridSorting;

package/src/lib/components/Table/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Table';
+export * from './TableHeaderCell';
+export * from './columns';
+export * from './DataGridTable';
+export * from './dataGridColumns';

package/src/lib/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Badges';
+export * from './OrchestratorPageTemplate';
+export * from './StartPage';
+export * from './Table';

package/src/lib/contexts/OrchestratorConfigContext.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+import { OrchestratorConfig } from '../hooks/useOrchestratorConfig';
+export declare const OrchestratorConfigContext: import("react").Context<OrchestratorConfig>;
+export declare type OrchestratorConfigProviderProps = {
+    initialOrchestratorConfig: OrchestratorConfig;
+    children: ReactNode;
+};
+export declare const OrchestratorConfigProvider: FC<OrchestratorConfigProviderProps>;

package/src/lib/contexts/index.d.ts

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

package/src/lib/hooks/DataFetchHooks.d.ts

@@ -0,0 +1,18 @@
+export declare const useFavouriteSubscriptions: () => {
+    items: any;
+    type: string;
+    title: string;
+    buttonName: string;
+};
+export declare const useProcessesAttention: () => {
+    items: any;
+    type: string;
+    title: string;
+    buttonName: string;
+};
+export declare const useRecentProcesses: () => {
+    items: any;
+    type: string;
+    title: string;
+    buttonName: string;
+};

package/src/lib/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './useQueryWithGraphql';
+export * from './useEngineStatusQuery';
+export * from './useOrchestratorConfig';
+export * from './useOrchestratorTheme';
+export * from './useProcessStatusCountsQuery';
+export * from './DataFetchHooks';

package/src/lib/hooks/useEngineStatusQuery.d.ts

@@ -0,0 +1,7 @@
+export declare type GlobalStatus = 'RUNNING' | 'PAUSED' | 'PAUSING';
+export interface EngineStatus {
+    global_lock: boolean;
+    running_processes: number;
+    global_status: GlobalStatus;
+}
+export declare const useEngineStatusQuery: () => import("react-query").UseQueryResult<EngineStatus, unknown>;

package/src/lib/hooks/useOrchestratorConfig.d.ts

@@ -0,0 +1,14 @@
+export declare enum Environment {
+    DEVELOPMENT = "Development",
+    PRODUCTION = "Production"
+}
+export declare type OrchestratorConfig = {
+    environmentName: Environment | string;
+    orchestratorApiBaseUrl: string;
+    engineStatusEndpoint: string;
+    processStatusCountsEndpoint: string;
+    graphqlEndpoint: string;
+};
+export declare const useOrchestratorConfig: (initialOrchestratorConfig: OrchestratorConfig) => {
+    orchestratorConfig: OrchestratorConfig;
+};

package/src/lib/hooks/useOrchestratorTheme.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="@elastic/eui" />
+export declare const useOrchestratorTheme: () => {
+    theme: import("@elastic/eui").EuiThemeComputed<{}>;
+    multiplyByBaseUnit: (multiplier: number) => number;
+    toSecondaryColor: (color: string) => string;
+};

package/src/lib/hooks/useProcessStatusCountsQuery.d.ts

@@ -0,0 +1,16 @@
+export declare enum ProcessStatus {
+    CREATED = "created",
+    RUNNING = "running",
+    SUSPENDED = "suspended",
+    WAITING = "waiting",
+    ABORTED = "aborted",
+    FAILED = "failed",
+    API_UNAVAILABLE = "api_unavailable",
+    INCONSISTENT_DATA = "inconsistent_data",
+    COMPLETED = "completed"
+}
+export declare type ProcessStatusCounts = {
+    process_counts: Record<ProcessStatus, number>;
+    task_counts: Record<ProcessStatus, number>;
+};
+export declare const useProcessStatusCountsQuery: () => import("react-query").UseQueryResult<ProcessStatusCounts, unknown>;

package/src/lib/hooks/useQueryWithGraphql.d.ts

@@ -0,0 +1,4 @@
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { Variables } from 'graphql-request/build/cjs/types';
+export declare const useQueryWithGraphql: <U, V extends Variables>(query: TypedDocumentNode<U, V>, queryVars: V) => import("react-query").UseQueryResult<U, unknown>;
+export declare const useStringQueryWithGraphql: <T, U extends Variables>(query: string, queryVars: U) => import("react-query").UseQueryResult<T, unknown>;

package/src/lib/icons/ArrowNarrowDown.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IconProps } from './IconProps';
+export declare const ArrowNarrowDown: FC<IconProps>;

package/src/lib/icons/ArrowNarrowUp.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IconProps } from './IconProps';
+export declare const ArrowNarrowUp: FC<IconProps>;

package/src/lib/icons/CheckmarkCircleFill.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IconProps } from './IconProps';
+export declare const CheckmarkCircleFill: FC<IconProps>;

package/src/lib/icons/ChevronDown.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IconProps } from './IconProps';
+export declare const ChevronDown: FC<IconProps>;

package/src/lib/icons/IconProps.d.ts

@@ -0,0 +1,5 @@
+export declare type IconProps = {
+    width?: number | string;
+    height?: number | string;
+    color?: string;
+};

package/src/lib/icons/LogoutIcon.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IconProps } from './IconProps';
+export declare const LogoutIcon: FC<IconProps>;

package/src/lib/icons/MinusCircleOutline.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IconProps } from './IconProps';
+export declare const MinusCircleOutline: FC<IconProps>;

package/src/lib/icons/PlusCircleFill.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IconProps } from './IconProps';
+export declare const PlusCircleFill: FC<IconProps>;

package/src/lib/icons/StatusDotIcon.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IconProps } from './IconProps';
+export declare const StatusDotIcon: FC<IconProps>;

package/src/lib/icons/XCircleFill.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IconProps } from './IconProps';
+export declare const XCircleFill: FC<IconProps>;

package/src/lib/icons/index.d.ts

@@ -0,0 +1,10 @@
+export * from './XCircleFill';
+export * from './StatusDotIcon';
+export * from './LogoutIcon';
+export * from './CheckmarkCircleFill';
+export * from './IconProps';
+export * from './MinusCircleOutline';
+export * from './PlusCircleFill';
+export * from './ChevronDown';
+export * from './ArrowNarrowDown';
+export * from './ArrowNarrowUp';

package/src/lib/theme/index.d.ts

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

package/src/lib/types.d.ts

@@ -0,0 +1,55 @@
+import { _EuiThemeColorsMode } from '@elastic/eui/src/global_styling/variables/colors';
+export interface ItemsList {
+    type: string;
+    title: string;
+    items: Subscription[] | Process[];
+    buttonName: string;
+}
+export interface TotalStat {
+    icon: string;
+    name: string;
+    value: number;
+    color: keyof _EuiThemeColorsMode;
+}
+export interface Subscription {
+    name: string;
+    subscription_id: string;
+    description: string;
+    product: Product;
+    product_id: string;
+    status: string;
+    insync: boolean;
+    customer_id: string;
+    start_date: number;
+    end_date: number;
+    note: string;
+}
+export interface Process {
+    pid: string;
+    workflow: string;
+    assignee: string;
+    last_status: string;
+    failed_reason: string;
+    traceback: string;
+    step: string;
+    created_by: string;
+    started_at: number;
+    last_modified_at: number;
+    is_task: boolean;
+}
+export interface Product {
+    name: string;
+    tag: string;
+    description: string;
+    product_id: string;
+    created_at: number;
+    product_type: string;
+    end_date: number;
+    status: string;
+    fixed_inputs: [];
+    workflows: [];
+    product_blocks: [];
+    create_subscription_workflow_key: string;
+    modify_subscription_workflow_key: string;
+    terminate_subscription_workflow_key: string;
+}

package/src/lib/utils/date.d.ts

@@ -0,0 +1 @@
+export declare const parseDate: (date: string | null) => Date | null;

package/src/lib/utils/getStatusBadgeColor.d.ts

@@ -0,0 +1 @@
+export declare const getStatusBadgeColor: (status: string) => any;

package/src/lib/utils/getTypedFieldFromObject.d.ts

@@ -0,0 +1 @@
+export declare function getTypedFieldFromObject<T extends object>(field: string, object: T): null | keyof T;

package/src/lib/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './date';
+export * from './getStatusBadgeColor';
+export * from './getTypedFieldFromObject';