hermione-fe/src/views/pages/ScenarioExecList.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> -->
        <h2 class="text-xl font-bold mt-6">Executions List</h2>
        
        <DataTable v-model:filters="filters" :value="scenario_execution_store.scenariosExecution" scrollable scrollHeight="420px"
            :loading="loading_data" 
            class="mt-0"
            :rows="10"                
            paginator                 
            :paginatorTemplate="paginatorTemplate" 
            :totalRecords="scenario_execution_store.scenariosExecution.length" 
            :first="first"            
            @page="onPage" :globalFilterFields="['id', 'scenario.name', 'execSharedMap.user_input.selected_project', 'execSharedMap.user_input.selected_application']">

            <template #header>
                <div class="flex justify-end">
                    <IconField>
                        <InputIcon>
                            <i class="pi pi-search" />
                        </InputIcon>
                        <InputText v-model="filters['global'].value" placeholder="ID, name, project, app" />
                    </IconField>
                </div>
            </template>
            
            <!-- <Column field="id" header="Execution ID"></Column> -->
            <Column field="scenario.name" header="Scenario Name">
                <template #body="slotProps">
                    <div class="flex items-center gap-2">
                        {{ slotProps.data.scenario.name }}
                        <i
                            class="pi pi-info-circle text-blue-500 cursor-pointer"
                            v-tooltip="slotProps.data.scenario.description"
                        ></i>
                    </div>
                </template>
            </Column>
            <Column field="execSharedMap.user_input.selected_project" header="Project Input"></Column>
            <Column field="execSharedMap.user_input.selected_application" header="Application Input"></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' }}
                </template>
            </Column>
            <Column field="rating" header="Rating">
                <template #body="slotProps">
                    <Rating :value="slotProps.data.rating" :stars="5" readonly cancel="false" />
                </template>
            </Column>
            <Column field="id" :style="{ position: 'sticky', right: '0', zIndex: '1', background: '#f3f3f3'}">
                <template #body="slotProps">
                    <div class="flex justify-center items-center h-full">
                        <Button label="View" @click="goToScenarioExec(slotProps.data)"  class="mt-0 ml-0" />
                    </div>
                </template>
            </Column>
            
            <template #empty>
                <tr>
                    <td :colspan="9" class="text-center">No execution found</td>
                </tr>
            </template>
        </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 { FilterMatchMode } from '@primevue/core/api';
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';
import moment from 'moment';

const first = ref(0);
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();

const filters = ref({
    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
    'id': { value: null, matchMode: FilterMatchMode.CONTAINS },
    'scenario.name': { value: null, matchMode: FilterMatchMode.CONTAINS },
    'execSharedMap.user_input.selected_project': { value: null, matchMode: FilterMatchMode.CONTAINS },
    'execSharedMap.user_input.selected_application': { value: null, matchMode: FilterMatchMode.CONTAINS }
});

onMounted(() => {
    scenario_execution_store.fetchScenariosExecution()
});


const goToScenarioExec = (execScenarioItem) => {
    console.log(execScenarioItem);
    
    scenario_execution_store.setSelectedExecScenario(execScenarioItem).then(() => {
        router.push({ name: 'scenario-exec-history',  query: { id:execScenarioItem.id } });
    });
};

function onPage(event) {
    first.value = event.first; 
}



</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>