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

feat(web-ui): reorganize dashboard views into grouped navigation with new email, access, and network subviews

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-08 08:24:55 +00:00
parent 00fdadb088
commit 2325f01cde
31 changed files with 214 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ts_web/elements/access/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './ops-view-apitokens.js';

6
ts_web/elements/ops-view-apitokens.ts → ts_web/elements/access/ops-view-apitokens.ts
View File

@@ -1,6 +1,6 @@
import * as appstate from '../appstate.js';
import * as interfaces from '../../dist_ts_interfaces/index.js';
import { viewHostCss } from './shared/css.js';
import * as appstate from '../../appstate.js';
import * as interfaces from '../../../dist_ts_interfaces/index.js';
import { viewHostCss } from '../shared/css.js';
import {
DeesElement,

2
ts_web/elements/email/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from './ops-view-emails.js';
export * from './ops-view-email-security.js';

9
ts_web/elements/security/ops-view-security-emailsecurity.ts → ts_web/elements/email/ops-view-email-security.ts
View File

@@ -1,4 +1,5 @@
import * as appstate from '../../appstate.js';
import { viewHostCss } from '../shared/css.js';
import {
DeesElement,
@@ -13,12 +14,12 @@ import { type IStatsTile } from '@design.estate/dees-catalog';
declare global {
interface HTMLElementTagNameMap {
'ops-view-security-emailsecurity': OpsViewSecurityEmailsecurity;
'ops-view-email-security': OpsViewEmailSecurity;
}
}
@customElement('ops-view-security-emailsecurity')
export class OpsViewSecurityEmailsecurity extends DeesElement {
@customElement('ops-view-email-security')
export class OpsViewEmailSecurity extends DeesElement {
@state()
accessor statsState: appstate.IStatsState = appstate.statsStatePart.getState()!;
@@ -34,8 +35,8 @@ export class OpsViewSecurityEmailsecurity extends DeesElement {
public static styles = [
cssManager.defaultStyles,
viewHostCss,
css`
:host { display: block; }
h2 {
margin: 32px 0 16px 0;
font-size: 24px;

8
ts_web/elements/ops-view-emails.ts → ts_web/elements/email/ops-view-emails.ts
View File

@@ -1,8 +1,8 @@
import { DeesElement, property, html, customElement, type TemplateResult, css, state, cssManager } from '@design.estate/dees-element';
import * as plugins from '../plugins.js';
import * as appstate from '../appstate.js';
import * as shared from './shared/index.js';
import * as interfaces from '../../dist_ts_interfaces/index.js';
import * as plugins from '../../plugins.js';
import * as appstate from '../../appstate.js';
import * as shared from '../shared/index.js';
import * as interfaces from '../../../dist_ts_interfaces/index.js';
declare global {
interface HTMLElementTagNameMap {

11
ts_web/elements/index.ts
View File

@@ -1,12 +1,9 @@
export * from './ops-dashboard.js';
export * from './ops-view-overview.js';
export * from './overview/index.js';
export * from './network/index.js';
export * from './ops-view-emails.js';
export * from './email/index.js';
export * from './ops-view-logs.js';
export * from './ops-view-config.js';
export * from './ops-view-apitokens.js';
export * from './access/index.js';
export * from './security/index.js';
export * from './ops-view-certificates.js';
export * from './ops-view-remoteingress.js';
export * from './ops-view-vpn.js';
export * from './shared/index.js';
export * from './shared/index.js';

3
ts_web/elements/network/index.ts
View File

@@ -1,6 +1,7 @@
export * from './ops-view-network.js';
export * from './ops-view-network-activity.js';
export * from './ops-view-routes.js';
export * from './ops-view-sourceprofiles.js';
export * from './ops-view-networktargets.js';
export * from './ops-view-targetprofiles.js';
export * from './ops-view-remoteingress.js';
export * from './ops-view-vpn.js';

3
ts_web/elements/network/ops-view-network-activity.ts
View File

@@ -1,6 +1,7 @@
import { DeesElement, property, html, customElement, type TemplateResult, css, state, cssManager } from '@design.estate/dees-element';
import * as appstate from '../../appstate.js';
import * as interfaces from '../../../dist_ts_interfaces/index.js';
import { viewHostCss } from '../shared/css.js';
import { type IStatsTile } from '@design.estate/dees-catalog';
declare global {
@@ -175,8 +176,8 @@ export class OpsViewNetworkActivity extends DeesElement {
public static styles = [
cssManager.defaultStyles,
viewHostCss,
css`
:host { display: block; }
.networkContainer {
display: flex;
flex-direction: column;

119
ts_web/elements/network/ops-view-network.ts
View File

@@ -1,119 +0,0 @@
import * as appstate from '../../appstate.js';
import { appRouter } from '../../router.js';
import { viewHostCss } from '../shared/css.js';
import {
DeesElement,
customElement,
html,
state,
css,
cssManager,
type TemplateResult,
} from '@design.estate/dees-element';
// Side-effect imports register the subview custom elements
import './ops-view-network-activity.js';
import './ops-view-routes.js';
import './ops-view-sourceprofiles.js';
import './ops-view-networktargets.js';
import './ops-view-targetprofiles.js';
declare global {
interface HTMLElementTagNameMap {
'ops-view-network': OpsViewNetwork;
}
}
type TNetworkTab = 'activity' | 'routes' | 'sourceprofiles' | 'networktargets' | 'targetprofiles';
@customElement('ops-view-network')
export class OpsViewNetwork extends DeesElement {
@state()
accessor selectedTab: TNetworkTab = 'activity';
private tabLabelMap: Record<TNetworkTab, string> = {
'activity': 'Network Activity',
'routes': 'Routes',
'sourceprofiles': 'Source Profiles',
'networktargets': 'Network Targets',
'targetprofiles': 'Target Profiles',
};
private labelToTab: Record<string, TNetworkTab> = {
'Network Activity': 'activity',
'Routes': 'routes',
'Source Profiles': 'sourceprofiles',
'Network Targets': 'networktargets',
'Target Profiles': 'targetprofiles',
};
private static isNetworkTab(s: string | null): s is TNetworkTab {
return s === 'activity' || s === 'routes' || s === 'sourceprofiles'
|| s === 'networktargets' || s === 'targetprofiles';
}
constructor() {
super();
// Read initial subview from state (URL-driven)
const initialState = appstate.uiStatePart.getState()!;
if (OpsViewNetwork.isNetworkTab(initialState.activeSubview)) {
this.selectedTab = initialState.activeSubview;
}
// Subscribe to future changes (back/forward navigation, direct URL entry)
const sub = appstate.uiStatePart.select((s) => s.activeSubview).subscribe((sub) => {
if (OpsViewNetwork.isNetworkTab(sub) && sub !== this.selectedTab) {
this.selectedTab = sub;
}
});
this.rxSubscriptions.push(sub);
}
async firstUpdated() {
const toggle = this.shadowRoot!.querySelector('dees-input-multitoggle') as any;
if (toggle) {
const sub = toggle.changeSubject.subscribe(() => {
const tab = this.labelToTab[toggle.selectedOption];
if (tab && tab !== this.selectedTab) {
// Push URL → router updates state → subscription updates selectedTab
appRouter.navigateToView('network', tab);
}
});
this.rxSubscriptions.push(sub);
}
}
public static styles = [
cssManager.defaultStyles,
viewHostCss,
css`
dees-input-multitoggle {
margin-bottom: 24px;
}
`,
];
public render(): TemplateResult {
return html`
<dees-heading level="2">Network</dees-heading>
<dees-input-multitoggle
.type=${'single'}
.options=${['Network Activity', 'Routes', 'Source Profiles', 'Network Targets', 'Target Profiles']}
.selectedOption=${this.tabLabelMap[this.selectedTab]}
></dees-input-multitoggle>
${this.renderTabContent()}
`;
}
private renderTabContent(): TemplateResult {
switch (this.selectedTab) {
case 'activity': return html`<ops-view-network-activity></ops-view-network-activity>`;
case 'routes': return html`<ops-view-routes></ops-view-routes>`;
case 'sourceprofiles': return html`<ops-view-sourceprofiles></ops-view-sourceprofiles>`;
case 'networktargets': return html`<ops-view-networktargets></ops-view-networktargets>`;
case 'targetprofiles': return html`<ops-view-targetprofiles></ops-view-targetprofiles>`;
}
}
}

3
ts_web/elements/network/ops-view-networktargets.ts
View File

@@ -9,6 +9,7 @@ import {
} from '@design.estate/dees-element';
import * as appstate from '../../appstate.js';
import * as interfaces from '../../../dist_ts_interfaces/index.js';
import { viewHostCss } from '../shared/css.js';
import { type IStatsTile } from '@design.estate/dees-catalog';
declare global {
@@ -37,8 +38,8 @@ export class OpsViewNetworkTargets extends DeesElement {
public static styles = [
cssManager.defaultStyles,
viewHostCss,
css`
:host { display: block; }
.targetsContainer {
display: flex;
flex-direction: column;

8
ts_web/elements/ops-view-remoteingress.ts → ts_web/elements/network/ops-view-remoteingress.ts
View File

@@ -7,9 +7,9 @@ import {
state,
cssManager,
} from '@design.estate/dees-element';
import * as appstate from '../appstate.js';
import * as interfaces from '../../dist_ts_interfaces/index.js';
import { viewHostCss } from './shared/css.js';
import * as appstate from '../../appstate.js';
import * as interfaces from '../../../dist_ts_interfaces/index.js';
import { viewHostCss } from '../shared/css.js';
import { type IStatsTile } from '@design.estate/dees-catalog';
declare global {
@@ -174,7 +174,7 @@ export class OpsViewRemoteIngress extends DeesElement {
];
return html`
<dees-heading level="2">Remote Ingress</dees-heading>
<dees-heading level="hr">Remote Ingress</dees-heading>
${this.riState.newEdgeId ? html`
<div class="secretDialog">

3
ts_web/elements/network/ops-view-routes.ts
View File

@@ -1,5 +1,6 @@
import * as appstate from '../../appstate.js';
import * as interfaces from '../../../dist_ts_interfaces/index.js';
import { viewHostCss } from '../shared/css.js';
import { type IStatsTile } from '@design.estate/dees-catalog';
import {
@@ -96,8 +97,8 @@ export class OpsViewRoutes extends DeesElement {
public static styles = [
cssManager.defaultStyles,
viewHostCss,
css`
:host { display: block; }
.routesContainer {
display: flex;
flex-direction: column;

3
ts_web/elements/network/ops-view-sourceprofiles.ts
View File

@@ -9,6 +9,7 @@ import {
} from '@design.estate/dees-element';
import * as appstate from '../../appstate.js';
import * as interfaces from '../../../dist_ts_interfaces/index.js';
import { viewHostCss } from '../shared/css.js';
import { type IStatsTile } from '@design.estate/dees-catalog';
declare global {
@@ -37,8 +38,8 @@ export class OpsViewSourceProfiles extends DeesElement {
public static styles = [
cssManager.defaultStyles,
viewHostCss,
css`
:host { display: block; }
.profilesContainer {
display: flex;
flex-direction: column;

3
ts_web/elements/network/ops-view-targetprofiles.ts
View File

@@ -10,6 +10,7 @@ import {
import * as plugins from '../../plugins.js';
import * as appstate from '../../appstate.js';
import * as interfaces from '../../../dist_ts_interfaces/index.js';
import { viewHostCss } from '../shared/css.js';
import { type IStatsTile } from '@design.estate/dees-catalog';
declare global {
@@ -38,8 +39,8 @@ export class OpsViewTargetProfiles extends DeesElement {
public static styles = [
cssManager.defaultStyles,
viewHostCss,
css`
:host { display: block; }
.profilesContainer {
display: flex;
flex-direction: column;

10
ts_web/elements/ops-view-vpn.ts → ts_web/elements/network/ops-view-vpn.ts
View File

@@ -7,10 +7,10 @@ import {
state,
cssManager,
} from '@design.estate/dees-element';
import * as plugins from '../plugins.js';
import * as appstate from '../appstate.js';
import * as interfaces from '../../dist_ts_interfaces/index.js';
import { viewHostCss } from './shared/css.js';
import * as plugins from '../../plugins.js';
import * as appstate from '../../appstate.js';
import * as interfaces from '../../../dist_ts_interfaces/index.js';
import { viewHostCss } from '../shared/css.js';
import { type IStatsTile } from '@design.estate/dees-catalog';
/**
@@ -223,7 +223,7 @@ export class OpsViewVpn extends DeesElement {
];
return html`
<dees-heading level="2">VPN</dees-heading>
<dees-heading level="hr">VPN</dees-heading>
<div class="vpnContainer">
${this.vpnState.newClientConfig ? html`

190
ts_web/elements/ops-dashboard.ts
View File

@@ -11,18 +11,45 @@ import {
state,
type TemplateResult
} from '@design.estate/dees-element';
import type { IView } from '@design.estate/dees-catalog';
// Import view components
import { OpsViewOverview } from './ops-view-overview.js';
import { OpsViewNetwork } from './network/ops-view-network.js';
import { OpsViewEmails } from './ops-view-emails.js';
// Top-level / flat views
import { OpsViewLogs } from './ops-view-logs.js';
import { OpsViewConfig } from './ops-view-config.js';
import { OpsViewApiTokens } from './ops-view-apitokens.js';
import { OpsViewSecurity } from './security/ops-view-security.js';
import { OpsViewCertificates } from './ops-view-certificates.js';
import { OpsViewRemoteIngress } from './ops-view-remoteingress.js';
import { OpsViewVpn } from './ops-view-vpn.js';
// Overview group
import { OpsViewOverview } from './overview/ops-view-overview.js';
import { OpsViewConfig } from './overview/ops-view-config.js';
// Network group
import { OpsViewNetworkActivity } from './network/ops-view-network-activity.js';
import { OpsViewRoutes } from './network/ops-view-routes.js';
import { OpsViewSourceProfiles } from './network/ops-view-sourceprofiles.js';
import { OpsViewNetworkTargets } from './network/ops-view-networktargets.js';
import { OpsViewTargetProfiles } from './network/ops-view-targetprofiles.js';
import { OpsViewRemoteIngress } from './network/ops-view-remoteingress.js';
import { OpsViewVpn } from './network/ops-view-vpn.js';
// Email group
import { OpsViewEmails } from './email/ops-view-emails.js';
import { OpsViewEmailSecurity } from './email/ops-view-email-security.js';
// Access group
import { OpsViewApiTokens } from './access/ops-view-apitokens.js';
// Security group
import { OpsViewSecurityOverview } from './security/ops-view-security-overview.js';
import { OpsViewSecurityBlocked } from './security/ops-view-security-blocked.js';
import { OpsViewSecurityAuthentication } from './security/ops-view-security-authentication.js';
/**
* Extended IView with explicit URL slug. Without an explicit `slug`, the URL
* slug is derived from `name.toLowerCase().replace(/\s+/g, '')`.
*/
interface ITabbedView extends IView {
slug?: string;
subViews?: ITabbedView[];
}
@customElement('ops-dashboard')
export class OpsDashboard extends DeesElement {
@@ -46,27 +73,36 @@ export class OpsDashboard extends DeesElement {
error: null,
};
// Store viewTabs as a property to maintain object references
private viewTabs = [
// Store viewTabs as a property to maintain object references (used for === selectedView identity)
private viewTabs: ITabbedView[] = [
{
name: 'Overview',
iconName: 'lucide:layoutDashboard',
element: OpsViewOverview,
},
{
name: 'Configuration',
iconName: 'lucide:settings',
element: OpsViewConfig,
subViews: [
{ slug: 'stats', name: 'Stats', iconName: 'lucide:activity', element: OpsViewOverview },
{ slug: 'configuration', name: 'Configuration', iconName: 'lucide:settings', element: OpsViewConfig },
],
},
{
name: 'Network',
iconName: 'lucide:network',
element: OpsViewNetwork,
subViews: [
{ slug: 'activity', name: 'Network Activity', iconName: 'lucide:activity', element: OpsViewNetworkActivity },
{ slug: 'routes', name: 'Routes', iconName: 'lucide:route', element: OpsViewRoutes },
{ slug: 'sourceprofiles', name: 'Source Profiles', iconName: 'lucide:shieldCheck', element: OpsViewSourceProfiles },
{ slug: 'networktargets', name: 'Network Targets', iconName: 'lucide:server', element: OpsViewNetworkTargets },
{ slug: 'targetprofiles', name: 'Target Profiles', iconName: 'lucide:target', element: OpsViewTargetProfiles },
{ slug: 'remoteingress', name: 'Remote Ingress', iconName: 'lucide:globe', element: OpsViewRemoteIngress },
{ slug: 'vpn', name: 'VPN', iconName: 'lucide:shield', element: OpsViewVpn },
],
},
{
name: 'Emails',
name: 'Email',
iconName: 'lucide:mail',
element: OpsViewEmails,
subViews: [
{ slug: 'log', name: 'Email Log', iconName: 'lucide:scrollText', element: OpsViewEmails },
{ slug: 'security', name: 'Email Security', iconName: 'lucide:shieldCheck', element: OpsViewEmailSecurity },
],
},
{
name: 'Logs',
@@ -74,32 +110,48 @@ export class OpsDashboard extends DeesElement {
element: OpsViewLogs,
},
{
name: 'ApiTokens',
iconName: 'lucide:key',
element: OpsViewApiTokens,
name: 'Access',
iconName: 'lucide:keyRound',
subViews: [
{ slug: 'apitokens', name: 'API Tokens', iconName: 'lucide:key', element: OpsViewApiTokens },
],
},
{
name: 'Security',
iconName: 'lucide:shield',
element: OpsViewSecurity,
subViews: [
{ slug: 'overview', name: 'Overview', iconName: 'lucide:eye', element: OpsViewSecurityOverview },
{ slug: 'blocked', name: 'Blocked IPs', iconName: 'lucide:shieldBan', element: OpsViewSecurityBlocked },
{ slug: 'authentication', name: 'Authentication', iconName: 'lucide:lock', element: OpsViewSecurityAuthentication },
],
},
{
name: 'Certificates',
iconName: 'lucide:badgeCheck',
element: OpsViewCertificates,
},
{
name: 'RemoteIngress',
iconName: 'lucide:globe',
element: OpsViewRemoteIngress,
},
{
name: 'VPN',
iconName: 'lucide:shield',
element: OpsViewVpn,
},
];
/** URL slug for a view (explicit `slug` field, or lowercased name with spaces stripped). */
private slugFor(view: ITabbedView): string {
return view.slug ?? view.name.toLowerCase().replace(/\s+/g, '');
}
/** Find the parent group of a subview, or undefined for top-level views. */
private findParent(view: ITabbedView): ITabbedView | undefined {
return this.viewTabs.find((v) => v.subViews?.includes(view));
}
/** Look up a view (or subview) by its URL slug pair. */
private findViewBySlug(viewSlug: string, subSlug: string | null): ITabbedView | undefined {
const top = this.viewTabs.find((v) => this.slugFor(v) === viewSlug);
if (!top) return undefined;
if (subSlug && top.subViews) {
return top.subViews.find((sv) => this.slugFor(sv) === subSlug) ?? top;
}
return top;
}
private get globalMessages() {
const messages: Array<{ id: string; type: string; message: string; dismissible?: boolean }> = [];
const config = this.configState.config;
@@ -115,17 +167,19 @@ export class OpsDashboard extends DeesElement {
}
/**
* Get the current view tab based on the UI state's activeView.
* Get the current view tab based on the UI state's activeView/activeSubview.
* Used to pass the correct selectedView to dees-simple-appdash on initial render.
*/
private get currentViewTab() {
return this.viewTabs.find(t => t.name.toLowerCase() === this.uiState.activeView) || this.viewTabs[0];
private get currentViewTab(): ITabbedView {
return (
this.findViewBySlug(this.uiState.activeView, this.uiState.activeSubview) ?? this.viewTabs[0]
);
}
constructor() {
super();
document.title = 'DCRouter OpsServer';
// Subscribe to login state
const loginSubscription = appstate.loginStatePart
.select((stateArg) => stateArg)
@@ -138,7 +192,7 @@ export class OpsDashboard extends DeesElement {
}
});
this.rxSubscriptions.push(loginSubscription);
// Subscribe to config state (for global warnings)
const configSubscription = appstate.configStatePart
.select((stateArg) => stateArg)
@@ -153,38 +207,27 @@ export class OpsDashboard extends DeesElement {
.subscribe((uiState) => {
this.uiState = uiState;
// Sync appdash view when state changes (e.g., from URL navigation)
this.syncAppdashView(uiState.activeView);
this.syncAppdashView(uiState.activeView, uiState.activeSubview);
});
this.rxSubscriptions.push(uiSubscription);
}
/**
* Sync the dees-simple-appdash view selection with the current state.
* This is needed when the URL changes and we need to update the UI.
* This is needed when the URL changes externally (back/forward, deep link).
*/
private syncAppdashView(viewName: string): void {
private syncAppdashView(viewSlug: string, subviewSlug: string | null): void {
const appDash = this.shadowRoot?.querySelector('dees-simple-appdash') as any;
if (!appDash) return;
const targetTab = this.viewTabs.find(t => t.name.toLowerCase() === viewName);
if (!targetTab) return;
const targetView = this.findViewBySlug(viewSlug, subviewSlug);
if (!targetView) return;
// Check if we need to switch (avoid unnecessary updates)
if (appDash.selectedView === targetTab) return;
if (appDash.selectedView === targetView) return;
// Update the selected view programmatically
appDash.selectedView = targetTab;
// Update the displayed content
const content = appDash.shadowRoot?.querySelector('.appcontent');
if (content) {
if (appDash.currentView) {
appDash.currentView.remove();
}
const view = new targetTab.element();
content.appendChild(view);
appDash.currentView = view;
}
// Use loadView to update both selectedView and the mounted element.
// It will dispatch view-select; our handler skips when state already matches.
appDash.loadView(targetView);
}
public static styles = [
@@ -226,7 +269,7 @@ export class OpsDashboard extends DeesElement {
public async firstUpdated() {
const simpleLogin = this.shadowRoot!.querySelector('dees-simple-login') as any;
simpleLogin.addEventListener('login', (e: Event) => {
// Handle logout event
// Handle login event
const detail = (e as CustomEvent).detail;
this.login(detail.data.username, detail.data.password);
});
@@ -235,9 +278,24 @@ export class OpsDashboard extends DeesElement {
const appDash = this.shadowRoot!.querySelector('dees-simple-appdash');
if (appDash) {
appDash.addEventListener('view-select', (e: Event) => {
const viewName = (e as CustomEvent).detail.view.name.toLowerCase();
// Use router for navigation instead of direct state update
appRouter.navigateToView(viewName);
const view = (e as CustomEvent).detail.view as ITabbedView;
const parent = this.findParent(view);
const currentState = appstate.uiStatePart.getState();
if (parent) {
const parentSlug = this.slugFor(parent);
const subSlug = this.slugFor(view);
// Skip if already on this exact subview — preserves URL on initial mount
if (currentState?.activeView === parentSlug && currentState?.activeSubview === subSlug) {
return;
}
appRouter.navigateToView(parentSlug, subSlug);
} else {
const slug = this.slugFor(view);
if (currentState?.activeView === slug && !currentState?.activeSubview) {
return;
}
appRouter.navigateToView(slug);
}
});
// Handle logout event
@@ -283,12 +341,12 @@ export class OpsDashboard extends DeesElement {
const simpleLogin = this.shadowRoot!.querySelector('dees-simple-login') as any;
const form = simpleLogin.shadowRoot!.querySelector('dees-form') as any;
form.setStatus('pending', 'Logging in...');
const state = await appstate.loginStatePart.dispatchAction(appstate.loginAction, {
username,
password,
});
if (state.identity) {
console.log('Login successful');
this.loginState = state;
@@ -302,4 +360,4 @@ export class OpsDashboard extends DeesElement {
form!.reset();
}
}
}
}

2
ts_web/elements/overview/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from './ops-view-overview.js';
export * from './ops-view-config.js';

12
ts_web/elements/ops-view-config.ts → ts_web/elements/overview/ops-view-config.ts
View File

@@ -1,7 +1,7 @@
import * as plugins from '../plugins.js';
import * as shared from './shared/index.js';
import * as appstate from '../appstate.js';
import { appRouter } from '../router.js';
import * as plugins from '../../plugins.js';
import * as shared from '../shared/index.js';
import * as appstate from '../../appstate.js';
import { appRouter } from '../../router.js';
import {
DeesElement,
@@ -181,7 +181,7 @@ export class OpsViewConfig extends DeesElement {
}
const actions: IConfigSectionAction[] = [
{ label: 'View Emails', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'emails' } },
{ label: 'View Emails', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'email', subview: 'log' } },
];
return html`
@@ -305,7 +305,7 @@ export class OpsViewConfig extends DeesElement {
];
const actions: IConfigSectionAction[] = [
{ label: 'View Remote Ingress', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'remoteingress' } },
{ label: 'View Remote Ingress', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'network', subview: 'remoteingress' } },
];
return html`

6
ts_web/elements/ops-view-overview.ts → ts_web/elements/overview/ops-view-overview.ts
View File

@@ -1,6 +1,6 @@
import * as plugins from '../plugins.js';
import * as shared from './shared/index.js';
import * as appstate from '../appstate.js';
import * as plugins from '../../plugins.js';
import * as shared from '../shared/index.js';
import * as appstate from '../../appstate.js';
import {
DeesElement,

2
ts_web/elements/security/index.ts
View File

@@ -1,5 +1,3 @@
export * from './ops-view-security.js';
export * from './ops-view-security-overview.js';
export * from './ops-view-security-blocked.js';
export * from './ops-view-security-authentication.js';
export * from './ops-view-security-emailsecurity.js';

3
ts_web/elements/security/ops-view-security-authentication.ts
View File

@@ -1,4 +1,5 @@
import * as appstate from '../../appstate.js';
import { viewHostCss } from '../shared/css.js';
import {
DeesElement,
@@ -34,8 +35,8 @@ export class OpsViewSecurityAuthentication extends DeesElement {
public static styles = [
cssManager.defaultStyles,
viewHostCss,
css`
:host { display: block; }
h2 {
margin: 32px 0 16px 0;
font-size: 24px;

3
ts_web/elements/security/ops-view-security-blocked.ts
View File

@@ -1,4 +1,5 @@
import * as appstate from '../../appstate.js';
import { viewHostCss } from '../shared/css.js';
import {
DeesElement,
@@ -34,8 +35,8 @@ export class OpsViewSecurityBlocked extends DeesElement {
public static styles = [
cssManager.defaultStyles,
viewHostCss,
css`
:host { display: block; }
dees-statsgrid {
margin-bottom: 32px;
}

3
ts_web/elements/security/ops-view-security-overview.ts
View File

@@ -1,4 +1,5 @@
import * as appstate from '../../appstate.js';
import { viewHostCss } from '../shared/css.js';
import {
DeesElement,
@@ -34,8 +35,8 @@ export class OpsViewSecurityOverview extends DeesElement {
public static styles = [
cssManager.defaultStyles,
viewHostCss,
css`
:host { display: block; }
h2 {
margin: 32px 0 16px 0;
font-size: 24px;

114
ts_web/elements/security/ops-view-security.ts
View File

@@ -1,114 +0,0 @@
import * as appstate from '../../appstate.js';
import { appRouter } from '../../router.js';
import { viewHostCss } from '../shared/css.js';
import {
DeesElement,
customElement,
html,
state,
css,
cssManager,
type TemplateResult,
} from '@design.estate/dees-element';
// Side-effect imports register the subview custom elements
import './ops-view-security-overview.js';
import './ops-view-security-blocked.js';
import './ops-view-security-authentication.js';
import './ops-view-security-emailsecurity.js';
declare global {
interface HTMLElementTagNameMap {
'ops-view-security': OpsViewSecurity;
}
}
type TSecurityTab = 'overview' | 'blocked' | 'authentication' | 'emailsecurity';
@customElement('ops-view-security')
export class OpsViewSecurity extends DeesElement {
@state()
accessor selectedTab: TSecurityTab = 'overview';
private tabLabelMap: Record<TSecurityTab, string> = {
'overview': 'Overview',
'blocked': 'Blocked IPs',
'authentication': 'Authentication',
'emailsecurity': 'Email Security',
};
private labelToTab: Record<string, TSecurityTab> = {
'Overview': 'overview',
'Blocked IPs': 'blocked',
'Authentication': 'authentication',
'Email Security': 'emailsecurity',
};
private static isSecurityTab(s: string | null): s is TSecurityTab {
return s === 'overview' || s === 'blocked' || s === 'authentication' || s === 'emailsecurity';
}
constructor() {
super();
// Read initial subview from state (URL-driven)
const initialState = appstate.uiStatePart.getState()!;
if (OpsViewSecurity.isSecurityTab(initialState.activeSubview)) {
this.selectedTab = initialState.activeSubview;
}
// Subscribe to future changes (back/forward navigation, direct URL entry)
const sub = appstate.uiStatePart.select((s) => s.activeSubview).subscribe((sub) => {
if (OpsViewSecurity.isSecurityTab(sub) && sub !== this.selectedTab) {
this.selectedTab = sub;
}
});
this.rxSubscriptions.push(sub);
}
async firstUpdated() {
const toggle = this.shadowRoot!.querySelector('dees-input-multitoggle') as any;
if (toggle) {
const sub = toggle.changeSubject.subscribe(() => {
const tab = this.labelToTab[toggle.selectedOption];
if (tab && tab !== this.selectedTab) {
// Push URL → router updates state → subscription updates selectedTab
appRouter.navigateToView('security', tab);
}
});
this.rxSubscriptions.push(sub);
}
}
public static styles = [
cssManager.defaultStyles,
viewHostCss,
css`
dees-input-multitoggle {
margin-bottom: 24px;
}
`,
];
public render(): TemplateResult {
return html`
<dees-heading level="2">Security</dees-heading>
<dees-input-multitoggle
.type=${'single'}
.options=${['Overview', 'Blocked IPs', 'Authentication', 'Email Security']}
.selectedOption=${this.tabLabelMap[this.selectedTab]}
></dees-input-multitoggle>
${this.renderTabContent()}
`;
}
private renderTabContent(): TemplateResult {
switch (this.selectedTab) {
case 'overview': return html`<ops-view-security-overview></ops-view-security-overview>`;
case 'blocked': return html`<ops-view-security-blocked></ops-view-security-blocked>`;
case 'authentication': return html`<ops-view-security-authentication></ops-view-security-authentication>`;
case 'emailsecurity': return html`<ops-view-security-emailsecurity></ops-view-security-emailsecurity>`;
}
}
}