Skip to content
Snippets Groups Projects

Resolve "Expansion panel for workflow invocation"

Merged Resolve "Expansion panel for workflow invocation"
expansion-panel-for-workflow-invocation-69 into dev
Merged Remi PLANEL requested to merge expansion-panel-for-workflow-invocation-69 into dev
Compare
and
1 file
+ 27
− 114
Compare changes
  • Side-by-side
  • Inline
client-nuxt/components/WorkflowInvocation.vue
+ 27
− 114
<template>
<template>
<v-container fluid>
<v-container fluid>
<v-row>
<v-expansion-panels focusable multiple>
<v-col
<v-expansion-panel v-for="step in steps" :key="step.step_id">
v-for="step in steps"
<v-expansion-panel-header disable-icon-rotate>
:key="step.step_id"
{{ step.step_id }}. {{ step.tool.name }}
class="d-flex"
<span class="text-caption text--secondary ml-2"
:cols="getCols()"
><v-chip small>{{ step.tool.version }}</v-chip></span
>
>
<v-card class="flex-grow-1">
<v-card-title
>{{ step.step_id }} - {{ step.tool.name }}
<v-spacer></v-spacer>
<analysis-state :state="step.job.state"></analysis-state>
</v-card-title>
<v-card-subtitle>{{ step.tool.version }}</v-card-subtitle>
<v-divider></v-divider>
<v-card-text v-if="Object.keys(step.job.params).length > 0">
<v-card-subtitle>Parameters: </v-card-subtitle>
<v-list-item
<template v-slot:actions>
v-for="k in Object.keys(step.job.params)"
<analysis-state :state="step.job.state"></analysis-state>
:key="k"
</template>
dense
</v-expansion-panel-header>
 
<v-expansion-panel-content>
 
<v-list-item v-for="k in Object.keys(step.job.params)" :key="k" dense>
 
<template #default>
 
<v-list-item-content>
 
<v-list-item-subtitle>
 
<v-badge
 
color="secondary"
 
inline
 
:content="step.job.params[k]"
 
>{{ k }} :
 
</v-badge>
 
</v-list-item-subtitle>
 
</v-list-item-content></template
>
>
<template #default>
</v-list-item>
<v-list-item-content>
</v-expansion-panel-content></v-expansion-panel
<v-list-item-subtitle>
<v-badge
color="secondary"
inline
:content="step.job.params[k]"
>{{ k }} :
</v-badge>
</v-list-item-subtitle>
</v-list-item-content></template
>
</v-list-item>
</v-card-text>
</v-card></v-col
>
>
</v-row>
</v-expansion-panels>
<!-- <v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Tool Name</th>
<th class="text-left">Tool Version</th>
<th class="text-left">Start</th>
<th class="text-left">Duration</th>
<th class="text-left">State</th>
<th class="text-left">Parameters</th>
</tr>
</thead>
<tbody>
<tr v-for="step in stepsWithJobMetrics" :key="step.step_id">
<td>{{ step.tool.name }}</td>
<td>{{ step.tool.version }}</td>
<td v-if="step.job.metrics.start_epoch">
{{ formatDate(step.job.metrics.start_epoch.value) }}
</td>
<td v-else><v-icon>mdi-null</v-icon></td>
<td v-if="step.job.metrics.runtime_seconds">
{{ step.job.metrics.runtime_seconds.value }}
</td>
<td v-else><v-icon>mdi-null</v-icon></td>
<td>
<v-icon v-if="step.job.state == 'ok'" color="success"
>mdi-check-circle</v-icon
>
<v-progress-circular
v-else-if="step.job.state == 'running'"
indeterminate
:width="2"
:size="25"
color="primary"
></v-progress-circular>
<v-icon
v-else-if="step.job.state == 'new'"
color="primary"
>mdi-new-box</v-icon
>
<v-icon
v-else-if="step.job.state == 'paused'"
color="primary"
>mdi-pause-circle</v-icon
>
<v-icon
v-else-if="step.job.state == 'error'"
color="error"
>mdi-alert-circle</v-icon
>
<v-icon v-else color="warning">mdi-alert-circle</v-icon>
</td>
<td>
<v-list-item
v-for="k in Object.keys(step.job.params)"
:key="k"
dense
>
<template #default>
<v-list-item-content>
<v-list-item-subtitle>
<v-badge
color="secondary"
inline
:content="step.job.params[k]"
>{{ k }} :
</v-badge>
</v-list-item-subtitle>
</v-list-item-content></template
>
</v-list-item>
</td>
</tr>
</tbody>
</template>
</v-simple-table> -->
</v-container>
</v-container>
</template>
</template>
<script>
<script>