kemko/nomad
1
0
Fork 0
mirror of https://github.com/kemko/nomad.git synced 2026-01-06 10:25:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Updated alloc and cluster details on topo page

Browse Source
This commit is contained in:
Michael Lange
2020-09-11 14:53:18 -07:00
parent 290f7d8fb4
commit 3cd464d03c
4 changed files with 67 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
ui/app/styles/components/dashboard-metric.scss
View File

@@ -1,5 +1,7 @@
.dashboard-metric {
margin-top: 1.5em;
&:not(:last-child) {
margin-bottom: 1.5em;
}
.metric {
text-align: left;
@@ -28,4 +30,17 @@
.annotation {
margin-top: -0.75rem;
}
&.with-divider {
border-top: 1px solid $grey-blue;
padding-top: 1.5em;
}
.pair {
font-size: $size-5;
}
.is-faded {
color: darken($grey-blue, 20%);
}
}

4
ui/app/styles/core/columns.scss
View File

@@ -23,4 +23,8 @@
margin-left: auto;
margin-right: auto;
}
&.is-flush {
margin-bottom: 0;
}
}

2
ui/app/templates/components/topo-viz.hbs
View File

@@ -11,7 +11,7 @@
{{/each}}
{{#if this.activeAllocation}}
<svg class="chart topo-viz-edges" {{window-resize this.computedActiveEdges}}>
<svg class="chart topo-viz-edges" {{window-resize this.computedActiveEdges}}>
{{#each this.activeEdges as |edge|}}
<line class="edge" x1={{edge.x1}} y1={{edge.y1}} x2={{edge.x2}} y2={{edge.y2}} />
{{/each}}

85
ui/app/templates/topology.hbs
View File

@@ -27,47 +27,54 @@
<div class="boxed-section-head">{{if this.activeAllocation "Allocation" "Cluster"}} Details</div>
<div class="boxed-section-body">
{{#if this.activeAllocation}}
<h3 style="font-size:16px">
<strong>Allocation:</strong>
<LinkTo @route="allocations.allocation" @model={{this.activeAllocation}} class="is-primary">{{this.activeAllocation.shortId}}</LinkTo>
</h3>
<p><strong>Sibling Allocations:</strong> {{this.siblingAllocations.length}}</p>
<p><strong>Unique Client Placements:</strong> {{this.uniqueActiveAllocationNodes.length}}</p>
<p></p>
<p>
<strong>Job:</strong>
<LinkTo
@route="jobs.job"
@model={{this.activeAllocation.job}}
@query={{hash jobNamespace=this.activeAllocation.job.namespace.id}} data-test-job>
{{this.activeAllocation.job.name}}
</LinkTo>
</p>
<p>
<strong>Client:</strong>
<LinkTo @route="clients.client" @model={{this.activeAllocation.node}}>
{{this.activeAllocation.node.name}} ({{this.activeAllocation.node.shortId}})
</LinkTo>
</p>
<PrimaryMetric @resource={{this.activeAllocation}} @metric="memory" class="is-short" />
<PrimaryMetric @resource={{this.activeAllocation}} @metric="cpu" class="is-short" />
{{else}}
<div class="metric-group columns is-centered">
<div class="metric">
<h3 class="label">DCs</h3>
<p class="value">{{this.datacenters.length}}</p>
</div>
<div class="metric">
<h3 class="label">Clients</h3>
<p class="value">{{this.model.nodes.length}}</p>
</div>
<div class="metric">
<h3 class="label">Allocations</h3>
{{! TODO: make sure that this is only the scheduled allocations }}
<p class="value">{{this.model.allocations.length}}</p>
</div>
<div class="dashboard-metric">
<h3 class="pair">
<strong>Allocation:</strong>
<LinkTo @route="allocations.allocation" @model={{this.activeAllocation}} class="is-primary">{{this.activeAllocation.shortId}}</LinkTo>
</h3>
<p><strong>Sibling Allocations:</strong> {{this.siblingAllocations.length}}</p>
<p><strong>Unique Client Placements:</strong> {{this.uniqueActiveAllocationNodes.length}}</p>
</div>
<div class="dashboard-metric with-divider">
<h3 class="pair">
<strong>Job:</strong>
<LinkTo
@route="jobs.job"
@model={{this.activeAllocation.job}}
@query={{hash jobNamespace=this.activeAllocation.job.namespace.id}} data-test-job>
{{this.activeAllocation.job.name}}</LinkTo>
<span class="is-faded" data-test-task-group> / {{this.activeAllocation.taskGroupName}}</span>
</h3>
<p><strong>Type:</strong> {{this.activeAllocation.job.type}}</p>
<p><strong>Priority:</strong> {{this.activeAllocation.job.priority}}</p>
</div>
<div class="dashboard-metric with-divider">
<h3 class="pair">
<strong>Client:</strong>
<LinkTo @route="clients.client" @model={{this.activeAllocation.node}}>
{{this.activeAllocation.node.shortId}}
</LinkTo>
</h3>
<p><strong>Name:</strong> {{this.activeAllocation.node.name}}</p>
<p><strong>Address:</strong> {{this.activeAllocation.node.httpAddr}}</p>
</div>
<div class="dashboard-metric with-divider">
<PrimaryMetric @resource={{this.activeAllocation}} @metric="memory" class="is-short" />
</div>
<div class="dashboard-metric">
<PrimaryMetric @resource={{this.activeAllocation}} @metric="cpu" class="is-short" />
</div>
{{else}}
<div class="columns is-flush">
<div class="dashboard-metric column">
<p class="metric">{{this.model.nodes.length}} <span class="metric-label">Clients</span></p>
</div>
<div class="dashboard-metric column">
{{! TODO: make sure that this is only the scheduled allocations }}
<p class="metric">{{this.model.allocations.length}} <span class="metric-label">Allocations</span></p>
</div>
</div>
<div class="dashboard-metric with-divider">
<p class="metric">{{this.totalMemoryFormatted}} <span class="metric-units">{{this.totalMemoryUnits}}</span> <span class="metric-label">of memory</span></p>
<div class="columns graphic">
<div class="column">