feat(designer): Agent evaluations tab

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');
@@ -685,11 +713,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 +766,7 @@ const DesignerEditor = () => {
                   }}
                 />
               </div>
-              {!isCodeView && (
+              {!isCodeView && !isEvaluateView && (
                 <div style={{ flexGrow: 1, display: 'inherit' }}>
                   <Designer />
                   <FloatingRunButton
@@ -751,6 +781,7 @@ const DesignerEditor = () => {
                 </div>
               )}
               {isCodeView && <CodeViewEditor ref={codeEditorRef} workflowKind={workflow?.kind} />}
+              {isEvaluateView && <EvaluateView workflowName={workflowName} />}
               <CombineInitializeVariableDialog />
               <TriggerDescriptionDialog workflowId={workflowId} />
             </div>
@@ -1102,6 +1133,10 @@ const getDesignerServices = (
     httpClient,
   });
 
+  const evaluationService = new StandardEvaluationService({
+    ...defaultServiceParams,
+  });
+
   const roleService = new BaseRoleService({
     baseUrl: armUrl,
     httpClient,
@@ -1175,6 +1210,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
@@ -352,12 +367,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 +389,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',
 };

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

@@ -6,6 +6,7 @@ import {
   StandardSearchService,
   BaseGatewayService,
   StandardRunService,
+  StandardEvaluationService,
   StandardArtifactService,
   BaseApiManagementService,
   BaseFunctionService,
@@ -60,6 +61,7 @@ export interface IDesignerServices {
   loggerService: ILoggerService;
   connectionParameterEditorService: CustomConnectionParameterEditorService;
   cognitiveServiceService: BaseCognitiveServiceService;
+  evaluationService: StandardEvaluationService;
 }
 
 export const getDesignerServices = (
@@ -378,6 +380,12 @@ export const getDesignerServices = (
     httpClient,
   });
 
+  const evaluationService = new StandardEvaluationService({
+    apiVersion,
+    baseUrl: isEmptyString(workflowRuntimeBaseUrl) ? baseUrl : workflowRuntimeBaseUrl,
+    httpClient,
+  });
+
   // MSI is not supported in VS Code
   const roleService = new BaseRoleService({
     baseUrl: armUrl,
@@ -428,6 +436,7 @@ export const getDesignerServices = (
     loggerService,
     connectionParameterEditorService,
     cognitiveServiceService,
+    evaluationService,
     functionService,
   };
 };

libs/designer-v2/src/lib/core/index.ts

@@ -129,3 +129,10 @@ export { setLocation, setSubscription, setResourceGroup } from './state/template
 export { getConsumptionWorkflowPayloadForCreate } from './templates/utils/createhelper';
 export * from './state/modal/modalSelectors';
 export * from './state/modal/modalSlice';
+export * from './queries/evaluations';
+export {
+  setSelectedRun as setEvaluationSelectedRun,
+  setSelectedAction as setEvaluationSelectedAction,
+  resetEvaluationState,
+} from './state/evaluation/evaluationSlice';
+export type { AgentAction, WorkflowRunEntry } from './state/evaluation/evaluationInterfaces';