change default range to 12h, rework layout in system node views

This commit is contained in:
Christoph Kluge 2024-10-02 14:37:32 +02:00
parent 6019891591
commit 0eb0aa1d3b
3 changed files with 53 additions and 39 deletions

View File

@ -13,6 +13,7 @@
import {
Row,
Col,
Input,
InputGroup,
InputGroupText,
Icon,
@ -43,7 +44,7 @@
if (from == null || to == null) {
to = new Date(Date.now());
from = new Date(to.getTime());
from.setMinutes(from.getMinutes() - 30);
from.setHours(from.getHours() - 12);
}
const initialized = getContext("initialized")
@ -135,26 +136,38 @@
{:else if $initq.fetching}
<Spinner />
{:else}
<!-- Node Col -->
<Col>
<InputGroup>
<InputGroupText><Icon name="hdd" /></InputGroupText>
<InputGroupText>{hostname} ({cluster})</InputGroupText>
<InputGroupText>Selected Node</InputGroupText>
<Input style="background-color: white;"type="text" value="{hostname} ({cluster})" disabled/>
</InputGroup>
</Col>
<!-- Time Col -->
<Col>
<TimeSelection bind:from bind:to />
</Col>
<!-- Concurrent Col -->
<Col>
{#if $nodeJobsData.fetching}
<Spinner />
{:else if $nodeJobsData.data}
Currently running jobs on this node: {$nodeJobsData.data.jobs.count}
[
<a
href="/monitoring/jobs/?cluster={cluster}&state=running&node={hostname}"
target="_blank">View in Job List</a
> ]
<InputGroup>
<InputGroupText><Icon name="activity" /></InputGroupText>
<InputGroupText>Activity</InputGroupText>
<Input style="background-color: white;"type="text" value="{$nodeJobsData.data.jobs.count} Jobs" disabled/>
<a title="Show jobs running on this node" href="/monitoring/jobs/?cluster={cluster}&state=running&node={hostname}" target="_blank" class="btn btn-outline-secondary" role="button" aria-disabled="true">
<Icon name="view-list" /> Show List
</a>
</InputGroup>
{:else}
<Input type="text" disabled>
No currently running jobs.
</Input>
{/if}
</Col>
<!-- Refresh Col-->
<Col>
<Refresher
on:refresh={() => {
@ -164,9 +177,6 @@
}}
/>
</Col>
<Col>
<TimeSelection bind:from bind:to />
</Col>
{/if}
</Row>
<br />

View File

@ -42,7 +42,7 @@
if (from == null || to == null) {
to = new Date(Date.now());
from = new Date(to.getTime());
from.setMinutes(from.getMinutes() - 30);
from.setHours(from.getHours() - 12);
}
const initialized = getContext("initialized");
@ -117,18 +117,23 @@
{:else if $initq.fetching}
<Spinner />
{:else}
<!-- Node Col-->
<Col>
<Refresher
on:refresh={() => {
const diff = Date.now() - to;
from = new Date(from.getTime() + diff);
to = new Date(to.getTime() + diff);
}}
/>
<InputGroup>
<InputGroupText><Icon name="hdd" /></InputGroupText>
<InputGroupText>Find Node</InputGroupText>
<Input
placeholder="hostname..."
type="text"
bind:value={hostnameFilter}
/>
</InputGroup>
</Col>
<!-- Range Col-->
<Col>
<TimeSelection bind:from bind:to />
</Col>
<!-- Metric Col-->
<Col>
<InputGroup>
<InputGroupText><Icon name="graph-up" /></InputGroupText>
@ -142,16 +147,15 @@
</select>
</InputGroup>
</Col>
<!-- Refresh Col-->
<Col>
<InputGroup>
<InputGroupText><Icon name="hdd" /></InputGroupText>
<InputGroupText>Find Node</InputGroupText>
<Input
placeholder="hostname..."
type="text"
bind:value={hostnameFilter}
/>
</InputGroup>
<Refresher
on:refresh={() => {
const diff = Date.now() - to;
from = new Date(from.getTime() + diff);
to = new Date(to.getTime() + diff);
}}
/>
</Col>
{/if}
</Row>

View File

@ -9,7 +9,7 @@
-->
<script>
import { createEventDispatcher } from "svelte";
import { Button, Icon, InputGroup } from "@sveltestrap/sveltestrap";
import { Button, Icon, Input, InputGroup } from "@sveltestrap/sveltestrap";
const dispatch = createEventDispatcher();
@ -32,15 +32,8 @@
</script>
<InputGroup>
<Button
outline
on:click={() => dispatch("refresh")}
disabled={refreshInterval != null}
>
<Icon name="arrow-clockwise" /> Refresh
</Button>
<select
class="form-select"
<Input
type="select"
bind:value={refreshInterval}
on:change={refreshIntervalChanged}
>
@ -49,6 +42,13 @@
<option value={60 * 1000}>Update every minute</option>
<option value={2 * 60 * 1000}>Update every two minutes</option>
<option value={5 * 60 * 1000}>Update every 5 minutes</option>
</select>
</Input>
<Button
outline
on:click={() => dispatch("refresh")}
disabled={refreshInterval != null}
>
<Icon name="arrow-clockwise" /> Refresh
</Button>
</InputGroup>