puppetboard: Adding a more intuitive catalog view

A new endpoint in the header, Catalogs, takes the user to a page with a node
table similar to that in the nodes page. This table shows the node with a
link to the node page, the catalog timestamp with a link to the catalog
page and a small form with a select field to be used to compare the
catalog of this row's node with that of another node.
This commit is contained in:
Corey Hammerton
2015-09-23 11:16:20 -04:00
parent bce33aee0f
commit a3473abf61
5 changed files with 217 additions and 2 deletions

View File

@@ -0,0 +1,87 @@
{% extends 'layout.html' %}
{% block content %}
<table class="ui basic table">
<tbody>
<tr>
<th><h1>Comparing</h1></th>
<th><h1>Against</h1></th>
</tr>
<tr>
<td>{{compare.node}}</td>
<td>{{against.node}}</td>
</tr>
<tr>
<td>
<table class="ui basic table compact catalog">
<thead>
<tr><th>Resources</th></tr>
</thead>
<tbody>
{% for resource in compare.get_resources() %}
<tr>
<td>{{resource.type_}}[{{resource.name}}]</td>
</tr>
{% endfor %}
</tbody>
</table>
</td>
<td>
<table class="ui basic table compact catalog">
<thead>
<tr><th>Resources</th></tr>
</thead>
<tbody>
{% for resource in against.get_resources() %}
<tr>
<td>{{resource.type_}}[{{resource.name}}]</td>
</tr>
{% endfor %}
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table class="ui basic table compact catalog">
<thead>
<tr>
<th>Edges</th>
<th>-&gt;</th>
<th>Target</th>
</tr>
</thead>
<tbody>
{% for edge in compare.get_edges() %}
<tr>
<td>{{edge.source}}</td>
<td>{{edge.relationship}}</td>
<td>{{edge.target}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</td>
<td>
<table class="ui basic table compact catalog">
<thead>
<tr>
<th>Edge</th>
<th>-&gt;</th>
<th>Target</th>
</tr>
</thead>
<tbody>
{% for edge in against.get_edges() %}
<tr>
<td>{{edge.source}}</td>
<td>{{edge.relationship}}</td>
<td>{{edge.target}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
{% endblock content %}

View File

@@ -0,0 +1,40 @@
{% extends 'layout.html' %}
{% import '_macros.html' as macros %}
{% block content %}
<div class="ui fluid icon input hide" style="margin-bottom:20px">
<input autofocus="autofocus" class="filter-table" placeholder="Type here to filter...">
</div>
<table class='ui compact basic table nodes'>
<thead>
<tr>
<th></th>
<th>Hostname</th>
<th>Compile Time</th>
<th>Compare With</th>
</tr>
</thead>
<tbody class="searchable">
{% for node in nodes %}
<tr>
<td></td>
<td><a href="{{url_for('node', node_name=node.name)}}">{{node.name}}</a></td>
<td><a rel="utctimestamp" href="{{url_for('catalog_node', node_name=node.name)}}">{{node.catalog_timestamp}}</a></td>
<td>
{% if node.form %}
<div class="ui form">
<form method="POST" action="{{url_for('catalog_submit')}}">
{{node.form.csrf_token}}
<div class="field inline">
{{node.form.compare}}
{{node.form.against}}
<input type="submit" class="ui submit button" style="height:auto;" value="Compare"/>
</div>
</form>
</div>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock content %}

View File

@@ -34,6 +34,7 @@
('reports', 'Reports'),
('metrics', 'Metrics'),
('inventory', 'Inventory'),
('catalogs', 'Catalogs'),
('query', 'Query'),
] %}
<a {% if endpoint == request.endpoint %} class="active item" {% else %} class="item" {% endif %}