Enhance notebook loading process with Spark integration

- Added SparkModel import to App.js for improved Spark session handling.
- Refactored handleExistingNotebookClick to use async/await for fetching notebook data and Spark application details concurrently.
- Implemented error handling for fetching notebook and Spark app, ensuring better user feedback and session management.
- Introduced a new method in SparkModel.js to retrieve Spark app details by notebook path, enhancing integration with the backend API.

webapp/src/App.js

@@ -8,6 +8,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import config from './config';
 import NotebookModel from './models/NotebookModel';
 import DirectoryModel from './models/DirectoryModel';
+import SparkModel from './models/SparkModel';
 
 const theme = createTheme({
   components: {
@@ -128,22 +129,34 @@ const App = () => {
     }
   };  
 
-  const handleExistingNotebookClick = (path) => {
+  const handleExistingNotebookClick = async (path) => {
     if (handleUnsavedChanges()) {
-      NotebookModel.fetchNotebook(`${path}`).then((data) => {
-        if (data.message == 'Token has expired') {
-          console.error('Token has expired, please log in again');
-          logout();
-        } else {
-          console.log('Fetched notebook:', data);
-          setNotebook(data);
-          setShowHistoryServer(false);
-          setShowScheduler(false);
-          setShowNotebook(true);
+        try {
+            const [notebookData, sparkApp] = await Promise.all([
+                NotebookModel.fetchNotebook(`${path}`),
+                SparkModel.getSparkAppByNotebookPath(path)
+            ]);
+
+            if (notebookData.message === 'Token has expired') {
+                console.error('Token has expired, please log in again');
+                logout();
+                return;
+            }
+
+            console.log('Fetched notebook:', notebookData);
+            setNotebook(notebookData);
+
+            // Update Spark badge if there's an active Spark app
+            if (sparkApp) {
+                setSparkAppId(sparkApp.spark_app_id);
+            }
+
+            setShowHistoryServer(false);
+            setShowScheduler(false);
+            setShowNotebook(true);
+        } catch (error) {
+            console.error('Failed to fetch notebook or Spark app:', error);
         }
-      }).catch((error) => {
-        console.error('Failed to fetch notebook:', error);
-      });
     }
   }
 

webapp/src/models/SparkModel.js

@@ -94,6 +94,28 @@ spark`;
         throw error;
     }
   }
+
+  static async getSparkAppByNotebookPath(notebookPath) {
+    const token = sessionStorage.getItem('token');
+    try {
+        const response = await fetch(`${config.serverBaseUrl}/notebook/spark_app/${notebookPath}`, {
+            headers: {
+                'Authorization': `Bearer ${token}`,
+                'Content-Type': 'application/json'
+            }
+        });
+
+        if (!response.ok) {
+            return null;
+        }
+
+        const sparkApps = await response.json();
+        return sparkApps.length > 0 ? sparkApps[0] : null;
+    } catch (error) {
+        console.error('Failed to fetch Spark app:', error);
+        return null;
+    }
+  }
 }
 
 export default SparkModel;