120 lines
3.7 KiB
TypeScript
120 lines
3.7 KiB
TypeScript
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>`;
|
|
}
|
|
}
|
|
}
|