workfloworchestrator · DutchBen · May 23, 2024 · May 22, 2024 · May 23, 2024
diff --git a/.changeset/clever-buckets-deny.md b/.changeset/clever-buckets-deny.md
@@ -0,0 +1,5 @@
+---
+"@orchestrator-ui/orchestrator-ui-components": minor
+---
+
+Replaces subscriptionsWithFilter REST call with a graphQL query
diff --git a/apps/wfo-ui b/apps/wfo-ui
diff --git a/...chestrator-ui-components/src/components/WfoForms/formFields/deprecated/ImsPortIdField.tsx b/...chestrator-ui-components/src/components/WfoForms/formFields/deprecated/ImsPortIdField.tsx
@@ -22,15 +22,14 @@ import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
 
 import { useWithOrchestratorTheme } from '@/hooks';
 import {
-    nodeSubscriptions,
     useFreePortsByNodeSubscriptionIdAndSpeedQuery,
-    useSubscriptionsWithFiltersQuery,
+    useGetNodeSubscriptionOptionsQuery,
 } from '@/rtk/endpoints/formFields';
 
 import { getSelectFieldStyles } from '../SelectField/styles';
 import { FieldProps, Option } from '../types';
 import { imsPortIdFieldStyling } from './ImsPortIdFieldStyling';
-import { ImsNode, ImsPort, NodeSubscription } from './types';
+import { ImsPort, NodeSubscriptionOption } from './types';
 
 export type ImsPortFieldProps = FieldProps<
     number,
@@ -42,11 +41,11 @@ export type ImsPortFieldProps = FieldProps<
     }
 >;
 
-function nodeToOptionCorelink(node: NodeSubscription): Option {
+function nodeToOptionCorelink(nodeOption: NodeSubscriptionOption): Option {
     return {
-        value: node.subscription_id,
-        label: `${node.subscription_id.substring(0, 8)} ${
-            node.description.trim() || '<No description>'
+        value: nodeOption.subscriptionId,
+        label: `${nodeOption.subscriptionId.substring(0, 8)} ${
+            nodeOption.description.trim() || '<No description>'
         }`,
     };
 }
@@ -84,17 +83,16 @@ function ImsPortId({
     nodeStatuses,
     ...props
 }: ImsPortFieldProps) {
-    const t = useTranslations('pydanticForms');
-    // React select allows callbacks to supply style for innercomponents: https://react-select.com/styles#inner-components
-    const { reactSelectInnerComponentStyles } =
-        useWithOrchestratorTheme(getSelectFieldStyles);
-
-    const [nodes, setNodes] = useState<ImsNode[] | NodeSubscription[]>([]);
     const [nodeId, setNodeId] = useState<number | string | undefined>(
         nodeSubscriptionId,
     );
     const [ports, setPorts] = useState<ImsPort[]>([]);
 
+    const t = useTranslations('pydanticForms');
+    // React select allows callbacks to supply style for innercomponents: https://react-select.com/styles#inner-components
+    const { reactSelectInnerComponentStyles } =
+        useWithOrchestratorTheme(getSelectFieldStyles);
+
     const {
         data: freePorts,
         error: freePortsError,
@@ -110,9 +108,10 @@ function ImsPortId({
         },
     );
 
-    const { data: nodeSubscriptionsData } = useSubscriptionsWithFiltersQuery({
-        filters: nodeSubscriptions(nodeStatuses ?? ['active']),
-    });
+    const { data: nodeSubscriptionOptions } =
+        useGetNodeSubscriptionOptionsQuery({
+            statuses: nodeStatuses?.join('-') ?? 'active',
+        });
 
     useEffect(() => {
         setPorts(freePorts ?? []);
@@ -133,26 +132,6 @@ function ImsPortId({
         [onChange],
     );
 
-    useEffect(() => {
-        if (nodeSubscriptionId && nodeSubscriptionsData) {
-            setNodes(
-                nodeSubscriptionsData.filter(
-                    (subscription) =>
-                        subscription.subscription_id === nodeSubscriptionId,
-                ),
-            );
-            onChangeNodes({ value: nodeSubscriptionId } as Option);
-        } else {
-            setNodes(nodeSubscriptionsData ?? []);
-        }
-    }, [
-        onChangeNodes,
-        nodeStatuses,
-        nodeSubscriptionId,
-        loading,
-        nodeSubscriptionsData,
-    ]);
-
     const nodesPlaceholder = loading
         ? t('widgets.nodePort.loadingNodes')
         : t('widgets.nodePort.selectNode');
@@ -163,22 +142,21 @@ function ImsPortId({
           ? t('widgets.nodePort.selectPort')
           : t('widgets.nodePort.selectNodeFirst');
 
-    const node_options: Option[] = (nodes as NodeSubscription[]).map(
-        nodeToOptionCorelink,
-    );
+    const nodeOptions: Option[] =
+        nodeSubscriptionOptions?.map(nodeToOptionCorelink) || [];
 
-    node_options.sort((x, y) => x.label.localeCompare(y.label));
-    const node_value = node_options.find(
+    nodeOptions.sort((x, y) => x.label.localeCompare(y.label));
+    const nodeValue = nodeOptions.find(
         (option) => option.value === nodeId?.toString(),
     );
 
-    const port_options: Option<number>[] = ports
+    const portOptions: 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);
+    const portValue = portOptions.find((option) => option.value === value);
 
     return (
         <EuiFlexItem css={imsPortIdFieldStyling}>
@@ -202,15 +180,15 @@ function ImsPortId({
                                     inputId={`${id}.node.search`}
                                     name={`${name}.node`}
                                     onChange={onChangeNodes}
-                                    options={node_options}
+                                    options={nodeOptions}
                                     placeholder={nodesPlaceholder}
-                                    value={node_value}
+                                    value={nodeValue}
                                     isSearchable={true}
                                     isDisabled={
                                         disabled ||
                                         readOnly ||
-                                        !!nodeSubscriptionId ||
-                                        nodes.length === 0
+                                        nodeOptions.length === 0 ||
+                                        !!nodeSubscriptionId
                                     }
                                     styles={reactSelectInnerComponentStyles}
                                 />
@@ -224,14 +202,14 @@ function ImsPortId({
                                     onChange={(selected) => {
                                         onChange(selected?.value);
                                     }}
-                                    options={port_options}
+                                    options={portOptions}
                                     placeholder={portPlaceholder}
-                                    value={port_value || null}
+                                    value={portValue || null}
                                     isSearchable={true}
                                     isDisabled={
                                         disabled ||
                                         readOnly ||
-                                        ports.length === 0
+                                        portOptions.length === 0
                                     }
                                     styles={reactSelectInnerComponentStyles}
                                 />

diff --git a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/types.ts b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/types.ts
@@ -1,18 +1,4 @@
-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;
-}
+import { GraphQlSinglePage, Subscription } from '@/types';
 
 export interface ServicePort {
     subscription_id?: string;
@@ -77,3 +63,12 @@ export interface IpBlock {
     is_subnet: boolean;
     state_repr: string;
 }
+
+export type NodeSubscriptionOption = Pick<
+    Subscription,
+    'subscriptionId' | 'description'
+>;
+
+export interface NodeSubscriptionOptionsResult {
+    subscriptions: GraphQlSinglePage<NodeSubscriptionOption>;
+}
diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/formFields.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/formFields.ts
@@ -1,37 +1,34 @@
-import { ImsNode, ImsPort, NodeSubscription, VlanRange } from '@/components';
+import {
+    ImsNode,
+    ImsPort,
+    NodeSubscriptionOption,
+    NodeSubscriptionOptionsResult,
+    VlanRange,
+} from '@/components';
 import { ContactPerson } from '@/components/WfoForms/formFields/types';
+import { NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS } from '@/configuration';
 import { BaseQueryTypes, orchestratorApi } from '@/rtk';
 
 const LOCATION_CODES_ENDPOINT = 'surf/crm/location_codes';
 const CONTACT_PERSONS_ENDPOINT = 'surf/crm/contacts';
 const IMS_NODES_ENDPOINT = '/surf/ims/nodes';
 const VLANS_BY_SERVICE_PORT = 'surf/subscriptions/vlans-by-service-port';
 const FREE_PORTS_BY_NODE_SUBSCRIPTION_AND_SPEED = 'surf/ims/free_ports';
-const SUBSCRIPTIONS = 'subscriptions';
 
-export const subscriptionsParams = (
-    tagList: string[] = [],
-    statusList: string[] = [],
-    productList: string[] = [],
-): string => {
-    const filters = [];
-
-    if (tagList.length)
-        filters.push(`tags,${encodeURIComponent(tagList.join('-'))}`);
-    if (statusList.length)
-        filters.push(`statuses,${encodeURIComponent(statusList.join('-'))}`);
-    if (productList.length)
-        filters.push(`products,${encodeURIComponent(productList.join('-'))}`);
-
-    const params = new URLSearchParams();
-    if (filters.length) params.set('filter', filters.join(','));
-
-    return `${filters.length ? '?' : ''}${params.toString()}`;
-};
-
-export const nodeSubscriptions = (statusList: string[] = []): string => {
-    return subscriptionsParams(['Node'], statusList);
-};
+const nodeSubscriptionsQuery = `query NodeSubscriptions(
+    $statuses: String!
+) {
+    subscriptions(filterBy: [
+        {field: "tag", value: "Node"},
+        {field: "status", value: $statuses}
+
+    ], first: ${NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS}, after: 0) {
+        page {
+            description
+            subscriptionId
+        }
+    }
+}`;
 
 const formFieldsApi = orchestratorApi.injectEndpoints({
     endpoints: (build) => ({
@@ -107,20 +104,19 @@ const formFieldsApi = orchestratorApi.injectEndpoints({
                 baseQueryType: BaseQueryTypes.fetch,
             },
         }),
-        subscriptionsWithFilters: build.query<
-            NodeSubscription[],
-            { filters: string }
+        getNodeSubscriptionOptions: build.query<
+            NodeSubscriptionOption[],
+            { statuses: string }
         >({
-            query: ({ filters }) => ({
-                url: `${SUBSCRIPTIONS}/${filters}`,
-                method: 'GET',
-                headers: {
-                    'Content-Type': 'application/json',
+            query: ({ statuses }) => ({
+                document: nodeSubscriptionsQuery,
+                variables: {
+                    statuses,
                 },
             }),
-            extraOptions: {
-                baseQueryType: BaseQueryTypes.fetch,
-            },
+            transformResponse: (
+                response: NodeSubscriptionOptionsResult,
+            ): NodeSubscriptionOption[] => response?.subscriptions?.page || [],
         }),
     }),
 });
@@ -131,5 +127,5 @@ export const {
     useImsNodesQuery,
     useVlansByServicePortQuery,
     useFreePortsByNodeSubscriptionIdAndSpeedQuery,
-    useSubscriptionsWithFiltersQuery,
+    useGetNodeSubscriptionOptionsQuery,
 } = formFieldsApi;
+2 −0		configuration/configuration.ts
+10 −40		package-lock.json
+73 −50		pages/_app.tsx
+169 −0		pages/example-form.tsx
+0 −27		pages/forms.tsx