From 5310fa838e57a84d8ecc5a5037b300a55f474d2f Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Fri, 20 Feb 2026 15:01:40 +0000 Subject: [PATCH] =?UTF-8?q?BREAKING=20CHANGE(elements):=20rename=20Onebox?= =?UTF-8?q?=20registry=20component=20to=20Registry=20Advertisement=20(sz-r?= =?UTF-8?q?egistry-onebox-view=20=E2=86=92=20sz-registry-advertisement)=20?= =?UTF-8?q?and=20update=20exports,=20demos=20and=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- changelog.md | 9 ++ readme.hints.md | 2 +- ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/index.ts | 2 +- ts_web/elements/sz-demo-view-registries.ts | 8 +- ts_web/elements/sz-demo-view-services.ts | 1 + ...x-view.ts => sz-registry-advertisement.ts} | 18 +-- ts_web/elements/sz-service-detail-view.ts | 137 ++++++++++++++++++ 8 files changed, 163 insertions(+), 16 deletions(-) rename ts_web/elements/{sz-registry-onebox-view.ts => sz-registry-advertisement.ts} (93%) diff --git a/changelog.md b/changelog.md index 508319f..89cfe99 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,14 @@ # Changelog +## 2026-02-20 - 2.0.0 - BREAKING CHANGE(elements) +rename Onebox registry component to Registry Advertisement (sz-registry-onebox-view → sz-registry-advertisement) and update exports, demos and docs + +- Replaced ts_web/elements/sz-registry-onebox-view.ts with ts_web/elements/sz-registry-advertisement.ts +- Updated export in ts_web/elements/index.ts to export the new component +- Updated demo (ts_web/elements/sz-demo-view-registries.ts) to use the new tag and updated headings/labels +- Updated readme.hints.md to reference sz-registry-advertisement instead of sz-registry-onebox-view +- Breaking change: custom element tag name changed; consumers must update any usages/imports + ## 2026-02-20 - 1.1.0 - feat(elements) add demoGroups metadata, filter demo view wrappers in wcctools, and update demo payloads diff --git a/readme.hints.md b/readme.hints.md index c4b5729..3ff192f 100644 --- a/readme.hints.md +++ b/readme.hints.md @@ -21,7 +21,7 @@ | Platform | sz-platform-services-card, sz-platform-service-detail-view | | Network | sz-network-proxy-view, sz-network-dns-view, sz-network-domains-view, sz-reverse-proxy-card, sz-dns-ssl-card, sz-certificates-card, sz-domain-detail-view | | Services | sz-services-list-view, sz-services-backups-view, sz-service-detail-view, sz-service-create-view | -| Auth & Settings | sz-login-view, sz-tokens-view, sz-settings-view, sz-registry-onebox-view, sz-registry-external-view | +| Auth & Settings | sz-login-view, sz-tokens-view, sz-settings-view, sz-registry-advertisement, sz-registry-external-view | ## Build - `pnpm run build` - tsbuild tsfolders + tsbundle element --production diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 5797b60..0c6d972 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@serve.zone/catalog', - version: '1.1.0', + version: '2.0.0', description: 'UI component catalog for serve.zone' } diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts index 3056f04..fe6fbad 100644 --- a/ts_web/elements/index.ts +++ b/ts_web/elements/index.ts @@ -21,7 +21,7 @@ export * from './sz-network-dns-view.js'; export * from './sz-network-domains-view.js'; // Registry Views -export * from './sz-registry-onebox-view.js'; +export * from './sz-registry-advertisement.js'; export * from './sz-registry-external-view.js'; // Services Views diff --git a/ts_web/elements/sz-demo-view-registries.ts b/ts_web/elements/sz-demo-view-registries.ts index ff03130..b40617b 100644 --- a/ts_web/elements/sz-demo-view-registries.ts +++ b/ts_web/elements/sz-demo-view-registries.ts @@ -29,7 +29,7 @@ export class SzDemoViewRegistries extends DeesElement { // Set up content tabs this.appui.setContentTabs([ { - key: 'Onebox Registry', + key: 'Registry Advertisement', action: () => { this.currentTab = 'onebox'; this.updateSecondaryMenu(); @@ -52,7 +52,7 @@ export class SzDemoViewRegistries extends DeesElement { if (this.currentTab === 'onebox') { this.appui.setSecondaryMenu({ - heading: 'Onebox Registry', + heading: 'Registry Advertisement', groups: [ { name: 'Actions', @@ -181,7 +181,7 @@ export class SzDemoViewRegistries extends DeesElement { public render(): TemplateResult { return html` ${this.currentTab === 'onebox' ? html` - console.log('View image:', e.detail)} @delete-image=${(e: CustomEvent) => console.log('Delete image:', e.detail)} @delete-tag=${(e: CustomEvent) => console.log('Delete tag:', e.detail)} - > + > ` : html` console.log('Start')} @stop=${() => console.log('Stop')} @restart=${() => console.log('Restart')} + @request-workspace=${(e: CustomEvent) => console.log('Workspace requested for:', e.detail.service.name)} > `; } diff --git a/ts_web/elements/sz-registry-onebox-view.ts b/ts_web/elements/sz-registry-advertisement.ts similarity index 93% rename from ts_web/elements/sz-registry-onebox-view.ts rename to ts_web/elements/sz-registry-advertisement.ts index c21c9af..0c5a8f9 100644 --- a/ts_web/elements/sz-registry-onebox-view.ts +++ b/ts_web/elements/sz-registry-advertisement.ts @@ -10,18 +10,18 @@ import { declare global { interface HTMLElementTagNameMap { - 'sz-registry-onebox-view': SzRegistryOneboxView; + 'sz-registry-advertisement': SzRegistryAdvertisement; } } -@customElement('sz-registry-onebox-view') -export class SzRegistryOneboxView extends DeesElement { +@customElement('sz-registry-advertisement') +export class SzRegistryAdvertisement extends DeesElement { public static demo = () => html`
- + >
`; @@ -211,10 +211,10 @@ export class SzRegistryOneboxView extends DeesElement {
- Onebox Registry (Built-in) + Registry Advertisement Default
-
Built-in container registry for your services
+
Container registry for your services
@@ -240,10 +240,10 @@ export class SzRegistryOneboxView extends DeesElement {
Quick Start
-
To push images to the Onebox registry, use a CI or Global token:
+
To push images to the registry, use a CI or Global token:
# Login to the registry
-
docker login ${this.registryUrl.split('/')[0]} -u onebox -p YOUR_TOKEN
+
docker login ${this.registryUrl.split('/')[0]} -u registry -p YOUR_TOKEN
# Tag and push your image
docker tag myapp ${this.registryUrl.split('/')[0]}/myservice:latest
docker push ${this.registryUrl.split('/')[0]}/myservice:latest
diff --git a/ts_web/elements/sz-service-detail-view.ts b/ts_web/elements/sz-service-detail-view.ts index dc4bb79..a26d4d5 100644 --- a/ts_web/elements/sz-service-detail-view.ts +++ b/ts_web/elements/sz-service-detail-view.ts @@ -5,9 +5,12 @@ import { css, cssManager, property, + state, type TemplateResult, } from '@design.estate/dees-element'; +import type { IExecutionEnvironment } from '@design.estate/dees-catalog'; + import './sz-stat-card.js'; declare global { @@ -123,6 +126,15 @@ export class SzServiceDetailView extends DeesElement { @property({ type: Boolean }) public accessor streaming: boolean = false; + @property({ type: Object }) + public accessor workspaceEnvironment: IExecutionEnvironment | null = null; + + @property({ type: String }) + public accessor workspacePath: string = '/'; + + @state() + private accessor currentView: 'details' | 'workspace' = 'details'; + public static styles = [ cssManager.defaultStyles, css` @@ -455,10 +467,102 @@ export class SzServiceDetailView extends DeesElement { font-size: 12px; font-weight: 500; } + + :host(.workspace-mode) { + display: flex; + flex-direction: column; + height: 100%; + } + + .workspace-wrapper { + display: flex; + flex-direction: column; + height: 100%; + } + + .workspace-header { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')}; + background: ${cssManager.bdTheme('#ffffff', '#09090b')}; + flex-shrink: 0; + } + + .workspace-back-link { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 14px; + font-weight: 500; + color: ${cssManager.bdTheme('#2563eb', '#60a5fa')}; + cursor: pointer; + transition: color 200ms ease; + } + + .workspace-back-link:hover { + color: ${cssManager.bdTheme('#1d4ed8', '#93c5fd')}; + } + + .workspace-service-name { + font-size: 14px; + font-weight: 600; + color: ${cssManager.bdTheme('#18181b', '#fafafa')}; + } + + .workspace-status-badge { + display: inline-flex; + align-items: center; + width: 8px; + height: 8px; + border-radius: 50%; + } + + .workspace-status-badge.running { + background: ${cssManager.bdTheme('#22c55e', '#22c55e')}; + } + + .workspace-status-badge.stopped { + background: ${cssManager.bdTheme('#ef4444', '#ef4444')}; + } + + .workspace-container { + position: relative; + flex: 1; + min-height: 0; + } `, ]; public render(): TemplateResult { + if (this.currentView === 'workspace') { + return this.renderWorkspaceView(); + } + return this.renderDetailsView(); + } + + private renderWorkspaceView(): TemplateResult { + return html` +
+
+
this.handleCloseWorkspace()}> + + + + Back to Details +
+ ${this.service.name} + +
+
+ +
+
+ `; + } + + private renderDetailsView(): TemplateResult { return html`
this.handleBack()}> @@ -590,6 +694,13 @@ export class SzServiceDetailView extends DeesElement { : html`` } +
@@ -709,4 +820,30 @@ export class SzServiceDetailView extends DeesElement { private handleDeleteBackup(backup: IServiceBackup) { this.dispatchEvent(new CustomEvent('delete-backup', { detail: backup, bubbles: true, composed: true })); } + + private handleOpenWorkspace() { + if (this.workspaceEnvironment) { + this.currentView = 'workspace'; + this.classList.add('workspace-mode'); + } else { + this.dispatchEvent(new CustomEvent('request-workspace', { + detail: { service: this.service }, + bubbles: true, + composed: true, + })); + } + } + + private handleCloseWorkspace() { + this.currentView = 'details'; + this.classList.remove('workspace-mode'); + } + + updated(changedProperties: Map) { + super.updated(changedProperties); + if (changedProperties.has('workspaceEnvironment') && this.workspaceEnvironment && this.currentView === 'details') { + this.currentView = 'workspace'; + this.classList.add('workspace-mode'); + } + } }