@orchestrator-ui/orchestrator-ui-components 2.4.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "2.4.0",
+    "version": "2.6.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {

package/src/components/WfoBadges/WfoBadge/WfoBadge.tsx

@@ -17,8 +17,8 @@ export const WfoBadge: FC<WfoBadgeProps> = ({
     size,
     ...restProps
 }) => (
-    <EuiBadge {...restProps}>
-        <EuiText title="" color={textColor} size={size ?? 'xs'}>
+    <EuiBadge title="" {...restProps}>
+        <EuiText color={textColor} size={size ?? 'xs'}>
             <b>{children}</b>
         </EuiText>
     </EuiBadge>

package/src/components/WfoBadges/WfoEngineStatusBadge/WfoEngineStatusBadge.tsx

@@ -1,16 +1,24 @@
 import React from 'react';
 
+import { useGetOrchestratorConfig, useOrchestratorTheme } from '@/hooks';
+import { WfoStatusDotIcon } from '@/icons/WfoStatusDotIcon';
 import { useGetEngineStatusQuery } from '@/rtk';
+import { useLazyStreamMessagesQuery } from '@/rtk/endpoints/streamMessages';
 import { EngineStatus } from '@/types';
 
-import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
-import { WfoStatusDotIcon } from '../../../icons/WfoStatusDotIcon';
 import { WfoHeaderBadge } from '../WfoHeaderBadge';
 
 export const WfoEngineStatusBadge = () => {
     const { theme } = useOrchestratorTheme();
     const { data } = useGetEngineStatusQuery();
     const { engineStatus } = data || {};
+    const { useWebSockets } = useGetOrchestratorConfig();
+    const [websocketTrigger, { isUninitialized }] =
+        useLazyStreamMessagesQuery();
+
+    if (useWebSockets && isUninitialized) {
+        websocketTrigger();
+    }
 
     const engineStatusText: string = engineStatus
         ? `Engine is ${engineStatus}`

package/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -108,12 +108,12 @@ export const WfoProcessesList = ({
             renderData: (value, { processId }) => (
                 <Link href={`${PATH_WORKFLOWS}/${processId}`}>{value}</Link>
             ),
+            renderTooltip: (value) => value,
         },
         lastStep: {
             columnType: ColumnType.DATA,
             label: t('step'),
             width: '15%',
-            renderTooltip: (value) => value,
         },
         lastStatus: {
             columnType: ColumnType.DATA,
@@ -164,6 +164,10 @@ export const WfoProcessesList = ({
                     subscriptions={subscriptions}
                 />
             ),
+            renderTooltip: ({ page: subscriptions }) =>
+                subscriptions.map(({ description, subscriptionId }) => (
+                    <p key={subscriptionId}>- {description}</p>
+                )),
             clipboardText: ({ page: subscriptions }) =>
                 subscriptions
                     .map(({ subscriptionId }) => subscriptionId)

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoProductBlockKeyValueRow.tsx

@@ -4,13 +4,13 @@ import { EuiBadge } from '@elastic/eui';
 
 import { useSubscriptionDetailValueOverride } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
-import { FieldValue } from '@/types';
+import { FieldValue, RenderableFieldValue } from '@/types';
 import { camelToHuman } from '@/utils';
 
 import { getStyles } from './styles';
 
 export type WfoProductBlockKeyValueRowProps = {
-    fieldValue: FieldValue;
+    fieldValue: FieldValue | RenderableFieldValue;
 };
 
 export const WfoProductBlockKeyValueRow: FC<
@@ -21,14 +21,18 @@ export const WfoProductBlockKeyValueRow: FC<
 
     const { field, value } = fieldValue;
 
-    const WfoProductBlockValue: FC<{ value: FieldValue['value'] }> = ({
-        value,
-    }) =>
-        typeof value === 'boolean' ? (
-            <EuiBadge>{value.toString()}</EuiBadge>
-        ) : (
-            <>{value}</>
-        );
+    const WfoProductBlockValue: FC<{
+        value: RenderableFieldValue['value'];
+    }> = ({ value }) => {
+        if (typeof value === 'boolean') {
+            return <EuiBadge>{value.toString()}</EuiBadge>;
+        } else if (Array.isArray(value)) {
+            const result = value.join(', ');
+            return <>{result}</>;
+        } else {
+            return <>{value}</>;
+        }
+    };
 
     return (
         <tr css={rowStyle}>

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx

@@ -229,9 +229,10 @@ export const WfoSubscriptionProductBlock = ({
                                     .map((productBlockInstanceValue, index) => {
                                         if (
                                             productBlockInstanceValue &&
-                                            !isEmpty(
+                                            (!isEmpty(
                                                 productBlockInstanceValue.value,
-                                            )
+                                            ) ||
+                                                showDetails)
                                         ) {
                                             return (
                                                 <WfoProductBlockKeyValueRow

package/src/components/WfoSubscription/overrides/useSubscriptionDetailValueOverride.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { ValueOverrideFunction } from '@/rtk';
 import { useAppSelector } from '@/rtk/hooks';
-import { FieldValue } from '@/types';
+import { FieldValue, RenderableFieldValue } from '@/types';
 
 export const useSubscriptionDetailValueOverride = () => {
     const valueOverrideConfiguration = useAppSelector(
@@ -12,7 +12,7 @@ export const useSubscriptionDetailValueOverride = () => {
     );
 
     const getOverriddenValue = (
-        fieldValue: FieldValue,
+        fieldValue: FieldValue | RenderableFieldValue,
     ): React.ReactNode | null => {
         if (!valueOverrideConfiguration) {
             return null;

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -93,6 +93,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
                         {value}
                     </Link>
                 ),
+                renderTooltip: (value) => value,
             },
             status: {
                 columnType: ColumnType.DATA,
@@ -153,6 +154,10 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
                 renderData: (value) => <WfoInlineJson data={value} />,
                 renderDetails: (value) =>
                     value && <WfoJsonCodeBlock data={value} isBasicStyle />,
+                renderTooltip: (value) =>
+                    value && (
+                        <WfoJsonCodeBlock data={value} isBasicStyle={false} />
+                    ),
             },
         };
 

package/src/components/WfoTable/WfoFirstPartUUID/WfoFirstPartUUID.tsx

@@ -17,7 +17,7 @@ export const WfoFirstPartUUID: FC<WfoFirstUUIDPartProps> = ({ UUID }) => {
     const { theme } = useOrchestratorTheme();
 
     return (
-        <span css={uuidFieldStyle} title={UUID}>
+        <span css={uuidFieldStyle}>
             {getFirstUuidPart(UUID)}
             <EuiCopy textToCopy={UUID}>
                 {(copy) => (

package/src/components/WfoTable/WfoInlineJson/WfoInlineJson.tsx

@@ -10,5 +10,5 @@ export const WfoInlineJson: FC<WfoInlineJsonProps> = ({ data }) => {
     }
 
     const valueAsString = JSON.stringify(data);
-    return <span title={valueAsString}>{valueAsString}</span>;
+    return <span>{valueAsString}</span>;
 };

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.4.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.6.0';

package/src/icons/WfoPort.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoPort: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = '#000000',
+}) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+    >
+        <path
+            fill={color}
+            id="icon-port-a"
+            d="M6.66666667,5.33333333 C5.930287,5.33333333 5.33333333,5.930287 5.33333333,6.66666667 L5.33333333,17.3333333 C5.33333333,18.069713 5.930287,18.6666667 6.66666667,18.6666667 L17.3333333,18.6666667 C18.069713,18.6666667 18.6666667,18.069713 18.6666667,17.3333333 L18.6666667,6.66666667 C18.6666667,5.930287 18.069713,5.33333333 17.3333333,5.33333333 L6.66666667,5.33333333 Z M6.66666667,4 L17.3333333,4 C18.8060927,4 20,5.19390733 20,6.66666667 L20,17.3333333 C20,18.8060927 18.8060927,20 17.3333333,20 L6.66666667,20 C5.19390733,20 4,18.8060927 4,17.3333333 L4,6.66666667 C4,5.19390733 5.19390733,4 6.66666667,4 Z M14,7.33333333 C14.3681898,7.33333333 14.6666667,7.63181017 14.6666667,8 L14.6666667,10 L16.6666667,10 C17.0348565,10 17.3333333,10.2984768 17.3333333,10.6666667 L17.3333333,16 C17.3333333,16.3681898 17.0348565,16.6666667 16.6666667,16.6666667 L7.33333333,16.6666667 C6.9651435,16.6666667 6.66666667,16.3681898 6.66666667,16 L6.66666667,10.6666667 C6.66666667,10.2984768 6.9651435,10 7.33333333,10 L9.33333333,10 L9.33333333,8 C9.33333333,7.63181017 9.63181017,7.33333333 10,7.33333333 L14,7.33333333 Z M13.3333333,8.66666667 L10.6666667,8.66666667 L10.6666667,10 C10.6666667,10.7363797 10.069713,11.3333333 9.33333333,11.3333333 L8,11.3333333 L8,15.3333333 L16,15.3333333 L16,11.3333333 L14.6666667,11.3333333 C13.930287,11.3333333 13.3333333,10.7363797 13.3333333,10 L13.3333333,8.66666667 Z M9.66666667,12.6666667 C9.85076158,12.6666667 10,12.8159051 10,13 L10,14.3333333 C10,14.5174282 9.85076158,14.6666667 9.66666667,14.6666667 L9,14.6666667 C8.81590508,14.6666667 8.66666667,14.5174282 8.66666667,14.3333333 L8.66666667,13 C8.66666667,12.8159051 8.81590508,12.6666667 9,12.6666667 L9.66666667,12.6666667 Z M12.3333333,12.6666667 C12.5174282,12.6666667 12.6666667,12.8159051 12.6666667,13 L12.6666667,14.3333333 C12.6666667,14.5174282 12.5174282,14.6666667 12.3333333,14.6666667 L11.6666667,14.6666667 C11.4825718,14.6666667 11.3333333,14.5174282 11.3333333,14.3333333 L11.3333333,13 C11.3333333,12.8159051 11.4825718,12.6666667 11.6666667,12.6666667 L12.3333333,12.6666667 Z M15,12.6666667 C15.1840949,12.6666667 15.3333333,12.8159051 15.3333333,13 L15.3333333,14.3333333 C15.3333333,14.5174282 15.1840949,14.6666667 15,14.6666667 L14.3333333,14.6666667 C14.1492384,14.6666667 14,14.5174282 14,14.3333333 L14,13 C14,12.8159051 14.1492384,12.6666667 14.3333333,12.6666667 L15,12.6666667 Z"
+            _ngcontent-ng-c520298222=""
+        ></path>
+    </svg>
+);

package/src/icons/index.ts

@@ -36,3 +36,4 @@ export * from './WfoBell';
 export * from './WfoWarningTriangle';
 export * from './WfoExternalLink';
 export * from './WfoTrash';
+export * from './WfoPort';

package/src/messages/en-GB.json

@@ -44,7 +44,7 @@
         "insyncTrue": "in-sync",
         "insyncFalse": "out-of-sync",
         "searchModalTitle": "Search string options",
-        "searchModalText": "<p>The search bar filters the table using the search string</p> <p>Different options are available from free text search covering all data columns, or column specific filtering. <ul><li>Hidden columns are included</li> <li>TSV (text search vector) search only available for subscriptions table</li></ul></p> <p>For example:</p> <li><b>productTag:LP description:test</b> – search within columns (on column productTag and description)</li><li><b>“l2vpn”</b> – free text search</li><li><b>tag:(LP|LR)</b> – multiselect within 1 column</li><li><b>-tag:LP</b> – negated filter</li><li><b>test*</b> – prefix filter</li>"
+        "searchModalText": "<p>Different options are available from free text search covering all data columns, or column specific filtering. Note that: <p></p><ul><li>Hidden columns are included</li> <li>Searching is case-insensitive</li> <li>Ordering of words does not matter (unless it is a Phrase)</li> <li>TSV (text search vector) search only available for subscriptions table</li></ul></p> <p>For example:</p> <li><b>\"l2vpn\"</b> – free text search</li> <li><b>tag:l2vpn</b> – search in a specific column</li><li><b>tag:lp description:test</b> – search in multiple columns</li><li><b>tag:(lp|lr)</b> – multiselect within 1 column</li><li><b>-tag:lp</b> – negated filter</li><li><b>test*</b> – prefix filter</li> <p></p><p><b>Note:</b> Search words containing characters `|-*():\"` may not be valid, as they are part of the search query grammar</p><p>Invalid search strings are for example:</p><ul><li>2a10:e300:fff0::/48</li> <li>\"node123(planned)\"</li> <li>\"node123|planned\"</li></ul>"
     },
     "confirmationDialog": {
         "title": "Please confirm",

package/src/messages/nl-NL.json

@@ -42,8 +42,8 @@
         "unauthorizedPage": "Niet geautoriseerd om deze pagina te bekijken",
         "insyncTrue": "in-sync",
         "insyncFalse": "out-of-sync",
-        "searchModalTitle": "Search string options",
-        "searchModalText": "<p>De zoekbalk filtert the tabel op bases van de zoektermen</p> <p>Verschillende opties zijn beschikbaar om tekst zoekacties uit te voeren over alla data, specifiek per kolom te filteren. <ul><li>Verborgen kolommen worden meegenomen in de zoekactie</li> <li>TSV (text search vector) zoekactie is alleen van toepassing op de subscriptions tabel</li></ul></p> <p>Bijvoorbeeld:</p> <li><b>productTag:LP description:test</b> – search within columns (op kolom productTag en description)</li><li><b>“l2vpn”</b> – vrije tekst search</li><li><b>tag:(LP|LR)</b> – multiselect binnen 1 column</li><li><b>-tag:LP</b> – omgekeerd filter</li><li><b>test*</b> – prefix filter</li>"
+        "searchModalTitle": "Zoekwoorden opties",
+        "searchModalText": "<p>Er zijn verschillende opties beschikbaar: zoeken in vrije tekst voor alle datakolommen en specifiek per kolom te filteren. Houd er rekening mee dat: </p><p></p><ul><li>Verborgen kolommen zijn inbegrepen</li> <li>Zoeken is niet hoofdlettergevoelig</li> <li>De volgorde van woorden doet er niet toe (tenzij het een quote)</li> <li>TSV (text search vector) zoekactie alleen beschikbaar voor subscription tabel</li></ul><p>Bijvoorbeeld:</p> <li><b>\"l2vpn\"</b> – vrije tekst search</li> <li><b>tag:l2vpn</b> – zoeken in een specifieke kolom</li> <li><b>tag:lp beschrijving: test</b> – zoeken in meerdere kolommen</li><li><b>tag:(lp|lr)</b> – multi select binnen 1 kolom</li> <li><b>-tag:lp</b> – omgekeerd filteren</li> <li><b>test*</b> – prefix filter</li> <p></p><p><b>Opmerking:</b> Zoeken op woorden die tekens `|-*():\"` bevatten, zijn mogelijk niet geldig, omdat ze deel uitmaken van de grammatica van de zoekfunctie</p><p>Ongeldige zoekwoorden zijn bijvoorbeeld:</p><ul><li>2a10:e300:fff0::/48</li> <li>\"node123(gepland)\"</li> <li>\"node123|gepland\"</li></ul>"
     },
     "confirmationDialog": {
         "title": "Graag bevestigen",

package/src/rtk/endpoints/streamMessages.ts

@@ -179,4 +179,5 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
     }),
 });
 
-export const { useStreamMessagesQuery } = streamMessagesApi;
+export const { useStreamMessagesQuery, useLazyStreamMessagesQuery } =
+    streamMessagesApi;

package/src/rtk/slices/orchestratorComponentOverride.ts

@@ -2,9 +2,11 @@ import { ReactElement, ReactNode } from 'react';
 
 import { Slice, createSlice } from '@reduxjs/toolkit';
 
-import { FieldValue, SubscriptionDetail } from '@/types';
+import { FieldValue, RenderableFieldValue, SubscriptionDetail } from '@/types';
 
-export type ValueOverrideFunction = (fieldValue: FieldValue) => ReactNode;
+export type ValueOverrideFunction = (
+    fieldValue: FieldValue | RenderableFieldValue,
+) => ReactNode;
 export type ValueOverrideConfiguration = Record<string, ValueOverrideFunction>;
 
 export type WfoSubscriptionDetailGeneralConfiguration = {

package/src/types/types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 
 import { InputForm } from './forms';
@@ -11,6 +13,11 @@ export type FieldValue = {
     value: string | number | boolean | null;
 };
 
+export type RenderableFieldValue = {
+    field: string;
+    value: FieldValue['value'] | ReactNode;
+};
+
 export enum EngineStatus {
     RUNNING = 'RUNNING',
     PAUSING = 'PAUSING',

package/src/utils/index.ts

@@ -15,3 +15,4 @@ export * from './resultFlattener';
 export * from './strings';
 export * from './toObjectWithSortedKeys';
 export * from './uuid';
+export * from './cacheTag';