retold-facto 0.0.4

package/source/services/web-app/pict-app-full/views/PictView-Facto-Full-Connections.js

@@ -0,0 +1,340 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "Facto-Full-Connections",
+
+	DefaultRenderable: "Facto-Full-Connections-Content",
+	DefaultDestinationAddress: "#Facto-Full-Content-Container",
+
+	AutoRender: false,
+
+	CSS: `
+		.facto-conn-form {
+			display: none;
+			padding: 1em;
+			background: var(--facto-bg-surface, #fcf8f0);
+			border: 1px solid var(--facto-border, #d6c8ae);
+			border-radius: 8px;
+			margin-bottom: 1em;
+		}
+		.facto-conn-form.active {
+			display: block;
+		}
+		.facto-conn-form-grid {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			gap: 0.6em;
+		}
+		.facto-conn-form-grid label {
+			font-size: 0.78em;
+			font-weight: 600;
+			color: var(--facto-text-secondary, #786848);
+			display: block;
+			margin-bottom: 0.2em;
+		}
+		.facto-conn-form-grid input,
+		.facto-conn-form-grid select {
+			width: 100%;
+			padding: 0.4em 0.6em;
+			font-size: 0.85em;
+			border: 1px solid var(--facto-border, #d6c8ae);
+			border-radius: 4px;
+			background: var(--facto-bg-base, #f6f0e4);
+			color: var(--facto-text-primary, #3e2f1a);
+		}
+		.facto-conn-form-actions {
+			grid-column: span 2;
+			display: flex;
+			gap: 0.5em;
+			margin-top: 0.5em;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "Facto-Full-Connections-Template",
+			Template: /*html*/`
+<div class="facto-content">
+	<div class="facto-content-header">
+		<h1>Store Connections</h1>
+		<p>Manage database and storage connections used by projections.</p>
+	</div>
+
+	<div class="facto-section">
+		<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:1em;">
+			<div class="facto-section-title" style="margin:0;">Connections</div>
+			<button class="facto-btn facto-btn-primary facto-btn-small" onclick="{~P~}.views['Facto-Full-Connections'].toggleConnectionForm()">+ Add Connection</button>
+		</div>
+
+		<div id="Facto-Conn-Form" class="facto-conn-form">
+			<div class="facto-conn-form-grid">
+				<div>
+					<label>Connection Name</label>
+					<input type="text" id="Facto-Conn-Name" placeholder="e.g. Production MySQL">
+				</div>
+				<div>
+					<label>Type</label>
+					<select id="Facto-Conn-Type" onchange="{~P~}.views['Facto-Full-Connections'].updateConnectionFormFields()">
+						<option value="MySQL">MySQL</option>
+						<option value="PostgreSQL">PostgreSQL</option>
+						<option value="MSSQL">MSSQL</option>
+						<option value="SQLite">SQLite</option>
+						<option value="Solr">Solr</option>
+						<option value="RocksDB">RocksDB</option>
+					</select>
+				</div>
+				<div id="Facto-Conn-FilePath-Wrap" style="display:none;">
+					<label>File Path</label>
+					<input type="text" id="Facto-Conn-FilePath" placeholder="/path/to/database.sqlite">
+				</div>
+				<div id="Facto-Conn-Host-Wrap">
+					<label>Host</label>
+					<input type="text" id="Facto-Conn-Host" placeholder="localhost">
+				</div>
+				<div id="Facto-Conn-Port-Wrap">
+					<label>Port</label>
+					<input type="number" id="Facto-Conn-Port" placeholder="3306">
+				</div>
+				<div id="Facto-Conn-User-Wrap">
+					<label>User</label>
+					<input type="text" id="Facto-Conn-User" placeholder="root">
+				</div>
+				<div id="Facto-Conn-Password-Wrap">
+					<label>Password</label>
+					<input type="password" id="Facto-Conn-Password" placeholder="password">
+				</div>
+				<div id="Facto-Conn-Database-Wrap">
+					<label>Database</label>
+					<input type="text" id="Facto-Conn-Database" placeholder="my_database">
+				</div>
+				<div class="facto-conn-form-actions">
+					<button class="facto-btn facto-btn-primary facto-btn-small" onclick="{~P~}.views['Facto-Full-Connections'].addConnection()">Save Connection</button>
+					<button class="facto-btn facto-btn-secondary facto-btn-small" onclick="{~P~}.views['Facto-Full-Connections'].toggleConnectionForm()">Cancel</button>
+				</div>
+			</div>
+		</div>
+
+		<div id="Facto-Conn-List"></div>
+	</div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "Facto-Full-Connections-Content",
+			TemplateHash: "Facto-Full-Connections-Template",
+			DestinationAddress: "#Facto-Full-Content-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+
+class FactoFullConnectionsView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+	}
+
+	onAfterRender()
+	{
+		// Load connections from the API
+		this.pict.providers.Facto.loadStoreConnections().then(
+			() =>
+			{
+				this.refreshConnectionList();
+			}).catch(
+			(pError) =>
+			{
+				this.pict.views['Pict-Section-Modal'].toast('Error loading connections: ' + pError.message, {type: 'error'});
+			});
+
+		return super.onAfterRender();
+	}
+
+	toggleConnectionForm()
+	{
+		let tmpForm = document.getElementById('Facto-Conn-Form');
+		if (tmpForm)
+		{
+			tmpForm.classList.toggle('active');
+			if (tmpForm.classList.contains('active'))
+			{
+				this.updateConnectionFormFields();
+			}
+		}
+	}
+
+	updateConnectionFormFields()
+	{
+		let tmpType = this.pict.providers.FactoUI.getVal('Facto-Conn-Type');
+		let tmpIsFileBased = (tmpType === 'SQLite' || tmpType === 'RocksDB');
+
+		let tmpFilePathWrap = document.getElementById('Facto-Conn-FilePath-Wrap');
+		let tmpHostWrap = document.getElementById('Facto-Conn-Host-Wrap');
+		let tmpPortWrap = document.getElementById('Facto-Conn-Port-Wrap');
+		let tmpUserWrap = document.getElementById('Facto-Conn-User-Wrap');
+		let tmpPasswordWrap = document.getElementById('Facto-Conn-Password-Wrap');
+		let tmpDatabaseWrap = document.getElementById('Facto-Conn-Database-Wrap');
+
+		if (tmpFilePathWrap) tmpFilePathWrap.style.display = tmpIsFileBased ? '' : 'none';
+		if (tmpHostWrap) tmpHostWrap.style.display = tmpIsFileBased ? 'none' : '';
+		if (tmpPortWrap) tmpPortWrap.style.display = tmpIsFileBased ? 'none' : '';
+		if (tmpUserWrap) tmpUserWrap.style.display = tmpIsFileBased ? 'none' : '';
+		if (tmpPasswordWrap) tmpPasswordWrap.style.display = tmpIsFileBased ? 'none' : '';
+		if (tmpDatabaseWrap) tmpDatabaseWrap.style.display = tmpIsFileBased ? 'none' : '';
+	}
+
+	refreshConnectionList()
+	{
+		let tmpContainer = document.getElementById('Facto-Conn-List');
+		if (!tmpContainer) return;
+
+		if (this.pict.AppData.Facto.StoreConnections.length === 0)
+		{
+			tmpContainer.innerHTML = '<div class="facto-card" style="text-align:center; padding:2em; color:var(--facto-text-tertiary);">No connections configured. Add one to get started.</div>';
+			return;
+		}
+
+		let tmpHtml = '<table class="facto-table"><thead><tr>';
+		tmpHtml += '<th>Name</th><th>Type</th><th>Status</th><th>Actions</th>';
+		tmpHtml += '</tr></thead><tbody>';
+
+		for (let i = 0; i < this.pict.AppData.Facto.StoreConnections.length; i++)
+		{
+			let tmpConn = this.pict.AppData.Facto.StoreConnections[i];
+			let tmpStatusClass = (tmpConn.Status || 'Untested').toLowerCase();
+
+			tmpHtml += '<tr>';
+			tmpHtml += '<td><strong>' + (tmpConn.Name || '\u2014') + '</strong></td>';
+			tmpHtml += '<td>' + (tmpConn.Type || '\u2014') + '</td>';
+			tmpHtml += '<td><span class="facto-status-badge ' + tmpStatusClass + '">' + (tmpConn.Status || 'Untested') + '</span></td>';
+			tmpHtml += '<td>';
+			tmpHtml += '<button class="facto-btn facto-btn-primary facto-btn-small" onclick="pict.views[\'Facto-Full-Connections\'].testConnection(' + tmpConn.IDStoreConnection + ')">Test</button> ';
+			tmpHtml += '<button class="facto-btn facto-btn-secondary facto-btn-small" onclick="pict.views[\'Facto-Full-Connections\'].deleteConnection(' + tmpConn.IDStoreConnection + ')">Delete</button>';
+			tmpHtml += '</td>';
+			tmpHtml += '</tr>';
+		}
+
+		tmpHtml += '</tbody></table>';
+		tmpContainer.innerHTML = tmpHtml;
+	}
+
+	addConnection()
+	{
+		let tmpName = this.pict.providers.FactoUI.getVal('Facto-Conn-Name');
+		let tmpType = this.pict.providers.FactoUI.getVal('Facto-Conn-Type');
+
+		if (!tmpName)
+		{
+			this.pict.views['Pict-Section-Modal'].toast('Connection name is required.', {type: 'warning'});
+			return;
+		}
+
+		let tmpIsFileBased = (tmpType === 'SQLite' || tmpType === 'RocksDB');
+		let tmpConfig = {};
+
+		if (tmpIsFileBased)
+		{
+			tmpConfig.SQLiteFilePath = this.pict.providers.FactoUI.getVal('Facto-Conn-FilePath');
+			if (!tmpConfig.SQLiteFilePath)
+			{
+				this.pict.views['Pict-Section-Modal'].toast('File path is required for ' + tmpType + ' connections.', {type: 'warning'});
+				return;
+			}
+		}
+		else
+		{
+			tmpConfig.host = this.pict.providers.FactoUI.getVal('Facto-Conn-Host');
+			tmpConfig.server = tmpConfig.host;
+			tmpConfig.port = parseInt(this.pict.providers.FactoUI.getVal('Facto-Conn-Port')) || 0;
+			tmpConfig.user = this.pict.providers.FactoUI.getVal('Facto-Conn-User');
+			tmpConfig.password = this.pict.providers.FactoUI.getVal('Facto-Conn-Password');
+			tmpConfig.database = this.pict.providers.FactoUI.getVal('Facto-Conn-Database');
+		}
+
+		this.pict.providers.Facto.createStoreConnection(
+		{
+			Name: tmpName,
+			Type: tmpType,
+			Config: tmpConfig
+		}).then(
+			(pResponse) =>
+			{
+				if (pResponse && pResponse.Error)
+				{
+					this.pict.views['Pict-Section-Modal'].toast('Error: ' + pResponse.Error, {type: 'error'});
+					return;
+				}
+
+				// Reload connections
+				this.pict.providers.Facto.loadStoreConnections().then(
+					(pResult) =>
+					{
+						
+						this.refreshConnectionList();
+						this.toggleConnectionForm();
+
+						// Clear form
+						let tmpFields = ['Name', 'Host', 'Port', 'User', 'Password', 'Database', 'FilePath'];
+						for (let i = 0; i < tmpFields.length; i++)
+						{
+							let tmpEl = document.getElementById('Facto-Conn-' + tmpFields[i]);
+							if (tmpEl) tmpEl.value = '';
+						}
+					});
+			});
+	}
+
+	testConnection(pIDStoreConnection)
+	{
+		this.pict.providers.Facto.testStoreConnection(pIDStoreConnection).then(
+			(pResponse) =>
+			{
+				// Reload connections to get updated status
+				this.pict.providers.Facto.loadStoreConnections().then(
+					(pResult) =>
+					{
+						
+						this.refreshConnectionList();
+
+						if (pResponse && pResponse.Success)
+						{
+							this.pict.views['Pict-Section-Modal'].toast('Connection test succeeded!', {type: 'success'});
+						}
+						else
+						{
+							this.pict.views['Pict-Section-Modal'].toast('Connection test failed: ' + (pResponse && pResponse.Error ? pResponse.Error : 'Unknown error'), {type: 'error'});
+						}
+					});
+			});
+	}
+
+	async deleteConnection(pIDStoreConnection)
+	{
+		let tmpConfirmed = await this.pict.views['Pict-Section-Modal'].confirm('Delete this connection?', { title: 'Delete Connection', confirmLabel: 'Delete', dangerous: true });
+		if (!tmpConfirmed) return;
+
+		this.pict.providers.Facto.deleteStoreConnection(pIDStoreConnection).then(
+			() =>
+			{
+				this.pict.providers.Facto.loadStoreConnections().then(
+					(pResult) =>
+					{
+						
+						this.refreshConnectionList();
+					});
+			});
+	}
+
+}
+
+module.exports = FactoFullConnectionsView;
+
+module.exports.default_configuration = _ViewConfiguration;

package/source/services/web-app/pict-app-full/views/PictView-Facto-Full-Dashboard.js

@@ -0,0 +1,149 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "Facto-Full-Dashboard",
+
+	DefaultRenderable: "Facto-Full-Dashboard-Content",
+	DefaultDestinationAddress: "#Facto-Full-Content-Container",
+
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.facto-dashboard-stat {
+			text-align: center;
+		}
+
+		.facto-dashboard-stat-value {
+			font-size: 2em;
+			font-weight: 700;
+			color: var(--facto-text-heading);
+			line-height: 1.2;
+		}
+
+		.facto-dashboard-stat-label {
+			font-size: 0.85em;
+			color: var(--facto-text-secondary);
+			margin-top: 0.3em;
+		}
+
+		.facto-dashboard-actions {
+			display: flex;
+			gap: 0.75em;
+			flex-wrap: wrap;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "Facto-Full-Dashboard-Template",
+			Template: /*html*/`
+<div class="facto-content">
+	<div class="facto-content-header">
+		<h1>Dashboard</h1>
+		<p>Retold Facto data warehouse overview.</p>
+	</div>
+
+	<div class="facto-card-grid" id="Facto-Full-Dashboard-Cards">
+		<div class="facto-card facto-dashboard-stat">
+			<div class="facto-dashboard-stat-value" id="Facto-Full-Dash-SourceCount">--</div>
+			<div class="facto-dashboard-stat-label">Sources</div>
+		</div>
+		<div class="facto-card facto-dashboard-stat">
+			<div class="facto-dashboard-stat-value" id="Facto-Full-Dash-DatasetCount">--</div>
+			<div class="facto-dashboard-stat-label">Datasets</div>
+		</div>
+		<div class="facto-card facto-dashboard-stat">
+			<div class="facto-dashboard-stat-value" id="Facto-Full-Dash-RecordCount">--</div>
+			<div class="facto-dashboard-stat-label">Records</div>
+		</div>
+		<div class="facto-card facto-dashboard-stat">
+			<div class="facto-dashboard-stat-value" id="Facto-Full-Dash-IngestCount">--</div>
+			<div class="facto-dashboard-stat-label">Ingest Jobs</div>
+		</div>
+		<div class="facto-card facto-dashboard-stat">
+			<div class="facto-dashboard-stat-value" id="Facto-Full-Dash-CatalogCount">--</div>
+			<div class="facto-dashboard-stat-label">Catalog Entries</div>
+		</div>
+	</div>
+
+	<div class="facto-section" style="margin-top:2em;">
+		<div class="facto-section-title">Quick Actions</div>
+		<div class="facto-dashboard-actions">
+			<button class="facto-btn facto-btn-primary" onclick="{~P~}.PictApplication.navigateTo('/SourceResearch')">Source Research</button>
+			<button class="facto-btn facto-btn-primary" onclick="{~P~}.PictApplication.navigateTo('/Sources')">Manage Sources</button>
+			<button class="facto-btn facto-btn-primary" onclick="{~P~}.PictApplication.navigateTo('/Records')">Browse Records</button>
+			<button class="facto-btn facto-btn-secondary" onclick="window.location.href='/simple/'">Simple View</button>
+		</div>
+	</div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "Facto-Full-Dashboard-Content",
+			TemplateHash: "Facto-Full-Dashboard-Template",
+			DestinationAddress: "#Facto-Full-Content-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+
+class FactoFullDashboardView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
+	{
+		let tmpProvider = this.pict.providers.Facto;
+
+		// Load counts in parallel
+		tmpProvider.loadSources().then(
+			() =>
+			{
+				let tmpEl = document.getElementById('Facto-Full-Dash-SourceCount');
+				if (tmpEl) tmpEl.textContent = (this.pict.AppData.Facto.Sources || []).length;
+			});
+
+		tmpProvider.loadDatasets().then(
+			() =>
+			{
+				let tmpEl = document.getElementById('Facto-Full-Dash-DatasetCount');
+				if (tmpEl) tmpEl.textContent = (this.pict.AppData.Facto.Datasets || []).length;
+			});
+
+		tmpProvider.loadRecords().then(
+			() =>
+			{
+				let tmpEl = document.getElementById('Facto-Full-Dash-RecordCount');
+				if (tmpEl) tmpEl.textContent = (this.pict.AppData.Facto.Records || []).length;
+			});
+
+		tmpProvider.loadIngestJobs().then(
+			() =>
+			{
+				let tmpEl = document.getElementById('Facto-Full-Dash-IngestCount');
+				if (tmpEl) tmpEl.textContent = (this.pict.AppData.Facto.IngestJobs || []).length;
+			});
+
+		tmpProvider.loadCatalogEntries().then(
+			() =>
+			{
+				let tmpEl = document.getElementById('Facto-Full-Dash-CatalogCount');
+				if (tmpEl) tmpEl.textContent = (this.pict.AppData.Facto.CatalogEntries || []).length;
+			});
+
+		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
+	}
+}
+
+module.exports = FactoFullDashboardView;
+
+module.exports.default_configuration = _ViewConfiguration;