|
293 | 293 | {/snippet} |
294 | 294 |
|
295 | 295 | {#snippet connectorName(name: string)} |
296 | | - <span class="relative h-[20px] min-w-0 flex-1 overflow-hidden"> |
| 296 | + <span class="relative h-5 min-w-0 flex-1 overflow-hidden"> |
297 | 297 | <span class="absolute inset-0 overflow-hidden text-left text-nowrap text-ellipsis" dir="rtl"> |
298 | 298 | {name} |
299 | 299 | </span> |
|
310 | 310 | aria-label="Unhealthy" |
311 | 311 | class="fd fd-triangle-alert absolute top-1/2 right-full mr-1 -translate-y-1/2 cursor-pointer text-[16px] leading-none text-(--latency-slow)" |
312 | 312 | ></span> |
313 | | - <Popover class="z-20 max-w-lg text-[14px] leading-[20px]"> |
| 313 | + <Popover class="z-20 max-w-lg"> |
314 | 314 | <div class="flex flex-nowrap items-start gap-4"> |
315 | 315 | {#if description} |
316 | 316 | <span class="min-w-0 flex-1 wrap-break-word whitespace-pre-wrap"> |
|
494 | 494 | relation?: string, |
495 | 495 | connectorEndpointName?: string |
496 | 496 | )} |
497 | | - <td class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.records}" |
| 497 | + <td class="text-end font-dm-mono text-nowrap {numberWidth.records}" |
498 | 498 | ><span class={ioActive ? 'text-success-600-400' : ''}>{formatQty(m.total_records)}</span></td |
499 | 499 | > |
500 | | - <td class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.bytes}" |
| 500 | + <td class="text-end font-dm-mono text-nowrap {numberWidth.bytes}" |
501 | 501 | ><span class={ioActive ? 'text-success-600-400' : ''}>{@render bytes(m.total_bytes)}</span></td |
502 | 502 | > |
503 | | - <td class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.bufferedRecords} {bufferedGap}" |
| 503 | + <td class="text-end font-dm-mono text-nowrap {numberWidth.bufferedRecords} {bufferedGap}" |
504 | 504 | >{formatQty(m.buffered_records)}</td |
505 | 505 | > |
506 | | - <td class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.bufferedBytes}" |
| 506 | + <td class="text-end font-dm-mono text-nowrap {numberWidth.bufferedBytes}" |
507 | 507 | >{@render bytes(m.buffered_bytes)}</td |
508 | 508 | > |
509 | 509 | <td |
510 | | - class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.groupLatency} {groupGap}" |
| 510 | + class="text-end font-dm-mono text-nowrap {numberWidth.groupLatency} {groupGap}" |
511 | 511 | data-testid="box-input-latency-p99" |
512 | 512 | > |
513 | 513 | {#if typeof m.processing_latency_p99_micros === 'number'} |
|
523 | 523 | {/if} |
524 | 524 | </td> |
525 | 525 | <td |
526 | | - class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.groupCount} {groupGap} {m.num_parse_errors > |
| 526 | + class="text-end font-dm-mono text-nowrap {numberWidth.groupCount} {groupGap} {m.num_parse_errors > |
527 | 527 | 0 |
528 | 528 | ? 'text-error-500' |
529 | 529 | : ''}" |
|
542 | 542 | {/if} |
543 | 543 | </td> |
544 | 544 | <td |
545 | | - class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.count} {m.num_transport_errors > |
| 545 | + class="text-end font-dm-mono text-nowrap {numberWidth.count} {m.num_transport_errors > |
546 | 546 | 0 |
547 | 547 | ? 'text-error-500' |
548 | 548 | : ''}" |
|
588 | 588 | relation?: string, |
589 | 589 | connectorEndpointName?: string |
590 | 590 | )} |
591 | | - <td class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.records}" |
| 591 | + <td class="text-end font-dm-mono text-nowrap {numberWidth.records}" |
592 | 592 | ><span class={ioActive ? 'text-success-600-400' : ''}>{formatQty(m.transmitted_records)}</span |
593 | 593 | ></td |
594 | 594 | > |
595 | | - <td class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.records}" |
| 595 | + <td class="text-end font-dm-mono text-nowrap {numberWidth.records}" |
596 | 596 | ><span class={ioActive ? 'text-success-600-400' : ''} |
597 | 597 | >{m.batch_records_written != null ? formatQty(m.batch_records_written) : '—'}</span |
598 | 598 | ></td |
599 | 599 | > |
600 | | - <td class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.bytes}" |
| 600 | + <td class="text-end font-dm-mono text-nowrap {numberWidth.bytes}" |
601 | 601 | ><span class={ioActive ? 'text-success-600-400' : ''}>{@render bytes(m.transmitted_bytes)}</span |
602 | 602 | ></td |
603 | 603 | > |
604 | | - <td class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.bufferedRecords} {bufferedGap}" |
| 604 | + <td class="text-end font-dm-mono text-nowrap {numberWidth.bufferedRecords} {bufferedGap}" |
605 | 605 | >{formatQty(m.buffered_records)}</td |
606 | 606 | > |
607 | | - <td class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.count}" |
| 607 | + <td class="text-end font-dm-mono text-nowrap {numberWidth.count}" |
608 | 608 | >{formatQty(m.buffered_batches)}</td |
609 | 609 | > |
610 | | - <td class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.records}" |
| 610 | + <td class="text-end font-dm-mono text-nowrap {numberWidth.records}" |
611 | 611 | >{formatQty(m.queued_records)}</td |
612 | 612 | > |
613 | | - <td class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.count}" |
| 613 | + <td class="text-end font-dm-mono text-nowrap {numberWidth.count}" |
614 | 614 | >{formatQty(m.queued_batches)}</td |
615 | 615 | > |
616 | | - <td class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.groupCount} {groupGap}"> |
| 616 | + <td class="text-end font-dm-mono text-nowrap {numberWidth.groupCount} {groupGap}"> |
617 | 617 | {#if m.num_encode_errors > 0 && relation && connectorEndpointName && onConnectorSelect} |
618 | 618 | <button |
619 | 619 | data-testid="btn-encode-errors" |
|
627 | 627 | {formatQty(m.num_encode_errors)} |
628 | 628 | {/if} |
629 | 629 | </td> |
630 | | - <td class="text-end font-dm-mono text-[14px] text-nowrap {numberWidth.count}"> |
| 630 | + <td class="text-end font-dm-mono text-nowrap {numberWidth.count}"> |
631 | 631 | {#if m.num_transport_errors > 0 && relation && connectorEndpointName && onConnectorSelect} |
632 | 632 | <button |
633 | 633 | data-testid="btn-output-transport-errors" |
|
738 | 738 | <div class="latency-colors w-full {maxWidth}" data-testid={testId}> |
739 | 739 | <div class="scrollbar w-full overflow-x-auto"> |
740 | 740 | <div class="bg-white-dark w-max min-w-full overflow-hidden rounded"> |
741 | | - <table class="metrics-table table h-min w-full text-[14px] leading-[20px]"> |
| 741 | + <!-- Header cells fit two 20px lines plus padding, in 14px font like the rows. The header |
| 742 | + line and the row lines share one tone. --> |
| 743 | + <table |
| 744 | + class="table h-min w-full text-base" |
| 745 | + > |
742 | 746 | <thead> |
743 | 747 | {@render columnHeaders(chevronGutter, [...allData.keys()])} |
744 | 748 | </thead> |
|
831 | 835 | <style> |
832 | 836 | /* Header cells fit two 20px lines plus padding, in 14px type like the rows. The header |
833 | 837 | line and the row lines share one tone. */ |
834 | | - .metrics-table :global(th) { |
| 838 | + .table :global(th) { |
835 | 839 | padding: 0.5rem; |
836 | 840 | height: 56px; |
837 | 841 | vertical-align: middle; |
838 | | - font-size: 0.875rem; |
839 | | - line-height: 1.25rem; |
840 | 842 | font-weight: 500; |
841 | 843 | text-align: start; |
842 | 844 | } |
843 | | - .metrics-table :global(td) { |
| 845 | + .table :global(td) { |
844 | 846 | padding-inline: 0.5rem; |
845 | 847 | } |
846 | | - .metrics-table :global(thead), |
847 | | - .metrics-table :global(tr) { |
| 848 | + .table :global(thead), |
| 849 | + .table :global(tr) { |
848 | 850 | border-color: var(--color-surface-100); |
849 | 851 | } |
850 | | - :global(.dark) .metrics-table :global(thead), |
851 | | - :global(.dark) .metrics-table :global(tr) { |
| 852 | + :global(.dark) .table :global(thead), |
| 853 | + :global(.dark) .table :global(tr) { |
852 | 854 | border-color: var(--color-surface-900); |
853 | 855 | } |
854 | 856 |
|
|