admin/hermione-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added scenario information for user while executing scenario

Browse Source
This commit is contained in:
Emanuele Ferrelli
2024-11-18 18:00:28 +01:00
parent 1443fafb7b
commit e9d55af49c
1 changed files with 54 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/views/pages/ScenarioExec.vue
View File

@@ -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 => {
if (response.data.status == 'OK' || response.data.status == 'ERROR') {
console.log("Condition met, stopping polling.");
stopPolling();
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();
loading_data.value = false;
data_loaded.value = true;
scenario_output.value = response.data.stringOutput;
exec_id.value = response.data.scenarioExecution_id
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.");
} 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.");
}