added scenario information for user while executing scenario

src/views/pages/ScenarioExec.vue

@@ -49,11 +49,21 @@
                     </template>
                 </div>
             </div>
-        
 
-        <div v-if="loading_data" class="flex justify-center">
+        <div v-if="loading_data" class="flex flex-col items-center">
-            <jellyfish-loader :loading="loadingStore.exectuion_loading"  scale="1" />
+            <div class="flex justify-center">
-            <!--<ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>-->
+                <jellyfish-loader :loading="loadingStore.exectuion_loading" scale="1" color="#A100FF" />
+            </div> 
+            <div v-if="scenario_response_message && scenario_response_message.includes('-')">
+                <span>{{ scenario_response_message.split('-').join(' ') }}</span>
+            </div>
+            <div v-else>
+                Starting execution...
+            </div>
+            <div class="flex justify-center">
+                <p>Time elapsed:&nbsp;</p>
+                <div id="timer" class="timer">00:00</div>
+            </div>
         </div>
         <div v-if="data_loaded">
             <Panel class="mt-6">
@@ -105,6 +115,7 @@ import InputText from 'primevue/inputtext';
 import Select from 'primevue/select';
 import Textarea from 'primevue/textarea';
 import { computed, onMounted, ref, watch } from 'vue';
+import moment from 'moment';
 import { useRoute, useRouter } from 'vue-router';
 import { JellyfishLoader } from "vue3-spinner";
 
@@ -115,7 +126,9 @@ const router = useRouter();
 const route = useRoute();
 const value = ref('');
 const scenario = ref({});
+const scenario_response = ref(null);
 const scenario_output = ref(null);
+const scenario_response_message = ref(null);
 const loading = ref(false);
 const data_loaded = ref(false);
 const loading_data = ref(false);
@@ -125,6 +138,22 @@ const exec_scenario = ref({});
 const debug_modal = ref(false);
 let pollingInterval = null;
 
+let startTime = ref(null);
+let timerInterval = ref(null);
+
+function startTimer() {
+  startTime = Date.now();
+  timerInterval = setInterval(() => {
+    const elapsedTime = moment.duration(Date.now() - startTime);
+    document.getElementById("timer").textContent = moment.utc(elapsedTime.asMilliseconds()).format("mm:ss");
+  }, 1000);
+}
+
+function stopTimer() {
+    clearInterval(timerInterval);
+}
+
+
 const isInputFilled = computed(() => {
     var isFilled = true;
     if(scenario.value.inputs === undefined) {
@@ -179,6 +208,7 @@ watch(() => route.params.id, fetchScenario);
     const execScenario = () => {
         loading_data.value = true;
         data_loaded.value = false;
+        startTimer();
 
         loadingStore.exectuion_loading = true;
 
@@ -189,15 +219,17 @@ watch(() => route.params.id, fetchScenario);
 
         axios.post('/scenarios/execute-async', data)
             .then(response => {
+                scenario_response.value = response.data;
+                scenario_response_message.value = response.data.message;
                 scenario_output.value = response.data.stringOutput;
                 exec_id.value = response.data.scenarioExecution_id
+
                 // Start polling
                 startPolling();
             })
             .catch(error => {
                 console.error('Error executing scenario:', error);
                 loadingStore.exectuion_loading = false;
-
             });
     };
 
@@ -216,25 +248,29 @@ watch(() => route.params.id, fetchScenario);
 
     const pollBackendAPI = () => {
 
-axios.get('/scenarios/getExecutionProgress/'+exec_id.value).then(response => {
+        axios.get('/scenarios/getExecutionProgress/'+exec_id.value).then(response => {
-    if (response.data.status == 'OK' || response.data.status == 'ERROR') {
+            if (response.data.status == 'OK' || response.data.status == 'ERROR') {
-        console.log("Condition met, stopping polling.");
+                console.log("Condition met, stopping polling.");
-        stopPolling();
+                stopPolling();
 
-        loading_data.value = false;
+                stopTimer();
-        data_loaded.value = true;
+                loading_data.value = false;
-        scenario_output.value = response.data.stringOutput;
+                data_loaded.value = true;
-        exec_id.value = response.data.scenarioExecution_id
+                scenario_output.value = response.data.stringOutput;
+                exec_id.value = response.data.scenarioExecution_id
+                scenario_response_message.value = null //if != null, next scenario starts with old message
 
-    } else {
+            } else {
-        console.log("Condition not met, polling continues.");
+                console.log("Condition not met, polling continues.");
+                scenario_response.value = response.data;
+                scenario_response_message.value = response.data.message;
+            }
+        });
     }
-});
-}
 
     // Function to start polling
     function startPolling() {
-    // Set polling interval (every 5 seconds in this case)
+    // Set polling interval (every 2.5 seconds in this case)
         pollingInterval = setInterval(pollBackendAPI, 2500);
         console.log("Polling started.");
     }