retold-data-service 2.1.2 → 2.1.5

package/source/services/data-cloner/pict-app/views/PictView-DataCloner-StatusDetail.js

@@ -0,0 +1,81 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class DataClonerStatusDetailView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = DataClonerStatusDetailView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'DataCloner-StatusDetail',
+	DefaultRenderable:         'DataCloner-StatusDetail',
+	DefaultDestinationAddress: '#DataCloner-StatusDetail-Panel',
+	AutoRender:                false,
+	CSS: /*css*/`
+		.rds-status-detail-body {
+			padding: 12px 20px 16px;
+			max-height: 100%;
+			overflow-y: auto;
+			color: var(--theme-color-text-primary, #333);
+		}
+		.rds-status-detail-section { margin-bottom: 14px; }
+		.rds-status-detail-section:last-child { margin-bottom: 0; }
+		.rds-status-detail-section-title {
+			font-size: 0.85em; font-weight: 600;
+			color: var(--theme-color-text-secondary, #555);
+			text-transform: uppercase; letter-spacing: 0.5px;
+			margin-bottom: 8px; padding-bottom: 4px;
+			border-bottom: 1px solid var(--theme-color-border-light, #eee);
+		}
+		.running-op-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 0.9em; }
+		.running-op-name { font-weight: 600; min-width: 180px; }
+		.running-op-bar {
+			flex: 1; height: 8px;
+			background: var(--theme-color-background-tertiary, #e9ecef);
+			border-radius: 4px; overflow: hidden; min-width: 120px;
+		}
+		.running-op-bar-fill {
+			height: 100%;
+			background: var(--theme-color-brand-primary, #4a90d9);
+			transition: width 0.5s ease;
+		}
+		.running-op-count { font-size: 0.85em; color: var(--theme-color-text-secondary, #666); white-space: nowrap; }
+		.running-op-pending { color: var(--theme-color-text-muted, #888); font-size: 0.85em; font-style: italic; padding: 4px 0; }
+		.completed-op-row { padding: 8px 0; border-bottom: 1px solid var(--theme-color-background-tertiary, #f0f0f0); }
+		.completed-op-row:last-child { border-bottom: none; }
+		.completed-op-header { display: flex; align-items: center; gap: 10px; font-size: 0.9em; margin-bottom: 4px; }
+		.completed-op-name { font-weight: 600; }
+		.completed-op-stats { color: var(--theme-color-text-secondary, #666); font-size: 0.85em; }
+		.completed-op-checkmark { color: var(--theme-color-status-success, #28a745); }
+		.error-op-row { padding: 6px 0; border-bottom: 1px solid var(--theme-color-background-tertiary, #f0f0f0); font-size: 0.9em; }
+		.error-op-row:last-child { border-bottom: none; }
+		.error-op-header { display: flex; align-items: center; gap: 8px; }
+		.error-op-name { font-weight: 600; color: var(--theme-color-status-error, #dc3545); }
+		.error-op-status { font-size: 0.82em; color: var(--theme-color-status-error, #dc3545); }
+		.error-op-message { font-size: 0.82em; color: var(--theme-color-text-muted, #888); margin-top: 2px; padding-left: 18px; }
+	`,
+	Templates: [{
+		Hash: 'DataCloner-StatusDetail',
+		Template: /*html*/`
+<div class="rds-status-detail-body">
+	<div class="rds-status-detail-section">
+		<div class="rds-status-detail-section-title">Throughput</div>
+		<div id="DataCloner-Throughput-Histogram" style="height:120px"></div>
+	</div>
+	<div id="DataCloner-StatusDetail-Container"></div>
+</div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'DataCloner-StatusDetail',
+		TemplateHash:       'DataCloner-StatusDetail',
+		DestinationAddress: '#DataCloner-StatusDetail-Panel'
+	}]
+};

package/source/services/data-cloner/pict-app/views/PictView-DataCloner-Sync.js

@@ -196,7 +196,7 @@ class DataClonerSyncView extends libPictView
 		// --- Summary Cards ---
 		let tmpCardsContainer = document.getElementById('reportSummaryCards');
 		let tmpOutcomeClass = 'outcome-' + pReport.Outcome.toLowerCase();
-		let tmpOutcomeColor = { Success: '#28a745', Partial: '#ffc107', Error: '#dc3545', Stopped: '#6c757d' }[pReport.Outcome] || '#666';
+		let tmpOutcomeColor = { Success: 'var(--theme-color-status-success, #28a745)', Partial: 'var(--theme-color-status-warning, #ffc107)', Error: 'var(--theme-color-status-error, #dc3545)', Stopped: 'var(--theme-color-text-secondary, #6c757d)' }[pReport.Outcome] || 'var(--theme-color-text-secondary, #666)';
 
 		let tmpDurationSec = pReport.RunTimestamps.DurationSeconds || 0;
 		let tmpDurationStr = tmpDurationSec < 60 ? tmpDurationSec + 's' : Math.floor(tmpDurationSec / 60) + 'm ' + (tmpDurationSec % 60) + 's';
@@ -235,13 +235,13 @@ class DataClonerSyncView extends libPictView
 		}
 		else
 		{
-			let tmpHtml = '<h4 style="margin:0 0 8px; color:#dc3545; font-size:0.95em">Anomalies (' + pReport.Anomalies.length + ')</h4>';
+			let tmpHtml = '<h4 style="margin:0 0 8px; color:var(--theme-color-status-error, #dc3545); font-size:0.95em">Anomalies (' + pReport.Anomalies.length + ')</h4>';
 			tmpHtml += '<table class="progress-table">';
 			tmpHtml += '<tr><th>Table</th><th>Type</th><th>Message</th></tr>';
 			for (let i = 0; i < pReport.Anomalies.length; i++)
 			{
 				let tmpAnomaly = pReport.Anomalies[i];
-				let tmpTypeColor = tmpAnomaly.Type === 'Error' ? '#dc3545' : (tmpAnomaly.Type === 'Partial' ? '#ffc107' : '#6c757d');
+				let tmpTypeColor = tmpAnomaly.Type === 'Error' ? 'var(--theme-color-status-error, #dc3545)' : (tmpAnomaly.Type === 'Partial' ? 'var(--theme-color-status-warning, #ffc107)' : 'var(--theme-color-text-secondary, #6c757d)');
 				tmpHtml += '<tr>';
 				tmpHtml += '<td><strong>' + this.pict.providers.DataCloner.escapeHtml(tmpAnomaly.Table) + '</strong></td>';
 				tmpHtml += '<td style="color:' + tmpTypeColor + '">' + tmpAnomaly.Type + '</td>';
@@ -265,7 +265,7 @@ class DataClonerSyncView extends libPictView
 				let tmpTable = pReport.Tables[i];
 				let tmpDur = tmpTable.DurationSeconds < 60 ? tmpTable.DurationSeconds + 's' : Math.floor(tmpTable.DurationSeconds / 60) + 'm ' + (tmpTable.DurationSeconds % 60) + 's';
 				let tmpRecs = tmpTable.Total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-				let tmpStatusColor = { Complete: '#28a745', Error: '#dc3545', Partial: '#ffc107' }[tmpTable.Status] || '#666';
+				let tmpStatusColor = { Complete: 'var(--theme-color-status-success, #28a745)', Error: 'var(--theme-color-status-error, #dc3545)', Partial: 'var(--theme-color-status-warning, #ffc107)' }[tmpTable.Status] || 'var(--theme-color-text-secondary, #666)';
 				tmpHtml += '<tr>';
 				tmpHtml += '<td><strong>' + this.pict.providers.DataCloner.escapeHtml(tmpTable.Name) + '</strong></td>';
 				tmpHtml += '<td>' + tmpDur + '</td>';
@@ -369,11 +369,11 @@ class DataClonerSyncView extends libPictView
 			}
 
 			// Color the progress bar based on status
-			let tmpBarColor = '#28a745'; // green
-			if (pTable.Status === 'Error') tmpBarColor = '#dc3545';
-			else if (pTable.Status === 'Partial') tmpBarColor = '#ffc107';
-			else if (pTable.Status === 'Syncing') tmpBarColor = '#4a90d9';
-			else if (pTable.Status === 'Pending') tmpBarColor = '#adb5bd';
+			let tmpBarColor = 'var(--theme-color-status-success, #28a745)'; // green
+			if (pTable.Status === 'Error') tmpBarColor = 'var(--theme-color-status-error, #dc3545)';
+			else if (pTable.Status === 'Partial') tmpBarColor = 'var(--theme-color-status-warning, #ffc107)';
+			else if (pTable.Status === 'Syncing') tmpBarColor = 'var(--theme-color-brand-primary, #4a90d9)';
+			else if (pTable.Status === 'Pending') tmpBarColor = 'var(--theme-color-text-muted, #adb5bd)';
 
 			// Status badge
 			let tmpStatusBadge = pTable.Status;
@@ -482,24 +482,24 @@ module.exports.default_configuration =
 	CSS: /*css*/`
 .progress-table { width: 100%; border-collapse: collapse; margin-top: 4px; margin-bottom: 4px; }
 .progress-table th, .progress-table td { text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--theme-color-border-light, #eee); font-size: 0.9em; }
-.progress-table th { background: #f8f9fa; font-weight: 600; }
-.progress-table-muted td { color: var(--theme-color-text-muted, #888); padding: 3px 12px; font-size: 0.85em; border-bottom: 1px solid #f4f5f6; }
-.progress-bar-container { width: 120px; height: 16px; background: #e9ecef; border-radius: 8px; overflow: hidden; display: inline-block; vertical-align: middle; }
+.progress-table th { background: var(--theme-color-background-secondary, #f8f9fa); font-weight: 600; }
+.progress-table-muted td { color: var(--theme-color-text-muted, #888); padding: 3px 12px; font-size: 0.85em; border-bottom: 1px solid var(--theme-color-background-secondary, #f4f5f6); }
+.progress-bar-container { width: 120px; height: 16px; background: var(--theme-color-background-tertiary, #e9ecef); border-radius: 8px; overflow: hidden; display: inline-block; vertical-align: middle; }
 .progress-bar-fill { height: 100%; background: var(--theme-color-status-success, #28a745); transition: width 0.3s; }
-.sync-section-header { font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #4a90d9; padding: 10px 0 2px 0; margin-top: 6px; border-top: 1px solid var(--theme-color-border-default, #e0e0e0); }
+.sync-section-header { font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--theme-color-brand-primary, #4a90d9); padding: 10px 0 2px 0; margin-top: 6px; border-top: 1px solid var(--theme-color-border-default, #e0e0e0); }
 .sync-section-header:first-child { border-top: none; margin-top: 10px; }
-.sync-section-header-error { color: #dc3545; }
+.sync-section-header-error { color: var(--theme-color-status-error, #dc3545); }
 .sync-section-header-ok { color: var(--theme-color-status-success, #28a745); }
 .sync-section-count { font-weight: 400; color: var(--theme-color-text-muted, #999); font-size: 0.95em; }
 .sync-section-overflow { font-size: 0.8em; color: var(--theme-color-text-muted, #aaa); padding: 2px 12px 6px; }
 .sync-pending-count { text-align: right; color: var(--theme-color-text-muted, #aaa); font-size: 0.85em; }
-.report-card { background: #f8f9fa; border-radius: 8px; padding: 12px 16px; min-width: 140px; text-align: center; border: 1px solid #e9ecef; }
+.report-card { background: var(--theme-color-background-secondary, #f8f9fa); border-radius: 8px; padding: 12px 16px; min-width: 140px; text-align: center; border: 1px solid var(--theme-color-background-tertiary, #e9ecef); }
 .report-card .card-label { font-size: 0.8em; color: var(--theme-color-text-secondary, #666); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
 .report-card .card-value { font-size: 1.4em; font-weight: 700; }
 .report-card.outcome-success { border-left: 4px solid var(--theme-color-status-success, #28a745); }
-.report-card.outcome-partial { border-left: 4px solid #ffc107; }
-.report-card.outcome-error { border-left: 4px solid #dc3545; }
-.report-card.outcome-stopped { border-left: 4px solid #6c757d; }
+.report-card.outcome-partial { border-left: 4px solid var(--theme-color-status-warning, #ffc107); }
+.report-card.outcome-error { border-left: 4px solid var(--theme-color-status-error, #dc3545); }
+.report-card.outcome-stopped { border-left: 4px solid var(--theme-color-text-secondary, #6c757d); }
 `,
 	Templates:
 	[

package/source/services/data-cloner/pict-app/views/PictView-DataCloner-TopBar-Nav.js

@@ -0,0 +1,42 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class DataClonerTopBarNavView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = DataClonerTopBarNavView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'DataCloner-TopBar-Nav',
+	DefaultRenderable:         'DataCloner-TopBar-Nav',
+	DefaultDestinationAddress: '#Theme-TopBar-Nav',
+	AutoRender:                false,
+	CSS: /*css*/`
+		.rds-nav {
+			display: flex; align-items: center; height: 100%;
+			padding: 0 12px; gap: 8px;
+			color: var(--theme-color-text-on-brand,
+				   var(--theme-color-text-primary, #1a1a1a));
+			font-weight: 500;
+		}
+		.rds-nav-sep { opacity: 0.5; font-weight: 400; margin: 0 2px; }
+		.rds-nav-app { font-weight: 600; opacity: 0.95; }
+	`,
+	Templates: [{
+		Hash: 'DataCloner-TopBar-Nav',
+		Template: /*html*/`<div class="rds-nav"><span class="rds-nav-sep">·</span><span class="rds-nav-app">Data Cloner</span></div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'DataCloner-TopBar-Nav',
+		TemplateHash:       'DataCloner-TopBar-Nav',
+		DestinationAddress: '#Theme-TopBar-Nav'
+	}]
+};

package/source/services/data-cloner/pict-app/views/PictView-DataCloner-TopBar-User.js

@@ -0,0 +1,48 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class DataClonerTopBarUserView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = DataClonerTopBarUserView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'DataCloner-TopBar-User',
+	DefaultRenderable:         'DataCloner-TopBar-User',
+	DefaultDestinationAddress: '#Theme-TopBar-User',
+	AutoRender:                false,
+	CSS: /*css*/`
+		.rds-user { display: flex; align-items: center; height: 100%; gap: 8px; padding: 0 12px; }
+		.rds-user-btn {
+			padding: 4px 8px;
+			border: 1px solid var(--theme-color-border-default, #5E5549);
+			background: transparent;
+			color: var(--theme-color-text-on-brand,
+				   var(--theme-color-text-secondary, #1a1a1a));
+			border-radius: 4px;
+			cursor: pointer;
+			display: inline-flex; align-items: center; justify-content: center;
+			font-size: 1em; line-height: 1;
+		}
+		.rds-user-btn:hover {
+			background: var(--theme-color-background-hover, rgba(255,255,255,0.08));
+		}
+	`,
+	Templates: [{
+		Hash: 'DataCloner-TopBar-User',
+		Template: /*html*/`<div class="rds-user"><button class="rds-user-btn" onclick="_Pict.views['DataCloner-Shell'].toggleSettingsPanel()" title="Settings" aria-label="Settings">{~I:Settings~}</button></div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'DataCloner-TopBar-User',
+		TemplateHash:       'DataCloner-TopBar-User',
+		DestinationAddress: '#Theme-TopBar-User'
+	}]
+};

package/source/services/data-cloner/pict-app/views/PictView-DataCloner-ViewData.js

@@ -123,10 +123,10 @@ module.exports.default_configuration =
 	DefaultDestinationAddress: '#DataCloner-Section-ViewData',
 	CSS: /*css*/`
 .data-table { width: 100%; border-collapse: collapse; font-size: 0.8em; font-family: monospace; }
-.data-table th { background: #f8f9fa; font-weight: 600; text-align: left; padding: 4px 8px; border: 1px solid var(--theme-color-border-default, #ddd); white-space: nowrap; position: sticky; top: 0; }
+.data-table th { background: var(--theme-color-background-secondary, #f8f9fa); font-weight: 600; text-align: left; padding: 4px 8px; border: 1px solid var(--theme-color-border-default, #ddd); white-space: nowrap; position: sticky; top: 0; }
 .data-table td { padding: 4px 8px; border: 1px solid var(--theme-color-border-light, #eee); white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
 .data-table tr:nth-child(even) { background: var(--theme-color-background-secondary, #fafafa); }
-.data-table tr:hover { background: #f0f7ff; }
+.data-table tr:hover { background: var(--theme-color-background-hover, #f0f7ff); }
 `,
 	Templates:
 	[