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

fixed bug for AppBrowser and added field for execution list

Browse Source
This commit is contained in:
Emanuele Ferrelli
2024-11-14 09:05:36 +01:00
parent eec600566f
commit f0814fd1c9
2 changed files with 63 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/views/pages/ApplicationBrowser.vue
View File

@@ -6,18 +6,31 @@
</div>
<div class="grid grid-cols-12 gap-2">
<div class="col-span-4">
<div class="col-span-6">
<div class="card folder-tree ">
<h5>File Browser</h5>
<Tree :value="nodes" @nodeSelect="onNodeSelect" selectionMode="single" :expandedKeys="expandedKeys" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :filter="true" filterMode="lenient" class="w-full"></Tree>
<div v-if="nodes && nodes.length">
<div class="flex flex-wrap gap-2">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></Button>
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></Button>
</div>
<Tree :value="nodes" @nodeSelect="onNodeSelect" selectionMode="single" :expandedKeys="expandedKeys" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :filter="true" filterMode="lenient" class="w-full"></Tree>
</div>
<div v-else class="self-center" style="flex: 1">
<Skeleton v-for="(config, index) in skeletonConfigs"
:key="index"
:width="config.width"
:height="config.height"
class="mb-2" />
</div>
</div>
</div>
<div class="col-span-8">
</div>
<div class="col-span-6">
<div class="card flow-codeviewer">
<h5>File Explorer</h5>
<FileFlowViewer :file="selectedFile" :application="userPrefStore.getSelApp.fe_name"/>
<p v-if="nodes && nodes.length">
<FileFlowViewer :file="selectedFile" :application="userPrefStore.getSelApp.fe_name"/>
</p>
</div>
</div>
</div>
@@ -48,6 +61,7 @@ onMounted(() => {
})
function fetchApplicationData() {
nodes.value = null;
LoadingStore.another_loading = true;
ApplicationCodeService.getApplication(userPrefStore.getSelApp.internal_name)
.then(response => {
@@ -56,12 +70,11 @@ function fetchApplicationData() {
nodes.value = tmp
expandAll()
LoadingStore.another_loading = false;
})
.catch(error => {
console.error("Error fetching application data:", error)
LoadingStore.another_loading = false;
collapseAll();
})
}
@@ -72,7 +85,7 @@ function reloadPage() {
fetchApplicationData();
}
watch(() => userPrefStore.getSelApp, reloadPage);
watch(() => userPrefStore.getSelApp, reloadPage, { immediate: true });
function onNodeSelect(e){
if(e.icon == "pi pi-fw pi-file"){
@@ -82,14 +95,10 @@ function onNodeSelect(e){
}
const expandAll = () => {
for (let node of nodes.value) {
expandNode(node);
expandNode(node, true);
}
expandedKeys.value = { ...expandedKeys.value };
};
@@ -97,25 +106,20 @@ const collapseAll = () => {
expandedKeys.value = {};
};
/*const expandNode = (node) => {
expandedKeys.value[node.key] = true;
const expandNode = (node, expandAllChildren = false) => {
if (node.children && node.children.length) {
for (let child of node.children) {
expandNode(child);
}
}
};*/
const expandNode = (node) => {
if (node.children && node.children.length) {
//node.children.forEach(child => {
expandedKeys.value[node.key] = true;
if (expandAllChildren) {
node.children.forEach(child => {
expandNode(child, expandAllChildren);
});
} else {
expandedKeys.value[node.children.key] = true;
// });
}
}
expandedKeys.value = { ...expandedKeys.value };
};
const collapseNode = (node) => {
if (node.children && node.children.length) {
node.children.forEach(child => {
@@ -125,6 +129,24 @@ const collapseNode = (node) => {
expandedKeys.value = { ...expandedKeys.value };
};
const skeletonConfigs = [
{ width: "30%", height: "3rem", inline: true },
{ width: "95%", height: "3rem" },
{ width: "50%", height: "1.5rem" },
{ width: "60%", height: "1.5rem" },
{ width: "70%", height: "1.5rem" },
{ width: "80%", height: "1.5rem" },
{ width: "80%", height: "1.5rem" },
{ width: "70%", height: "1.5rem" },
{ width: "80%", height: "1.5rem" },
{ width: "70%", height: "1.5rem" },
{ width: "80%", height: "1.5rem" },
{ width: "80%", height: "1.5rem" },
{ width: "80%", height: "1.5rem" },
{ width: "70%", height: "1.5rem" },
{ width: "80%", height: "1.5rem" }
];
</script>

15
src/views/pages/ScenarioExecList.vue
View File

@@ -51,10 +51,19 @@
</Column>
<Column field="execSharedMap.user_input.selected_project" header="Project Input"></Column>
<Column field="execSharedMap.user_input.selected_application" header="Application Input"></Column>
<Column field="startDate" header="Start Date"></Column>
<Column field="endDate" header="End Date"></Column>
<Column header="Start Date">
<template #body="slotProps">
{{ moment(slotProps.data.startDate).format('DD-MM-YYYY HH:mm:ss') }}
</template>
</Column>
<Column header="End Date">
<template #body="slotProps">
{{ moment(slotProps.data.endDate).format('DD-MM-YYYY HH:mm:ss') }}
</template>
</Column>
<Column field="scenario.aiModel.apiProvider" header="Model AI"></Column>
<Column field="scenario.aiModel.model" header="Version"></Column>
<Column field="usedTokens" header="Tokens used"></Column>
<Column header="Output Type">
<template #body="slotProps">
{{ slotProps.data.scenario.outputType || 'text' }}
@@ -94,7 +103,7 @@ import ProgressSpinner from 'primevue/progressspinner';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ScenarioExecutionStore } from '../../stores/ScenarioExecutionStore.js';
import moment from 'moment';
const first = ref(0);
const router = useRouter();