fix layout of metrichealth table

This commit is contained in:
Christoph Kluge
2026-02-18 16:14:54 +01:00
parent 57536d982c
commit 89e06c3530

View File

@@ -276,11 +276,11 @@
<Row> <Row>
<Col> <Col>
<Card> <Card>
<Table hover> <Table hover responsive>
<thead> <thead>
<!-- Header Row 1: Titles and Sorting --> <!-- Header Row 1: Titles and Sorting -->
<tr> <tr>
<th style="width:10%; max-width:12.5%;" onclick={() => sortBy('hostname')}> <th style="width: 7.5%; min-width: 100px; max-width:10%;" onclick={() => sortBy('hostname')}>
Host Host
<Icon <Icon
name="caret-{healthTableSorting['hostname'].dir}{healthTableSorting['hostname'] name="caret-{healthTableSorting['hostname'].dir}{healthTableSorting['hostname']
@@ -289,7 +289,7 @@
: ''}" : ''}"
/> />
</th> </th>
<th style="width:10%; max-width:12.5%;" onclick={() => sortBy('schedulerState')}> <th style="width: 7.5%; min-width: 100px; max-width:10%;" onclick={() => sortBy('schedulerState')}>
Scheduler State Scheduler State
<Icon <Icon
name="caret-{healthTableSorting['schedulerState'].dir}{healthTableSorting['schedulerState'] name="caret-{healthTableSorting['schedulerState'].dir}{healthTableSorting['schedulerState']
@@ -298,7 +298,7 @@
: ''}" : ''}"
/> />
</th> </th>
<th style="width:10%; max-width:12.5%;" onclick={() => sortBy('healthState')}> <th style="width: 7.5%; min-width: 100px; max-width:10%;" onclick={() => sortBy('healthState')}>
Health State Health State
<Icon <Icon
name="caret-{healthTableSorting['healthState'].dir}{healthTableSorting['healthState'] name="caret-{healthTableSorting['healthState'].dir}{healthTableSorting['healthState']
@@ -343,17 +343,17 @@
<tbody> <tbody>
{#each filteredTableData as host (host.hostname)} {#each filteredTableData as host (host.hostname)}
<tr> <tr>
<th><b><a href="/monitoring/node/{cluster}/{host.hostname}" target="_blank">{host.hostname}</a></b></th> <th scope="row"><b><a href="/monitoring/node/{cluster}/{host.hostname}" target="_blank">{host.hostname}</a></b></th>
<td>{host.schedulerState}</td> <td>{host.schedulerState}</td>
<td>{host.healthState}</td> <td>{host.healthState}</td>
<td> <td style="max-width: 250px;">
{#each Object.keys(host.healthData) as hkey} {#each Object.keys(host.healthData) as hkey}
<p> <p>
<b>{hkey}</b>: {host.healthData[hkey]} <b>{hkey}</b>: {host.healthData[hkey]}
</p> </p>
{/each} {/each}
</td> </td>
<td> <td style="max-width: 250px;">
{#each Object.keys(host.metaData) as mkey} {#each Object.keys(host.metaData) as mkey}
<p> <p>
<b>{mkey}</b>: {host.metaData[mkey]} <b>{mkey}</b>: {host.metaData[mkey]}