fix(Designer): Fixed nested loop monitoring view issues (#6633)

fix(Designer): Fixed nested loop monitoring view issues (#6624)

* Fixed nested loop issues

* Add initial e2e test

* Update tests

* Update tests

* Update e2e tests

---------

Co-authored-by: Riley Evans <[email protected]>

Author: ccastrotrejo

e2e/designer/fixtures/real-api.ts

@@ -14,13 +14,14 @@ export class RealDataApi {
     this.siteName = process.env.AZURE_SITE_NAME ?? '';
     this.siteId = `/subscriptions/${process.env.AZURE_SUBSCRIPTION_ID}/resourceGroups/${process.env.AZURE_RESOURCE_GROUP}/providers/Microsoft.Web/sites/${this.siteName}`;
   }
-  async goToWorkflow() {
+  async goToWorkflow(workflowName?: string) {
     await this.page.getByPlaceholder('Select an App').click();
     await this.page.getByPlaceholder('Select an App').fill(this.siteName);
     await this.page.getByPlaceholder('Select an App').press('Enter');
-    await this.page.getByLabel('Workflow').locator('span').filter({ hasText: '' }).click();
-    await this.page.getByRole('option', { name: this.workflowName, exact: true }).click();
+    await this.page.getByText('Select a Workflow').click();
+    await this.page.getByRole('option', { name: workflowName ?? this.workflowName, exact: true }).click();
     await this.page.getByRole('button', { name: 'Toolbox' }).click();
+    await this.page.waitForTimeout(2000);
     await this.page.getByLabel('fit view').click({ force: true });
   }
   async saveWorkflow() {

e2e/designer/real-api/monitoring/NestedLoops/nestedLoops.spec.ts

@@ -0,0 +1,52 @@
+import { expect, test } from '../../../fixtures/real-api';
+test.describe(
+  'Nested loops',
+  {
+    tag: '@real',
+  },
+  () => {
+    test('Sanity check', async ({ page, realDataApi }) => {
+      await page.goto('/');
+      await realDataApi.goToWorkflow('NestedLoops');
+
+      // Check workfow loads correctly
+      await expect(page.getByLabel('Foreach operation')).toBeVisible();
+      await expect(page.getByLabel('Foreach-2 operation')).toBeVisible();
+
+      // Load run history
+      await page.getByRole('menuitem', { name: 'Run History' }).click();
+      await page.waitForTimeout(3000);
+      await page.getByRole('gridcell', { name: '/18/2025, 3:25:03 PM' }).click();
+
+      // Check for outermost foreach
+      await expect(page.getByTestId('msla-pill-foreach_status')).toBeVisible();
+      await expect(page.getByTestId('msla-pager-v2-foreach')).toBeVisible();
+
+      // Check for inner actions
+      await expect(page.getByTestId('card-increment_counter')).toBeVisible();
+      await expect(page.getByLabel('1.1 seconds. Succeeded')).toContainText('1s');
+      await expect(page.getByLabel('11.3 seconds. Succeeded')).toContainText('11s');
+
+      // Check for innermost loop
+      await expect(page.getByTestId('msla-pill-foreach_2_status')).toBeVisible();
+      await expect(page.getByTestId('msla-pager-v2-foreach_2')).toBeVisible();
+
+      // Open panel
+      await page.getByTestId('card-increment_counter').getByRole('button', { name: 'Increment counter' }).click();
+      await expect(page.getByLabel('Value', { exact: true }).locator('pre')).toContainText('1');
+
+      // Move to next iteration
+      await page.getByTestId('msla-pager-v2-foreach').getByLabel('Next').click();
+      await expect(page.getByLabel('Value', { exact: true }).locator('pre')).toContainText('2');
+      await expect(page.getByLabel('0.1 seconds. Succeeded')).toContainText('0.1s');
+      await expect(page.getByLabel('13.3 seconds. Succeeded')).toContainText('13s');
+
+      // Move to previous iteration to check state is preserved
+      await page.getByTestId('msla-pager-v2-foreach').getByLabel('Previous').click();
+      await expect(page.getByLabel('Value', { exact: true }).locator('pre')).toContainText('1');
+
+      // Check inner loop to be interactive
+      await page.getByTestId('msla-pager-v2-foreach_2').getByLabel('Next').click();
+    });
+  }
+);

libs/designer/src/lib/core/state/workflow/workflowSlice.ts

@@ -335,7 +335,7 @@ export const workflowSlice = createSlice({
         ...runData,
         inputsLink: runData?.inputsLink ?? null,
         outputsLink: runData?.outputsLink ?? null,
-        duration: getDurationStringPanelMode(Date.parse(runData.endTime) - Date.parse(runData.startTime), /* abbreviated */ true),
+        duration: getDurationStringPanelMode(Date.parse(runData?.endTime) - Date.parse(runData?.startTime), /* abbreviated */ true),
       };
       nodeMetadata.runData = nodeRunData as LogicAppsV2.WorkflowRunAction;
     },

libs/designer/src/lib/ui/CustomNodes/OperationCardNode.tsx

@@ -47,9 +47,10 @@ import { setRepetitionRunData } from '../../core/state/workflow/workflowSlice';
 import { getRepetitionName } from '../common/LoopsPager/helper';
 import { DropZone } from '../connections/dropzone';
 import { MessageBarType } from '@fluentui/react';
+import type { LogicAppsV2 } from '@microsoft/logic-apps-shared';
 import { isNullOrUndefined, RunService, useNodeIndex } from '@microsoft/logic-apps-shared';
 import { Card } from '@microsoft/designer-ui';
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useDrag } from 'react-dnd';
 import { useIntl } from 'react-intl';
 import { useQuery } from '@tanstack/react-query';
@@ -103,14 +104,10 @@ const DefaultNode = ({ targetPosition = Position.Top, sourcePosition = Position.
     return RunService().getRepetition({ nodeId: id, runId: runInstance?.id }, repetitionName);
   }, [id, parentRunData?.status, repetitionName, runInstance?.id]);
 
-  const { isFetching: isRepetitionLoading } = useQuery<any>(
+  const { isFetching: isRepetitionFetching, data: repetitionRunData } = useQuery<any>(
     ['runInstance', { nodeId: id, runId: runInstance?.id, repetitionName, parentStatus: parentRunData?.status, parentRunIndex }],
     async () => {
-      const data = await getRunRepetition();
-      if (!isNullOrUndefined(data)) {
-        dispatch(setRepetitionRunData({ nodeId: id, runData: data.properties as any }));
-      }
-      return data;
+      return await getRunRepetition();
     },
     {
       refetchOnWindowFocus: false,
@@ -121,6 +118,12 @@ const DefaultNode = ({ targetPosition = Position.Top, sourcePosition = Position.
     }
   );
 
+  useEffect(() => {
+    if (!isNullOrUndefined(repetitionRunData)) {
+      dispatch(setRepetitionRunData({ nodeId: id, runData: repetitionRunData.properties as LogicAppsV2.WorkflowRunAction }));
+    }
+  }, [dispatch, repetitionRunData, id]);
+
   const { dependencies, loopSources } = useTokenDependencies(id);
 
   const [{ isDragging }, drag, dragPreview] = useDrag(
@@ -234,7 +237,7 @@ const DefaultNode = ({ targetPosition = Position.Top, sourcePosition = Position.
 
   const { isFetching: isOperationQueryLoading, isError: isOperationQueryError } = useOperationQuery(id);
 
-  const isLoading = useMemo(() => isRepetitionLoading || isOperationQueryLoading, [isRepetitionLoading, isOperationQueryLoading]);
+  const isLoading = useMemo(() => isRepetitionFetching || isOperationQueryLoading, [isRepetitionFetching, isOperationQueryLoading]);
 
   const opManifestErrorText = intl.formatMessage({
     defaultMessage: 'Error fetching manifest',

libs/designer/src/lib/ui/CustomNodes/ScopeCardNode.tsx

@@ -36,7 +36,7 @@ import { MessageBarType } from '@fluentui/react';
 import { RunService, equals, isNullOrUndefined, removeIdTag, useNodeIndex } from '@microsoft/logic-apps-shared';
 import { ScopeCard } from '@microsoft/designer-ui';
 import type { LogicAppsV2 } from '@microsoft/logic-apps-shared';
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDrag } from 'react-dnd';
 import { useIntl } from 'react-intl';
 import { useQuery } from '@tanstack/react-query';
@@ -72,31 +72,24 @@ const ScopeCardNode = ({ data, targetPosition = Position.Top, sourcePosition = P
   );
   const rootRef = useRef<HTMLDivElement | null>(null);
 
-  const getRunRepetition = useCallback(() => {
-    if (parentRunData?.status === constants.FLOW_STATUS.SKIPPED) {
-      return {
-        properties: {
-          status: constants.FLOW_STATUS.SKIPPED,
-          inputsLink: null,
-          outputsLink: null,
-          startTime: null,
-          endTime: null,
-          trackingId: null,
-          correlation: null,
-        },
-      };
-    }
-    return RunService().getRepetition({ nodeId: scopeId, runId: runInstance?.id }, repetitionName);
-  }, [scopeId, parentRunData?.status, repetitionName, runInstance?.id]);
-
-  const { isLoading: isRepetitionLoading, isRefetching: isRepetitionRefetching } = useQuery<any>(
+  const { isFetching: isRepetitionFetching, data: repetitionRunData } = useQuery<any>(
     ['runInstance', { nodeId: scopeId, runId: runInstance?.id, repetitionName, parentStatus: parentRunData?.status }],
     async () => {
-      const data = await getRunRepetition();
-      if (!isNullOrUndefined(data)) {
-        dispatch(setRepetitionRunData({ nodeId: scopeId, runData: data.properties as LogicAppsV2.WorkflowRunAction }));
+      if (parentRunData?.status === constants.FLOW_STATUS.SKIPPED) {
+        return {
+          properties: {
+            status: constants.FLOW_STATUS.SKIPPED,
+            inputsLink: null,
+            outputsLink: null,
+            startTime: null,
+            endTime: null,
+            trackingId: null,
+            correlation: null,
+          },
+        };
       }
-      return data;
+
+      return await RunService().getRepetition({ nodeId: scopeId, runId: runInstance?.id }, repetitionName);
     },
     {
       refetchOnWindowFocus: false,
@@ -107,6 +100,12 @@ const ScopeCardNode = ({ data, targetPosition = Position.Top, sourcePosition = P
     }
   );
 
+  useEffect(() => {
+    if (!isNullOrUndefined(repetitionRunData)) {
+      dispatch(setRepetitionRunData({ nodeId: scopeId, runData: repetitionRunData.properties as LogicAppsV2.WorkflowRunAction }));
+    }
+  }, [dispatch, repetitionRunData, scopeId]);
+
   const { dependencies, loopSources } = useTokenDependencies(scopeId);
   const [{ isDragging }, drag, dragPreview] = useDrag(
     () => ({
@@ -196,8 +195,8 @@ const ScopeCardNode = ({ data, targetPosition = Position.Top, sourcePosition = P
   const opQuery = useOperationQuery(scopeId);
 
   const isLoading = useMemo(
-    () => isRepetitionLoading || isRepetitionRefetching || opQuery.isLoading || (!brandColor && !iconUri),
-    [brandColor, iconUri, opQuery.isLoading, isRepetitionLoading, isRepetitionRefetching]
+    () => isRepetitionFetching || opQuery.isLoading || (!brandColor && !iconUri),
+    [brandColor, iconUri, opQuery.isLoading, isRepetitionFetching]
   );
 
   const comment = useMemo(
@@ -265,7 +264,6 @@ const ScopeCardNode = ({ data, targetPosition = Position.Top, sourcePosition = P
     if (metadata?.runData?.status && !equals(metadata.runData.status, 'InProgress')) {
       return <LoopsPager metadata={metadata} scopeId={scopeId} collapsed={graphCollapsed} />;
     }
-
     return null;
   }, [graphCollapsed, metadata, scopeId]);