diff --git a/ts_web/elements/sz-route-card.ts b/ts_web/elements/sz-route-card.ts index dbcc110..ba1a8e8 100644 --- a/ts_web/elements/sz-route-card.ts +++ b/ts_web/elements/sz-route-card.ts @@ -55,12 +55,21 @@ export interface IRouteSecurity { rateLimit?: { enabled: boolean; maxRequests: number; window: number }; } +export interface IRouteMetadata { + securityProfileRef?: string; + networkTargetRef?: string; + securityProfileName?: string; + networkTargetName?: string; + lastResolvedAt?: number; +} + export interface IRouteConfig { id?: string; match: IRouteMatch; action: IRouteAction; security?: IRouteSecurity; headers?: { request?: Record; response?: Record }; + metadata?: IRouteMetadata; name?: string; description?: string; priority?: number; @@ -127,6 +136,10 @@ export class SzRouteCard extends DeesElement { rateLimit: { enabled: true, maxRequests: 100, window: 60 }, maxConnections: 1000, }, + metadata: { + securityProfileName: 'STANDARD', + networkTargetName: 'LOSSLESS_INFRA', + }, } satisfies IRouteConfig} > @@ -296,6 +309,21 @@ export class SzRouteCard extends DeesElement { border-left-color: ${cssManager.bdTheme('#f59e0b', '#f59e0b')}; } + .section.linked { + border-left-color: ${cssManager.bdTheme('#8b5cf6', '#8b5cf6')}; + } + + .linked-name { + display: inline-flex; + padding: 1px 6px; + border-radius: 3px; + font-size: 12px; + font-weight: 600; + font-family: monospace; + background: ${cssManager.bdTheme('#ede9fe', 'rgba(139, 92, 246, 0.15)')}; + color: ${cssManager.bdTheme('#6d28d9', '#a78bfa')}; + } + .section-label { font-size: 10px; font-weight: 600; @@ -624,6 +652,9 @@ export class SzRouteCard extends DeesElement { ` : ''} + + ${this.renderLinked()} + ${this.renderFeatures()} @@ -638,12 +669,43 @@ export class SzRouteCard extends DeesElement { )}`; } + private renderLinked(): TemplateResult { + const meta = this.route?.metadata; + if (!meta) return html``; + const hasProfile = !!meta.securityProfileName; + const hasTarget = !!meta.networkTargetName; + if (!hasProfile && !hasTarget) return html``; + + return html` +
+ + ${hasProfile + ? html` +
+ Profile + ${meta.securityProfileName} +
+ ` + : ''} + ${hasTarget + ? html` +
+ Target + ${meta.networkTargetName} +
+ ` + : ''} +
+ `; + } + private renderFeatures(): TemplateResult { if (!this.route) return html``; const features: TemplateResult[] = []; const action = this.route.action; const security = this.route.security; const headers = this.route.headers; + const meta = this.route.metadata; if (action.tls) { features.push(html`🔒TLS`); @@ -660,6 +722,9 @@ export class SzRouteCard extends DeesElement { if (headers) { features.push(html`Headers`); } + if (meta?.securityProfileName || meta?.networkTargetName) { + features.push(html`🔗Linked`); + } if (features.length === 0) return html``; return html`
${features}
`;