98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
|
import * as shared from './shared/index.js';
|
||
|
|
import * as appstate from '../appstate.js';
|
||
|
|
import {
|
||
|
|
DeesElement,
|
||
|
|
customElement,
|
||
|
|
html,
|
||
|
|
state,
|
||
|
|
css,
|
||
|
|
cssManager,
|
||
|
|
type TemplateResult,
|
||
|
|
} from '@design.estate/dees-element';
|
||
|
|
|
||
|
|
@customElement('ob-view-domains')
|
||
|
|
export class ObViewDomains extends DeesElement {
|
||
|
|
@state()
|
||
|
|
accessor networkState: appstate.INetworkState = {
|
||
|
|
targets: [],
|
||
|
|
stats: null,
|
||
|
|
trafficStats: null,
|
||
|
|
dnsRecords: [],
|
||
|
|
domains: [],
|
||
|
|
gatewayDomains: [],
|
||
|
|
gatewayDnsRecords: [],
|
||
|
|
certificates: [],
|
||
|
|
};
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
const networkSub = appstate.networkStatePart.select((s) => s).subscribe((newState) => {
|
||
|
|
this.networkState = newState;
|
||
|
|
});
|
||
|
|
this.rxSubscriptions.push(networkSub);
|
||
|
|
}
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
cssManager.defaultStyles,
|
||
|
|
shared.viewHostCss,
|
||
|
|
css`
|
||
|
|
.table {
|
||
|
|
border: 1px solid var(--ci-shade-2, #e4e4e7);
|
||
|
|
border-radius: 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.row {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 2fr 1fr 120px 120px 140px;
|
||
|
|
gap: 16px;
|
||
|
|
align-items: center;
|
||
|
|
padding: 14px 16px;
|
||
|
|
border-bottom: 1px solid var(--ci-shade-2, #e4e4e7);
|
||
|
|
}
|
||
|
|
.row:last-child { border-bottom: none; }
|
||
|
|
.header { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ci-shade-5, #71717a); background: var(--ci-shade-1, #f4f4f5); }
|
||
|
|
.domain { font-weight: 600; }
|
||
|
|
.muted { color: var(--ci-shade-5, #71717a); font-size: 13px; }
|
||
|
|
.badge { border-radius: 999px; padding: 3px 8px; background: var(--ci-shade-1, #f4f4f5); font-size: 12px; }
|
||
|
|
a { color: var(--ci-primary, #2563eb); text-decoration: none; }
|
||
|
|
.empty { padding: 32px; text-align: center; color: var(--ci-shade-5, #71717a); }
|
||
|
|
`,
|
||
|
|
];
|
||
|
|
|
||
|
|
async connectedCallback() {
|
||
|
|
super.connectedCallback();
|
||
|
|
await appstate.networkStatePart.dispatchAction(appstate.fetchGatewayDomainsAction, null);
|
||
|
|
}
|
||
|
|
|
||
|
|
public render(): TemplateResult {
|
||
|
|
const domains = this.networkState.gatewayDomains;
|
||
|
|
return html`
|
||
|
|
<ob-sectionheading>Domains</ob-sectionheading>
|
||
|
|
<div class="muted" style="margin-bottom: 16px;">
|
||
|
|
Domains are managed in dcrouter. Onebox shows gateway visibility for deployed services.
|
||
|
|
</div>
|
||
|
|
<div class="table">
|
||
|
|
<div class="row header">
|
||
|
|
<span>Domain</span>
|
||
|
|
<span>Source</span>
|
||
|
|
<span>Authoritative</span>
|
||
|
|
<span>Services</span>
|
||
|
|
<span>Actions</span>
|
||
|
|
</div>
|
||
|
|
${domains.length ? domains.map((domain) => html`
|
||
|
|
<div class="row">
|
||
|
|
<span>
|
||
|
|
<span class="domain">${domain.name}</span>
|
||
|
|
${domain.providerId ? html`<div class="muted">Provider: ${domain.providerId}</div>` : ''}
|
||
|
|
</span>
|
||
|
|
<span><span class="badge">${domain.source || 'dcrouter'}</span></span>
|
||
|
|
<span>${domain.authoritative ? 'Yes' : 'No'}</span>
|
||
|
|
<span>${domain.serviceCount || 0}</span>
|
||
|
|
<span>${domain.manageUrl ? html`<a href=${domain.manageUrl} target="_blank" rel="noopener">Manage in dcrouter</a>` : '-'}</span>
|
||
|
|
</div>
|
||
|
|
`) : html`<div class="empty">No gateway domains found. Configure a dcrouter gateway in Settings.</div>`}
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|