history exec scenario page
This commit is contained in:
@@ -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
107
src/views/pages/ScenarioExecList.vue
Normal 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>
|
||||
Reference in New Issue
Block a user