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

feat(opsserver): introduce OpsServer (TypedRequest API) and new lightweight web UI; replace legacy Angular UI and add typed interfaces

Browse Source
This commit is contained in:
Jürgen Kunz
2026-02-24 18:15:44 +00:00
parent 84c47cd7f5
commit ba05cc84fe
143 changed files with 46631 additions and 20632 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
ts_web/elements/ob-view-services.ts Normal file
View File

@@ -0,0 +1,219 @@
import * as plugins from '../plugins.js';
import * as shared from './shared/index.js';
import * as appstate from '../appstate.js';
import {
DeesElement,
customElement,
html,
state,
css,
cssManager,
type TemplateResult,
} from '@design.estate/dees-element';
@customElement('ob-view-services')
export class ObViewServices extends DeesElement {
@state()
accessor servicesState: appstate.IServicesState = {
services: [],
currentService: null,
currentServiceLogs: [],
currentServiceStats: null,
platformServices: [],
currentPlatformService: null,
};
@state()
accessor backupsState: appstate.IBackupsState = {
backups: [],
schedules: [],
};
@state()
accessor currentView: 'list' | 'create' | 'detail' | 'backups' | 'platform-detail' = 'list';
@state()
accessor selectedServiceName: string = '';
@state()
accessor selectedPlatformType: string = '';
constructor() {
super();
const servicesSub = appstate.servicesStatePart
.select((s) => s)
.subscribe((newState) => {
this.servicesState = newState;
});
this.rxSubscriptions.push(servicesSub);
const backupsSub = appstate.backupsStatePart
.select((s) => s)
.subscribe((newState) => {
this.backupsState = newState;
});
this.rxSubscriptions.push(backupsSub);
}
public static styles = [
cssManager.defaultStyles,
shared.viewHostCss,
css``,
];
async connectedCallback() {
super.connectedCallback();
await Promise.all([
appstate.servicesStatePart.dispatchAction(appstate.fetchServicesAction, null),
appstate.servicesStatePart.dispatchAction(appstate.fetchPlatformServicesAction, null),
]);
}
public render(): TemplateResult {
switch (this.currentView) {
case 'create':
return this.renderCreateView();
case 'detail':
return this.renderDetailView();
case 'backups':
return this.renderBackupsView();
case 'platform-detail':
return this.renderPlatformDetailView();
default:
return this.renderListView();
}
}
private renderListView(): TemplateResult {
return html`
<ob-sectionheading>Services</ob-sectionheading>
<sz-services-list-view
.services=${this.servicesState.services}
@service-click=${(e: CustomEvent) => {
this.selectedServiceName = e.detail.name || e.detail.service?.name;
appstate.servicesStatePart.dispatchAction(appstate.fetchServiceAction, {
name: this.selectedServiceName,
});
appstate.servicesStatePart.dispatchAction(appstate.fetchServiceLogsAction, {
name: this.selectedServiceName,
});
this.currentView = 'detail';
}}
@service-action=${(e: CustomEvent) => this.handleServiceAction(e)}
></sz-services-list-view>
`;
}
private renderCreateView(): TemplateResult {
return html`
<ob-sectionheading>Create Service</ob-sectionheading>
<sz-service-create-view
.registries=${[]}
@create-service=${async (e: CustomEvent) => {
await appstate.servicesStatePart.dispatchAction(appstate.createServiceAction, {
config: e.detail,
});
this.currentView = 'list';
}}
@cancel=${() => {
this.currentView = 'list';
}}
></sz-service-create-view>
`;
}
private renderDetailView(): TemplateResult {
return html`
<ob-sectionheading>Service Details</ob-sectionheading>
<sz-service-detail-view
.service=${this.servicesState.currentService}
.logs=${this.servicesState.currentServiceLogs}
.stats=${this.servicesState.currentServiceStats}
@back=${() => {
this.currentView = 'list';
}}
@service-action=${(e: CustomEvent) => this.handleServiceAction(e)}
></sz-service-detail-view>
`;
}
private renderBackupsView(): TemplateResult {
return html`
<ob-sectionheading>Backups</ob-sectionheading>
<sz-services-backups-view
.schedules=${this.backupsState.schedules}
.backups=${this.backupsState.backups}
@create-schedule=${(e: CustomEvent) => {
appstate.backupsStatePart.dispatchAction(appstate.createScheduleAction, {
config: e.detail,
});
}}
@run-now=${(e: CustomEvent) => {
appstate.backupsStatePart.dispatchAction(appstate.triggerScheduleAction, {
scheduleId: e.detail.scheduleId,
});
}}
@delete-backup=${(e: CustomEvent) => {
appstate.backupsStatePart.dispatchAction(appstate.deleteBackupAction, {
backupId: e.detail.backupId,
});
}}
></sz-services-backups-view>
`;
}
private renderPlatformDetailView(): TemplateResult {
const platformService = this.servicesState.platformServices.find(
(ps) => ps.type === this.selectedPlatformType,
);
return html`
<ob-sectionheading>Platform Service</ob-sectionheading>
<sz-platform-service-detail-view
.service=${platformService
? {
id: platformService.type,
name: platformService.displayName,
type: platformService.type,
status: platformService.status,
version: '',
host: 'localhost',
port: 0,
config: {},
}
: null}
.logs=${[]}
@start=${() => {
appstate.servicesStatePart.dispatchAction(appstate.startPlatformServiceAction, {
serviceType: this.selectedPlatformType as any,
});
}}
@stop=${() => {
appstate.servicesStatePart.dispatchAction(appstate.stopPlatformServiceAction, {
serviceType: this.selectedPlatformType as any,
});
}}
></sz-platform-service-detail-view>
`;
}
private async handleServiceAction(e: CustomEvent) {
const action = e.detail.action;
const name = e.detail.service?.name || e.detail.name || this.selectedServiceName;
switch (action) {
case 'start':
await appstate.servicesStatePart.dispatchAction(appstate.startServiceAction, { name });
break;
case 'stop':
await appstate.servicesStatePart.dispatchAction(appstate.stopServiceAction, { name });
break;
case 'restart':
await appstate.servicesStatePart.dispatchAction(appstate.restartServiceAction, { name });
break;
case 'delete':
await appstate.servicesStatePart.dispatchAction(appstate.deleteServiceAction, { name });
this.currentView = 'list';
break;
}
}
}