j3d1/toolshed
2
1
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity

stash

Browse source
This commit is contained in:
j3d1 2025-09-26 20:00:29 +02:00
parent 4627f0aca2
commit 7c91661be2
14 changed files with 1208 additions and 220 deletions
Download patch file Download diff file Expand all files Collapse all files

501
frontend/src/views/WorkflowDetail.vue Normal file
View file

@ -0,0 +1,501 @@
<template>
<BaseLayout>
<main class="content">
<div class="container-fluid p-0">
<!-- Workflow Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<router-link to="/workflows" class="text-decoration-none">Workflows</router-link>
</li>
<li class="breadcrumb-item active" aria-current="page">{{ workflowInstance?.workflow_type || 'Loading...' }}</li>
</ol>
</nav>
<h1 class="h3 mb-0">{{ workflowInstance?.workflow_type || 'Workflow Detail' }}</h1>
</div>
<div class="btn-group" role="group">
<button class="btn btn-outline-secondary" @click="$router.go(-1)">
<b-icon-arrow-left class="me-1"></b-icon-arrow-left>
Back
</button>
<button v-if="canAbort" class="btn btn-outline-danger" @click="abortWorkflow" :disabled="loading">
<b-icon-x-circle class="me-1"></b-icon-x-circle>
Abort
</button>
</div>
</div>
<!-- Loading State -->
<div v-if="loading && !workflowInstance" class="text-center py-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2">Loading workflow details...</p>
</div>
<!-- Error State -->
<div v-else-if="error" class="alert alert-danger">
<b-icon-exclamation-triangle class="me-2"></b-icon-exclamation-triangle>
{{ error }}
</div>
<!-- Workflow Content -->
<div v-else-if="workflowInstance" class="row">
<!-- Workflow Progress Sidebar -->
<div class="col-lg-3 mb-4">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Progress Overview</h6>
</div>
<div class="card-body">
<!-- Overall Progress -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center mb-1">
<small class="text-muted">Overall Progress</small>
<small class="fw-bold">{{ workflowInstance.progress_percentage }}%</small>
</div>
<div class="progress mb-2" style="height: 8px;">
<div class="progress-bar"
:style="{ width: workflowInstance.progress_percentage + '%' }"
:class="getProgressBarClass(workflowInstance.state)">
</div>
</div>
<span :class="getStatusBadgeClass(workflowInstance.state)">
{{ workflowInstance.status_display || workflowInstance.state }}
</span>
</div>
<!-- Step List -->
<div class="workflow-steps">
<h6 class="mb-3">Steps</h6>
<div v-for="step in stepDefinitions" :key="step.step" class="step-item mb-3">
<div class="d-flex align-items-center">
<div class="step-indicator me-2"
:class="getStepClass(step.step)">
<span v-if="isStepCompleted(step.step)">
<b-icon-check class="text-white"></b-icon-check>
</span>
<span v-else-if="isStepCurrent(step.step)">
{{ step.step }}
</span>
<span v-else class="text-muted">
{{ step.step }}
</span>
</div>
<div class="flex-grow-1">
<div class="fw-bold small"
:class="{ 'text-primary': isStepCurrent(step.step) }">
{{ step.name }}
</div>
<div class="text-muted small">{{ step.description }}</div>
</div>
</div>
</div>
</div>
<!-- Workflow Info -->
<div class="border-top pt-3 mt-3">
<div class="mb-2">
<small class="text-muted">Started:</small>
<div class="fw-bold">{{ formatDateTime(workflowInstance.started_at) }}</div>
</div>
<div v-if="workflowInstance.estimated_completion" class="mb-2">
<small class="text-muted">Estimated completion:</small>
<div class="fw-bold">{{ formatDateTime(workflowInstance.estimated_completion) }}</div>
</div>
<div v-if="workflowDefinition">
<small class="text-muted">Category:</small>
<div class="fw-bold">{{ workflowDefinition.category }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content Area -->
<div class="col-lg-9">
<!-- Current Step Content -->
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<h5 class="card-title mb-0">
{{ currentStepDefinition?.name || `Step ${currentStep}` }}
</h5>
<small class="text-muted">{{ currentStepDefinition?.description }}</small>
</div>
<div class="step-navigation">
<button class="btn btn-sm btn-outline-secondary me-1"
@click="handlePrevStep"
:disabled="!canNavigatePrev">
<b-icon-chevron-left></b-icon-chevron-left>
</button>
<span class="mx-2 small">{{ currentStepIndex + 1 }} / {{ totalSteps }}</span>
<button class="btn btn-sm btn-outline-secondary"
@click="handleNextStep"
:disabled="!canNavigateNext">
<b-icon-chevron-right></b-icon-chevron-right>
</button>
</div>
</div>
<div class="card-body">
<!-- Step-specific content based on workflow type and current step -->
<component
v-if="stepComponent"
:is="stepComponent"
:workflow-instance="workflowInstance"
:step="currentStep"
:payload="workflowInstance.payload"
@update="handleStepUpdate"
@next="handleNextStep"
@prev="handlePrevStep"
/>
<!-- Default step content if no specific component -->
<div v-else class="text-center py-5">
<b-icon-gear class="text-muted mb-3" style="font-size: 3rem;"></b-icon-gear>
<h5 class="text-muted">{{ currentStepDefinition?.name || 'Step Content' }}</h5>
<p class="text-muted">{{ currentStepDefinition?.description || 'This step is in progress.' }}</p>
<!-- Step Navigation Buttons -->
<div class="mt-4">
<button v-if="canNavigatePrev"
class="btn btn-outline-secondary me-2"
@click="handlePrevStep">
<b-icon-chevron-left class="me-1"></b-icon-chevron-left>
Previous
</button>
<button v-if="canNavigateNext"
class="btn btn-primary"
@click="handleNextStep">
Next
<b-icon-chevron-right class="ms-1"></b-icon-chevron-right>
</button>
<button v-else-if="currentStepIndex === stepDefinitions.length - 1"
class="btn btn-success"
@click="completeWorkflow">
<b-icon-check-circle class="me-1"></b-icon-check-circle>
Complete Workflow
</button>
</div>
</div>
<!-- Debug Info (only in development) -->
<div v-if="$isDevelopment" class="mt-4 border-top pt-3">
<details>
<summary class="text-muted small">Debug Info</summary>
<pre class="small mt-2">{{ JSON.stringify(workflowInstance, null, 2) }}</pre>
</details>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</BaseLayout>
</template>
<script>
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import { mapState, mapActions } from 'vuex';
import { workflowRegistry } from '@/workflows.js';
export default {
name: 'WorkflowDetail',
components: {
...BIcons,
BaseLayout
},
props: {
id: {
type: [String, Number],
required: true
},
step: {
type: String,
default: "initial"
}
},
data() {
return {
loading: false,
error: null,
workflowInstance: null,
refreshInterval: null
}
},
computed: {
...mapState(['active_workflows']),
currentStep() {
return this.step || "initial";
},
workflowDefinition() {
if (!this.workflowInstance?.workflow_type) return null;
return workflowRegistry.get(this.workflowInstance.workflow_type);
},
stepDefinitions() {
return this.workflowDefinition?.getStepDefinitions() || [];
},
totalSteps() {
return this.stepDefinitions.length || this.workflowInstance?.total_steps || 1;
},
currentStepDefinition() {
return this.stepDefinitions.find(step => step.step === this.currentStep);
},
canAbort() {
return this.workflowInstance?.state === 'running';
},
stepComponent() {
// Return step-specific component if it exists
// This allows for custom UI per workflow type and step
const workflowType = this.workflowInstance?.workflow_type;
if (workflowType) {
// Try to load a step-specific component
// e.g., FotoFirstImportStep1, BulkImportStep2, etc.
const componentName = `${workflowType}Step${this.currentStep}`;
// This would require registering step components
return null; // For now, use default content
}
return null;
},
currentStepIndex() {
// Find the index of the current step in the stepDefinitions array
return this.stepDefinitions.findIndex(step => step.step === this.currentStep);
},
canNavigateNext() {
// Check if we can navigate to the next step
return this.currentStepIndex >= 0 && this.currentStepIndex < this.stepDefinitions.length - 1;
},
canNavigatePrev() {
// Check if we can navigate to the previous step
return this.currentStepIndex > 0;
}
},
watch: {
step(newStep) {
// Update route when step changes - no need for parseInt since both are strings
if (newStep !== this.currentStep) {
this.$router.push({
name: 'workflow-detail',
params: { id: this.id, step: newStep }
});
}
}
},
async mounted() {
await this.loadWorkflowInstance();
},
methods: {
...mapActions([
'fetchActiveWorkflows',
'updateWorkflow',
'deleteWorkflow'
]),
async loadWorkflowInstance() {
try {
this.loading = true;
this.error = null;
await this.fetchActiveWorkflows();
// Try to get from store first
this.workflowInstance = this.active_workflows?.find(w => w.id == this.id);
if (!this.workflowInstance) {
throw new Error('Workflow not found');
}
} catch (error) {
console.error('Error loading workflow:', error);
this.error = error.message || 'Failed to load workflow details';
} finally {
this.loading = false;
}
},
navigateToStep(step) {
const stepStr = String(step);
// For navigation, we need to validate the step exists in step definitions
const stepExists = this.stepDefinitions.some(step => step.step === stepStr);
if (stepExists || (step >= 1 && step <= this.totalSteps)) {
this.$router.push({
name: 'workflow-detail',
params: { id: this.id, step: stepStr }
});
}
},
handleNextStep() {
// Find the next step in stepDefinitions
const currentIndex = this.stepDefinitions.findIndex(step => step.step === this.currentStep);
if (currentIndex >= 0 && currentIndex < this.stepDefinitions.length - 1) {
const nextStep = this.stepDefinitions[currentIndex + 1].step;
this.navigateToStep(nextStep);
}
},
handlePrevStep() {
// Find the previous step in stepDefinitions
const currentIndex = this.stepDefinitions.findIndex(step => step.step === this.currentStep);
if (currentIndex > 0) {
const prevStep = this.stepDefinitions[currentIndex - 1].step;
this.navigateToStep(prevStep);
}
},
async handleStepUpdate(payload) {
try {
// Update the workflow instance with new payload data
const updatedWorkflow = {
...this.workflowInstance,
payload: {
...this.workflowInstance.payload,
...payload
}
};
await this.updateWorkflow(updatedWorkflow);
this.workflowInstance = updatedWorkflow;
} catch (error) {
console.error('Error updating workflow step:', error);
this.error = 'Failed to update workflow step';
}
},
async completeWorkflow() {
try {
this.loading = true;
const updatedWorkflow = {
...this.workflowInstance,
state: 'completed'
};
await this.updateWorkflow(updatedWorkflow);
this.$router.push('/workflows');
} catch (error) {
console.error('Error completing workflow:', error);
this.error = 'Failed to complete workflow';
} finally {
this.loading = false;
}
},
async abortWorkflow() {
try {
this.loading = true;
await this.deleteWorkflow(this.workflowInstance.id);
this.$router.push('/workflows');
} catch (error) {
console.error('Error aborting workflow:', error);
this.error = 'Failed to abort workflow';
} finally {
this.loading = false;
}
},
isStepCompleted(stepNumber) {
// Check if a step is completed based on current step
const currentStepNum = parseInt(this.currentStep) || 1;
return parseInt(stepNumber) < currentStepNum;
},
isStepCurrent(stepNumber) {
// Check if a step is the current active step
return String(stepNumber) === String(this.currentStep);
},
getStepClass(stepNumber) {
if (this.isStepCompleted(stepNumber)) {
return 'step-indicator-completed bg-success';
} else if (this.isStepCurrent(stepNumber)) {
return 'step-indicator-current bg-primary text-white';
} else {
return 'step-indicator-pending bg-light border';
}
},
getProgressBarClass(state) {
const classMap = {
'running': 'bg-primary',
'completed': 'bg-success',
'failed': 'bg-danger',
'aborted': 'bg-warning'
};
return classMap[state] || 'bg-secondary';
},
getStatusBadgeClass(state) {
const classMap = {
'running': 'badge bg-primary',
'completed': 'badge bg-success',
'failed': 'badge bg-danger',
'aborted': 'badge bg-warning text-dark'
};
return classMap[state] || 'badge bg-secondary';
},
formatDateTime(dateString) {
if (!dateString) return 'N/A';
return new Date(dateString).toLocaleString();
}
}
}
</script>
<style scoped>
.workflow-steps {
counter-reset: step-counter;
}
.step-item {
position: relative;
padding-left: 2rem;
}
.step-indicator {
position: absolute;
left: 0;
top: 0.5rem;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #fff;
}
.step-indicator-completed {
background-color: #28a745;
}
.step-indicator-current {
background-color: #007bff;
}
.step-indicator-pending {
background-color: #6c757d;
}
.step-navigation {
min-width: 120px;
}
</style>

233
frontend/src/views/Workflows.vue
View file

@ -40,7 +40,7 @@
<div class="progress" style="height: 8px;">
<div class="progress-bar"
:style="{ width: workflow.progress_percentage + '%' }"
:class="getProgressBarClass(workflow.status)">
:class="getProgressBarClass(workflow.state)">
</div>
</div>
<small class="text-muted">{{ workflow.progress_percentage }}%</small>
@ -52,21 +52,9 @@
:disabled="loading">
<b-icon-eye></b-icon-eye>
</button>
<button v-if="workflow.status === 'running'"
class="btn btn-sm btn-outline-warning me-1"
@click="pauseWorkflowInstance(workflow)"
:disabled="loading">
<b-icon-pause></b-icon-pause>
</button>
<button v-if="workflow.status === 'paused'"
class="btn btn-sm btn-outline-success me-1"
@click="resumeWorkflowInstance(workflow)"
:disabled="loading">
<b-icon-play></b-icon-play>
</button>
<button class="btn btn-sm btn-outline-danger"
@click="cancelWorkflowInstance(workflow)"
:disabled="workflow.status === 'completed' || workflow.status === 'cancelled' || loading">
@click="abortWorkflowInstance(workflow)"
:disabled="loading">
<b-icon-x-circle></b-icon-x-circle>
</button>
</td>
@ -93,10 +81,16 @@
<div class="card h-100 workflow-card">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<div class="workflow-icon me-3">
<component :is="workflow.icon" class="text-primary" style="font-size: 1.5rem;"></component>
</div>
<div>
<template v-for="(icon, index) in workflow.icons" :key="icon">
<div class="workflow-icon me-3">
<component :is="icon" class="text-primary" style="font-size: 1.5rem;"></component>
</div>
<!-- Add arrow between icons, but not after the last one -->
<div v-if="index < workflow.icons.length - 1" class="workflow-arrow me-3">
<b-icon-arrow-right class="text-muted" style="font-size: 1rem;"></b-icon-arrow-right>
</div>
</template>
<div class="workflow-header">
<h6 class="card-title mb-1">{{ workflow.name }}</h6>
<small class="text-muted">{{ workflow.category }}</small>
</div>
@ -134,6 +128,7 @@
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import { mapState, mapActions } from 'vuex';
import { workflowRegistry } from '@/workflows.js';
export default {
name: 'Workflows',
@ -143,71 +138,6 @@ export default {
},
data() {
return {
availableWorkflows: [
{
id: 'inventory-audit',
name: 'Inventory Audit',
category: 'Inventory Management',
description: 'Perform a complete audit of your inventory items, checking quantities, locations, and conditions.',
icon: 'b-icon-clipboard-check',
estimatedDuration: '2-4 hours',
steps: 8
},
{
id: 'storage-optimization',
name: 'Storage Optimization',
category: 'Storage Management',
description: 'Analyze and reorganize storage locations for maximum efficiency and accessibility.',
icon: 'b-icon-boxes',
estimatedDuration: '1-2 hours',
steps: 5
},
{
id: 'foto-first-import',
name: 'Foto First Import',
category: 'Data Management',
description: 'Capture unlimited photos via mobile camera or upload images, then sequentially enter details for each item.',
icon: 'b-icon-camera',
estimatedDuration: '10-60 minutes',
steps: 4
},
{
id: 'maintenance-schedule',
name: 'Maintenance Schedule',
category: 'Tool Maintenance',
description: 'Create and execute maintenance schedules for tools and equipment.',
icon: 'b-icon-tools',
estimatedDuration: '30 minutes',
steps: 4
},
{
id: 'expiry-check',
name: 'Expiry Date Check',
category: 'Quality Control',
description: 'Identify and handle items approaching or past their expiry dates.',
icon: 'b-icon-calendar-x',
estimatedDuration: '45 minutes',
steps: 6
},
{
id: 'backup-restore',
name: 'Data Backup',
category: 'System Maintenance',
description: 'Create a comprehensive backup of your inventory and settings data.',
icon: 'b-icon-cloud-arrow-up',
estimatedDuration: '15 minutes',
steps: 3
},
{
id: 'import-items',
name: 'Bulk Item Import',
category: 'Data Management',
description: 'Import multiple inventory items from CSV or Excel files with validation.',
icon: 'b-icon-file-earmark-spreadsheet',
estimatedDuration: '20-60 minutes',
steps: 7
}
],
loading: false,
error: null
}
@ -216,6 +146,9 @@ export default {
...mapState(['active_workflows']),
activeWorkflows() {
return this.active_workflows;
},
availableWorkflows() {
return workflowRegistry.getAll();
}
},
async mounted() {
@ -226,9 +159,6 @@ export default {
'fetchActiveWorkflows',
'createWorkflow',
'updateWorkflow',
'pauseWorkflow',
'resumeWorkflow',
'cancelWorkflow',
'deleteWorkflow'
]),
async loadActiveWorkflows() {
@ -264,7 +194,18 @@ export default {
return classes[status] || 'bg-secondary';
},
formatDate(dateString) {
if (!dateString) {
return 'N/A';
}
const date = new Date(dateString);
// Check if the date is valid
if (isNaN(date.getTime())) {
console.warn('Invalid date string received:', dateString);
return 'Invalid Date';
}
return new Intl.DateTimeFormat('en-US', {
month: 'short',
day: 'numeric',
@ -283,26 +224,22 @@ export default {
this.loading = true;
this.error = null;
const workflowData = {
workflow_type: workflow.id,
state: 'running',
current_step: 0,
total_steps: workflow.steps,
payload: {
workflow_config: {
name: workflow.name,
description: workflow.description,
category: workflow.category,
estimated_duration: workflow.estimatedDuration
}
// Use the workflow's toApiFormat method to get properly formatted data
const workflowData = workflow.toApiFormat();
const newWorkflow = await this.createWorkflow(workflowData);
console.log('Workflow started successfully:', newWorkflow);
// Immediately navigate to the workflow detail view
// Get the first step from the workflow definition
const firstStep = workflow.getStepDefinitions()?.[0]?.step || "initial";
this.$router.push({
name: 'workflow-detail',
params: {
id: newWorkflow.id,
step: firstStep
}
};
await this.createWorkflow(workflowData);
console.log('Workflow started successfully:', workflow.name);
// Refresh active workflows to show the new one
await this.loadActiveWorkflows();
});
} catch (error) {
console.error('Error starting workflow:', error);
@ -312,57 +249,33 @@ export default {
}
},
async viewWorkflowDetails(workflow) {
// TODO: Implement workflow details view/modal
console.log('Viewing workflow details:', workflow);
// For now, show an alert with workflow information
const details = `
Workflow: ${workflow.workflow_type}
Status: ${workflow.status_display || workflow.state}
Progress: ${workflow.progress_percentage}%
Step: ${workflow.current_step + 1} of ${workflow.total_steps}
Started: ${this.formatDate(workflow.started_at)}
`.trim();
alert(details);
console.log('Viewing details for workflow:', workflow);
// Navigate to the workflow detail view
// Use the workflow's current step if available, otherwise use the first step
const currentStep = workflow.current_step ||
workflow.payload?.current_step ||
workflow.getStepDefinitions?.()?.[0]?.step ||
"initial";
this.$router.push({
name: 'workflow-detail',
params: {
id: workflow.id,
step: currentStep
}
});
},
async pauseWorkflowInstance(workflow) {
try {
this.loading = true;
this.error = null;
await this.pauseWorkflow(workflow.id);
await this.loadActiveWorkflows();
console.log('Workflow paused successfully:', workflow.workflow_type);
} catch (error) {
console.error('Error pausing workflow:', error);
this.error = `Failed to pause ${workflow.workflow_type}`;
} finally {
this.loading = false;
}
},
async resumeWorkflowInstance(workflow) {
try {
this.loading = true;
this.error = null;
await this.resumeWorkflow(workflow.id);
await this.loadActiveWorkflows();
console.log('Workflow resumed successfully:', workflow.workflow_type);
} catch (error) {
console.error('Error resuming workflow:', error);
this.error = `Failed to resume ${workflow.workflow_type}`;
} finally {
this.loading = false;
}
},
async cancelWorkflowInstance(workflow) {
if (confirm(`Are you sure you want to cancel "${workflow.workflow_type}"?`)) {
async abortWorkflowInstance(workflow) {
if (confirm(`Are you sure you want to abort "${workflow.workflow_type}"?`)) {
try {
this.loading = true;
this.error = null;
await this.cancelWorkflow(workflow.id);
await this.deleteWorkflow(workflow.id);
await this.loadActiveWorkflows();
console.log('Workflow cancelled successfully:', workflow.workflow_type);
console.log('Workflow aborted successfully:', workflow.workflow_type);
} catch (error) {
console.error('Error cancelling workflow:', error);
this.error = `Failed to cancel ${workflow.workflow_type}`;
console.error('Error aborting workflow:', error);
this.error = `Failed to abort ${workflow.workflow_type}`;
} finally {
this.loading = false;
}
@ -378,11 +291,6 @@ Started: ${this.formatDate(workflow.started_at)}
border: 1px solid #e9ecef;
}
.workflow-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.workflow-icon {
display: flex;
align-items: center;
@ -394,6 +302,19 @@ Started: ${this.formatDate(workflow.started_at)}
flex-shrink: 0;
}
.workflow-header {
margin-left: 1rem;
}
.workflow-arrow {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.progress {
border-radius: 4px;
background-color: #e9ecef;