feat(dcrouter): add managed local dcrouter mode with status controls and gateway integration
This commit is contained in:
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@serve.zone/onebox',
|
||||
version: '1.25.0',
|
||||
version: '1.26.0',
|
||||
description: 'Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers'
|
||||
}
|
||||
|
||||
+59
-1
@@ -54,6 +54,7 @@ export interface IBackupsState {
|
||||
export interface ISettingsState {
|
||||
settings: interfaces.data.ISettings | null;
|
||||
backupPasswordConfigured: boolean;
|
||||
managedDcRouterStatus: interfaces.data.IManagedDcRouterStatus | null;
|
||||
}
|
||||
|
||||
export interface IAppStoreState {
|
||||
@@ -142,6 +143,7 @@ export const settingsStatePart = await appState.getStatePart<ISettingsState>(
|
||||
{
|
||||
settings: null,
|
||||
backupPasswordConfigured: false,
|
||||
managedDcRouterStatus: null,
|
||||
},
|
||||
'soft',
|
||||
);
|
||||
@@ -898,17 +900,21 @@ export const triggerScheduleAction = backupsStatePart.createAction<{ scheduleId:
|
||||
export const fetchSettingsAction = settingsStatePart.createAction(async (statePartArg) => {
|
||||
const context = getActionContext();
|
||||
try {
|
||||
const [settingsResp, passwordResp] = await Promise.all([
|
||||
const [settingsResp, passwordResp, managedDcRouterResp] = await Promise.all([
|
||||
new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_GetSettings
|
||||
>('/typedrequest', 'getSettings').fire({ identity: context.identity! }),
|
||||
new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_GetBackupPasswordStatus
|
||||
>('/typedrequest', 'getBackupPasswordStatus').fire({ identity: context.identity! }),
|
||||
new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_GetManagedDcRouterStatus
|
||||
>('/typedrequest', 'getManagedDcRouterStatus').fire({ identity: context.identity! }),
|
||||
]);
|
||||
return {
|
||||
settings: settingsResp.settings,
|
||||
backupPasswordConfigured: passwordResp.status.isConfigured,
|
||||
managedDcRouterStatus: managedDcRouterResp.status,
|
||||
};
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch settings:', err);
|
||||
@@ -935,6 +941,58 @@ export const updateSettingsAction = settingsStatePart.createAction<{
|
||||
}
|
||||
});
|
||||
|
||||
export const fetchManagedDcRouterStatusAction = settingsStatePart.createAction(async (statePartArg) => {
|
||||
const context = getActionContext();
|
||||
try {
|
||||
const response = await new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_GetManagedDcRouterStatus
|
||||
>('/typedrequest', 'getManagedDcRouterStatus').fire({ identity: context.identity! });
|
||||
return { ...statePartArg.getState(), managedDcRouterStatus: response.status };
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch managed dcrouter status:', err);
|
||||
return statePartArg.getState();
|
||||
}
|
||||
});
|
||||
|
||||
export const startManagedDcRouterAction = settingsStatePart.createAction(async (statePartArg) => {
|
||||
const context = getActionContext();
|
||||
try {
|
||||
const response = await new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_StartManagedDcRouter
|
||||
>('/typedrequest', 'startManagedDcRouter').fire({ identity: context.identity! });
|
||||
return { ...statePartArg.getState(), managedDcRouterStatus: response.status };
|
||||
} catch (err) {
|
||||
console.error('Failed to start managed dcrouter:', err);
|
||||
return statePartArg.getState();
|
||||
}
|
||||
});
|
||||
|
||||
export const stopManagedDcRouterAction = settingsStatePart.createAction(async (statePartArg) => {
|
||||
const context = getActionContext();
|
||||
try {
|
||||
const response = await new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_StopManagedDcRouter
|
||||
>('/typedrequest', 'stopManagedDcRouter').fire({ identity: context.identity! });
|
||||
return { ...statePartArg.getState(), managedDcRouterStatus: response.status };
|
||||
} catch (err) {
|
||||
console.error('Failed to stop managed dcrouter:', err);
|
||||
return statePartArg.getState();
|
||||
}
|
||||
});
|
||||
|
||||
export const restartManagedDcRouterAction = settingsStatePart.createAction(async (statePartArg) => {
|
||||
const context = getActionContext();
|
||||
try {
|
||||
const response = await new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_RestartManagedDcRouter
|
||||
>('/typedrequest', 'restartManagedDcRouter').fire({ identity: context.identity! });
|
||||
return { ...statePartArg.getState(), managedDcRouterStatus: response.status };
|
||||
} catch (err) {
|
||||
console.error('Failed to restart managed dcrouter:', err);
|
||||
return statePartArg.getState();
|
||||
}
|
||||
});
|
||||
|
||||
export const setBackupPasswordAction = settingsStatePart.createAction<{ password: string }>(
|
||||
async (statePartArg, dataArg) => {
|
||||
const context = getActionContext();
|
||||
|
||||
@@ -17,6 +17,7 @@ export class ObViewSettings extends DeesElement {
|
||||
accessor settingsState: appstate.ISettingsState = {
|
||||
settings: null,
|
||||
backupPasswordConfigured: false,
|
||||
managedDcRouterStatus: null,
|
||||
};
|
||||
|
||||
@state()
|
||||
@@ -81,6 +82,64 @@ export class ObViewSettings extends DeesElement {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.gateway-mode-row,
|
||||
.gateway-status-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
}
|
||||
|
||||
.gateway-mode-row {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.gateway-mode-button {
|
||||
border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
|
||||
border-radius: 999px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#18181b')};
|
||||
color: ${cssManager.bdTheme('#3f3f46', '#d4d4d8')};
|
||||
padding: 8px 12px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gateway-mode-button.active {
|
||||
border-color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
background: ${cssManager.bdTheme('#eff6ff', '#172554')};
|
||||
color: ${cssManager.bdTheme('#1d4ed8', '#bfdbfe')};
|
||||
}
|
||||
|
||||
.gateway-status-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.gateway-status-value {
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.gateway-status-error,
|
||||
.gateway-disabled {
|
||||
color: ${cssManager.bdTheme('#b91c1c', '#fca5a5')};
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.gateway-disabled {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.gateway-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.gateway-field.full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
@@ -99,6 +158,11 @@ export class ObViewSettings extends DeesElement {
|
||||
.gateway-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.gateway-status-row {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
`,
|
||||
];
|
||||
@@ -117,6 +181,12 @@ export class ObViewSettings extends DeesElement {
|
||||
darkMode: true,
|
||||
cloudflareToken: '',
|
||||
cloudflareZoneId: '',
|
||||
dcrouterMode: 'managed',
|
||||
dcrouterManagedImage: 'code.foss.global/serve.zone/dcrouter:latest',
|
||||
dcrouterManagedOpsPort: 3300,
|
||||
dcrouterManagedHttpPort: 80,
|
||||
dcrouterManagedHttpsPort: 443,
|
||||
dcrouterManagedDataDir: './.nogit/dcrouter-data',
|
||||
dcrouterGatewayClientId: '',
|
||||
dcrouterWorkHosterId: '',
|
||||
autoRenewCerts: false,
|
||||
@@ -150,22 +220,40 @@ export class ObViewSettings extends DeesElement {
|
||||
|
||||
private renderExternalGatewaySettings(): TemplateResult {
|
||||
const settings = this.settingsState.settings;
|
||||
const mode = settings?.dcrouterMode || 'managed';
|
||||
return html`
|
||||
<section class="gateway-card">
|
||||
<div class="gateway-header">
|
||||
<div class="gateway-title">Delegate Routing</div>
|
||||
<div class="gateway-subtitle">Delegate public app routing, DNS, and certificates to a dcrouter edge authority.</div>
|
||||
<div class="gateway-title">dcrouter Gateway</div>
|
||||
<div class="gateway-subtitle">Run a local managed dcrouter or delegate routing, DNS, and certificates to an external dcrouter.</div>
|
||||
</div>
|
||||
<div class="gateway-mode-row">
|
||||
${this.renderModeButton('managed', 'Managed Local', mode)}
|
||||
${this.renderModeButton('external', 'External dcrouter', mode)}
|
||||
${this.renderModeButton('disabled', 'Disabled', mode)}
|
||||
</div>
|
||||
${mode === 'managed' ? this.renderManagedGatewayStatus() : null}
|
||||
<div class="gateway-content">
|
||||
${this.renderGatewayInput('dcrouterGatewayUrl', 'Gateway URL', settings?.dcrouterGatewayUrl || '', 'Base URL of the dcrouter OpsServer.')}
|
||||
${this.renderGatewayInput('dcrouterGatewayApiToken', 'API Token', settings?.dcrouterGatewayApiToken || '', 'Requires gateway-client access in dcrouter.', true)}
|
||||
${this.renderGatewayInput('dcrouterGatewayClientId', 'Gateway Client ID', settings?.dcrouterGatewayClientId || settings?.dcrouterWorkHosterId || '', 'Leave empty to let Onebox create a stable ID.')}
|
||||
${this.renderGatewayInput('dcrouterTargetHost', 'Target Host', settings?.dcrouterTargetHost || '', 'Defaults to the configured server IP when empty.')}
|
||||
${this.renderGatewayInput('dcrouterTargetPort', 'Target Port', String(settings?.dcrouterTargetPort || 80), 'Internal HTTP port dcrouter forwards to.')}
|
||||
${mode === 'managed' ? html`
|
||||
${this.renderGatewayInput('dcrouterManagedImage', 'dcrouter Image', settings?.dcrouterManagedImage || 'code.foss.global/serve.zone/dcrouter:latest', 'OCI image used for the managed local gateway.')}
|
||||
${this.renderGatewayInput('dcrouterManagedDataDir', 'Data Directory', settings?.dcrouterManagedDataDir || './.nogit/dcrouter-data', 'Host directory mounted into the dcrouter container.')}
|
||||
${this.renderGatewayInput('dcrouterManagedOpsPort', 'Local Ops Port', String(settings?.dcrouterManagedOpsPort || 3300), 'Bound to 127.0.0.1 for Onebox to call dcrouter APIs.')}
|
||||
${this.renderGatewayInput('dcrouterManagedHttpPort', 'Public HTTP Port', String(settings?.dcrouterManagedHttpPort || 80), 'Host port owned by dcrouter for HTTP ingress.')}
|
||||
${this.renderGatewayInput('dcrouterManagedHttpsPort', 'Public HTTPS Port', String(settings?.dcrouterManagedHttpsPort || 443), 'Host port owned by dcrouter for HTTPS ingress.')}
|
||||
${this.renderGatewayInput('dcrouterGatewayClientId', 'Gateway Client ID', settings?.dcrouterGatewayClientId || settings?.dcrouterWorkHosterId || '', 'Leave empty to let Onebox create a stable ID.')}
|
||||
` : mode === 'external' ? html`
|
||||
${this.renderGatewayInput('dcrouterGatewayUrl', 'Gateway URL', settings?.dcrouterGatewayUrl || '', 'Base URL of the dcrouter OpsServer.')}
|
||||
${this.renderGatewayInput('dcrouterGatewayApiToken', 'API Token', settings?.dcrouterGatewayApiToken || '', 'Requires gateway-client access in dcrouter.', true)}
|
||||
${this.renderGatewayInput('dcrouterGatewayClientId', 'Gateway Client ID', settings?.dcrouterGatewayClientId || settings?.dcrouterWorkHosterId || '', 'Leave empty to let Onebox create a stable ID.')}
|
||||
${this.renderGatewayInput('dcrouterTargetHost', 'Target Host', settings?.dcrouterTargetHost || '', 'Defaults to the configured server IP when empty.')}
|
||||
${this.renderGatewayInput('dcrouterTargetPort', 'Target Port', String(settings?.dcrouterTargetPort || 80), 'Internal HTTP port dcrouter forwards to.')}
|
||||
` : html`
|
||||
<div class="gateway-disabled">dcrouter route delegation is disabled. Onebox will keep using its local SmartProxy directly.</div>
|
||||
`}
|
||||
</div>
|
||||
<div class="gateway-footer">
|
||||
<dees-button
|
||||
.text=${'Save Gateway Settings'}
|
||||
.text=${'Save dcrouter Settings'}
|
||||
.type=${'default'}
|
||||
.icon=${'lucide:Save'}
|
||||
@click=${() => this.saveExternalGatewaySettings()}
|
||||
@@ -175,6 +263,38 @@ export class ObViewSettings extends DeesElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderModeButton(
|
||||
mode: 'managed' | 'external' | 'disabled',
|
||||
label: string,
|
||||
activeMode: string,
|
||||
): TemplateResult {
|
||||
return html`
|
||||
<button
|
||||
class="gateway-mode-button ${activeMode === mode ? 'active' : ''}"
|
||||
@click=${() => this.updateGatewayDraft('dcrouterMode', mode)}
|
||||
>${label}</button>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderManagedGatewayStatus(): TemplateResult {
|
||||
const status = this.settingsState.managedDcRouterStatus;
|
||||
const stateText = status?.running ? (status.healthy ? 'Running' : 'Starting') : 'Stopped';
|
||||
return html`
|
||||
<div class="gateway-status-row">
|
||||
<div>
|
||||
<div class="gateway-status-label">Managed dcrouter</div>
|
||||
<div class="gateway-status-value">${stateText}${status?.gatewayUrl ? ` at ${status.gatewayUrl}` : ''}</div>
|
||||
${status?.message ? html`<div class="gateway-status-error">${status.message}</div>` : null}
|
||||
</div>
|
||||
<div class="gateway-actions">
|
||||
<dees-button .text=${'Start'} .type=${'default'} @click=${() => appstate.settingsStatePart.dispatchAction(appstate.startManagedDcRouterAction, null)}></dees-button>
|
||||
<dees-button .text=${'Restart'} .type=${'default'} @click=${() => appstate.settingsStatePart.dispatchAction(appstate.restartManagedDcRouterAction, null)}></dees-button>
|
||||
<dees-button .text=${'Stop'} .type=${'default'} @click=${() => appstate.settingsStatePart.dispatchAction(appstate.stopManagedDcRouterAction, null)}></dees-button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderGatewayInput(
|
||||
key: keyof NonNullable<appstate.ISettingsState['settings']>,
|
||||
label: string,
|
||||
@@ -201,7 +321,13 @@ export class ObViewSettings extends DeesElement {
|
||||
value: string,
|
||||
): void {
|
||||
const currentSettings = this.settingsState.settings || {} as NonNullable<appstate.ISettingsState['settings']>;
|
||||
const nextValue = key === 'dcrouterTargetPort' ? Number(value) || 0 : value;
|
||||
const numberKeys = new Set([
|
||||
'dcrouterTargetPort',
|
||||
'dcrouterManagedOpsPort',
|
||||
'dcrouterManagedHttpPort',
|
||||
'dcrouterManagedHttpsPort',
|
||||
]);
|
||||
const nextValue = numberKeys.has(key as string) ? Number(value) || 0 : value;
|
||||
this.settingsState = {
|
||||
...this.settingsState,
|
||||
settings: {
|
||||
@@ -217,6 +343,12 @@ export class ObViewSettings extends DeesElement {
|
||||
|
||||
await appstate.settingsStatePart.dispatchAction(appstate.updateSettingsAction, {
|
||||
settings: {
|
||||
dcrouterMode: settings.dcrouterMode || 'managed',
|
||||
dcrouterManagedImage: settings.dcrouterManagedImage || 'code.foss.global/serve.zone/dcrouter:latest',
|
||||
dcrouterManagedOpsPort: Number(settings.dcrouterManagedOpsPort) || 3300,
|
||||
dcrouterManagedHttpPort: Number(settings.dcrouterManagedHttpPort) || 80,
|
||||
dcrouterManagedHttpsPort: Number(settings.dcrouterManagedHttpsPort) || 443,
|
||||
dcrouterManagedDataDir: settings.dcrouterManagedDataDir || './.nogit/dcrouter-data',
|
||||
dcrouterGatewayUrl: settings.dcrouterGatewayUrl || '',
|
||||
dcrouterGatewayApiToken: settings.dcrouterGatewayApiToken || '',
|
||||
dcrouterGatewayClientId: settings.dcrouterGatewayClientId || settings.dcrouterWorkHosterId || '',
|
||||
@@ -224,5 +356,6 @@ export class ObViewSettings extends DeesElement {
|
||||
dcrouterTargetPort: Number(settings.dcrouterTargetPort) || 80,
|
||||
},
|
||||
});
|
||||
await appstate.settingsStatePart.dispatchAction(appstate.fetchManagedDcRouterStatusAction, null);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user