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

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

Browse Source
This commit is contained in:
Florinda
2025-03-10 12:15:15 +01:00
parent 4846331eaf af7328c8fa
commit 304a8ab23e
9 changed files with 1336 additions and 725 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/tailwind.css
View File

@@ -8,6 +8,6 @@
.editor ol, .md-editor-preview ol{
list-style-type: decimal !important;
}
.editor .md-editor-preview{
word-break: break-word;
.editor, .md-editor-preview{
word-break: break-word !important;
}

2
src/layout/AppMenu.vue
View File

@@ -83,7 +83,7 @@ function updateApplicationsMenu() {
//Aggiungi "Rev Eng Code" alla fine della lista
model.value[1].items.push({
label: 'Rev Eng Code',
label: 'Application Code',
icon: 'pi pi-fw pi-cog',
command: () => {
route.push({ path: '/app-browser' });

16
src/layout/AppProfileMenu.vue
View File

@@ -6,7 +6,9 @@
{{ user.name + " " + user.surname }}
</span>
<!-- <button @click="redirectProject()" class="p-button p-button-outlined">Projects</button> -->
<button @click="auth.logout()" class="p-button p-button-outlined">Logout</button>
<!-- <button @click="auth.logout()" class="p-button p-button-outlined">Logout</button> -->
<button @click="logout()" class="p-button p-button-outlined">Logout</button>
</div>
</div>
</template>
@@ -16,14 +18,26 @@
import { useAuth } from '@websanova/vue-auth/src/v3.js';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { ScenarioStore } from '@/stores/ScenarioStore';
const auth = useAuth();
const user = computed(() => auth.user());
const router = useRouter();
const scenario_store = ScenarioStore();
function redirectProject() {
router.push('/projects'); // Specifica il percorso per la pagina "Projects"
}
function logout() {
auth.logout().then(() => {
scenario_store.resetStore();
router.push('/auth/login');
}).catch(err => {
console.error("Errore durante il logout:", err);
});
}
</script>

49
src/stores/ScenarioStore.js
View File

@@ -6,7 +6,6 @@ import { UserPrefStore } from './UserPrefStore'
export const ScenarioStore = defineStore('scenario_store', () => {
const projectScenarios = ref([])
const globalScenarios = ref([])
const applicationScenarios = ref([])
@@ -18,7 +17,6 @@ export const ScenarioStore = defineStore('scenario_store', () => {
const userPrefStore = UserPrefStore()
const loadingStore = LoadingStore()
async function fetchScenarios() {
loadingStore.scenario_loading = true;
await ScenarioService.getScenariosProject(userPrefStore.selectedProject).then(resp => {
@@ -26,7 +24,6 @@ export const ScenarioStore = defineStore('scenario_store', () => {
allScenarios.value = [...projectScenarios.value]
loadingStore.scenario_loading = false;
});
}
async function fetchScenariosForRE() {
@@ -35,7 +32,6 @@ export const ScenarioStore = defineStore('scenario_store', () => {
scenariosForRE.value = resp.data;
loadingStore.scenario_loading = false;
});
}
async function fetchScenariosCross() {
@@ -45,19 +41,16 @@ export const ScenarioStore = defineStore('scenario_store', () => {
allScenarios.value = [...globalScenarios.value]
loadingStore.scenario_loading = false;
});
}
async function fetchApplicationScenarios() {
loadingStore.scenario_loading = true;
console.log("fetchApplicationScenarios >= selectedApp", userPrefStore.selectedApp) ;
await ScenarioService.getScenariosApplication(userPrefStore.selectedApp).then(resp=>{
console.log("fetchApplicationScenarios >= selectedApp", userPrefStore.selectedApp);
await ScenarioService.getScenariosApplication(userPrefStore.selectedApp).then(resp => {
console.log("response scenari", resp);
applicationScenarios.value = resp.data
allScenarios.value = [...projectScenarios.value, ...applicationScenarios.value]
loadingStore.scenario_loading = false;
})
}
@@ -65,7 +58,6 @@ export const ScenarioStore = defineStore('scenario_store', () => {
return allScenarios.value
})
const filteredScenarios = computed(() => {
console.log("scenarios", allScenarios.value);
var filteredScenario = []
@@ -91,12 +83,43 @@ export const ScenarioStore = defineStore('scenario_store', () => {
});
})
const filteredScenariosCanvas = computed(() => {
console.log("scenarios", allScenarios.value);
var filteredScenario = []
return {filteredScenarios,
if(userPrefStore.getSelApp != null) {
filteredScenario = [...globalScenarios.value,...projectScenarios.value, ...applicationScenarios.value]
} else {
filteredScenario = [...globalScenarios.value,...projectScenarios.value]
}
return filteredScenario
})
function resetStore() {
projectScenarios.value = []
globalScenarios.value = []
applicationScenarios.value = []
filterString.value = ''
allScenarios.value = []
typeFilter.value = { name: 'All', value: 'all' }
scenariosForRE.value = []
}
return {
filteredScenarios,
filteredScenariosCanvas,
projectScenarios,
applicationScenarios,
fetchScenarios,
fetchApplicationScenarios,
scenarios,
filterString , typeFilter, fetchScenariosCross, globalScenarios, fetchScenariosForRE, scenariosForRE}
})
filterString,
typeFilter,
fetchScenariosCross,
globalScenarios,
fetchScenariosForRE,
scenariosForRE,
resetStore
}
})

3
src/views/pages/ProjectList.vue
View File

@@ -79,12 +79,14 @@ import { computed, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { LoadingStore } from '../../stores/LoadingStore.js';
import { UserPrefStore } from '../../stores/UserPrefStore.js';
import { ScenarioStore } from '../../stores/ScenarioStore.js';
const loadingStore = LoadingStore()
const userPrefStore = UserPrefStore();
const auth = useAuth();
const user = computed(() => auth.user());
const scenario_store = ScenarioStore();
const router = useRouter()
@@ -122,6 +124,7 @@ const user = computed(() => auth.user());
const openProject = async (project) => {
try {
// Esegui l'update del progetto
scenario_store.resetStore();
await userPrefStore.updateSelectedProject(project);
console.log('Progetto aggiornato e dati utente ricaricati');

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

@@ -1,5 +1,4 @@
<template>
<div class="flex items-center justify-between p-1">
<h1>
{{ scenario.name }}
@@ -12,24 +11,17 @@
</div>
<div class="flex mt-6">
<div class="card flex flex-col gap-4 w-full">
<h3>
{{ scenario.hint }}
</h3>
<MdPreview :class="['markdown-content', 'ml-[-20px]']" v-model="scenario.hint" language="en-US" />
<template v-if="scenario.inputs">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div v-for="input in scenario.inputs" :key="input.name"
:class="['input-container', input.type === 'textarea' ? 'col-span-12' : '']">
<div v-for="input in scenario.inputs" :key="input.name" :class="['input-container', input.type === 'textarea' ? 'col-span-12' : '']">
<div v-if="input.type === 'singlefile' || input.type === 'singlefile_acceptall'">
<label :for="input.name">
<b>{{ input.label }}</b>
<i
class="pi pi-info-circle text-violet-600 cursor-pointer"
v-tooltip="'Upload one document from the suggested types. Mandatory if you want to execute scenario.'"
></i>
<i class="pi pi-info-circle text-violet-600 cursor-pointer" v-tooltip="'Upload one document from the suggested types. Mandatory if you want to execute scenario.'"></i>
</label>
<div>
<FileUpload
:name="'MultiFileUpload'"
:customUpload="false"
@@ -42,14 +34,11 @@
:showCancelButton="false"
:maxFileSize="10000000"
v-model:files="uploadedFiles"
>
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
<div class="pt-4">
<!-- Tabella per file in caricamento -->
<div v-if="uploadedFiles.length > 0">
<table class="table-auto w-full border-collapse border border-gray-200">
<thead>
<tr>
@@ -60,24 +49,14 @@
</tr>
</thead>
<tbody>
<tr
v-for="(file, index) in uploadedFiles"
:key="file.name + file.size"
class="hover:bg-gray-50"
>
<tr v-for="(file, index) in uploadedFiles" :key="file.name + file.size" class="hover:bg-gray-50">
<td class="border border-gray-300 p-2">{{ file.name }}</td>
<td class="border border-gray-300 p-2">{{ formatSize(file.size) }}</td>
<td class="border border-gray-300 p-2">
<Badge value="UPLOADED" severity="success" />
</td>
<td class="border border-gray-300 p-2">
<Button
label="Remove"
@click="onRemove({ file, index }, removeUploadedFileCallback, 'SingleFileUpload')"
/>
<Button label="Remove" @click="onRemove({ file, index }, removeUploadedFileCallback, 'SingleFileUpload')" />
</td>
</tr>
</tbody>
@@ -93,21 +72,15 @@
</div>
</template>
</FileUpload>
</div>
</div>
<div v-else-if="input.type === 'multifile'">
<label :for="input.name">
<b>{{ input.label }}
</b>
<i
class="pi pi-info-circle text-violet-600 cursor-pointer"
v-tooltip="'Upload others documents of .docx, .msg, .text type. Optional.'"
></i>
<b>{{ input.label }} </b>
<i class="pi pi-info-circle text-violet-600 cursor-pointer" v-tooltip="'Upload others documents of .docx, .msg, .text type. Optional.'"></i>
</label>
<div>
<FileUpload
:name="'MultiFileUpload'"
:customUpload="false"
@@ -120,14 +93,11 @@
:showCancelButton="false"
:maxFileSize="10000000"
v-model:files="uploadedFiles"
>
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
<div class="pt-4">
<!-- Tabella per file in caricamento -->
<div v-if="uploadedFiles.length > 0">
<table class="table-auto w-full border-collapse border border-gray-200">
<thead>
<tr>
@@ -138,24 +108,14 @@
</tr>
</thead>
<tbody>
<tr
v-for="(file, index) in uploadedFiles"
:key="file.name + file.size"
class="hover:bg-gray-50"
>
<tr v-for="(file, index) in uploadedFiles" :key="file.name + file.size" class="hover:bg-gray-50">
<td class="border border-gray-300 p-2">{{ file.name }}</td>
<td class="border border-gray-300 p-2">{{ formatSize(file.size) }}</td>
<td class="border border-gray-300 p-2">
<Badge value="UPLOADED" severity="success" />
</td>
<td class="border border-gray-300 p-2">
<Button
label="Remove"
@click="onRemove({ file, index }, removeUploadedFileCallback, 'MultiFileUpload')"
/>
<Button label="Remove" @click="onRemove({ file, index }, removeUploadedFileCallback, 'MultiFileUpload')" />
</td>
</tr>
</tbody>
@@ -171,32 +131,22 @@
</div>
</template>
</FileUpload>
</div>
</div>
<div v-else>
<label :for="input.name"><b>{{ input.label }}</b></label>
<label :for="input.name"
><b>{{ input.label }}</b></label
>
<div class="input-wrapper">
<component
:is="getInputComponent(input.type)"
:id="input.name"
v-model="formData[input.name]"
:options="input.options"
class="full-width-input"
:disabled="loadingStore.exectuion_loading"
/>
<component :is="getInputComponent(input.type)" :id="input.name" v-model="formData[input.name]" :options="input.options" class="full-width-input" :disabled="loadingStore.exectuion_loading" />
</div>
</div>
</div>
</div>
<div class="flex justify-center">
<Button :disabled="loadingStore.exectuion_loading || !isInputFilled " label="Execute" @click="execScenario" size="large" iconPos="right" icon="pi pi-cog"></Button>
<Button :disabled="loadingStore.exectuion_loading || !isInputFilled" label="Execute" @click="execScenario" size="large" iconPos="right" icon="pi pi-cog"></Button>
</div>
</template>
</div>
</div>
@@ -207,10 +157,8 @@
<div v-if="scenario_response_message && scenario_response_message.includes('/')">
<span>{{ scenario_response_message }}</span>
</div>
<div v-else>
Starting execution...
</div>
<div class="flex justify-center" style="margin-bottom: 30px;">
<div v-else>Starting execution...</div>
<div class="flex justify-center" style="margin-bottom: 30px">
<p>Time elapsed:&nbsp;</p>
<div id="timer" class="timer">00:00</div>
</div>
@@ -221,18 +169,12 @@
<div class="flex items-center gap-2">
<span class="font-bold">Workflow Response</span>
</div>
</template>
<template #icons>
<div class="flex justify-end">
<div class="flex">
<Rating
:modelValue="rating"
:stars="5"
@change="updateRating($event)"
/>
<Rating :modelValue="rating" :stars="5" @change="updateRating($event)" />
</div>
<div>
@@ -248,12 +190,7 @@
<ChangeImpactOutputViewer :scenario_output="scenario_output" />
</div>
<div v-if="scenario.outputType == 'file'">
<Button
icon="pi pi-download"
label="Download File"
class="p-button-primary"
@click="downloadFile"
/>
<Button icon="pi pi-download" label="Download File" class="p-button-primary" @click="downloadFile" />
</div>
<div v-else>
<!-- <div v-if="fileNamesOutput.length">
@@ -272,13 +209,8 @@
<div v-if="fileType == 'FILE'">
<ul>
<li class="file-item">
sf_document-{{exec_id}}
<Button
icon="pi pi-download"
class="p-button-text p-button-sm"
label="Download"
@click="downloadFile()"
/>
sf_document-{{ exec_id }}
<Button icon="pi pi-download" class="p-button-text p-button-sm" label="Download" @click="downloadFile()" />
</li>
</ul>
</div>
@@ -295,21 +227,16 @@
</div>
</Panel>
<Dialog v-model:visible="debug_modal" maximizable modal :header="scenario.name" :style="{ width: '75%' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<div class="flex">
<div class="card flex flex-col gap-4 w-full">
<JsonEditorVue
v-model="exec_scenario"
/>
<JsonEditorVue v-model="exec_scenario" />
</div>
</div>
</Dialog>
</div>
</template>
<script setup>
import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
import { LoadingStore } from '@/stores/LoadingStore';
import axios from 'axios';
@@ -327,10 +254,9 @@ import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { JellyfishLoader } from "vue3-spinner";
import { JellyfishLoader } from 'vue3-spinner';
import { ScenarioService } from '../../service/ScenarioService';
const loadingStore = LoadingStore();
const toast = useToast();
const zip = ref(null);
@@ -350,17 +276,17 @@ const exec_id = ref(null);
const exec_scenario = ref({});
const debug_modal = ref(false);
let pollingInterval = null;
const folderName = ref("");
const folderName = ref('');
const fileNamesOutput = ref([]);
// URL di upload
const uploadUrlBase = import.meta.env.VITE_BACKEND_URL;
const uploadUrl = ref("");
const uploadUrlPR = ref("");
const uploadUrlOther = ref("");
const uploadUrl = ref('');
const uploadUrlPR = ref('');
const uploadUrlOther = ref('');
// File che l'utente ha selezionato
const uploadedFiles = ref([]);
const numberPrFiles = ref(0);
const acceptedFormats = ref(".docx");
const acceptedFormats = ref('.docx');
// :url="`http://localhost:8081/uploadListFiles/${folderName}`"
// Stato per l'ID univoco della cartella
@@ -380,7 +306,7 @@ 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");
document.getElementById('timer').textContent = moment.utc(elapsedTime.asMilliseconds()).format('mm:ss');
}, 1000);
}
@@ -388,67 +314,67 @@ function stopTimer() {
clearInterval(timerInterval);
}
const isInputFilled = computed(() => {
var isFilled = true;
if(scenario.value.inputs === undefined) {
console.log("No inputs found");
if (scenario.value.inputs === undefined) {
console.log('No inputs found');
return false;
}
scenario.value.inputs.forEach(input => {
if(formData.value[input.name] === undefined || formData.value[input.name] === '') {
console.log("Input not filled: ", input.name);
isFilled= false;
scenario.value.inputs.forEach((input) => {
if (formData.value[input.name] === undefined || formData.value[input.name] === '') {
console.log('Input not filled: ', input.name);
isFilled = false;
}
});
return isFilled;
});
onMounted(() => {
fetchScenario(route.params.id);
const timestamp = Date.now(); // Ottiene il timestamp corrente
const randomNumber = Math.floor(Math.random() * 1000);
folderName.value = `${timestamp}_${randomNumber}`
folderName.value = `${timestamp}_${randomNumber}`;
uploadUrl.value = uploadUrlBase + '/uploadListFiles/' + folderName.value;
uploadUrlPR.value = uploadUrl.value + '/PR';
uploadUrlOther.value = uploadUrl.value + '/OTHER';
console.log("Upload URL:", uploadUrl);
console.log('Upload URL:', uploadUrl);
});
// Ricarica i dati quando cambia il parametro `id`
watch(() => route.params.id, fetchScenario);
//Function to fetch scenarios
function fetchScenario(id) {
//Function to fetch scenarios
function fetchScenario(id) {
scenario.value.inputs = null;
data_loaded.value = false;
formData.value = {};
loading.value = true;
axios.get(`/scenarios/${id}`)
.then(response => {
axios
.get(`/scenarios/${id}`)
.then((response) => {
scenario.value = response.data;
console.log("Scenario fetched:", scenario.value);
console.log('Scenario fetched:', scenario.value);
if (scenario.value.inputs.some((input) => input.name === 'MultiFileUpload' || input.name === 'SingleFileUpload')) {
reqMultiFile.value = true;
}
if(scenario.value.inputs.some((input) => input.type === 'singlefile_acceptall')){
acceptedFormats.value = ".docx, .pdf, .doc, .txt, .msg";
if (scenario.value.inputs.some((input) => input.type === 'singlefile_acceptall')) {
acceptedFormats.value = "";
//acceptedFormats.value = '.doc,.docx,.pdf,.msg,.txt,.xlx,.xlxs,.logs,.pptx,.json,.odt,.rtf,.xml,.html';
}
if(scenario.value.inputs.some((input) => input.type === 'singlefile')){
acceptedFormats.value = ".docx";
if (scenario.value.inputs.some((input) => input.type === 'singlefile')) {
acceptedFormats.value = '.docx';
}
})
.catch(error => {
console.error("Error fetching scenario:", error);
.catch((error) => {
console.error('Error fetching scenario:', error);
})
.finally(() => {
loading.value = false;
});
}
}
const getInputComponent = (type) => {
const getInputComponent = (type) => {
switch (type) {
case 'text':
return InputText;
@@ -459,19 +385,16 @@ watch(() => route.params.id, fetchScenario);
default:
return InputText;
}
};
};
const execScenario = () => {
if(numberPrFiles.value!==1 && reqMultiFile.value){
const execScenario = () => {
if (numberPrFiles.value !== 1 && reqMultiFile.value) {
toast.add({
severity: 'warn', // Tipo di notifica (errore)
summary: 'Attention', // Titolo della notifica
detail: 'You can upload only 1 PR file. Please remove others.' // Messaggio dettagliato
});
}else{
} else {
loading_data.value = true;
data_loaded.value = false;
rating.value = 0;
@@ -484,49 +407,45 @@ watch(() => route.params.id, fetchScenario);
inputs: { ...formData.value }
};
axios.post('/scenarios/execute-async', data)
.then(response => {
console.log("Response data exec 1:", response.data);
axios
.post('/scenarios/execute-async', data)
.then((response) => {
console.log('Response data exec 1:', response.data);
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
exec_id.value = response.data.scenarioExecution_id;
loadingStore.setIdExecLoading(exec_id.value);
// Start polling
startPolling();
})
.catch(error => {
.catch((error) => {
console.error('Error executing scenario:', error);
loadingStore.exectuion_loading = false;
});
}
};
const openDebug = () => {
};
const openDebug = () => {
axios.get('/scenarios/execute/' + exec_id.value).then((resp) => {
exec_scenario.value = resp.data;
debug_modal.value = true;
});
};
axios.get('/scenarios/execute/'+ exec_id.value).then(resp =>{
exec_scenario.value = resp.data
debug_modal.value = true
})
}
const pollBackendAPI = () => {
axios.get('/scenarios/getExecutionProgress/'+exec_id.value).then(response => {
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.");
console.log('Condition met, stopping polling.');
stopPolling();
stopTimer();
loading_data.value = false;
data_loaded.value = true;
scenario_output.value = response.data.stringOutput;
console.log("Response data exec 2:", response.data);
exec_id.value = response.data.scenarioExecution_id
scenario_response_message.value = null //if != null, next scenario starts with old message
console.log("Scenario 3:", scenario.value);
console.log('Response data exec 2:', response.data);
exec_id.value = response.data.scenarioExecution_id;
scenario_response_message.value = null; //if != null, next scenario starts with old message
console.log('Scenario 3:', scenario.value);
// Controlla se l'array `inputs` contiene un elemento con `name = 'MultiFileUpload'`
if (scenario.value.inputs.some((input) => input.name === 'MultiFileUpload')) {
@@ -573,7 +492,7 @@ if (scenario.value.inputs.some((input) => input.name === 'MultiFileUpload')) {
});
}
const showFileContent = (base64String, type) => {
const showFileContent = (base64String, type) => {
try {
// Decodifica la stringa Base64
const binaryString = atob(base64String);
@@ -602,29 +521,29 @@ if (scenario.value.inputs.some((input) => input.name === 'MultiFileUpload')) {
fileContent.value = 'Errore durante la decodifica o il parsing del file.';
console.error(error);
}
};
};
// Function to start polling
function startPolling() {
// Function to start polling
function startPolling() {
// Set polling interval (every 2.5 seconds in this case)
pollingInterval = setInterval(pollBackendAPI, 2500);
console.log("Polling started.");
}
console.log('Polling started.');
}
// Function to stop polling
function stopPolling() {
// Function to stop polling
function stopPolling() {
clearInterval(pollingInterval);
loadingStore.exectuion_loading = false;
loadingStore.setIdExecLoading("");
loadingStore.setIdExecLoading('');
console.log("Polling stopped.");
}
console.log('Polling stopped.');
}
const extractFiles = async (base64String) => {
const extractFiles = async (base64String) => {
try {
// Decodifica la base64 in un array di byte
const byteCharacters = atob(base64String);
const byteNumbers = Array.from(byteCharacters, char => char.charCodeAt(0));
const byteNumbers = Array.from(byteCharacters, (char) => char.charCodeAt(0));
const byteArray = new Uint8Array(byteNumbers);
// Carica il file zip con JSZip
@@ -634,14 +553,11 @@ if (scenario.value.inputs.some((input) => input.name === 'MultiFileUpload')) {
// Ottieni tutti i file (compresi quelli nelle sottocartelle)
fileNamesOutput.value = getFileNames(zipData);
} catch (error) {
console.error('Error extracting zip:', error);
fileNamesOutput.value = [];
}
}
};
// Funzione ricorsiva per ottenere tutti i file (anche quelli dentro le cartelle)
@@ -650,7 +566,8 @@ const getFileNames = (zipData) => {
// Esplora tutti i file nel file zip, considerando anche le sottocartelle
zipData.forEach((relativePath, file) => {
if (!file.dir) { // Escludiamo le cartelle
if (!file.dir) {
// Escludiamo le cartelle
files.push(relativePath); // Aggiungiamo il percorso relativo del file
}
});
@@ -686,14 +603,13 @@ const getFileNames = (zipData) => {
// console.log('Removing pending file:', file);
// callback(file, index);
// };
async function updateRating(newRating) {
ScenarioService.updateScenarioExecRating(exec_id.value,newRating.value).then((response) => {
async function updateRating(newRating) {
ScenarioService.updateScenarioExecRating(exec_id.value, newRating.value)
.then((response) => {
console.log('response:', response);
if (response.data === "OK") {
if (response.data === 'OK') {
rating.value = newRating.value;
console.log('Rating aggiornato con successo:', response.data);
console.log('Rating successfully updated:', response.data);
toast.add({
severity: 'success', // Tipo di notifica (successo)
summary: 'Success', // Titolo della notifica
@@ -701,7 +617,7 @@ const getFileNames = (zipData) => {
life: 3000 // Durata della notifica in millisecondi
});
} else {
console.error('Errore nell\'aggiornamento del rating', response.data);
console.error("Errore during rating update", response.data);
toast.add({
severity: 'error', // Tipo di notifica (errore)
summary: 'Error', // Titolo della notifica
@@ -709,10 +625,10 @@ const getFileNames = (zipData) => {
life: 3000 // Durata della notifica in millisecondi
});
}
}).catch((error) => {
console.error('Errore durante la chiamata al backend:', error);
})
.catch((error) => {
console.error('Error during backend call:', error);
});
}
// Funzione per generare un ID univoco
@@ -725,29 +641,31 @@ const onRemove = (event, removeUploadedFileCallback, type) => {
console.log('Removing file:', folderName.value);
try {
axios.post(
axios
.post(
`/deleteFile`,
{ fileName: file.name, folderName: folderName.value }, // Invio nome del file come payload
{
headers: {
'Content-Type': 'application/json',
},
'Content-Type': 'application/json'
}
).then(response => {
}
)
.then((response) => {
if (response.status === 200) {
console.log('File removed successfully:', response.data);
// Mostra notifica di successo
toast.add({
severity: "success",
summary: "Success",
detail: "File removed successfully!",
life: 3000,
severity: 'success',
summary: 'Success',
detail: 'File removed successfully!',
life: 3000
});
if(type === 'SingleFileUpload'){
if (type === 'SingleFileUpload') {
numberPrFiles.value -= 1;
console.log("Number of PR files: ", numberPrFiles.value);
console.log('Number of PR files: ', numberPrFiles.value);
}
// Aggiorna lista dei file caricati
@@ -757,24 +675,24 @@ const onRemove = (event, removeUploadedFileCallback, type) => {
// Mostra notifica di errore
toast.add({
severity: "error",
summary: "Error",
severity: 'error',
summary: 'Error',
detail: `Failed to remove file. Status: ${response.statusText}`,
life: 3000,
life: 3000
});
}
}).catch(error => {
})
.catch((error) => {
console.error('Error while removing file:', error);
// Mostra notifica di errore
toast.add({
severity: "error",
summary: "Error",
severity: 'error',
summary: 'Error',
detail: `Error while removing file: ${error.message}`,
life: 3000,
life: 3000
});
});
} catch (error) {
console.error('Error while removing file:', error);
}
@@ -784,7 +702,6 @@ const onRemove = (event, removeUploadedFileCallback, type) => {
// // Metodo per gestire la rimozione dei file
// console.log('Removing file:', folderName.value);
// try {
// axios.post(
// `http://localhost:8081/deleteFile`,
@@ -823,50 +740,48 @@ const onRemove = (event, removeUploadedFileCallback, type) => {
// }
const onUpload = (event, uploadType) => {
console.log("response upload ",event.xhr.response);
console.log('response upload ', event.xhr.response);
const { xhr } = event; // Estraggo l'oggetto XMLHttpRequest
if (xhr.status === 200) {
if (xhr.status === 200) {
// Risposta OK
if(uploadType==='SingleFileUpload'){
if (uploadType === 'SingleFileUpload') {
//formData.value['SingleFileUpload'] = "OK";
if (event.files && event.files.length > 0) {
console.log("File uploaded:", event.files);
console.log('File uploaded:', event.files);
formData.value['SingleFileUpload'] = event.files[0].name; // Nome del primo file
} else {
formData.value['SingleFileUpload'] = "UnknownFile";
formData.value['SingleFileUpload'] = 'UnknownFile';
}
numberPrFiles.value += 1;
console.log("Number of PR files: ", numberPrFiles.value);
console.log('Number of PR files: ', numberPrFiles.value);
}
formData.value['MultiFileUpload'] = xhr.response;
console.log("Form value upload ",formData.value['MultiFileUpload']);
console.log('Form value upload ', formData.value['MultiFileUpload']);
console.log("Upload completato con successo. Risposta:", xhr.response);
console.log('Upload successfully completed. Response:', xhr.response);
toast.add({
severity: "success",
summary: "Success",
detail: "File uploaded successfully!",
life: 3000,
severity: 'success',
summary: 'Success',
detail: 'File uploaded successfully!',
life: 3000
});
} else {
} else {
// Errore durante l'upload
console.error("Errore durante l'upload. Stato:", xhr.status, "Risposta:", xhr.response);
console.error("Error during upload. Status:", xhr.status, 'Response:', xhr.response);
toast.add({
severity: "error",
summary: "Error",
detail: `Failed to upload file. Stato: ${xhr.status}`,
life: 3000,
severity: 'error',
summary: 'Error',
detail: `Failed to upload file. Status: ${xhr.status}`,
life: 3000
});
}
}
};
// Funzione per scaricare il file
const downloadZipFile = async (fileName) => {
@@ -896,7 +811,7 @@ function downloadFile() {
// Converti la stringa base64 in un blob
const base64String = this.scenario_output.value;
const byteCharacters = atob(base64String);
const byteNumbers = Array.from(byteCharacters, char => char.charCodeAt(0));
const byteNumbers = Array.from(byteCharacters, (char) => char.charCodeAt(0));
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray]);
@@ -904,7 +819,7 @@ function downloadFile() {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'sf_document-'+exec_id.value+'.docx';// Specifica il nome del file
a.download = 'sf_document-' + exec_id.value + '.docx'; // Specifica il nome del file
document.body.appendChild(a);
a.click();
@@ -912,11 +827,9 @@ function downloadFile() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
} catch (error) {
console.error('Errore durante il download del file:', error);
console.error('Error during file download:', error);
}
}
}
const formatSize = (bytes) => {
const k = 1024;
@@ -931,25 +844,23 @@ const formatSize = (bytes) => {
return `${truncatedSize} ${sizes[i]}`;
};
</script>
<style scoped>
.input-container {
.input-container {
margin-bottom: 1em;
}
}
.input-wrapper {
.input-wrapper {
display: flex;
align-items: center;
gap: 0.5em;
margin-top: 10px;
}
}
.full-width-input {
.full-width-input {
width: 100%;
}
}
.editor ol {
list-style-type: decimal !important;
@@ -959,6 +870,7 @@ const formatSize = (bytes) => {
list-style-type: disc !important;
}
pre {
white-space: pre-wrap; /* Fa andare a capo il contenuto automaticamente */
word-wrap: break-word; /* Interrompe le parole troppo lunghe */
@@ -973,18 +885,11 @@ pre {
}
.markdown-content {
white-space: pre-wrap; /* Gestisce correttamente gli spazi e i ritorni a capo */
word-wrap: break-word; /* Spezza le parole lunghe */
overflow-wrap: break-word; /* Per compatibilità con più browser */
max-width: 100%; /* Adatta il contenuto alla larghezza del contenitore */
overflow-x: auto; /* Aggiunge scorrimento orizzontale solo se necessario */
background-color: #f5f5f5; /* Sfondo per distinguere il contenuto */
padding: 10px; /* Margini interni */
border-radius: 5px; /* Bordo arrotondato */
font-family: Arial, sans-serif; /* Puoi scegliere un font leggibile */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Effetto estetico di ombra */
line-height: 1.5; /* Aumenta la leggibilità */
}
</style>

13
src/views/pages/ScenarioList.vue
View File

@@ -58,13 +58,12 @@
<div class="p-4 flex flex-col flex-grow">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ item.name }}</h3>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 mt-2">{{ item.description }}</p>
<div v-if="item.visible==='DRAFT'" class="text-xs font-semibold text-white bg-purple-600 px-2 py-1 rounded-md inline-flex items-center justify-center w-auto mt-2">
</div>
<div class="p-2 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center w-full">
<div v-if="item.visible==='DRAFT'" class="text-xs font-semibold text-white bg-purple-400 px-2 py-1 inline-flex items-center justify-center w-auto">
{{ item.visible }}
</div>
</div>
<div class="p-2 border-t border-gray-200 dark:border-gray-700 flex justify-end">
<Button @click="executeScenario(item.id)" size="small" label="Load" class="flex-auto md:flex-initial text-white">
<Button @click="executeScenario(item.id)" size="small" label="Load" class="ml-auto flex-initial text-white">
<ChevronRightIcon class="w-6 h-5 text-white transition-transform transform hover:translate-x-1"/>
</Button>
</div>
@@ -102,10 +101,8 @@ const scenarioTypeOp = ref([
onMounted(() => {
userPrefStore.fetchUserData().then(() => {
scenario_store.fetchScenarios();
scenario_store.fetchScenariosCross();
scenario_store.fetchScenarios();
if(userPrefStore.getSelApp != null){
scenario_store.fetchApplicationScenarios();
}

57
src/views/pages/canvas/MdCanvas.vue
View File

@@ -7,7 +7,7 @@
<Dialog v-model:visible="execHermioneDialogVisible" modal :header="modalTitle" :style="{ width: '70rem' }">
<div v-if="askDialog" class="card flex flex-col gap-4 p-1">
<div class="flex flex-col gap-2">
<InputText id="question" type="text" placeholder="Write a Question" v-model="userQuestion" />
<Textarea id="question" type="text" placeholder="Write a Question" v-model="userQuestion" />
</div>
<div class="flex justify-center">
<Button label="Submit" @click="askHermione()" class=""/>
@@ -24,7 +24,8 @@
<button class="p-button p-button-primary" @click="addFromDialog(response)">Add to Canvas</button>
</div>
<div class="flex mt-2">
<Editor v-model="response" editorStyle="height: 320px; width: 930px" />
<!-- <Editor v-model="response" editorStyle="height: 320px; width: 930px" /> -->
<MdPreview class="editor" v-model="response" language="en-US" />
</div>
</div>
</Dialog>
@@ -46,12 +47,16 @@ import MdScenarioExctuotionDialog from '@/views/pages/canvas/MdScenarioExecution
import { Emoji, ExportPDF, Mark } from '@vavt/v3-extension';
import '@vavt/v3-extension/lib/asset/style.css';
import axios from 'axios';
import { MdEditor } from 'md-editor-v3';
import { MdEditor, MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import { computed, onMounted, ref } from 'vue';
import { computed, onMounted, ref} from 'vue';
import { ScenarioStore } from '@/stores/ScenarioStore';
import { UserPrefStore } from '@/stores/UserPrefStore';
const menu = ref();
const content = ref('# Welcome to WizardAI Canvas....');
const content = ref('# Welcome to WizardAI Canvas.... \n- Right-click to execute one of the available scenarios or ask general questions to Workflow.\n- Select text and right-click to summarize or rewrite it.');
const scenario_store = ScenarioStore();
const userPrefStore = UserPrefStore();
const scenarios = ref([]);
const items = ref([]);
const execScenarioDialogVisible = ref(false);
@@ -81,7 +86,7 @@ import { computed, onMounted, ref } from 'vue';
});
}
const onRightClick = (event) => {
const onRightClick = async (event) => {
if(editor.value.getSelectedText().length > 0) {
items.value=[
{label: 'Summarize',icon: 'pi pi-language', command:()=>openEditorAssistant(editor.value.getSelectedText(), "summarize")},
@@ -89,28 +94,34 @@ import { computed, onMounted, ref } from 'vue';
]
}else {
items.value=[
{ label: 'Ask Workflow', icon: 'pi pi-language', command:()=>openAskDialog()},
{ separator: true},
{ label: 'Execute Scenario', icon: 'pi pi-volume-up',items: scenarioMenuItems}
{label: 'Ask Workflow', icon: 'pi pi-language', command:()=>openAskDialog()},
{separator: true}
]
if (scenarioMenuItems().length > 0) {
items.value.push({label: 'Execute Scenario', icon: 'pi pi-volume-up', items: scenarioMenuItems()})
}
}
menu.value.show(event);
};
const scenarioMenuItems = computed(() => {
function scenarioMenuItems() {
const scenario_items = [];
for (let i = 0; i < scenarios.value.length; i++) {
scenario_store.filteredScenariosCanvas.forEach(scenario => {
if (scenario.canvasEnabled) {
scenario_items.push({
label: scenarios.value[i].name,
icon: 'pi pi-file',
label: scenario.name,
icon: 'pi pi-wrench',
command: () => {
executeScenario(scenarios.value[i]);
executeScenario(scenario);
}
});
}
});
return scenario_items;
});
};
const executeScenario = (scenario) => {
@@ -197,10 +208,18 @@ import { computed, onMounted, ref } from 'vue';
};
onMounted(() => {
ScenarioService.getScenarios().then(resp=>{
scenarios.value = resp.data
})
userPrefStore.fetchUserData().then(() => {
scenario_store.fetchScenariosCross();
scenario_store.fetchScenarios();
if(userPrefStore.getSelApp != null){
scenario_store.fetchApplicationScenarios();
}
});
scenarioMenuItems();
});
const toolbars = ref([

738
src/views/pages/canvas/MdScenarioExecutionDialog.vue
View File

@@ -1,7 +1,6 @@
<template>
<div>
<div v-if="!data_loaded && !loading_data" class="card flex flex-col gap-4 p-1">
<div v-for="input in scenario.inputs" :key="input.name" class="flex flex-col gap-2" >
<!-- <div v-for="input in scenario.inputs" :key="input.name" class="flex flex-col gap-2" >
<label :for="input.name">{{ input.label }}</label>
<component
:is="getInputComponent(input.type)"
@@ -9,51 +8,304 @@
v-model="inputData[input.name]"
class="full-width-input"
/>
</div> -->
<div v-for="input in scenario.inputs" :key="input.name" :class="['input-container', input.type === 'textarea' ? 'col-span-12' : '']">
<div v-if="input.type === 'singlefile' || input.type === 'singlefile_acceptall'">
<label :for="input.name">
<b>{{ input.label }}</b>
<i class="pi pi-info-circle text-violet-600 cursor-pointer" v-tooltip="'Upload one document from the suggested types. Mandatory if you want to execute scenario.'"></i>
</label>
<div>
<FileUpload
:name="'MultiFileUpload'"
:customUpload="false"
:url="uploadUrlPR"
@upload="(event) => onUpload(event, 'SingleFileUpload')"
:multiple="false"
:accept="acceptedFormats"
auto
:showUploadButton="false"
:showCancelButton="false"
:maxFileSize="10000000"
v-model:files="uploadedFiles"
>
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
<div class="pt-4">
<!-- Tabella per file in caricamento -->
<div v-if="uploadedFiles.length > 0">
<table class="table-auto w-full border-collapse border border-gray-200">
<thead>
<tr>
<th class="border border-gray-300 p-2">Name</th>
<th class="border border-gray-300 p-2">Dimension</th>
<th class="border border-gray-300 p-2">Status</th>
<th class="border border-gray-300 p-2">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(file, index) in uploadedFiles" :key="file.name + file.size" class="hover:bg-gray-50">
<td class="border border-gray-300 p-2">{{ file.name }}</td>
<td class="border border-gray-300 p-2">{{ formatSize(file.size) }}</td>
<td class="border border-gray-300 p-2">
<Badge value="UPLOADED" severity="success" />
</td>
<td class="border border-gray-300 p-2">
<Button label="Remove" @click="onRemove({ file, index }, removeUploadedFileCallback, 'SingleFileUpload')" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<template #empty>
<div class="flex items-center justify-center flex-col">
<i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
<p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
</div>
</template>
</FileUpload>
</div>
</div>
<div v-else-if="input.type === 'multifile'">
<label :for="input.name">
<b>{{ input.label }} </b>
<i class="pi pi-info-circle text-violet-600 cursor-pointer" v-tooltip="'Upload others documents of .docx, .msg, .text type. Optional.'"></i>
</label>
<div>
<FileUpload
:name="'MultiFileUpload'"
:customUpload="false"
:url="uploadUrlOther"
@upload="(event) => onUpload(event, 'MultiFileUpload')"
:multiple="true"
accept=".msg,.txt,.docx"
auto
:showUploadButton="false"
:showCancelButton="false"
:maxFileSize="10000000"
v-model:files="uploadedFiles"
>
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
<div class="pt-4">
<!-- Tabella per file in caricamento -->
<div v-if="uploadedFiles.length > 0">
<table class="table-auto w-full border-collapse border border-gray-200">
<thead>
<tr>
<th class="border border-gray-300 p-2">Name</th>
<th class="border border-gray-300 p-2">Dimension</th>
<th class="border border-gray-300 p-2">Status</th>
<th class="border border-gray-300 p-2">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(file, index) in uploadedFiles" :key="file.name + file.size" class="hover:bg-gray-50">
<td class="border border-gray-300 p-2">{{ file.name }}</td>
<td class="border border-gray-300 p-2">{{ formatSize(file.size) }}</td>
<td class="border border-gray-300 p-2">
<Badge value="UPLOADED" severity="success" />
</td>
<td class="border border-gray-300 p-2">
<Button label="Remove" @click="onRemove({ file, index }, removeUploadedFileCallback, 'MultiFileUpload')" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<template #empty>
<div class="flex items-center justify-center flex-col">
<i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
<p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
</div>
</template>
</FileUpload>
</div>
</div>
<div v-else>
<label :for="input.name"
><b>{{ input.label }}</b></label
>
<div class="input-wrapper">
<component :is="getInputComponent(input.type)" :id="input.name" v-model="formData[input.name]" :options="input.options" class="full-width-input" :disabled="loadingStore.exectuion_loading" />
</div>
</div>
</div>
<div class="flex justify-center">
<Button label="Submit" @click="execScenario" class=""/>
<Button :disabled="loadingStore.exectuion_loading || !isInputFilled" label="Execute" @click="execScenario" size="large" iconPos="right" icon="pi pi-cog"></Button>
</div>
</div>
<div v-if="loading_data" class="flex flex-col items-center">
<div class="flex justify-center mt-4">
<jellyfish-loader :loading="loadingStore.exectuion_loading" scale="1" color="#A100FF" />
</div>
<ProgressSpinner v-if="loading_data" style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
animationDuration=".5s" aria-label="Custom ProgressSpinner" />
<div v-if="data_loaded" class="card flex flex-col gap-4 p-1">
<div v-if="scenario_response_message && scenario_response_message.includes('/')">
<span>{{ scenario_response_message }}</span>
</div>
<div v-else>Starting execution...</div>
<div class="flex justify-center" style="margin-bottom: 30px">
<p>Time elapsed:&nbsp;</p>
<div id="timer" class="timer">00:00</div>
</div>
</div>
<div v-if="data_loaded">
<Panel class="mt-6">
<template #header>
<div class="flex items-center gap-2">
<span class="font-bold">Workflow Response</span>
</div>
<!-- <div class="flex items-center gap-2 p-0">
<button class="p-button p-button-primary" @click="addToCanvas">Add to Canvas</button>
</div> -->
</template>
<template #icons>
<div class="flex justify-end">
<div class="flex">
<Rating :modelValue="rating" :stars="5" @change="updateRating($event)" />
</div>
<div>
<Button severity="secondary" rounded @click="openDebug" v-tooltip.left="'View code'">
<i class="pi pi-code"></i>
</Button>
</div>
</div>
</template>
<div class="card flex flex-col gap-4 w-full">
<div class="flex items-center gap-2 p-0">
<button class="p-button p-button-primary" @click="addToCanvas">Add to Canvas</button>
</div>
<div class="flex mt-2">
<div>
<MdPreview class="editor" v-model="scenario_output" language="en-US" />
</div>
</div>
</Panel>
<Dialog v-model:visible="debug_modal" maximizable modal :header="scenario.name" :style="{ width: '75%' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<div class="flex">
<div class="card flex flex-col gap-4 w-full">
<JsonEditorVue v-model="exec_scenario" />
</div>
</div>
</Dialog>
</div>
</template>
<script setup>
import { ref ,defineEmits} from 'vue';
import InputText from 'primevue/inputtext';
import ProgressSpinner from 'primevue/progressspinner';
import Select from 'primevue/select';
import Textarea from 'primevue/textarea';
import axios from 'axios';
import { MdEditor } from 'md-editor-v3';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
import { ScenarioService } from '@/service/ScenarioService';
import { LoadingStore } from '@/stores/LoadingStore';
import axios from 'axios';
import JsonEditorVue from 'json-editor-vue';
import JSZip from 'jszip';
import { marked } from 'marked';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import moment from 'moment';
import { usePrimeVue } from 'primevue/config';
import InputText from 'primevue/inputtext';
import Select from 'primevue/select';
import Textarea from 'primevue/textarea';
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
import { computed, onMounted, ref, defineEmits} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { JellyfishLoader } from 'vue3-spinner';
const props = defineProps(['scenario'])
const emit = defineEmits(['add'])
const loadingStore = LoadingStore();
const toast = useToast();
const zip = ref(null);
const router = useRouter();
const route = useRoute();
const value = ref('');
const rating = ref(0);
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);
const formData = ref({});
const exec_id = ref(null);
const exec_scenario = ref({});
const debug_modal = ref(false);
let pollingInterval = null;
const folderName = ref('');
const fileNamesOutput = ref([]);
// URL di upload
const uploadUrlBase = import.meta.env.VITE_BACKEND_URL;
const uploadUrl = ref('');
const uploadUrlPR = ref('');
const uploadUrlOther = ref('');
// File che l'utente ha selezionato
const uploadedFiles = ref([]);
const numberPrFiles = ref(0);
const acceptedFormats = ref('.docx');
// :url="`http://localhost:8081/uploadListFiles/${folderName}`"
// Stato per l'ID univoco della cartella
const uniqueFolderId = ref(generateUniqueId());
const confirm = useConfirm();
const $primevue = usePrimeVue();
const files = ref([]);
const fileContent = ref('');
const fileType = ref('');
const reqMultiFile = ref(false);
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 (props.scenario.inputs === undefined) {
console.log('No inputs found');
return false;
}
props.scenario.inputs.forEach((input) => {
if (formData.value[input.name] === undefined || formData.value[input.name] === '') {
console.log('Input not filled: ', input.name);
isFilled = false;
}
});
return isFilled;
});
onMounted(() => {
console.log('MdScenarioExecutionDialog montato!');
const timestamp = Date.now(); //Ottiene il timestamp corrente
const randomNumber = Math.floor(Math.random() * 1000);
folderName.value = `${timestamp}_${randomNumber}`;
uploadUrl.value = uploadUrlBase + '/uploadListFiles/' + folderName.value;
uploadUrlPR.value = uploadUrl.value + '/PR';
uploadUrlOther.value = uploadUrl.value + '/OTHER';
console.log('Upload URL:', uploadUrl);
});
const loading_data = ref(false);
const data_loaded = ref(false);
const props = defineProps(['scenario']);
const emit = defineEmits(['add'])
const inputData = ref({});
const scenario_output = ref("");
const getInputComponent = (type) => {
const getInputComponent = (type) => {
switch (type) {
case 'text':
return InputText;
@@ -64,42 +316,419 @@
default:
return InputText;
}
};
};
const execScenario = () => {
const execScenario = () => {
if (numberPrFiles.value !== 1 && reqMultiFile.value) {
toast.add({
severity: 'warn', // Tipo di notifica (errore)
summary: 'Attention', // Titolo della notifica
detail: 'You can upload only 1 PR file. Please remove others.' // Messaggio dettagliato
});
} else {
loading_data.value = true;
data_loaded.value = false;
rating.value = 0;
startTimer();
loadingStore.exectuion_loading = true;
const data = {
scenario_id: props.scenario.id,
inputs: { ...inputData.value }
inputs: { ...formData.value }
};
console.log(data);
axios
.post('/scenarios/execute-async', data)
.then((response) => {
console.log('Response data exec 1:', response.data);
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;
loadingStore.setIdExecLoading(exec_id.value);
// Start polling
startPolling();
})
.catch((error) => {
console.error('Error executing scenario:', error);
loadingStore.exectuion_loading = false;
});
}
};
const openDebug = () => {
axios.get('/scenarios/execute/' + exec_id.value).then((resp) => {
exec_scenario.value = resp.data;
debug_modal.value = true;
});
};
axios.post('/scenarios/execute', data)
.then(response => {
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();
stopTimer();
loading_data.value = false;
data_loaded.value = true;
console.log(response);
scenario_output.value = response.data.stringOutput;
console.log('Response data exec 2:', response.data);
exec_id.value = response.data.scenarioExecution_id;
scenario_response_message.value = null; //if != null, next scenario starts with old message
console.log('Scenario 3:', props.scenario);
})
.catch(error => {
console.error('Error executing scenario:', error);
// Controlla se l'array `inputs` contiene un elemento con `name = 'MultiFileUpload'`
if (props.scenario.inputs.some((input) => input.name === 'MultiFileUpload')) {
if (response.data.status == 'OK') {
// Accedi al primo step e controlla se esiste l'attributo `codegenie_output_type`
const firstStep = props.scenario.steps[0];
if (firstStep?.attributes?.['codegenie_output_type']) {
// Controlla se `codegenie_output_type` è uguale a 'FILE'
// if (firstStep.attributes['codegenie_output_type'] === 'FILE') {
// console.log('base64 ', scenario_output.value);
// Chiama la funzione `extractFiles` con il valore di `scenario_output.value`
//extractFiles(scenario_output.value);
//}
if (firstStep.attributes['codegenie_output_type'] == 'FILE') {
//console.log('base64 ', scenario_output.value)
//extractFiles(scenario_output.value, 'output', zipOutput)
fileType.value = 'FILE';
} else if (firstStep.attributes['codegenie_output_type'] == 'MARKDOWN') {
fileType.value = 'MARKDOWN';
showFileContent(scenario_output.value, 'MARKDOWN');
} else if (firstStep.attributes['codegenie_output_type'] == 'JSON') {
fileType.value = 'JSON';
showFileContent(scenario_output.value, 'JSON');
}
}
} else {
console.log('Error in execution');
}
}
} else {
console.log('Condition not met, polling continues.');
scenario_response.value = response.data;
scenario_response_message.value = response.data.message;
}
});
};
};
const addToCanvas = () => {
console.log("Aggiunto");
emit('add',scenario_output.value)
const showFileContent = (base64String, type) => {
try {
// Decodifica la stringa Base64
const binaryString = atob(base64String);
const binaryLength = binaryString.length;
const bytes = new Uint8Array(binaryLength);
for (let i = 0; i < binaryLength; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
// Converti i byte in una stringa leggibile
const textContent = new TextDecoder().decode(bytes);
// Gestione del tipo di file
if (type === 'MARKDOWN') {
//fileType.value = 'markdown';
fileContent.value = marked(textContent); // Converte Markdown in HTML
} else if (type === 'JSON') {
//fileType.value = 'json';
const jsonObject = JSON.parse(textContent); // Parse JSON
fileContent.value = JSON.stringify(jsonObject, null, 2); // Formatta JSON
} else {
fileContent.value = 'Tipo di file non supportato.';
}
} catch (error) {
fileContent.value = 'Errore durante la decodifica o il parsing del file.';
console.error(error);
}
};
// Function to start polling
function startPolling() {
// Set polling interval (every 2.5 seconds in this case)
pollingInterval = setInterval(pollBackendAPI, 2500);
console.log('Polling started.');
}
// Function to stop polling
function stopPolling() {
clearInterval(pollingInterval);
loadingStore.exectuion_loading = false;
loadingStore.setIdExecLoading('');
console.log('Polling stopped.');
}
const extractFiles = async (base64String) => {
try {
// Decodifica la base64 in un array di byte
const byteCharacters = atob(base64String);
const byteNumbers = Array.from(byteCharacters, (char) => char.charCodeAt(0));
const byteArray = new Uint8Array(byteNumbers);
// Carica il file zip con JSZip
const zipData = await JSZip.loadAsync(byteArray);
zip.value = zipData;
// Ottieni tutti i file (compresi quelli nelle sottocartelle)
fileNamesOutput.value = getFileNames(zipData);
} catch (error) {
console.error('Error extracting zip:', error);
fileNamesOutput.value = [];
}
};
// Funzione ricorsiva per ottenere tutti i file (anche quelli dentro le cartelle)
const getFileNames = (zipData) => {
const files = [];
// Esplora tutti i file nel file zip, considerando anche le sottocartelle
zipData.forEach((relativePath, file) => {
if (!file.dir) {
// Escludiamo le cartelle
files.push(relativePath); // Aggiungiamo il percorso relativo del file
}
});
return files;
};
async function updateRating(newRating) {
ScenarioService.updateScenarioExecRating(exec_id.value, newRating.value)
.then((response) => {
console.log('response:', response);
if (response.data === 'OK') {
rating.value = newRating.value;
console.log('Rating aggiornato con successo:', response.data);
toast.add({
severity: 'success', // Tipo di notifica (successo)
summary: 'Success', // Titolo della notifica
detail: 'Rating updated with success.', // Messaggio dettagliato
life: 3000 // Durata della notifica in millisecondi
});
} else {
console.error("Errore nell'aggiornamento del rating", response.data);
toast.add({
severity: 'error', // Tipo di notifica (errore)
summary: 'Error', // Titolo della notifica
detail: 'Error updating rating. Try later.', // Messaggio dettagliato
life: 3000 // Durata della notifica in millisecondi
});
}
})
.catch((error) => {
console.error('Errore durante la chiamata al backend:', error);
});
}
// Funzione per generare un ID univoco
function generateUniqueId() {
return Date.now(); // Puoi usare anche UUID.randomUUID() o una libreria simile
}
const onRemove = (event, removeUploadedFileCallback, type) => {
const { file, index } = event;
console.log('Removing file:', folderName.value);
try {
axios
.post(
`/deleteFile`,
{ fileName: file.name, folderName: folderName.value }, // Invio nome del file come payload
{
headers: {
'Content-Type': 'application/json'
}
}
)
.then((response) => {
if (response.status === 200) {
console.log('File removed successfully:', response.data);
// Mostra notifica di successo
toast.add({
severity: 'success',
summary: 'Success',
detail: 'File removed successfully!',
life: 3000
});
if (type === 'SingleFileUpload') {
numberPrFiles.value -= 1;
console.log('Number of PR files: ', numberPrFiles.value);
}
// Aggiorna lista dei file caricati
removeUploadedFileCallback(index);
} else {
console.error('Failed to remove file:', response.statusText);
// Mostra notifica di errore
toast.add({
severity: 'error',
summary: 'Error',
detail: `Failed to remove file. Status: ${response.statusText}`,
life: 3000
});
}
})
.catch((error) => {
console.error('Error while removing file:', error);
// Mostra notifica di errore
toast.add({
severity: 'error',
summary: 'Error',
detail: `Error while removing file: ${error.message}`,
life: 3000
});
});
} catch (error) {
console.error('Error while removing file:', error);
}
};
const onUpload = (event, uploadType) => {
console.log('response upload ', event.xhr.response);
const { xhr } = event; // Estraggo l'oggetto XMLHttpRequest
if (xhr.status === 200) {
// Risposta OK
if (uploadType === 'SingleFileUpload') {
//formData.value['SingleFileUpload'] = "OK";
if (event.files && event.files.length > 0) {
console.log('File uploaded:', event.files);
formData.value['SingleFileUpload'] = event.files[0].name; // Nome del primo file
} else {
formData.value['SingleFileUpload'] = 'UnknownFile';
}
numberPrFiles.value += 1;
console.log('Number of PR files: ', numberPrFiles.value);
}
formData.value['MultiFileUpload'] = xhr.response;
console.log('Form value upload ', formData.value['MultiFileUpload']);
console.log('Upload completato con successo. Risposta:', xhr.response);
toast.add({
severity: 'success',
summary: 'Success',
detail: 'File uploaded successfully!',
life: 3000
});
} else {
// Errore durante l'upload
console.error("Errore durante l'upload. Stato:", xhr.status, 'Risposta:', xhr.response);
toast.add({
severity: 'error',
summary: 'Error',
detail: `Failed to upload file. Stato: ${xhr.status}`,
life: 3000
});
}
};
// Funzione per scaricare il file
const downloadZipFile = async (fileName) => {
if (!zip.value) return;
try {
// Estrai il file dallo zip
const fileContent = await zip.value.file(fileName).async('blob');
const url = URL.createObjectURL(fileContent);
// Crea un link per scaricare il file
const a = document.createElement('a');
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
} catch (error) {
console.error(`Error downloading file "${fileName}":`, error);
}
};
function downloadFile() {
try {
// Converti la stringa base64 in un blob
const base64String = this.scenario_output;
const byteCharacters = atob(base64String);
const byteNumbers = Array.from(byteCharacters, (char) => char.charCodeAt(0));
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray]);
// Crea un link temporaneo per il download
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'sf_document-' + exec_id.value + '.docx'; // Specifica il nome del file
document.body.appendChild(a);
a.click();
// Rimuovi il link temporaneo
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
} catch (error) {
console.error('Errore durante il download del file:', error);
}
}
const formatSize = (bytes) => {
const k = 1024;
const sizes = $primevue.config.locale.fileSizeTypes;
if (bytes === 0) {
return `0 ${sizes[0]}`;
}
const i = Math.floor(Math.log(bytes) / Math.log(k));
const truncatedSize = Math.trunc(bytes / Math.pow(k, i)); // Troncamento del valore
return `${truncatedSize} ${sizes[i]}`;
};
const addToCanvas = () => {
console.log("Added");
emit('add',scenario_output.value)
}
</script>
<style>
.editor ol {
list-style-type: decimal !important;
}
<style >
.editor ul {
list-style-type: disc !important;
}
.input-container {
margin-bottom: 1em;
}
.input-wrapper {
display: flex;
align-items: center;
gap: 0.5em;
margin-top: 10px;
}
.full-width-input {
width: 100%;
}
.editor ol {
list-style-type: decimal !important;
@@ -108,4 +737,25 @@
.editor ul {
list-style-type: disc !important;
}
pre {
white-space: pre-wrap; /* Fa andare a capo il contenuto automaticamente */
word-wrap: break-word; /* Interrompe le parole troppo lunghe */
overflow-wrap: break-word; /* Per compatibilità con più browser */
max-width: 100%; /* Imposta una larghezza massima pari al contenitore genitore */
overflow-x: auto; /* Aggiunge uno scorrimento orizzontale solo se necessario */
background-color: #f5f5f5; /* Colore di sfondo opzionale per migliorare leggibilità */
padding: 10px; /* Spaziatura interna */
border-radius: 5px; /* Bordo arrotondato opzionale */
font-family: monospace; /* Font specifico per codice */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombra per migliorare estetica */
}
.markdown-content {
word-wrap: break-word; /* Spezza le parole lunghe */
overflow-wrap: break-word; /* Per compatibilità con più browser */
max-width: 100%; /* Adatta il contenuto alla larghezza del contenitore */
overflow-x: auto; /* Aggiunge scorrimento orizzontale solo se necessario */
background-color: #f5f5f5; /* Sfondo per distinguere il contenuto */
}
</style>