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

package/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx

@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    EuiButtonIcon,
+    EuiCallOut,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiSearchBar,
+    EuiText,
+} from '@elastic/eui';
+
+import { TreeContext, TreeContextType } from '../../contexts';
+import { ProductBlockInstance, TreeBlock, WfoTreeNodeMap } from '../../types';
+import { getTokenName } from '../../utils/getTokenName';
+import { WfoLoading } from '../WfoLoading';
+import { WfoTree } from '../WfoTree';
+import { getWfoTreeNodeDepth } from '../WfoTree';
+import { WfoSubscriptionProductBlock } from './WfoSubscriptionProductBlock';
+import {
+    getFieldFromProductBlockInstanceValues,
+    getProductBlockTitle,
+} from './utils';
+
+interface WfoSubscriptionDetailTreeProps {
+    productBlockInstances: ProductBlockInstance[];
+}
+
+export const WfoSubscriptionDetailTree = ({
+    productBlockInstances,
+}: WfoSubscriptionDetailTreeProps) => {
+    const t = useTranslations('subscriptions.detail');
+    const [, setSelectedTreeNode] = useState(-1);
+
+    const { selectedIds, resetSelection } = React.useContext(
+        TreeContext,
+    ) as TreeContextType;
+
+    let tree: TreeBlock | null = null;
+    const depthList: number[] = [];
+
+    const idToNodeMap: WfoTreeNodeMap = {}; // Keeps track of nodes using id as key, for fast lookup
+
+    productBlockInstances.forEach((productBlockInstance) => {
+        const shallowCopy: TreeBlock = {
+            ...productBlockInstance,
+            icon: '',
+            label: '',
+            callback: () => {},
+            children: [],
+        };
+
+        // Does this node have a parent?
+        if (shallowCopy.parent === null) {
+            // Doesn't look like it, so this node is the root of the tree
+            shallowCopy.label = getFieldFromProductBlockInstanceValues(
+                shallowCopy.productBlockInstanceValues,
+                'name',
+            );
+            shallowCopy.callback = () => setSelectedTreeNode(shallowCopy.id);
+            depthList.push(0); // First id is on root
+            tree = shallowCopy;
+        } else {
+            // This node has a parent, so let's look it up using the id
+            depthList.push(getWfoTreeNodeDepth(shallowCopy, idToNodeMap));
+            const parentNode = idToNodeMap[shallowCopy.parent];
+            shallowCopy.label = getProductBlockTitle(
+                shallowCopy.productBlockInstanceValues,
+            );
+            shallowCopy.callback = () => setSelectedTreeNode(shallowCopy.id);
+
+            if (
+                !productBlockInstances.find((i) => i.parent === shallowCopy.id)
+            ) {
+                shallowCopy.icon = getTokenName(shallowCopy.label);
+            }
+
+            // Let's add the current node as a child of the parent node.
+            if (parentNode.children && Array.isArray(parentNode.children)) {
+                parentNode.children.push(shallowCopy);
+            }
+        }
+
+        // Add an entry for this node to the map so that any future children can look up the parent
+        idToNodeMap[shallowCopy.id] = shallowCopy;
+    });
+
+    if (!tree) return null;
+
+    return (
+        <EuiFlexGroup style={{ marginTop: 15 }}>
+            <EuiFlexItem style={{ maxWidth: 450, width: 450 }}>
+                <EuiFlexGroup direction={'column'}>
+                    <EuiFlexItem grow={false}>
+                        <EuiFlexGroup>
+                            <EuiFlexItem grow={false}>
+                                <EuiText>
+                                    <h3>{t('productBlocks')}</h3>
+                                </EuiText>
+                            </EuiFlexItem>
+                            <EuiFlexItem grow={true}>
+                                {selectedIds.length > 0 && (
+                                    <EuiButtonIcon
+                                        iconType="error"
+                                        onClick={resetSelection}
+                                    />
+                                )}
+                            </EuiFlexItem>
+                        </EuiFlexGroup>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={true}>
+                        {!tree && <WfoLoading />}
+                        {tree && (
+                            <WfoTree data={[tree]} depthList={depthList} />
+                        )}
+                    </EuiFlexItem>
+                </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem grow={true}>
+                <div>
+                    <EuiSearchBar />
+                    {selectedIds.length === 0 && (
+                        <EuiCallOut
+                            style={{
+                                marginTop: 15,
+                                minHeight: 600,
+                            }}
+                            size="m"
+                            title={t('noProductBlockSelected')}
+                            iconType="inspect"
+                        >
+                            <p>{t('ctaSelectProductBlock')} </p>
+                        </EuiCallOut>
+                    )}
+                    {selectedIds.length !== 0 &&
+                        selectedIds.map((id, index) => {
+                            const block =
+                                productBlockInstances[selectedIds[index]];
+                            return (
+                                <WfoSubscriptionProductBlock
+                                    key={index}
+                                    ownerSubscriptionId={
+                                        block.ownerSubscriptionId
+                                    }
+                                    subscriptionInstanceId={
+                                        block.subscriptionInstanceId
+                                    }
+                                    productBlockInstanceValues={
+                                        block.productBlockInstanceValues
+                                    }
+                                    inUseByRelations={block.inUseByRelations}
+                                    id={id}
+                                />
+                            );
+                        })}
+                </div>
+            </EuiFlexItem>
+        </EuiFlexGroup>
+    );
+};

package/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
+
+import { SubscriptionDetail } from '../../types';
+import {
+    WfoProductStatusBadge,
+    WfoSubscriptionStatusBadge,
+} from '../WfoBadges';
+import { WfoInsyncIcon } from '../WfoInsyncIcon/WfoInsyncIcon';
+import { WfoKeyValueTableDataType } from '../WfoKeyValueTable/WfoKeyValueTable';
+import { SubscriptionKeyValueBlock } from './SubscriptionKeyValueBlock';
+
+interface WfoSubscriptionGeneralProps {
+    subscriptionDetail: SubscriptionDetail;
+}
+
+export const WfoSubscriptionGeneral = ({
+    subscriptionDetail,
+}: WfoSubscriptionGeneralProps) => {
+    const t = useTranslations('subscriptions.detail');
+
+    const getSubscriptionDetailBlockData = (): WfoKeyValueTableDataType[] => {
+        return [
+            {
+                key: t('subscriptionId'),
+                value: subscriptionDetail.subscriptionId,
+                textToCopy: subscriptionDetail.subscriptionId,
+            },
+            {
+                key: t('productName'),
+                value: subscriptionDetail.product.name,
+            },
+
+            {
+                key: t('description'),
+                value: subscriptionDetail.description,
+            },
+            {
+                key: t('startDate'),
+                value: subscriptionDetail.startDate,
+            },
+            {
+                key: t('endDate'),
+                value: subscriptionDetail.endDate,
+            },
+            {
+                key: t('status'),
+                value: (
+                    <WfoSubscriptionStatusBadge
+                        status={subscriptionDetail.status}
+                    />
+                ),
+            },
+            {
+                key: t('insync'),
+                value: <WfoInsyncIcon inSync={subscriptionDetail.insync} />,
+            },
+            {
+                key: t('customer'),
+                value:
+                    subscriptionDetail && subscriptionDetail.customer
+                        ? `${subscriptionDetail.customer?.fullname}`
+                        : '-',
+            },
+            {
+                key: t('customerUuid'),
+                value:
+                    subscriptionDetail && subscriptionDetail.customer
+                        ? `${subscriptionDetail.customer?.identifier}`
+                        : '-',
+            },
+            {
+                key: t('note'),
+                value: (subscriptionDetail && subscriptionDetail.note) || '-',
+            },
+        ];
+    };
+
+    const getFixedInputBlockData = (): WfoKeyValueTableDataType[] => {
+        return subscriptionDetail.fixedInputs.map((fixedInput) => ({
+            key: fixedInput.field,
+            value: fixedInput.value,
+        }));
+    };
+
+    const getProductInfoBlockData = (): WfoKeyValueTableDataType[] => {
+        const product = subscriptionDetail.product;
+        return [
+            {
+                key: t('name'),
+                value: product.name,
+            },
+            {
+                key: t('description'),
+                value: product.description,
+            },
+            {
+                key: t('productType'),
+                value: product.productType,
+            },
+            {
+                key: t('tag'),
+                value: product.tag,
+            },
+            {
+                key: t('status'),
+                value: <WfoProductStatusBadge status={product.status} />,
+            },
+            {
+                key: t('created'),
+                value: product.createdAt,
+            },
+            {
+                key: t('endDate'),
+                value: product.endDate,
+            },
+        ];
+    };
+
+    return (
+        <EuiFlexGrid direction={'row'}>
+            <>
+                <EuiFlexItem>
+                    <SubscriptionKeyValueBlock
+                        title={t('blockTitleSubscriptionDetails')}
+                        keyValues={getSubscriptionDetailBlockData()}
+                    />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                    <SubscriptionKeyValueBlock
+                        title={t('blockTitleFixedInputs')}
+                        keyValues={getFixedInputBlockData()}
+                    />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                    <SubscriptionKeyValueBlock
+                        title={t('blockTitleProductInfo')}
+                        keyValues={getProductInfoBlockData()}
+                    />
+                </EuiFlexItem>
+            </>
+        </EuiFlexGrid>
+    );
+};

package/src/components/WfoSubscription/WfoSubscriptionProductBlock.tsx

@@ -0,0 +1,207 @@
+import React, { useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/router';
+
+import {
+    EuiBadge,
+    EuiButtonEmpty,
+    EuiCodeBlock,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiIcon,
+    EuiPanel,
+    EuiSpacer,
+    EuiText,
+} from '@elastic/eui';
+
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '../../hooks';
+import { FieldValue, InUseByRelation } from '../../types';
+import { camelToHuman } from '../../utils';
+import { PATH_SUBSCRIPTIONS } from '../WfoPageTemplate';
+import { getStyles } from './styles';
+import { getProductBlockTitle } from './utils';
+
+interface WfoSubscriptionProductBlockProps {
+    ownerSubscriptionId: string;
+    subscriptionInstanceId: string;
+    productBlockInstanceValues: FieldValue[];
+    inUseByRelations: InUseByRelation[];
+    id: number;
+}
+
+export const HIDDEN_KEYS = ['title', 'name', 'label'];
+
+export const WfoSubscriptionProductBlock = ({
+    ownerSubscriptionId,
+    subscriptionInstanceId,
+    productBlockInstanceValues,
+    inUseByRelations,
+}: WfoSubscriptionProductBlockProps) => {
+    const router = useRouter();
+    const subscriptionId = router.query['subscriptionId'];
+
+    const t = useTranslations('subscriptions.detail');
+    const { theme } = useOrchestratorTheme();
+    const {
+        productBlockIconStyle,
+        productBlockPanelStyle,
+        productBlockLeftColStyle,
+        productBlockFirstLeftColStyle,
+        productBlockRightColStyle,
+        productBlockFirstRightColStyle,
+    } = useWithOrchestratorTheme(getStyles);
+
+    const [hideDetails, setHideDetails] = useState(true);
+
+    const isFirstBlock = (index: number): boolean => {
+        if (!hideDetails) return false;
+        return index === 0;
+    };
+
+    return (
+        <>
+            <EuiSpacer size={'m'}></EuiSpacer>
+            <EuiPanel
+                color="transparent"
+                hasShadow={false}
+                css={productBlockPanelStyle}
+            >
+                <EuiFlexGroup>
+                    <EuiFlexItem grow={false}>
+                        <div css={productBlockIconStyle}>
+                            <EuiIcon
+                                type="filebeatApp"
+                                color={theme.colors.primary}
+                            />
+                        </div>
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                        <EuiText grow={true}>
+                            <h3>
+                                {getProductBlockTitle(
+                                    productBlockInstanceValues,
+                                )}
+                            </h3>
+                        </EuiText>
+                        <EuiText>{`${t(
+                            'subscriptionInstanceId',
+                        )}: ${subscriptionInstanceId}`}</EuiText>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                        <EuiButtonEmpty
+                            aria-label={
+                                hideDetails
+                                    ? t('showDetails')
+                                    : t('hideDetails')
+                            }
+                            size={'m'}
+                            onClick={() => setHideDetails(!hideDetails)}
+                        >
+                            {hideDetails ? t('showDetails') : t('hideDetails')}
+                        </EuiButtonEmpty>
+                    </EuiFlexItem>
+                </EuiFlexGroup>
+
+                <EuiSpacer size={'m'}></EuiSpacer>
+                {
+                    <table width="100%">
+                        {!hideDetails && (
+                            <>
+                                <tr key={-2}>
+                                    <td
+                                        valign={'top'}
+                                        css={productBlockFirstLeftColStyle}
+                                    >
+                                        <b>{t('ownerSubscriptionId')}</b>
+                                    </td>
+                                    <td
+                                        valign={'top'}
+                                        css={productBlockFirstRightColStyle}
+                                    >
+                                        {subscriptionId ===
+                                        ownerSubscriptionId ? (
+                                            <>
+                                                {subscriptionId}
+                                                <EuiBadge>{t('self')}</EuiBadge>
+                                            </>
+                                        ) : (
+                                            <a
+                                                href={`${PATH_SUBSCRIPTIONS}/${ownerSubscriptionId}`}
+                                            >
+                                                {ownerSubscriptionId}
+                                            </a>
+                                        )}
+                                    </td>
+                                </tr>
+                                <tr key={-1}>
+                                    <td
+                                        valign={'top'}
+                                        css={productBlockLeftColStyle}
+                                    >
+                                        <b>{t('inUseByRelations')}</b>
+                                    </td>
+                                    <td
+                                        valign={'top'}
+                                        css={productBlockRightColStyle}
+                                    >
+                                        <EuiCodeBlock language="json">
+                                            {JSON.stringify(
+                                                inUseByRelations,
+                                                null,
+                                                4,
+                                            )}
+                                        </EuiCodeBlock>
+                                    </td>
+                                </tr>
+                            </>
+                        )}
+
+                        {productBlockInstanceValues
+                            .filter(
+                                (productBlockInstanceValue) =>
+                                    !HIDDEN_KEYS.includes(
+                                        productBlockInstanceValue.field,
+                                    ),
+                            )
+                            .map((productBlockInstanceValue, index) => (
+                                <tr key={index}>
+                                    <td
+                                        valign={'top'}
+                                        css={
+                                            isFirstBlock(index)
+                                                ? productBlockFirstLeftColStyle
+                                                : productBlockLeftColStyle
+                                        }
+                                    >
+                                        <b>
+                                            {camelToHuman(
+                                                productBlockInstanceValue.field,
+                                            )}
+                                        </b>
+                                    </td>
+                                    <td
+                                        valign={'top'}
+                                        css={
+                                            isFirstBlock(index)
+                                                ? productBlockFirstRightColStyle
+                                                : productBlockRightColStyle
+                                        }
+                                    >
+                                        {typeof productBlockInstanceValue.value ===
+                                        'boolean' ? (
+                                            <EuiBadge>
+                                                {productBlockInstanceValue.value.toString()}
+                                            </EuiBadge>
+                                        ) : (
+                                            productBlockInstanceValue.value
+                                        )}
+                                    </td>
+                                </tr>
+                            ))}
+                    </table>
+                }
+            </EuiPanel>
+        </>
+    );
+};

package/src/components/WfoSubscription/index.ts

@@ -0,0 +1,8 @@
+export * from './utils';
+export * from './WfoProcessesTimeline';
+export * from './WfoSubscriptionProductBlock';
+export * from './WfoSubscriptionActions';
+export * from './SubscriptionKeyValueBlock';
+export * from './WfoSubscriptionDetailTree';
+export * from './WfoSubscriptionGeneral';
+export * from './WfoSubscription';

package/src/components/WfoSubscription/styles.ts

@@ -0,0 +1,104 @@
+import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+import { css } from '@emotion/react';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const contentCellStyle = {
+        padding: (theme.base / 4) * 3,
+        borderBottom: theme.border.thin,
+    };
+
+    const headerCellStyle = css({
+        ...contentCellStyle,
+        paddingLeft: 0,
+        width: theme.base * 16,
+        fontWeight: theme.font.weight.medium,
+    });
+
+    const emptyCellStyle = css({
+        width: theme.base,
+    });
+
+    const tableStyle = css({
+        backgroundColor: theme.colors.lightestShade,
+        width: '100%',
+        borderRadius: theme.border.radius.medium,
+        marginTop: theme.base / 2,
+    });
+
+    const timeLineStyle = css({
+        paddingLeft: theme.base / 2,
+    });
+    const workflowTargetStyle = css({ fontWeight: theme.font.weight.bold });
+
+    const lastContentCellStyle = css({
+        ...contentCellStyle,
+        border: 0,
+    });
+
+    const lastHeaderCellStyle = css({
+        padding: theme.base,
+        paddingLeft: 0,
+        width: 250,
+        fontWeight: theme.font.weight.medium,
+        border: 0,
+    });
+
+    const productBlockIconStyle = css({
+        width: 45,
+        height: 45,
+        backgroundColor: 'rgb(193,221,241,1)',
+        paddingTop: 13,
+        paddingLeft: 15,
+        borderRadius: 7,
+    });
+
+    const productBlockPanelStyle = css({
+        backgroundColor: theme.colors.lightestShade,
+    });
+
+    const productBlockLeftCol = {
+        width: 250,
+        paddingLeft: 0,
+        paddingTop: 10,
+        paddingBottom: 10,
+        borderBottom: `solid 1px ${theme.colors.lightShade}`,
+    };
+
+    const productBlockLeftColStyle = css({ ...productBlockLeftCol });
+
+    const productBlockFirstLeftColStyle = css({
+        borderTop: `solid 1px ${theme.colors.lightShade}`,
+        ...productBlockLeftCol,
+    });
+
+    const productBlockRightCol = {
+        paddingLeft: 0,
+        paddingTop: 10,
+        paddingBottom: 10,
+        borderBottom: `solid 1px ${theme.colors.lightShade}`,
+    };
+
+    const productBlockRightColStyle = css({ ...productBlockRightCol });
+
+    const productBlockFirstRightColStyle = css({
+        borderTop: `solid 1px ${theme.colors.lightShade}`,
+        ...productBlockRightCol,
+    });
+
+    return {
+        contentCellStyle,
+        headerCellStyle,
+        tableStyle,
+        timeLineStyle,
+        workflowTargetStyle,
+        emptyCellStyle,
+        lastContentCellStyle,
+        lastHeaderCellStyle,
+        productBlockIconStyle,
+        productBlockPanelStyle,
+        productBlockLeftColStyle,
+        productBlockFirstLeftColStyle,
+        productBlockRightColStyle,
+        productBlockFirstRightColStyle,
+    };
+};

package/src/components/WfoSubscription/utils/index.ts

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