chore: Add vue-markdown-render dependency and update ScenarioExec.vue template

package-lock.json

@@ -14,6 +14,7 @@
                 "primeicons": "^6.0.1",
                 "primevue": "^4.0.0",
                 "vue": "^3.4.34",
+                "vue-markdown-render": "^2.2.1",
                 "vue-router": "^4.4.0"
             },
             "devDependencies": {
@@ -1210,8 +1211,7 @@
         "node_modules/argparse": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-            "dev": true
         },
         "node_modules/asynckit": {
             "version": "0.4.0",
@@ -2388,6 +2388,14 @@
             "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
             "dev": true
         },
+        "node_modules/linkify-it": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+            "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+            "dependencies": {
+                "uc.micro": "^1.0.1"
+            }
+        },
         "node_modules/local-pkg": {
             "version": "0.5.0",
             "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
@@ -2445,6 +2453,37 @@
                 "@jridgewell/sourcemap-codec": "^1.4.15"
             }
         },
+        "node_modules/markdown-it": {
+            "version": "13.0.2",
+            "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz",
+            "integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==",
+            "dependencies": {
+                "argparse": "^2.0.1",
+                "entities": "~3.0.1",
+                "linkify-it": "^4.0.1",
+                "mdurl": "^1.0.1",
+                "uc.micro": "^1.0.5"
+            },
+            "bin": {
+                "markdown-it": "bin/markdown-it.js"
+            }
+        },
+        "node_modules/markdown-it/node_modules/entities": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+            "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
+        "node_modules/mdurl": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+            "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+        },
         "node_modules/merge2": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3561,6 +3600,11 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/uc.micro": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+            "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+        },
         "node_modules/ufo": {
             "version": "1.5.4",
             "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
@@ -3787,6 +3831,17 @@
                 "eslint": ">=6.0.0"
             }
         },
+        "node_modules/vue-markdown-render": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/vue-markdown-render/-/vue-markdown-render-2.2.1.tgz",
+            "integrity": "sha512-XkYnC0PMdbs6Vy6j/gZXSvCuOS0787Se5COwXlepRqiqPiunyCIeTPQAO2XnB4Yl04EOHXwLx5y6IuszMWSgyQ==",
+            "dependencies": {
+                "markdown-it": "^13.0.2"
+            },
+            "peerDependencies": {
+                "vue": "^3.3.4"
+            }
+        },
         "node_modules/vue-router": {
             "version": "4.4.0",
             "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz",

package.json

@@ -14,6 +14,7 @@
         "primeicons": "^6.0.1",
         "primevue": "^4.0.0",
         "vue": "^3.4.34",
+        "vue-markdown-render": "^2.2.1",
         "vue-router": "^4.4.0"
     },
     "devDependencies": {

src/views/pages/ScenarioExec.vue

@@ -1,17 +1,29 @@
 <template>
-    <div v-if="loading">Loading...</div>
+    <Flex>
-    <div v-else>
+        <h1 v-if="!loading">
-        <div v-for="input in scenario.inputs" :key="input.name" class="input-container">
+            {{ scenario.name }}
-            <label :for="input.name"><b>{{ input.name }}</b></label>
+        </h1>
-            <div class="input-wrapper">
+        <div class="flex mt-6">
-                <InputText :id="input.name" v-model="value" :placeholder="`Type ${input.name}`" class="full-width-input"/>
+            <div class="card flex flex-col gap-4 w-full">
-                <Button label="Send" severity="info" @click="execScenario(input)" class="send-button"></Button>
+                <div v-if="!loading" v-for="input in scenario.inputs" :key="input.name" class="input-container">
+                    <label :for="input.name"><b>{{ input.label }}</b></label>
+                        <div class="input-wrapper">
+                            <InputText :id="input.name" v-model="value"   class="full-width-input"/>
+                            <Button label="Send" severity="info" @click="execScenario(input)" class="send-button"></Button>
+                        </div>
+                </div>
             </div>
         </div>
-        <div>
+
-            <p>{{ scenario_output }}</p>
+        <div class="flex mt-6">
+            <div class="card flex flex-col gap-4 w-full">
+                <div v-if="scenario_output != null">
+                    <vue-markdown :source="scenario_output" />
+                </div>
+            </div>
         </div>
-    </div>
+        
+    </Flex>
 </template>
 
 <script setup>
@@ -19,27 +31,31 @@ import axios from 'axios';
 import InputText from 'primevue/inputtext';
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
+import VueMarkdown from 'vue-markdown-render'
+
 
 const value = ref('');
 const scenario = ref(null);
 const inputs = ref([]);
-const scenario_output = ref('');
+const scenario_output = ref(null);
-const loading = ref(false); 
+const loading = ref(true); 
 
 const route = useRoute();
 
-onMounted(async () => {
+onMounted(() => {
     loading.value = true
     const id = route.params.id;       
     axios.get('http://localhost:8081/scenarios/' + id )
         .then(response => {
             console.log(response);
             loading.value = false
-           scenario.value  = response.data
+            scenario.value  = response.data
         });      
 });
 
 const execScenario = (input) => {
+    scenario_output.value = null
+    loading.value = true
     const data = {
         scenario_id: scenario.value.id,
         inputs: {
@@ -51,6 +67,8 @@ const execScenario = (input) => {
 
     axios.post('http://localhost:8081/scenarios/execute', data)
         .then(response => {
+            loading.value = false
+
             console.log(response);
             scenario_output.value = response.data.stringOutput
         });