155 lines
5.0 KiB
Vue
155 lines
5.0 KiB
Vue
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="loading_data" class="flex justify-center">
|
|
<ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>
|
|
</div>
|
|
<div v-if="data_loaded">
|
|
<Panel class="mt-6">
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-bold">Hermione Response</span>
|
|
</div>
|
|
</template>
|
|
<template #icons>
|
|
<div class="flex justify-end">
|
|
<Button severity="secondary" rounded @click="openDebug" v-tooltip.left="'View code'">
|
|
<i class="pi pi-code"></i>
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="card flex flex-col gap-4 w-full">
|
|
<div v-if="scenario.outputType == 'ciaOutput'">
|
|
<ChangeImpactOutputViewer :scenario_output="scenario_output" />
|
|
</div>
|
|
<div v-else>
|
|
<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 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 'md-editor-v3/lib/style.css';
|
|
import InputText from 'primevue/inputtext';
|
|
import ProgressSpinner from 'primevue/progressspinner';
|
|
import { ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
|
|
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 retrieveScenarioExec = () => {
|
|
const id = execution_id.value
|
|
loading.value = true
|
|
|
|
axios.get('/execution?id=' + id )
|
|
.then(response => {
|
|
loading.value = false
|
|
scenario.value = response.data.scenario
|
|
exec_scenario.value = response.data
|
|
data_loaded.value = true;
|
|
scenario_output.value = response.data.execSharedMap.scenario_output;
|
|
exec_id.value = response.data.scenarioExecution_id
|
|
});
|
|
};
|
|
|
|
|
|
|
|
|
|
const back = () => {
|
|
router.push({ name: 'scenario-list'});
|
|
}
|
|
|
|
const openDebug = () => {
|
|
debug_modal.value = true
|
|
}
|
|
</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> |