ultravisor 1.0.2 → 1.0.4

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

@@ -0,0 +1,436 @@
+const libPictView = require('pict-view');
+const libPictSectionFlow = require('pict-section-flow');
+
+// Flow control cards
+const libFlowCardStart = require('../cards/FlowCard-Start.js');
+const libFlowCardEnd = require('../cards/FlowCard-End.js');
+
+// Core/Control cards
+const libFlowCardCommand = require('../cards/FlowCard-Command.js');
+const libFlowCardConditional = require('../cards/FlowCard-Conditional.js');
+const libFlowCardSolver = require('../cards/FlowCard-Solver.js');
+const libFlowCardTemplateString = require('../cards/FlowCard-TemplateString.js');
+const libFlowCardLaunchOperation = require('../cards/FlowCard-LaunchOperation.js');
+
+// File I/O cards
+const libFlowCardReadText = require('../cards/FlowCard-ReadText.js');
+const libFlowCardWriteText = require('../cards/FlowCard-WriteText.js');
+const libFlowCardReadJSON = require('../cards/FlowCard-ReadJSON.js');
+const libFlowCardWriteJSON = require('../cards/FlowCard-WriteJSON.js');
+const libFlowCardListFiles = require('../cards/FlowCard-ListFiles.js');
+const libFlowCardCopyFile = require('../cards/FlowCard-CopyFile.js');
+
+// REST/HTTP cards
+const libFlowCardGetJSON = require('../cards/FlowCard-GetJSON.js');
+const libFlowCardGetText = require('../cards/FlowCard-GetText.js');
+const libFlowCardSendJSON = require('../cards/FlowCard-SendJSON.js');
+const libFlowCardRestRequest = require('../cards/FlowCard-RestRequest.js');
+
+// Meadow cards
+const libFlowCardMeadowCreate = require('../cards/FlowCard-MeadowCreate.js');
+const libFlowCardMeadowRead = require('../cards/FlowCard-MeadowRead.js');
+const libFlowCardMeadowReads = require('../cards/FlowCard-MeadowReads.js');
+const libFlowCardMeadowUpdate = require('../cards/FlowCard-MeadowUpdate.js');
+const libFlowCardMeadowDelete = require('../cards/FlowCard-MeadowDelete.js');
+const libFlowCardMeadowCount = require('../cards/FlowCard-MeadowCount.js');
+const libFlowCardCSVTransform = require('../cards/FlowCard-CSVTransform.js');
+const libFlowCardComprehensionIntersect = require('../cards/FlowCard-ComprehensionIntersect.js');
+
+// Pipeline cards
+const libFlowCardParseCSV = require('../cards/FlowCard-ParseCSV.js');
+const libFlowCardHistogram = require('../cards/FlowCard-Histogram.js');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "Ultravisor-FlowEditor",
+
+	DefaultRenderable: "Ultravisor-FlowEditor-Content",
+	DefaultDestinationAddress: "#Ultravisor-Content-Container",
+
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.ultravisor-floweditor {
+			padding: 0.75em;
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			height: calc(100vh - 56px - 39px - 0.75em);
+			min-height: 400px;
+			box-sizing: border-box;
+		}
+		.ultravisor-floweditor-header {
+			flex-shrink: 0;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 0.75em;
+			padding-bottom: 0.75em;
+			border-bottom: 1px solid #2a2a4a;
+		}
+		.ultravisor-floweditor-header h1 {
+			margin: 0;
+			font-size: 1.8em;
+			font-weight: 300;
+			color: #e0e0e0;
+		}
+		.ultravisor-flow-actions {
+			display: flex;
+			gap: 0.5em;
+			align-items: center;
+			flex-wrap: wrap;
+		}
+		.ultravisor-flow-meta {
+			flex-shrink: 0;
+			display: flex;
+			gap: 0.75em;
+			align-items: center;
+			margin-bottom: 0.5em;
+			padding-bottom: 0.5em;
+			border-bottom: 1px solid #1a1a2e;
+		}
+		.ultravisor-flow-meta label {
+			font-size: 0.8em;
+			font-weight: 600;
+			color: #78909c;
+			text-transform: uppercase;
+			margin-right: 0.25em;
+		}
+		.ultravisor-flow-meta input {
+			flex: 1;
+			min-width: 120px;
+		}
+		.ultravisor-flow-meta-hash {
+			font-size: 0.8em;
+			color: #607d8b;
+			font-family: monospace;
+		}
+		#Ultravisor-FlowEditor-Container {
+			flex: 1;
+			min-height: 0;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "Ultravisor-FlowEditor-Template",
+			Template: /*html*/`
+<div class="ultravisor-floweditor">
+	<div class="ultravisor-floweditor-header">
+		<h1 id="Ultravisor-FlowEditor-Title">Flow Editor</h1>
+		<div class="ultravisor-flow-actions">
+			<button class="ultravisor-btn ultravisor-btn-primary" onclick="{~P~}.views['Ultravisor-FlowEditor'].saveOperation()">Save Operation</button>
+		</div>
+	</div>
+	<div class="ultravisor-flow-meta">
+		<span id="Ultravisor-FlowEditor-HashDisplay" class="ultravisor-flow-meta-hash"></span>
+		<label>Name</label>
+		<input type="text" id="Ultravisor-FlowEditor-Name" placeholder="Operation name...">
+		<label>Description</label>
+		<input type="text" id="Ultravisor-FlowEditor-Description" placeholder="Description...">
+	</div>
+	<div id="Ultravisor-FlowEditor-Container"></div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "Ultravisor-FlowEditor-Content",
+			TemplateHash: "Ultravisor-FlowEditor-Template",
+			DestinationAddress: "#Ultravisor-Content-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+
+class UltravisorFlowEditorView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this._FlowView = null;
+	}
+
+	/**
+	 * Build a map of FlowCard node type configurations keyed by hash.
+	 * These are passed as NodeTypes in the FlowView options so they
+	 * are available from the moment the NodeTypeProvider is created,
+	 * before the toolbar renders.
+	 */
+	_buildFlowCardNodeTypes()
+	{
+		let tmpCardClasses =
+		[
+			// Flow control
+			libFlowCardStart,
+			libFlowCardEnd,
+			// Core
+			libFlowCardCommand,
+			libFlowCardConditional,
+			libFlowCardSolver,
+			libFlowCardTemplateString,
+			libFlowCardLaunchOperation,
+			// File I/O
+			libFlowCardReadText,
+			libFlowCardWriteText,
+			libFlowCardReadJSON,
+			libFlowCardWriteJSON,
+			libFlowCardListFiles,
+			libFlowCardCopyFile,
+			// REST
+			libFlowCardGetJSON,
+			libFlowCardGetText,
+			libFlowCardSendJSON,
+			libFlowCardRestRequest,
+			// Meadow
+			libFlowCardMeadowCreate,
+			libFlowCardMeadowRead,
+			libFlowCardMeadowReads,
+			libFlowCardMeadowUpdate,
+			libFlowCardMeadowDelete,
+			libFlowCardMeadowCount,
+			libFlowCardCSVTransform,
+			libFlowCardComprehensionIntersect,
+			// Pipeline
+			libFlowCardParseCSV,
+			libFlowCardHistogram
+		];
+
+		let tmpNodeTypes = {};
+
+		for (let i = 0; i < tmpCardClasses.length; i++)
+		{
+			let tmpCard = new tmpCardClasses[i](this.fable, {}, `FlowCard-${i}`);
+			let tmpConfig = tmpCard.getNodeTypeConfiguration();
+			// Ultravisor flow cards render port labels outside the node
+			// boundary to avoid overlapping body content
+			tmpConfig.PortLabelsOutside = true;
+			tmpNodeTypes[tmpConfig.Hash] = tmpConfig;
+		}
+
+		return tmpNodeTypes;
+	}
+
+	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
+	{
+		// Populate the metadata fields from CurrentEditOperation
+		let tmpOp = this.pict.AppData.Ultravisor.CurrentEditOperation;
+		if (tmpOp)
+		{
+			let tmpTitleEl = document.getElementById('Ultravisor-FlowEditor-Title');
+			if (tmpTitleEl)
+			{
+				tmpTitleEl.textContent = tmpOp.Hash ? ('Flow Editor: ' + (tmpOp.Name || tmpOp.Hash)) : 'Flow Editor: New Operation';
+			}
+
+			let tmpHashEl = document.getElementById('Ultravisor-FlowEditor-HashDisplay');
+			if (tmpHashEl && tmpOp.Hash)
+			{
+				tmpHashEl.textContent = tmpOp.Hash;
+			}
+
+			let tmpNameEl = document.getElementById('Ultravisor-FlowEditor-Name');
+			if (tmpNameEl)
+			{
+				tmpNameEl.value = tmpOp.Name || '';
+			}
+
+			let tmpDescEl = document.getElementById('Ultravisor-FlowEditor-Description');
+			if (tmpDescEl)
+			{
+				tmpDescEl.value = tmpOp.Description || '';
+			}
+		}
+
+		// Create and render the flow section view into its container
+		if (!this._FlowView)
+		{
+			this._FlowView = this.pict.addView('Ultravisor-FlowDiagram',
+				{
+					ViewIdentifier: 'Ultravisor-FlowDiagram',
+
+					DefaultRenderable: 'Flow-Container',
+					DefaultDestinationAddress: '#Ultravisor-FlowEditor-Container',
+
+					AutoRender: false,
+
+					FlowDataAddress: 'AppData.Ultravisor.Flows.Current',
+
+					TargetElementAddress: '#Flow-SVG-Container',
+
+					EnableToolbar: true,
+					EnablePanning: true,
+					EnableZooming: true,
+					EnableNodeDragging: true,
+					EnableConnectionCreation: true,
+					EnableGridSnap: false,
+					GridSnapSize: 20,
+
+					MinZoom: 0.1,
+					MaxZoom: 5.0,
+					ZoomStep: 0.1,
+
+					DefaultNodeType: 'default',
+					DefaultNodeWidth: 180,
+					DefaultNodeHeight: 80,
+
+					// Pre-register FlowCard node types so they are available
+					// when the NodeTypeProvider is created, before toolbar renders
+					NodeTypes: this._buildFlowCardNodeTypes(),
+
+					Renderables:
+					[
+						{
+							RenderableHash: 'Flow-Container',
+							TemplateHash: 'Flow-Container-Template',
+							DestinationAddress: '#Ultravisor-FlowEditor-Container',
+							RenderMethod: 'replace'
+						}
+					]
+				},
+				libPictSectionFlow
+			);
+		}
+
+		// Initialize default empty flow if none exists
+		if (!this.pict.AppData.Ultravisor.Flows.Current)
+		{
+			this.pict.AppData.Ultravisor.Flows.Current =
+			{
+				Nodes: [],
+				Connections: [],
+				ViewState: { PanX: 0, PanY: 0, Zoom: 1, SelectedNodeHash: null, SelectedConnectionHash: null }
+			};
+		}
+
+		// Reset the flow view's render state so it re-initializes SVG elements
+		// when re-rendered (e.g. after navigating away and back)
+		this._FlowView.initialRenderComplete = false;
+		this._FlowView.render();
+
+		// Re-inject CSS after the flow view creates its dynamic styles
+		this.pict.CSSMap.injectCSS();
+
+		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
+	}
+
+	loadExample(pExampleName)
+	{
+		let tmpFlowData = null;
+
+		if (pExampleName === 'CSVPipeline')
+		{
+			tmpFlowData = require('../data/ExampleFlow-CSVPipeline.js');
+		}
+		else if (pExampleName === 'MeadowPipeline')
+		{
+			tmpFlowData = require('../data/ExampleFlow-MeadowPipeline.js');
+		}
+		else if (pExampleName === 'FileProcessor')
+		{
+			tmpFlowData = require('../data/ExampleFlow-FileProcessor.js');
+		}
+
+		if (tmpFlowData)
+		{
+			this.pict.AppData.Ultravisor.Flows.Current = JSON.parse(JSON.stringify(tmpFlowData));
+			if (this._FlowView)
+			{
+				this._FlowView.setFlowData(this.pict.AppData.Ultravisor.Flows.Current);
+				// Zoom to fit after a brief delay to allow the DOM to update
+				let tmpFlowView = this._FlowView;
+				setTimeout(function()
+				{
+					if (tmpFlowView._ViewportManager)
+					{
+						tmpFlowView._ViewportManager.zoomToFit();
+					}
+				}, 100);
+			}
+		}
+	}
+
+	saveOperation()
+	{
+		if (!this._FlowView)
+		{
+			return;
+		}
+
+		let tmpFlowData = this._FlowView.getFlowData();
+		if (!tmpFlowData || !tmpFlowData.Nodes || tmpFlowData.Nodes.length === 0)
+		{
+			alert('No flow data to save. Add some nodes first.');
+			return;
+		}
+
+		// Read the metadata from the form fields
+		let tmpName = document.getElementById('Ultravisor-FlowEditor-Name').value.trim();
+		let tmpDescription = document.getElementById('Ultravisor-FlowEditor-Description').value.trim();
+
+		if (!tmpName)
+		{
+			alert('Please enter an operation name.');
+			return;
+		}
+
+		// Build the operation data with the graph
+		let tmpOpData =
+		{
+			Name: tmpName,
+			Description: tmpDescription,
+			Graph:
+			{
+				Nodes: tmpFlowData.Nodes,
+				Connections: tmpFlowData.Connections,
+				ViewState: tmpFlowData.ViewState || {}
+			}
+		};
+
+		// Include Hash if editing an existing operation
+		let tmpOp = this.pict.AppData.Ultravisor.CurrentEditOperation;
+		if (tmpOp && tmpOp.Hash)
+		{
+			tmpOpData.Hash = tmpOp.Hash;
+		}
+
+		this.pict.PictApplication.saveOperation(tmpOpData,
+			function (pError, pData)
+			{
+				if (pError)
+				{
+					alert('Error saving operation: ' + pError.message);
+					return;
+				}
+
+				// Update the current edit operation with the saved data
+				if (pData && pData.Hash)
+				{
+					if (!this.pict.AppData.Ultravisor.CurrentEditOperation)
+					{
+						this.pict.AppData.Ultravisor.CurrentEditOperation = {};
+					}
+					this.pict.AppData.Ultravisor.CurrentEditOperation.Hash = pData.Hash;
+					this.pict.AppData.Ultravisor.CurrentEditOperation.Name = tmpName;
+					this.pict.AppData.Ultravisor.CurrentEditOperation.Description = tmpDescription;
+
+					let tmpHashEl = document.getElementById('Ultravisor-FlowEditor-HashDisplay');
+					if (tmpHashEl)
+					{
+						tmpHashEl.textContent = pData.Hash;
+					}
+				}
+
+				alert('Operation saved successfully.');
+			}.bind(this));
+	}
+}
+
+module.exports = UltravisorFlowEditorView;
+
+module.exports.default_configuration = _ViewConfiguration;

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

@@ -58,6 +58,10 @@ const _ViewConfiguration =
 			background-color: #c62828;
 			color: #ffcdd2;
 		}
+		.ultravisor-manifest-status.waiting {
+			background-color: #f57f17;
+			color: #fff9c4;
+		}
 		.ultravisor-manifest-detail {
 			background: #16213e;
 			border: 1px solid #2a2a4a;
@@ -101,12 +105,6 @@ const _ViewConfiguration =
 			overflow-y: auto;
 			margin-top: 0.5em;
 		}
-		.ultravisor-manifest-success-true {
-			color: #66bb6a;
-		}
-		.ultravisor-manifest-success-false {
-			color: #ef5350;
-		}
 	`,
 
 	Templates:
@@ -169,28 +167,28 @@ class UltravisorManifestListView extends libPictView
 		}
 
 		let tmpHTML = '<table class="ultravisor-manifest-table">';
-		tmpHTML += '<thead><tr><th>Run GUID</th><th>Operation</th><th>Status</th><th>Success</th><th>Started</th><th>Actions</th></tr></thead>';
+		tmpHTML += '<thead><tr><th>Run Hash</th><th>Operation</th><th>Status</th><th>Elapsed</th><th>Started</th><th>Actions</th></tr></thead>';
 		tmpHTML += '<tbody>';
 
 		for (let i = 0; i < tmpManifests.length; i++)
 		{
 			let tmpManifest = tmpManifests[i];
-			let tmpGUIDRun = tmpManifest.GUIDRun || '';
-			let tmpEscGUID = tmpGUIDRun.replace(/'/g, "\\'");
+			let tmpRunHash = tmpManifest.Hash || '';
+			let tmpEscHash = tmpRunHash.replace(/'/g, "\\'");
 			let tmpStatus = tmpManifest.Status || 'Unknown';
 			let tmpStatusClass = tmpStatus.toLowerCase();
-			if (tmpStatusClass !== 'complete' && tmpStatusClass !== 'running' && tmpStatusClass !== 'error')
+			if (tmpStatusClass !== 'complete' && tmpStatusClass !== 'running' && tmpStatusClass !== 'error' && tmpStatusClass !== 'waiting')
 			{
 				tmpStatusClass = '';
 			}
 
 			tmpHTML += '<tr>';
-			tmpHTML += '<td><code style="font-size:0.8em;">' + tmpGUIDRun + '</code></td>';
-			tmpHTML += '<td>' + (tmpManifest.Name || tmpManifest.GUIDOperation || '') + '</td>';
-			tmpHTML += '<td><span class="ultravisor-manifest-status ' + tmpStatusClass + '">' + tmpStatus + '</span></td>';
-			tmpHTML += '<td><span class="ultravisor-manifest-success-' + (tmpManifest.Success ? 'true' : 'false') + '">' + (tmpManifest.Success ? 'Yes' : 'No') + '</span></td>';
-			tmpHTML += '<td>' + (tmpManifest.StartTime || '') + '</td>';
-			tmpHTML += '<td><button class="ultravisor-btn-sm ultravisor-btn-edit" onclick="' + tmpViewRef + '.showManifestDetail(\'' + tmpEscGUID + '\')">Details</button></td>';
+			tmpHTML += '<td><code style="font-size:0.8em;">' + this.escapeHTML(tmpRunHash) + '</code></td>';
+			tmpHTML += '<td>' + this.escapeHTML(tmpManifest.OperationHash || '') + '</td>';
+			tmpHTML += '<td><span class="ultravisor-manifest-status ' + tmpStatusClass + '">' + this.escapeHTML(tmpStatus) + '</span></td>';
+			tmpHTML += '<td>' + (tmpManifest.ElapsedMs ? tmpManifest.ElapsedMs + 'ms' : '') + '</td>';
+			tmpHTML += '<td>' + this.escapeHTML(tmpManifest.StartTime || '') + '</td>';
+			tmpHTML += '<td><button class="ultravisor-btn-sm ultravisor-btn-edit" onclick="' + tmpViewRef + '.showManifestDetail(\'' + tmpEscHash + '\')">Details</button></td>';
 			tmpHTML += '</tr>';
 		}
 
@@ -198,9 +196,9 @@ class UltravisorManifestListView extends libPictView
 		this.pict.ContentAssignment.assignContent('#Ultravisor-ManifestList-Body', tmpHTML);
 	}
 
-	showManifestDetail(pGUIDRun)
+	showManifestDetail(pRunHash)
 	{
-		this.pict.PictApplication.loadManifest(pGUIDRun,
+		this.pict.PictApplication.loadManifest(pRunHash,
 			function (pError, pManifest)
 			{
 				if (pError || !pManifest)
@@ -211,48 +209,52 @@ class UltravisorManifestListView extends libPictView
 				}
 
 				let tmpHTML = '<div class="ultravisor-manifest-detail visible">';
-				tmpHTML += '<h3>Run: ' + (pManifest.GUIDRun || '') + '</h3>';
-				tmpHTML += '<p><strong>Operation:</strong> ' + (pManifest.Name || pManifest.GUIDOperation || '') + '</p>';
-				tmpHTML += '<p><strong>Status:</strong> ' + (pManifest.Status || '') + ' &middot; <strong>Success:</strong> ' + (pManifest.Success ? 'Yes' : 'No') + '</p>';
-				tmpHTML += '<p><strong>Start:</strong> ' + (pManifest.StartTime || '') + ' &middot; <strong>Stop:</strong> ' + (pManifest.StopTime || '') + '</p>';
+				tmpHTML += '<h3>Run: ' + this.escapeHTML(pManifest.Hash || '') + '</h3>';
+				tmpHTML += '<p><strong>Operation:</strong> ' + this.escapeHTML(pManifest.OperationHash || '') + '</p>';
+				tmpHTML += '<p><strong>Status:</strong> ' + this.escapeHTML(pManifest.Status || '') + '</p>';
+				tmpHTML += '<p><strong>Start:</strong> ' + this.escapeHTML(pManifest.StartTime || '') + ' &middot; <strong>Stop:</strong> ' + this.escapeHTML(pManifest.StopTime || '') + '</p>';
+				tmpHTML += '<p><strong>Elapsed:</strong> ' + (pManifest.ElapsedMs || 0) + 'ms</p>';
 
-				if (pManifest.Summary)
+				// Task Outputs
+				if (pManifest.TaskOutputs && Object.keys(pManifest.TaskOutputs).length > 0)
 				{
-					tmpHTML += '<p><strong>Summary:</strong> ' + this.escapeHTML(pManifest.Summary) + '</p>';
+					tmpHTML += '<h3>Task Outputs</h3>';
+					tmpHTML += '<div class="ultravisor-manifest-output">' + this.escapeHTML(JSON.stringify(pManifest.TaskOutputs, null, 2)) + '</div>';
 				}
 
-				// Task results
-				let tmpTaskResults = pManifest.TaskResults || [];
-				if (tmpTaskResults.length > 0)
+				// Task Manifests (object keyed by node hash)
+				if (pManifest.TaskManifests && Object.keys(pManifest.TaskManifests).length > 0)
 				{
-					tmpHTML += '<h3>Task Results</h3>';
-					for (let i = 0; i < tmpTaskResults.length; i++)
+					tmpHTML += '<h3>Task Manifests</h3>';
+					let tmpNodeHashes = Object.keys(pManifest.TaskManifests);
+					for (let i = 0; i < tmpNodeHashes.length; i++)
 					{
-						let tmpResult = tmpTaskResults[i];
+						let tmpNodeHash = tmpNodeHashes[i];
+						let tmpTaskManifest = pManifest.TaskManifests[tmpNodeHash];
 						tmpHTML += '<div class="ultravisor-manifest-task-result">';
 						tmpHTML += '<div class="ultravisor-manifest-task-result-header">';
-						tmpHTML += '<code>' + (tmpResult.GUIDTask || '') + '</code>';
-						tmpHTML += '<span class="ultravisor-manifest-status ' + (tmpResult.Status || '').toLowerCase() + '">' + (tmpResult.Status || '') + '</span>';
+						tmpHTML += '<code>' + this.escapeHTML(tmpNodeHash) + '</code>';
+						tmpHTML += '<span class="ultravisor-manifest-status ' + (tmpTaskManifest.Status || '').toLowerCase() + '">' + this.escapeHTML(tmpTaskManifest.Status || '') + '</span>';
 						tmpHTML += '</div>';
-						tmpHTML += '<p style="margin:0.25em 0; font-size:0.85em; color:#78909c;">' + (tmpResult.Name || '') + ' (' + (tmpResult.Type || '') + ')</p>';
-
-						if (tmpResult.Output)
-						{
-							tmpHTML += '<div class="ultravisor-manifest-output">' + this.escapeHTML(String(tmpResult.Output)) + '</div>';
-						}
-
-						if (tmpResult.Log && tmpResult.Log.length > 0)
+						if (tmpTaskManifest.Output)
 						{
-							tmpHTML += '<div class="ultravisor-manifest-output">' + this.escapeHTML(tmpResult.Log.join('\n')) + '</div>';
+							tmpHTML += '<div class="ultravisor-manifest-output">' + this.escapeHTML(JSON.stringify(tmpTaskManifest.Output, null, 2)) + '</div>';
 						}
 						tmpHTML += '</div>';
 					}
 				}
 
-				// Operation log
+				// Errors
+				if (pManifest.Errors && pManifest.Errors.length > 0)
+				{
+					tmpHTML += '<h3 style="color:#ef5350;">Errors</h3>';
+					tmpHTML += '<div class="ultravisor-manifest-output" style="border: 1px solid #ef5350;">' + this.escapeHTML(pManifest.Errors.join('\n')) + '</div>';
+				}
+
+				// Log
 				if (pManifest.Log && pManifest.Log.length > 0)
 				{
-					tmpHTML += '<h3>Operation Log</h3>';
+					tmpHTML += '<h3>Log</h3>';
 					tmpHTML += '<div class="ultravisor-manifest-output">' + this.escapeHTML(pManifest.Log.join('\n')) + '</div>';
 				}