Fixing execution plan loading (#18005)

* Fixing execution plan loading

* moving api status to its own file

Author: aasimkhan30

src/connectionconfig/connectionDialogWebViewController.ts

@@ -5,7 +5,7 @@
 
 import * as vscode from 'vscode';
 import { ReactWebViewPanelController } from "../controllers/reactWebviewController";
-import { ApiStatus, AuthenticationType, ConnectionDialogReducers, ConnectionDialogWebviewState, FormComponent, FormComponentActionButton, FormComponentOptions, FormComponentType, FormTabType, IConnectionDialogProfile } from '../sharedInterfaces/connectionDialog';
+import { AuthenticationType, ConnectionDialogReducers, ConnectionDialogWebviewState, FormComponent, FormComponentActionButton, FormComponentOptions, FormComponentType, FormTabType, IConnectionDialogProfile } from '../sharedInterfaces/connectionDialog';
 import { IConnectionInfo } from 'vscode-mssql';
 import MainController from '../controllers/mainController';
 import { getConnectionDisplayName } from '../models/connectionInfo';
@@ -17,6 +17,7 @@ import { ConnectionOption } from 'azdata';
 import { Logger } from '../models/logger';
 import VscodeWrapper from '../controllers/vscodeWrapper';
 import * as LocalizedConstants from '../constants/localizedConstants';
+import { ApiStatus } from '../sharedInterfaces/webview';
 
 export class ConnectionDialogWebViewController extends ReactWebViewPanelController<ConnectionDialogWebviewState, ConnectionDialogReducers> {
 	private _connectionToEditCopy: IConnectionDialogProfile | undefined;

src/controllers/executionPlanWebviewController.ts

@@ -12,6 +12,7 @@ import { homedir } from "os";
 import { exists } from "../utils/utils";
 import UntitledSqlDocumentService from '../controllers/untitledSqlDocumentService';
 import * as path from 'path';
+import { ApiStatus } from "../sharedInterfaces/webview";
 
 export class ExecutionPlanWebViewController extends ReactWebViewPanelController<
   ep.ExecutionPlanWebViewState,
@@ -30,7 +31,15 @@ export class ExecutionPlanWebViewController extends ReactWebViewPanelController<
       context,
       `${xmlPlanFileName}`,  // Sets the webview title
       WebviewRoute.executionPlanDocument,
-      {},
+      {
+        sqlPlanContent: executionPlanContents,
+        theme: vscode.window.activeColorTheme.kind === vscode.ColorThemeKind.Dark ? "dark" : "light",
+        localizedConstants: LocalizedConstants,
+        loadState: ApiStatus.Loading,
+        executionPlan: undefined,
+        executionPlanGraphs: [],
+        totalCost: 0,
+      },
       vscode.ViewColumn.Active,
       {
         dark: vscode.Uri.joinPath(
@@ -45,25 +54,19 @@ export class ExecutionPlanWebViewController extends ReactWebViewPanelController<
         ),
       }
     );
-    this.state.isLoading = true;
     this.initialize();
   }
 
   private async initialize() {
-    this.state.sqlPlanContent = this.executionPlanContents;
-	  this.state.theme = vscode.window.activeColorTheme.kind === vscode.ColorThemeKind.Dark ? "dark" : "light";
-    this.state.localizedConstants = LocalizedConstants;
-
+    this.state.loadState = ApiStatus.Loading;
+    this.updateState();
     await this.createExecutionPlanGraphs();
-    this.state.totalCost = this.calculateTotalCost();
     this.registerRpcHandlers();
-    this.state.isLoading = false;
   }
 
   private registerRpcHandlers() {
     this.registerReducer("getExecutionPlan", async (state, payload) => {
       await this.createExecutionPlanGraphs();
-
       return {
         ...state,
         executionPlan: this.state.executionPlan,
@@ -141,10 +144,18 @@ export class ExecutionPlanWebViewController extends ReactWebViewPanelController<
         graphFileContent: this.executionPlanContents,
         graphFileType: ".sqlplan",
       };
-      this.state.executionPlan =
-        await this.executionPlanService.getExecutionPlan(planFile);
-      this.state.executionPlanGraphs = this.state.executionPlan.graphs;
+      try {
+        this.state.executionPlan =
+          await this.executionPlanService.getExecutionPlan(planFile);
+        this.state.executionPlanGraphs = this.state.executionPlan.graphs;
+        this.state.loadState = ApiStatus.Loaded;
+        this.state.totalCost = this.calculateTotalCost();
+      } catch (e) {
+        this.state.loadState = ApiStatus.Error;
+        this.state.errorMessage = e.toString();
+      }
     }
+    this.updateState();
   }
 
   private calculateTotalCost(): number {
@@ -154,4 +165,8 @@ export class ExecutionPlanWebViewController extends ReactWebViewPanelController<
     }
     return sum;
   }
+
+  private updateState() {
+    this.state = this.state;
+  }
 }

src/reactviews/pages/ConnectionDialog/connectionFormPage.tsx

@@ -17,8 +17,8 @@ import {
 import { Dismiss24Regular } from "@fluentui/react-icons";
 
 import { ConnectionDialogContext } from "./connectionDialogStateProvider";
-import { ApiStatus } from "../../../sharedInterfaces/connectionDialog";
 import { FormField, useFormStyles } from "../../common/forms/formUtils";
+import { ApiStatus } from "../../../sharedInterfaces/webview";
 
 export const ConnectionFormPage = () => {
     const connectionDialogContext = useContext(ConnectionDialogContext);

src/reactviews/pages/ConnectionDialog/connectionStringPage.tsx

@@ -4,10 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { Button, MessageBar, Spinner } from "@fluentui/react-components";
-import { ApiStatus } from "../../../sharedInterfaces/connectionDialog";
 import { useContext } from "react";
 import { ConnectionDialogContext } from "./connectionDialogStateProvider";
 import { generateFormField, useFormStyles } from "../../common/forms/formUtils";
+import { ApiStatus } from "../../../sharedInterfaces/webview";
 
 export const ConnectionStringPage = () => {
 	const connectionDialogContext = useContext(ConnectionDialogContext);

src/reactviews/pages/ExecutionPlan/executionPlanInterfaces.ts

@@ -3,14 +3,17 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { ApiStatus } from "../../../sharedInterfaces/webview";
+
 export interface ExecutionPlanWebViewState {
 	sqlPlanContent?: string;
 	executionPlan?: GetExecutionPlanResult;
 	executionPlanGraphs?: ExecutionPlanGraph[];
 	theme?: string;
 	totalCost?: number;
-	isLoading?: boolean;
+	loadState?: ApiStatus;
 	localizedConstants?: any;
+	errorMessage?: string;
 }
 
 export interface ExecutionPlanReducers {

src/reactviews/pages/ExecutionPlan/executionPlanPage.tsx

@@ -3,10 +3,12 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { useContext, useEffect, useState } from 'react';
+import { useContext } from 'react';
 import { ExecutionPlanContext } from "./executionPlanStateProvider";
-import { makeStyles, Spinner } from '@fluentui/react-components';
+import { makeStyles, Spinner, Text } from '@fluentui/react-components';
 import { ExecutionPlanGraph } from './executionPlanGraph';
+import { ErrorCircleRegular } from "@fluentui/react-icons";
+import { ApiStatus } from '../../../sharedInterfaces/webview';
 
 const useStyles = makeStyles({
 	outerDiv: {
@@ -20,40 +22,53 @@ const useStyles = makeStyles({
 		width: "100%",
 		display: "flex",
 		justifyContent: "center",
-		alignItems: "center"
+		alignItems: "center",
+		flexDirection: "column",
+		padding: "20px"
+	},
+	errorIcon: {
+		fontSize: '100px',
+		opacity: 0.5
 	}
 })
 
 export const ExecutionPlanPage = () => {
 	const classes = useStyles();
-	const state = useContext(ExecutionPlanContext);
-	const [executionPlanState, setExecutionPlanState] = useState(state?.state);
-
-	useEffect(() => {
-		function checkIfStateIsLoaded() {
-			if (!executionPlanState && state?.state) {
-			  setExecutionPlanState(state.state);
-			}
+	const provider = useContext(ExecutionPlanContext);
+	const loadState = provider?.state?.loadState ?? ApiStatus.Loading;
+	const renderMainContent = () => {
+		switch (loadState) {
+			case ApiStatus.Loading:
+				return (
+					<div className={classes.spinnerDiv}>
+						<Spinner
+							label="Loading execution plan..."
+							labelPosition="below"
+						/>
+					</div>
+				);
+			case ApiStatus.Loaded:
+				const executionPlanGraphs = provider?.state?.executionPlanGraphs ?? [];
+				return (
+					executionPlanGraphs?.map((_, index) => (
+						<ExecutionPlanGraph key={index} graphIndex={index} />
+					))
+				);
+			case ApiStatus.Error:
+				return (
+					<div className={classes.spinnerDiv}>
+							<ErrorCircleRegular className={classes.errorIcon} />
+							<Text size={400}>{provider?.state?.errorMessage ?? ''}</Text>
+					</div>
+				);
 		}
-
-		// Check every 200 milliseconds
-		const intervalId = setInterval(checkIfStateIsLoaded, 200);
-
-		return () => clearInterval(intervalId);
-	  }, [executionPlanState, state]);
+	}
 
 	return (
 		<div className={classes.outerDiv}>
-			{executionPlanState && !executionPlanState.isLoading && executionPlanState.executionPlanGraphs ? (
-				executionPlanState.executionPlanGraphs.map((_, index) => (
-					<ExecutionPlanGraph key={index} graphIndex={index} />
-				))
-			) : (
-				// localize this
-				<div className={classes.spinnerDiv}>
-					<Spinner label="Loading..." labelPosition="below" />
-				</div>
-			)}
+			{
+				renderMainContent()
+			}
 		</div>
 	);
 };

src/sharedInterfaces/connectionDialog.ts

@@ -5,6 +5,7 @@
 
 import { Theme } from "@fluentui/react-components";
 import * as vscodeMssql from "vscode-mssql";
+import { ApiStatus } from "./webview";
 
 export interface ConnectionDialogWebviewState {
 	selectedFormTab: FormTabType;
@@ -33,12 +34,7 @@ export interface IConnectionDialogProfile extends vscodeMssql.IConnectionInfo {
 	azureAuthType?: vscodeMssql.AzureAuthType;
 }
 
-export enum ApiStatus {
-	NotStarted = 'notStarted',
-	Loading = 'loading',
-	Loaded = 'loaded',
-	Error = 'error',
-}
+
 
 export interface FormContextProps<T> {
 	formAction: (event: FormEvent<T>) => void;

src/sharedInterfaces/webview.ts

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+export enum ApiStatus {
+	NotStarted = 'notStarted',
+	Loading = 'loading',
+	Loaded = 'loaded',
+	Error = 'error',
+}