507 lines
18 KiB
TypeScript
507 lines
18 KiB
TypeScript
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';
|
|
|
|
// ============================================================================
|
|
// Data transformation helpers
|
|
// Maps backend data shapes to @serve.zone/catalog component interfaces
|
|
// ============================================================================
|
|
|
|
function formatBytes(bytes: number): string {
|
|
if (!bytes || bytes === 0) return '0 B';
|
|
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
const k = 1024;
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
const value = bytes / Math.pow(k, i);
|
|
return `${value.toFixed(1)} ${units[i]}`;
|
|
}
|
|
|
|
function parseImageString(image: string): { repository: string; tag: string } {
|
|
const lastColon = image.lastIndexOf(':');
|
|
const lastSlash = image.lastIndexOf('/');
|
|
if (lastColon > lastSlash && lastColon > 0) {
|
|
return {
|
|
repository: image.substring(0, lastColon),
|
|
tag: image.substring(lastColon + 1),
|
|
};
|
|
}
|
|
return { repository: image, tag: 'latest' };
|
|
}
|
|
|
|
function mapStatus(status: string): 'running' | 'stopped' | 'starting' | 'error' {
|
|
switch (status) {
|
|
case 'running': return 'running';
|
|
case 'starting': return 'starting';
|
|
case 'failed': return 'error';
|
|
case 'stopped':
|
|
case 'stopping':
|
|
default: return 'stopped';
|
|
}
|
|
}
|
|
|
|
function toServiceDetail(service: interfaces.data.IService) {
|
|
const parsed = parseImageString(service.image);
|
|
return {
|
|
name: service.name,
|
|
status: mapStatus(service.status),
|
|
image: service.image,
|
|
port: service.port,
|
|
domain: service.domain || null,
|
|
containerId: service.containerID || '',
|
|
created: service.createdAt ? new Date(service.createdAt).toLocaleString() : '-',
|
|
updated: service.updatedAt ? new Date(service.updatedAt).toLocaleString() : '-',
|
|
registry: service.useOneboxRegistry ? 'Onebox Registry' : (service.registry || 'Docker Hub'),
|
|
repository: service.registryRepository || parsed.repository,
|
|
tag: service.registryImageTag || parsed.tag,
|
|
};
|
|
}
|
|
|
|
function toServiceStats(stats: interfaces.data.IContainerStats) {
|
|
return {
|
|
cpu: stats.cpuPercent,
|
|
memory: formatBytes(stats.memoryUsed),
|
|
memoryLimit: formatBytes(stats.memoryLimit),
|
|
networkIn: formatBytes(stats.networkRx),
|
|
networkOut: formatBytes(stats.networkTx),
|
|
};
|
|
}
|
|
|
|
function parseLogs(logs: any): Array<{ timestamp: string; message: string }> {
|
|
if (Array.isArray(logs)) {
|
|
return logs.map((entry: any) => ({
|
|
timestamp: entry.timestamp ? String(entry.timestamp) : '',
|
|
message: entry.message || String(entry),
|
|
}));
|
|
}
|
|
if (typeof logs === 'string' && logs.trim()) {
|
|
return logs.split('\n').filter((line: string) => line.trim()).map((line: string) => {
|
|
const match = line.match(/^(\d{4}-\d{2}-\d{2}T[\d:.]+Z?)\s+(.*)/);
|
|
if (match) {
|
|
return { timestamp: match[1], message: match[2] };
|
|
}
|
|
return { timestamp: '', message: line };
|
|
});
|
|
}
|
|
return [];
|
|
}
|
|
|
|
const defaultStats = { cpu: 0, memory: '0 B', memoryLimit: '0 B', networkIn: '0 B', networkOut: '0 B' };
|
|
|
|
@customElement('ob-view-services')
|
|
export class ObViewServices extends DeesElement {
|
|
@state()
|
|
accessor servicesState: appstate.IServicesState = {
|
|
services: [],
|
|
currentService: null,
|
|
currentServiceLogs: [],
|
|
currentServiceStats: null,
|
|
platformServices: [],
|
|
currentPlatformService: null,
|
|
currentPlatformServiceStats: null,
|
|
currentPlatformServiceLogs: [],
|
|
};
|
|
|
|
@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`
|
|
.page-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.deploy-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 20px;
|
|
background: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
|
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: opacity 200ms ease;
|
|
}
|
|
|
|
.deploy-button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.deploy-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
`,
|
|
];
|
|
|
|
async connectedCallback() {
|
|
super.connectedCallback();
|
|
await Promise.all([
|
|
appstate.servicesStatePart.dispatchAction(appstate.fetchServicesAction, null),
|
|
appstate.servicesStatePart.dispatchAction(appstate.fetchPlatformServicesAction, null),
|
|
]);
|
|
|
|
// If a platform service was selected from the dashboard, navigate to its detail
|
|
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);
|
|
}
|
|
}
|
|
|
|
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 {
|
|
const mappedServices = this.servicesState.services.map((s) => ({
|
|
name: s.name,
|
|
image: s.image,
|
|
domain: s.domain || null,
|
|
status: mapStatus(s.status),
|
|
}));
|
|
const displayStatus = (status: string) => {
|
|
switch (status) {
|
|
case 'running': return 'Running';
|
|
case 'stopped': return 'Stopped';
|
|
case 'starting': return 'Starting...';
|
|
case 'stopping': return 'Stopping...';
|
|
case 'failed': return 'Failed';
|
|
case 'not-deployed': return 'Not Deployed';
|
|
default: return status;
|
|
}
|
|
};
|
|
const mappedPlatformServices = this.servicesState.platformServices.map((ps) => ({
|
|
name: ps.displayName,
|
|
status: displayStatus(ps.status),
|
|
running: ps.status === 'running',
|
|
type: ps.type,
|
|
}));
|
|
return html`
|
|
<ob-sectionheading>Services</ob-sectionheading>
|
|
<div class="page-actions">
|
|
<button class="deploy-button" @click=${() => { this.currentView = 'create'; }}>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
Deploy Service
|
|
</button>
|
|
</div>
|
|
<sz-services-list-view
|
|
.services=${mappedServices}
|
|
@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,
|
|
});
|
|
appstate.servicesStatePart.dispatchAction(appstate.fetchServiceStatsAction, {
|
|
name: this.selectedServiceName,
|
|
});
|
|
this.currentView = 'detail';
|
|
}}
|
|
@service-action=${(e: CustomEvent) => this.handleServiceAction(e)}
|
|
></sz-services-list-view>
|
|
<ob-sectionheading style="margin-top: 32px;">Platform Services</ob-sectionheading>
|
|
<div style="max-width: 500px;">
|
|
<sz-platform-services-card
|
|
.services=${mappedPlatformServices}
|
|
@service-click=${(e: CustomEvent) => {
|
|
const type = e.detail.type || this.servicesState.platformServices.find(
|
|
(ps) => ps.displayName === e.detail.name,
|
|
)?.type;
|
|
if (type) {
|
|
this.navigateToPlatformDetail(type);
|
|
}
|
|
}}
|
|
></sz-platform-services-card>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderCreateView(): TemplateResult {
|
|
return html`
|
|
<ob-sectionheading>Create Service</ob-sectionheading>
|
|
<sz-service-create-view
|
|
.registries=${[]}
|
|
@create-service=${async (e: CustomEvent) => {
|
|
const formConfig = e.detail;
|
|
const serviceConfig: interfaces.data.IServiceCreate = {
|
|
name: formConfig.name,
|
|
image: formConfig.image,
|
|
port: formConfig.ports?.[0]?.containerPort
|
|
? parseInt(formConfig.ports[0].containerPort, 10)
|
|
: 80,
|
|
envVars: formConfig.envVars?.reduce(
|
|
(acc: Record<string, string>, ev: { key: string; value: string }) => {
|
|
if (ev.key) acc[ev.key] = ev.value;
|
|
return acc;
|
|
},
|
|
{} as Record<string, string>,
|
|
),
|
|
enableMongoDB: formConfig.enableMongoDB || false,
|
|
enableS3: formConfig.enableS3 || false,
|
|
enableClickHouse: formConfig.enableClickHouse || false,
|
|
};
|
|
await appstate.servicesStatePart.dispatchAction(appstate.createServiceAction, {
|
|
config: serviceConfig,
|
|
});
|
|
this.currentView = 'list';
|
|
}}
|
|
@cancel=${() => {
|
|
this.currentView = 'list';
|
|
}}
|
|
></sz-service-create-view>
|
|
`;
|
|
}
|
|
|
|
private renderDetailView(): TemplateResult {
|
|
const service = this.servicesState.currentService;
|
|
const transformedService = service ? toServiceDetail(service) : null;
|
|
const transformedStats = this.servicesState.currentServiceStats
|
|
? toServiceStats(this.servicesState.currentServiceStats)
|
|
: defaultStats;
|
|
const transformedLogs = parseLogs(this.servicesState.currentServiceLogs);
|
|
|
|
return html`
|
|
<ob-sectionheading>Service Details</ob-sectionheading>
|
|
<sz-service-detail-view
|
|
.service=${transformedService}
|
|
.logs=${transformedLogs}
|
|
.stats=${transformedStats}
|
|
@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 navigateToPlatformDetail(type: string): void {
|
|
// Reset to list first to force fresh DOM for dees-chart-log
|
|
this.currentView = 'list';
|
|
this.selectedPlatformType = type;
|
|
|
|
// Clear previous stats/logs before fetching new ones
|
|
appstate.servicesStatePart.setState({
|
|
...appstate.servicesStatePart.getState(),
|
|
currentPlatformServiceStats: null,
|
|
currentPlatformServiceLogs: [],
|
|
});
|
|
|
|
// Fetch stats and logs for this platform service
|
|
const serviceType = type as interfaces.data.TPlatformServiceType;
|
|
appstate.servicesStatePart.dispatchAction(appstate.fetchPlatformServiceStatsAction, { serviceType });
|
|
appstate.servicesStatePart.dispatchAction(appstate.fetchPlatformServiceLogsAction, { serviceType });
|
|
|
|
// Switch to detail view on next microtask (ensures fresh DOM)
|
|
requestAnimationFrame(() => {
|
|
this.currentView = 'platform-detail';
|
|
});
|
|
}
|
|
|
|
private renderPlatformDetailView(): TemplateResult {
|
|
const platformService = this.servicesState.platformServices.find(
|
|
(ps) => ps.type === this.selectedPlatformType,
|
|
);
|
|
const stats = this.servicesState.currentPlatformServiceStats;
|
|
const metrics = {
|
|
cpu: stats ? Math.round(stats.cpuPercent) : 0,
|
|
memory: stats ? Math.round(stats.memoryPercent) : 0,
|
|
storage: 0,
|
|
connections: undefined as number | undefined,
|
|
};
|
|
|
|
// Real service info per platform type
|
|
const serviceInfo: Record<string, { host: string; port: number; version: string; config: Record<string, any> }> = {
|
|
mongodb: { host: 'onebox-mongodb', port: 27017, version: '4.4', config: { engine: 'WiredTiger', authEnabled: true } },
|
|
minio: { host: 'onebox-minio', port: 9000, version: 'latest', config: { consolePort: 9001, region: 'us-east-1' } },
|
|
clickhouse: { host: 'onebox-clickhouse', port: 8123, version: 'latest', config: { nativePort: 9000, httpPort: 8123 } },
|
|
caddy: { host: 'onebox-caddy', port: 80, version: '2-alpine', config: { httpsPort: 443, adminApi: 2019 } },
|
|
};
|
|
const info = platformService
|
|
? serviceInfo[platformService.type] || { host: 'unknown', port: 0, version: '', config: {} }
|
|
: { host: '', port: 0, version: '', config: {} };
|
|
|
|
// Map backend status to catalog-compatible status
|
|
const mapPlatformStatus = (status: string): 'running' | 'stopped' | 'error' => {
|
|
switch (status) {
|
|
case 'running': return 'running';
|
|
case 'failed': return 'error';
|
|
case 'starting':
|
|
case 'stopping':
|
|
case 'stopped':
|
|
case 'not-deployed':
|
|
default: return 'stopped';
|
|
}
|
|
};
|
|
|
|
return html`
|
|
<ob-sectionheading>Platform Service</ob-sectionheading>
|
|
<div class="page-actions" style="justify-content: flex-start;">
|
|
<button class="deploy-button" style="background: transparent; border: 1px solid var(--ci-shade-2, #27272a); color: inherit;" @click=${() => { this.currentView = 'list'; }}>
|
|
← Back to Services
|
|
</button>
|
|
</div>
|
|
<sz-platform-service-detail-view
|
|
.service=${platformService
|
|
? {
|
|
id: platformService.type,
|
|
name: platformService.displayName,
|
|
type: platformService.type,
|
|
status: mapPlatformStatus(platformService.status),
|
|
version: info.version,
|
|
host: info.host,
|
|
port: info.port,
|
|
config: info.config,
|
|
metrics,
|
|
}
|
|
: null}
|
|
.logs=${this.servicesState.currentPlatformServiceLogs.map((log) => ({
|
|
timestamp: new Date(log.timestamp).toISOString(),
|
|
level: log.level,
|
|
message: log.message,
|
|
}))}
|
|
@back=${() => {
|
|
this.currentView = 'list';
|
|
}}
|
|
@start=${async () => {
|
|
await appstate.servicesStatePart.dispatchAction(appstate.startPlatformServiceAction, {
|
|
serviceType: this.selectedPlatformType as interfaces.data.TPlatformServiceType,
|
|
});
|
|
// Refresh stats after starting
|
|
appstate.servicesStatePart.dispatchAction(appstate.fetchPlatformServiceStatsAction, {
|
|
serviceType: this.selectedPlatformType as interfaces.data.TPlatformServiceType,
|
|
});
|
|
}}
|
|
@stop=${async () => {
|
|
await appstate.servicesStatePart.dispatchAction(appstate.stopPlatformServiceAction, {
|
|
serviceType: this.selectedPlatformType as interfaces.data.TPlatformServiceType,
|
|
});
|
|
}}
|
|
@restart=${async () => {
|
|
await appstate.servicesStatePart.dispatchAction(appstate.stopPlatformServiceAction, {
|
|
serviceType: this.selectedPlatformType as interfaces.data.TPlatformServiceType,
|
|
});
|
|
await appstate.servicesStatePart.dispatchAction(appstate.startPlatformServiceAction, {
|
|
serviceType: this.selectedPlatformType as interfaces.data.TPlatformServiceType,
|
|
});
|
|
appstate.servicesStatePart.dispatchAction(appstate.fetchPlatformServiceStatsAction, {
|
|
serviceType: this.selectedPlatformType as interfaces.data.TPlatformServiceType,
|
|
});
|
|
}}
|
|
></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;
|
|
}
|
|
}
|
|
}
|