add overflow-x to statsTable, use sveltestrap input

This commit is contained in:
Christoph Kluge 2024-09-10 12:14:34 +02:00
parent 065b32755a
commit b1cb45dfe6
2 changed files with 7 additions and 2 deletions

View File

@ -418,6 +418,7 @@
<TabPane <TabPane
tabId="stats" tabId="stats"
tab="Statistics Table" tab="Statistics Table"
class="overflow-x-auto"
active={!somethingMissing} active={!somethingMissing}
> >
{#if $jobMetrics?.data?.jobMetrics} {#if $jobMetrics?.data?.jobMetrics}

View File

@ -11,6 +11,7 @@
import { import {
Button, Button,
Table, Table,
Input,
InputGroup, InputGroup,
InputGroupText, InputGroupText,
Icon, Icon,
@ -86,6 +87,7 @@
<Table class="mb-0"> <Table class="mb-0">
<thead> <thead>
<!-- Header Row 1: Selectors -->
<tr> <tr>
<th> <th>
<Button outline on:click={() => (isMetricSelectionOpen = true)}> <Button outline on:click={() => (isMetricSelectionOpen = true)}>
@ -93,20 +95,22 @@
</Button> </Button>
</th> </th>
{#each selectedMetrics as metric} {#each selectedMetrics as metric}
<!-- To Match Row-2 Header Field Count-->
<th colspan={selectedScopes[metric] == "node" ? 3 : 4}> <th colspan={selectedScopes[metric] == "node" ? 3 : 4}>
<InputGroup> <InputGroup>
<InputGroupText> <InputGroupText>
{metric} {metric}
</InputGroupText> </InputGroupText>
<select class="form-select" bind:value={selectedScopes[metric]}> <Input type="select" bind:value={selectedScopes[metric]}>
{#each scopesForMetric(metric, jobMetrics) as scope} {#each scopesForMetric(metric, jobMetrics) as scope}
<option value={scope}>{scope}</option> <option value={scope}>{scope}</option>
{/each} {/each}
</select> </Input>
</InputGroup> </InputGroup>
</th> </th>
{/each} {/each}
</tr> </tr>
<!-- Header Row 2: Fields -->
<tr> <tr>
<th>Node</th> <th>Node</th>
{#each selectedMetrics as metric} {#each selectedMetrics as metric}