From bcb45c24a437fbbdc79ca582ab2ee718da8da3d2 Mon Sep 17 00:00:00 2001 From: Daniele Sluijters Date: Thu, 13 Mar 2014 11:49:24 +0100 Subject: [PATCH] Switch the interface to Semantic-UI. --- puppetboard/static/css/puppetboard.css | 135 ++++++------------ puppetboard/static/js/tablesort.min.js | 9 ++ puppetboard/templates/400.html | 12 +- puppetboard/templates/403.html | 12 +- puppetboard/templates/404.html | 12 +- puppetboard/templates/500.html | 22 ++- puppetboard/templates/_macros.html | 14 +- puppetboard/templates/fact.html | 4 +- puppetboard/templates/facts.html | 6 +- puppetboard/templates/index.html | 184 +++++++++++++------------ puppetboard/templates/layout.html | 88 +++++------- puppetboard/templates/metric.html | 14 +- puppetboard/templates/node.html | 60 ++++---- puppetboard/templates/nodes.html | 57 ++++---- puppetboard/templates/query.html | 92 +++++-------- puppetboard/templates/report.html | 12 +- puppetboard/templates/reports.html | 2 +- 17 files changed, 327 insertions(+), 408 deletions(-) create mode 100644 puppetboard/static/js/tablesort.min.js diff --git a/puppetboard/static/css/puppetboard.css b/puppetboard/static/css/puppetboard.css index 46d002f..a00cbd0 100644 --- a/puppetboard/static/css/puppetboard.css +++ b/puppetboard/static/css/puppetboard.css @@ -1,104 +1,57 @@ body { - padding-top: 60px; + margin: 0; + font-family: "Open Sans", sans-serif; } -th.headerSortUp { - position: relative + +a { + color: #564F8A; + text-decoration: none; } -th.headerSortDown { - position: relative + +h1.ui.header.no-margin-bottom { + margin-bottom: 0; } -th.header { - position: relative + +.tablesorter-header-inner { + float: left; } -th.header:after { - content: "\f0dc"; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-decoration: inherit; - color: #000; - font-size: 18px; - padding-right: 0.5em; - float:right; + +th.tablesorter-headerAsc::after { + content: '\25b4' !important; + float: right; } -th.headerSortUp:after { - content: "\f0de"; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-decoration: inherit; - color: #000; - font-size: 18px; - padding-right: 0.5em; - float:right; + +th.tablesorter-headerDesc::after { + content: '\25be' !important; + float: right; } -th.headerSortDown:after { - content: "\f0dd"; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-decoration: inherit; - color: #000; - font-size: 18px; - padding-right: 0.5em; - float:right; + +.ui.grid.padding-bottom { + padding-bottom: 40px !important; } -.stat { - margin-bottom: 40px; + +.status { + width: 47%; + text-align: center; + display: block; } -.navbar .brand:hover { - color: #fff; +.count { + width: 21%; + text-align: center; + display: block; } -.table tbody tr.error>td { - background-color: #f2dede; + +.no-margin-top { + margin-top: -35px !important; } -h1.error { - color: rgb(223, 46, 27); + +.absolute { + position: fixed; + bottom: 0; + width: 100%; + background: #E8E8E8; } -h1.success { - color: #18BC9C; -} -h1.noop { - color:#aaa; -} -tr.event { - cursor: pointer; -} -td.message { - padding: 0; - border: 0; - background-color: #FFFFE9; -} -div[id^='message-event'] { - display: none; - padding: 4px 15px 4px 15px; -} -.label-count { - width:25px; - text-align:center; -} -.label-time { - width:73px; - text-align:center; -} -.label-status { - width:100px; - text-align:center; -} -.label-nothing { - background-color:#ddd; - color:#ddd; -} -.label.label-failed { - background-color: rgb(231, 76, 60); -} -.label.label-changed { - background-color: rgb(24, 188, 156); -} -.label.label-unreported { - background-color: rgb(231, 76, 60); - background-color: rgb(129, 145, 146); -} -.btn-lastreport { - width:100px; + +.absolute div { + padding: 1em; } diff --git a/puppetboard/static/js/tablesort.min.js b/puppetboard/static/js/tablesort.min.js new file mode 100644 index 0000000..ab17511 --- /dev/null +++ b/puppetboard/static/js/tablesort.min.js @@ -0,0 +1,9 @@ +/* + A simple, lightweight jQuery plugin for creating sortable tables. + https://github.com/kylefox/jquery-tablesort + Version 0.0.2 +*/ +$(function(){var a=window.jQuery;a.tablesort=function(d,c){var e=this;this.$table=d;this.$thead=this.$table.find("thead");this.settings=a.extend({},a.tablesort.defaults,c);this.$table.find("th").bind("click.tablesort",function(){e.sort(a(this))});this.direction=this.$th=this.index=null};a.tablesort.prototype={sort:function(d,c){var e=new Date,b=this,g=this.$table,n=0b.value?1*c:a.value -
-
-

Bad Request

-

The request sent to PuppetDB was invalid. This is usually caused by using an unsupported operator.

-
-
- +{% block content %} +

Bad Request

+

The request sent to PuppetDB was invalid. This is usually caused by using an unsupported operator.

{% endblock %} diff --git a/puppetboard/templates/403.html b/puppetboard/templates/403.html index bfe77d0..a5055d3 100644 --- a/puppetboard/templates/403.html +++ b/puppetboard/templates/403.html @@ -1,11 +1,5 @@ {% extends 'layout.html' %} -{% block row_fluid %} -
-
-
-

Permission Denied

-

What you were looking for has been disabled by the administrator.

-
-
-
+{% block content %} +

Permission Denied

+

What you were looking for has been disabled by the administrator.

{% endblock %} diff --git a/puppetboard/templates/404.html b/puppetboard/templates/404.html index e45a201..e9a99ac 100644 --- a/puppetboard/templates/404.html +++ b/puppetboard/templates/404.html @@ -1,11 +1,5 @@ {% extends 'layout.html' %} -{% block row_fluid %} -
-
-
-

Not Found

-

What you were looking for could not be found in PuppetDB.

-
-
-
+{% block content%} +

Not Found

+

What you were looking for could not be found in PuppetDB.

{% endblock %} diff --git a/puppetboard/templates/500.html b/puppetboard/templates/500.html index b79f451..b35ae0f 100644 --- a/puppetboard/templates/500.html +++ b/puppetboard/templates/500.html @@ -1,16 +1,10 @@ {% extends 'layout.html' %} -{% block row_fluid %} -
-
-
-

Internal Server Error

-

This error usually occurs because: -

    -
  • We were unable to reach PuppetDB;
    • -
  • The query to be executed was malformed resulting in an incorrectly encoded request.
    • -

-

Please have a look at the log output for further information.

-
-
-
+{% block content %} +

Internal Server Error

+

This error usually occurs because: +

    +
  • We were unable to reach PuppetDB;
    • +
  • The query to be executed was malformed resulting in an incorrectly encoded request.
    • +

+

Please have a look at the log output for further information.

{% endblock %} diff --git a/puppetboard/templates/_macros.html b/puppetboard/templates/_macros.html index ba70a69..3c0bad5 100644 --- a/puppetboard/templates/_macros.html +++ b/puppetboard/templates/_macros.html @@ -1,8 +1,8 @@ {% macro facts_table(facts, autofocus=False, condensed=False, show_node=False, show_value=True, link_facts=False, margin_top=20, margin_bottom=20) -%} -
- +
+
- +
{% if show_node %} @@ -96,10 +96,10 @@ {%- endmacro %} {% macro reports_table(reports, nodename, condensed=False, hash_truncate=False, show_conf_col=True, show_agent_col=True, show_host_col=True) -%} -
+
Only showing the last ten reports.
-
+
@@ -119,7 +119,7 @@ {% for report in reports %} {% if hash_truncate %} - {% set rep_hash = "%s…"|format(report.hash_[0:6])|safe %} + {% set rep_hash = "%s…"|format(report.hash_[0:10])|safe %} {% else %} {% set rep_hash = report.hash_ %} {% endif %} @@ -139,7 +139,7 @@ {% endif %} {% if show_host_col %} - + {% endif %} {% endfor %} diff --git a/puppetboard/templates/fact.html b/puppetboard/templates/fact.html index 9950d74..b6a9782 100644 --- a/puppetboard/templates/fact.html +++ b/puppetboard/templates/fact.html @@ -2,8 +2,8 @@ {% import '_macros.html' as macros %} {% block content %}

{{name}}{% if value %}/{{value}}{% endif %} ({{facts|length}})

-{{macros.facts_graph(facts, autofocus=True, show_node=True, margin_bottom=10)}} -{{macros.facts_graph_value(facts, autofocus=True, show_node=True, margin_bottom=10)}} +{#{{macros.facts_graph(facts, autofocus=True, show_node=True, margin_bottom=10)}}# +{{macros.facts_graph_value(facts, autofocus=True, show_node=True, margin_bottom=10)}}#} {% if value %} {{macros.facts_table(facts, autofocus=True, show_node=True, show_value=False, margin_bottom=10)}} {% else %} diff --git a/puppetboard/templates/facts.html b/puppetboard/templates/facts.html index 44177ec..98d390c 100644 --- a/puppetboard/templates/facts.html +++ b/puppetboard/templates/facts.html @@ -1,11 +1,11 @@ {% extends 'layout.html' %} {% block content %} -
- +
+
{%- for key,facts_list in facts_dict %} - {{key}} + {{key}}
Start time
{{report.agent_version}}{{nodename}}{{ report.node }}
- - - - - - - - - {% for node in nodes %} - {% if node.status != 'unchanged' %} - - - -
StatusHostname
- - {{node.status}} - - {% if node.status=='unreported'%} - {{ node.unreported_time }} - {% else %} - {% if node.events['failures'] %}{{node.events['failures']}}{% else %}0{% endif%} - {% if node.events['successes'] %}{{node.events['successes']}}{% else %}0{% endif%} - {% endif %} - {{ node.name }} - {% if node.unreported_time != None or node.status != 'unreported' %} - Latest Report - {% else %} - No Report +

Nodes status detail ({{nodes|length}})

+ + + + + + + + + + {% for node in nodes %} + {% if node.status != 'unchanged' %} + + + + + + {% endif %} + {% endfor %} + +
StatusHostname
+ + {{node.status}} + + {% if node.status=='unreported'%} + {{ node.unreported_time }} + {% else %} + {% if node.events['failures'] %}{{node.events['failures']}}{% else %}0{% endif%} + {% if node.events['successes'] %}{{node.events['successes']}}{% else %}0{% endif%} + {% endif %} + + {{ node.name }} + + + + +
{% else %} -

Nodes status detail

-
- Nothing seems to be changing. -
+

Nodes status detail

+
+ Nothing seems to be changing. +
{% endif %} -{% endblock row_fluid %} +{% endblock content %} diff --git a/puppetboard/templates/layout.html b/puppetboard/templates/layout.html index a49e942..c8fef60 100644 --- a/puppetboard/templates/layout.html +++ b/puppetboard/templates/layout.html @@ -2,66 +2,52 @@ - Puppetᴃoard - - - + Puppetboard + + + + -
-
-
- - - - - - Puppetboard -
-
    - {%- for endpoint, caption in [ - ('index', 'Overview'), - ('nodes', 'Nodes'), - ('facts', 'Facts'), - ('reports', 'Reports'), - ('metrics', 'Metrics'), - ('query', 'Query'), - ] %} - {{ caption }} - {%- endfor %} -
-
-
+
- {% block container %} -
-
- {% block row_fluid %} -
- {% block content %} {% endblock content %} -
- {% endblock row_fluid %} -
-
- {% endblock container %} -
-
-
- Copyright © 2013 Daniele Sluijters. Live from PuppetDB. -
+ {%- for endpoint, caption in [ + ('index', 'Overview'), + ('nodes', 'Nodes'), + ('facts', 'Facts'), + ('reports', 'Reports'), + ('metrics', 'Metrics'), + ('query', 'Query'), + ] %} + {{ caption }} + {%- endfor %} + +
+
+
+ {% block content %} {% endblock content %}
+
- - - - + + + + + + - + + {% block script %} {% endblock script %} diff --git a/puppetboard/templates/metric.html b/puppetboard/templates/metric.html index 0e8c250..1473883 100644 --- a/puppetboard/templates/metric.html +++ b/puppetboard/templates/metric.html @@ -2,11 +2,21 @@ {% block content %}

Metric - {% set name = "%s…"|format(name[:75])|safe if name|length > 75%} + {% if name|length > 75 %} + {% set name = "%s…"|format(name[:75])|safe %} + {% else %} + {% set name = name %} + {% endif %} {{name}}

- +
+ + + + + + {% for key,value in metric %} diff --git a/puppetboard/templates/node.html b/puppetboard/templates/node.html index 2a811cb..b5b4519 100644 --- a/puppetboard/templates/node.html +++ b/puppetboard/templates/node.html @@ -1,37 +1,39 @@ {% extends 'layout.html' %} {% import '_macros.html' as macros %} {% block content %} -
-
-

Details

-
OptionValue
- - - - - - - - - - - - - - - - -
HostnameFacts uploaded atCatalog compiled atReport uploaded at
{{node.name}}{{node.facts_timestamp}}{{node.catalog_timestamp}}{{node.report_timestamp}}
+
+
+
+

Details

+ + + + + + + + + + + + + + + + + + + +
Hostname{{node.name}}
Facts     {{node.facts_timestamp}}
Catalog {{node.catalog_timestamp}}
Report  {{node.report_timestamp}}
+
+
+

Reports

+ {{ macros.reports_table(reports, node.name, condensed=True, hash_truncate=True, show_conf_col=False, show_agent_col=False, show_host_col=False)}} +
-
-
-
+

Facts

- {{macros.facts_table(facts, link_facts=True, condensed=True, margin_top=10)}} -
-
-

Reports

- {{ macros.reports_table(reports, node.name, condensed=True, hash_truncate=True, show_conf_col=False, show_agent_col=False, show_host_col=False)}} + {{macros.facts_table(facts, link_facts=True, condensed=True)}}
{% endblock content %} diff --git a/puppetboard/templates/nodes.html b/puppetboard/templates/nodes.html index bc3b6af..c4545f6 100644 --- a/puppetboard/templates/nodes.html +++ b/puppetboard/templates/nodes.html @@ -1,56 +1,53 @@ {% extends 'layout.html' %} {% block content %} -
- PuppetDB currently only returns active nodes. +
+
- {% with messages = get_flashed_messages(with_categories=true) %} - {% if messages %} - {% for category, message in messages %} -
- {{message}} -
- {% endfor %} - {% endif %} - {% endwith %} -
- -
- +
- - + + {% for node in nodes %} - diff --git a/puppetboard/templates/query.html b/puppetboard/templates/query.html index dfbe4f0..757049b 100644 --- a/puppetboard/templates/query.html +++ b/puppetboard/templates/query.html @@ -1,61 +1,43 @@ {% extends 'layout.html' %} -{% block row_fluid %} -
-
- This is highly experimental and will likely set your server on fire. -
+{% block content %} +

Compose

+{% with messages = get_flashed_messages(with_categories=true) %} +{% if messages %} +{% for category, message in messages %} +
+ {{message}}
-
-
-
-

Compose

- {% with messages = get_flashed_messages(with_categories=true) %} - {% if messages %} - {% for category, message in messages %} -
- {{message}} +{% endfor %} +{% endif %} +{% endwith %} +
+
+ {{form.query(autofocus="autofocus", rows=5, placeholder="Enter your query: [\"=\", \"name\", \"hostname\"]. You may omit the opening and closing bracket.")}} +
+
+ {% for subfield in form.endpoints %} +
+
+ {{subfield }} + {{subfield.label}}
+
{% endfor %} - {% endif %} - {% endwith %} - - {{ form.csrf_token }} -
- {{form.query.label(class_="control-label")}} -
- {{form.query(class_="input-block-level", autofocus="autofocus", rows=5, placeholder="\"=\", \"name\", \"hostname\"")}} - {% if form.query.errors %} - {% for error in form.query.errors %}{{error}}{% endfor %} - {% endif %} -
-
-
- {{form.endpoints.label(class_="control-label")}} -
- {% for subfield in form.endpoints %} - {{subfield.label(class_="radio inline")}} - {{subfield }} - {% endfor %} - {% if form.endpoints.errors %} - {% for error in form.endpoints.errors %}{{error}}{% endfor %} - {% endif %} -
-
-
- - -
- {{ form.hidden_tag() }} -
-
- {% if result %} -
-
-

Result

- 
{{result|jsonprint}}
-
-
- {% endif %} + {{ form.hidden_tag() }} + + +
-{% endblock row_fluid %} + +{% if result %} +
+
+

Result

+ 
{{result|jsonprint}}
+
+
+{% endif %} +{% endblock content %} diff --git a/puppetboard/templates/report.html b/puppetboard/templates/report.html index 7a452f3..5e4a185 100644 --- a/puppetboard/templates/report.html +++ b/puppetboard/templates/report.html @@ -1,7 +1,7 @@ {% extends 'layout.html' %} {% block content %}

Summary

-
Status HostnameCatalog compiled atLast reportCatalogReport  
- {{ node.status }} - - {% if node.status=='unreported'%} - {{ node.unreported_time }} - {% else %} - {% if node.events['failures'] %}{{node.events['failures']}}{% else %}0{% endif%} - {% if node.events['successes'] %}{{node.events['successes']}}{% else %}0{% endif%} - {% endif %} + + + {{node.status}} + + {% if node.status=='unreported'%} + {{ node.unreported_time }} + {% else %} + {% if node.events['failures'] %}{{node.events['failures']}}{% else %}0{% endif%} + {% if node.events['successes'] %}{{node.events['successes']}}{% else %}0{% endif%} + {% endif %} {{node.name}} {{node.catalog_timestamp}} {% if node.report_timestamp %} - {{ node.report_timestamp }} + {{ node.report_timestamp }} {% else %} - + {% endif %} {% if node.report_timestamp %} - Latest Report - Reports + + {% endif %}
+
@@ -27,7 +27,7 @@
Hostname

Events

- +
@@ -39,22 +39,22 @@ {% for event in events %} {% if not event.failed and event.item['old'] != event.item['new'] %} - + {% elif event.failed %} - + {% endif %} - + {# - + #} {% endfor %}
Resource
{{event.item['type']}}[{{event.item['title']}}] {{event.status}} {{event.item['old']}} {{event.item['new']}}
{{event.item['message']}}
diff --git a/puppetboard/templates/reports.html b/puppetboard/templates/reports.html index 2d65c70..924d325 100644 --- a/puppetboard/templates/reports.html +++ b/puppetboard/templates/reports.html @@ -1,6 +1,6 @@ {% extends 'layout.html' %} {% block content %} -
+
Pending #21600. You can access reports for a node or individual reports through the Nodes tab.
{% endblock content %}