Merge branch 'master' of https://dev.azure.com/olympusai/Olympus/_git/hermione-fe

src/views/pages/ApplicationBrowser.vue

@@ -25,7 +25,7 @@
                 </div>
             </div>
         </div>   
-        <div class="col-span-6">
+        <div id ="card-flow-codeviewer" class="flex-1">
             <div class="card flow-codeviewer">  
                 <h5>File Explorer</h5>
                 <p v-if="nodes && nodes.length"> 
@@ -147,6 +147,15 @@ const skeletonConfigs = [
     { width: "80%", height: "1.5rem" }
 ];
 
+watch(selectedFile, () => {
+    if (selectedFile.value) {
+        const cardFlowCodeViewer = document.getElementById('card-flow-codeviewer');
+        if (cardFlowCodeViewer) {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+    }
+});
+
 </script>
 
 

src/views/pages/ScenarioExec.vue

@@ -50,10 +50,20 @@
                 </div>
             </div>
 
-
-        <div v-if="loading_data" class="flex justify-center">
-            <jellyfish-loader :loading="loadingStore.exectuion_loading"  scale="1" />
-            <!--<ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>-->
+        <div v-if="loading_data" class="flex flex-col items-center">
+            <div class="flex justify-center">
+                <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') {
                 console.log("Condition met, stopping polling.");
                 stopPolling();
 
+                stopTimer();
                 loading_data.value = false;
                 data_loaded.value = true;
                 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 {
                 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.");
     }