122 lines
3.3 KiB
TypeScript
122 lines
3.3 KiB
TypeScript
import { LitElement, html, css } from "lit";
|
|
import { property, state } from "lit/decorators.js";
|
|
import { when } from "lit/directives/when.js";
|
|
import { msg, localized, str } from "@lit/localize";
|
|
|
|
import { truncate } from "../utils/css";
|
|
import type { APIPaginatedList } from "../types/api";
|
|
|
|
type CrawlLog = {
|
|
timestamp: string;
|
|
logLevel: "error";
|
|
details: Record<string, any>;
|
|
context: string;
|
|
message: string;
|
|
};
|
|
|
|
@localized()
|
|
export class CrawlLogs extends LitElement {
|
|
static styles = [
|
|
truncate,
|
|
css`
|
|
btrix-numbered-list {
|
|
font-size: var(--sl-font-size-x-small);
|
|
}
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: 9rem 4rem 14rem 1fr;
|
|
line-height: 1.3;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.cell {
|
|
padding-left: var(--sl-spacing-x-small);
|
|
padding-right: var(--sl-spacing-x-small);
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
border-radius: var(--sl-border-radius-small);
|
|
padding: var(--sl-spacing-3x-small) var(--sl-spacing-2x-small);
|
|
text-transform: capitalize;
|
|
/* TODO handle non-errors */
|
|
background-color: var(--danger);
|
|
color: var(--sl-color-neutral-0);
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: var(--sl-spacing-large);
|
|
margin-bottom: var(--sl-spacing-x-large);
|
|
}
|
|
|
|
.message {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.url {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
`,
|
|
];
|
|
|
|
@property({ type: Object })
|
|
logs?: APIPaginatedList;
|
|
|
|
render() {
|
|
if (!this.logs) return;
|
|
return html`<btrix-numbered-list>
|
|
<btrix-numbered-list-header slot="header">
|
|
<div class="row">
|
|
<div class="cell">${msg("Date")}</div>
|
|
<div class="cell">${msg("Level")}</div>
|
|
<div class="cell">${msg("Error Message")}</div>
|
|
<div class="cell">${msg("Page URL")}</div>
|
|
</div>
|
|
</btrix-numbered-list-header>
|
|
${this.logs.items.map(
|
|
(log: CrawlLog, idx) => html`
|
|
<btrix-numbered-list-item>
|
|
<div class="row">
|
|
<div>
|
|
<sl-format-date
|
|
date=${log.timestamp}
|
|
month="2-digit"
|
|
day="2-digit"
|
|
year="2-digit"
|
|
hour="2-digit"
|
|
minute="2-digit"
|
|
second="2-digit"
|
|
hour-format="24"
|
|
>
|
|
</sl-format-date>
|
|
</div>
|
|
<div>
|
|
<span class="tag">${log.logLevel}</span>
|
|
</div>
|
|
<div class="message">${log.message}</div>
|
|
<div class="url" title="${log.details?.page}">
|
|
<a target="_blank" href="${log.details?.page}"
|
|
>${log.details?.page}</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</btrix-numbered-list-item>
|
|
`
|
|
)}
|
|
</btrix-numbered-list>
|
|
<footer>
|
|
<btrix-pagination
|
|
page=${this.logs.page}
|
|
totalCount=${this.logs.total}
|
|
size=${this.logs.pageSize}
|
|
>
|
|
</btrix-pagination>
|
|
</footer> `;
|
|
}
|
|
}
|