@orchestrator-ui/orchestrator-ui-components 0.2.7 → 0.3.0

package/src/components/WfoForms/formFields/ImsPortIdField.tsx

@@ -0,0 +1,238 @@
+/*
+ * Copyright 2019-2023 SURF.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactSelect, { SingleValue } from 'react-select';
+
+import { useTranslations } from 'next-intl';
+import { connectField, filterDOMProps } from 'uniforms';
+
+import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
+
+import { getReactSelectInnerComponentStyles } from '@/components/WfoForms/formFields/reactSelectStyles';
+import { useOrchestratorTheme } from '@/hooks';
+
+import { useAxiosApiClient } from '../useAxiosApiClient';
+import { imsPortIdFieldStyling } from './ImsPortIdFieldStyling';
+import { ImsNode, ImsPort, NodeSubscription } from './surf/types';
+import { FieldProps, Option } from './types';
+
+export type ImsPortFieldProps = FieldProps<
+    number,
+    {
+        nodeSubscriptionId?: string;
+        interfaceSpeed: number | string;
+        imsPortMode?: 'patched' | 'unpatched' | 'all';
+        nodeStatuses?: ('active' | 'provisioning')[];
+    }
+>;
+
+function nodeToOptionCorelink(node: NodeSubscription): Option {
+    return {
+        value: node.subscription_id,
+        label: `${node.subscription_id.substring(0, 8)} ${
+            node.description.trim() || '<No description>'
+        }`,
+    };
+}
+
+declare module 'uniforms' {
+    interface FilterDOMProps {
+        nodeSubscriptionId: never;
+        interfaceSpeed: never;
+        nodeStatuses: never;
+        imsPortMode: never;
+    }
+}
+filterDOMProps.register(
+    'nodeSubscriptionId',
+    'interfaceSpeed',
+    'nodeStatuses',
+    'imsPortMode',
+);
+
+function ImsPortId({
+    id,
+    name,
+    label,
+    description,
+    onChange,
+    value,
+    disabled,
+    readOnly,
+    error,
+    showInlineError,
+    errorMessage,
+    nodeSubscriptionId,
+    interfaceSpeed,
+    imsPortMode = 'all',
+    nodeStatuses,
+    ...props
+}: ImsPortFieldProps) {
+    const apiClient = useAxiosApiClient();
+    const t = useTranslations('pydanticForms');
+    const { theme } = useOrchestratorTheme();
+    // React select allows callbacks to supply style for innercomponents: https://react-select.com/styles#inner-components
+    const reactSelectInnerComponentStyles =
+        getReactSelectInnerComponentStyles(theme);
+
+    const [nodes, setNodes] = useState<ImsNode[] | NodeSubscription[]>([]);
+    const [nodeId, setNodeId] = useState<number | string | undefined>(
+        nodeSubscriptionId,
+    );
+    const [ports, setPorts] = useState<ImsPort[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    const onChangeNodes = useCallback(
+        (option: SingleValue<Option>) => {
+            const value = option?.value;
+
+            if (value === undefined) {
+                return;
+            }
+
+            setLoading(true);
+            setNodeId(value);
+            setPorts([]);
+
+            apiClient
+                .getFreePortsByNodeSubscriptionIdAndSpeed(
+                    value as string,
+                    interfaceSpeed as number,
+                    imsPortMode,
+                )
+                .then((result) => {
+                    setPorts(result);
+                    setLoading(false);
+                });
+        },
+        [interfaceSpeed, imsPortMode, apiClient],
+    );
+
+    useEffect(() => {
+        setLoading(true);
+
+        const nodesPromise = apiClient.nodeSubscriptions(
+            nodeStatuses ?? ['active'],
+        );
+        if (nodeSubscriptionId) {
+            nodesPromise.then((result) => {
+                setNodes(
+                    result.filter(
+                        (subscription) =>
+                            subscription.subscription_id === nodeSubscriptionId,
+                    ),
+                );
+                setLoading(false);
+                onChangeNodes({ value: nodeSubscriptionId } as Option);
+            });
+        } else {
+            nodesPromise.then((result) => {
+                setNodes(result);
+                setLoading(false);
+            });
+        }
+    }, [onChangeNodes, nodeStatuses, nodeSubscriptionId, apiClient]);
+    const nodesPlaceholder = loading
+        ? t('widgets.nodePort.loadingNodes')
+        : t('widgets.nodePort.selectNode');
+
+    const portPlaceholder = loading
+        ? t('widgets.nodePort.loadingPorts')
+        : nodeId
+          ? t('widgets.nodePort.selectPort')
+          : t('widgets.nodePort.selectNodeFirst');
+
+    const node_options: Option[] = (nodes as NodeSubscription[]).map(
+        nodeToOptionCorelink,
+    );
+
+    node_options.sort((x, y) => x.label.localeCompare(y.label));
+    const node_value = node_options.find(
+        (option) => option.value === nodeId?.toString(),
+    );
+
+    const port_options: Option<number>[] = ports
+        .map((aPort) => ({
+            value: aPort.id,
+            label: `${aPort.port} (${aPort.status}) (${aPort.iface_type})`,
+        }))
+        .sort((x, y) => x.label.localeCompare(y.label));
+    const port_value = port_options.find((option) => option.value === value);
+
+    return (
+        <EuiFlexItem css={imsPortIdFieldStyling}>
+            <section {...filterDOMProps(props)}>
+                <EuiFormRow
+                    label={label}
+                    labelAppend={<EuiText size="m">{description}</EuiText>}
+                    error={showInlineError ? errorMessage : false}
+                    isInvalid={error}
+                    id={id}
+                    fullWidth
+                >
+                    <section className="node-port">
+                        <div className="node-select">
+                            <EuiFormRow
+                                label="Node"
+                                id={`${id}.node`}
+                                fullWidth
+                            >
+                                <ReactSelect<Option, false>
+                                    inputId={`${id}.node.search`}
+                                    name={`${name}.node`}
+                                    onChange={onChangeNodes}
+                                    options={node_options}
+                                    placeholder={nodesPlaceholder}
+                                    value={node_value}
+                                    isSearchable={true}
+                                    isDisabled={
+                                        disabled ||
+                                        readOnly ||
+                                        !!nodeSubscriptionId ||
+                                        nodes.length === 0
+                                    }
+                                    styles={reactSelectInnerComponentStyles}
+                                />
+                            </EuiFormRow>
+                        </div>
+                        <div className="port-select">
+                            <EuiFormRow label="Port" id={id} fullWidth>
+                                <ReactSelect<Option<number>, false>
+                                    inputId={`${id}.search`}
+                                    name={name}
+                                    onChange={(selected) => {
+                                        onChange(selected?.value);
+                                    }}
+                                    options={port_options}
+                                    placeholder={portPlaceholder}
+                                    value={port_value}
+                                    isSearchable={true}
+                                    isDisabled={
+                                        disabled ||
+                                        readOnly ||
+                                        ports.length === 0
+                                    }
+                                    styles={reactSelectInnerComponentStyles}
+                                />
+                            </EuiFormRow>
+                        </div>
+                    </section>
+                </EuiFormRow>
+            </section>
+        </EuiFlexItem>
+    );
+}
+
+export const ImsPortIdField = connectField(ImsPortId, { kind: 'leaf' });

package/src/components/WfoForms/formFields/ImsPortIdFieldStyling.ts

@@ -0,0 +1,17 @@
+import { css } from '@emotion/react';
+
+export const imsPortIdFieldStyling = css`
+    section.node-port {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        div.node-select {
+            width: 50%;
+        }
+        div.port-select {
+            width: 50%;
+            padding-left: 5px;
+        }
+    }
+`;

package/src/components/WfoForms/formFields/ListAddField.tsx

@@ -39,7 +39,7 @@ function ListAdd({
     ...props
 }: ListAddFieldProps) {
     const { theme } = useOrchestratorTheme();
-    const t = useTranslations('pydanticForms.fields');
+    const t = useTranslations('pydanticForms.backendTranslations');
 
     const nameParts = joinName(null, name);
     const parentName = joinName(nameParts.slice(0, -1));

package/src/components/WfoForms/formFields/ListDelField.tsx

@@ -37,7 +37,7 @@ function ListDel({
     ...props
 }: ListDelFieldProps) {
     const { theme } = useOrchestratorTheme();
-    const t = useTranslations('pydanticForms.fields');
+    const t = useTranslations('pydanticForms.backendTranslations');
 
     const nameParts = joinName(null, name);
     const nameIndex = +nameParts[nameParts.length - 1];

package/src/components/WfoForms/formFields/OptGroupField.tsx

@@ -38,7 +38,7 @@ function OptGroup({
     className = '',
     ...props
 }: OptGroupFieldProps) {
-    const t = useTranslations('pydanticForms.fields');
+    const t = useTranslations('pydanticForms.backendTranslations');
     const enabled = useField('enabled', {})[0].value;
 
     return (

package/src/components/WfoForms/formFields/SubscriptionField.tsx

@@ -250,7 +250,8 @@ function SubscriptionFieldDefinition({
             if (parentName !== name) {
                 if (
                     parent.fieldType === Array &&
-                    // @ts-ignore
+                    // @ts-expect-error Parent field can have the uniqueItems boolean property but this is not part of JSONSchema6 type
+                    // TODO: Figure out why this is so
                     parent.uniqueItems
                 ) {
                     const allValues: string[] = get(model, parentName, []);

package/src/components/WfoForms/formFields/SummaryField.tsx

@@ -0,0 +1,103 @@
+/*
+ * Copyright 2019-2023 SURF.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+import React from 'react';
+
+import { FieldProps, connectField, filterDOMProps } from 'uniforms';
+
+import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
+
+import { getStyles } from '@/components/WfoForms/formFields/SummaryFieldStyling';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+export type SummaryFieldProps = FieldProps<
+    null,
+    {
+        description?: string;
+        data?: { headers: string[]; labels: string[]; columns: string[][] };
+    }
+>;
+
+// onChange not used on purpose
+function Summary({
+    id,
+    label,
+    description,
+    data,
+    ...props
+}: SummaryFieldProps) {
+    const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles);
+
+    if (!data) {
+        return null;
+    }
+
+    const { headers, labels, columns } = data;
+
+    const extraColumnsData = columns.filter((_, index) => index !== 0);
+
+    const rows = columns[0].map((row, index) => (
+        <tr key={index}>
+            {labels && <td className={`label`}>{labels[index]}</td>}
+            <td className={`value`}>
+                {row.includes('<!doctype html>') ? (
+                    <div
+                        className="emailMessage"
+                        dangerouslySetInnerHTML={{ __html: row }}
+                    ></div>
+                ) : (
+                    row
+                )}
+            </td>
+            {extraColumnsData &&
+                extraColumnsData.map((_, idx) => (
+                    <td className={`value`} key={idx}>
+                        {extraColumnsData[idx][index]}
+                    </td>
+                ))}
+        </tr>
+    ));
+
+    const tableHeader =
+        !headers || headers.length === 0 ? null : (
+            <tr>
+                {labels && <th />}
+                {headers.map((header, idx) => (
+                    <th key={idx}>{header}</th>
+                ))}
+            </tr>
+        );
+
+    return (
+        <EuiFlexItem css={summaryFieldStyle}>
+            <section {...filterDOMProps(props)}>
+                <EuiFormRow
+                    label={label}
+                    labelAppend={<EuiText size="m">{description}</EuiText>}
+                    id={id}
+                    fullWidth
+                >
+                    <section className="table-summary">
+                        <table id={`${id}-table`}>
+                            <thead>{tableHeader}</thead>
+                            <tbody>{rows}</tbody>
+                        </table>
+                    </section>
+                </EuiFormRow>
+            </section>
+        </EuiFlexItem>
+    );
+}
+
+export const SummaryField = connectField(Summary, { kind: 'leaf' });

package/src/components/WfoForms/formFields/SummaryFieldStyling.ts

@@ -0,0 +1,46 @@
+import { tint } from '@elastic/eui';
+import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+import { css } from '@emotion/react';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const toShadeColor = (color: string) => tint(color, 0.9);
+
+    const summaryFieldStyle = css({
+        'div.emailMessage': {
+            td: {
+                color: theme.colors.text,
+            },
+            p: {
+                color: theme.colors.text,
+            },
+            html: {
+                marginLeft: '-10px',
+            },
+        },
+        'section.table-summary': {
+            marginTop: '20px',
+            width: '100%',
+            td: {
+                padding: '10px',
+                verticalAlign: 'top',
+            },
+            'td:not(:first-child):not(:last-child)': {
+                borderRight: `1px solid ${theme.colors.lightestShade}`,
+            },
+            '.label': {
+                fontWeight: 'bold',
+                color: theme.colors.lightestShade,
+                backgroundColor: theme.colors.primary,
+                borderRight: `2px solid ${theme.colors.lightestShade}`,
+                borderBottom: `1px solid ${theme.colors.lightestShade}`,
+            },
+            '.value': {
+                backgroundColor: toShadeColor(theme.colors.primary),
+                borderBottom: `1px solid ${theme.colors.lightestShade}`,
+            },
+        },
+    });
+    return {
+        summaryFieldStyle: summaryFieldStyle,
+    };
+};

package/src/components/WfoForms/formFields/VlanField.tsx

@@ -210,20 +210,20 @@ function Vlan({
     const placeholder = imsIsLoading
         ? t('widgets.vlan.loadingIms')
         : subscriptionId
-        ? t('widgets.vlan.placeholder')
-        : t('widgets.vlan.placeholderNoServicePort');
+          ? t('widgets.vlan.placeholder')
+          : t('widgets.vlan.placeholderNoServicePort');
 
     const errorMessageExtra = missingInIms
         ? t('widgets.vlan.missingInIms')
         : !validFormat
-        ? t('widgets.vlan.invalidVlan')
-        : vlansInUse.length
-        ? vlansInUse.length >= 1 && vlansInUse[0] === 0
-            ? t('widgets.vlan.untaggedPortInUse')
-            : t('widgets.vlan.vlansInUseError', {
-                  vlans: vlanRangeFromNumbers(vlansInUse),
-              })
-        : undefined;
+          ? t('widgets.vlan.invalidVlan')
+          : vlansInUse.length
+            ? vlansInUse.length >= 1 && vlansInUse[0] === 0
+                ? t('widgets.vlan.untaggedPortInUse')
+                : t('widgets.vlan.vlansInUseError', {
+                      vlans: vlanRangeFromNumbers(vlansInUse),
+                  })
+            : undefined;
 
     let message = '';
     if (!imsIsLoading) {

package/src/components/WfoForms/formFields/index.ts

@@ -21,9 +21,11 @@ export * from './TimestampField';
 export * from './OrganisationField';
 export * from './ContactPersonNameField';
 export * from './ImsNodeIdField';
+export * from './ImsPortIdField';
 export * from './LocationCodeField';
 export * from './VlanField';
 export * from './NestField';
 export * from './OptGroupField';
 export * from './SubscriptionField';
 export * from './IpNetworkField';
+export * from './SummaryField';

package/src/components/WfoForms/formFields/surf/types.ts

@@ -1,3 +1,19 @@
+import { ProductDefinition } from '../../../../types';
+
+export interface NodeSubscription {
+    name: string;
+    subscription_id: string;
+    description: string;
+    product: ProductDefinition;
+    product_id: string;
+    status: string;
+    insync: boolean;
+    customer_id: string;
+    start_date: number;
+    end_date: number;
+    note: string;
+}
+
 export interface ServicePort {
     subscription_id?: string;
     vlan?: string;
@@ -22,6 +38,16 @@ export enum ProductTag {
     AGGSPNL = 'AGGSPNL',
 }
 
+export interface ImsPort {
+    id: number;
+    line_name: string;
+    node: string;
+    port: string;
+    iface_type: string;
+    patchposition: string;
+    status: string;
+}
+
 export interface ImsNode {
     id: number;
     name: string;

package/src/components/WfoForms/formFields/utils.spec.ts

@@ -51,6 +51,7 @@ const testSubscriptionDetail: SubscriptionDetail = {
                 createdBy: 'Test',
                 workflowTarget: WorkflowTarget.CREATE,
                 workflowName: 'Test workflow name',
+                isTask: false,
             },
         ],
     },

package/src/components/WfoJsonCodeBlock/index.ts

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

package/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx

@@ -54,7 +54,6 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
                         <WfoLogoutIcon color={theme.colors.emptyShade} />
                     )}
                     css={{ width: 48, height: 48, marginLeft: 10 }}
-                    color="ghost"
                     onClick={handleSideMenuClick}
                 />
             </EuiHeaderSection>
@@ -72,8 +71,10 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
                         iconType={() => (
                             <WfoLogoutIcon color={theme.colors.emptyShade} />
                         )}
-                        css={{ width: 48, height: 48 }}
-                        color="ghost"
+                        css={{
+                            width: 48,
+                            height: 48,
+                        }}
                         onClick={handleLogoutClick}
                     />
                 </EuiHeaderSectionItem>

package/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx

@@ -12,11 +12,11 @@ import {
     PATH_METADATA_PRODUCT_BLOCKS,
     PATH_METADATA_RESOURCE_TYPES,
     PATH_METADATA_WORKFLOWS,
-    PATH_PROCESSES,
     PATH_SETTINGS,
     PATH_START,
     PATH_SUBSCRIPTIONS,
     PATH_TASKS,
+    PATH_WORKFLOWS,
 } from '../paths';
 import { WfoStartCreateWorkflowButtonComboBox } from './WfoStartCreateWorkflowButtonComboBox';
 
@@ -37,7 +37,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
 
     const defaultMenuItems: EuiSideNavItemType<object>[] = [
         {
-            name: 'Start',
+            name: t('start'),
             id: '2',
             isSelected: router.pathname === PATH_START,
             onClick: (e) => {
@@ -46,17 +46,17 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
             },
         },
         {
-            name: 'Processes',
+            name: t('workflows'),
             id: '3',
-            isSelected: router.pathname === PATH_PROCESSES,
-            href: PATH_PROCESSES,
+            isSelected: router.pathname === PATH_WORKFLOWS,
+            href: PATH_WORKFLOWS,
             onClick: (e) => {
                 e.preventDefault();
-                router.push(PATH_PROCESSES);
+                router.push(PATH_WORKFLOWS);
             },
         },
         {
-            name: 'Subscriptions',
+            name: t('subscriptions'),
             id: '4',
             isSelected: router.pathname === PATH_SUBSCRIPTIONS,
             href: PATH_SUBSCRIPTIONS,
@@ -66,14 +66,14 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
             },
         },
         {
-            name: 'Metadata',
+            name: t('metadata'),
             id: '5',
             onClick: () => {
                 router.push(PATH_METADATA);
             },
             items: [
                 {
-                    name: 'Products',
+                    name: t('metadataProducts'),
                     id: '5.1',
                     isSelected: router.pathname === PATH_METADATA_PRODUCTS,
                     onClick: (e) => {
@@ -82,7 +82,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
                     },
                 },
                 {
-                    name: 'Product blocks',
+                    name: t('metadataProductblocks'),
                     id: '5.2',
                     isSelected:
                         router.pathname === PATH_METADATA_PRODUCT_BLOCKS,
@@ -92,7 +92,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
                     },
                 },
                 {
-                    name: 'Resource types',
+                    name: t('metadataResourceTypes'),
                     id: '5.3',
                     isSelected:
                         router.pathname === PATH_METADATA_RESOURCE_TYPES,
@@ -102,7 +102,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
                     },
                 },
                 {
-                    name: 'Workflows',
+                    name: t('metadataWorkflows'),
                     id: '5.4',
                     isSelected: router.pathname === PATH_METADATA_WORKFLOWS,
                     onClick: (e) => {
@@ -113,7 +113,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
             ],
         },
         {
-            name: 'Tasks',
+            name: t('tasks'),
             isSelected: router.pathname === PATH_TASKS,
             id: '6',
             onClick: (e) => {
@@ -123,7 +123,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
             href: PATH_TASKS,
         },
         {
-            name: 'Settings',
+            name: t('settings'),
             isSelected: router.pathname === PATH_SETTINGS,
             id: '7',
             onClick: (e) => {