FE add NotebookConsole view, update router, Navbar

SpringDataPlatform/frontend/data-platform-ui/src/components/Navbar.vue

@@ -70,6 +70,9 @@
             <router-link class="dropdown-item" :to="{ name: 'AddNotebook' }"
               >Add Notebook</router-link
             >
+            <router-link class="dropdown-item" :to="{ name: 'NotebookConsole' }"
+              >Notebook Console</router-link
+            >
           </div>
         </li>
 

SpringDataPlatform/frontend/data-platform-ui/src/router/index.js

@@ -29,6 +29,7 @@ import Zeppelin from "../views/Zeppelin/Zeppelin.vue";
 import ZeppelinApp from "../views/Zeppelin/ZeppelinApp.vue";
 import ListNotebook from "../views/Zeppelin/ListNotebook.vue";
 import AddNotebook from "../views/Zeppelin/AddNotebook.vue";
+import NotebookConsole from "../views/Zeppelin/NotebookConsole.vue";
 
 // signin, signup
 import Signup from "../views/Signup.vue";
@@ -126,6 +127,11 @@ const routes = [
     name: "AddNotebook",
     component: AddNotebook,
   },
+  {
+    path: "/notebook_console",
+    name: "NotebookConsole",
+    component: NotebookConsole,
+  },
 
   //Signin and Signup
   {

SpringDataPlatform/frontend/data-platform-ui/src/views/Zeppelin/NotebookConsole.vue

@@ -0,0 +1,58 @@
+<template>
+    <div>
+        <h1>Notebook console</h1>
+      <button @click="addCell">Add Cell</button>
+      <div v-for="(cell, index) in cells" :key="index">
+        <textarea v-model="cell.code" placeholder="Type your code here"></textarea>
+        <button @click="executeCode(index)">Run Code</button>
+        <div v-if="cell.result !== undefined">
+          <strong>Result:</strong>
+          <pre>{{ cell.result }}</pre>
+        </div>
+        <hr />
+      </div>
+    </div>
+  </template>
+
+  <script>
+  export default {
+    data() {
+      return {
+        cells: [
+          {
+            code: '',
+            result: undefined,
+          },
+        ],
+      };
+    },
+    methods: {
+      addCell() {
+        this.cells.push({
+          code: '',
+          result: undefined,
+        });
+      },
+      executeCode(index) {
+        // Mock code execution, replace with actual execution logic
+        const result = this.mockExecuteCode(this.cells[index].code);
+        this.$set(this.cells, index, {
+          ...this.cells[index],
+          result,
+        });
+      },
+      mockExecuteCode(code) {
+        // Mock execution, replace with actual code execution logic
+        return `Mock Result: ${code}`;
+      },
+    },
+  };
+  </script>
+
+  <style scoped>
+  textarea {
+    width: 100%;
+    height: 100px;
+  }
+  </style>
+