Show details in crawl error log (#1079)

Shows crawl error log details in a dialog. Since the detail object does not always follow a specific format, this iteration uses the detail key in uppercase as the label.

frontend/src/components/crawl-logs.ts

@@ -25,9 +25,8 @@ export class CrawlLogs extends LitElement {
 
       .row {
         display: grid;
-        grid-template-columns: 9rem 4rem 14rem 1fr;
+        grid-template-columns: 9rem 4rem 15rem 1fr;
         line-height: 1.3;
-        max-width: 800px;
       }
 
       .cell {
@@ -61,12 +60,37 @@ export class CrawlLogs extends LitElement {
         overflow: hidden;
         white-space: nowrap;
       }
+
+      a {
+        color: inherit;
+      }
+
+      a:hover {
+        text-decoration: none;
+      }
+
+      pre {
+        white-space: pre-wrap;
+        font-family: var(--sl-font-mono);
+        font-size: var(--sl-font-size-x-small);
+        margin: 0;
+        padding: var(--sl-spacing-small);
+        border: 1px solid var(--sl-panel-border-color);
+        border-radius: var(--sl-border-radius-medium);
+      }
     `,
   ];
 
   @property({ type: Object })
   logs?: APIPaginatedList;
 
+  @state()
+  private selectedLog:
+    | (CrawlLog & {
+        index: number;
+      })
+    | null = null;
+
   render() {
     if (!this.logs) return;
     return html`<btrix-numbered-list>
@@ -78,9 +102,21 @@ export class CrawlLogs extends LitElement {
             <div class="cell">${msg("Page URL")}</div>
           </div>
         </btrix-numbered-list-header>
-        ${this.logs.items.map(
+        ${this.logs.items.map((log: CrawlLog, idx) => {
-          (log: CrawlLog, idx) => html`
+          const selected = this.selectedLog?.index === idx;
-            <btrix-numbered-list-item>
+          return html`
+            <btrix-numbered-list-item
+              hoverable
+              ?selected=${selected}
+              aria-selected="${selected}"
+              @click=${() => {
+                this.selectedLog = {
+                  index: idx,
+                  ...log,
+                };
+              }}
+            >
+              <div slot="marker">${idx + 1}.</div>
               <div class="row">
                 <div>
                   <sl-format-date
@@ -106,8 +142,8 @@ export class CrawlLogs extends LitElement {
                 </div>
               </div>
             </btrix-numbered-list-item>
-          `
+          `;
-        )}
+        })}
       </btrix-numbered-list>
       <footer>
         <btrix-pagination
@@ -116,6 +152,43 @@ export class CrawlLogs extends LitElement {
           size=${this.logs.pageSize}
         >
         </btrix-pagination>
-      </footer> `;
+      </footer>
+      <btrix-dialog
+        label=${msg("Log Details")}
+        ?open=${this.selectedLog}
+        style="--width: 40rem"
+        @sl-after-hide=${() => (this.selectedLog = null)}
+        >${this.renderLogDetails()}</btrix-dialog
+      > `;
+  }
+
+  private renderLogDetails() {
+    if (!this.selectedLog) return;
+    const { details } = this.selectedLog;
+    return html`
+      <btrix-desc-list>
+        <btrix-desc-list-item label=${msg("Timestamp").toUpperCase()}>
+          ${this.selectedLog.timestamp}
+        </btrix-desc-list-item>
+        ${Object.entries(details).map(
+          ([key, value]) => html`
+            <btrix-desc-list-item label=${key.toUpperCase()}>
+              ${key === "stack" ||
+              (typeof value !== "string" && typeof value !== "number")
+                ? this.renderPre(value)
+                : value ?? "--"}
+            </btrix-desc-list-item>
+          `
+        )}
+      </btrix-desc-list>
+    `;
+  }
+
+  private renderPre(value: any) {
+    let str = value;
+    if (typeof value !== "string") {
+      str = JSON.stringify(value, null, 2);
+    }
+    return html`<pre><code>${str}</code></pre>`;
   }
 }

frontend/src/components/numbered-list.ts

@@ -24,6 +24,12 @@ export class NumberedListItem extends LitElement {
   @property({ type: Boolean })
   isEven: boolean = false;
 
+  @property({ type: Boolean })
+  selected: boolean = false;
+
+  @property({ type: Boolean })
+  hoverable: boolean = false;
+
   static styles = css`
     :host,
     .item {
@@ -65,7 +71,17 @@ export class NumberedListItem extends LitElement {
     }
 
     .item.even .content {
-      background-color: var(--sl-color-neutral-50); */
+      background-color: var(--sl-color-neutral-50);
+    }
+
+    .item.hoverable {
+      cursor: pointer;
+    }
+
+    .item.selected .content,
+    .item.hoverable:hover .content {
+      background-color: var(--sl-color-blue-500);
+      color: var(--sl-color-neutral-0);
     }
   `;
 
@@ -77,6 +93,8 @@ export class NumberedListItem extends LitElement {
           first: this.isFirst,
           last: this.isLast,
           even: this.isEven,
+          selected: this.selected,
+          hoverable: this.hoverable,
         })}
       >
         <div class="marker"><slot name="marker"></slot></div>