FE add method send addParagraph request to BE with selected nb id

yennanliu · Jan 18, 2024 · 08a0641 · 08a0641
1 parent 6a2f881
commit 08a0641
Showing 1 changed file with 47 additions and 13 deletions.
diff --git a/SpringDataPlatform/frontend/data-platform-ui/src/views/Zeppelin/NotebookConsole.vue b/SpringDataPlatform/frontend/data-platform-ui/src/views/Zeppelin/NotebookConsole.vue
@@ -3,13 +3,25 @@
     <h1>Notebook console</h1>
     <label>Select Notebook:</label>
     <select v-model="selectedNotebook">
-      <option v-for="notebook in notebooks" :key="notebook.id" :value="notebook.zeppelinNoteId">
-        {{ "Notebook ID = " + notebook.zeppelinNoteId + ",     Interpreter = " + notebook.interpreterGroup}}
+      <option
+        v-for="notebook in notebooks"
+        :key="notebook.id"
+        :value="notebook.zeppelinNoteId"
+      >
+        {{
+          "Notebook ID = " +
+          notebook.zeppelinNoteId +
+          ",     Interpreter = " +
+          notebook.interpreterGroup
+        }}
       </option>
     </select>
     <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>
+      <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>
@@ -36,14 +48,13 @@ export default {
     };
   },
   methods: {
-
     async getNotebooks() {
       // fetch users
       await axios
         .get("http://localhost:9999/zeppelin/")
         .then((res) => {
           this.notebooks = res.data;
-          console.log("this.notebooks = " + JSON.stringify(this.notebooks))
+          console.log("this.notebooks = " + JSON.stringify(this.notebooks));
         })
         .catch((err) => console.log(err));
     },
@@ -54,14 +65,37 @@ export default {
         result: undefined,
       });
     },
-    executeCode(index) {
-      // Mock code execution, replace with actual execution logic
-      const result = this.mockExecuteCode(this.cells[index].code);
-      console.log("Run on cell ID = " + this.selectedNotebook)
-      this.$set(this.cells, index, {
-        ...this.cells[index],
-        result,
-      });
+    // executeCode(index) {
+    //   // Mock code execution, replace with actual execution logic
+    //   const result = this.mockExecuteCode(this.cells[index].code);
+    //   console.log("Run on cell ID = " + this.selectedNotebook)
+    //   this.$set(this.cells, index, {
+    //     ...this.cells[index],
+    //     result,
+    //   });
+    // },
+    async executeCode(index) {
+      console.log(
+        "Run on cell ID = " + this.selectedNotebook + " index = " + index
+      );
+      const codeCmd = {
+        noteId: this.selectedNotebook,
+        text: "kkk ",
+      };
+      console.log("codeCmd = " + JSON.stringify(codeCmd));
+      await axios({
+        method: "post",
+        url: "http://localhost:9999/zeppelin/addParagraph",
+        data: JSON.stringify(codeCmd),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+        .then((res) => {
+          //sending the event to parent to handle
+          console.log(res);
+        })
+        .catch((err) => console.log(err));
     },
     mockExecuteCode(code) {
       // Mock execution, replace with actual code execution logic