mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2024-12-26 05:19:05 +01:00
change default range to 12h, rework layout in system node views
This commit is contained in:
parent
6019891591
commit
0eb0aa1d3b
@ -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 />
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user