2024-10-11 12:30:55 +02:00
|
|
|
<!--
|
2024-10-14 11:55:59 +02:00
|
|
|
@component Cluster Per Node List component; renders current state of SELECTABLE metrics for ALL nodes
|
|
|
|
|
|
|
|
Properties:
|
|
|
|
- `cluster String`: The cluster to show status information for
|
|
|
|
- `from Date?`: Custom Time Range selection 'from' [Default: null]
|
|
|
|
- `to Date?`: Custom Time Range selection 'to' [Default: null]
|
2024-10-11 12:30:55 +02:00
|
|
|
-->
|
|
|
|
|
|
|
|
<script>
|
2024-10-14 11:55:59 +02:00
|
|
|
import { Row, Table } from "@sveltestrap/sveltestrap";
|
|
|
|
import {
|
|
|
|
stickyHeader
|
|
|
|
} from "../generic/utils.js";
|
|
|
|
import NodeListRow from "./nodelist/NodeListRow.svelte";
|
|
|
|
|
|
|
|
export let cluster;
|
2024-10-14 18:37:48 +02:00
|
|
|
export let data = null;
|
2024-10-14 11:55:59 +02:00
|
|
|
export let selectedMetrics = [];
|
|
|
|
export let systemUnits = null;
|
|
|
|
|
|
|
|
// Always use ONE BIG list, but: Make copyable markers -> Nodeinfo ! (like in markdown)
|
|
|
|
|
2024-10-11 12:30:55 +02:00
|
|
|
let headerPaddingTop = 0;
|
|
|
|
stickyHeader(
|
|
|
|
".cc-table-wrapper > table.table >thead > tr > th.position-sticky:nth-child(1)",
|
|
|
|
(x) => (headerPaddingTop = x),
|
|
|
|
);
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<Row>
|
2024-10-14 11:55:59 +02:00
|
|
|
<div class="col cc-table-wrapper">
|
2024-10-11 12:30:55 +02:00
|
|
|
<Table cellspacing="0px" cellpadding="0px">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th
|
2024-10-14 18:37:48 +02:00
|
|
|
class="position-sticky top-0 text-capitalize"
|
2024-10-11 12:30:55 +02:00
|
|
|
scope="col"
|
2024-10-14 11:55:59 +02:00
|
|
|
style="padding-top: {headerPaddingTop}px"
|
2024-10-11 12:30:55 +02:00
|
|
|
>
|
2024-10-14 18:37:48 +02:00
|
|
|
{cluster} Node Info
|
2024-10-11 12:30:55 +02:00
|
|
|
</th>
|
2024-10-14 11:55:59 +02:00
|
|
|
|
|
|
|
{#each selectedMetrics as metric (metric)}
|
2024-10-11 12:30:55 +02:00
|
|
|
<th
|
|
|
|
class="position-sticky top-0 text-center"
|
|
|
|
scope="col"
|
2024-10-14 11:55:59 +02:00
|
|
|
style="padding-top: {headerPaddingTop}px"
|
2024-10-11 12:30:55 +02:00
|
|
|
>
|
2024-10-14 11:55:59 +02:00
|
|
|
{metric} ({systemUnits[metric]})
|
2024-10-11 12:30:55 +02:00
|
|
|
</th>
|
|
|
|
{/each}
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
2024-10-14 18:37:48 +02:00
|
|
|
{#each data as nodeData (nodeData)}
|
|
|
|
<NodeListRow {nodeData} {cluster} {selectedMetrics}/>
|
2024-10-11 12:30:55 +02:00
|
|
|
{:else}
|
|
|
|
<tr>
|
2024-10-14 11:55:59 +02:00
|
|
|
<td>No nodes found </td>
|
2024-10-11 12:30:55 +02:00
|
|
|
</tr>
|
2024-10-14 11:55:59 +02:00
|
|
|
{/each}
|
2024-10-11 12:30:55 +02:00
|
|
|
</tbody>
|
|
|
|
</Table>
|
|
|
|
</div>
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.cc-table-wrapper {
|
|
|
|
overflow: initial;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cc-table-wrapper > :global(table) {
|
|
|
|
border-collapse: separate;
|
|
|
|
border-spacing: 0px;
|
|
|
|
table-layout: fixed;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cc-table-wrapper :global(button) {
|
|
|
|
margin-bottom: 0px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cc-table-wrapper > :global(table > tbody > tr > td) {
|
|
|
|
margin: 0px;
|
|
|
|
padding-left: 5px;
|
|
|
|
padding-right: 0px;
|
|
|
|
}
|
|
|
|
|
|
|
|
th.position-sticky.top-0 {
|
|
|
|
background-color: white;
|
|
|
|
z-index: 10;
|
|
|
|
border-bottom: 1px solid black;
|
|
|
|
}
|
|
|
|
</style>
|