feat(web-appstore): add an App Store view for quick service deployment from curated templates
This commit is contained in:
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' });
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user