53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { LitElement, html, css, property, customElement } from './plugins.js';
|
|
import type { CSSResult, TemplateResult } from './plugins.js';
|
|
import { sharedStyles, tableStyles } from './sw-dash-styles.js';
|
|
import { SwDashTable } from './sw-dash-table.js';
|
|
import type { IColumnConfig } from './sw-dash-table.js';
|
|
|
|
export interface IDomainStats {
|
|
domain: string;
|
|
totalResources: number;
|
|
totalSize: number;
|
|
totalHits: number;
|
|
totalMisses: number;
|
|
hitRate: number;
|
|
}
|
|
|
|
/**
|
|
* Domains table view component
|
|
*/
|
|
@customElement('sw-dash-domains')
|
|
export class SwDashDomains extends LitElement {
|
|
public static styles: CSSResult[] = [
|
|
sharedStyles,
|
|
tableStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
`
|
|
];
|
|
|
|
@property({ type: Array }) accessor domains: IDomainStats[] = [];
|
|
|
|
private columns: IColumnConfig[] = [
|
|
{ key: 'domain', label: 'Domain' },
|
|
{ key: 'totalResources', label: 'Resources', className: 'num', formatter: SwDashTable.formatNumber },
|
|
{ key: 'totalSize', label: 'Total Size', className: 'num', formatter: SwDashTable.formatBytes },
|
|
{ key: 'totalHits', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
|
|
{ key: 'totalMisses', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
|
|
{ key: 'hitRate', label: 'Hit Rate' },
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<sw-dash-table
|
|
.columns="${this.columns}"
|
|
.data="${this.domains}"
|
|
filterPlaceholder="Filter domains..."
|
|
infoLabel="domains"
|
|
></sw-dash-table>
|
|
`;
|
|
}
|
|
}
|