serve.zone/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(service-create-view): add platform service toggles for MongoDB, S3, and ClickHouse provisioning

Browse Source
This commit is contained in:
Jürgen Kunz
2026-03-16 11:44:44 +00:00
parent d5c265860c
commit 567551b544
3 changed files with 200 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
changelog.md
View File

@@ -1,5 +1,12 @@
# Changelog
## 2026-03-16 - 2.6.0 - feat(service-create-view)
add platform service toggles for MongoDB, S3, and ClickHouse provisioning
- Adds a new Platform Services section to the service creation view with dedicated toggles for managed infrastructure dependencies.
- Includes MongoDB, S3-compatible storage, and ClickHouse selections in the emitted create-service configuration payload.
- Resets selected platform services after form submission to keep create flow state consistent.
## 2026-02-23 - 2.5.0 - feat(sz-config-section)
add header action buttons to sz-config-section allowing configurable actions/events

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@serve.zone/catalog',
version: '2.5.0',
version: '2.6.0',
description: 'UI component catalog for serve.zone'
}

192
ts_web/elements/sz-service-create-view.ts
View File

@@ -48,6 +48,9 @@ export interface IServiceConfig {
memoryLimit: string;
restartPolicy: 'always' | 'on-failure' | 'never';
networkMode: string;
enableMongoDB: boolean;
enableS3: boolean;
enableClickHouse: boolean;
}
@customElement('sz-service-create-view')
@@ -104,6 +107,15 @@ export class SzServiceCreateView extends DeesElement {
@state()
private accessor showAdvanced: boolean = false;
@state()
private accessor enableMongoDB: boolean = false;
@state()
private accessor enableS3: boolean = false;
@state()
private accessor enableClickHouse: boolean = false;
public static styles = [
cssManager.defaultStyles,
css`
@@ -312,6 +324,105 @@ export class SzServiceCreateView extends DeesElement {
accent-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
}
.platform-toggle-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.platform-toggle-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
border-radius: 8px;
transition: background 200ms ease;
}
.platform-toggle-item:has(input:checked) {
background: ${cssManager.bdTheme('#eff6ff', 'rgba(59, 130, 246, 0.1)')};
}
.platform-toggle-info {
display: flex;
align-items: center;
gap: 12px;
}
.platform-toggle-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: ${cssManager.bdTheme('#ffffff', '#27272a')};
display: flex;
align-items: center;
justify-content: center;
}
.platform-toggle-icon svg {
width: 20px;
height: 20px;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
}
.platform-toggle-name {
font-size: 14px;
font-weight: 500;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
}
.platform-toggle-desc {
font-size: 12px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
margin-top: 2px;
}
.toggle-switch {
position: relative;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
border-radius: 12px;
transition: background 200ms ease;
}
.toggle-slider::before {
content: '';
position: absolute;
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: white;
border-radius: 50%;
transition: transform 200ms ease;
}
.toggle-switch input:checked + .toggle-slider {
background: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
}
.toggle-switch input:checked + .toggle-slider::before {
transform: translateX(20px);
}
.actions {
display: flex;
justify-content: flex-end;
@@ -536,6 +647,81 @@ export class SzServiceCreateView extends DeesElement {
</button>
</div>
<!-- Platform Services -->
<div class="section">
<div class="section-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
<rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
<line x1="6" y1="6" x2="6.01" y2="6"></line>
<line x1="6" y1="18" x2="6.01" y2="18"></line>
</svg>
Platform Services
</div>
<div class="form-hint" style="margin-bottom: 12px;">
Enable managed infrastructure services for this deployment. Resources are automatically provisioned and connection details injected as environment variables.
</div>
<div class="platform-toggle-list">
<label class="platform-toggle-item">
<div class="platform-toggle-info">
<div class="platform-toggle-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
</div>
<div>
<div class="platform-toggle-name">MongoDB</div>
<div class="platform-toggle-desc">Document database with auto-provisioned credentials</div>
</div>
</div>
<div class="toggle-switch">
<input
type="checkbox"
?checked=${this.enableMongoDB}
@change=${(e: Event) => this.enableMongoDB = (e.target as HTMLInputElement).checked}
>
<span class="toggle-slider"></span>
</div>
</label>
<label class="platform-toggle-item">
<div class="platform-toggle-info">
<div class="platform-toggle-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9z"/></svg>
</div>
<div>
<div class="platform-toggle-name">S3 Storage (MinIO)</div>
<div class="platform-toggle-desc">Object storage bucket with auto-provisioned access keys</div>
</div>
</div>
<div class="toggle-switch">
<input
type="checkbox"
?checked=${this.enableS3}
@change=${(e: Event) => this.enableS3 = (e.target as HTMLInputElement).checked}
>
<span class="toggle-slider"></span>
</div>
</label>
<label class="platform-toggle-item">
<div class="platform-toggle-info">
<div class="platform-toggle-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="2" width="6" height="20"/><rect x="9" y="7" width="6" height="15"/><rect x="16" y="12" width="6" height="10"/></svg>
</div>
<div>
<div class="platform-toggle-name">ClickHouse</div>
<div class="platform-toggle-desc">Analytics database with auto-provisioned credentials</div>
</div>
</div>
<div class="toggle-switch">
<input
type="checkbox"
?checked=${this.enableClickHouse}
@change=${(e: Event) => this.enableClickHouse = (e.target as HTMLInputElement).checked}
>
<span class="toggle-slider"></span>
</div>
</label>
</div>
</div>
<!-- Advanced Options Toggle -->
<button
class="toggle-advanced ${this.showAdvanced ? 'open' : ''}"
@@ -750,6 +936,9 @@ export class SzServiceCreateView extends DeesElement {
memoryLimit: this.memoryLimit,
restartPolicy: this.restartPolicy,
networkMode: this.networkMode,
enableMongoDB: this.enableMongoDB,
enableS3: this.enableS3,
enableClickHouse: this.enableClickHouse,
};
this.dispatchEvent(new CustomEvent('create-service', {
@@ -771,5 +960,8 @@ export class SzServiceCreateView extends DeesElement {
this.restartPolicy = 'always';
this.networkMode = 'bridge';
this.showAdvanced = false;
this.enableMongoDB = false;
this.enableS3 = false;
this.enableClickHouse = false;
}
}