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

history exec scenario page

Browse Source
This commit is contained in:
Florinda
2024-10-30 09:23:48 +01:00
parent 440219ee24
commit 2f5a3e688a
5 changed files with 171 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/router/index.js
View File

@@ -29,10 +29,16 @@ const router = createRouter({
path: 'exec/:id',
name: 'scenario-exec',
component: () => import('@/views/pages/ScenarioExec.vue')
},{
},
{
path: 'exec-history',
name: 'scenario-exec-history',
component: () => import('@/views/pages/OldScenarioExec.vue')
},
{
path: '/executions',
name: 'executions',
component: () => import('@/views/pages/OldScenarioExec.vue')
component: () => import('@/views/pages/ScenarioExecList.vue')
},
{
path: '/canvas',

4
src/service/ScenarioService.js
View File

@@ -17,5 +17,9 @@ export const ScenarioService = {
return axios.get('/scenariosCross')
},
getExecScenariosByUser() {
return axios.get('/scenariosByUser')
}
}

36
src/stores/ScenarioExecutionStore.js Normal file
View File

@@ -0,0 +1,36 @@
import { defineStore } from 'pinia';
import { computed, ref } from 'vue';
import { ScenarioService } from '../service/ScenarioService';
import { LoadingStore } from './LoadingStore';
export const ScenarioExecutionStore = defineStore('scenario_execution_store', () => {
const lstScenarioExecution = ref([])
const selectedExecScenario = ref(null)
const loadingStore = LoadingStore()
async function fetchScenariosExecution() {
loadingStore.scenario_loading = true;
await ScenarioService.getExecScenariosByUser().then(resp => {
lstScenarioExecution.value = resp.data;
loadingStore.scenario_loading = false;
});
}
const scenariosExecution = computed(() => {
return lstScenarioExecution.value
})
const getSelectedExecScenario = computed(() => {
return selectedExecScenario.value
})
async function setSelectedExecScenario(execScenario){
selectedExecScenario.value = execScenario
console.log("selectedExecScenario", selectedExecScenario.value);
}
return { fetchScenariosExecution, selectedExecScenario, lstScenarioExecution, scenariosExecution, getSelectedExecScenario, setSelectedExecScenario}
})

42
src/views/pages/OldScenarioExec.vue
View File

@@ -5,30 +5,15 @@
<div v-else>
<div class="flex items-center justify-between p-2">
<Button
<!-- <Button
@click="back()"
label="Load"
class="flex items-center text-sm">
<ChevronLeftIcon name="chevron-left" class="w-4 h-5 text-white"/>
<span>Back to Scenarios</span>
</Button>
</div>
<div class="flex mt-6">
<div class="card flex flex-col gap-4 w-full">
<div class="input-container flex items-center" v-if="!data_loaded">
<div class="flex-grow">
<label ><h2>Execution Id</h2></label>
<div class="input-wrapper">
<InputText v-model="execution_id" class="full-width-input" />
</div>
</div>
<Button label="Find" @click="retrieveScenarioExec" class="mt-9 ml-4" />
</div>
<h1>
{{ scenario.name }}
</h1>
</div>
</Button> -->
</div>
</div>
<div v-if="loading_data" class="flex justify-center">
@@ -75,16 +60,14 @@
<script setup>
import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
import { MdPreview } from 'md-editor-v3';
import { ChevronLeftIcon } from '@heroicons/vue/24/solid';
import axios from 'axios';
import JsonEditorVue from 'json-editor-vue';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import InputText from 'primevue/inputtext';
import ProgressSpinner from 'primevue/progressspinner';
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ScenarioExecutionStore } from '../../stores/ScenarioExecutionStore.js';
const router = useRouter();
const route = useRoute();
@@ -98,10 +81,17 @@ const formData = ref({});
const exec_id = ref(null);
const exec_scenario = ref({});
const debug_modal = ref(false);
const execution_id = ref("");
const scenario_execution_store = ScenarioExecutionStore();
const execution_id = scenario_execution_store.getSelectedExecScenario;
const retrieveScenarioExec = () => {
const id = execution_id.value
onMounted(() => {
console.log("scenario id: ", execution_id.id);
retrieveScenarioExec(execution_id.id)
});
const retrieveScenarioExec = (id) => {
//const id = execution_id.value.id;
loading.value = true
axios.get('/execution?id=' + id )

107
src/views/pages/ScenarioExecList.vue Normal file
View File

@@ -0,0 +1,107 @@
<template>
<div v-if="loading" class="flex justify-center">
<ProgressSpinner style="width: 50px; height: 50px; margin-top: 50px" strokeWidth="3" fill="transparent"/>
</div>
<div v-else>
<div class="flex items-center justify-between p-2">
<!-- <Button
@click="back()"
label="Load"
class="flex items-center text-sm">
<ChevronLeftIcon name="chevron-left" class="w-4 h-5 text-white"/>
<span>Back to Scenarios</span>
</Button> -->
</div>
<h2 class="text-xl font-bold mt-6">Executions List</h2>
<DataTable :value="scenario_execution_store.scenariosExecution" :loading="loading_data" class="mt-6">
<Column field="id" header="Execution ID" />
<Column field="scenario.name" header="Name" />
<Column field="" header="Execution Date" />
<Column field="execSharedMap.user_input.selected_project" header="Project Input" />
<Column field="execSharedMap.user_input.selected_application" header="Application Input" />
<Column field="scenario.id" header="Scenario ID" />
<Column field="" header="Model AI" />
<Column field="id">
<template #body="slotProps">
<Button label="View" @click="goToScenarioExec(slotProps.data)" class="mt-9 ml-4" />
</template>
</Column>
</DataTable>
</div>
<div v-if="loading_data" class="flex justify-center">
<ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>
</div>
</template>
<script setup>
import 'md-editor-v3/lib/style.css';
import ProgressSpinner from 'primevue/progressspinner';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ScenarioExecutionStore } from '../../stores/ScenarioExecutionStore.js';
const router = useRouter();
const route = useRoute();
const value = ref('');
const scenario = ref({});
const scenario_output = 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);
const execution_id = ref("");
const listScenarios = ref([]);
const scenario_execution_store = ScenarioExecutionStore();
onMounted(() => {
scenario_execution_store.fetchScenariosExecution()
});
const goToScenarioExec = (execScenarioItem) => {
console.log(execScenarioItem);
scenario_execution_store.setSelectedExecScenario(execScenarioItem).then(() => {
router.push({ name: 'scenario-exec-history'});
});
};
</script>
<style scoped>
.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;
}
.editor ul {
list-style-type: disc !important;
}
</style>