Added Cia Scenario Viewer
This commit is contained in:
andrea.terzani
122
src/components/ChangeImpactOutputViewer.vue
Normal file
122
src/components/ChangeImpactOutputViewer.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div v-if="parsedOuput != null">
|
||||
<h1>{{ parsedOuput.title }}</h1>
|
||||
<p>{{ parsedOuput.description }}</p>
|
||||
<CiaFlowCodeViewer :changes="parsedOuput.changes">
|
||||
</CiaFlowCodeViewer>
|
||||
<!-- <div v-for="change in parsedOuput.changes" >
|
||||
|
||||
<CodeDiff
|
||||
:old-string="change.previous_code"
|
||||
:new-string="change.new_code"
|
||||
output-format="side-by-side"
|
||||
/>
|
||||
|
||||
|
||||
</div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, onMounted, ref, toRefs } from 'vue';
|
||||
import CiaFlowCodeViewer from './CiaFlowCodeViewer.vue';
|
||||
|
||||
const parsedOuput =ref(null);
|
||||
|
||||
//66f55e4b2894530b1c154f69
|
||||
const props = defineProps({
|
||||
scenario_output: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const { scenario_output } = toRefs(props);
|
||||
|
||||
onMounted(() => {
|
||||
console.log(scenario_output.value.replace('```json', '').replace('```', ''));
|
||||
var jsonParsed = JSON.parse(scenario_output.value.replace('```json', '').replace('```', ''));
|
||||
console.log(jsonParsed);
|
||||
parsedOuput.value = jsonParsed;
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@import '@vue-flow/core/dist/style.css';
|
||||
@import '@vue-flow/core/dist/theme-default.css';
|
||||
@import '@vue-flow/controls/dist/style.css';
|
||||
@import '@vue-flow/minimap/dist/style.css';
|
||||
|
||||
|
||||
|
||||
.basic-flow{
|
||||
height: 90vh;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.vue-flow__minimap {
|
||||
transform: scale(75%);
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
|
||||
.basic-flow.dark {
|
||||
background:#2d3748;
|
||||
color:#fffffb
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__node {
|
||||
background:#4a5568;
|
||||
color:#fffffb
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__node.selected {
|
||||
background:#333;
|
||||
box-shadow:0 0 0 2px #2563eb
|
||||
}
|
||||
|
||||
.basic-flow .vue-flow__controls {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
justify-content:center
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__controls {
|
||||
border:1px solid #FFFFFB
|
||||
}
|
||||
|
||||
.basic-flow .vue-flow__controls .vue-flow__controls-button {
|
||||
border:none;
|
||||
border-right:1px solid #eee
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__controls .vue-flow__controls-button:hover {
|
||||
background:#4d4d4d
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__edge-textbg {
|
||||
fill:#292524
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__edge-text {
|
||||
fill:#fffffb
|
||||
}
|
||||
|
||||
|
||||
.vue-flow__node-class-node {
|
||||
border:1px solid #dc07bc;
|
||||
padding:10px;
|
||||
border-radius: 5px;
|
||||
background:#f5f5f5;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
max-width:250px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
</style>
|
||||
160
src/components/CiaFlowCodeViewer.vue
Normal file
160
src/components/CiaFlowCodeViewer.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<script setup>
|
||||
import { Background } from '@vue-flow/background'
|
||||
import { Controls } from '@vue-flow/controls'
|
||||
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
import { MiniMap } from '@vue-flow/minimap'
|
||||
import Dialog from 'primevue/dialog'
|
||||
import { CodeDiff } from 'v-code-diff'
|
||||
import { nextTick, onMounted, ref, toRefs } from 'vue'
|
||||
import ClassNode from './ClassNode.vue'
|
||||
import { useLayout } from './useLayout'
|
||||
|
||||
import { defineProps } from 'vue'
|
||||
import 'vue3-markdown/dist/style.css'
|
||||
|
||||
|
||||
const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick,fitView } = useVueFlow()
|
||||
|
||||
const nodes = ref(null)
|
||||
const edges = ref(null)
|
||||
const dark = ref(false)
|
||||
const selectionNode = ref({fullyQualifiedClassName: '', description: ''})
|
||||
const { graph, layout, previousDirection } = useLayout()
|
||||
|
||||
const dialogCodeVisible = ref(false)
|
||||
|
||||
|
||||
//66f55e4b2894530b1c154f69
|
||||
const props = defineProps({
|
||||
changes: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
const { changes } = toRefs(props);
|
||||
|
||||
onMounted(() => {
|
||||
defineNodes()
|
||||
})
|
||||
|
||||
onInit((vueFlowInstance) => {
|
||||
vueFlowInstance.fitView()
|
||||
})
|
||||
|
||||
|
||||
onNodeClick(({ event, nodes, node }) => {
|
||||
console.log(node)
|
||||
if(node.type == 'class-node') {
|
||||
selectionNode.value = node.data.data
|
||||
dialogCodeVisible.value = true
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
function layoutGraph(direction) {
|
||||
nodes.value = layout(nodes.value, edges.value, direction)
|
||||
nextTick(() => {
|
||||
fitView()
|
||||
})
|
||||
}
|
||||
|
||||
function defineNodes() {
|
||||
|
||||
var tmpNode=[]
|
||||
var tmpEdges=[]
|
||||
var app = {'name':'Apollo'}
|
||||
|
||||
tmpNode.push({
|
||||
id: app.name,
|
||||
data: { label: app.name },
|
||||
position: { x: 250, y: 0 },
|
||||
class: 'light',
|
||||
},)
|
||||
|
||||
changes.value.forEach((change) => {
|
||||
var label = change.filename.split("\\").slice(-1)[0].split("/").slice(-1)[0]
|
||||
tmpNode.push({
|
||||
id: change.filename,
|
||||
data: { label: label },
|
||||
position: { x: 250, y: 0 },
|
||||
class: 'light',
|
||||
})
|
||||
|
||||
tmpEdges.push({
|
||||
id: app.name + change.filename,
|
||||
source: app.name,
|
||||
target: change.filename,
|
||||
})
|
||||
|
||||
|
||||
tmpNode.push({
|
||||
id: change.classname,
|
||||
data: { label: change.classname.split(".").slice(-1)[0] , data: change},
|
||||
type: 'class-node',
|
||||
position: { x: 250, y: 0 },
|
||||
dimension: { width: 200, height: 100 },
|
||||
|
||||
})
|
||||
tmpEdges.push({
|
||||
id: change.filename + change.classname,
|
||||
source: change.filename,
|
||||
target: change.classname,
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
||||
nodes.value = tmpNode
|
||||
edges.value = tmpEdges
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog v-model:visible="dialogCodeVisible" modal :header="selectionNode.classname" :style="{ width: '70vw' }">
|
||||
<h2>Change description: </h2>{{ selectionNode.change_description }}
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<CodeDiff
|
||||
:old-string="selectionNode.previous_code"
|
||||
:new-string="selectionNode.new_code"
|
||||
output-format="side-by-side"
|
||||
/>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<div>
|
||||
<VueFlow
|
||||
:nodes="nodes"
|
||||
:edges="edges"
|
||||
:class="{ dark }"
|
||||
class="basic-flow"
|
||||
:default-viewport="{ zoom: 1.5 }"
|
||||
:min-zoom="0.2"
|
||||
:max-zoom="4"
|
||||
@nodes-initialized="layoutGraph('LR')"
|
||||
>
|
||||
|
||||
|
||||
<template #node-class-node="props">
|
||||
<ClassNode v-bind="props" />
|
||||
</template>
|
||||
|
||||
<Background pattern-color="#aaa" :gap="16" />
|
||||
|
||||
<MiniMap />
|
||||
|
||||
<Controls position="top-left">
|
||||
|
||||
|
||||
|
||||
|
||||
</Controls>
|
||||
</VueFlow>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
15
src/components/ClassNode.vue
Normal file
15
src/components/ClassNode.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<script setup>
|
||||
import { Position, Handle } from '@vue-flow/core'
|
||||
|
||||
|
||||
// props were passed from the slot using `v-bind="customNodeProps"`
|
||||
const props = defineProps(['label','targetPosition','sourcePosition','data'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Handle type="target" :position="targetPosition" />
|
||||
<div>{{ data.label }}</div>
|
||||
<!-- <Handle type="source" :position="sourcePosition" />-->
|
||||
</div>
|
||||
</template>
|
||||
56
src/components/useLayout.js
Normal file
56
src/components/useLayout.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import dagre from '@dagrejs/dagre'
|
||||
import { Position, useVueFlow } from '@vue-flow/core'
|
||||
import { ref } from 'vue'
|
||||
|
||||
/**
|
||||
* Composable to run the layout algorithm on the graph.
|
||||
* It uses the `dagre` library to calculate the layout of the nodes and edges.
|
||||
*/
|
||||
export function useLayout() {
|
||||
const { findNode } = useVueFlow()
|
||||
|
||||
const graph = ref(new dagre.graphlib.Graph())
|
||||
|
||||
const previousDirection = ref('LR')
|
||||
|
||||
function layout(nodes, edges, direction) {
|
||||
// we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
|
||||
const dagreGraph = new dagre.graphlib.Graph()
|
||||
|
||||
graph.value = dagreGraph
|
||||
|
||||
dagreGraph.setDefaultEdgeLabel(() => ({}))
|
||||
|
||||
const isHorizontal = direction === 'LR'
|
||||
dagreGraph.setGraph({ rankdir: direction })
|
||||
|
||||
previousDirection.value = direction
|
||||
|
||||
for (const node of nodes) {
|
||||
// if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
|
||||
const graphNode = findNode(node.id)
|
||||
|
||||
dagreGraph.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 })
|
||||
}
|
||||
|
||||
for (const edge of edges) {
|
||||
dagreGraph.setEdge(edge.source, edge.target)
|
||||
}
|
||||
|
||||
dagre.layout(dagreGraph)
|
||||
|
||||
// set nodes with updated positions
|
||||
return nodes.map((node) => {
|
||||
const nodeWithPosition = dagreGraph.node(node.id)
|
||||
|
||||
return {
|
||||
...node,
|
||||
targetPosition: isHorizontal ? Position.Left : Position.Top,
|
||||
sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
|
||||
position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return { graph, layout, previousDirection }
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import AppFooter from './AppFooter.vue';
|
||||
import AppSidebar from './AppSidebar.vue';
|
||||
import AppTopbar from './AppTopbar.vue';
|
||||
|
||||
const { layoutConfig, layoutState, isSidebarActive, resetMenu } = useLayout();
|
||||
@@ -20,8 +21,8 @@ const containerClass = computed(() => {
|
||||
return {
|
||||
'layout-theme-light': !layoutConfig.darkTheme,
|
||||
'layout-theme-dark': layoutConfig.darkTheme,
|
||||
//'layout-overlay': layoutConfig.menuMode === 'overlay',
|
||||
// 'layout-static': layoutConfig.menuMode === 'static',
|
||||
'layout-overlay': layoutConfig.menuMode === 'overlay',
|
||||
'layout-static': layoutConfig.menuMode === 'static',
|
||||
'layout-static-inactive': layoutState.staticMenuDesktopInactive && layoutConfig.menuMode === 'static',
|
||||
'layout-overlay-active': layoutState.overlayMenuActive,
|
||||
'layout-mobile-active': layoutState.staticMenuMobileActive
|
||||
@@ -54,9 +55,9 @@ const isOutsideClicked = (event) => {
|
||||
<template>
|
||||
<div class="layout-wrapper" :class="containerClass">
|
||||
<app-topbar></app-topbar>
|
||||
<!-- <div class="layout-sidebar">
|
||||
<div class="layout-sidebar">
|
||||
<app-sidebar></app-sidebar>
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="layout-main-container">
|
||||
<div class="layout-main">
|
||||
<router-view></router-view>
|
||||
|
||||
@@ -6,10 +6,13 @@ import AppMenuItem from './AppMenuItem.vue';
|
||||
const model = ref([
|
||||
{
|
||||
label: 'Scenarios',
|
||||
items: [{ label: 'Scenario List', icon: 'pi pi-fw pi-id-card', to: '/scenario-list' }]
|
||||
items: [
|
||||
{ label: 'Scenarios', icon: 'pi pi-fw pi-id-card', to: '/' },
|
||||
{ label: 'CIA Scenario', icon: 'pi pi-fw pi-id-card', to: '/cia' },
|
||||
{ label: 'Executions', icon: 'pi pi-fw pi-id-card', to: '/exectutions' }]
|
||||
}, {
|
||||
label: 'Canvas',
|
||||
items: [{ label: 'New Canvas', icon: 'pi pi-fw pi-id-card', to: '/canvas' }]
|
||||
items: [{ label: 'New Canvas', icon: 'pi pi-fw pi-id-card', to: '/mdcanvas' }]
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
@@ -38,10 +38,10 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- <button class="layout-menu-button layout-topbar-action" @click="onMenuToggle">
|
||||
<button class="layout-menu-button layout-topbar-action" @click="onMenuToggle">
|
||||
<i class="pi pi-bars"></i>
|
||||
</button>
|
||||
-->
|
||||
|
||||
<div class="layout-topbar-actions">
|
||||
<div class="layout-config-menu">
|
||||
<button @click="router.push('/canvas')" class="layout-topbar-action" >
|
||||
|
||||
@@ -20,6 +20,7 @@ import '@/assets/tailwind.css';
|
||||
import { config } from 'md-editor-v3';
|
||||
|
||||
|
||||
|
||||
config({
|
||||
editorConfig: {
|
||||
renderDelay: 0,
|
||||
@@ -46,7 +47,7 @@ var auth = createAuth({
|
||||
}
|
||||
});
|
||||
|
||||
axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;
|
||||
axios.defaults.baseURL = 'http://localhost:8081'//import.meta.env.VITE_BACKEND_URL;
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
|
||||
@@ -24,6 +24,15 @@ const router = createRouter({
|
||||
path: 'exec/:id',
|
||||
name: 'scenario-exec',
|
||||
component: () => import('@/views/pages/ScenarioExec.vue')
|
||||
},{
|
||||
path: '/exectutions',
|
||||
name: 'exectutions',
|
||||
component: () => import('@/views/pages/OldScenarioExec.vue')
|
||||
},
|
||||
{
|
||||
path: '/cia',
|
||||
name: 'cia',
|
||||
component: () => import('@/views/pages/CiaScenarioExec.vue')
|
||||
},
|
||||
{
|
||||
path: '/canvas',
|
||||
|
||||
246
src/views/pages/CiaScenarioExec.vue
Normal file
246
src/views/pages/CiaScenarioExec.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<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">
|
||||
<h1>
|
||||
{{ scenario.name }}
|
||||
</h1>
|
||||
<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">
|
||||
<template v-if="scenario.inputs && scenario.inputs.length === 1">
|
||||
<div class="input-container flex items-center">
|
||||
<div class="flex-grow">
|
||||
<label :for="scenario.inputs[0].name"><h2>{{ scenario.inputs[0].label }}</h2></label>
|
||||
<div class="input-wrapper">
|
||||
<component
|
||||
:is="getInputComponent(scenario.inputs[0].type)"
|
||||
:id="scenario.inputs[0].name"
|
||||
v-model="formData[scenario.inputs[0].name]"
|
||||
:options="scenario.inputs[0].options"
|
||||
class="full-width-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button label="Send" @click="execScenario" class="mt-9 ml-4"/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<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">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<Button label="Submit" @click="execScenario" class=""/>
|
||||
</div>
|
||||
</template>
|
||||
</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_output != null">
|
||||
<ChangeImpactOutputViewer :scenario_output="scenario_output" />
|
||||
</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 { 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 Select from 'primevue/select';
|
||||
import Textarea from 'primevue/textarea';
|
||||
import { onMounted, 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)
|
||||
// Variable to hold the interval ID
|
||||
let pollingInterval = null;
|
||||
|
||||
onMounted(() => {
|
||||
loading.value = true
|
||||
const id = '66f4ff309766132cadc97ebf' //TODO: Remove fixed scenario id route.params.id;
|
||||
|
||||
axios.get('/scenarios/' + id )
|
||||
.then(response => {
|
||||
loading.value = false
|
||||
scenario.value = response.data
|
||||
});
|
||||
});
|
||||
|
||||
const getInputComponent = (type) => {
|
||||
switch (type) {
|
||||
case 'text':
|
||||
return InputText;
|
||||
case 'textarea':
|
||||
return Textarea;
|
||||
case 'select':
|
||||
return Select;
|
||||
default:
|
||||
return InputText;
|
||||
}
|
||||
};
|
||||
|
||||
const execScenario = () => {
|
||||
loading_data.value = true;
|
||||
data_loaded.value = false;
|
||||
|
||||
const data = {
|
||||
scenario_id: scenario.value.id,
|
||||
inputs: { ...formData.value }
|
||||
};
|
||||
|
||||
axios.post('/scenarios/execute-async', data)
|
||||
.then(response => {
|
||||
scenario_output.value = response.data.stringOutput;
|
||||
exec_id.value = response.data.scenarioExecution_id
|
||||
// Start polling
|
||||
startPolling();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error executing scenario:', error);
|
||||
});
|
||||
};
|
||||
|
||||
const back = () => {
|
||||
router.push({ name: 'scenario-list'});
|
||||
}
|
||||
|
||||
const openDebug = () => {
|
||||
|
||||
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 => {
|
||||
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
|
||||
|
||||
} else {
|
||||
console.log("Condition not met, polling continues.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Function to start polling
|
||||
function startPolling() {
|
||||
// Set polling interval (every 5 seconds in this case)
|
||||
pollingInterval = setInterval(pollBackendAPI, 2500);
|
||||
console.log("Polling started.");
|
||||
}
|
||||
|
||||
// Function to stop polling
|
||||
function stopPolling() {
|
||||
clearInterval(pollingInterval);
|
||||
console.log("Polling stopped.");
|
||||
}
|
||||
|
||||
|
||||
</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>
|
||||
@@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div className="card">
|
||||
<h5>Ks document</h5>
|
||||
<form @submit.prevent="submitForm">
|
||||
<div class="p-field">
|
||||
<label for="description">Description</label>
|
||||
<InputText id="description" v-model="ksdocument.description" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="fileName">File Name</label>
|
||||
<InputText id="fileName" v-model="ksdocument.fileName" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="filePath">File Path</label>
|
||||
<InputText id="filePath" v-model="ksdocument.filePath" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="ingestionDate">Ingestion Date</label>
|
||||
<InputText id="ingestionDate" v-model="ksdocument.ingestionDate" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="defaultChunkSize">Default Chunk Size</label>
|
||||
<InputNumber id="defaultChunkSize" v-model="ksdocument.ingestionInfo.defaultChunkSize" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="maxNumberOfChunks">Max Number of Chunks</label>
|
||||
<InputNumber id="maxNumberOfChunks" v-model="ksdocument.ingestionInfo.maxNumberOfChunks" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="minChunkSize">Min Chunk Size</label>
|
||||
<InputNumber id="minChunkSize" v-model="ksdocument.ingestionInfo.minChunkSize" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="minChunkSizeToEmbed">Min Chunk Size To Embed</label>
|
||||
<InputNumber id="minChunkSizeToEmbed" v-model="ksdocument.ingestionInfo.minChunkSizeToEmbed" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="type">Type</label>
|
||||
<InputText id="type" v-model="ksdocument.ingestionInfo.type" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="ingestionStatus">Ingestion Status</label>
|
||||
<InputText id="ingestionStatus" v-model="ksdocument.ingestionStatus" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="name">Name</label>
|
||||
<InputText id="name" v-model="ksdocument.name" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="metadata">Metadata</label>
|
||||
<InputTextarea id="metadata" v-model="ksdocument.ingestionInfo.metadata" />
|
||||
</div>
|
||||
<Button label="Submit" type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onMounted } from 'vue'
|
||||
import axios from 'axios';
|
||||
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { data } from 'autoprefixer';
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const ksdocument = ref({ingestionInfo:{}});
|
||||
|
||||
onMounted(() => {
|
||||
axios.get('http://localhost:8082/ksdocuments/'+route.params.id)
|
||||
.then(response => {
|
||||
console.log(response.data);
|
||||
ksdocument.value = response.data;
|
||||
});
|
||||
});
|
||||
|
||||
const getStatus = (data) => {
|
||||
if (data.ingestionStatus === 'INGESTED') {
|
||||
return 'success';
|
||||
} else if (data.ingestionStatus === 'NEW') {
|
||||
return 'danger';
|
||||
} else {
|
||||
return 'warning';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<div className="card">
|
||||
|
||||
<DataTable
|
||||
:value="ksdocuments"
|
||||
:paginator="true"
|
||||
:rows="10"
|
||||
dataKey="id"
|
||||
:rowHover="true"
|
||||
showGridlines
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<span class="text-xl font-bold">KS Documents</span>
|
||||
<Button icon="pi pi-plus" rounded raised @click="newKsDocument()" />
|
||||
</div>
|
||||
</template>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="fileName" header="File Name"></Column>
|
||||
<Column field="ingestionStatus" header="Status">
|
||||
<template #body="slotProps">
|
||||
<Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="ingestionDate" header="Ingestion Date"></Column>
|
||||
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
|
||||
<template #body="slotProps">
|
||||
<Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"/>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onMounted } from 'vue'
|
||||
import axios from 'axios';
|
||||
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const ksdocuments = ref(null);
|
||||
const scenario = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
axios.get('http://localhost:8082/fe-api/ksdocuments')
|
||||
.then(response => {
|
||||
console.log(response.data);
|
||||
ksdocuments.value = response.data;
|
||||
});
|
||||
});
|
||||
|
||||
const getStatus = (data) => {
|
||||
if (data.ingestionStatus === 'INGESTED') {
|
||||
return 'success';
|
||||
} else if (data.ingestionStatus === 'NEW') {
|
||||
return 'danger';
|
||||
} else {
|
||||
return 'warning';
|
||||
}
|
||||
}
|
||||
|
||||
const editKsDocument = (data) => {
|
||||
console.log(data);
|
||||
router.push({ name: 'ks-document-edit', params: { id: data.id } });
|
||||
}
|
||||
|
||||
const newKsDocument = () => {
|
||||
console.log('new');
|
||||
router.push({ name: 'ks-document-new'});
|
||||
|
||||
}
|
||||
</script>
|
||||
154
src/views/pages/OldScenarioExec.vue
Normal file
154
src/views/pages/OldScenarioExec.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<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_output != null">
|
||||
<!--<MdPreview class="editor" v-model="scenario_output" language="en-US" />-->
|
||||
<ChangeImpactOutputViewer :scenario_output="scenario_output" />
|
||||
|
||||
</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 { 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>
|
||||
Reference in New Issue
Block a user