mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2025-03-15 10:25:55 +01:00
96 lines
2.3 KiB
Svelte
96 lines
2.3 KiB
Svelte
<!--
|
|
@component Cluster Per Node List component; renders current state of SELECTABLE metrics for ALL nodes
|
|
|
|
Properties:
|
|
- `cluster String`: The nodes' cluster
|
|
- `data [Object]`: The node data array for all nodes
|
|
- `selectedMetrics [String]`: The array of selected metrics
|
|
- `selectedMetrics Object`: The object of metric units
|
|
-->
|
|
|
|
<script>
|
|
import { Row, Table } from "@sveltestrap/sveltestrap";
|
|
import {
|
|
stickyHeader
|
|
} from "../generic/utils.js";
|
|
import NodeListRow from "./nodelist/NodeListRow.svelte";
|
|
|
|
export let cluster;
|
|
export let data = null;
|
|
export let selectedMetrics = [];
|
|
export let systemUnits = null;
|
|
|
|
// Always use ONE BIG list, but: Make copyable markers -> Nodeinfo ! (like in markdown)
|
|
|
|
let headerPaddingTop = 0;
|
|
stickyHeader(
|
|
".cc-table-wrapper > table.table >thead > tr > th.position-sticky:nth-child(1)",
|
|
(x) => (headerPaddingTop = x),
|
|
);
|
|
</script>
|
|
|
|
<Row>
|
|
<div class="col cc-table-wrapper">
|
|
<Table cellspacing="0px" cellpadding="0px">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
class="position-sticky top-0 text-capitalize"
|
|
scope="col"
|
|
style="padding-top: {headerPaddingTop}px;"
|
|
>
|
|
{cluster} Node Info
|
|
</th>
|
|
|
|
{#each selectedMetrics as metric (metric)}
|
|
<th
|
|
class="position-sticky top-0 text-center"
|
|
scope="col"
|
|
style="padding-top: {headerPaddingTop}px"
|
|
>
|
|
{metric} ({systemUnits[metric]})
|
|
</th>
|
|
{/each}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each data as nodeData (nodeData.host)}
|
|
<NodeListRow {nodeData} {cluster} {selectedMetrics}/>
|
|
{:else}
|
|
<tr>
|
|
<td>No nodes found </td>
|
|
</tr>
|
|
{/each}
|
|
</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>
|