feat(designer): Agent evaluations tab

Localize/lang/strings.json

@@ -904,6 +904,7 @@
   "IA+Ogm": "22",
   "IAmvpa": "(UTC-08:00) Coordinated Universal Time-08",
   "IBFBR2": "Remove loop",
+  "IBpGkP": "Return to run dataset",
   "IG4XXf": "State",
   "IG4h5u": "Copied!",
   "IGpV1W": "Asynchronous response",
@@ -2617,6 +2618,7 @@
   "_IA+Ogm.comment": "Hour of the day",
   "_IAmvpa.comment": "Time zone value ",
   "_IBFBR2.comment": "Remove loop for the connection",
+  "_IBpGkP.comment": "Return to run dataset button text",
   "_IG4XXf.comment": "Label for workflow state",
   "_IG4h5u.comment": "Confirmation message when URL is copied",
   "_IGpV1W.comment": "title for asynchronous response setting",
@@ -3577,12 +3579,14 @@
   "_dKCp2j.comment": "Chatbot query start of sentence for asking for more explaination on an item that the user can should complete.",
   "_dKW11v.comment": "Info message during workflow selection",
   "_dL9V5t.comment": "Text to show label for managed identity selector",
+  "_dLxMq/.comment": "Run dataset panel title",
   "_dMAC4C.comment": "Chatbot prompt to replace an action",
   "_dMklCt.comment": "Description for creating a simple logic app",
   "_dOpdsP.comment": "Update Expression",
   "_dQmi91.comment": "Label for Frequency",
   "_dU0RgS.comment": "Add a multi-select list of options to the text input dynamic parameter",
   "_dU7f7n.comment": "The type for application insights resource",
+  "_dUYMuK.comment": "Agents tab title",
   "_dUbKuK.comment": "Chatbot conenction setup skip button text",
   "_dVFyPb.comment": "Parameter Field Default Value Title",
   "_daThty.comment": "Button text for proceeding to the next tab",
@@ -4537,6 +4541,7 @@
   "_xJQeeC.comment": "Time zone value ",
   "_xK8r1/.comment": "Run information loading text",
   "_xL0gmX.comment": "Submit button text for deployment model resource",
+  "_xLYNud.comment": "Text shown when no agent actions are found in the run",
   "_xMgLd8.comment": "title for retry minimum interval setting",
   "_xN3GEX.comment": "Client Certificate Password Placeholder Text",
   "_xPO/1M.comment": "Description for the MCP server registration wizard",
@@ -4795,12 +4800,14 @@
   "dKCp2j": "Tell me more about",
   "dKW11v": "Currently, templates only support workflows from the same Logic App instance.",
   "dL9V5t": "Managed identity",
+  "dLxMq/": "Run dataset",
   "dMAC4C": "Replace action",
   "dMklCt": "Provide the additional requested details to create a logic app with the default values.",
   "dOpdsP": "Update",
   "dQmi91": "Frequency",
   "dU0RgS": "Add a multi-select list of options",
   "dU7f7n": "Application Insights",
+  "dUYMuK": "Agents",
   "dUbKuK": "Skip",
   "dVFyPb": "Default value",
   "daThty": "Next",
@@ -5755,6 +5762,7 @@
   "xJQeeC": "(UTC+02:00) Istanbul",
   "xK8r1/": "Run information loading",
   "xL0gmX": "Submit",
+  "xLYNud": "No agent actions found",
   "xMgLd8": "Minimum interval",
   "xN3GEX": "Enter password as plain text or use a secure parameter",
   "xPO/1M": "Register an MCP server that you create, starting with an empty logic app. Create tools that run connector actions so your server can perform tasks. Available logic apps depend on the Azure subscription for your API Center resource.",

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/DesignerCommandBarV2.tsx

@@ -120,13 +120,15 @@ export const DesignerCommandBar = ({
   isDesignerView,
   isMonitoringView,
   isCodeView,
+  isEvaluateView,
   isDarkMode,
   isUnitTest,
   isDraftMode,
   enableCopilot,
   showMonitoringView,
   showDesignerView,
   showCodeView,
+  showEvaluateView,
   switchWorkflowMode,
 }: {
   id: string;
@@ -143,6 +145,7 @@ export const DesignerCommandBar = ({
   isDesignerView?: boolean;
   isMonitoringView?: boolean;
   isCodeView?: boolean;
+  isEvaluateView?: boolean;
   isDarkMode: boolean;
   isUnitTest: boolean;
   isDraftMode?: boolean;
@@ -151,6 +154,7 @@ export const DesignerCommandBar = ({
   showMonitoringView: () => void;
   showDesignerView: () => void;
   showCodeView: () => void;
+  showEvaluateView: () => void;
   switchWorkflowMode: (draftMode: boolean) => void;
 }) => {
   const styles = useStyles();
@@ -348,6 +352,18 @@ export const DesignerCommandBar = ({
       >
         Run history
       </Button>
+      <Button
+        appearance={isEvaluateView ? 'primary' : 'subtle'}
+        className={mergeClasses(styles.viewButton, isEvaluateView ? styles.selectedButton : '')}
+        size="small"
+        onClick={() => {
+          showEvaluateView();
+          dispatch(collapsePanel());
+          dispatch(resetDesignerView());
+        }}
+      >
+        Evaluate
+      </Button>
     </Card>
   );
 

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/laDesignerV2.tsx

@@ -46,6 +46,7 @@ import {
   StandardOperationManifestService,
   StandardRunService,
   StandardSearchService,
+  StandardEvaluationService,
   clone,
   equals,
   guid,
@@ -75,6 +76,7 @@ import {
   setIsWorkflowDirty,
   setFocusNode,
   changePanelNode,
+  EvaluateView,
 } from '@microsoft/logic-apps-designer-v2';
 import axios from 'axios';
 import isEqual from 'lodash.isequal';
@@ -130,6 +132,7 @@ const DesignerEditor = () => {
   const [workflow, setWorkflow] = useState<Workflow>(); // Current workflow on the designer
   const [isDesignerView, setIsDesignerView] = useState(true);
   const [isCodeView, setIsCodeView] = useState(false);
+  const [isEvaluateView, setIsEvaluateView] = useState(false);
   const [isDraftMode, setIsDraftMode] = useState(true);
 
   const codeEditorRef = useRef<{ getValue: () => string | undefined; hasChanges: () => boolean }>(null);
@@ -284,6 +287,7 @@ const DesignerEditor = () => {
     if (!isMonitoringView) {
       setIsDesignerView(false);
       setIsCodeView(false);
+      setIsEvaluateView(false);
       toggleMonitoringView();
     }
   }, [isMonitoringView, toggleMonitoringView]);
@@ -535,6 +539,12 @@ const DesignerEditor = () => {
       return;
     }
 
+    if (isEvaluateView) {
+      setIsEvaluateView(false);
+      setIsCodeView(true);
+      return;
+    }
+
     if (isMonitoringView) {
       hideMonitoringView();
       setIsCodeView(true);
@@ -551,6 +561,12 @@ const DesignerEditor = () => {
       return;
     }
 
+    if (isEvaluateView) {
+      setIsEvaluateView(false);
+      setIsDesignerView(true);
+      return;
+    }
+
     if (isMonitoringView) {
       hideMonitoringView();
       setIsDesignerView(true);
@@ -579,6 +595,18 @@ const DesignerEditor = () => {
     }
   };
 
+  const showEvaluateView = useCallback(() => {
+    if (isEvaluateView) {
+      return;
+    }
+    if (isMonitoringView) {
+      hideMonitoringView();
+    }
+    setIsDesignerView(false);
+    setIsCodeView(false);
+    setIsEvaluateView(true);
+  }, [isEvaluateView, isMonitoringView, hideMonitoringView]);
+
   // Our iframe root element is given a strange padding (not in this repo), this removes it
   useEffect(() => {
     const root = document.getElementById('root');
@@ -649,6 +677,7 @@ const DesignerEditor = () => {
           isDarkMode,
           readOnly: derivedIsReadOnly,
           isMonitoringView,
+          isEvaluateView,
           isDraft: isDraftMode,
           isUnitTest,
           suppressDefaultNodeSelectFunctionality: suppressDefaultNodeSelect,
@@ -685,11 +714,13 @@ const DesignerEditor = () => {
               isMonitoringView={isMonitoringView}
               isDesignerView={isDesignerView}
               isCodeView={isCodeView}
+              isEvaluateView={isEvaluateView}
               enableCopilot={() => dispatch(setIsChatBotEnabled(!showChatBot))}
               saveWorkflowFromCode={saveWorkflowFromCode}
               showMonitoringView={showMonitoringView}
               showDesignerView={showDesignerView}
               showCodeView={showCodeView}
+              showEvaluateView={showEvaluateView}
               switchWorkflowMode={switchWorkflowMode}
               isDraftMode={isDraftMode}
               prodWorkflow={artifactData?.properties.files[Artifact.WorkflowFile]}
@@ -736,7 +767,7 @@ const DesignerEditor = () => {
                   }}
                 />
               </div>
-              {!isCodeView && (
+              {!isCodeView && !isEvaluateView && (
                 <div style={{ flexGrow: 1, display: 'inherit' }}>
                   <Designer />
                   <FloatingRunButton
@@ -751,6 +782,7 @@ const DesignerEditor = () => {
                 </div>
               )}
               {isCodeView && <CodeViewEditor ref={codeEditorRef} workflowKind={workflow?.kind} />}
+              {isEvaluateView && <EvaluateView workflowName={workflowName} />}
               <CombineInitializeVariableDialog />
               <TriggerDescriptionDialog workflowId={workflowId} />
             </div>
@@ -1102,6 +1134,10 @@ const getDesignerServices = (
     httpClient,
   });
 
+  const evaluationService = new StandardEvaluationService({
+    ...defaultServiceParams,
+  });
+
   const roleService = new BaseRoleService({
     baseUrl: armUrl,
     httpClient,
@@ -1175,6 +1211,7 @@ const getDesignerServices = (
     cognitiveServiceService,
     connectionParameterEditorService,
     editorService,
+    evaluationService,
     userPreferenceService: new BaseUserPreferenceService(),
     experimentationService: new BaseExperimentationService(),
   };

apps/vs-code-react/src/app/designer/DesignerCommandBar/indexV2.tsx

@@ -88,9 +88,11 @@ export interface DesignerCommandBarProps {
   isDesignerView: boolean;
   isCodeView: boolean;
   isMonitoringView: boolean;
+  isEvaluateView: boolean;
   switchToDesignerView: () => void;
   switchToCodeView: () => void;
   switchToMonitoringView: () => void;
+  switchToEvaluateView: () => void;
 }
 
 export const DesignerCommandBar: React.FC<DesignerCommandBarProps> = ({
@@ -104,9 +106,11 @@ export const DesignerCommandBar: React.FC<DesignerCommandBarProps> = ({
   isDesignerView,
   isCodeView,
   isMonitoringView,
+  isEvaluateView,
   switchToDesignerView,
   switchToCodeView,
   switchToMonitoringView,
+  switchToEvaluateView,
 }) => {
   const vscode = useContext(VSCodeContext);
   const dispatch = DesignerStore.dispatch;
@@ -275,6 +279,18 @@ export const DesignerCommandBar: React.FC<DesignerCommandBarProps> = ({
       >
         Run history
       </Button>
+      <Button
+        appearance={isEvaluateView ? 'primary' : 'subtle'}
+        className={mergeClasses(styles.viewButton, isEvaluateView ? styles.selectedButton : '')}
+        size="small"
+        onClick={() => {
+          dispatch(collapsePanel());
+          dispatch(resetDesignerView());
+          switchToEvaluateView();
+        }}
+      >
+        Evaluate
+      </Button>
     </Card>
   );
 

apps/vs-code-react/src/app/designer/appV2.tsx

@@ -15,6 +15,7 @@ import {
   useThemeObserver,
   FloatingRunButton,
   useRun,
+  EvaluateView,
 } from '@microsoft/logic-apps-designer-v2';
 import { BundleVersionRequirements, guid, isNullOrUndefined, isVersionSupported, Theme } from '@microsoft/logic-apps-shared';
 import type { FileSystemConnectionInfo, MessageToVsix, StandardApp } from '@microsoft/vscode-extension-logic-apps';
@@ -54,6 +55,7 @@ export const DesignerApp = () => {
   const isDesignerView = useMemo(() => currentView === DesignerViewType.Workflow, [currentView]);
   const isCodeView = useMemo(() => currentView === DesignerViewType.Code, [currentView]);
   const isMonitoringView = useMemo(() => currentView === DesignerViewType.Monitoring, [currentView]);
+  const isEvaluateView = useMemo(() => currentView === DesignerViewType.Evaluate, [currentView]);
 
   const [runId, setRunId] = useState(_runId);
 
@@ -267,35 +269,48 @@ export const DesignerApp = () => {
       hideMonitoringView();
       setCurrentView(DesignerViewType.Workflow);
     }
-  }, [isDesignerView, isCodeView, isMonitoringView, validateAndSaveCodeView, hideMonitoringView]);
+    if (isEvaluateView) {
+      setCurrentView(DesignerViewType.Workflow);
+    }
+  }, [isDesignerView, isCodeView, isMonitoringView, isEvaluateView, validateAndSaveCodeView, hideMonitoringView]);
 
   const switchToCodeView = useCallback(async () => {
     if (isCodeView) {
       return;
     }
 
-    if (isDesignerView) {
+    if (isDesignerView || isEvaluateView) {
       setCurrentView(DesignerViewType.Code);
     }
     if (isMonitoringView) {
       hideMonitoringView();
       setCurrentView(DesignerViewType.Code);
     }
-  }, [hideMonitoringView, isCodeView, isDesignerView, isMonitoringView]);
+  }, [hideMonitoringView, isCodeView, isDesignerView, isMonitoringView, isEvaluateView]);
 
   const switchToMonitoringView = useCallback(async () => {
     if (isMonitoringView) {
       return;
     }
 
-    if (isDesignerView) {
+    if (isDesignerView || isEvaluateView) {
       setCurrentView(DesignerViewType.Monitoring);
     }
 
     if (isCodeView) {
       validateAndSaveCodeView().then(() => setCurrentView(DesignerViewType.Monitoring));
     }
-  }, [isMonitoringView, isDesignerView, isCodeView, validateAndSaveCodeView]);
+  }, [isMonitoringView, isDesignerView, isCodeView, isEvaluateView, validateAndSaveCodeView]);
+
+  const switchToEvaluateView = useCallback(async () => {
+    if (isEvaluateView) {
+      return;
+    }
+    if (isMonitoringView) {
+      hideMonitoringView();
+    }
+    setCurrentView(DesignerViewType.Evaluate);
+  }, [isEvaluateView, isMonitoringView, hideMonitoringView]);
 
   /////////////////////////////////////////////////////////////////////////////
   // Rendering
@@ -319,6 +334,7 @@ export const DesignerApp = () => {
           isUnitTest,
           readOnly: readOnly || isMonitoringView,
           isMonitoringView,
+          isEvaluateView,
           services: services,
           hostOptions: {
             displayRuntimeInfo: true,
@@ -352,12 +368,14 @@ export const DesignerApp = () => {
               isDesignerView={isDesignerView}
               isCodeView={isCodeView}
               isMonitoringView={isMonitoringView}
+              isEvaluateView={isEvaluateView}
               switchToDesignerView={switchToDesignerView}
               switchToCodeView={switchToCodeView}
               switchToMonitoringView={switchToMonitoringView}
+              switchToEvaluateView={switchToEvaluateView}
             />
 
-            {!isCodeView && (
+            {!isCodeView && !isEvaluateView && (
               <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1, height: '80%', position: 'relative' }}>
                 <Designer />
                 <FloatingRunButton
@@ -372,6 +390,7 @@ export const DesignerApp = () => {
               </div>
             )}
             {isCodeView && <CodeViewEditor ref={codeEditorRef} workflowKind={workflow?.kind} workflowFile={initialWorkflow} />}
+            {isEvaluateView && <EvaluateView workflowName={panelMetaData?.workflowName ?? ''} />}
           </BJSWorkflowProvider>
         ) : null}
       </DesignerProvider>

apps/vs-code-react/src/app/designer/constants.ts

@@ -67,4 +67,5 @@ export const DesignerViewType = {
   Workflow: 'workflow',
   Code: 'code',
   Monitoring: 'monitoring',
+  Evaluate: 'evaluate',
 };