ultravisor 1.0.2 → 1.0.4

package/webinterface/source/views/PictView-Ultravisor-OperationEdit.js

@@ -26,33 +26,6 @@ const _ViewConfiguration =
 			font-weight: 300;
 			color: #e0e0e0;
 		}
-		.ultravisor-task-list-editor {
-			background: #16213e;
-			border: 1px solid #2a2a4a;
-			border-radius: 6px;
-			padding: 1em;
-		}
-		.ultravisor-task-list-item {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 0.5em 0.75em;
-			background: #1a1a2e;
-			border-radius: 4px;
-			margin-bottom: 0.5em;
-		}
-		.ultravisor-task-list-item code {
-			color: #4fc3f7;
-			font-size: 0.9em;
-		}
-		.ultravisor-task-list-add {
-			display: flex;
-			gap: 0.5em;
-			margin-top: 0.75em;
-		}
-		.ultravisor-task-list-add input {
-			flex: 1;
-		}
 	`,
 
 	Templates:
@@ -93,15 +66,19 @@ class UltravisorOperationEditView extends libPictView
 		let tmpOp = this.pict.AppData.Ultravisor.CurrentEditOperation;
 		if (!tmpOp)
 		{
-			tmpOp = { GUIDOperation: '', Name: '', Description: '', Tasks: [] };
+			tmpOp =
+			{
+				Hash: '', Name: '', Description: '',
+				Graph: { Nodes: [], Connections: [], ViewState: {} }
+			};
 			this.pict.AppData.Ultravisor.CurrentEditOperation = tmpOp;
 		}
 
-		let tmpIsNew = !tmpOp.GUIDOperation;
+		let tmpIsNew = !tmpOp.Hash;
 		let tmpTitleEl = document.getElementById('Ultravisor-OperationEdit-Title');
 		if (tmpTitleEl)
 		{
-			tmpTitleEl.textContent = tmpIsNew ? 'New Operation' : ('Edit Operation: ' + (tmpOp.Name || tmpOp.GUIDOperation));
+			tmpTitleEl.textContent = tmpIsNew ? 'New Operation' : ('Edit Operation: ' + (tmpOp.Name || tmpOp.Hash));
 		}
 
 		this.renderForm();
@@ -124,13 +101,19 @@ class UltravisorOperationEditView extends libPictView
 	renderForm()
 	{
 		let tmpOp = this.pict.AppData.Ultravisor.CurrentEditOperation;
-		let tmpIsNew = !tmpOp.GUIDOperation;
+		let tmpIsNew = !tmpOp.Hash;
 		let tmpGlobalRef = '_Pict';
 		let tmpViewRef = tmpGlobalRef + ".views['Ultravisor-OperationEdit']";
 
+		let tmpNodeCount = (tmpOp.Graph && tmpOp.Graph.Nodes) ? tmpOp.Graph.Nodes.length : 0;
+
 		let tmpHTML = '';
-		tmpHTML += '<div class="ultravisor-form-group"><label>GUID Operation</label>';
-		tmpHTML += '<input type="text" id="Ultravisor-OperationEdit-GUIDOperation" value="' + this.escapeAttr(tmpOp.GUIDOperation) + '" ' + (tmpIsNew ? '' : 'readonly') + '></div>';
+
+		if (!tmpIsNew)
+		{
+			tmpHTML += '<div class="ultravisor-form-group"><label>Hash</label>';
+			tmpHTML += '<input type="text" id="Ultravisor-OperationEdit-Hash" value="' + this.escapeAttr(tmpOp.Hash) + '" readonly></div>';
+		}
 
 		tmpHTML += '<div class="ultravisor-form-group"><label>Name</label>';
 		tmpHTML += '<input type="text" id="Ultravisor-OperationEdit-Name" value="' + this.escapeAttr(tmpOp.Name || '') + '"></div>';
@@ -138,91 +121,53 @@ class UltravisorOperationEditView extends libPictView
 		tmpHTML += '<div class="ultravisor-form-group"><label>Description</label>';
 		tmpHTML += '<textarea id="Ultravisor-OperationEdit-Description">' + this.escapeHTML(tmpOp.Description || '') + '</textarea></div>';
 
-		tmpHTML += '<div class="ultravisor-form-group"><label>Tasks (executed in order)</label>';
-		tmpHTML += '<div class="ultravisor-task-list-editor">';
-
-		let tmpTasks = tmpOp.Tasks || [];
-		if (tmpTasks.length === 0)
-		{
-			tmpHTML += '<div style="color: #607d8b; font-size: 0.9em; padding: 0.5em;">No tasks added yet.</div>';
-		}
-		else
+		if (!tmpIsNew)
 		{
-			for (let i = 0; i < tmpTasks.length; i++)
-			{
-				let tmpEscTask = tmpTasks[i].replace(/'/g, "\\'");
-				tmpHTML += '<div class="ultravisor-task-list-item">';
-				tmpHTML += '<code>' + this.escapeHTML(tmpTasks[i]) + '</code>';
-				tmpHTML += '<button class="ultravisor-btn-sm ultravisor-btn-delete" onclick="' + tmpViewRef + '.removeTaskFromOperation(' + i + ')">Remove</button>';
-				tmpHTML += '</div>';
-			}
+			tmpHTML += '<div class="ultravisor-form-group"><label>Graph</label>';
+			tmpHTML += '<p style="color:#78909c;">' + tmpNodeCount + ' node' + (tmpNodeCount !== 1 ? 's' : '') + ' in graph. Use the Flow Editor to modify the operation graph.</p>';
+			tmpHTML += '</div>';
 		}
 
-		tmpHTML += '<div class="ultravisor-task-list-add">';
-		tmpHTML += '<input type="text" id="Ultravisor-OperationEdit-NewTaskGUID" placeholder="Task GUID to add...">';
-		tmpHTML += '<button class="ultravisor-btn ultravisor-btn-secondary" onclick="' + tmpViewRef + '.addTaskToOperation()">Add</button>';
-		tmpHTML += '</div>';
-		tmpHTML += '</div></div>';
-
 		tmpHTML += '<div class="ultravisor-form-actions">';
-		tmpHTML += '<button class="ultravisor-btn ultravisor-btn-primary" onclick="' + tmpViewRef + '.saveOperation()">Save Operation</button>';
+		tmpHTML += '<button class="ultravisor-btn ultravisor-btn-primary" onclick="' + tmpViewRef + '.saveOperation()">Save Metadata</button>';
+		tmpHTML += '<button class="ultravisor-btn ultravisor-btn-primary" onclick="' + tmpViewRef + '.openFlowEditor()">Open in Flow Editor</button>';
 		tmpHTML += '<button class="ultravisor-btn ultravisor-btn-secondary" onclick="' + tmpGlobalRef + '.PictApplication.navigateTo(\'/Operations\')">Cancel</button>';
 		tmpHTML += '</div>';
 
 		this.pict.ContentAssignment.assignContent('#Ultravisor-OperationEdit-Form', tmpHTML);
 	}
 
-	addTaskToOperation()
+	openFlowEditor()
 	{
-		let tmpInput = document.getElementById('Ultravisor-OperationEdit-NewTaskGUID');
-		let tmpGUID = tmpInput ? tmpInput.value.trim() : '';
-		if (!tmpGUID) return;
-
+		// Sync form values back to the model before navigating
 		let tmpOp = this.pict.AppData.Ultravisor.CurrentEditOperation;
-		if (!tmpOp.Tasks)
-		{
-			tmpOp.Tasks = [];
-		}
-		tmpOp.Tasks.push(tmpGUID);
-
-		// Preserve current form field values before re-render
-		tmpOp.GUIDOperation = document.getElementById('Ultravisor-OperationEdit-GUIDOperation').value.trim();
 		tmpOp.Name = document.getElementById('Ultravisor-OperationEdit-Name').value.trim();
 		tmpOp.Description = document.getElementById('Ultravisor-OperationEdit-Description').value.trim();
 
-		this.renderForm();
-	}
-
-	removeTaskFromOperation(pIndex)
-	{
-		let tmpOp = this.pict.AppData.Ultravisor.CurrentEditOperation;
-		if (tmpOp.Tasks && pIndex >= 0 && pIndex < tmpOp.Tasks.length)
+		// Load the graph into FlowEditor data
+		if (tmpOp.Graph)
 		{
-			tmpOp.Tasks.splice(pIndex, 1);
+			this.pict.AppData.Ultravisor.Flows.Current = JSON.parse(JSON.stringify(tmpOp.Graph));
 		}
 
-		// Preserve current form field values before re-render
-		tmpOp.GUIDOperation = document.getElementById('Ultravisor-OperationEdit-GUIDOperation').value.trim();
-		tmpOp.Name = document.getElementById('Ultravisor-OperationEdit-Name').value.trim();
-		tmpOp.Description = document.getElementById('Ultravisor-OperationEdit-Description').value.trim();
-
-		this.renderForm();
+		this.pict.PictApplication.navigateTo('/FlowEditor');
 	}
 
 	saveOperation()
 	{
+		let tmpOp = this.pict.AppData.Ultravisor.CurrentEditOperation;
+
 		let tmpOpData =
 		{
-			GUIDOperation: document.getElementById('Ultravisor-OperationEdit-GUIDOperation').value.trim(),
 			Name: document.getElementById('Ultravisor-OperationEdit-Name').value.trim(),
 			Description: document.getElementById('Ultravisor-OperationEdit-Description').value.trim(),
-			Tasks: this.pict.AppData.Ultravisor.CurrentEditOperation.Tasks || []
+			Graph: tmpOp.Graph || { Nodes: [], Connections: [], ViewState: {} }
 		};
 
-		if (!tmpOpData.GUIDOperation)
+		let tmpHashEl = document.getElementById('Ultravisor-OperationEdit-Hash');
+		if (tmpHashEl)
 		{
-			alert('GUID Operation is required.');
-			return;
+			tmpOpData.Hash = tmpHashEl.value.trim();
 		}
 
 		this.pict.PictApplication.saveOperation(tmpOpData,

package/webinterface/source/views/PictView-Ultravisor-OperationList.js

@@ -1,5 +1,9 @@
 const libPictView = require('pict-view');
 
+const libExampleCSVPipeline = require('../data/ExampleFlow-CSVPipeline.js');
+const libExampleMeadowPipeline = require('../data/ExampleFlow-MeadowPipeline.js');
+const libExampleFileProcessor = require('../data/ExampleFlow-FileProcessor.js');
+
 const _ViewConfiguration =
 {
 	ViewIdentifier: "Ultravisor-OperationList",
@@ -39,7 +43,7 @@ const _ViewConfiguration =
 		.ultravisor-operation-table tr:hover td {
 			background-color: #1a2744;
 		}
-		.ultravisor-operation-task-count {
+		.ultravisor-operation-node-count {
 			display: inline-block;
 			padding: 0.15em 0.5em;
 			border-radius: 3px;
@@ -58,9 +62,15 @@ const _ViewConfiguration =
 <div class="ultravisor-operationlist">
 	<div class="ultravisor-operationlist-header">
 		<h1>Operations</h1>
-		<button class="ultravisor-btn ultravisor-btn-primary" onclick="{~P~}.PictApplication.editOperation()">New Operation</button>
+		<div>
+			<button class="ultravisor-btn ultravisor-btn-primary" onclick="{~P~}.PictApplication.editOperation()">New Operation</button>
+			<button class="ultravisor-btn ultravisor-btn-secondary" onclick="{~P~}.views['Ultravisor-OperationList'].createExampleOperation('CSVPipeline')">+ Config Processor</button>
+			<button class="ultravisor-btn ultravisor-btn-secondary" onclick="{~P~}.views['Ultravisor-OperationList'].createExampleOperation('MeadowPipeline')">+ Template Processor</button>
+			<button class="ultravisor-btn ultravisor-btn-secondary" onclick="{~P~}.views['Ultravisor-OperationList'].createExampleOperation('FileProcessor')">+ File Processor</button>
+		</div>
 	</div>
 	<div id="Ultravisor-OperationList-Body"></div>
+	<div id="Ultravisor-OperationList-Result"></div>
 </div>
 `
 		}
@@ -108,25 +118,25 @@ class UltravisorOperationListView extends libPictView
 		}
 
 		let tmpHTML = '<table class="ultravisor-operation-table">';
-		tmpHTML += '<thead><tr><th>GUID</th><th>Name</th><th>Tasks</th><th>Actions</th></tr></thead>';
+		tmpHTML += '<thead><tr><th>Hash</th><th>Name</th><th>Nodes</th><th>Actions</th></tr></thead>';
 		tmpHTML += '<tbody>';
 
 		for (let i = 0; i < tmpOpList.length; i++)
 		{
 			let tmpOp = tmpOpList[i];
-			let tmpGUID = tmpOp.GUIDOperation || '';
-			let tmpName = tmpOp.Name || tmpGUID;
-			let tmpTaskCount = (tmpOp.Tasks && Array.isArray(tmpOp.Tasks)) ? tmpOp.Tasks.length : 0;
-			let tmpEscGUID = tmpGUID.replace(/'/g, "\\'");
+			let tmpHash = tmpOp.Hash || '';
+			let tmpName = tmpOp.Name || tmpHash;
+			let tmpNodeCount = (tmpOp.Graph && tmpOp.Graph.Nodes) ? tmpOp.Graph.Nodes.length : 0;
+			let tmpEscHash = tmpHash.replace(/'/g, "\\'");
 
 			tmpHTML += '<tr>';
-			tmpHTML += '<td><code>' + tmpGUID + '</code></td>';
-			tmpHTML += '<td>' + tmpName + '</td>';
-			tmpHTML += '<td><span class="ultravisor-operation-task-count">' + tmpTaskCount + ' task' + (tmpTaskCount !== 1 ? 's' : '') + '</span></td>';
+			tmpHTML += '<td><code>' + this.escapeHTML(tmpHash) + '</code></td>';
+			tmpHTML += '<td>' + this.escapeHTML(tmpName) + '</td>';
+			tmpHTML += '<td><span class="ultravisor-operation-node-count">' + tmpNodeCount + ' node' + (tmpNodeCount !== 1 ? 's' : '') + '</span></td>';
 			tmpHTML += '<td><div class="ultravisor-task-actions">';
-			tmpHTML += '<button class="ultravisor-btn-sm ultravisor-btn-execute" onclick="' + tmpGlobalRef + '.PictApplication.executeOperation(\'' + tmpEscGUID + '\', function(pErr, pData){ alert(pErr ? \'Error: \'+pErr.message : \'Operation executed. Status: \'+(pData&&pData.Status||\'Done\')); })">Run</button>';
-			tmpHTML += '<button class="ultravisor-btn-sm ultravisor-btn-edit" onclick="' + tmpGlobalRef + '.PictApplication.editOperation(\'' + tmpEscGUID + '\')">Edit</button>';
-			tmpHTML += '<button class="ultravisor-btn-sm ultravisor-btn-delete" onclick="if(confirm(\'Delete operation ' + tmpEscGUID + '?\')){ ' + tmpGlobalRef + '.PictApplication.deleteOperation(\'' + tmpEscGUID + '\', function(){ ' + tmpGlobalRef + '.PictApplication.showView(\'Ultravisor-OperationList\'); }); }">Delete</button>';
+			tmpHTML += '<button class="ultravisor-btn-sm ultravisor-btn-execute" onclick="' + tmpGlobalRef + '.views[\'Ultravisor-OperationList\'].runOperation(\'' + tmpEscHash + '\')">Run</button>';
+			tmpHTML += '<button class="ultravisor-btn-sm ultravisor-btn-edit" onclick="' + tmpGlobalRef + '.PictApplication.editOperation(\'' + tmpEscHash + '\')">Edit</button>';
+			tmpHTML += '<button class="ultravisor-btn-sm ultravisor-btn-delete" onclick="if(confirm(\'Delete operation ' + tmpEscHash + '?\')){ ' + tmpGlobalRef + '.PictApplication.deleteOperation(\'' + tmpEscHash + '\', function(){ ' + tmpGlobalRef + '.PictApplication.showView(\'Ultravisor-OperationList\'); }); }">Delete</button>';
 			tmpHTML += '</div></td>';
 			tmpHTML += '</tr>';
 		}
@@ -134,6 +144,111 @@ class UltravisorOperationListView extends libPictView
 		tmpHTML += '</tbody></table>';
 		this.pict.ContentAssignment.assignContent('#Ultravisor-OperationList-Body', tmpHTML);
 	}
+
+	runOperation(pHash)
+	{
+		this.pict.ContentAssignment.assignContent('#Ultravisor-OperationList-Result',
+			'<div class="ultravisor-task-result-panel"><h3>Running operation ' + this.escapeHTML(pHash) + '...</h3></div>');
+
+		this.pict.PictApplication.executeOperation(pHash,
+			function (pError, pData)
+			{
+				if (pError)
+				{
+					this.pict.ContentAssignment.assignContent('#Ultravisor-OperationList-Result',
+						'<div class="ultravisor-task-result-panel"><h3>Error</h3><p style="color:#ef5350;">' + this.escapeHTML(pError.message) + '</p></div>');
+					return;
+				}
+
+				let tmpHTML = '<div class="ultravisor-task-result-panel">';
+				tmpHTML += '<h3>Operation Result: ' + this.escapeHTML(pHash) + '</h3>';
+				tmpHTML += '<p><strong>Status:</strong> <span class="ultravisor-manifest-status ' + (pData.Status || '').toLowerCase() + '">' + this.escapeHTML(pData.Status || '') + '</span></p>';
+				tmpHTML += '<p><strong>Start:</strong> ' + this.escapeHTML(pData.StartTime || '') + ' &middot; <strong>Stop:</strong> ' + this.escapeHTML(pData.StopTime || '') + '</p>';
+				tmpHTML += '<p><strong>Elapsed:</strong> ' + (pData.ElapsedMs || 0) + 'ms</p>';
+
+				if (pData.TaskOutputs)
+				{
+					tmpHTML += '<h4 style="color:#b0bec5; margin:0.75em 0 0.25em 0;">Task Outputs</h4>';
+					tmpHTML += '<div class="ultravisor-task-result-output">' + this.escapeHTML(JSON.stringify(pData.TaskOutputs, null, 2)) + '</div>';
+				}
+
+				if (pData.Log && pData.Log.length > 0)
+				{
+					tmpHTML += '<h4 style="color:#b0bec5; margin:0.75em 0 0.25em 0;">Log</h4>';
+					tmpHTML += '<div class="ultravisor-task-result-output">' + this.escapeHTML(pData.Log.join('\n')) + '</div>';
+				}
+
+				tmpHTML += '</div>';
+				this.pict.ContentAssignment.assignContent('#Ultravisor-OperationList-Result', tmpHTML);
+			}.bind(this));
+	}
+
+	createExampleOperation(pExampleName)
+	{
+		let tmpFlowData = null;
+		let tmpName = '';
+		let tmpDescription = '';
+
+		if (pExampleName === 'CSVPipeline')
+		{
+			tmpFlowData = libExampleCSVPipeline;
+			tmpName = 'Example: Config Processor';
+			tmpDescription = 'File-based config processing with branching and error handling.';
+		}
+		else if (pExampleName === 'MeadowPipeline')
+		{
+			tmpFlowData = libExampleMeadowPipeline;
+			tmpName = 'Example: Template Processor';
+			tmpDescription = 'Multi-step text processing with chained replacements and conditional validation.';
+		}
+		else if (pExampleName === 'FileProcessor')
+		{
+			tmpFlowData = libExampleFileProcessor;
+			tmpName = 'Example: File Processor';
+			tmpDescription = 'Search and replace pipeline with user input, looping, and file I/O.';
+		}
+
+		if (!tmpFlowData)
+		{
+			return;
+		}
+
+		let tmpOpData =
+		{
+			Name: tmpName,
+			Description: tmpDescription,
+			Graph:
+			{
+				Nodes: JSON.parse(JSON.stringify(tmpFlowData.Nodes)),
+				Connections: JSON.parse(JSON.stringify(tmpFlowData.Connections)),
+				ViewState: tmpFlowData.ViewState ? JSON.parse(JSON.stringify(tmpFlowData.ViewState)) : {}
+			}
+		};
+
+		this.pict.PictApplication.saveOperation(tmpOpData,
+			function (pError, pData)
+			{
+				if (pError)
+				{
+					this.pict.ContentAssignment.assignContent('#Ultravisor-OperationList-Result',
+						'<div class="ultravisor-task-result-panel"><p style="color:#ef5350;">Error creating example: ' + this.escapeHTML(pError.message) + '</p></div>');
+					return;
+				}
+
+				// Reload the operation list
+				this.pict.PictApplication.loadOperations(
+					function ()
+					{
+						this.renderOperationTable();
+					}.bind(this));
+			}.bind(this));
+	}
+
+	escapeHTML(pValue)
+	{
+		if (!pValue) return '';
+		return String(pValue).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	}
 }
 
 module.exports = UltravisorOperationListView;