feat(web-appstore): add an App Store view for quick service deployment from curated templates
This commit is contained in:
@@ -1,5 +1,13 @@
|
||||
# Changelog
|
||||
|
||||
## 2026-03-18 - 1.22.0 - feat(web-appstore)
|
||||
add an App Store view for quick service deployment from curated templates
|
||||
|
||||
- adds a new App Store tab to the web UI with curated Docker app templates
|
||||
- passes selected app templates through UI state into the services view for quick deployment
|
||||
- supports quick deploy creation with prefilled image, port, environment variables, and optional platform service flags
|
||||
- updates @serve.zone/catalog to ^2.8.0 to support the new app store view
|
||||
|
||||
## 2026-03-18 - 1.21.0 - feat(opsserver)
|
||||
add container workspace API and backend execution environment for services
|
||||
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
"@api.global/typedsocket": "^4.1.2",
|
||||
"@design.estate/dees-catalog": "^3.43.3",
|
||||
"@design.estate/dees-element": "^2.1.6",
|
||||
"@serve.zone/catalog": "^2.7.0"
|
||||
"@serve.zone/catalog": "^2.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@git.zone/tsbundle": "^2.9.0",
|
||||
|
||||
10
pnpm-lock.yaml
generated
10
pnpm-lock.yaml
generated
@@ -21,8 +21,8 @@ importers:
|
||||
specifier: ^2.1.6
|
||||
version: 2.2.3
|
||||
'@serve.zone/catalog':
|
||||
specifier: ^2.7.0
|
||||
version: 2.7.0(@tiptap/pm@2.27.2)
|
||||
specifier: ^2.8.0
|
||||
version: 2.8.0(@tiptap/pm@2.27.2)
|
||||
devDependencies:
|
||||
'@git.zone/tsbundle':
|
||||
specifier: ^2.9.0
|
||||
@@ -839,8 +839,8 @@ packages:
|
||||
'@sec-ant/readable-stream@0.4.1':
|
||||
resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
|
||||
|
||||
'@serve.zone/catalog@2.7.0':
|
||||
resolution: {integrity: sha512-BSfLi9BZE5wvu5Dxh0p/mM9bE+9lf35PGHRZ1Cw/+YpWxOfIFPTZKkBz2OUn3yctWw+V7l1VBBYuLX1bVCKFfA==}
|
||||
'@serve.zone/catalog@2.8.0':
|
||||
resolution: {integrity: sha512-p0ES14JwUoJE88DBtLSHcCfFPVa0vKhvHnQLaAY3OC15kfheNKidi1SwTFyMh43jj0ZNi4Lecc3W02wG6sasHw==}
|
||||
|
||||
'@tempfix/idb@8.0.3':
|
||||
resolution: {integrity: sha512-hPJQKO7+oAIY+pDNImrZ9QAINbz9KmwT+yO4iRVwdPanok2YKpaUxdJzIvCUwY0YgAawlvYdffbLvRLV5hbs2g==}
|
||||
@@ -3477,7 +3477,7 @@ snapshots:
|
||||
|
||||
'@sec-ant/readable-stream@0.4.1': {}
|
||||
|
||||
'@serve.zone/catalog@2.7.0(@tiptap/pm@2.27.2)':
|
||||
'@serve.zone/catalog@2.8.0(@tiptap/pm@2.27.2)':
|
||||
dependencies:
|
||||
'@design.estate/dees-catalog': 3.48.5(@tiptap/pm@2.27.2)
|
||||
'@design.estate/dees-domtools': 2.5.1
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@serve.zone/onebox',
|
||||
version: '1.21.0',
|
||||
version: '1.22.0',
|
||||
description: 'Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers'
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@serve.zone/onebox',
|
||||
version: '1.21.0',
|
||||
version: '1.22.0',
|
||||
description: 'Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers'
|
||||
}
|
||||
|
||||
@@ -58,6 +58,7 @@ export interface IUiState {
|
||||
activeView: string;
|
||||
autoRefresh: boolean;
|
||||
refreshInterval: number;
|
||||
pendingAppTemplate?: any;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
|
||||
@@ -38,6 +38,7 @@ export class ObAppShell extends DeesElement {
|
||||
|
||||
private viewTabs = [
|
||||
{ name: 'Dashboard', iconName: 'lucide:layoutDashboard', element: (async () => (await import('./ob-view-dashboard.js')).ObViewDashboard)() },
|
||||
{ name: 'App Store', iconName: 'lucide:store', element: (async () => (await import('./ob-view-appstore.js')).ObViewAppStore)() },
|
||||
{ name: 'Services', iconName: 'lucide:boxes', element: (async () => (await import('./ob-view-services.js')).ObViewServices)() },
|
||||
{ name: 'Network', iconName: 'lucide:network', element: (async () => (await import('./ob-view-network.js')).ObViewNetwork)() },
|
||||
{ name: 'Registries', iconName: 'lucide:package', element: (async () => (await import('./ob-view-registries.js')).ObViewRegistries)() },
|
||||
|
||||
220
ts_web/elements/ob-view-appstore.ts
Normal file
220
ts_web/elements/ob-view-appstore.ts
Normal file
@@ -0,0 +1,220 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import * as shared from './shared/index.js';
|
||||
import * as appstate from '../appstate.js';
|
||||
import * as interfaces from '../../ts_interfaces/index.js';
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
state,
|
||||
css,
|
||||
cssManager,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
// App template definitions — curated Docker apps
|
||||
const appTemplates = [
|
||||
{
|
||||
id: 'nginx',
|
||||
name: 'Nginx',
|
||||
description: 'High-performance web server and reverse proxy. Lightweight, fast, and battle-tested.',
|
||||
category: 'Web Server',
|
||||
iconName: 'globe',
|
||||
image: 'nginx:alpine',
|
||||
port: 80,
|
||||
},
|
||||
{
|
||||
id: 'wordpress',
|
||||
name: 'WordPress',
|
||||
description: 'The world\'s most popular content management system. Powers over 40% of the web.',
|
||||
category: 'CMS',
|
||||
iconName: 'file-text',
|
||||
image: 'wordpress:latest',
|
||||
port: 80,
|
||||
enableMongoDB: false,
|
||||
envVars: [
|
||||
{ key: 'WORDPRESS_DB_HOST', value: '', description: 'Database host', required: true },
|
||||
{ key: 'WORDPRESS_DB_USER', value: 'wordpress', description: 'Database user' },
|
||||
{ key: 'WORDPRESS_DB_PASSWORD', value: '', description: 'Database password', required: true },
|
||||
{ key: 'WORDPRESS_DB_NAME', value: 'wordpress', description: 'Database name' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'ghost',
|
||||
name: 'Ghost',
|
||||
description: 'Modern publishing platform for creating professional blogs and newsletters.',
|
||||
category: 'CMS',
|
||||
iconName: 'book-open',
|
||||
image: 'ghost:latest',
|
||||
port: 2368,
|
||||
envVars: [
|
||||
{ key: 'url', value: 'http://localhost:2368', description: 'Public URL of the blog' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'gitea',
|
||||
name: 'Gitea',
|
||||
description: 'Lightweight self-hosted Git service. Easy to install and maintain.',
|
||||
category: 'Dev Tools',
|
||||
iconName: 'git-branch',
|
||||
image: 'gitea/gitea:latest',
|
||||
port: 3000,
|
||||
},
|
||||
{
|
||||
id: 'nextcloud',
|
||||
name: 'Nextcloud',
|
||||
description: 'Self-hosted file sync and share platform. Your own private cloud.',
|
||||
category: 'Storage',
|
||||
iconName: 'package',
|
||||
image: 'nextcloud:latest',
|
||||
port: 80,
|
||||
},
|
||||
{
|
||||
id: 'grafana',
|
||||
name: 'Grafana',
|
||||
description: 'Open-source observability platform for metrics, logs, and traces visualization.',
|
||||
category: 'Monitoring',
|
||||
iconName: 'monitor',
|
||||
image: 'grafana/grafana:latest',
|
||||
port: 3000,
|
||||
envVars: [
|
||||
{ key: 'GF_SECURITY_ADMIN_PASSWORD', value: 'admin', description: 'Admin password' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'uptime-kuma',
|
||||
name: 'Uptime Kuma',
|
||||
description: 'Self-hosted monitoring tool. Beautiful UI for tracking uptime of services.',
|
||||
category: 'Monitoring',
|
||||
iconName: 'monitor',
|
||||
image: 'louislam/uptime-kuma:latest',
|
||||
port: 3001,
|
||||
},
|
||||
{
|
||||
id: 'plausible',
|
||||
name: 'Plausible Analytics',
|
||||
description: 'Privacy-friendly web analytics. No cookies, GDPR compliant by design.',
|
||||
category: 'Analytics',
|
||||
iconName: 'monitor',
|
||||
image: 'plausible/analytics:latest',
|
||||
port: 8000,
|
||||
enableClickHouse: true,
|
||||
},
|
||||
{
|
||||
id: 'vaultwarden',
|
||||
name: 'Vaultwarden',
|
||||
description: 'Lightweight Bitwarden-compatible password manager server.',
|
||||
category: 'Security',
|
||||
iconName: 'shield',
|
||||
image: 'vaultwarden/server:latest',
|
||||
port: 80,
|
||||
},
|
||||
{
|
||||
id: 'n8n',
|
||||
name: 'N8N',
|
||||
description: 'Workflow automation tool. Connect anything to everything with a visual editor.',
|
||||
category: 'Automation',
|
||||
iconName: 'server',
|
||||
image: 'n8nio/n8n:latest',
|
||||
port: 5678,
|
||||
},
|
||||
{
|
||||
id: 'mattermost',
|
||||
name: 'Mattermost',
|
||||
description: 'Open-source Slack alternative for team communication and collaboration.',
|
||||
category: 'Communication',
|
||||
iconName: 'mail',
|
||||
image: 'mattermost/mattermost-team-edition:latest',
|
||||
port: 8065,
|
||||
},
|
||||
{
|
||||
id: 'portainer',
|
||||
name: 'Portainer',
|
||||
description: 'Docker management UI. Monitor and manage containers from a web interface.',
|
||||
category: 'Dev Tools',
|
||||
iconName: 'package',
|
||||
image: 'portainer/portainer-ce:latest',
|
||||
port: 9000,
|
||||
},
|
||||
{
|
||||
id: 'redis',
|
||||
name: 'Redis',
|
||||
description: 'In-memory data store used as database, cache, and message broker.',
|
||||
category: 'Database',
|
||||
iconName: 'database',
|
||||
image: 'redis:alpine',
|
||||
port: 6379,
|
||||
},
|
||||
{
|
||||
id: 'postgres',
|
||||
name: 'PostgreSQL',
|
||||
description: 'Advanced open-source relational database. Reliable and feature-rich.',
|
||||
category: 'Database',
|
||||
iconName: 'database',
|
||||
image: 'postgres:16-alpine',
|
||||
port: 5432,
|
||||
envVars: [
|
||||
{ key: 'POSTGRES_PASSWORD', value: '', description: 'Superuser password', required: true },
|
||||
{ key: 'POSTGRES_USER', value: 'postgres', description: 'Superuser name' },
|
||||
{ key: 'POSTGRES_DB', value: 'postgres', description: 'Default database name' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'mariadb',
|
||||
name: 'MariaDB',
|
||||
description: 'Community-developed fork of MySQL. Drop-in replacement with enhanced features.',
|
||||
category: 'Database',
|
||||
iconName: 'database',
|
||||
image: 'mariadb:latest',
|
||||
port: 3306,
|
||||
envVars: [
|
||||
{ key: 'MARIADB_ROOT_PASSWORD', value: '', description: 'Root password', required: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'adminer',
|
||||
name: 'Adminer',
|
||||
description: 'Database management tool in a single PHP file. Supports MySQL, PostgreSQL, SQLite.',
|
||||
category: 'Dev Tools',
|
||||
iconName: 'database',
|
||||
image: 'adminer:latest',
|
||||
port: 8080,
|
||||
},
|
||||
];
|
||||
|
||||
@customElement('ob-view-appstore')
|
||||
export class ObViewAppStore extends DeesElement {
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
shared.viewHostCss,
|
||||
css``,
|
||||
];
|
||||
|
||||
async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<ob-sectionheading>App Store</ob-sectionheading>
|
||||
<sz-app-store-view
|
||||
.apps=${appTemplates}
|
||||
@deploy-app=${(e: CustomEvent) => this.handleDeployApp(e)}
|
||||
></sz-app-store-view>
|
||||
`;
|
||||
}
|
||||
|
||||
private handleDeployApp(e: CustomEvent) {
|
||||
const app = e.detail?.app;
|
||||
if (!app) return;
|
||||
|
||||
// Store the template in appstate so the services create view can pre-fill
|
||||
appstate.uiStatePart.setState({
|
||||
...appstate.uiStatePart.getState(),
|
||||
pendingAppTemplate: app,
|
||||
});
|
||||
|
||||
// Navigate to Services tab — the services view will detect the pending template
|
||||
appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, { view: 'services' });
|
||||
}
|
||||
}
|
||||
@@ -139,6 +139,9 @@ export class ObViewServices extends DeesElement {
|
||||
@state()
|
||||
accessor workspaceOpen: boolean = false;
|
||||
|
||||
@state()
|
||||
accessor pendingTemplate: any = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
@@ -216,13 +219,23 @@ export class ObViewServices extends DeesElement {
|
||||
const state = appstate.servicesStatePart.getState();
|
||||
if (state.currentPlatformService) {
|
||||
const type = state.currentPlatformService.type;
|
||||
// Clear the selection so it doesn't persist on next visit
|
||||
appstate.servicesStatePart.setState({
|
||||
...appstate.servicesStatePart.getState(),
|
||||
currentPlatformService: null,
|
||||
});
|
||||
this.navigateToPlatformDetail(type);
|
||||
}
|
||||
|
||||
// If an app template was selected from the App Store, switch to create view
|
||||
const uiState = appstate.uiStatePart.getState();
|
||||
if (uiState.pendingAppTemplate) {
|
||||
this.pendingTemplate = uiState.pendingAppTemplate;
|
||||
appstate.uiStatePart.setState({
|
||||
...appstate.uiStatePart.getState(),
|
||||
pendingAppTemplate: undefined,
|
||||
});
|
||||
this.currentView = 'create';
|
||||
}
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
@@ -309,7 +322,63 @@ export class ObViewServices extends DeesElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private async deployFromTemplate(template: any): Promise<void> {
|
||||
const name = template.id || template.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
|
||||
const envVars: Record<string, string> = {};
|
||||
if (template.envVars) {
|
||||
for (const ev of template.envVars) {
|
||||
if (ev.key && ev.value) envVars[ev.key] = ev.value;
|
||||
}
|
||||
}
|
||||
const serviceConfig: interfaces.data.IServiceCreate = {
|
||||
name,
|
||||
image: template.image,
|
||||
port: template.port || 80,
|
||||
envVars,
|
||||
enableMongoDB: template.enableMongoDB || false,
|
||||
enableS3: template.enableS3 || false,
|
||||
enableClickHouse: template.enableClickHouse || false,
|
||||
};
|
||||
await appstate.servicesStatePart.dispatchAction(appstate.createServiceAction, {
|
||||
config: serviceConfig,
|
||||
});
|
||||
this.pendingTemplate = null;
|
||||
this.currentView = 'list';
|
||||
}
|
||||
|
||||
private renderCreateView(): TemplateResult {
|
||||
// If we have a pending app template from the App Store, show a quick-deploy confirmation
|
||||
if (this.pendingTemplate) {
|
||||
const t = this.pendingTemplate;
|
||||
return html`
|
||||
<ob-sectionheading>Deploy ${t.name}</ob-sectionheading>
|
||||
<div style="max-width: 600px; margin: 0 auto;">
|
||||
<div style="background: var(--ci-shade-1, #09090b); border: 1px solid var(--ci-shade-2, #27272a); border-radius: 8px; padding: 24px; margin-bottom: 16px;">
|
||||
<h3 style="margin: 0 0 8px 0; font-size: 18px;">${t.name}</h3>
|
||||
<p style="margin: 0 0 16px 0; color: var(--ci-shade-5, #a1a1aa); font-size: 14px;">${t.description}</p>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px;">
|
||||
<div><span style="color: var(--ci-shade-5, #a1a1aa);">Image:</span> <strong>${t.image}</strong></div>
|
||||
<div><span style="color: var(--ci-shade-5, #a1a1aa);">Port:</span> <strong>${t.port}</strong></div>
|
||||
<div><span style="color: var(--ci-shade-5, #a1a1aa);">Service Name:</span> <strong>${t.id}</strong></div>
|
||||
<div><span style="color: var(--ci-shade-5, #a1a1aa);">Category:</span> <strong>${t.category}</strong></div>
|
||||
</div>
|
||||
${t.enableMongoDB || t.enableS3 || t.enableClickHouse ? html`
|
||||
<div style="margin-top: 12px; font-size: 13px; color: var(--ci-shade-5, #a1a1aa);">
|
||||
Platform Services:
|
||||
${t.enableMongoDB ? html`<span style="margin-right: 8px;">MongoDB</span>` : ''}
|
||||
${t.enableS3 ? html`<span style="margin-right: 8px;">S3</span>` : ''}
|
||||
${t.enableClickHouse ? html`<span>ClickHouse</span>` : ''}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
<div style="display: flex; gap: 12px; justify-content: flex-end;">
|
||||
<button class="deploy-button" style="background: transparent; border: 1px solid var(--ci-shade-2, #27272a); color: inherit;" @click=${() => { this.pendingTemplate = null; this.currentView = 'list'; }}>Cancel</button>
|
||||
<button class="deploy-button" @click=${() => this.deployFromTemplate(t)}>Deploy ${t.name}</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<ob-sectionheading>Create Service</ob-sectionheading>
|
||||
<sz-service-create-view
|
||||
|
||||
Reference in New Issue
Block a user